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} from '~/components/plugins/api/APISectionUtils';
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  return (
34    <div key={`component-definition-${resolvedName}`}>
35      <H3Code>
36        <InlineCode>{resolvedName}</InlineCode>
37      </H3Code>
38      {resolvedType && (
39        <P>
40          <B>Type:</B> <InlineCode>{resolveTypeName(resolvedType)}</InlineCode>
41        </P>
42      )}
43      <CommentTextBlock comment={getComponentComment(comment, signatures)} />
44      {componentsProps && componentsProps.length ? (
45        <APISectionProps data={componentsProps} header={`${resolvedName}Props`} />
46      ) : null}
47    </div>
48  );
49};
50
51const APISectionComponents = ({ data, componentsProps }: APISectionComponentsProps) =>
52  data?.length ? (
53    <>
54      <H2 key="components-header">Components</H2>
55      {data.map(component =>
56        renderComponent(
57          component,
58          componentsProps.filter(cp =>
59            cp.name.includes(getComponentName(component.name, component.children))
60          )
61        )
62      )}
63    </>
64  ) : null;
65
66export default APISectionComponents;
67