Skip to content

Commit

Permalink
chore: bump deps, use vite framework and bundling
Browse files Browse the repository at this point in the history
  • Loading branch information
gndz07 authored Mar 8, 2024
1 parent ab4860c commit 446f3a6
Show file tree
Hide file tree
Showing 58 changed files with 13,888 additions and 65,398 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion .npmrc

This file was deleted.

2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v18.12.1
v20.11.1
25 changes: 0 additions & 25 deletions .storybook/components/DocContainer.tsx

This file was deleted.

26 changes: 19 additions & 7 deletions .storybook/main.cjs → .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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',
{
Expand All @@ -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;
16 changes: 14 additions & 2 deletions .storybook/preview.js → .storybook/preview.jsx
Original file line number Diff line number Diff line change
@@ -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].*' },
Expand All @@ -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);
},
},
};

Expand Down
12 changes: 7 additions & 5 deletions components/AccessibleIcon/AccessibleIcon.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions components/Accordion/Accordion.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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 (
Expand Down
8 changes: 4 additions & 4 deletions components/Alert/Alert.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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' }}>
Expand All @@ -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' }}>
Expand Down
20 changes: 10 additions & 10 deletions components/AriaTable/AriaTable.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useCallback, useState } from 'react';
import {
Table,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -107,7 +107,7 @@ Basic.argTypes = {
},
};

export const Alignment: ComponentStory<any> = (args) => (
export const Alignment: StoryFn<any> = (args) => (
<TableForStory>
<Thead>
<Tr>
Expand Down Expand Up @@ -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) => ({
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -572,7 +572,7 @@ const FlexIssue = () => (
</Flex>
);

export const VerticalAlignment: ComponentStory<any> = (args) => (
export const VerticalAlignment: StoryFn<any> = (args) => (
<TableForStory>
<Thead>
<Tr>
Expand All @@ -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) => ({
Expand Down
24 changes: 8 additions & 16 deletions components/AriaTable/AriaTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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} />
));
Expand All @@ -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>(
Expand Down Expand Up @@ -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}
Expand Down
11 changes: 5 additions & 6 deletions components/Avatar/Avatar.stories.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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} />;
Loading

0 comments on commit 446f3a6

Please sign in to comment.