diff --git a/.storybook/main.js b/.storybook/main.js index b59e60a405d..084c0c8ebee 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -9,6 +9,7 @@ const config = { "@storybook/addon-essentials", "@storybook/addon-a11y", "@tomfreudenberg/next-auth-mock/storybook", + "storybook-dark-mode", { name: '@storybook/addon-docs', options: { diff --git a/.storybook/manager.js b/.storybook/manager.js deleted file mode 100644 index 4bcab58dffb..00000000000 --- a/.storybook/manager.js +++ /dev/null @@ -1,6 +0,0 @@ -import { addons } from '@storybook/manager-api'; -import { themes } from '@storybook/theming'; - -addons.setConfig({ - theme: themes.light, -}); diff --git a/.storybook/preview.js b/.storybook/preview.js index 33fe457ae74..4f70fd38bcd 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,19 @@ import "../styles/globals.css"; +import { ThemeProvider } from "next-themes"; +import { useDarkMode } from "storybook-dark-mode"; +import { themes } from "@storybook/theming"; + +function ThemeWrapper({children}) { + // render your custom theme provider + return ( + + {children} + + ); +} + +export const decorators = [(renderStory => {renderStory()})]; + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { @@ -19,5 +34,9 @@ export const parameters = { values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] } } + }, + darkMode: { + dark: themes.dark, + light: themes.normal } }; diff --git a/package-lock.json b/package-lock.json index f4c5aa47046..b9fec8f6b25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "linkfree", - "version": "1.108.9", + "version": "1.109.2", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -66,7 +66,8 @@ "ncp": "^2.0.0", "postcss": "^8.4.21", "prettier": "^2.8.7", - "storybook": "^7.0.2" + "storybook": "^7.0.2", + "storybook-dark-mode": "^3.0.0" }, "engines": { "node": "18.x" @@ -19288,6 +19289,34 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/storybook-dark-mode": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-3.0.0.tgz", + "integrity": "sha512-aeAvqP/mmdccEiCsvx6aw3M0i7mZSiXROsrAsEQN8vl1lAg3FZN+y3Xu/f+ye59wLMRuKJC/JBp7E3/H7vLBRQ==", + "dev": true, + "dependencies": { + "@storybook/addons": "^7.0.0", + "@storybook/api": "^7.0.0", + "@storybook/components": "^7.0.0", + "@storybook/core-events": "^7.0.0", + "@storybook/global": "^5.0.0", + "@storybook/theming": "^7.0.0", + "fast-deep-equal": "^3.1.3", + "memoizerific": "^1.11.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/stream-shift": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", @@ -21434,4 +21463,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 2cd40b8e5fe..89fb5b2df2d 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,8 @@ "ncp": "^2.0.0", "postcss": "^8.4.21", "prettier": "^2.8.7", - "storybook": "^7.0.2" + "storybook": "^7.0.2", + "storybook-dark-mode": "^3.0.0" }, "description": "LinkFree connect audiences to all of your content with just one link. It is an open-source alternative to [Linktree](https://linktr.ee/) implemented in JavaScript - It was initially created on a YouTube [live stream](https://www.youtube.com/watch?v=Jorl_vcp-Ew).", "repository": { @@ -111,4 +112,4 @@ "bugs": { "url": "https://github.com/EddieHubCommunity/LinkFree/issues" } -} \ No newline at end of file +}