1import {
2  CommentData,
3  GeneratedData,
4  MethodSignatureData,
5  PropsDefinitionData,
6} from '~/components/plugins/api/APIDataTypes';
7import { APISectionDeprecationNote } from '~/components/plugins/api/APISectionDeprecationNote';
8import APISectionProps from '~/components/plugins/api/APISectionProps';
9import {
10  CommentTextBlock,
11  resolveTypeName,
12  getComponentName,
13  STYLES_APIBOX,
14  getTagNamesList,
15  H3Code,
16} from '~/components/plugins/api/APISectionUtils';
17import { H2, BOLD, P, CODE } from '~/ui/components/Text';
18
19export type APISectionComponentsProps = {
20  data: GeneratedData[];
21  componentsProps: PropsDefinitionData[];
22};
23
24const getComponentComment = (comment: CommentData, signatures: MethodSignatureData[]) =>
25  comment || (signatures?.[0]?.comment ?? undefined);
26
27const renderComponent = (
28  { name, comment, type, extendedTypes, children, signatures }: GeneratedData,
29  componentsProps?: PropsDefinitionData[]
30): JSX.Element => {
31  const resolvedType = extendedTypes?.length ? extendedTypes[0] : type;
32  const resolvedName = getComponentName(name, children);
33  const extractedComment = getComponentComment(comment, signatures);
34  return (
35    <div key={`component-definition-${resolvedName}`} css={STYLES_APIBOX}>
36      <APISectionDeprecationNote comment={extractedComment} />
37      <H3Code tags={getTagNamesList(comment)}>
38        <CODE>{resolvedName}</CODE>
39      </H3Code>
40      {resolvedType && (
41        <P>
42          <BOLD>Type:</BOLD> <CODE>{resolveTypeName(resolvedType)}</CODE>
43        </P>
44      )}
45      <CommentTextBlock comment={extractedComment} />
46      {componentsProps && componentsProps.length ? (
47        <APISectionProps
48          data={componentsProps}
49          header={componentsProps.length === 1 ? 'Props' : `${resolvedName}Props`}
50        />
51      ) : null}
52    </div>
53  );
54};
55
56const APISectionComponents = ({ data, componentsProps }: APISectionComponentsProps) =>
57  data?.length ? (
58    <>
59      <H2 key="components-header">{data.length === 1 ? 'Component' : 'Components'}</H2>
60      {data.map(component =>
61        renderComponent(
62          component,
63          componentsProps.filter(cp =>
64            cp.name.includes(getComponentName(component.name, component.children))
65          )
66        )
67      )}
68    </>
69  ) : null;
70
71export default APISectionComponents;
72