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