chore: bump deps, use vite framework and bundling

.github/workflows/pr.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: '20'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Config git

.nvmrc

@@ -1 +1 @@
-v18.12.1
+v20.11.1

.storybook/main.cjs → .storybook/main.ts

@@ -1,15 +1,12 @@
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  features: {
-    previewMdx2: true,
-  },
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
   stories: [
     '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+
   addons: [
     '@storybook/addon-links',
     {
@@ -20,4 +17,19 @@ module.exports = {
     },
     'storybook-dark-mode',
   ],
+
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };
+
+export default config;

.storybook/preview.js → .storybook/preview.jsx

@@ -1,8 +1,11 @@
+import React from 'react';
 import { FaencyProvider } from '../components/FaencyProvider';
-import { DocsContainer } from './components/DocContainer';
+import { DocsContainer } from '@storybook/addon-docs';
 import { globalCss } from '../';
 import { darkTheme, lightTheme } from '../stitches.config';
 import { useEffect } from 'react';
+import { themes } from '@storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -16,7 +19,16 @@ export const parameters = {
     stylePreview: true,
   },
   docs: {
-    container: DocsContainer,
+    container: (context) => {
+      const isDark = useDarkMode();
+
+      const props = {
+        ...context,
+        theme: isDark ? themes.dark : themes.light,
+      };
+
+      return React.createElement(DocsContainer, props);
+    },
   },
 };
 

components/AccessibleIcon/AccessibleIcon.stories.tsx

@@ -1,4 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 import { AccessibleIcon } from './AccessibleIcon';
 import * as Icons from '@radix-ui/react-icons';
 import { Flex } from '../Flex';
@@ -7,18 +8,19 @@ import { IconButton } from '../IconButton';
 export default {
   title: 'Components/AccessibleIcon',
   component: AccessibleIcon,
-} as ComponentMeta<any>;
+  tags: ['autodocs'],
+} as Meta<typeof AccessibleIcon>;
 
