From 34d8c89722bf4f7ce7795c3559bd8f065f8acb3c Mon Sep 17 00:00:00 2001 From: Gina A <70909035+gndz07@users.noreply.github.com> Date: Mon, 27 May 2024 16:24:03 +0200 Subject: [PATCH] fix: use TypeScript v5 --- .../AccessibleIcon/AccessibleIcon.stories.tsx | 6 +- components/Accordion/Accordion.stories.tsx | 14 +- components/Accordion/Accordion.tsx | 13 +- components/Alert/Alert.stories.tsx | 6 +- components/AriaTable/AriaTable.stories.tsx | 6 +- components/Avatar/Avatar.stories.tsx | 12 +- components/Badge/Badge.stories.tsx | 8 +- components/Box/Box.stories.tsx | 6 +- components/Bubble/Bubble.stories.tsx | 6 +- components/Button/Button.stories.tsx | 22 +- .../ButtonSwitch/ButtonSwitch.stories.tsx | 6 +- components/Card/Card.stories.tsx | 14 +- components/Checkbox/Checkbox.stories.tsx | 12 +- components/Container/Container.stories.tsx | 12 +- components/Dialog/Dialog.stories.tsx | 7 +- .../DropdownMenu/DropdownMenu.stories.tsx | 12 +- components/Elevation/Elevation.stories.tsx | 6 +- components/FaencyProvider.tsx | 2 +- components/Flex/Flex.stories.tsx | 6 +- components/Grid/Grid.stories.tsx | 6 +- components/Heading/Heading.stories.tsx | 8 +- components/IconButton/IconButton.stories.tsx | 6 +- components/Image/Image.stories.tsx | 10 +- components/Input/Input.stories.tsx | 14 +- components/Label/Label.stories.tsx | 16 +- components/Link/Link.stories.tsx | 10 +- components/List/List.stories.tsx | 10 +- components/Navigation/Navigation.stories.tsx | 14 +- .../Navigation/NavigationItem.stories.tsx | 8 +- .../NavigationTree/NavigationTree.stories.tsx | 10 +- .../NavigationTreeItem.stories.tsx | 8 +- components/Popover/Popover.stories.tsx | 8 +- components/Radio/Radio.stories.tsx | 12 +- .../RadioAccordion/RadioAccordion.stories.tsx | 6 +- components/Select/Select.stories.tsx | 16 +- components/Skeleton/Skeleton.stories.tsx | 6 +- components/Switch/Switch.stories.tsx | 12 +- components/Table/Table.stories.tsx | 6 +- components/Tabs/Tabs.stories.tsx | 6 +- components/Text/Text.stories.tsx | 8 +- components/TextField/TextField.stories.tsx | 16 +- components/Textarea/Textarea.stories.tsx | 22 +- components/Tooltip/Tooltip.stories.tsx | 13 +- components/Tooltip/Tooltip.tsx | 2 +- .../VisuallyHidden/VisuallyHidden.stories.tsx | 6 +- package.json | 14 +- rollup.config.js | 6 +- stitches.config.ts | 4 +- tsconfig-rollup.json | 12 +- tsconfig.json | 3 +- yarn.lock | 2634 +++++++++-------- 51 files changed, 1668 insertions(+), 1440 deletions(-) diff --git a/components/AccessibleIcon/AccessibleIcon.stories.tsx b/components/AccessibleIcon/AccessibleIcon.stories.tsx index cc22bb49..e400b257 100644 --- a/components/AccessibleIcon/AccessibleIcon.stories.tsx +++ b/components/AccessibleIcon/AccessibleIcon.stories.tsx @@ -5,11 +5,11 @@ import * as Icons from '@radix-ui/react-icons'; import { Flex } from '../Flex'; import { IconButton } from '../IconButton'; -export default { +const Component: Meta = { title: 'Components/AccessibleIcon', component: AccessibleIcon, tags: ['autodocs'], -} as Meta; +}; export const Basic: StoryFn = () => ( @@ -26,3 +26,5 @@ export const Basic: StoryFn = () => ( ); + +export default Component; diff --git a/components/Accordion/Accordion.stories.tsx b/components/Accordion/Accordion.stories.tsx index e1c9d42c..d46984b6 100644 --- a/components/Accordion/Accordion.stories.tsx +++ b/components/Accordion/Accordion.stories.tsx @@ -16,10 +16,10 @@ type AccordionVariants = VariantProps; const BaseAccordion = (props: any): JSX.Element => ; const AccordionForStory = modifyVariantsForStory(BaseAccordion); -export default { +const Component: Meta = { title: 'Components/Accordion', component: AccordionForStory, -} as Meta; +}; const Template: StoryFn = ({ size, ...args }) => ( @@ -40,7 +40,7 @@ const Template: StoryFn = ({ size, ...args }) => ( ); -export const Single = Template.bind({}); +export const Single: StoryFn = Template.bind({}); Single.args = { type: 'single', size: 'small', @@ -52,12 +52,12 @@ Single.argTypes = { }, }; -export const Large = Template.bind({}); +export const Large: StoryFn = Template.bind({}); Large.args = { size: 'large', }; -export const Collapsible = Template.bind({}); +export const Collapsible: StoryFn = Template.bind({}); Collapsible.args = { type: 'single', collapsible: true, @@ -69,7 +69,7 @@ Collapsible.argTypes = { }, }; -export const MultipleCollapsible = Template.bind({}); +export const MultipleCollapsible: StoryFn = Template.bind({}); MultipleCollapsible.args = { type: 'multiple', collapsible: true, @@ -207,3 +207,5 @@ InsideModal.argTypes = { options: ['small', 'medium', 'large'], }, }; + +export default Component; diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx index 8c2bd658..7d3d3bdb 100644 --- a/components/Accordion/Accordion.tsx +++ b/components/Accordion/Accordion.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React from 'react'; import * as AccordionPrimitive from '@radix-ui/react-accordion'; import { keyframes, styled, VariantProps, CSS } from '../../stitches.config'; @@ -34,13 +35,13 @@ const StyledAccordionItem = styled(AccordionPrimitive.Item, { boxShadow: '0 1px 0 0 $colors$divider', }); -export const StyledAccordionHeader = styled(AccordionPrimitive.Header, { +export const StyledAccordionHeader = (styled as any)('AccordionPrimitive.Header', { all: 'unset', display: 'flex', borderRadius: 'inherit', }); -export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, { +export const StyledAccordionTrigger = (styled as any)(AccordionPrimitive.Trigger, { all: 'unset', borderRadius: 'inherit', fontFamily: 'inherit', @@ -100,7 +101,7 @@ const StyledAccordionChevron = styled(ChevronRightIcon, { }, }); -const StyledAccordionContent = styled(AccordionPrimitive.Content, { +const StyledAccordionContent = (styled as any)(AccordionPrimitive.Content, { overflow: 'hidden', fontSize: '$3', c: '$accordionText', @@ -112,7 +113,7 @@ const StyledAccordionContent = styled(AccordionPrimitive.Content, { }, }); -const StyledAccordionContentWrapper = styled('div', { +const StyledAccordionContentWrapper = (styled as any)('div', { variants: { size: { small: { @@ -132,8 +133,8 @@ const StyledAccordionContentWrapper = styled('div', { }); // EXPORTS -export const AccordionRoot = StyledAccordionRoot; -export const AccordionItem = StyledAccordionItem; +export const AccordionRoot = StyledAccordionRoot as any; +export const AccordionItem = StyledAccordionItem as any; export type AccordionTriggerProps = React.ComponentProps & VariantProps & { children: React.ReactNode; diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx index d92fc2ca..cb786a16 100644 --- a/components/Alert/Alert.stories.tsx +++ b/components/Alert/Alert.stories.tsx @@ -8,10 +8,10 @@ import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory'; const BaseAlert = (props: AlertProps): JSX.Element => ; const AlertForStory = modifyVariantsForStory(BaseAlert); -export default { +const Component: Meta = { title: 'Components/Alert', component: Alert, -} as Meta; +}; export const Variants: StoryFn = (args) => ( @@ -49,3 +49,5 @@ const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/AriaTable/AriaTable.stories.tsx b/components/AriaTable/AriaTable.stories.tsx index 49825a99..bcca4f33 100644 --- a/components/AriaTable/AriaTable.stories.tsx +++ b/components/AriaTable/AriaTable.stories.tsx @@ -23,10 +23,10 @@ import { Text } from '../Text'; const BaseTable = (props: TableProps): JSX.Element => ; const TableForStory = modifyVariantsForStory(BaseTable); -export default { +const Component: Meta = { title: 'Components/AriaTable', component: TableForStory, -} as Meta; +}; export const Basic: StoryFn = ({ transform, ...args }) => ( @@ -656,3 +656,5 @@ export const CollapsibleRow: StoryFn = (args) => { CollapsibleRow.args = { interactive: true, }; + +export default Component; diff --git a/components/Avatar/Avatar.stories.tsx b/components/Avatar/Avatar.stories.tsx index 0d58e644..54d99eef 100644 --- a/components/Avatar/Avatar.stories.tsx +++ b/components/Avatar/Avatar.stories.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { Meta, StoryFn } from '@storybook/react'; import { Avatar } from './Avatar'; -export default { +const Component: Meta = { title: 'Components/Avatar', component: Avatar, -} as Meta; +}; export const Template: StoryFn = (args) => ; @@ -21,7 +21,7 @@ Template.argTypes = { }, }; -export const Shape = Template.bind({}); +export const Shape: StoryFn = Template.bind({}); Shape.args = { src: 'https://picsum.photos/100', @@ -40,7 +40,7 @@ Shape.argTypes = { }, }; -export const Fallback = Template.bind({}); +export const Fallback: StoryFn = Template.bind({}); Fallback.args = { fallback: 'M', @@ -67,7 +67,7 @@ Fallback.argTypes = { }, }; -export const Variants = Template.bind({}); +export const Variants: StoryFn = Template.bind({}); Variants.args = { fallback: 'M', @@ -91,3 +91,5 @@ Variants.argTypes = { }, }; const Customize: StoryFn = (args) => ; + +export default Component; diff --git a/components/Badge/Badge.stories.tsx b/components/Badge/Badge.stories.tsx index c2260e02..d91a83e7 100644 --- a/components/Badge/Badge.stories.tsx +++ b/components/Badge/Badge.stories.tsx @@ -12,7 +12,7 @@ type BadgeProps = BadgeVariants & {}; const BaseBadge = (props: BadgeProps): JSX.Element => ; const BadgeForStory = modifyVariantsForStory(BaseBadge); -export default { +const Component: Meta = { title: 'Components/Badge', component: BadgeForStory, argTypes: { @@ -20,7 +20,7 @@ export default { variant: { control: 'select' }, borderless: { control: 'boolean' }, }, -} as Meta; +}; export const Colors: StoryFn = (args) => ( @@ -40,7 +40,7 @@ Colors.args = { borderless: false, }; -export const AlphaBackground = Colors.bind({}); +export const AlphaBackground: StoryFn = Colors.bind({}); AlphaBackground.args = { alphaBg: true, @@ -104,3 +104,5 @@ Borderless.args = { variant: 'neon', borderless: true, }; + +export default Component; diff --git a/components/Box/Box.stories.tsx b/components/Box/Box.stories.tsx index 35cb310d..30952fb5 100644 --- a/components/Box/Box.stories.tsx +++ b/components/Box/Box.stories.tsx @@ -14,10 +14,10 @@ const BoxForStory = modifyVariantsForStory = { title: 'Components/Box', component: BoxForStory, -} as Meta; +}; export const Basic: StoryFn = (args) => ( @@ -28,3 +28,5 @@ export const Basic: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Bubble/Bubble.stories.tsx b/components/Bubble/Bubble.stories.tsx index 96e59f02..c4c5164a 100644 --- a/components/Bubble/Bubble.stories.tsx +++ b/components/Bubble/Bubble.stories.tsx @@ -11,10 +11,10 @@ type BubbleProps = BubbleVariants & {}; const BaseBubble = (props: BubbleProps): JSX.Element => ; const BubbleForStory = modifyVariantsForStory(BaseBubble); -export default { +const Component: Meta = { title: 'Components/Bubble', component: BubbleForStory, -} as Meta; +}; export const Colors: StoryFn = (args) => ( @@ -70,3 +70,5 @@ Sizes.argTypes = { const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx index 4d2b62f8..a9f10244 100644 --- a/components/Button/Button.stories.tsx +++ b/components/Button/Button.stories.tsx @@ -7,40 +7,40 @@ import { Text } from '../Text'; import { InfoCircledIcon } from '@radix-ui/react-icons'; import { UnstyledLink } from '../Link'; -export default { +const Component: Meta = { title: 'Components/Button', component: ButtonForStory, argTypes: { onClick: { action: 'clicked' } }, -} as Meta; +}; const Template: StoryFn = (args) => ( Button ); -export const Primary = Template.bind({}); +export const Primary: StoryFn = Template.bind({}); Primary.args = {}; -export const Secondary = Template.bind({}); +export const Secondary: StoryFn = Template.bind({}); Secondary.args = { variant: 'secondary', }; -export const Red = Template.bind({}); +export const Red: StoryFn = Template.bind({}); Red.args = { variant: 'red', }; -export const Ghost = Template.bind({}); +export const Ghost: StoryFn = Template.bind({}); Ghost.args = { ghost: true, variant: 'secondary', }; -export const Disabled = Template.bind({}); +export const Disabled: StoryFn = Template.bind({}); Disabled.args = { disabled: true, @@ -55,7 +55,7 @@ const TemplateWithIcon: StoryFn = (args) => ( ); -export const WithIcon = TemplateWithIcon.bind({}); +export const WithIcon: StoryFn = TemplateWithIcon.bind({}); const TemplateWithActive: StoryFn = ({ state, ...args }) => { const [active, setActive] = React.useState(0); @@ -78,11 +78,11 @@ const TemplateWithActive: StoryFn = ({ state, ...args }) ); }; -export const Active = TemplateWithActive.bind({}); +export const Active: StoryFn = TemplateWithActive.bind({}); Active.args = {}; -export const Waiting = Template.bind({}); +export const Waiting: StoryFn = Template.bind({}); Waiting.args = { state: 'waiting', @@ -105,3 +105,5 @@ ButtonLink.argTypes = { control: 'inline-radio', }, }; + +export default Component; diff --git a/components/ButtonSwitch/ButtonSwitch.stories.tsx b/components/ButtonSwitch/ButtonSwitch.stories.tsx index 097007f8..1d19d433 100644 --- a/components/ButtonSwitch/ButtonSwitch.stories.tsx +++ b/components/ButtonSwitch/ButtonSwitch.stories.tsx @@ -3,10 +3,10 @@ import { Meta, StoryFn } from '@storybook/react'; import { ButtonSwitchContainer, ButtonSwitchItem } from './ButtonSwitch'; import { useState } from 'react'; -export default { +const Component: Meta = { title: 'Components/ButtonSwitch', component: ButtonSwitchContainer, -} as Meta; +}; export const Basic: StoryFn = () => { const [value, setValue] = useState('left'); @@ -31,3 +31,5 @@ export const Multiple: StoryFn = () => { ); }; + +export default Component; diff --git a/components/Card/Card.stories.tsx b/components/Card/Card.stories.tsx index 8a3a32dc..1807d20c 100644 --- a/components/Card/Card.stories.tsx +++ b/components/Card/Card.stories.tsx @@ -5,10 +5,10 @@ import { Card } from './Card'; import { H2 } from '../Heading'; import { Flex } from '../Flex'; -export default { +const Component: Meta = { title: 'Components/Card', component: Card, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -23,23 +23,23 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Ghost = Template.bind({}); +export const Ghost: StoryFn = Template.bind({}); Ghost.args = { variant: 'ghost', }; -export const Active = Template.bind({}); +export const Active: StoryFn = Template.bind({}); Active.args = { active: true, }; -export const Interactive = Template.bind({}); +export const Interactive: StoryFn = Template.bind({}); Interactive.args = { interactive: true, @@ -126,3 +126,5 @@ Elevation.args = {}; const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Checkbox/Checkbox.stories.tsx b/components/Checkbox/Checkbox.stories.tsx index 074ffa9a..64a40ad9 100644 --- a/components/Checkbox/Checkbox.stories.tsx +++ b/components/Checkbox/Checkbox.stories.tsx @@ -10,25 +10,25 @@ const CheckboxForStory = modifyVariantsForStory< CheckboxProps & React.InputHTMLAttributes >(BaseCheckbox); -export default { +const Component: Meta = { title: 'Components/Checkbox', component: CheckboxForStory, argTypes: { onCheckedChange: { action: 'checkedChange' } }, -} as Meta; +}; const Template: StoryFn = (args) => ; -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Size = Template.bind({}); +export const Size: StoryFn = Template.bind({}); Size.args = { size: 'large', }; -export const Disabled = Template.bind({}); +export const Disabled: StoryFn = Template.bind({}); Disabled.args = { disabled: true, @@ -39,3 +39,5 @@ Disabled.args = { const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Container/Container.stories.tsx b/components/Container/Container.stories.tsx index 29007c29..e4593c13 100644 --- a/components/Container/Container.stories.tsx +++ b/components/Container/Container.stories.tsx @@ -15,10 +15,10 @@ const ContainerForStory = modifyVariantsForStory< ContainerProps & React.HTMLAttributes >(BaseContainer); -export default { +const Component: Meta = { title: 'Components/Container', component: ContainerForStory, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -35,14 +35,16 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Size = Template.bind({}); +export const Size: StoryFn = Template.bind({}); Size.args = { size: '1' }; -export const NoGutter = Template.bind({}); +export const NoGutter: StoryFn = Template.bind({}); NoGutter.args = { noGutter: true }; + +export default Component; diff --git a/components/Dialog/Dialog.stories.tsx b/components/Dialog/Dialog.stories.tsx index 13018a40..b21f11d2 100644 --- a/components/Dialog/Dialog.stories.tsx +++ b/components/Dialog/Dialog.stories.tsx @@ -12,12 +12,11 @@ import { Text } from '../Text'; import { useState } from 'react'; import { Button } from '../Button'; import { Box } from '../Box'; -import * as DialogPrimitive from '@radix-ui/react-dialog'; -export default { +const Component: Meta = { title: 'Components/Dialog', component: Dialog, -} as Meta; +}; const Content: React.FC = () => { const [count, setCount] = useState(1); @@ -139,3 +138,5 @@ export const NoCloseIcon: StoryFn = () => { ); }; + +export default Component; diff --git a/components/DropdownMenu/DropdownMenu.stories.tsx b/components/DropdownMenu/DropdownMenu.stories.tsx index 18e5c505..bede9045 100644 --- a/components/DropdownMenu/DropdownMenu.stories.tsx +++ b/components/DropdownMenu/DropdownMenu.stories.tsx @@ -16,11 +16,11 @@ import { } from './DropdownMenu'; import { Button } from '../Button'; -export default { +const Component: Meta = { title: 'Components/DropdownMenu', component: DropdownMenu, argTypes: { onOpenChange: { action: 'clicked' } }, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -50,15 +50,15 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); -export const Modal = Template.bind({}); +export const Modal: StoryFn = Template.bind({}); Modal.args = { modal: true, }; -export const DefaultOpen = Template.bind({}); +export const DefaultOpen: StoryFn = Template.bind({}); DefaultOpen.args = { defaultOpen: true, @@ -93,3 +93,5 @@ const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Elevation/Elevation.stories.tsx b/components/Elevation/Elevation.stories.tsx index b6e4c93f..952c58f5 100644 --- a/components/Elevation/Elevation.stories.tsx +++ b/components/Elevation/Elevation.stories.tsx @@ -4,10 +4,10 @@ import { Elevation } from './Elevation'; import { Flex } from '../Flex'; import { Text } from '../Text'; -export default { +const Component: Meta = { title: 'Components/Elevation', component: Elevation, -} as Meta; +}; export const Basic: StoryFn = (args) => ( @@ -80,3 +80,5 @@ Basic.argTypes = { const Customize: StoryFn = () => ( ); + +export default Component; diff --git a/components/FaencyProvider.tsx b/components/FaencyProvider.tsx index 4e08638a..1edf4649 100644 --- a/components/FaencyProvider.tsx +++ b/components/FaencyProvider.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Provider as TooltipProvider } from '@radix-ui/react-tooltip'; interface FaencyProviderProps { - children: React.ReactNode; + children?: React.ReactNode; } export const FaencyProvider = ({ children }: FaencyProviderProps) => ( diff --git a/components/Flex/Flex.stories.tsx b/components/Flex/Flex.stories.tsx index 7294cb2f..54cee373 100644 --- a/components/Flex/Flex.stories.tsx +++ b/components/Flex/Flex.stories.tsx @@ -4,10 +4,10 @@ import { StoryFn, Meta } from '@storybook/react'; import { Flex } from './Flex'; import { Box } from '../Box'; -export default { +const Component: Meta = { title: 'Components/Flex', component: Flex, -} as Meta; +}; export const Basic: StoryFn = (args) => ( @@ -24,3 +24,5 @@ Basic.args = { }; const Customize: StoryFn = (args) => ; + +export default Component; diff --git a/components/Grid/Grid.stories.tsx b/components/Grid/Grid.stories.tsx index 43e62542..032746d5 100644 --- a/components/Grid/Grid.stories.tsx +++ b/components/Grid/Grid.stories.tsx @@ -5,10 +5,10 @@ import { Grid } from './Grid'; import { Box } from '../Box'; import { Text } from '../Text'; -export default { +const Component: Meta = { title: 'Components/Grid', component: Grid, -} as Meta; +}; export const Basic: StoryFn = (args) => ( @@ -42,3 +42,5 @@ Basic.args = { }; const Customize: StoryFn = (args) => ; + +export default Component; diff --git a/components/Heading/Heading.stories.tsx b/components/Heading/Heading.stories.tsx index df8a35b0..cf8b26e0 100644 --- a/components/Heading/Heading.stories.tsx +++ b/components/Heading/Heading.stories.tsx @@ -4,10 +4,10 @@ import { StoryFn, Meta } from '@storybook/react'; import { Flex } from '../Flex'; import { H1, H2, H3, H4, H5, H6 } from './Heading'; -export default { +const Component: Meta = { title: 'Components/Heading', component: H1, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -20,7 +20,7 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; Basic.argTypes = { @@ -50,3 +50,5 @@ const Customize: StoryFn = (args) => ( Heading level 1 SemiBold ); + +export default Component; diff --git a/components/IconButton/IconButton.stories.tsx b/components/IconButton/IconButton.stories.tsx index 5a7dc1b5..c6fee8af 100644 --- a/components/IconButton/IconButton.stories.tsx +++ b/components/IconButton/IconButton.stories.tsx @@ -4,10 +4,10 @@ import { IconButton } from './IconButton'; import * as Icons from '@radix-ui/react-icons'; import { Flex } from '../Flex'; -export default { +const Component: Meta = { title: 'Components/IconButton', component: IconButton, -} as Meta; +}; export const Sizes: StoryFn = (args) => ( @@ -74,3 +74,5 @@ Variants.argTypes = { const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Image/Image.stories.tsx b/components/Image/Image.stories.tsx index 84221209..a9ca3058 100644 --- a/components/Image/Image.stories.tsx +++ b/components/Image/Image.stories.tsx @@ -3,23 +3,25 @@ import { StoryFn, Meta } from '@storybook/react'; import { Image } from './Image'; -export default { +const Component: Meta = { title: 'Components/Image', component: Image, -} as Meta; +}; const Template: StoryFn = (args) => ; -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = { src: 'https://picsum.photos/200/300', }; -export const Large = Template.bind({}); +export const Large: StoryFn = Template.bind({}); Large.args = { src: 'https://picsum.photos/2000/3000', }; const Customize: StoryFn = (args) => ; + +export default Component; diff --git a/components/Input/Input.stories.tsx b/components/Input/Input.stories.tsx index fe47601d..75a10fbf 100644 --- a/components/Input/Input.stories.tsx +++ b/components/Input/Input.stories.tsx @@ -25,11 +25,11 @@ const InputForStory = modifyVariantsForStory< InputProps & React.InputHTMLAttributes >(BaseInput); -export default { +const Component: Meta = { title: 'Components/Input', component: InputForStory, argTypes: { onClick: { action: 'clicked' } }, -} as Meta; +}; export const Basic: StoryFn = ({ id, ...args }) => ( @@ -105,16 +105,16 @@ export const Types: StoryFn = ({ type, ...args }) => ( Types.args = {}; -export const Invalid = Basic.bind({}); +export const Invalid: StoryFn = Basic.bind({}); Invalid.args = { id: 'invalid', state: 'invalid' }; ignoreArgType('id', Invalid); -export const Disabled = Basic.bind({}); +export const Disabled: StoryFn = Basic.bind({}); Disabled.args = { id: 'disabled', disabled: true, defaultValue: 'value' }; ignoreArgType('id', Disabled); -export const ReadOnly = Basic.bind({}); +export const ReadOnly: StoryFn = Basic.bind({}); ReadOnly.args = { id: 'readonly', readOnly: true, defaultValue: 'value' }; ignoreArgType('id', ReadOnly); @@ -157,7 +157,7 @@ export const Ghost: StoryFn = (args) => ( ); Ghost.args = { defaultValue: 'value', variant: 'ghost' }; -export const Adornments = Basic.bind({}); +export const Adornments: StoryFn = Basic.bind({}); Adornments.args = { id: 'adornments', startAdornment: , @@ -251,3 +251,5 @@ export const Autofill: StoryFn = (args) => ( const Customize: StoryFn = ({ id, ...args }) => ( ); + +export default Component; diff --git a/components/Label/Label.stories.tsx b/components/Label/Label.stories.tsx index 91147313..a02697ea 100644 --- a/components/Label/Label.stories.tsx +++ b/components/Label/Label.stories.tsx @@ -16,10 +16,10 @@ const LabelForStory = modifyVariantsForStory< LabelProps & React.LabelHTMLAttributes >(BaseLabel); -export default { +const Component: Meta = { title: 'Components/Label', component: LabelForStory, -} as Meta; +}; const Template: StoryFn = ({ id, ...args }) => ( @@ -30,21 +30,21 @@ const Template: StoryFn = ({ id, ...args }) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = { id: 'basic', }; ignoreArgType('id', Basic); -export const Capitalized = Template.bind({}); +export const Capitalized: StoryFn = Template.bind({}); Capitalized.args = { id: 'capitalize', }; ignoreArgType('id', Capitalized); -export const CapitalizedWords = Template.bind({}); +export const CapitalizedWords: StoryFn = Template.bind({}); CapitalizedWords.args = { id: 'capitalize-words', @@ -52,14 +52,14 @@ CapitalizedWords.args = { }; ignoreArgType('id', CapitalizedWords); -export const Uppercased = Template.bind({}); +export const Uppercased: StoryFn = Template.bind({}); Uppercased.args = { id: 'uppercase', transform: 'uppercase', }; ignoreArgType('id', Uppercased); -export const Invalid = Template.bind({}); +export const Invalid: StoryFn = Template.bind({}); Invalid.args = { id: 'invalidvariant', variant: 'invalid', @@ -103,3 +103,5 @@ FocusContrast.args = { id: 'focuscontrastvariants', }; ignoreArgType('id', FocusContrast); + +export default Component; diff --git a/components/Link/Link.stories.tsx b/components/Link/Link.stories.tsx index b7615881..dbd727ca 100644 --- a/components/Link/Link.stories.tsx +++ b/components/Link/Link.stories.tsx @@ -13,10 +13,10 @@ const LinkForStory = modifyVariantsForStory = { title: 'Components/Link', component: LinkForStory, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -24,11 +24,11 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Variant = Template.bind({}); +export const Variant: StoryFn = Template.bind({}); Variant.args = { variant: 'primary', @@ -45,3 +45,5 @@ const Customize: StoryFn = (args) => ( https://traefik.io ); + +export default Component; diff --git a/components/List/List.stories.tsx b/components/List/List.stories.tsx index 94be79ab..bb3a8025 100644 --- a/components/List/List.stories.tsx +++ b/components/List/List.stories.tsx @@ -10,10 +10,10 @@ import { Button } from '../Button'; import { InfoCircledIcon } from '@radix-ui/react-icons'; -export default { +const Component: Meta = { title: 'Components/List', component: Ul, -} as Meta; +}; const Template: StoryFn = (args) => (
    @@ -33,9 +33,9 @@ const Customize: StoryFn = (args) => (
); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); -export const Interactive = Template.bind({}); +export const Interactive: StoryFn = Template.bind({}); Interactive.args = { interactive: true, }; @@ -97,3 +97,5 @@ export const Controls: StoryFn = (args) => ( Controls.args = { interactive: true, }; + +export default Component; diff --git a/components/Navigation/Navigation.stories.tsx b/components/Navigation/Navigation.stories.tsx index 7b04aa3b..e0340b0f 100644 --- a/components/Navigation/Navigation.stories.tsx +++ b/components/Navigation/Navigation.stories.tsx @@ -19,7 +19,7 @@ import { Badge } from '../Badge'; import { Text } from '../Text'; import { useDebouncedCallback } from 'use-debounce'; -export default { +const Component: Meta = { title: 'Components/Navigation', component: NavigationDrawer, argTypes: { @@ -30,7 +30,7 @@ export default { control: 'boolean', }, }, -} as Meta; +}; const BaseNavigationDrawer = (props: NavigationDrawerProps): JSX.Element => ( @@ -64,7 +64,7 @@ const Template: StoryFn = (args) => { ); }; -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = { elevation: 1, @@ -110,7 +110,7 @@ const AdornmentsTemplate: StoryFn = (args) => { ); }; -export const Adornments = AdornmentsTemplate.bind({}); +export const Adornments: StoryFn = AdornmentsTemplate.bind({}); Adornments.args = { elevation: 1, @@ -159,8 +159,12 @@ const MultipleSectionsTemplate: StoryFn = (args ); }; -export const MultiSection = MultipleSectionsTemplate.bind({}); +export const MultiSection: StoryFn = MultipleSectionsTemplate.bind( + {} +); MultiSection.args = { elevation: 1, }; + +export default Component; diff --git a/components/Navigation/NavigationItem.stories.tsx b/components/Navigation/NavigationItem.stories.tsx index 6114faf9..d88c83c8 100644 --- a/components/Navigation/NavigationItem.stories.tsx +++ b/components/Navigation/NavigationItem.stories.tsx @@ -16,7 +16,7 @@ import { import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory'; import { Badge } from '../Badge'; -export default { +const Component: Meta = { title: 'Components/NavigationItem', component: NavigationItem, argTypes: { @@ -42,7 +42,7 @@ export default { control: 'boolean', }, }, -} as Meta; +}; const BaseNavigationItem = (props: NavigationItemProps): JSX.Element => ( @@ -76,7 +76,7 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = { as: 'a', @@ -110,3 +110,5 @@ export const LinkProps: StoryFn = (args) => ( LinkProps.args = { as: 'a', }; + +export default Component; diff --git a/components/NavigationTree/NavigationTree.stories.tsx b/components/NavigationTree/NavigationTree.stories.tsx index ce78168c..7b593510 100644 --- a/components/NavigationTree/NavigationTree.stories.tsx +++ b/components/NavigationTree/NavigationTree.stories.tsx @@ -11,7 +11,7 @@ import { } from '@radix-ui/react-icons'; import { NavigationTreeDrawer } from '.'; -export default { +const Component: Meta = { title: 'Components/NavigationTree', component: NavigationTreeContainer, argTypes: { @@ -32,7 +32,7 @@ export default { }, }, }, -} as Meta; +}; const Template: StoryFn = (args) => { const [currentRoute, setCurrentRoute] = useState('/'); @@ -90,7 +90,7 @@ const Template: StoryFn = (args) => { ); }; -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; @@ -143,6 +143,8 @@ const FullWidthStory: StoryFn = (args) => { ); }; -export const FullWidth = FullWidthStory.bind({}); +export const FullWidth: StoryFn = FullWidthStory.bind({}); FullWidth.args = {}; + +export default Component; diff --git a/components/NavigationTree/NavigationTreeItem.stories.tsx b/components/NavigationTree/NavigationTreeItem.stories.tsx index 2836fdc1..01dc0e6e 100644 --- a/components/NavigationTree/NavigationTreeItem.stories.tsx +++ b/components/NavigationTree/NavigationTreeItem.stories.tsx @@ -15,7 +15,7 @@ import { QuestionMarkCircledIcon, } from '@radix-ui/react-icons'; -export default { +const Component: Meta = { title: 'Components/NavigationTree', component: NavigationTreeItem, argTypes: { @@ -78,7 +78,7 @@ export default { control: 'boolean', }, }, -} as Meta; +}; const Template: StoryFn = (args) => { const [currentRoute, setCurrentRoute] = useState('/'); @@ -108,7 +108,9 @@ const Template: StoryFn = (args) => { ); }; -export const TreeItem = Template.bind({}); +export const TreeItem: StoryFn = Template.bind({}); TreeItem.args = { label: 'One.One', }; + +export default Component; diff --git a/components/Popover/Popover.stories.tsx b/components/Popover/Popover.stories.tsx index 2c43d2ee..611ede11 100644 --- a/components/Popover/Popover.stories.tsx +++ b/components/Popover/Popover.stories.tsx @@ -21,10 +21,10 @@ import { Box } from '../Box'; const BasePopover = (props: PopoverProps): JSX.Element => ; const PopoverForStory = modifyVariantsForStory(BasePopover); -export default { +const Component: Meta = { title: 'Components/Popover', component: PopoverForStory, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -43,7 +43,7 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); export const RichContent: StoryFn = (args) => ( @@ -109,3 +109,5 @@ export const RowAnchor: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Radio/Radio.stories.tsx b/components/Radio/Radio.stories.tsx index c1be9590..61a32559 100644 --- a/components/Radio/Radio.stories.tsx +++ b/components/Radio/Radio.stories.tsx @@ -17,10 +17,10 @@ const RadioGroupForStory = modifyVariantsForStory< RadioGroupProps & React.InputHTMLAttributes >(BaseRadioGroup); -export default { +const Component: Meta = { title: 'Components/Radio', component: RadioForStory, -} as Meta; +}; const Template: StoryFn = ({ value, ...args }) => ( @@ -29,17 +29,17 @@ const Template: StoryFn = ({ value, ...args }) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Size = Template.bind({}); +export const Size: StoryFn = Template.bind({}); Size.args = { size: '2', }; -export const Disabled = Template.bind({}); +export const Disabled: StoryFn = Template.bind({}); Disabled.args = { disabled: true, @@ -52,3 +52,5 @@ const Customize: StoryFn = ({ value, ...args }) => ( ); + +export default Component; diff --git a/components/RadioAccordion/RadioAccordion.stories.tsx b/components/RadioAccordion/RadioAccordion.stories.tsx index 6bb57e97..1902e9d9 100644 --- a/components/RadioAccordion/RadioAccordion.stories.tsx +++ b/components/RadioAccordion/RadioAccordion.stories.tsx @@ -11,10 +11,10 @@ import { Box } from '../Box'; import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from '../Accordion'; import { Text } from '../Text'; -export default { +const Component: Meta = { title: 'Components/RadioAccordion', component: RadioAccordionRoot, -} as Meta; +}; export const Basic: StoryFn = (args) => ( @@ -79,3 +79,5 @@ const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Select/Select.stories.tsx b/components/Select/Select.stories.tsx index c4478410..e72c4459 100644 --- a/components/Select/Select.stories.tsx +++ b/components/Select/Select.stories.tsx @@ -10,10 +10,10 @@ const SelectForStory = modifyVariantsForStory< SelectProps & React.InputHTMLAttributes >(BaseSelect); -export default { +const Component: Meta = { title: 'Components/Select', component: SelectForStory, -} as Meta; +}; const Template: StoryFn = (args) => ( @@ -25,15 +25,15 @@ const Template: StoryFn = (args) => ( ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Size = Template.bind({}); +export const Size: StoryFn = Template.bind({}); Size.args = { size: 'large', placeholder: 'placeholder' }; -export const Variant = Template.bind({}); +export const Variant: StoryFn = Template.bind({}); Variant.args = { variant: 'ghost', defaultValue: 'option3' }; Variant.argTypes = { @@ -43,11 +43,11 @@ Variant.argTypes = { }, }; -export const State = Template.bind({}); +export const State: StoryFn = Template.bind({}); State.args = { state: 'invalid' }; -export const Disabled = Template.bind({}); +export const Disabled: StoryFn = Template.bind({}); Disabled.args = { disabled: true, defaultValue: 'option3' }; @@ -82,3 +82,5 @@ const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Skeleton/Skeleton.stories.tsx b/components/Skeleton/Skeleton.stories.tsx index 7d9c6063..cef463bb 100644 --- a/components/Skeleton/Skeleton.stories.tsx +++ b/components/Skeleton/Skeleton.stories.tsx @@ -16,10 +16,10 @@ import { Cross1Icon } from '@radix-ui/react-icons'; const BaseSkeleton = (props: SkeletonProps): JSX.Element => ; const SkeletonForStory = modifyVariantsForStory(BaseSkeleton); -export default { +const Component: Meta = { title: 'Components/Skeleton', component: SkeletonForStory, -} as Meta; +}; export const Square: StoryFn = () => ( @@ -202,3 +202,5 @@ export const Customs: StoryFn = () => (
); + +export default Component; diff --git a/components/Switch/Switch.stories.tsx b/components/Switch/Switch.stories.tsx index 7e57c2c2..3de5b533 100644 --- a/components/Switch/Switch.stories.tsx +++ b/components/Switch/Switch.stories.tsx @@ -13,23 +13,23 @@ const SwitchForStory = modifyVariantsForStory< SwitchProps & React.InputHTMLAttributes >(BaseSwitch); -export default { +const Component: Meta = { title: 'Components/Switch', component: SwitchForStory, argTypes: { onClick: { action: 'clicked' } }, -} as Meta; +}; const Template: StoryFn = (args) => ; -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; -export const Large = Template.bind({}); +export const Large: StoryFn = Template.bind({}); Large.args = { size: '2' }; -export const Disabled = Template.bind({}); +export const Disabled: StoryFn = Template.bind({}); Disabled.args = { disabled: true }; @@ -133,3 +133,5 @@ ignoreArgType('id', LabelAndTitle); const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Table/Table.stories.tsx b/components/Table/Table.stories.tsx index c1286304..9203a0a5 100644 --- a/components/Table/Table.stories.tsx +++ b/components/Table/Table.stories.tsx @@ -26,10 +26,10 @@ import { Text } from '../Text'; const BaseTable = (props: TableProps): JSX.Element =>
; const TableForStory = modifyVariantsForStory(BaseTable); -export default { +const Component: Meta = { title: 'Components/Table', component: TableForStory, -} as Meta; +}; export const Basic: StoryFn = ({ transform, ...args }) => ( @@ -757,3 +757,5 @@ CollapsibleRow.args = { interactive: true, elevation: '1', }; + +export default Component; diff --git a/components/Tabs/Tabs.stories.tsx b/components/Tabs/Tabs.stories.tsx index 67d055c4..24ff03f8 100644 --- a/components/Tabs/Tabs.stories.tsx +++ b/components/Tabs/Tabs.stories.tsx @@ -4,10 +4,10 @@ import { H2 } from '../Heading'; import { Text } from '../Text'; import { TabsContainer, TabsList, TabsTrigger, TabsContent } from './Tabs'; -export default { +const Component: Meta = { title: 'Components/Tabs', component: TabsContainer, -} as Meta; +}; export const Basic: StoryFn = (args) => { return ( @@ -72,3 +72,5 @@ export const Basic: StoryFn = (args) => { ); }; + +export default Component; diff --git a/components/Text/Text.stories.tsx b/components/Text/Text.stories.tsx index e7ae3140..a9b70886 100644 --- a/components/Text/Text.stories.tsx +++ b/components/Text/Text.stories.tsx @@ -11,16 +11,16 @@ const TextForStory = modifyVariantsForStory = { title: 'Components/Text', component: TextForStory, -} as Meta; +}; const Template: StoryFn = (args) => ( Makes Networking Boring ); -export const Basic = Template.bind({}); +export const Basic: StoryFn = Template.bind({}); Basic.args = {}; @@ -173,3 +173,5 @@ const Customize: StoryFn = (args) => ( SemiBold ); + +export default Component; diff --git a/components/TextField/TextField.stories.tsx b/components/TextField/TextField.stories.tsx index 9ef89992..d7f2367c 100644 --- a/components/TextField/TextField.stories.tsx +++ b/components/TextField/TextField.stories.tsx @@ -22,11 +22,11 @@ const TextFieldForStory = modifyVariantsForStory< TextFieldProps & React.InputHTMLAttributes >(BaseTextField); -export default { +const Component: Meta = { title: 'Components/TextField', component: TextFieldForStory, argTypes: { onClick: { action: 'clicked' } }, -} as Meta; +}; const Template: StoryFn = (args) => ; @@ -69,19 +69,19 @@ Basic.args = { }; ignoreArgType('id', Basic); -export const PasswordType = Template.bind({}); +export const PasswordType: StoryFn = Template.bind({}); PasswordType.args = { type: 'password', id: 'passwordtype', label: 'password' }; ignoreArgType('id', PasswordType); -export const Clearable = Basic.bind({}); +export const Clearable: StoryFn = Basic.bind({}); Clearable.args = { id: 'clearable', clearable: true }; ignoreArgType('id', Clearable); -export const Disabled = Basic.bind({}); +export const Disabled: StoryFn = Basic.bind({}); Disabled.args = { id: 'disabled', disabled: true }; ignoreArgType('id', Disabled); -export const ReadOnly = Basic.bind({}); +export const ReadOnly: StoryFn = Basic.bind({}); ReadOnly.args = { id: 'readonly', readOnly: true }; ignoreArgType('id', ReadOnly); @@ -151,7 +151,7 @@ Display.args = { }; ignoreArgType('id', Display); -export const DisplayClearable = Display.bind({}); +export const DisplayClearable: StoryFn = Display.bind({}); DisplayClearable.args = { id: 'displayclearable', clearable: true, @@ -202,3 +202,5 @@ ignoreArgType('id', LabelComponent); const Customize: StoryFn = (args) => ( ); + +export default Component; diff --git a/components/Textarea/Textarea.stories.tsx b/components/Textarea/Textarea.stories.tsx index 53dfb649..f6a65a43 100644 --- a/components/Textarea/Textarea.stories.tsx +++ b/components/Textarea/Textarea.stories.tsx @@ -13,10 +13,10 @@ const BaseTextarea = (props: TextareaProps): JSX.Element =>