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 { GeneratedData, 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: GeneratedData[];
12  componentsProps: PropsDefinitionData[];
13};
14
15const renderComponent = (
16  { name, comment, type, extendedTypes }: GeneratedData,
17  componentsProps?: PropsDefinitionData[]
18): JSX.Element => {
19  const finalType = extendedTypes?.length ? extendedTypes[0] : type;
20  return (
21    <div key={`component-definition-${name}`}>
22      <H3Code>
23        <InlineCode>{name}</InlineCode>
24      </H3Code>
25      {finalType && (
26        <P>
27          <B>Type:</B> <InlineCode>{resolveTypeName(finalType)}</InlineCode>
28        </P>
29      )}
30      <CommentTextBlock comment={comment} />
31      {componentsProps && componentsProps.length ? (
32        <APISectionProps data={componentsProps} header={`${name}Props`} />
33      ) : null}
34    </div>
35  );
36};
37
38const APISectionComponents = ({ data, componentsProps }: APISectionComponentsProps) =>
39  data?.length ? (
40    <>
41      <H2 key="components-header">Components</H2>
42      {data.map(component =>
43        renderComponent(
44          component,
45          componentsProps.filter(cp => cp.name.includes(component.name))
46        )
47      )}
48    </>
49  ) : null;
50
51export default APISectionComponents;
52