From f65534150ade28e80b8368b61a37f9cc271527cc Mon Sep 17 00:00:00 2001 From: aromko Date: Tue, 6 Aug 2024 10:22:27 +0200 Subject: [PATCH 1/2] add correct table component types to the prop tables --- .../components/collection/table/table.mdx | 10 +++--- docs/scripts/build-component-props.mjs | 1 + .../components/src/_propTableTypes/README.md | 34 +++++++++++++++++++ .../src/_propTableTypes/Table.Body.tsx | 3 ++ .../src/_propTableTypes/Table.Cell.tsx | 3 ++ .../src/_propTableTypes/Table.Column.tsx | 3 ++ .../src/_propTableTypes/Table.Header.tsx | 3 ++ .../src/_propTableTypes/Table.Row.tsx | 3 ++ 8 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/_propTableTypes/README.md create mode 100644 packages/components/src/_propTableTypes/Table.Body.tsx create mode 100644 packages/components/src/_propTableTypes/Table.Cell.tsx create mode 100644 packages/components/src/_propTableTypes/Table.Column.tsx create mode 100644 packages/components/src/_propTableTypes/Table.Header.tsx create mode 100644 packages/components/src/_propTableTypes/Table.Row.tsx diff --git a/docs/content/components/collection/table/table.mdx b/docs/content/components/collection/table/table.mdx index 6dff816b59..3c3f5c2883 100644 --- a/docs/content/components/collection/table/table.mdx +++ b/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 - + ### Table.Column - + ### Table.Body - + ### Table.Row - + ### Table.Cell - + ## Alternative components diff --git a/docs/scripts/build-component-props.mjs b/docs/scripts/build-component-props.mjs index 4be272179f..da7d905756 100644 --- a/docs/scripts/build-component-props.mjs +++ b/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; diff --git a/packages/components/src/_propTableTypes/README.md b/packages/components/src/_propTableTypes/README.md new file mode 100644 index 0000000000..ad542ab606 --- /dev/null +++ b/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 = Cell;` + +`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. +`` diff --git a/packages/components/src/_propTableTypes/Table.Body.tsx b/packages/components/src/_propTableTypes/Table.Body.tsx new file mode 100644 index 0000000000..60d8a90fd8 --- /dev/null +++ b/packages/components/src/_propTableTypes/Table.Body.tsx @@ -0,0 +1,3 @@ +import { TableBody as ReactAriaTableBody } from '@react-stately/table'; + +export const Body = ReactAriaTableBody; diff --git a/packages/components/src/_propTableTypes/Table.Cell.tsx b/packages/components/src/_propTableTypes/Table.Cell.tsx new file mode 100644 index 0000000000..dd108759ff --- /dev/null +++ b/packages/components/src/_propTableTypes/Table.Cell.tsx @@ -0,0 +1,3 @@ +import { Cell as ReactAriaCell } from '@react-stately/table'; + +export const Cell = ReactAriaCell; diff --git a/packages/components/src/_propTableTypes/Table.Column.tsx b/packages/components/src/_propTableTypes/Table.Column.tsx new file mode 100644 index 0000000000..23bf8ddc1f --- /dev/null +++ b/packages/components/src/_propTableTypes/Table.Column.tsx @@ -0,0 +1,3 @@ +import { Column as ReactAriaColumn } from '@react-stately/table'; + +export const Column = ReactAriaColumn; diff --git a/packages/components/src/_propTableTypes/Table.Header.tsx b/packages/components/src/_propTableTypes/Table.Header.tsx new file mode 100644 index 0000000000..b9c0a5aad1 --- /dev/null +++ b/packages/components/src/_propTableTypes/Table.Header.tsx @@ -0,0 +1,3 @@ +import { TableHeader as ReactAriaTableHeader } from '@react-stately/table'; + +export const Header = ReactAriaTableHeader; diff --git a/packages/components/src/_propTableTypes/Table.Row.tsx b/packages/components/src/_propTableTypes/Table.Row.tsx new file mode 100644 index 0000000000..a8fabd65af --- /dev/null +++ b/packages/components/src/_propTableTypes/Table.Row.tsx @@ -0,0 +1,3 @@ +import { Row as ReactAriaRow } from '@react-stately/table'; + +export const Row = ReactAriaRow; From a659fa8fc00166dbb092b77cf6c21d5e04f29aac Mon Sep 17 00:00:00 2001 From: aromko Date: Tue, 6 Aug 2024 11:03:21 +0200 Subject: [PATCH 2/2] ignore directory from coverage --- jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jest.config.js b/jest.config.js index 532feaf7e5..4f1db48c5a 100644 --- a/jest.config.js +++ b/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',