From 724278d079ec481f49691ab510accac6ca90cac3 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 7 Mar 2023 15:08:23 +0100 Subject: [PATCH 1/4] feat(propsbasedoncomponent): shared propsBasedOnComponent to Pagination and Col --- packages/grid/src/Grid.tsx | 2 +- packages/grid/src/__tests__/Col.test.tsx | 2 +- packages/grid/src/components/Col.tsx | 7 ++++--- packages/grid/src/components/Col.types.ts | 13 ++----------- shared/types/PropsBasedOnComponent.ts | 20 ++++++++++++++++++++ 5 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 shared/types/PropsBasedOnComponent.ts diff --git a/packages/grid/src/Grid.tsx b/packages/grid/src/Grid.tsx index 5ee9c5947..fc4d4f6df 100644 --- a/packages/grid/src/Grid.tsx +++ b/packages/grid/src/Grid.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import Col from './components/Col'; +import { Col } from './components/Col'; import Container from './components/Container'; import Row from './components/Row'; diff --git a/packages/grid/src/__tests__/Col.test.tsx b/packages/grid/src/__tests__/Col.test.tsx index 679311397..4ccbbacc4 100644 --- a/packages/grid/src/__tests__/Col.test.tsx +++ b/packages/grid/src/__tests__/Col.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import Col from '../components/Col'; +import { Col } from '../components/Col'; describe('Grid.Col', () => { describe('Snapshots tests', () => { diff --git a/packages/grid/src/components/Col.tsx b/packages/grid/src/components/Col.tsx index 96e3b8c33..bfd75776b 100644 --- a/packages/grid/src/components/Col.tsx +++ b/packages/grid/src/components/Col.tsx @@ -1,5 +1,6 @@ import React, { useMemo } from 'react'; import cn from 'classnames'; +import { PropsBasedOnComponent } from 'shared/types/PropsBasedOnComponent'; import getGridClassNames from '../utils/getGridClassNames'; @@ -8,7 +9,7 @@ import { ColProps } from './Col.types'; import guttersStyles from '../styles/gutters.module.css'; import styles from './Col.module.css'; -function Col({ +export const Col: PropsBasedOnComponent = ({ component, className, align, @@ -17,7 +18,7 @@ function Col({ width, children, dataTestId, -}: ColProps) { +}) => { const Component = component ?? 'div'; const gridClassNames = useMemo( @@ -38,6 +39,6 @@ function Col({ {children} ); -} +}; export default Col; diff --git a/packages/grid/src/components/Col.types.ts b/packages/grid/src/components/Col.types.ts index e7ae6c944..b40300ab6 100644 --- a/packages/grid/src/components/Col.types.ts +++ b/packages/grid/src/components/Col.types.ts @@ -2,7 +2,7 @@ import React from 'react'; import { ResponsivePropertyType } from '../Grid.types'; -type ColBaseProps = { +export interface ColProps { /** * Additional class */ @@ -43,12 +43,6 @@ type ColBaseProps = { */ order?: ResponsivePropertyType; - /** - * The component used for the root node. Either a string to use a HTML element or a component - * @default "div" - */ - component?: E; - /** * Content */ @@ -58,7 +52,4 @@ type ColBaseProps = { * Identifier for automated testing systems */ dataTestId?: string; -}; - -export type ColProps = ColBaseProps & - Omit, keyof ColBaseProps>; +} diff --git a/shared/types/PropsBasedOnComponent.ts b/shared/types/PropsBasedOnComponent.ts new file mode 100644 index 000000000..52169268e --- /dev/null +++ b/shared/types/PropsBasedOnComponent.ts @@ -0,0 +1,20 @@ +import React from 'react'; + +/** + * `PropsBasedOnComponent` - This interface inherits props from a designated Component + */ +export interface PropsBasedOnComponent< + ComponentBaseProps, + DefaultElement extends React.ElementType, +> { + ( + props: { + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component?: Component; + } & ComponentBaseProps & + Omit, keyof ComponentBaseProps>, + ): JSX.Element | null; +} From 1af41429097f16539b70448ac2070cadb4017937 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 7 Mar 2023 15:09:01 +0100 Subject: [PATCH 2/4] feat(propsbasedoncomponent): propsbasedoncomponent shared to Pagination and Grid.Col --- packages/grid/src/components/Col.tsx | 4 +--- packages/pagination/src/Pagination.types.ts | 20 -------------------- packages/pagination/src/PaginationItem.tsx | 8 +++----- packages/pagination/tsconfig.json | 2 +- 4 files changed, 5 insertions(+), 29 deletions(-) diff --git a/packages/grid/src/components/Col.tsx b/packages/grid/src/components/Col.tsx index bfd75776b..5647660f3 100644 --- a/packages/grid/src/components/Col.tsx +++ b/packages/grid/src/components/Col.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import cn from 'classnames'; -import { PropsBasedOnComponent } from 'shared/types/PropsBasedOnComponent'; +import { PropsBasedOnComponent } from '../../../../shared/types/PropsBasedOnComponent'; import getGridClassNames from '../utils/getGridClassNames'; import { ColProps } from './Col.types'; @@ -40,5 +40,3 @@ export const Col: PropsBasedOnComponent = ({ ); }; - -export default Col; diff --git a/packages/pagination/src/Pagination.types.ts b/packages/pagination/src/Pagination.types.ts index 647d32133..d16cde522 100644 --- a/packages/pagination/src/Pagination.types.ts +++ b/packages/pagination/src/Pagination.types.ts @@ -85,26 +85,6 @@ export interface PaginationItemProps { onClick?: (itemNumber: number) => void; } -// TODO Move this to a shared folder to be used in more components -/** - * `PropsBasedOnComponent` - This interface inherits props from a designated Component - */ -export interface PropsBasedOnComponent< - ComponentBaseProps, - DefaultElement extends React.ElementType, -> { - ( - props: { - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component?: Component; - } & ComponentBaseProps & - Omit, keyof ComponentBaseProps>, - ): JSX.Element | null; -} - export type UsePaginationArgs = { onClick?: CustomOnClick; currentPage: number; diff --git a/packages/pagination/src/PaginationItem.tsx b/packages/pagination/src/PaginationItem.tsx index adf2487e5..1b25fd652 100644 --- a/packages/pagination/src/PaginationItem.tsx +++ b/packages/pagination/src/PaginationItem.tsx @@ -4,11 +4,9 @@ import cn from 'classnames'; import { ChevronLeft, ChevronRight } from '@heycar-uikit/icons'; import Typography from '@heycar-uikit/typography'; -import { - PaginationItemProps, - PaginationItemType, - PropsBasedOnComponent, -} from './Pagination.types'; +import { PropsBasedOnComponent } from '../../../shared/types/PropsBasedOnComponent'; + +import { PaginationItemProps, PaginationItemType } from './Pagination.types'; import styles from './styles/default.module.css'; diff --git a/packages/pagination/tsconfig.json b/packages/pagination/tsconfig.json index eaad0eba4..890874c90 100644 --- a/packages/pagination/tsconfig.json +++ b/packages/pagination/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["src", "../../typings"], + "include": ["../src", "src", "../../typings", "../../shared"], "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", From ec5fec9b8a240f8f6d419a971a9139aac706d479 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 7 Mar 2023 15:14:47 +0100 Subject: [PATCH 3/4] removed useless include --- packages/pagination/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pagination/tsconfig.json b/packages/pagination/tsconfig.json index 890874c90..c7164022e 100644 --- a/packages/pagination/tsconfig.json +++ b/packages/pagination/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["../src", "src", "../../typings", "../../shared"], + "include": ["src", "../../typings", "../../shared"], "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", From 4654fa5f6174965c87ea159afa1b6a7504122e1e Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 7 Mar 2023 15:45:46 +0100 Subject: [PATCH 4/4] feat(col): export of default Col as well --- packages/grid/src/Grid.tsx | 2 +- packages/grid/src/components/Col.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/grid/src/Grid.tsx b/packages/grid/src/Grid.tsx index fc4d4f6df..5ee9c5947 100644 --- a/packages/grid/src/Grid.tsx +++ b/packages/grid/src/Grid.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { Col } from './components/Col'; +import Col from './components/Col'; import Container from './components/Container'; import Row from './components/Row'; diff --git a/packages/grid/src/components/Col.tsx b/packages/grid/src/components/Col.tsx index 5647660f3..b6cfb4002 100644 --- a/packages/grid/src/components/Col.tsx +++ b/packages/grid/src/components/Col.tsx @@ -9,6 +9,7 @@ import { ColProps } from './Col.types'; import guttersStyles from '../styles/gutters.module.css'; import styles from './Col.module.css'; +// export Col is necessary with PropsBasedOnComponent due to a Storybook bug export const Col: PropsBasedOnComponent = ({ component, className, @@ -40,3 +41,5 @@ export const Col: PropsBasedOnComponent = ({ ); }; + +export default Col;