Shared type PropsBasedOnComponent

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', () => {

packages/grid/src/components/Col.tsx

@@ -1,14 +1,16 @@
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 
+import { PropsBasedOnComponent } from '../../../../shared/types/PropsBasedOnComponent';
 import getGridClassNames from '../utils/getGridClassNames';
 
 import { ColProps } from './Col.types';
 
 import guttersStyles from '../styles/gutters.module.css';
 import styles from './Col.module.css';
 
-function Col<E extends React.ElementType = 'div'>({
+// export Col is necessary with PropsBasedOnComponent due to a Storybook bug
+export const Col: PropsBasedOnComponent<ColProps, 'div'> = ({
   component,
   className,
   align,
@@ -17,7 +19,7 @@ function Col<E extends React.ElementType = 'div'>({
   width,
   children,
   dataTestId,
-}: ColProps<E>) {
+}) => {
   const Component = component ?? 'div';
 
   const gridClassNames = useMemo(
@@ -38,6 +40,6 @@ function Col<E extends React.ElementType = 'div'>({
       {children}
     </Component>
   );
-}
+};
 
 export default Col;

packages/grid/src/components/Col.types.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ResponsivePropertyType } from '../Grid.types';
 
-type ColBaseProps<E extends React.ElementType> = {
+export interface ColProps {
   /**
    * Additional class
    */
@@ -43,12 +43,6 @@ type ColBaseProps<E extends React.ElementType> = {
    */
   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<E extends React.ElementType> = {
    * Identifier for automated testing systems
    */
   dataTestId?: string;
-};
-
-export type ColProps<E extends React.ElementType> = ColBaseProps<E> &
-  Omit<React.ComponentProps<E>, keyof ColBaseProps<E>>;
+}

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,
-> {
-  <Component extends React.ElementType = DefaultElement>(
-    props: {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: Component;
-    } & ComponentBaseProps &
-      Omit<React.ComponentPropsWithoutRef<Component>, keyof ComponentBaseProps>,
-  ): JSX.Element | null;
-}
-
 export type UsePaginationArgs = {
   onClick?: CustomOnClick;
   currentPage: number;

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';
 

packages/pagination/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src", "../../typings"],
+  "include": ["src", "../../typings", "../../shared"],
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",

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,
+> {
+  <Component extends React.ElementType = DefaultElement>(
+    props: {
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component?: Component;
+    } & ComponentBaseProps &
+      Omit<React.ComponentPropsWithoutRef<Component>, keyof ComponentBaseProps>,
+  ): JSX.Element | null;
+}