From 42ca080cfac6e68fc2a6a4966401821fc60df819 Mon Sep 17 00:00:00 2001 From: behnam Date: Fri, 22 Nov 2024 18:53:08 +0300 Subject: [PATCH] Add darkmode and light mode to storybook --- .storybook/main.ts | 1 + .storybook/preview.tsx | 35 +++++++++++++++++++++++++++++++---- package.json | 1 + yarn.lock | 27 +++++++++++++++++++++++---- 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 3be7d13..6efa0cd 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -7,6 +7,7 @@ const config: StorybookConfig = { "@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions", + "storybook-dark-mode" ], framework: { name: "@storybook/nextjs", diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1daa757..f443173 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,13 @@ import type { Preview } from "@storybook/react"; import React from "react"; +import { themes } from '@storybook/theming'; +import { ThemeProvider } from "../src/app/[lang]/dashboard/components/client/theme-provider/theme-provider"; +import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; +import { addons } from '@storybook/preview-api'; import "../src/app/globals.css" + + +const channel = addons.getChannel(); /** * * This function will expand the object with nested properties @@ -35,9 +42,11 @@ export const recursiveNestedProps = ( ); }; -const preview: Preview = { +const preview = { decorators: [ (Story, data) => { + const [isDark, setDark] = React.useState(false); + const parsedProps = {} as Record; const props = data.allArgs; Object.entries(props).forEach((prop) => { @@ -52,13 +61,31 @@ const preview: Preview = { }); + React.useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [channel, setDark]); + + return ( -
- -
+ + + ); }, ], + darkMode: { + // Override the default dark theme + dark: { ...themes.dark, appBg: 'black' }, + // Override the default light theme + classTarget: 'html', + light: { ...themes.normal, appBg: 'red' }, + }, parameters: { controls: { matchers: { diff --git a/package.json b/package.json index 20b92e2..59fef4e 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "postcss": "^8", "prettier": "^3.3.3", "storybook": "^8.4.5", + "storybook-dark-mode": "^4.0.2", "tailwindcss": "^3.4.1", "typescript": "^5", "vitest": "^2.1.4" diff --git a/yarn.lock b/yarn.lock index dde0e6b..413bcc0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1809,11 +1809,16 @@ webpack-hot-middleware "^2.25.1" webpack-virtual-modules "^0.6.0" -"@storybook/components@8.4.5": +"@storybook/components@8.4.5", "@storybook/components@^8.0.0": version "8.4.5" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.4.5.tgz#039e4cb5090c56c47fc10f0c5ecda77f4b015c7f" integrity sha512-2PdnKfqNNv3sO7qILgWXiNvmLOi503oN9OMemNCQjTIvdvySc5JpS9/eClwcl/JfmE4qHdSHZr8dLLkBM9S7+Q== +"@storybook/core-events@^8.0.0": + version "8.4.5" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-8.4.5.tgz#b2847bdbeb964019a9d134a311511b7d227e1682" + integrity sha512-+DeYpAuav9E/Q5x5BVrMpf+XBFbVQJuJbVXNiglZcJNH13D/G2WDToOYAbGviZ6CBvbUdjlqC7y9+/emwP78bA== + "@storybook/core-webpack@8.4.5": version "8.4.5" resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-8.4.5.tgz#b17422cff80c638e3478406193acedb9be2d50cb" @@ -1858,7 +1863,7 @@ resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed" integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ== -"@storybook/icons@^1.2.12": +"@storybook/icons@^1.2.12", "@storybook/icons@^1.2.5": version "1.2.12" resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.12.tgz#3e4c939113b67df7ab17b78f805dbb57f4acf0db" integrity sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q== @@ -1871,7 +1876,7 @@ "@storybook/global" "^5.0.0" "@vitest/utils" "^2.1.1" -"@storybook/manager-api@8.4.5": +"@storybook/manager-api@8.4.5", "@storybook/manager-api@^8.0.0": version "8.4.5" resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.4.5.tgz#ce586cc5961297272f7228446161015464c65067" integrity sha512-t39JaMy3UX4StbUH/tIDcaflBDxTcyIq853wQtBMhVL3e1+Dw3MIiiG/5bw79HU4R7kSmPVLXIIbV3FmXkq7KQ== @@ -1989,7 +1994,7 @@ "@vitest/expect" "2.0.5" "@vitest/spy" "2.0.5" -"@storybook/theming@8.4.5": +"@storybook/theming@8.4.5", "@storybook/theming@^8.0.0": version "8.4.5" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.5.tgz#d7c77215f09906c9bb124d530d4307fd1841fbb8" integrity sha512-45e/jeG4iuqdZcHg3PbB6dwXQTwlnnEB7r/QcVExyC7ibrkTnjUfvxzyUw4mmU3CXETFGD5EcUobFkgK+/aPxQ== @@ -7006,6 +7011,20 @@ std-env@^3.7.0: resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2" integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg== +storybook-dark-mode@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-4.0.2.tgz#2536d1a229ac050172d37aa50bd9f6f7cdad0425" + integrity sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w== + dependencies: + "@storybook/components" "^8.0.0" + "@storybook/core-events" "^8.0.0" + "@storybook/global" "^5.0.0" + "@storybook/icons" "^1.2.5" + "@storybook/manager-api" "^8.0.0" + "@storybook/theming" "^8.0.0" + fast-deep-equal "^3.1.3" + memoizerific "^1.11.3" + storybook@^8.4.5: version "8.4.5" resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.4.5.tgz#ba9589e2887958d1353dbc1a2cb6142e80e36a2c"