feat: #1334 polymorphic base component

src/components/Box/Box.spec.tsx

@@ -35,27 +35,45 @@ describe('Box', () => {
         expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('it works with default testId', () => {
-        setup(<Box gutter={gutters[0]}>Hello world</Box>);
-        expect(screen.getByTestId('Box')).toBeTruthy();
-    });
+    describe('as prop', () => {
+        test('it falls back to div', () => {
+            setup(<Box gutter={gutters[0]}>Hello world</Box>);
+            expect(screen.getByTestId('Component').nodeName).toBe('DIV');
+        });
 
-    test('it works with specified testId', () => {
-        setup(
-            <Box gutter={gutters[0]} testId={'TestId'}>
-                Hello world
-            </Box>
-        );
-        expect(screen.getByTestId('TestId')).toBeTruthy();
+        test('it works with HTML element', () => {
+            setup(
+                <Box gutter={gutters[0]} as="button">
+                    Hello world
+                </Box>
+            );
+            expect(screen.getByTestId('Box').nodeName).toBe('BUTTON');
+            expect(screen.getByRole('button')).toBeTruthy();
+        });
+
+        test('it works with React component', () => {
+            const TestComponent = ({ status }: { status: string }) => (
+                <p>test {status}</p>
+            );
+            setup(<Box gutter={gutters[0]} as={TestComponent} status="info" />);
+            expect(screen.getByText('test info')).toBeTruthy();
+        });
     });
 
-    test('it works with as', () => {
-        setup(
-            <Box gutter={gutters[0]} as="span">
-                Hello world
-            </Box>
-        );
-        expect(screen.getByTestId('Box').nodeName).toBe('SPAN');
+    describe('testId prop', () => {
+        test('it works with default testId', () => {
+            setup(<Box gutter={gutters[0]}>Hello world</Box>);
+            expect(screen.getByTestId('Box')).toBeTruthy();
+        });
+
+        test('it works with specified testId', () => {
+            setup(
+                <Box gutter={gutters[0]} data-testid="TestId">
+                    Hello world
+                </Box>
+            );
+            expect(screen.getByTestId('TestId')).toBeTruthy();
+        });
     });
 
     test('it works with className', () => {

src/components/Box/index.tsx

@@ -1,41 +1,44 @@
-import React from 'react';
+import React, { ElementType } from 'react';
 import cx from 'classnames';
-import type { BaseProps, SizeType } from '../types';
+import type { CommonComponentCombinedProps, SizeType } from '../types';
 import styles from './Box.module.scss';
 
-export interface BoxProps {
-    readonly elevation?: SizeType;
-    readonly stroke?: SizeType;
-    readonly gutter?: SizeType;
-    readonly gutterX?: SizeType;
-    readonly gutterY?: SizeType;
-}
+export type BoxProps = {
+    elevation?: SizeType;
+    gutter?: SizeType;
+    gutterX?: SizeType;
+    gutterY?: SizeType;
+};
 
-const Box = ({
+const Box = <T extends ElementType = 'div'>({
+    as,
     className,
-    as: Component = 'div',
     testId = 'Box',
     elevation = 'none',
     gutter = 'none',
     gutterX = 'none',
     gutterY = 'none',
-    ...restProps
-}: BaseProps & BoxProps) => (
-    <Component
-        className={cx(
-            styles.this,
-            styles[`elevation-${elevation}`],
-            styles[`gutter-${gutter}`],
-            {
-                [styles[`gutterX-${gutterX}`]]: gutterX,
-                [styles[`gutterY-${gutterY}`]]: gutterY
-            },
-            className
-        )}
-        data-testid={testId}
-        {...restProps}
-    />
-);
+    ...props
+}: CommonComponentCombinedProps<T, BoxProps>) => {
+    const PolymorphicComponent = as || 'div';
+    return (
+        <PolymorphicComponent
+            as={as}
+            className={cx(
+                styles.this,
+                styles[`elevation-${elevation}`],
+                styles[`gutter-${gutter}`],
+                {
+                    [styles[`gutterX-${gutterX}`]]: gutterX,
+                    [styles[`gutterY-${gutterY}`]]: gutterY
+                },
+                className
+            )}
+            testId={testId}
+            {...props}
+        />
+    );
+};
 
 Box.displayName = 'Box';
 export default Box;

src/components/Button/index.tsx

@@ -1,52 +1,58 @@
-import React from 'react';
+import React, { ElementType } from 'react';
 import cx from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
-import type { BaseProps, LevelType, SizeType } from '../types';
+import type {
+    CommonComponentCombinedProps,
+    LevelType,
+    SizeType
+} from '../types';
 import Box from '../Box';
 import Text from '../Text';
 import styles from './Button.module.scss';
 
-export interface ButtonProps
-    extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'> {
-    readonly level?: LevelType;
-    readonly size?: SizeType;
-    readonly icon?: IconProp;
-    readonly block?: boolean;
-    readonly disabled?: boolean;
-}
+export type ButtonProps = {
+    level?: LevelType;
+    size?: SizeType;
+    icon?: IconProp;
+    block?: boolean;
+    disabled?: boolean;
+};
 
-const Button = ({
+const Button = <T extends ElementType = 'button'>({
     className,
-    as = 'button',
+    as,
     testId = 'Button',
     level = 'primary',
     size = 'medium',
     block = false,
     icon,
     children,
     ...restProps
-}: BaseProps & ButtonProps) => (
-    <Text
-        as={as}
-        data-testid={testId}
-        size={size}
-        weight="medium"
-        className={cx(styles.this, { [styles.block]: block }, className)}
-        {...restProps}
-    >
-        <Box
-            as="span"
-            gutter={size}
-            elevation="medium"
-            data-testid={`${testId}-inner`}
-            className={cx(styles.inner, styles[`level-${level}`])}
+}: CommonComponentCombinedProps<T, ButtonProps>) => {
+    const PolymorphicComponent = as || 'button';
+    return (
+        <PolymorphicComponent
+            as={as}
+            data-testid={testId}
+            size={size}
+            weight="medium"
+            className={cx(styles.this, { [styles.block]: block }, className)}
+            {...restProps}
         >
-            {icon && <FontAwesomeIcon icon={icon} />}
-            {children}
-        </Box>
-    </Text>
-);
+            <Text
+                as={Box}
+                gutter={size}
+                elevation="medium"
+                data-testid={`${testId}-inner`}
+                className={cx(styles.inner, styles[`level-${level}`])}
+            >
+                {icon && <FontAwesomeIcon icon={icon} />}
+                {children}
+            </Text>
+        </PolymorphicComponent>
+    );
+};
 
 Button.displayName = 'Button';
 export default Button;

src/components/types.ts

@@ -1,16 +1,25 @@
-import React from 'react';
+import {
+    ElementType,
+    ReactNode,
+    CSSProperties,
+    ComponentPropsWithoutRef
+} from 'react';
 
-export type AsType = keyof JSX.IntrinsicElements;
+export type CommonComponentProps<T extends ElementType> = {
+    as?: T;
+    testId?: string;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+
+export type CommonComponentCombinedProps<
+    T extends ElementType,
+    K
+> = CommonComponentProps<T> &
+    Omit<ComponentPropsWithoutRef<T>, keyof CommonComponentProps<T>> &
+    K;
 
 export type LevelType = 'primary' | 'secondary' | 'tertiary' | 'danger';
 
 export type SizeType = 'none' | 'small' | 'medium' | 'large';
-
-export type BaseProps = {
-    readonly className?: string;
-    readonly as?: AsType;
-    readonly testId?: string;
-    readonly children?: React.ReactNode | React.ReactNode[];
-    readonly style?: React.CSSProperties;
-    readonly htmlFor?: string;
-};