docs(storybook): 📝 refactor stories with better types

adaptui · Sep 1, 2021 · 0b4fa56 · 0b4fa56
1 parent 780693f
commit 0b4fa56
Show file tree

Hide file tree

Showing 20 changed files with 86 additions and 120 deletions.
diff --git a/.storybook/storybookUtils.tsx → .storybook/utils.tsx b/.storybook/storybookUtils.tsx → .storybook/utils.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Story } from "@storybook/react";
+import type { Meta, Story } from "@storybook/react";
 
 import theme from "../src/theme/defaultTheme";
 
@@ -65,3 +65,10 @@ export const createControls = (
     console.log(e);
   }
 };
+
+export type CSFType<M extends Meta> = M extends {
+  component: React.ComponentType<infer P>;
+  args: infer D;
+}
+  ? { args: Omit<P, keyof D> } & Story<P>
+  : never;
diff --git a/src/alert/stories/Alert.stories.tsx b/src/alert/stories/Alert.stories.tsx
@@ -1,9 +1,6 @@
 import { Meta } from "@storybook/react";
 
-import {
-  storyTemplate,
-  createUnionControl,
-} from "../../../.storybook/storybookUtils";
+import { storyTemplate, createUnionControl } from "../../../.storybook/utils";
 import { Alert, AlertProps } from "../index";
 
 export default {

diff --git a/src/avatar/stories/Avatar.stories.tsx b/src/avatar/stories/Avatar.stories.tsx
@@ -1,10 +1,7 @@
 import { useState } from "react";
 import { Meta } from "@storybook/react";
 
-import {
-  createControls,
-  storyTemplate,
-} from "../../../.storybook/storybookUtils";
+import { createControls, storyTemplate } from "../../../.storybook/utils";
 import { InfoCircleIcon, PhotographIcon } from "../../icons";
 import { AvatarGroup, AvatarGroupProps } from "../AvatarGroup";
 import { Avatar, AvatarProps } from "../index";

diff --git a/src/badge/stories/Badge.stories.tsx b/src/badge/stories/Badge.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { Badge } from "../Badge";
-import { createControls } from "../../../.storybook/storybookUtils";
+import { createControls } from "../../../.storybook/utils";
 
 export default {
   title: "Primitives/Badge",

diff --git a/src/box/stories/Box.stories.tsx b/src/box/stories/Box.stories.tsx
@@ -1,33 +1,25 @@
-import { Story, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
-import { Box, BoxProps } from "../index";
+import { Box } from "../index";
 import { cx } from "@renderlesskit/react";
-import { createControls } from "../../../.storybook/storybookUtils";
 
 export default {
   title: "Primitives/Box",
   component: Box,
-  argTypes: createControls("box", {
-    ignore: ["unstable_system", "wrapElement", "as"],
-  }),
   parameters: {
-    options: {
-      showPanel: false,
-    },
+    options: { showPanel: false },
     layout: "centered",
   },
 } as Meta;
 
-const Base: Story<BoxProps> = args => <Box {...args}>This is the div</Box>;
-
-export const Default = Base.bind({});
-Default.args = {};
+export const Default = () => {
+  return <Box>This is a div box</Box>;
+};
 
-export const Styled: Story<BoxProps> = args => (
+export const Styled = () => (
   <Box
     as="figure"
     className="p-8 overflow-hidden bg-gray-100 md:flex rounded-xl md:p-0"
-    {...args}
   >
     <Box
       as="img"
@@ -53,26 +45,22 @@ export const Styled: Story<BoxProps> = args => (
   </Box>
 );
 
-export const AsButton: Story<BoxProps> = args => {
-  const { className, ...rest } = args;
-
+export const AsButton = () => {
   return (
     <Box
       as="button"
       type="button"
       className={cx(
         "h-8 px-4 text-base font-bold text-white lib:bg-red-500 lib:rounded-md",
-        className,
       )}
-      {...rest}
     >
       Button
     </Box>
   );
 };
 
-export const AsPrevButtonComp: Story<BoxProps> = args => (
-  <Box as={AsButton} className="bg-green-500" {...args}>
+export const AsPrevButtonComp = () => (
+  <Box as={AsButton} className="bg-green-500">
     Button
   </Box>
 );
diff --git a/src/button/stories/Button.stories.tsx b/src/button/stories/Button.stories.tsx
@@ -10,7 +10,10 @@ import {
 } from "../index";
 import { Spinner } from "../../spinner";
 import { CaretRightIcon, ClockIcon } from "../../icons";
-import { createControls } from "../../../.storybook/storybookUtils";
+import { createControls } from "../../../.storybook/utils";
+
+type Meta = ComponentMeta<typeof Button>;
+type Story = ComponentStory<typeof Button>;
 
 export default {
   title: "Primitives/Button",
@@ -32,43 +35,43 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof Button>;
+} as Meta;
 
-export const Default: ComponentStory<typeof Button> = {
+export const Default: Story = {
   args: { children: "Continue", size: "md", variant: "solid" },
   decorators: [withPseudoState],
   parameters: { options: { showPanel: true } },
 };
 
-export const Small: ComponentStory<typeof Button> = {
+export const Small: Story = {
   ...Default,
   args: { ...Default.args, size: "sm" },
 };
-export const Medium: ComponentStory<typeof Button> = { ...Default };
-export const Large: ComponentStory<typeof Button> = {
+export const Medium: Story = { ...Default };
+export const Large: Story = {
   ...Default,
   args: { ...Default.args, size: "lg" },
 };
-export const ExtraLarge: ComponentStory<typeof Button> = {
+export const ExtraLarge: Story = {
   ...Default,
   args: { ...Default.args, size: "xl" },
 };
 
-export const Solid: ComponentStory<typeof Button> = { ...Default };
-export const Subtle: ComponentStory<typeof Button> = {
+export const Solid: Story = { ...Default };
+export const Subtle: Story = {
   ...Default,
   args: { ...Default.args, variant: "subtle" },
 };
-export const Outline: ComponentStory<typeof Button> = {
+export const Outline: Story = {
   ...Default,
   args: { ...Default.args, variant: "outline" },
 };
-export const Ghost: ComponentStory<typeof Button> = {
+export const Ghost: Story = {
   ...Default,
   args: { ...Default.args, variant: "ghost" },
 };
 
-export const ButtonStack: ComponentStory<typeof Button> = {
+export const ButtonStack: Story = {
   render: args => {
     return (
       <div className="flex flex-col space-y-2">
@@ -141,82 +144,82 @@ export const ButtonStack: ComponentStory<typeof Button> = {
   parameters: { options: { showPanel: true } },
 };
 
-export const HoverStack: ComponentStory<typeof Button> = {
+export const HoverStack: Story = {
   ...ButtonStack,
   parameters: { options: { showPanel: false }, pseudo: { hover: true } },
 };
-export const ActiveStack: ComponentStory<typeof Button> = {
+export const ActiveStack: Story = {
   ...ButtonStack,
   parameters: { options: { showPanel: false }, pseudo: { active: true } },
 };
-export const FocusStack: ComponentStory<typeof Button> = {
+export const FocusStack: Story = {
   ...ButtonStack,
   parameters: { options: { showPanel: false }, pseudo: { focusVisible: true } },
 };
-export const DisabledStack: ComponentStory<typeof Button> = {
+export const DisabledStack: Story = {
   ...ButtonStack,
   args: { disabled: true },
   parameters: { options: { showPanel: false } },
 };
-export const LoadingStack: ComponentStory<typeof Button> = {
+export const LoadingStack: Story = {
   ...ButtonStack,
   args: { loading: true },
   parameters: { options: { showPanel: false } },
 };
 
-export const IconOnly: ComponentStory<typeof Button> = {
+export const IconOnly: Story = {
   ...Default,
   args: { ...Default.args, iconOnly: <ClockIcon /> },
 };
 
-export const IconOnlyStack: ComponentStory<typeof Button> = {
+export const IconOnlyStack: Story = {
   ...ButtonStack,
   args: { iconOnly: <ClockIcon /> },
 };
 
-export const Suffix: ComponentStory<typeof Button> = {
+export const Suffix: Story = {
   ...Default,
   args: { ...Default.args, suffix: <CaretRightIcon /> },
 };
 
-export const SuffixStack: ComponentStory<typeof Button> = {
+export const SuffixStack: Story = {
   ...ButtonStack,
   args: { suffix: <CaretRightIcon /> },
 };
 
-export const Prefix: ComponentStory<typeof Button> = {
+export const Prefix: Story = {
   ...Default,
   args: { ...Default.args, prefix: <ClockIcon /> },
 };
 
-export const PrefixStack: ComponentStory<typeof Button> = {
+export const PrefixStack: Story = {
   ...ButtonStack,
   args: { prefix: <ClockIcon /> },
 };
 
-export const PrefixSuffix: ComponentStory<typeof Button> = {
+export const PrefixSuffix: Story = {
   ...Default,
   args: { ...Default.args, prefix: <ClockIcon />, suffix: <CaretRightIcon /> },
 };
 
-export const PrefixSuffixStack: ComponentStory<typeof Button> = {
+export const PrefixSuffixStack: Story = {
   ...ButtonStack,
   args: { prefix: <ClockIcon />, suffix: <CaretRightIcon /> },
 };
 
-export const CloseButton: ComponentStory<typeof Button> = {
+export const CloseButton: Story = {
   ...Default,
   render: (args: CloseButtonProps) => <CloseButtonComponent {...args} />,
   args: { size: "md", variant: "solid" },
 };
 
-export const ExtendedVariant: ComponentStory<typeof Button> = {
+export const ExtendedVariant: Story = {
   ...Default,
   // @ts-ignore
   args: { ...Default.args, children: "tertiary", variant: "tertiary" },
 };
 
-export const ExtendedSize: ComponentStory<typeof Button> = {
+export const ExtendedSize: Story = {
   ...Default,
   // @ts-ignore
   args: { ...Default.args, children: "xxl", size: "xxl" },
@@ -226,7 +229,7 @@ const ExtendedSpinnerComponent = () => {
   return <Spinner size="em" className="text-base text-red-500" />;
 };
 
-export const ExtendedSpinner: ComponentStory<typeof Button> = {
+export const ExtendedSpinner: Story = {
   ...Default,
   args: {
     ...Default.args,
@@ -241,7 +244,7 @@ const CustomSpinnerComponent = () => {
   );
 };
 
-export const CustomSpinner: ComponentStory<typeof Button> = {
+export const CustomSpinner: Story = {
   ...ExtendedSpinner,
   args: {
     ...ExtendedSpinner.args,