From 67c0d84d9717b8e37a34178757f6aecd8f4098da Mon Sep 17 00:00:00 2001 From: Himself65 Date: Thu, 2 Mar 2023 14:45:40 -0600 Subject: [PATCH] feat(storybook): enable dark mode toggle (#1016) --- packages/component/.storybook/main.ts | 2 +- packages/component/.storybook/preview.tsx | 8 +- packages/component/package.json | 1 + pnpm-lock.yaml | 186 +++++++++++++++++++++- 4 files changed, 188 insertions(+), 9 deletions(-) diff --git a/packages/component/.storybook/main.ts b/packages/component/.storybook/main.ts index 21e4504332..594cd29b65 100644 --- a/packages/component/.storybook/main.ts +++ b/packages/component/.storybook/main.ts @@ -3,7 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; export default { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], staticDirs: ['../../../apps/web/public'], - addons: ['@storybook/addon-links'], + addons: ['@storybook/addon-links', 'storybook-dark-mode-v7'], framework: { name: '@storybook/react-vite', options: { diff --git a/packages/component/.storybook/preview.tsx b/packages/component/.storybook/preview.tsx index 77ffedb081..565436a133 100644 --- a/packages/component/.storybook/preview.tsx +++ b/packages/component/.storybook/preview.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { getLightTheme, ThemeProvider } from '../src'; - +import { getDarkTheme, getLightTheme, ThemeProvider } from '../src'; +import { useDarkMode } from 'storybook-dark-mode-v7'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, controls: { @@ -12,11 +12,13 @@ export const parameters = { }; const lightTheme = getLightTheme('page'); +const darkTheme = getDarkTheme('page'); export const decorators = [ (Story: React.ComponentType) => { + const isDark = useDarkMode(); return ( - + ); diff --git a/packages/component/package.json b/packages/component/package.json index 6aca1c98c3..8346b9ddea 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -37,6 +37,7 @@ "@types/react-dom": "18.0.11", "@vitejs/plugin-react": "^3.1.0", "storybook": "^7.0.0-beta.46", + "storybook-dark-mode-v7": "3.0.0-alpha.0", "swc": "^1.0.11", "swc-loader": "^0.2.3", "typescript": "^4.9.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b371827161..1f815890fc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -260,6 +260,7 @@ importers: react: ^18.2.0 react-dom: ^18.2.0 storybook: ^7.0.0-beta.46 + storybook-dark-mode-v7: 3.0.0-alpha.0 swc: ^1.0.11 swc-loader: ^0.2.3 typescript: ^4.9.5 @@ -295,6 +296,7 @@ importers: '@types/react-dom': 18.0.11 '@vitejs/plugin-react': 3.1.0_vite@4.1.4 storybook: 7.0.0-beta.46 + storybook-dark-mode-v7: 3.0.0-alpha.0_biqbaboplfbrettd7655fr4n2y swc: 1.0.11 swc-loader: 0.2.3_wumblt6f7l27pkvqm54p67bbsa typescript: 4.9.5 @@ -3284,10 +3286,6 @@ packages: peerDependenciesMeta: '@types/react': optional: true - react: - optional: true - react-dom: - optional: true dependencies: '@babel/runtime': 7.21.0 '@emotion/is-prop-valid': 1.2.0 @@ -4444,6 +4442,36 @@ packages: - supports-color dev: true + /@storybook/addons/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-QsKjyh0Yt1gc34dAWTHcqOhM9zt7jZCjmjBod7xiIApzswpb+nCNPFablkcVWH3G8vHcqNlp5yUUbERiFyv0uQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@storybook/manager-api': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/preview-api': 7.0.0-beta.60 + '@storybook/types': 7.0.0-beta.60 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + + /@storybook/api/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-27pyW1asJhdVm3fn1Hn9xsAWcYflsEUt8nCXcCul/zw77dGFtT/IYrwOXO1KzE/+CM8uF7U9bfKthZetmS5NAw==} + 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/client-logger': 7.0.0-beta.60 + '@storybook/manager-api': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + /@storybook/blocks/7.0.0-beta.46_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-ziNMCAtJbZ2RnWx95iA7TAYRKugjDbt7/qp0yNHrEpwS5ddQOb3O6Yb7BbNDrAhhJ/oapDtyelSZJYM7BL6gSQ==} peerDependencies: @@ -4552,6 +4580,17 @@ packages: telejson: 7.0.4 dev: true + /@storybook/channel-postmessage/7.0.0-beta.60: + resolution: {integrity: sha512-/a8LueG0XL6Yt6O6y9zryRb3UbiUkeY2TLXNCY9AHa3KrcZOusw42e00HxXCN13VSLQ2AcojkFZZgifOuUyspg==} + dependencies: + '@storybook/channels': 7.0.0-beta.60 + '@storybook/client-logger': 7.0.0-beta.60 + '@storybook/core-events': 7.0.0-beta.60 + '@storybook/global': 5.0.0 + qs: 6.11.0 + telejson: 7.0.4 + dev: true + /@storybook/channel-websocket/7.0.0-beta.46: resolution: {integrity: sha512-Y/d3aXpytu8yVws2sPrFyXPvtM+clAfo4WU5g3YvpPMO/K6bohfpVtucLrHIvq/lFDdoK3nWwi9AhqPe2E1YKg==} dependencies: @@ -4565,6 +4604,10 @@ packages: resolution: {integrity: sha512-fNsUiWe+K+jnHyeG1WrUrJDGHmO/QLOek0Ly+5j2LhV7PG4S/33IUVShux4yfZIMJwtrVtaawM306q1uJofFaw==} dev: true + /@storybook/channels/7.0.0-beta.60: + resolution: {integrity: sha512-87PC1xvGHV2/XxxaxYP6nfmBfvlgzC5rQCr1fFhYcEJURrgscNLQXjS3C0wYIHdd568Wqb/ZKD7ToM8bzY0VcA==} + dev: true + /@storybook/cli/7.0.0-beta.46: resolution: {integrity: sha512-4JTTnW0GlQzp6KCPMRxNjKwpFoaywXAUn2pXfXaI44WCLdT7IjHEEvK5Z5kwAW9cc+2mGT7tMqy0Xwd+acvMDQ==} hasBin: true @@ -4617,6 +4660,12 @@ packages: '@storybook/global': 5.0.0 dev: true + /@storybook/client-logger/7.0.0-beta.60: + resolution: {integrity: sha512-L9aT6KnbIwZ9MuH77YpkIOtf2vTDeDvVe+8jUm59ov5L0XKZ6RTKdyKonAvp+CBuyp2XQS8+E3A/lnezACIzLQ==} + dependencies: + '@storybook/global': 5.0.0 + dev: true + /@storybook/codemod/7.0.0-beta.46: resolution: {integrity: sha512-UZZIwogqqpsdkSNBWXZgpYjRIQN/cIJIkwL0Tt7fba6sx31HMCUdyiTBXQC6YvzoF/w2FWx/JRFBFqs9E7XpjA==} dependencies: @@ -4658,6 +4707,24 @@ packages: - supports-color dev: true + /@storybook/components/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-fr8GFB9S84DnPuNQXFPWDb6NI2IhzDeaW3lZr3w+Wx1U2xDRVOhQi/qV+/dgIrR/RLZnQuVRqYwxjS40y09rPw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@storybook/client-logger': 7.0.0-beta.60 + '@storybook/csf': 0.0.2-next.10 + '@storybook/global': 5.0.0 + '@storybook/theming': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/types': 7.0.0-beta.60 + memoizerific: 1.11.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + use-resize-observer: 9.1.0_biqbaboplfbrettd7655fr4n2y + util-deprecate: 1.0.2 + dev: true + /@storybook/core-client/7.0.0-beta.46: resolution: {integrity: sha512-XEYjS6z+HL5tpriLFSoWPnJbZ04PdN1YNb3mn0GhPUZuCBWqjssH1T5gt5w5L2ZEbsiWBLHBbs34tQLWCGsnTg==} dependencies: @@ -4702,6 +4769,10 @@ packages: resolution: {integrity: sha512-ogC+bHeMsmpZuEiKWCUdgncATgDsnPTDqumgV99fXDWrYpt2KUePsZSBSTaI97lTZqko3WN1GTBbqqZ0OrerHw==} dev: true + /@storybook/core-events/7.0.0-beta.60: + resolution: {integrity: sha512-DjQAUH88oe7kRac/6fdhgD2xoJUn+przJcfJd1DFKJ+Hgpysmnjg9RTDpqhANWE+MPjengZpJxx4jfWzZDmadw==} + dev: true + /@storybook/core-server/7.0.0-beta.46: resolution: {integrity: sha512-QKEfI1Aoi69fnP52UzZfG6DEtc+gWKqJjbTiIq/RA+4OXEQiRne/Z8I2NopSCrTKJTwidEJ2K0OcVimhFxHERQ==} dependencies: @@ -4832,6 +4903,31 @@ packages: - supports-color dev: true + /@storybook/manager-api/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-389MDjVFNi1eQZXzorKPFbhJUfGCtaeXoFCwUy0EkpAeh6EknsGsbdSAxvTdBzkonaRPoCwWqPwVPDksOlxk9A==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@storybook/channels': 7.0.0-beta.60 + '@storybook/client-logger': 7.0.0-beta.60 + '@storybook/core-events': 7.0.0-beta.60 + '@storybook/csf': 0.0.2-next.10 + '@storybook/global': 5.0.0 + '@storybook/router': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/theming': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/types': 7.0.0-beta.60 + dequal: 2.0.3 + lodash: 4.17.21 + memoizerific: 1.11.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + semver: 7.3.8 + store2: 2.14.2 + telejson: 7.0.4 + ts-dedent: 2.2.0 + dev: true + /@storybook/manager/7.0.0-beta.46: resolution: {integrity: sha512-0Tsm47YM3SU9rvPpXxp6/toQ1DDUrIbZt1pXcj72szLZvi7U/fXTMpsBX9gOB1MNVYIYRqS2V+jcO8UjFd4qyQ==} dev: true @@ -4876,6 +4972,27 @@ packages: - supports-color dev: true + /@storybook/preview-api/7.0.0-beta.60: + resolution: {integrity: sha512-F9Mc9VaPor7RHKfl8yWCCnpjuEv8NMdEpI+DXkmfHBdxB5yjdbjqO8e8UIK+B6vpZ9dIjlaa/3vYOp1KjzMzKw==} + dependencies: + '@storybook/channel-postmessage': 7.0.0-beta.60 + '@storybook/channels': 7.0.0-beta.60 + '@storybook/client-logger': 7.0.0-beta.60 + '@storybook/core-events': 7.0.0-beta.60 + '@storybook/csf': 0.0.2-next.10 + '@storybook/global': 5.0.0 + '@storybook/types': 7.0.0-beta.60 + '@types/qs': 6.9.7 + dequal: 2.0.3 + lodash: 4.17.21 + memoizerific: 1.11.3 + qs: 6.11.0 + slash: 3.0.0 + synchronous-promise: 2.0.17 + ts-dedent: 2.2.0 + util-deprecate: 1.0.2 + dev: true + /@storybook/preview/7.0.0-beta.46: resolution: {integrity: sha512-4k62e85sR6Cyl0O7ZeCct/pE0v+tjIjGhHDs9U0AZbfBJlSppazRAP51q6v1QdF2eWDgdRbn3oTQnW8rdCBeMg==} dev: true @@ -4957,6 +5074,19 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: true + /@storybook/router/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-auPVIz3Dnv69UGurkZ7Hgx0Y3aQ/ebIfOra9efYnrbgUC3Go8gDSnrjbe1kRnySUIDOwnRssqhUwTWDHwENqrA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@storybook/client-logger': 7.0.0-beta.60 + memoizerific: 1.11.3 + qs: 6.11.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + /@storybook/telemetry/7.0.0-beta.46: resolution: {integrity: sha512-sDdE0GZDOYzyoZ2Z4o4ei1WVyJp3Ac5u3ZPldZKYxen4mFhM+vVbDvpwkvp8aXrO59L9I8aleyEMjmTFqJWhjw==} dependencies: @@ -4988,6 +5118,20 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: true + /@storybook/theming/7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-BBaHioOI+eO+D0tUGKkqM+5jd/4yWANy+NIlaIg0dxkF1094amn19ziwH0Bx43NIdkdlpFwFDMdcNvOamTpHbw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0 + '@storybook/client-logger': 7.0.0-beta.60 + '@storybook/global': 5.0.0 + memoizerific: 1.11.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + /@storybook/types/7.0.0-beta.46: resolution: {integrity: sha512-I5nf8aDYmkM3FqlBAqr2SxnIp16iydvjSegShHEeraXDs9wSqbyAlYuw8m2WcN+bGA2qqhGUGEWbJv5bY3WaTQ==} dependencies: @@ -5001,6 +5145,15 @@ packages: - supports-color dev: true + /@storybook/types/7.0.0-beta.60: + resolution: {integrity: sha512-zzJq1i0/I4Ll8voNZcxCz5dlDl9zd2RhNhqlkBaRAQZIwRnsnT4McYQOlal0THwXfoHo96UkjqJvOR/GpEjkxg==} + dependencies: + '@storybook/channels': 7.0.0-beta.60 + '@types/babel__core': 7.20.0 + '@types/express': 4.17.17 + file-system-cache: 2.0.2 + dev: true + /@swc-jotai/debug-label/0.0.6: resolution: {integrity: sha512-rLJ/SbxeLyGzekICG09wVVq+SlOeou6pKNBJS7S30XtZ9M8cSRvI9ygsLDM5NnN9Sde3WbQG+a24rEfyuTPP/A==} dev: true @@ -5816,7 +5969,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12 magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.1.4_@types+node@18.14.2 + vite: 4.1.4 transitivePeerDependencies: - supports-color dev: true @@ -12755,6 +12908,29 @@ packages: resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==} dev: true + /storybook-dark-mode-v7/3.0.0-alpha.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-zAxHayO9ufgtr7g+SaV6nJI73ubEtWC3Z4P0SY80QqVonLVSdLWNIIRMUK88ImCVB7VSG4QyZDTW16BgJ+86Ew==} + 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.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/api': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/components': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + '@storybook/core-events': 7.0.0-beta.60 + '@storybook/global': 5.0.0 + '@storybook/theming': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y + fast-deep-equal: 3.1.3 + memoizerific: 1.11.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: true + /storybook/7.0.0-beta.46: resolution: {integrity: sha512-xMMCSrnfU2JLQVH7G8eJQVTwCwx3ABA/WeDxPCkNESR1PBVWA/OipUxE4wTD3z/1XLq0sfwknZcJZgz1mhqaAQ==} hasBin: true