refactor: update Storybook docs and usage

Author: TylerAPfledderer

docs/applying-storybook.md

@@ -18,7 +18,9 @@ It's as easy as running `yarn storybook` to boot up a dedicated localhost to see
 
 ## Setting up a component's stories
 
-> 🚨 NOTE: This project has version 7, which is currently still in beta. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [7.0 beta docs](https://storybook.js.org/docs/7.0/react/) if you need any additional details
+> 🚨 NOTE: This project uses Storybook 7, using the Component Story Format v3 and the `satisfies` keyword to define the type of the meta object. See [Storybook 7 docs](https://storybook.js.org/docs/react/get-started/whats-a-story) for details.
+>
+> These docs are also still a work in progress as we create new stories inline with the new Design System. Check back here regularly for updates to the approach and structure as we keep inline with the latest Storybook versions and usage.
 
 A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
 
@@ -40,15 +42,13 @@ The initial structure of each story file will look something like this (in types
 ```tsx
 import ComponentA from "."
 
-type ComponentAType = typeof ComponentA
-
-const meta: Meta<ComponentAType> {
+const meta {
   title: "ComponentA",
   component: ComponentA
-}
+} satisfies Meta<typeof ComponentA>
 
 export default meta
-type Story = StoryObj<ComponentAType>;
+type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: () => <ComponentA />
@@ -59,33 +59,31 @@ export const Basic: Story = {
 
 We will maintain this structure for every story file, regardless of simplicity.
 
-Should the component accept props on all or some renders, you can provide an `args` prop for each story and supply the necessary data. And if there is children, use the `render` prop to pass the args and supply children elements.
+Should the component accept props on all or some renders, you can provide an `args` prop for each story and supply the necessary data. This can be done in place of the render if only a single instance of the given component is needed with no other components. If the `children` prop is used, it can still be used in the `args` prop.
 
 Let's say for a `Button` component with different style variants...
 
 ```tsx
 import Button from "."
 
-type ButtonType = typeof Button
-
-const meta: Meta<ButtonType> {
+const meta {
   title: "Button",
   component: Button
-}
+} satisfies Meta<typeof Button>
 
 export default meta
-type Story = StoryObj<ButtonType>;
+type Story = StoryObj<typeof meta>;
 
 export const Solid: Story = {
-  render: (args) => <Button {...args}>A Button</Button>,
   args: {
     variant: 'solid',
+    children: 'A Button'
   }
 }
 export const Outline: Story = {
-  render: (args) => <Button {...args}>A Button</Button>,
   args: {
     variant: 'outline',
+    children: 'A Button'
   }
 }
 
@@ -94,26 +92,51 @@ export const Outline: Story = {
  * they should be shown under one story, so they can be seen side-by-side in the GUI
  * for reviewers to easily compare.
  * This can also be done for various sizes or other like alterations
+ *
+ * 🚨 If prop content is supplied directly to the component and the `args` prop is not used,
+ * do not use the `StoryObj` type. This is especially important when a story rendering multiple versions
+ * of the component.
  */
 
 // Assuming `solid` is the default variant in the Chakra theme config
-export const Variants = () => (
-  <VStack>
-    <Button>A Solid Button</Button>
-    <Button variant="outline">An Outline Button</Button>
-    <Button variant="unstyled">An Unstyled Button</Button>
-  </VStack>
-)
+export const Variants = {
+  render: () => (
+    <VStack>
+      <Button>A Solid Button</Button>
+      <Button variant="outline">An Outline Button</Button>
+      <Button variant="unstyled">An Unstyled Button</Button>
+    </VStack>
+  )
+}
 ```
 
-If only one story is provided for a component, the name of the exported object should match the name in the `title` meta option. (If the title is `Atoms / Form / Button` then the object should be named `Button`) This will hoist the display name up to the parent level in the Storybook dashboard's sidebar.
+### Story file containing a single story
+
+If only one story is provided for a component, the name of the exported object should match the name in the `title` meta option. (If the title is `Atoms / Form / Button` then the object should be named `Button`) This will hoist the display name up to the parent level in the Storybook dashboard's sidebar. This will also mean you have to rename the import of the component. Call it `ButtonComponent`, say.
+
+```tsx
+import ButtonComponent from "."
+
+const meta = {
+  title: "Atoms / Form / Button",
+  component: ButtonComponent,
+} satisfies Meta<typeof ButtonComponent>
+
+export default meta
+
+export const Button: StoryObj<typeof meta> = {
+  render: () => <ButtonComponent />,
+}
+```
 
 As you go and make adjustments to the component itself or it's variant styles, Storybook will hot reload and those changes will appear in the stories that emphasize them.
 
 ## Storybook Dashboard
 
 The dashboard where you view each story has a number of different addons available to check the story thoroughly.
 
+![Screenshot of Storybook Dashboard for Ethereum.org](https://github.com/ethereum/ethereum-org-website/assets/65234762/7dea7692-6a6d-4f1c-b7cb-db177bcab44d)
+
 Outlined below are each area going from left to right in the selections.
 
 | Sidebar above the preview                | Dashboard below the preview                                                                                                                                                                                                                                                |

src/components/Alert/Alert.stories.tsx

@@ -4,9 +4,7 @@ import { Box, Flex, Text } from "@chakra-ui/react"
 
 import Alert from "."
 
-type AlertType = typeof Alert
-
-const meta: Meta<AlertType> = {
+const meta = {
   title: "Molecules / Action Feedback / Alerts",
   component: Alert,
   decorators: [
@@ -16,11 +14,11 @@ const meta: Meta<AlertType> = {
       </Flex>
     ),
   ],
-}
+} satisfies Meta<typeof Alert>
 
 export default meta
 
-type Story = StoryObj<AlertType>
+type Story = StoryObj<typeof meta>
 
 const DEMO_DESC = "This is an alert to be used in the top of the content"
 

src/components/Avatar/Avatar.stories.tsx

@@ -3,16 +3,14 @@ import { Meta, StoryObj } from "@storybook/react"
 import { VStack, AvatarGroup, HStack } from "@chakra-ui/react"
 import Avatar from "."
 
-type AvatarType = typeof Avatar
-
-const meta: Meta<AvatarType> = {
+const meta = {
   title: "Atoms / Media & Icons / Avatars",
   component: Avatar,
-}
+} satisfies Meta<typeof Avatar>
 
 export default meta
 
-type Story = StoryObj<AvatarType>
+type Story = StoryObj<typeof meta>
 
 export const Single: Story = {
   args: {

src/components/BannerNotification/BannerNotification.stories.tsx

@@ -1,27 +1,32 @@
 import React from "react"
 import { Text } from "@chakra-ui/react"
-import { Meta, StoryFn } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import { useTranslation } from "react-i18next"
 import BannerNotification from "."
 
-export default {
+const meta = {
+  title: "PostMergeBanner",
   component: BannerNotification,
-  args: {
-    shouldShow: true,
-  },
-  decorators: [(Story) => <Story />],
 } as Meta<typeof BannerNotification>
 
+export default meta
+
 /**
  * Story taken from PostMergeBanner component
  * and content from `../../content/developers/tutorials/hello-world-smart-contract-fullstack/index.md`
  */
-export const PostMergeBanner: StoryFn<typeof BannerNotification> = (args) => {
-  const { t } = useTranslation()
 
-  return (
-    <BannerNotification {...args}>
-      <Text>{t("page-upgrades-post-merge-banner-tutorial-ood")}</Text>
-    </BannerNotification>
-  )
+export const PostMergeBanner: StoryObj<typeof meta> = {
+  args: {
+    shouldShow: true,
+  },
+  render: (args) => {
+    const { t } = useTranslation()
+
+    return (
+      <BannerNotification {...args}>
+        <Text>{t("page-upgrades-post-merge-banner-tutorial-ood")}</Text>
+      </BannerNotification>
+    )
+  },
 }

src/components/BannerNotification/DismissableBanner.stories.tsx

@@ -1,28 +1,25 @@
 import { Meta, StoryObj } from "@storybook/react"
 import React from "react"
-import DismissableBanner from "../Banners/DismissableBanner"
+import DismissableBannerComponent from "../Banners/DismissableBanner"
 
-export default {
-  component: DismissableBanner,
-} as Meta<typeof DismissableBanner>
+const meta = {
+  component: DismissableBannerComponent,
+  title: "DismissableBanner",
+} as Meta<typeof DismissableBannerComponent>
 
+export default meta
 /**
  * Story taken from DismissableBanner component
  */
 const dismissableBannerStoryPageKey = "dismissableBannerStoryPageKey"
 const bannerText = "This is a dismissable banner"
 
-export const DismissableBannerStory: StoryObj<typeof DismissableBanner> = {
+export const DismissableBanner: StoryObj<typeof meta> = {
+  args: {
+    children: <div>{bannerText}</div>,
+    storageKey: dismissableBannerStoryPageKey,
+  },
   play: () => {
     localStorage.setItem(dismissableBannerStoryPageKey, "false")
   },
-  render: () => {
-    const children = <div>{bannerText}</div>
-    return (
-      <DismissableBanner
-        children={children}
-        storageKey={dismissableBannerStoryPageKey}
-      />
-    )
-  },
 }

src/components/BaseStories/Checkbox.stories.tsx

@@ -4,11 +4,9 @@ import {
   Checkbox as CheckboxComponent,
   VStack,
 } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta } from "@storybook/react"
 
-type CheckboxType = typeof CheckboxComponent
-
-const meta: Meta<CheckboxType> = {
+const meta = {
   title: "Atoms / Form / Checkbox",
   component: CheckboxComponent,
   parameters: {
@@ -17,15 +15,13 @@ const meta: Meta<CheckboxType> = {
       expanded: false,
     },
   },
-}
+} satisfies Meta<typeof CheckboxComponent>
 
 export default meta
 
-type Story = StoryObj<CheckboxType>
-
 const DEFAULT_VAL = "checked"
 
-export const Checkbox: Story = {
+export const Checkbox = {
   render: () => (
     <CheckboxGroup defaultValue={[DEFAULT_VAL]}>
       <VStack spacing={4} align="flex-start">

src/components/BaseStories/Heading.stories.tsx

@@ -10,8 +10,6 @@ import {
 import { Meta, StoryObj } from "@storybook/react"
 import Translation from "../Translation"
 
-type HeadingType = typeof HeadingComponent
-
 const meta = {
   title: "Atoms / Typography / Heading",
   component: HeadingComponent,
@@ -25,7 +23,7 @@ const meta = {
       </Flex>
     ),
   ],
-} satisfies Meta<HeadingType>
+} satisfies Meta<typeof HeadingComponent>
 
 export default meta
 

src/components/BaseStories/Link.stories.tsx

@@ -3,8 +3,6 @@ import { Center, ListItem, Stack, Text, UnorderedList } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 import Link from "../Link"
 
-type LinkType = typeof Link
-
 const meta = {
   title: "Molecules / Navigation / Links",
   component: Link,
@@ -15,7 +13,7 @@ const meta = {
       </Center>
     ),
   ],
-} satisfies Meta<LinkType>
+} satisfies Meta<typeof Link>
 
 export default meta
 
@@ -44,7 +42,7 @@ export const ExternalLink: Story = {
   render: (args) => <MockParagraph {...args} />,
 }
 
-export const LinkList: Story = {
+export const LinkList = {
   render: () => (
     <Stack spacing="6">
       <Text>

src/components/BaseStories/Radio.stories.tsx

@@ -2,9 +2,7 @@ import * as React from "react"
 import { RadioGroup, Radio as RadioComponent, Flex } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-type RadioType = typeof RadioComponent
-
-const meta: Meta<RadioType> = {
+const meta = {
   title: "Atoms / Form / Radio",
   component: RadioComponent,
   argTypes: {
@@ -19,11 +17,11 @@ const meta: Meta<RadioType> = {
       expanded: false,
     },
   },
-}
+} satisfies Meta<typeof RadioComponent>
 
 export default meta
 
-type Story = StoryObj<typeof RadioGroup>
+type Story = StoryObj<typeof meta>
 
 export const Radio: Story = {
   args: {

src/components/BaseStories/Switch.stories.tsx

@@ -1,10 +1,8 @@
 import * as React from "react"
 import { SimpleGrid, Switch as SwitchComponent } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta } from "@storybook/react"
 
-type SwitchType = typeof SwitchComponent
-
-const meta: Meta<SwitchType> = {
+const meta = {
   title: "Atoms / Form / Switch",
   component: SwitchComponent,
   parameters: {
@@ -13,13 +11,11 @@ const meta: Meta<SwitchType> = {
       expanded: false,
     },
   },
-}
+} satisfies Meta<typeof SwitchComponent>
 
 export default meta
 
-type Story = StoryObj<SwitchType>
-
-export const Switch: Story = {
+export const Switch = {
   render: () => (
     <SimpleGrid columns={{ base: 2, lg: 4 }} columnGap={1} alignItems="center">
       <span>isChecked:</span>