feat(.storybook): create custom theme decorator

Author: TylerAPfledderer

.storybook/ThemeChanger.tsx

@@ -1,12 +1,11 @@
 import isChromatic from "chromatic/isChromatic"
 import { MotionGlobalConfig } from "framer-motion"
-import { withThemeByDataAttribute } from "@storybook/addon-themes"
 import type { Preview } from "@storybook/react"
 
 import ThemeProvider from "@/components/ThemeProvider"
 
 import i18n, { baseLocales } from "./i18next"
-import { ThemeChanger } from "./ThemeChanger"
+import { withNextThemes } from "./withNextThemes"
 
 import "@docsearch/css"
 import "../src/styles/global.css"
@@ -30,21 +29,18 @@ const preview: Preview = {
     locales: baseLocales,
   },
   decorators: [
-    withThemeByDataAttribute({
+    withNextThemes({
       themes: {
         light: "light",
         dark: "dark",
       },
       defaultTheme: "light",
     }),
-    (Story, context) => {
-      return (
-        <ThemeProvider>
-          <ThemeChanger theme={context.globals.theme} />
-          <Story />
-        </ThemeProvider>
-      )
-    },
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
   ],
   parameters: {
     i18n,

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react"
+import { useTheme } from "next-themes"
+import {
+  type DataAttributeStrategyConfiguration,
+  DecoratorHelpers,
+} from "@storybook/addon-themes"
+import type { Decorator } from "@storybook/react/*"
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers
+
+export const withNextThemes = ({
+  themes,
+  defaultTheme,
+}: DataAttributeStrategyConfiguration): Decorator => {
+  initializeThemeState(Object.keys(themes), defaultTheme)
+
+  return (getStory, context) => {
+    const selectedTheme = pluckThemeFromContext(context)
+    const selected = selectedTheme || defaultTheme
+    const { setTheme } = useTheme()
+
+    useEffect(() => {
+      setTheme(selected)
+    }, [selected, setTheme])
+
+    return getStory(context)
+  }
+}