chore: add correct table component types to the prop tables (#4091)

* add correct table component types to the prop tables

* ignore directory from coverage

docs/content/components/collection/table/table.mdx

@@ -266,23 +266,23 @@ Note the usage of `isRowHeader` in the example below. It controls which columns
 
 ### Table.Header
 
-<PropsTable component="TableHeader" />
+<PropsTable component="Table.Header" />
 
 ### Table.Column
 
-<PropsTable component="TableColumnHeader" />
+<PropsTable component="Table.Column" />
 
 ### Table.Body
 
-<PropsTable component="TableBody" />
+<PropsTable component="Table.Body" />
 
 ### Table.Row
 
-<PropsTable component="TableRow" />
+<PropsTable component="Table.Row" />
 
 ### Table.Cell
 
-<PropsTable component="TableCell" />
+<PropsTable component="Table.Cell" />
 
 ## Alternative components
 

docs/scripts/build-component-props.mjs

@@ -157,6 +157,7 @@ const transformTypeValue = async val => {
     'keyof NumberFormatOptionsCurrencyDisplayRegistry',
     'boolean | keyof NumberFormatOptionsUseGroupingRegistry | "true" | "false"',
     'keyof NumberFormatOptionsSignDisplayRegistry',
+    'T[]',
   ];
   let text = val.type.name;
 

jest.config.js

@@ -10,6 +10,7 @@ module.exports = createConfig({
     '!**/packages/types/**',
     '!**/*.stories.tsx',
     '!**/theme-preset/**',
+    '!packages/components/src/_propTableTypes/**',
     // needed for coverage not to break should be fixed soon
     '!packages/components/src/Accordion/useAccordionItem.ts',
     '!packages/components/src/Accordion/Accordion.tsx',

packages/components/src/_propTableTypes/README.md

@@ -0,0 +1,34 @@
+# \_propTableTypes directory
+
+This directory is a workaround for using compound components like in the table because react-docgen-typescript can't
+solve types from compound components. It is used by the script `build-component-props.mjs` to generate the correct type.
+Then this type can be used in the props table.
+
+## File name
+
+Create a file with the name of the compound component part e.g `Table.Body`.
+
+## import type
+
+Import the type which can't be autogenerated. Normally it is the type which belongs to the compound component part
+e.g. `Table.Cell = <b>Cell</b>;`
+
+`import { Cell as ReactAriaCell } from '@react-stately/table';`
+
+Note: You should use an alias. Name it whatever you want.
+
+## export type
+
+Finally export the imported type.
+
+`export const Cell = ReactAriaCell;`
+
+## run script
+
+After creating the file with the content run `pnpm buil-component-props`. Then search for the file name in `props.json`
+and you should find the type.
+
+## using in prop table
+
+Use the new type in the props table. For this just pass the file name into the component prop e.g.
+`<PropsTable component="Table.Cell" />`

packages/components/src/_propTableTypes/Table.Body.tsx

@@ -0,0 +1,3 @@
+import { TableBody as ReactAriaTableBody } from '@react-stately/table';
+
+export const Body = ReactAriaTableBody;

packages/components/src/_propTableTypes/Table.Cell.tsx

@@ -0,0 +1,3 @@
+import { Cell as ReactAriaCell } from '@react-stately/table';
+
+export const Cell = ReactAriaCell;

packages/components/src/_propTableTypes/Table.Column.tsx

@@ -0,0 +1,3 @@
+import { Column as ReactAriaColumn } from '@react-stately/table';
+
+export const Column = ReactAriaColumn;

packages/components/src/_propTableTypes/Table.Header.tsx

@@ -0,0 +1,3 @@
+import { TableHeader as ReactAriaTableHeader } from '@react-stately/table';
+
+export const Header = ReactAriaTableHeader;

packages/components/src/_propTableTypes/Table.Row.tsx

@@ -0,0 +1,3 @@
+import { Row as ReactAriaRow } from '@react-stately/table';
+
+export const Row = ReactAriaRow;