From abb7534eefa6dbaee716b6c724549b9f31133ffd Mon Sep 17 00:00:00 2001 From: Julie Wongbandue Date: Fri, 28 Jul 2023 15:25:07 -0400 Subject: [PATCH] Update to use storybook-dark-mode --- .storybook/main.js | 2 +- .storybook/preview.js | 19 ++++++++++++------- package.json | 2 +- pnpm-lock.yaml | 41 +++++++++++++++++++++++++---------------- 4 files changed, 39 insertions(+), 25 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index e65ccd54..10184eac 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -18,7 +18,7 @@ module.exports = { '@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-storysource', - '@nox/addon-themes/dist/register', + 'storybook-dark-mode', ], webpackFinal: (config) => { config.module.rules.push(storySource); diff --git a/.storybook/preview.js b/.storybook/preview.js index d9bb7098..359a6dda 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,20 +1,21 @@ import { themes } from './themes'; -import { - ThemedStory, - addThemes, -} from '@nox/addon-themes/dist/utilities'; +import { themes as IrisTheme } from '../src/themes'; import { GlobalStyles } from '../src/utils'; import { useEffect, useState } from 'react'; +import { ThemeProvider } from 'styled-components'; +import { useDarkMode } from 'storybook-dark-mode'; -addThemes(themes); +// addThemes(themes); export const decorators = [ (Story) => ( - + {Story()} - + ), ]; @@ -531,4 +532,8 @@ export const parameters = { expanded: true, hideNoControlsWarning: true, }, + darkMode: { + dark: { ...themes.dark, stylePreview: true }, + light: { ...themes.light, stylePreview: true }, + }, }; diff --git a/package.json b/package.json index dbb1453a..471b7db6 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "@babel/preset-env": "^7.22.7", "@babel/preset-react": "^7.22.5", "@babel/preset-typescript": "^7.22.5", - "@nox/addon-themes": "^1.1.3", "@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-commonjs": "^21.1.0", "@rollup/plugin-node-resolve": "^13.3.0", @@ -86,6 +85,7 @@ "rollup-plugin-multi-input": "^1.4.1", "rollup-plugin-terser": "^7.0.2", "storybook": "7.0.26", + "storybook-dark-mode": "^3.0.1", "styled-components": "^5.3.11", "stylelint": "^13.13.1", "stylelint-config-recommended": "^4.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 296da28c..b6aa4f2d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,7 +15,6 @@ specifiers: '@babel/preset-react': ^7.22.5 '@babel/preset-typescript': ^7.22.5 '@babel/runtime': ^7.22.6 - '@nox/addon-themes': ^1.1.3 '@rollup/plugin-babel': ^5.3.1 '@rollup/plugin-commonjs': ^21.1.0 '@rollup/plugin-node-resolve': ^13.3.0 @@ -76,6 +75,7 @@ specifiers: rollup-plugin-multi-input: ^1.4.1 rollup-plugin-terser: ^7.0.2 storybook: 7.0.26 + storybook-dark-mode: ^3.0.1 styled-components: ^5.3.11 stylelint: ^13.13.1 stylelint-config-recommended: ^4.0.0 @@ -99,7 +99,6 @@ devDependencies: '@babel/preset-env': 7.22.7_@babel+core@7.22.8 '@babel/preset-react': 7.22.5_@babel+core@7.22.8 '@babel/preset-typescript': 7.22.5_@babel+core@7.22.8 - '@nox/addon-themes': 1.1.3_tyn6egaxe2k3m4jxlci5xshv7q '@rollup/plugin-babel': 5.3.1_dk2tutsrvslwzit5bccevt2cya '@rollup/plugin-commonjs': 21.1.0_rollup@2.79.1 '@rollup/plugin-node-resolve': 13.3.0_rollup@2.79.1 @@ -159,6 +158,7 @@ devDependencies: rollup-plugin-multi-input: 1.4.1 rollup-plugin-terser: 7.0.2_rollup@2.79.1 storybook: 7.0.26 + storybook-dark-mode: 3.0.1_w7o5yyljkiidx2s2nzb26ottzu styled-components: 5.3.11_2riktiqhx5vau4vzajqu7x2uni stylelint: 13.13.1 stylelint-config-recommended: 4.0.0_stylelint@13.13.1 @@ -3659,20 +3659,6 @@ packages: fastq: 1.11.0 dev: true - /@nox/addon-themes/1.1.3_tyn6egaxe2k3m4jxlci5xshv7q: - resolution: {integrity: sha512-/TA/mGPTJC4e7hCQ5Ruhx0mIXFgHapTDFYhfXnZiBcfQW5P4Y+hTIkMh20HoSjiuStenrFG/KpDFuLeYqIO7ww==} - peerDependencies: - '@storybook/react': '>=6.3.0' - react: '>=17.0.0' - react-dom: '>=17.0.0' - styled-components: '>=5.0.0' - dependencies: - '@storybook/react': 7.0.26_rvljcqwnizl2n3l3t7uzhh5pre - react: 17.0.1 - react-dom: 17.0.1_react@17.0.1 - styled-components: 5.3.11_2riktiqhx5vau4vzajqu7x2uni - dev: true - /@pmmmwh/react-refresh-webpack-plugin/0.5.10_uxpex5zvcxcn46tdc5nuxkcpra: resolution: {integrity: sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==} engines: {node: '>= 10.13'} @@ -12105,6 +12091,29 @@ packages: resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==} dev: true + /storybook-dark-mode/3.0.1_w7o5yyljkiidx2s2nzb26ottzu: + resolution: {integrity: sha512-3V6XBhkUq63BF6KzyDBbfV5/8sYtF4UtVccH1tK+Lrd4p0tF8k7yHOvVDhFL9hexnKXcLEnbC+42YDTPvjpK+A==} + 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 + dependencies: + '@storybook/addons': 7.0.26_w7o5yyljkiidx2s2nzb26ottzu + '@storybook/api': 7.0.26_w7o5yyljkiidx2s2nzb26ottzu + '@storybook/components': 7.0.26_w7o5yyljkiidx2s2nzb26ottzu + '@storybook/core-events': 7.0.26 + '@storybook/global': 5.0.0 + '@storybook/theming': 7.0.26_w7o5yyljkiidx2s2nzb26ottzu + fast-deep-equal: 3.1.3 + memoizerific: 1.11.3 + react: 17.0.1 + react-dom: 17.0.1_react@17.0.1 + dev: true + /storybook/7.0.26: resolution: {integrity: sha512-N6+/QBIahTnOJ3mQFNh+PIimjw+yUUoBlnMq8kE1Rg6QFi8ErEK8xte6uppiTh+7ShpqeLhp9ipuDV6DwJ9Aqg==} hasBin: true