feat: replace AsProps by react-polymorphed (#49)

.eslintrc

@@ -1,3 +1,12 @@
 {
-  "extends": "@elevenlabs/eslint-config"
+  "env": {
+    "jest": true
+  },
+  "extends": [
+    "@eleven-labs/eslint-config/typescript",
+    "@eleven-labs/eslint-config/react"
+  ],
+  "rules": {
+    "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}]
+  }
 }

__tests__/helpers/systemPropsHelper/systemClassName.test.ts

@@ -6,18 +6,16 @@ describe('Test method systemClassName', () => {
     {
       props: {
         display: 'flex',
-        flexDirection: 'column-reverse',
         width: 'full',
         color: 'amaranth',
         p: {
           xs: 's',
           md: 'm',
         },
         m: 'm',
-        textAlign: 'center',
       },
       expected:
-        'color-amaranth flex-column-reverse@xs display-flex@xs width-full@xs p-s@xs p-m@md m-m@xs text-center@xs',
+        'color-amaranth display-flex@xs width-full@xs p-s@xs p-m@md m-m@xs',
     },
   ] as { props: SystemProps; expected: string }[])('return system class name $expected', ({ props, expected }) => {
     expect(systemClassName(props)).toEqual(expected);

bin/build-design-tokens/formats/scss/font-face.ts

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format';
+import type { FormatterArguments } from 'style-dictionary/types/Format';
 import type { Options } from 'style-dictionary/types/Options';
 import type { TransformedToken } from 'style-dictionary/types/TransformedToken';
 
@@ -53,7 +53,7 @@ const processJsonNode = (
         fontVariable.push(`\n\t\t'extensions': ${extensions},`);
       }
 
-      currentFontVariables.push(fontVariable.concat('\n\t)').join(''));
+      currentFontVariables.push([...fontVariable, '\n\t)'].join(''));
 
       return currentFontVariables;
     }, [])

bin/build-design-tokens/formats/scss/map-deep-with-css-variables.ts

@@ -1,7 +1,7 @@
 import StyleDictionary from 'style-dictionary';
-import { Options } from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format';
-import { TransformedToken, TransformedTokens } from 'style-dictionary/types/TransformedToken';
+import type { Options } from 'style-dictionary';
+import type { FormatterArguments } from 'style-dictionary/types/Format';
+import type { TransformedToken, TransformedTokens } from 'style-dictionary/types/TransformedToken';
 
 import { getDefaultHeader } from '../../helpers';
 

bin/build-design-tokens/index.ts

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
-import './formats/register';
-import './transforms/register';
-
 import type { File, TransformedToken } from 'style-dictionary';
 import StyleDictionary from 'style-dictionary';
 
+import './formats/register';
+import './transforms/register';
+
 const filterExcludesCategories = (token: TransformedToken, categories: string[]): boolean =>
   token?.attributes?.category ? !categories.includes(token.attributes.category) : false;
 

package.json

@@ -1,18 +1,13 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.6.3",
+  "version": "0.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"
   },
   "author": "Eleven Labs <[email protected]>",
   "license": "MIT",
-  "keywords": [
-    "eslint",
-    "lint",
-    "prettier"
-  ],
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",
@@ -39,7 +34,7 @@
     "start:storybook": "storybook dev -p 6009",
     "build:storybook": "yarn build && yarn storybook build",
     "lint:style": "stylelint 'src/**/*.scss'",
-    "lint:es": "eslint --ext .ts,.tsx src bin .storybook",
+    "lint:es": "eslint --ext .ts,.tsx src",
     "lint": "yarn lint:style && yarn lint:es",
     "test": "jest"
   },
@@ -56,9 +51,11 @@
     "yarn": ">= 1.2.0",
     "node": ">= 14.0"
   },
+  "prettier": "@eleven-labs/prettier-config",
   "dependencies": {
     "autosuggest-highlight": "^3.3.4",
     "classnames": "^2.3.2",
+    "react-polymorphed": "^2.2.1",
     "react-syntax-highlighter": "^15.5.0"
   },
   "peerDependencies": {
@@ -68,7 +65,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
-    "@elevenlabs/eslint-config": "^0.0.1",
+    "@eleven-labs/eslint-config": "^1.0.0",
+    "@eleven-labs/prettier-config": "^1.0.0",
     "@storybook/addon-actions": "^7.0.22",
     "@storybook/addon-essentials": "^7.0.22",
     "@storybook/addon-interactions": "^7.0.22",
@@ -84,15 +82,15 @@
     "@types/react-syntax-highlighter": "^15.5.7",
     "@vitejs/plugin-react": "^4.0.1",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.26.0",
+    "eslint": "^8.52.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "lint-staged": "^13.2.2",
     "node-sass": "^9.0.0",
     "postcss": "^8.4.24",
     "postcss-normalize": "^10.0.1",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",

src/components/Atoms/Blockquote/Blockquote.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Blockquote } from './Blockquote';

