Merge pull request #12974 from TylerAPfledderer/refactor/update-existing-stories

refactor: sync existing stories with docs

Author: pettinarip

.eslintrc.json

@@ -30,6 +30,8 @@
           ["^@/data"],
           // From the `constants` directory.
           ["^@/lib/constants"],
+          // From the `.storybook/utils` file
+          ["^@/storybook-utils"],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.

.storybook/i18next.ts

@@ -10,7 +10,7 @@ export const baseLocales = {
 }
 
 // Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
-const ns = [
+export const ns = [
   "common",
   "glossary",
   "learn-quizzes",
@@ -19,7 +19,7 @@ const ns = [
   "page-learn",
   "page-upgrades",
   "page-developers-index",
-]
+] as const
 const supportedLngs = Object.keys(baseLocales)
 
 /**

.storybook/manager.ts

@@ -1,6 +1,5 @@
 import { addons } from "@storybook/manager-api"
 import theme from "./theme"
-// @ts-ignore
 import favicon from "../public/favicon.png"
 
 addons.setConfig({

.storybook/utils.ts

@@ -0,0 +1,25 @@
+import { getI18n } from "react-i18next"
+import { ns as exposedNs } from "./i18next"
+
+/**
+ * Get translations using the `getI18n` method.
+ *
+ * Only requires the key and optionally the namespace.
+ *
+ * Used for Stories where it is invalid to use the `useTranslation` hook in
+ * the `render` function.
+ *
+ * The `ns` param is also typed with the namespaces that are exposed in
+ * storybook.
+ *
+ * @param key - The key to translate.
+ * @param ns - The exposed namespace.
+ * @returns The translated string.
+ */
+export const getTranslation = (
+  key: string,
+  ns?: (typeof exposedNs)[number]
+) => {
+  const { t } = getI18n()
+  return t(key, { ns })
+}

src/components/Alert/Alert.stories.tsx

@@ -27,6 +27,7 @@ const STATUSES = ["error", "success", "warning", "info"] as const
 export const StatusVariants: Story = {
   args: {
     description: DEMO_DESC,
+    // To show the close button
     onClose: () => {},
   },
   render: (args) => (
@@ -54,6 +55,7 @@ export const ContentVariants: Story = {
 export const StyleVariants: Story = {
   args: {
     description: DEMO_DESC,
+    // To show the close button
     onClose: () => {},
   },
   argTypes: {

src/components/BaseStories/Accordion.stories.tsx

@@ -8,9 +8,7 @@ import {
 } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-type AccordionType = typeof Accordion
-
-const meta: Meta<AccordionType> = {
+const meta = {
   title: "Molecules / Disclosure Content / Accordions",
   component: Accordion,
   decorators: [
@@ -20,11 +18,11 @@ const meta: Meta<AccordionType> = {
       </Box>
     ),
   ],
-} satisfies Meta<AccordionType>
+} satisfies Meta<typeof Accordion>
 
 export default meta
 
-type Story = StoryObj<AccordionType>
+type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
   render: () => (

src/components/BaseStories/Checkbox.stories.tsx

@@ -2,9 +2,10 @@ import * as React from "react"
 import {
   Checkbox as CheckboxComponent,
   CheckboxGroup,
+  type CheckboxProps,
   VStack,
 } from "@chakra-ui/react"
-import { Meta } from "@storybook/react"
+import { Meta, type StoryObj } from "@storybook/react"
 
 const meta = {
   title: "Atoms / Form / Checkbox",
@@ -21,26 +22,46 @@ export default meta
 
 const DEFAULT_VAL = "checked"
 
-export const Checkbox = {
+const checkboxDataSet: CheckboxProps[] = [
+  {
+    value: DEFAULT_VAL,
+    children: "defaultValue",
+  },
+  {
+    value: "disabled",
+    isDisabled: true,
+    children: "isDisabled",
+  },
+  {
+    value: "focusable",
+    isFocusable: true,
+    isDisabled: true,
+    children: "isFocusable",
+  },
+  {
+    value: "read-only",
+    isReadOnly: true,
+    children: "isReadOnly",
+  },
+  {
+    value: "required",
+    isRequired: true,
+    children: "isRequired",
+  },
+  {
+    value: "invalid",
+    isInvalid: true,
+    children: "isInvalid",
+  },
+]
+
+export const Checkbox: StoryObj = {
   render: () => (
     <CheckboxGroup defaultValue={[DEFAULT_VAL]}>
       <VStack spacing={4} align="flex-start">
-        <CheckboxComponent value={DEFAULT_VAL}>defaultValue</CheckboxComponent>
-        <CheckboxComponent value="disabled" isDisabled>
-          isDisabled
-        </CheckboxComponent>
-        <CheckboxComponent value="focusable" isFocusable isDisabled>
-          isFocusable
-        </CheckboxComponent>
-        <CheckboxComponent value="read-only" isReadOnly>
-          isReadOnly
-        </CheckboxComponent>
-        <CheckboxComponent value="required" isRequired>
-          isRequired
-        </CheckboxComponent>
-        <CheckboxComponent value="invalid" isInvalid>
-          isInvalid
-        </CheckboxComponent>
+        {checkboxDataSet.map((props) => (
+          <CheckboxComponent key={props.value} {...props} />
+        ))}
       </VStack>
     </CheckboxGroup>
   ),

src/components/BaseStories/Link.stories.tsx

@@ -20,30 +20,30 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const MockParagraph = ({ to }: { to?: string }) => (
+const MockParagraph = ({ href }: { href: string }) => (
   <Text>
     Text body normal. Ethereum is open access to digital money and data-friendly
     services for everyone &ndash; no matter your background or location.
-    It&apos;s a <Link to={to}>community-built</Link> technology behind the
+    It&apos;s a <Link href={href}>community-built</Link> technology behind the
     cryptocurrency ether (ETH) and thousands of applications you can use today.
   </Text>
 )
 
 export const InternalLink: Story = {
   args: {
-    to: "#",
+    href: "#",
   },
-  render: (args) => <MockParagraph {...args} />,
+  render: (args) => <MockParagraph href={args.href!} />,
 }
 
 export const ExternalLink: Story = {
   args: {
-    to: "https://example.com",
+    href: "https://example.com",
   },
-  render: (args) => <MockParagraph {...args} />,
+  render: (args) => <MockParagraph href={args.href!} />,
 }
 
-export const LinkList = {
+export const LinkList: Story = {
   render: () => (
     <Stack spacing="6">
       <Text>
@@ -57,7 +57,7 @@ export const LinkList = {
         {Array.from({ length: 9 }).map((_, idx) => (
           <ListItem key={idx + 1}>
             <Link
-              to={idx % 2 === 0 ? "https://example.com" : "#"}
+              href={idx % 2 === 0 ? "https://example.com" : "#"}
             >{`List Item ${idx % 2 === 0 ? "External" : "Internal"} ${
               idx + 1
             }`}</Link>

src/components/BaseStories/Switch.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { SimpleGrid, Switch as SwitchComponent } from "@chakra-ui/react"
-import { Meta } from "@storybook/react"
+import { Meta, type StoryObj } from "@storybook/react"
 
 const meta = {
   title: "Atoms / Form / Switch",
@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-export const Switch = {
+export const Switch: StoryObj = {
   render: () => (
     <SimpleGrid columns={{ base: 2, lg: 4 }} columnGap={1} alignItems="center">
       <span>isChecked:</span>

src/components/BaseStories/Text.stories.tsx

@@ -1,21 +1,12 @@
 import * as React from "react"
-import {
-  Box,
-  Center,
-  Flex,
-  Link as ChakraLink,
-  Stack,
-  Text,
-  VStack,
-} from "@chakra-ui/react"
+import { Box, Center, Flex, Stack, Text, VStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import components from "@/@chakra-ui/components"
 
+import LinkComponent from "../Link"
 import Translation from "../Translation"
 
-type TextType = typeof Text
-
 const meta = {
   title: "Atoms / Typography / Text",
   component: Text,
@@ -41,7 +32,7 @@ const meta = {
       </Center>
     ),
   ],
-} satisfies Meta<TextType>
+} satisfies Meta<typeof Text>
 
 export default meta
 
@@ -130,7 +121,7 @@ export const Italic: Story = {
   },
 }
 
-export const Link: StoryObj<typeof ChakraLink> = {
+export const Link: StoryObj<typeof LinkComponent> = {
   args: {
     children: SINGLE_TEXT_CHILD,
   },
@@ -147,7 +138,7 @@ export const Link: StoryObj<typeof ChakraLink> = {
               <Text size={key} flex="1" textAlign="end">
                 {key}
               </Text>
-              <ChakraLink size={key} href="#" flex="9" {...args} />
+              <LinkComponent size={key} href="#" flex="9" {...args} />
             </Flex>
           ))}
         </Stack>