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 { ConstantDefinitionData, PropsDefinitionData } from '~/components/plugins/api/APIDataTypes';
7import APISectionProps from '~/components/plugins/api/APISectionProps';
8import { CommentTextBlock, resolveTypeName } from '~/components/plugins/api/APISectionUtils';
9
10export type APISectionComponentsProps = {
11  data: ConstantDefinitionData[];
12  componentsProps: PropsDefinitionData[];
13};
14
15const renderComponent = (
16  { name, comment, type }: ConstantDefinitionData,
17  componentsProps?: PropsDefinitionData[]
18): JSX.Element => (
19  <div key={`component-definition-${name}`}>
20    <H3Code>
21      <InlineCode>{name}</InlineCode>
22    </H3Code>
23    <P>
24      <B>Type:</B> <InlineCode>{resolveTypeName(type)}</InlineCode>
25    </P>
26    <CommentTextBlock comment={comment} />
27    {componentsProps && componentsProps.length ? (
28      <APISectionProps data={componentsProps} header={`${name}Props`} />
29    ) : null}
30  </div>
31);
32
33const APISectionComponents: React.FC<APISectionComponentsProps> = ({ data, componentsProps }) =>
34  data?.length ? (
35    <>
36      <H2 key="components-header">Components</H2>
37      {data.map(component =>
38        renderComponent(
39          component,
40          componentsProps.filter(cp => cp.name.includes(component.name))
41        )
42      )}
43    </>
44  ) : null;
45
46export default APISectionComponents;
47