src/components/Atoms/Blockquote/Blockquote.tsx

@@ -1,13 +1,18 @@
-import './Blockquote.scss';
-
 import classNames from 'classnames';
 import React from 'react';
 
+import type { BoxProps } from '@/components';
 import { Box } from '@/components';
-import { AsProps, ColorSystemProps, MarginSystemProps } from '@/types';
+import { polyRef } from '@/helpers/polyRef';
+
+import './Blockquote.scss';
 
-export type BlockquoteProps = AsProps<'blockquote'> & MarginSystemProps & Pick<ColorSystemProps, 'bg'>;
+export interface BlockquoteProps extends BoxProps {}
 
-export const Blockquote: React.FC<BlockquoteProps> = (props) => (
-  <Box {...(props as AsProps)} as="blockquote" className={classNames('blockquote', props.className)} />
+export const Blockquote = polyRef<'blockquote', BlockquoteProps>(
+  ({ as = 'blockquote', children, className, ...props }, ref) => (
+    <Box {...props} as={as} ref={ref} className={classNames('blockquote', className)}>
+      {children}
+    </Box>
+  )
 );

src/components/Atoms/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
 import { Button } from '@/components';

src/components/Atoms/Button/Button.tsx

@@ -1,41 +1,41 @@
-import './Button.scss';
-
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { Box } from '@/components';
-import { forwardRef } from '@/helpers/systemPropsHelper';
-import { As, AsProps, SpacingSystemProps } from '@/types';
+import { Text } from '@/components';
+import { polyRef } from '@/helpers/polyRef';
+import type { SpacingSystemProps } from '@/types';
+
+import './Button.scss';
 
 export const buttonVariant = ['primary', 'secondary'] as const;
 export type ButtonVariantType = (typeof buttonVariant)[number];
 
-export type ButtonOptions = {
+export interface ButtonProps extends SpacingSystemProps {
+  className?: string;
   variant?: ButtonVariantType;
   isChoiceChip?: boolean;
-};
-
-export type ButtonProps<T extends As = 'button'> = AsProps<T> & SpacingSystemProps & ButtonOptions;
+  children: React.ReactNode;
+}
 
-export const Button = forwardRef<ButtonProps, 'button'>(
-  ({ as = 'button', variant = 'primary', isChoiceChip = false, children, ...props }, ref) => (
-    <Box
-      {...(props as AsProps)}
+export const Button = polyRef<'button', ButtonProps>(
+  ({ as = 'button', variant = 'primary', isChoiceChip = false, className, children, ...props }, ref) => (
+    <Text
+      {...props}
       as={as}
       ref={ref}
-      textSize="s"
+      size="s"
       data-text={typeof children === 'string' ? children : ''}
       className={classNames(
         'button',
         {
           [`button--${variant}`]: variant,
           [`button--choice-chip`]: isChoiceChip,
         },
-        props.className
+        className
       )}
     >
       {children}
-    </Box>
+    </Text>
   )
 );
 

src/components/Atoms/Icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
 import { Icon } from '@/components';

src/components/Atoms/Icon/Icon.tsx

@@ -5,7 +5,7 @@ import { Svgs } from '@/components';
 import { marginSystemProps } from '@/constants';
 import { pascalCase } from '@/helpers/stringHelper';
 import { colorSystemClassName, omitSystemProps, spacingSystemClassName } from '@/helpers/systemPropsHelper';
-import { ColorSystemProps, IconNameType, MarginSystemProps } from '@/types';
+import type { ColorSystemProps, IconNameType, MarginSystemProps } from '@/types';
 
 export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'name' | 'color'> &
   MarginSystemProps &

src/components/Atoms/Layout/Box/Box.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
 import { Heading } from '@/components';
@@ -27,7 +27,7 @@ const Template: StoryFn<typeof Box> = (args) => <Box {...args} />;
 
 export const Overview = Template.bind({});
 
-export const HiddenSystemProps = (): JSX.Element => (
+export const HiddenSystemProps = (): React.JSX.Element => (
   <>
     <Box hiddenAbove="md">
       This text hides at the "md" value screen width or{' '}

src/components/Atoms/Layout/Box/Box.tsx

@@ -2,21 +2,20 @@ import classNames from 'classnames';
 import * as React from 'react';
 
 import { systemProps } from '@/constants';
-import { forwardRef, omitSystemProps, systemClassName, typographySystemClassName } from '@/helpers/systemPropsHelper';
-import { As, AsProps, SystemProps } from '@/types';
+import { polyRef } from '@/helpers/polyRef';
+import { omitSystemProps, systemClassName } from '@/helpers/systemPropsHelper';
+import type { SystemProps } from '@/types';
 
-export type BoxProps<T extends As = 'div'> = AsProps<T> & SystemProps;
+export interface BoxProps extends SystemProps {
+  className?: string;
+  children?: React.ReactNode;
+}
 
-export const Box = forwardRef<BoxProps, 'div'>(({ as: As = 'div', textSize, children, ...props }, ref) => (
+export const Box = polyRef<'div', BoxProps>(({ as: As = 'div', className, children, ...props }, ref) => (
   <As
     {...omitSystemProps({ props, systemPropNames: Object.keys(systemProps) })}
     ref={ref}
-    className={classNames(
-      systemClassName(props),
-      typographySystemClassName(props),
-      { [`text-${textSize}`]: Boolean(textSize) },
-      props?.className
-    )}
+    className={classNames(systemClassName(props), className)}
   >
     {children}
   </As>

src/components/Atoms/Layout/Flex/Flex.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
 import { Box, Flex } from '@/components';

src/components/Atoms/Layout/Flex/Flex.tsx

@@ -1,13 +1,26 @@
+import classNames from 'classnames';
 import * as React from 'react';
 
-import { Box, BoxProps } from '@/components';
-import { forwardRef } from '@/helpers/systemPropsHelper';
-import { As, DisplayType, TypeWithMediaQueriesType } from '@/types';
+import type { BoxProps } from '@/components';
+import { Box } from '@/components';
+import { polyRef } from '@/helpers/polyRef';
+import { flexBoxSystemClassName } from '@/helpers/systemPropsHelper';
+import type { DisplayType, FlexBoxSystemProps, TypeWithMediaQueriesType } from '@/types';
 
-export type FlexProps<T extends As = 'div'> = Omit<BoxProps<T>, 'display'> & {
+export interface FlexProps extends Omit<BoxProps, 'display'>, FlexBoxSystemProps {
   display?: TypeWithMediaQueriesType<Extract<DisplayType, 'flex' | 'inline-flex'>>;
-};
+}
 
-export const Flex = forwardRef<FlexProps, 'div'>(({ as = 'div', display = 'flex', ...props }, ref) => (
-  <Box {...props} ref={ref} as={as} display={display} />
-));
+export const Flex = polyRef<'div', FlexProps>(
+  ({ as = 'div', display = 'flex', className, children, ...props }, ref) => (
+    <Box
+      {...props}
+      ref={ref}
+      as={as}
+      display={display}
+      className={classNames(flexBoxSystemClassName(props), className)}
+    >
+      {children}
+    </Box>
+  )
+);

src/components/Atoms/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
 import { Logo, logoName } from '@/components';

src/components/Atoms/Logo/Logo.tsx

@@ -1,23 +1,21 @@
-import './Logo.scss';
-
 import classNames from 'classnames';
 import * as React from 'react';
 
+import type { FlexProps } from '@/components';
 import { Box, Flex, Svgs, Text } from '@/components';
-import { forwardRef } from '@/helpers/systemPropsHelper';
-import { AsProps, ColorSystemProps, MarginSystemProps } from '@/types';
+import { polyRef } from '@/helpers/polyRef';
+
+import './Logo.scss';
 
 export const logoName = ['website', 'blog'] as const;
 export type LogoNameType = (typeof logoName)[number];
 
-export type LogoProps = AsProps<'div'> &
-  MarginSystemProps &
-  Pick<ColorSystemProps, 'color'> & {
-    name: LogoNameType;
-    size?: string | number;
-  };
+export interface LogoProps extends FlexProps {
+  name: LogoNameType;
+  size?: string | number;
+}
 
-export const Logo = forwardRef<LogoProps, 'div'>(({ name, size, ...props }, ref) => (
+export const Logo = polyRef<'div', LogoProps>(({ name, size, ...props }, ref) => (
   <Flex
     {...props}
     ref={ref}

src/components/Atoms/Skeleton/Skeleton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Skeleton, Text } from '@/components';