refactor: replace @chakra-ui/addon with local setup

Author: TylerAPfledderer

.storybook/ChakraDecorator.tsx

@@ -0,0 +1,63 @@
+import {
+  ChakraBaseProvider,
+  extendBaseTheme,
+  useColorMode,
+} from "@chakra-ui/react"
+import type { Decorator } from "@storybook/react"
+
+import theme from "../src/@chakra-ui/theme"
+import { useEffect, useMemo, useState } from "react"
+import i18n from "./i18next"
+
+type DecoratorProps = Parameters<Decorator>
+
+const ColorModeSync = ({ context }: { context: DecoratorProps[1] }) => {
+  const { setColorMode } = useColorMode()
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark"
+
+    context.globals.colorMode = isDarkMode ? "dark" : "light"
+  }, [])
+
+  useEffect(() => {
+    setColorMode(context.globals.colorMode)
+  }, [setColorMode, context])
+
+  return null
+}
+
+/**
+ * This is a custom local setup of the official Chakra UI Storybook addon.
+ *
+ * A local version was created in response to provide a better sync between
+ * updated local direction to the Chakra theme.
+ *
+ * (This would most likely not be updated in the addon due to ongoing creation of Chakra v3 at the time this
+ * setup was created.)
+ *
+ * Will be deprecated and removed when Chakra v3 is available for migration.
+ *
+ */
+export const ChakraDecorator: Decorator = (getStory, context) => {
+  const [dir, updateDir] = useState<"ltr" | "rtl">()
+
+  i18n.on("languageChanged", (locale) => {
+    const direction = i18n.dir(locale)
+    document.documentElement.dir = direction
+    updateDir(direction)
+  })
+
+  const themeWithDirectionOverride = useMemo(() => {
+    return extendBaseTheme({ direction: dir }, theme)
+  }, [dir])
+
+  return (
+    <ChakraBaseProvider theme={themeWithDirectionOverride}>
+      <>
+        <ColorModeSync context={context} />
+        {getStory(context)}
+      </>
+    </ChakraBaseProvider>
+  )
+}

.storybook/i18next.ts

@@ -6,6 +6,7 @@ export const baseLocales = {
   zh: { title: "中国人", left: "Zh" },
   ru: { title: "Русский", left: "Ru" },
   uk: { title: "українська", left: "Uk" },
+  fa: { title: "فارسی", left: "Fa" },
 }
 
 // Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.

.storybook/main.ts

@@ -21,7 +21,6 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@chakra-ui/storybook-addon",
     "storybook-react-i18next",
   ],
   staticDirs: ["../public"],

.storybook/preview.ts

@@ -1,15 +1,13 @@
-import { extendBaseTheme } from "@chakra-ui/react"
 import type { Preview } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
 
+import { ChakraDecorator } from "./ChakraDecorator"
 import i18n, { baseLocales } from "./i18next"
 
 import "../src/styles/global.css"
 
-const extendedTheme = extendBaseTheme(theme)
-
-const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints) as [
+const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
   string
 ][]
@@ -19,6 +17,20 @@ const preview: Preview = {
     locale: "en",
     locales: baseLocales,
   },
+  globalTypes: {
+    colorMode: {
+      name: "Color Mode",
+      description: "Change the color mode",
+      toolbar: {
+        icon: "circlehollow",
+        items: [
+          { value: "light", icon: "circlehollow", title: "Light Mode" },
+          { value: "dark", icon: "circle", title: "Dark Mode" },
+        ],
+      },
+    },
+  },
+  decorators: [ChakraDecorator],
   parameters: {
     i18n,
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -36,9 +48,6 @@ const preview: Preview = {
         order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
       },
     },
-    chakra: {
-      theme: extendedTheme,
-    },
     layout: "centered",
     // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
     viewport: {

.storybook/types.ts

@@ -0,0 +1,81 @@
+import type { ArgTypes } from "@storybook/react"
+import type { ThemingProps } from "@chakra-ui/react"
+
+// Type declarations below pulled directly from `@chakra-ui/storybook-addon`
+// with some alteration
+// (Subject to deprecation and removal upon release of Chakra v3)
+
+/**
+ * `keyof` alternative which omits non-string keys
+ */
+type KeyOf<T> = [T] extends [never]
+  ? never
+  : T extends object
+  ? Extract<keyof T, string>
+  : never
+
+export type ThemingArgTypeKey = "variant" | "size"
+
+/**
+ * Create Storybook controls based on a Chakra UI theme component.
+ *
+ * @example
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: getThemingArgTypes(theme, "Button"),
+ * }
+ *
+ * @example full example
+ * import { Meta, StoryFn } from "@storybook/react"
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
+ * import { theme } from "<your-theme>"
+ *
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: {
+ *     ...getThemingArgTypes(theme, "Button"),
+ *     children: "string"
+ *   },
+ *   args: { children: "Button" },
+ * } as Meta
+ *
+ * interface StoryProps extends ThemingProps<"Button"> {
+ *   children?: React.ReactNode
+ * }
+ *
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
+ *
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
+ * @param componentName component name to create the ArgTypes for
+ */
+export function getThemingArgTypes<
+  Theme extends Record<string, any>,
+  ComponentName extends KeyOf<Theme["components"]>
+>(theme: Theme, componentName: ComponentName) {
+  const component = theme.components[componentName]
+  if (!component) {
+    return undefined
+  }
+
+  const argTypes: ArgTypes<
+    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>
+  > = {}
+
+  const variantOptions = Object.keys(component.variants || {})
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: component.defaultProps?.variant,
+    }
+  }
+
+  const sizeOptions = Object.keys(component.sizes || {})
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: component.defaultProps?.size,
+    }
+  }
+
+  return argTypes
+}

package.json

@@ -61,7 +61,6 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@chakra-ui/storybook-addon": "5.1.0",
     "@netlify/plugin-nextjs": "^4.41.3",
     "@storybook/addon-essentials": "7.6.6",
     "@storybook/addon-interactions": "7.6.6",

src/components/Buttons/Button.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from "react"
 import { MdChevronRight, MdExpandMore, MdNightlight } from "react-icons/md"
 import { HStack, Text, ThemingProps, VStack } from "@chakra-ui/react"
-import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { getThemingArgTypes } from "../../../.storybook/types"
 import theme from "../../@chakra-ui/theme"
 import Translation from "../Translation"
 
@@ -41,7 +41,6 @@ const variants: ThemingProps<"Button">["variant"][] = [
 export const StyleVariants: Story = {
   argTypes: {
     size: {
-      // @ts-expect-error looking for a more specific type, but this is still valid
       ...getThemingArgTypes(theme, "Button")?.size,
       defaultValue: "md",
     },

yarn.lock

@@ -1945,11 +1945,6 @@
     "@chakra-ui/react-context" "2.1.0"
     "@chakra-ui/shared-utils" "2.0.5"
 
-"@chakra-ui/[email protected]":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/storybook-addon/-/storybook-addon-5.1.0.tgz#b95ec65ad4b79383939f0951918287f4dc66a232"
-  integrity sha512-l9DIdTAw+FLbDrMVpoLCn9EdOygJDRV2SYobuoR0dDmuXlHq/u/RvE51Yq8XgUTn9Fkqv0g8ellMZEGytZEVYw==
-
 "@chakra-ui/[email protected]":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.9.2.tgz#898ab63da560a4a014f7b05fa7767e8c76da6d2f"