change theme of storybook (#236)

* WIP change theme of storybook

* now changes all but colors must be change

* return to first colors

.storybook/DocsContainer.tsx

@@ -0,0 +1,30 @@
+// organize-imports-ignore
+import React from "react"
+import {
+  DocsContainer as BaseContainer,
+  DocsContainerProps,
+} from "@storybook/blocks"
+import { addons } from "@storybook/preview-api"
+import { FC, PropsWithChildren, useEffect, useState } from "react"
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"
+import lightTheme, { darkTheme } from "./FactorialOne"
+
+const channel = addons.getChannel()
+
+export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
+  children,
+  context,
+}) => {
+  const [isDark, setDark] = useState(false)
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark)
+    return () => channel.off(DARK_MODE_EVENT_NAME, setDark)
+  }, [channel])
+
+  return (
+    <BaseContainer theme={isDark ? darkTheme : lightTheme} context={context}>
+      {children}
+    </BaseContainer>
+  )
+}

.storybook/FactorialOne.ts

@@ -34,3 +34,43 @@ export default create({
   inputTextColor: "#101010",
   inputBorderRadius: 2,
 })
+
+export const darkTheme = create({
+  base: "dark",
+  brandTitle: `<img src="one_dark.svg" width="36px" />`,
+  brandTarget: "_self",
+
+  //
+  colorPrimary: "#BB86FC",
+  colorSecondary: "#03DAC6",
+
+  // UI
+  appBg: "#121212",
+  appContentBg: "#1E1E1E",
+  appPreviewBg: "#1E1E1E",
+  appBorderColor: "#292929",
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: "#E0E0E0",
+  textInverseColor: "#121212",
+  textMutedColor: "#A0A0A0",
+
+  // Toolbar default and active colors
+  barTextColor: "#BBBBBB",
+  barSelectedColor: "#03DAC6",
+  barHoverColor: "#03DAC6",
+  barBg: "#121212",
+
+  // Form colors
+  inputBg: "#292929",
+  inputBorder: "#444444",
+  inputTextColor: "#E0E0E0",
+  inputBorderRadius: 2,
+
+  // Buttons
+  buttonBg: "#444444", // Gris medio para fondo de botones
+  buttonBorder: "#03DAC6", // Aqua para borde de botones
+  booleanBg: "#292929", // Gris oscuro para fondo de botones booleanos
+  booleanSelectedBg: "#03DAC6", // Aqua para fondo de botones booleanos seleccionados
+})

.storybook/main.ts

@@ -25,6 +25,7 @@ const config: StorybookConfig = {
     "@storybook/addon-a11y",
     "@storybook/addon-themes",
     "@whitespace/storybook-addon-html",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.tsx

@@ -1,6 +1,5 @@
 // organize-imports-ignore
 import React from "react"
-import { DecoratorHelpers } from "@storybook/addon-themes"
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport"
 import type { Preview } from "@storybook/react"
 
@@ -9,27 +8,16 @@ import DocumentationTemplate from "./DocumentationTemplate.mdx"
 import "../styles.css"
 import "../fonts"
 
-import {
-  availableThemes,
-  Theme,
-  ThemeProvider,
-} from "../lib/lib/theme-provider"
+import { ThemeProvider } from "../lib/lib/theme-provider"
 import { FactorialOneProvider } from "../lib/lib/one-provider"
+import lightTheme, { darkTheme } from "./FactorialOne"
+import { DocsContainer } from "./DocsContainer"
+import { useDarkMode } from "storybook-dark-mode"
 
-const { initializeThemeState, pluckThemeFromContext, useThemeParameters } =
-  DecoratorHelpers
-
-export const withTheme = (themes: Theme[], defaultTheme: Theme) => {
-  initializeThemeState(themes, defaultTheme)
-
-  return (Story, context) => {
-    const selectedTheme = pluckThemeFromContext(context) as Theme
-    const { themeOverride } = useThemeParameters() as { themeOverride: Theme }
-
-    const selected = themeOverride || selectedTheme || defaultTheme
-
+export const withTheme = () => {
+  return (Story) => {
     return (
-      <ThemeProvider defaultTheme={selected}>
+      <ThemeProvider theme={useDarkMode() ? "dark" : "light"}>
         <Story />
       </ThemeProvider>
     )
@@ -49,7 +37,7 @@ export const FactorialOne = (Story, { parameters }) => {
 }
 
 const preview: Preview = {
-  decorators: [FactorialOne, withTheme(availableThemes, "light")],
+  decorators: [FactorialOne, withTheme()],
 
   parameters: {
     html: {
@@ -72,6 +60,7 @@ const preview: Preview = {
       },
     },
     docs: {
+      container: DocsContainer,
       page: DocumentationTemplate,
       toc: true,
     },
@@ -82,6 +71,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
+    darkMode: {
+      dark: darkTheme,
+      light: lightTheme,
+      stylePreview: true,
+    },
   },
 
   tags: ["autodocs"],

lib/lib/theme-provider.tsx

@@ -1,63 +1,32 @@
-import { createContext, useContext, useEffect, useState } from "react"
+import { createContext, useContext } from "react"
 
 const themes = ["light", "dark", "system"] as const
 export type Theme = (typeof themes)[number]
 export const availableThemes: Theme[] = [...themes] // Convert readonly array to mutable array
 
 type ThemeProviderProps = {
   children: React.ReactNode
-  defaultTheme?: Theme
+  theme?: Theme
   storageKey?: string
 }
 
 type ThemeProviderState = {
   theme: Theme
-  setTheme: (theme: Theme) => void
 }
 
 const initialState: ThemeProviderState = {
   theme: "system",
-  setTheme: () => null,
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 
 export function ThemeProvider({
   children,
-  defaultTheme = "system",
+  theme = "system",
   ...props
 }: ThemeProviderProps) {
-  const [overridenTheme, setTheme] = useState<Theme | null>(null)
-
-  const theme = overridenTheme || defaultTheme
-
-  useEffect(() => {
-    const root = window.document.documentElement
-    const resetThemes = () => root.classList.remove(...availableThemes)
-
-    if (theme === "system") {
-      const darkModePreference = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      )
-
-      const setTheme = (darkModePreference: { matches: boolean }) => {
-        const theme: Theme = darkModePreference.matches ? "dark" : "light"
-        root.classList.remove(...availableThemes)
-        root.classList.add(theme)
-      }
-
-      darkModePreference.addEventListener("change", (e) => setTheme(e))
-
-      setTheme(darkModePreference)
-    } else {
-      root.classList.add(theme)
-    }
-    return () => resetThemes()
-  }, [theme])
-
   const value = {
     theme,
-    setTheme,
   }
 
   return (

package.json

@@ -111,6 +111,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-syntax-highlighter": "^15.5.0",
     "storybook": "^8.2.6",
+    "storybook-dark-mode": "^4.0.2",
     "typescript": "^5.5.3",
     "vite": "^5.3.5",
     "vite-plugin-dts": "^3.9.1",