behnam/Nextjs-boilerplate
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/storybook #2

Merged
behnam merged 7 commits from feature/storybook into develop 2024-11-26 15:42:17 +00:00
Conversation 0 Commits 7 Files Changed 22 +56 -8
4 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 42ca080cfa - Show all commits

1
.storybook/main.ts
View File

@ -7,6 +7,7 @@ const config: StorybookConfig = {
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
"storybook-dark-mode"
],
framework: {
name: "@storybook/nextjs",

33
.storybook/preview.tsx
View File

@ -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<string, unknown>;
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 (
<div>
<ThemeProvider
attribute="class"
forcedTheme={isDark ? "dark" : "light"}
enableSystem
disableTransitionOnChange
>
<Story parsedProps={parsedProps} />
</div>
</ThemeProvider>
);
},
],
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: {

1
package.json
View File

@ -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"

27
yarn.lock
View File

@ -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"