-export const Basic: ComponentStory<any> = (args) => (
+export const Basic: StoryFn<typeof AccessibleIcon> = () => (
   <Flex gap={3} align="center">
     <IconButton>
-      <AccessibleIcon label="notification" {...args} size="1">
+      <AccessibleIcon label="notification">
         <Icons.BellIcon />
       </AccessibleIcon>
     </IconButton>
 
     <IconButton>
-      <AccessibleIcon label="user settings" {...args} size="2">
+      <AccessibleIcon label="user settings">
         <Icons.AvatarIcon />
       </AccessibleIcon>
     </IconButton>

components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '.';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
@@ -19,9 +19,9 @@ const AccordionForStory = modifyVariantsForStory<AccordionVariants, any>(BaseAcc
 export default {
   title: 'Components/Accordion',
   component: AccordionForStory,
-} as ComponentMeta<typeof AccordionForStory>;
+} as Meta<typeof AccordionForStory>;
 
-const Template: ComponentStory<typeof AccordionForStory> = ({ size, ...args }) => (
+const Template: StoryFn<typeof AccordionForStory> = ({ size, ...args }) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory {...args}>
       <AccordionItem value="item-1">
@@ -81,7 +81,7 @@ MultipleCollapsible.argTypes = {
   },
 };
 
-export const Complex: ComponentStory<typeof AccordionForStory> = (args) => (
+export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory {...args}>
       <AccordionItem value="item-1">
@@ -119,7 +119,7 @@ Complex.argTypes = {
   },
 };
 
-const Customize: ComponentStory<typeof AccordionForStory> = ({ size, ...args }) => (
+const Customize: StoryFn<typeof AccordionForStory> = ({ size, ...args }) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory css={{ maxWidth: 250 }} {...args}>
       <AccordionItem css={{ bc: '$hiContrast' }} value="item-1">
@@ -142,7 +142,7 @@ const Customize: ComponentStory<typeof AccordionForStory> = ({ size, ...args })
   </Box>
 );
 
-export const InsideModal: ComponentStory<typeof AccordionForStory> = (args) => {
+export const InsideModal: StoryFn<typeof AccordionForStory> = (args) => {
   const [open, setOpen] = useState(false);
 
   return (

components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Text } from '../Text';
 import { H2 } from '../Heading';
 import { Alert, AlertProps, AlertVariants } from './Alert';
@@ -11,9 +11,9 @@ const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(BaseAler
 export default {
   title: 'Components/Alert',
   component: Alert,
-} as ComponentMeta<typeof AlertForStory>;
+} as Meta<typeof AlertForStory>;
 
-export const Variants: ComponentStory<typeof AlertForStory> = (args) => (
+export const Variants: StoryFn<typeof AlertForStory> = (args) => (
   <Alert {...args}>
     <H2 css={{ mb: '$3' }}>Alert</H2>
     <Text css={{ mb: '$3' }}>
@@ -37,7 +37,7 @@ Variants.argTypes = {
   },
 };
 
-const Customize: ComponentStory<typeof AlertForStory> = (args) => (
+const Customize: StoryFn<typeof AlertForStory> = (args) => (
   <Alert {...args} css={{ mt: '$1' }}>
     <H2 css={{ mb: '$3' }}>Alert</H2>
     <Text css={{ mb: '$3' }}>

components/AriaTable/AriaTable.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 import {
   Table,
@@ -26,9 +26,9 @@ const TableForStory = modifyVariantsForStory<TableVariants, TableProps>(BaseTabl
 export default {
   title: 'Components/AriaTable',
   component: TableForStory,
-} as ComponentMeta<typeof TableForStory>;
+} as Meta<typeof TableForStory>;
 
-export const Basic: ComponentStory<any> = ({ transform, ...args }) => (
+export const Basic: StoryFn<any> = ({ transform, ...args }) => (
   <TableForStory aria-label="People" aria-describedby="basic-table-caption" {...args}>
     <Caption id="basic-table-caption" size="10">
       People with some information
@@ -107,7 +107,7 @@ Basic.argTypes = {
   },
 };
 
-export const Alignment: ComponentStory<any> = (args) => (
+export const Alignment: StoryFn<any> = (args) => (
   <TableForStory>
     <Thead>
       <Tr>
@@ -165,7 +165,7 @@ Alignment.args = {
   align: 'start',
 };
 
-export const Interactive: ComponentStory<any> = (args) => {
+export const Interactive: StoryFn<any> = (args) => {
   const [selectedRow, setSelectedRow] = useState(3);
   const makeSelectableRowProps = useCallback(
     (rowNum: number) => ({
@@ -227,7 +227,7 @@ Interactive.args = {
   interactive: true,
 };
 
-export const Links: ComponentStory<any> = (args) => (
+export const Links: StoryFn<any> = (args) => (
   <Table hasCollapsibleChildren aria-label="Empty" aria-describedby="empty-table-caption" {...args}>
     <Caption id="empty-table-caption">Table with empty data</Caption>
     <Thead>
@@ -281,7 +281,7 @@ export const Links: ComponentStory<any> = (args) => (
   </Table>
 );
 
-const Customize: ComponentStory<any> = (args) => (
+const Customize: StoryFn<any> = (args) => (
   <TableForStory
     css={{ c: '$hiContrast' }}
     aria-label="People"
@@ -349,7 +349,7 @@ const Customize: ComponentStory<any> = (args) => (
   </TableForStory>
 );
 
-export const Columns: ComponentStory<any> = ({ transform, ...args }) => (
+export const Columns: StoryFn<any> = ({ transform, ...args }) => (
   <Flex direction="column" gap="4">
     <TableForStory aria-label="People" aria-describedby="basic-table-caption" {...args}>
       <Caption size="10" id="basic-table-caption">
@@ -572,7 +572,7 @@ const FlexIssue = () => (
   </Flex>
 );
 
-export const VerticalAlignment: ComponentStory<any> = (args) => (
+export const VerticalAlignment: StoryFn<any> = (args) => (
   <TableForStory>
     <Thead>
       <Tr>
@@ -595,7 +595,7 @@ export const VerticalAlignment: ComponentStory<any> = (args) => (
   </TableForStory>
 );
 
-export const CollapsibleRow: ComponentStory<any> = (args) => {
+export const CollapsibleRow: StoryFn<any> = (args) => {
   const [selectedRow, setSelectedRow] = useState(3);
   const makeSelectableRowProps = useCallback(
     (rowNum: number) => ({

components/AriaTable/AriaTable.tsx

@@ -34,15 +34,15 @@ const StyledTbody = styled('div', TableTbody, {
 });
 export const Tbody = forwardRef<
   ElementRef<typeof StyledTbody>,
-  Omit<ComponentProps<typeof StyledTbody>, 'css'> & VariantProps<typeof StyledTbody> & { css?: CSS }
+  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>
 >((props, ref) => <StyledTbody ref={ref} role="rowgroup" {...props} />);
 
 const StyledTfoot = styled('div', TableTfoot, {
   display: 'table-footer-group',
 });
 export const Tfoot = forwardRef<
   ElementRef<typeof StyledTfoot>,
-  Omit<ComponentProps<typeof StyledTfoot>, 'css'> & VariantProps<typeof StyledTfoot> & { css?: CSS }
+  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>
 >((props, ref) => <StyledTfoot ref={ref} role="rowgroup" {...props} />);
 
 const StyledTr = styled('div', TableTr, {
@@ -97,14 +97,11 @@ const AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: Re
   );
 };
 
-export interface TrProps
-  extends Omit<ComponentProps<typeof StyledTr>, 'css'>,
-    VariantProps<typeof StyledTr> {
+export interface TrProps extends ComponentProps<typeof StyledTr>, VariantProps<typeof StyledTr> {
   asChild?: boolean;
   collapsedContent?: React.ReactNode;
   emptyFirstColumn?: boolean;
   tableHead?: boolean;
-  css?: CSS;
 }
 export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
   ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {
@@ -206,11 +203,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
 const StyledTh = styled('span', TableTh, {
   display: 'table-cell',
 });
-export interface ThProps
-  extends Omit<ComponentProps<typeof StyledTh>, 'css'>,
-    VariantProps<typeof StyledTh> {
-  css?: CSS;
-}
+export interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}
 export const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>((props, ref) => (
   <StyledTh ref={ref} role="columnheader" {...props} />
 ));
@@ -223,10 +216,9 @@ const FillerTd = styled(StyledTd, {
   visibility: 'hidden',
 });
 export interface TdProps
-  extends Omit<ComponentProps<typeof StyledTd>, 'css'>,
+  extends ComponentProps<typeof StyledTd>,
     VariantProps<typeof StyledTd>,
     VariantProps<typeof TableTd> {
-  css?: CSS;
   fullColSpan?: boolean;
 }
 export const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(
@@ -260,16 +252,16 @@ const StyledThead = styled('div', TableThead, {
 });
 export const Thead = forwardRef<
   ElementRef<typeof StyledThead>,
-  Omit<ComponentProps<typeof StyledThead>, 'css'> & VariantProps<typeof StyledThead> & { css?: CSS }
+  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & {}
 >((props, ref) => <StyledThead ref={ref} role="rowgroup" {...props} />);
 
 const StyledTable = styled('div', TableTable, {
   display: 'table',
 });
 export const Table = forwardRef<
   ElementRef<typeof StyledTable>,
-  Omit<ComponentProps<typeof StyledTable>, 'css'> &
-    VariantProps<typeof StyledTable> & { css?: CSS; hasCollapsibleChildren?: boolean }
+  ComponentProps<typeof StyledTable> &
+    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }
 >(({ hasCollapsibleChildren, css, ...props }, ref) => (
   <StyledTable
     ref={ref}

components/Avatar/Avatar.stories.tsx

@@ -1,12 +1,13 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Avatar } from './Avatar';
 
 export default {
   title: 'Components/Avatar',
   component: Avatar,
-} as ComponentMeta<any>;
+} as Meta<typeof Avatar>;
 
-export const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
+export const Template: StoryFn<typeof Avatar> = (args) => <Avatar {...args} />;
 
 Template.args = {
   src: 'https://picsum.photos/100',
@@ -89,6 +90,4 @@ Variants.argTypes = {
     options: ['gray', 'red', 'purple', 'blue', 'green', 'orange'],
   },
 };
-const Customize: ComponentStory<typeof Avatar> = (args) => (
-  <Avatar css={{ c: '$hiContrast' }} {...args} />
-);
+const Customize: StoryFn<typeof Avatar> = (args) => <Avatar css={{ c: '$hiContrast' }} {...args} />;