refactor: use generic StoryFn type to pass in component props (#35)

* refactor: use generic StoryFn type to pass in component props * refactor: use generic StoryFn type to pass in component props
giantnodes · Apr 22, 2024 · ffcc34c · ffcc34c
1 parent 06795e4
commit ffcc34c
Show file tree

Hide file tree

Showing 17 changed files with 33 additions and 25 deletions.
diff --git a/packages/react/src/components/alert/Alert.stories.tsx b/packages/react/src/components/alert/Alert.stories.tsx
@@ -20,7 +20,7 @@ const defaultProps = {
   ...alert.defaultVariants,
 }
 
-export const Default: StoryFn = (args: AlertProps) => (
+export const Default: StoryFn<AlertProps> = (args) => (
   <Alert {...args}>
     <Alert.Body>
       <Alert.Heading>There were 2 errors with your submission</Alert.Heading>
@@ -31,6 +31,7 @@ export const Default: StoryFn = (args: AlertProps) => (
     </Alert.Body>
   </Alert>
 )
+
 Default.args = {
   ...defaultProps,
 }

diff --git a/packages/react/src/components/avatar/Avatar.stories.tsx b/packages/react/src/components/avatar/Avatar.stories.tsx
@@ -26,16 +26,17 @@ const defaultProps = {
   ...avatar.defaultVariants,
 }
 
-export const Default: StoryFn = (args: AvatarProps) => (
+export const Default: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args}>
     <Avatar.Image alt="avatar image" src="https://i.pravatar.cc/150?img=1" />
   </Avatar>
 )
+
 Default.args = {
   ...defaultProps,
 }
 
-export const UsingGroup: StoryFn = (args: AvatarGroupProps) => (
+export const UsingGroup: StoryFn<AvatarGroupProps> = (args) => (
   <Avatar.Group {...args}>
     <Avatar>
       <Avatar.Image alt="avatar image 1" src="https://i.pravatar.cc/150?img=1" />
@@ -59,20 +60,22 @@ export const UsingGroup: StoryFn = (args: AvatarGroupProps) => (
     </Avatar>
   </Avatar.Group>
 )
+
 UsingGroup.args = {
   ...defaultProps,
 }
 
-export const UsingText: StoryFn = (args: AvatarProps) => (
+export const UsingText: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args} className="bg-zinc-100">
     <p>JP</p>
   </Avatar>
 )
+
 UsingText.args = {
   ...defaultProps,
 }
 
-export const UsingIcon: StoryFn = (args: AvatarProps) => (
+export const UsingIcon: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args} className="bg-zinc-100">
     <Avatar.Icon
       icon={
@@ -83,16 +86,18 @@ export const UsingIcon: StoryFn = (args: AvatarProps) => (
     />
   </Avatar>
 )
+
 UsingIcon.args = {
   ...defaultProps,
 }
 
-export const UsingNotification: StoryFn = (args: AvatarProps) => (
+export const UsingNotification: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args}>
     <Avatar.Image alt="avatar image 1" src="https://i.pravatar.cc/150?img=1" />
     <Avatar.Notification />
   </Avatar>
 )
+
 UsingNotification.args = {
   ...defaultProps,
 }

diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx
@@ -14,7 +14,7 @@ const defaultProps = {
   ...breadcrumb.defaultVariants,
 }
 
-export const Default: StoryFn = (args: BreadcrumbProps<object>) => (
+export const Default: StoryFn<BreadcrumbProps<object>> = (args) => (
   <Breadcrumb {...args}>
     <Breadcrumb.Item>Project</Breadcrumb.Item>
     <Breadcrumb.Item>Giantnodes</Breadcrumb.Item>

diff --git a/packages/react/src/components/button/Button.stories.tsx b/packages/react/src/components/button/Button.stories.tsx
@@ -33,7 +33,7 @@ const defaultProps = {
   ...button.defaultVariants,
 }
 
-export const Default: StoryFn = (args: ButtonProps) => (
+export const Default: StoryFn<ButtonProps> = (args) => (
   <div className="flex gap-2">
     <Button {...args} color="brand">
       Button
@@ -57,7 +57,7 @@ Default.args = {
   ...defaultProps,
 }
 
-export const LinkButton: StoryFn = (args: ButtonProps) => (
+export const LinkButton: StoryFn<ButtonProps> = (args) => (
   <Button {...args} as={Link} href="www.giantnodes.com" target="__blank">
     Button
   </Button>

diff --git a/packages/react/src/components/card/Card.stories.tsx b/packages/react/src/components/card/Card.stories.tsx
@@ -14,7 +14,7 @@ const defaultProps = {
   ...card.defaultVariants,
 }
 
-export const Default: StoryFn = (args: CardProps) => (
+export const Default: StoryFn<CardProps> = (args) => (
   <Card {...args}>
     <Card.Header>Lorem ipsum dolor sit amet.</Card.Header>
     <Card.Body>
@@ -29,6 +29,7 @@ export const Default: StoryFn = (args: CardProps) => (
     <Card.Footer>Lorem ipsum dolor sit amet.</Card.Footer>
   </Card>
 )
+
 Default.args = {
   ...defaultProps,
 }

diff --git a/packages/react/src/components/checkbox/Checkbox.stories.tsx b/packages/react/src/components/checkbox/Checkbox.stories.tsx
@@ -19,7 +19,7 @@ const defaultProps = {
   ...checkbox.defaultVariants,
 }
 
-export const Default: StoryFn = (args: CheckboxProps) => <Checkbox {...args} />
+export const Default: StoryFn<CheckboxProps> = (args) => <Checkbox {...args} />
 
 Default.args = {
   ...defaultProps,

diff --git a/packages/react/src/components/chip/Chip.stories.tsx b/packages/react/src/components/chip/Chip.stories.tsx
@@ -29,7 +29,7 @@ const defaultProps = {
   ...chip.defaultVariants,
 }
 
-export const Default: StoryFn = (args: ChipProps) => (
+export const Default: StoryFn<ChipProps> = (args) => (
   <div className="flex gap-2">
     <Chip {...args} color="neutral">
       Neutral
@@ -51,6 +51,7 @@ export const Default: StoryFn = (args: ChipProps) => (
     </Chip>
   </div>
 )
+
 Default.args = {
   ...defaultProps,
 }

diff --git a/packages/react/src/components/dialog/Dialog.stories.tsx b/packages/react/src/components/dialog/Dialog.stories.tsx
@@ -12,7 +12,7 @@ const Component: Meta<typeof Dialog> = {
 
 const defaultProps = {}
 
-export const Default: StoryFn = (args: DialogProps) => (
+export const Default: StoryFn<DialogProps> = (args) => (
   <Dialog {...args}>
     <Button>Open</Button>
 

diff --git a/packages/react/src/components/form/Form.stories.tsx b/packages/react/src/components/form/Form.stories.tsx
@@ -16,7 +16,7 @@ const defaultProps = {
   ...form.defaultVariants,
 }
 
-export const Default: StoryFn = (args: FormProps) => (
+export const Default: StoryFn<FormProps> = (args) => (
   <Form {...args}>
     <Form.Group name="email-address">
       <Form.Label>Email address</Form.Label>

diff --git a/packages/react/src/components/input/Input.stories.tsx b/packages/react/src/components/input/Input.stories.tsx
@@ -23,7 +23,7 @@ const defaultProps = {
   ...input.defaultVariants,
 }
 
-export const Default: StoryFn = (args: InputProps) => (
+export const Default: StoryFn<InputProps> = (args) => (
   <Input {...args}>
     <Input.Addon>$</Input.Addon>
     <Input.Control placeholder="Username" type="text" />
@@ -35,7 +35,7 @@ Default.args = {
   ...defaultProps,
 }
 
-export const Disabled: StoryFn = (args: InputProps) => (
+export const Disabled: StoryFn<InputProps> = (args) => (
   <Input {...args}>
     <Input.Addon>$</Input.Addon>
     <Input.Control disabled placeholder="Username" type="text" />

diff --git a/packages/react/src/components/link/Link.stories.tsx b/packages/react/src/components/link/Link.stories.tsx
@@ -16,7 +16,7 @@ const defaultProps = {
   ...link.defaultVariants,
 }
 
-export const Default: StoryFn = (args: LinkProps) => <Link {...args}>Default Link</Link>
+export const Default: StoryFn<LinkProps> = (args) => <Link {...args}>Default Link</Link>
 
 Default.args = {
   ...defaultProps,

diff --git a/packages/react/src/components/menu/Menu.stories.tsx b/packages/react/src/components/menu/Menu.stories.tsx
@@ -26,7 +26,7 @@ const defaultProps = {
   ...menu.defaultVariants,
 }
 
-export const Default: StoryFn = (args: MenuProps) => (
+export const Default: StoryFn<MenuProps> = (args) => (
   <Menu {...args}>
     <Button>Open</Button>
 

diff --git a/packages/react/src/components/navigation/Navigation.stories.tsx b/packages/react/src/components/navigation/Navigation.stories.tsx
@@ -39,7 +39,7 @@ const AcmeLogo = () => (
   </svg>
 )
 
-export const Horizontal: StoryFn = (args: NavigationProps) => (
+export const Horizontal: StoryFn<NavigationProps> = (args) => (
   <Navigation {...args} orientation="horizontal">
     <Navigation.Brand>
       <AcmeLogo />
@@ -74,7 +74,7 @@ Horizontal.args = {
   ...defaultProps,
 }
 
-export const Vertical: StoryFn = (args: NavigationProps) => (
+export const Vertical: StoryFn<NavigationProps> = (args) => (
   <Navigation {...args} orientation="vertical" variant="highlight">
     <Navigation.Brand>
       <AcmeLogo />

diff --git a/packages/react/src/components/progress/Progress.stories.tsx b/packages/react/src/components/progress/Progress.stories.tsx
@@ -14,7 +14,7 @@ const defaultProps = {
   ...progress.defaultVariants,
 }
 
-export const Default: StoryFn = (args: ProgressProps) => (
+export const Default: StoryFn<ProgressProps> = (args) => (
   <Progress {...args}>
     <Progress.Bar color="#2cc76a" width={27} />
     <Progress.Bar color="#f85149" width={43} />

diff --git a/packages/react/src/components/select/Select.stories.tsx b/packages/react/src/components/select/Select.stories.tsx
@@ -11,7 +11,7 @@ const Component: Meta<typeof Select> = {
 
 const defaultProps = {}
 
-export const Default: StoryFn = (args: SelectProps<object>) => (
+export const Default: StoryFn<SelectProps<object>> = (args) => (
   <Select {...args}>
     <Select.Option>Aardvark</Select.Option>
     <Select.Option>Cat</Select.Option>
@@ -26,7 +26,7 @@ Default.args = {
   ...defaultProps,
 }
 
-export const UsingForm: StoryFn = (args: SelectProps<object>) => (
+export const UsingForm: StoryFn<SelectProps<object>> = (args) => (
   <Form>
     <Form.Group name="name">
       <Form.Label>Name</Form.Label>

diff --git a/packages/react/src/components/switch/Switch.stories.tsx b/packages/react/src/components/switch/Switch.stories.tsx
@@ -23,7 +23,7 @@ const defaultProps = {
   ...toggle.defaultVariants,
 }
 
-export const Default: StoryFn = (args: SwitchProps) => <Switch {...args} />
+export const Default: StoryFn<SwitchProps> = (args) => <Switch {...args} />
 
 Default.args = {
   ...defaultProps,

diff --git a/packages/react/src/components/table/Table.stories.tsx b/packages/react/src/components/table/Table.stories.tsx
@@ -25,7 +25,7 @@ const defaultProps = {
   ...table.defaultVariants,
 }
 
-export const Default: StoryFn = (args: TableProps) => (
+export const Default: StoryFn<TableProps> = (args) => (
   <Table {...args}>
     <Table.Head>
       <Table.Column isRowHeader>Name</Table.Column>