diff --git a/.storybook/main.ts b/.storybook/main.ts index 39ecf9bce1bf0..3cbe5f5756648 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -6,6 +6,7 @@ const config: StorybookConfig = { addons: [ '@storybook/addon-controls', '@storybook/addon-interactions', + '@storybook/addon-themes', '@storybook/addon-viewport', ], framework: { name: '@storybook/nextjs', options: {} }, diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 45c08ccae5166..7a0364a310aca 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -3,7 +3,8 @@ import { Open_Sans } from 'next/font/google'; import { SiteProvider } from '../providers/siteProvider'; import { ThemeProvider } from '../providers/themeProvider'; import { LocaleProvider } from '../providers/localeProvider'; -import type { Preview } from '@storybook/react'; +import { withThemeByDataAttribute } from '@storybook/addon-themes'; +import type { Preview, ReactRenderer } from '@storybook/react'; import '../styles/new/index.scss'; @@ -49,6 +50,14 @@ export const decorators = [ ), + withThemeByDataAttribute({ + themes: { + light: '', + dark: 'dark', + }, + defaultTheme: 'light', + attributeName: 'data-theme', + }), ]; Object.defineProperty(NextImage, 'default', { diff --git a/package-lock.json b/package-lock.json index 297f72cca81f5..e650651099d4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "devDependencies": { "@storybook/addon-controls": "~7.4.0", "@storybook/addon-interactions": "~7.4.0", + "@storybook/addon-themes": "^7.4.1", "@storybook/addon-viewport": "~7.4.0", "@storybook/nextjs": "~7.4.0", "@testing-library/jest-dom": "~6.1.3", @@ -5310,6 +5311,220 @@ } } }, + "node_modules/@storybook/addon-themes": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-7.4.1.tgz", + "integrity": "sha512-bPqdi3JGesu0EsD6cFbvvOoFLUFPUEOGSzJBI23Mk+D5AAczTokzGej7CwtobAPBHPJ2vNiVQsts4i1LriF+xw==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.4.1", + "@storybook/components": "7.4.1", + "@storybook/core-events": "7.4.1", + "@storybook/manager-api": "7.4.1", + "@storybook/preview-api": "7.4.1", + "@storybook/theming": "7.4.1", + "@storybook/types": "7.4.1", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "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/@storybook/addon-themes/node_modules/@storybook/channels": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.4.1.tgz", + "integrity": "sha512-gnE1mNrRF+9oCVRMq6MS/tLXJbYmf9P02PCC3KpMLcSsABdH5jcrACejzJVo/kE223knFH7NJc4BBj7+5h0uXA==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.4.1", + "@storybook/core-events": "7.4.1", + "@storybook/global": "^5.0.0", + "qs": "^6.10.0", + "telejson": "^7.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/client-logger": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.4.1.tgz", + "integrity": "sha512-2j0DQlKlPNY8XAaEZv+mUYEUm4dOWg6/Q92UNbvYPRK5qbXUvbMiQco5nmvg4LvMT6y99LhRSW2xrwEx5xKAKw==", + "dev": true, + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/components": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.4.1.tgz", + "integrity": "sha512-hCuKmMB0+d3/apHjC8G0vMks1cE1aeoKu09gQ40YT+cBxKWj2+lNVKxDd6wJpaR6bU/wrAL1S6eaIQ/T9QpqRA==", + "dev": true, + "dependencies": { + "@radix-ui/react-select": "^1.2.2", + "@radix-ui/react-toolbar": "^1.0.4", + "@storybook/client-logger": "7.4.1", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/theming": "7.4.1", + "@storybook/types": "7.4.1", + "memoizerific": "^1.11.3", + "use-resize-observer": "^9.1.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/core-events": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.4.1.tgz", + "integrity": "sha512-F1tGb32XZ4FRfbtXdi4b+zdzWUjFz5rn3TF18mSuBGGXvxKU+4tywgjGQ3dKGdvuP754czn3poSdz2ZW08bLsQ==", + "dev": true, + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/manager-api": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.4.1.tgz", + "integrity": "sha512-nzYasETW20uDWpfST6JFf6c/GSFB/dj7xVtg5EpvAYF8GkErCk9TvNKdLNroRrIYm5VJxHWC2V+CJ07RuX3Glw==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.4.1", + "@storybook/client-logger": "7.4.1", + "@storybook/core-events": "7.4.1", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/router": "7.4.1", + "@storybook/theming": "7.4.1", + "@storybook/types": "7.4.1", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "semver": "^7.3.7", + "store2": "^2.14.2", + "telejson": "^7.2.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/preview-api": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.4.1.tgz", + "integrity": "sha512-swmosWK73lP0CXDKMOwYIaaId28+muPDYX2V/0JmIOA+45HFXimeXZs3XsgVgQMutVF51QqnDA0pfrNgRofHgQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.4.1", + "@storybook/client-logger": "7.4.1", + "@storybook/core-events": "7.4.1", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/types": "7.4.1", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/router": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.4.1.tgz", + "integrity": "sha512-7tE1B18jb+5+ujXd3BHcub85QnytIVBNA0iAo+o8MNwArISyodqp12y2D3w+QpXkg0GtPhAp/CMhzpyxotPhRQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.4.1", + "memoizerific": "^1.11.3", + "qs": "^6.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/theming": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.4.1.tgz", + "integrity": "sha512-a4QajZbnYumq8ovtn7nW7BeNrk/TaWyKmUrIz4w08I6ghzESJA4aCWZ6394awbrruiIOzCCKOUq4mfWEsc8W6A==", + "dev": true, + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@storybook/client-logger": "7.4.1", + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-themes/node_modules/@storybook/types": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.4.1.tgz", + "integrity": "sha512-bjt1YDG9AocFBhIFRvGGbYZPlD223p+qAFcFgYdezU16fFE4ZGFUzUuq2ERkOofL7a2+OzLTCQ/SKe1jFkXCxQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.4.1", + "@types/babel__core": "^7.0.0", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-viewport": { "version": "7.4.0", "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.4.0.tgz", diff --git a/package.json b/package.json index 81d0e0ce5c2e9..3b19de88f3b03 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "devDependencies": { "@storybook/addon-controls": "~7.4.0", "@storybook/addon-interactions": "~7.4.0", + "@storybook/addon-themes": "^7.4.1", "@storybook/addon-viewport": "~7.4.0", "@storybook/nextjs": "~7.4.0", "@testing-library/jest-dom": "~6.1.3", diff --git a/tailwind.config.ts b/tailwind.config.ts index 40a5366fb91d2..207fd343e9f2d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -111,6 +111,6 @@ export default { fontFamily: { 'open-sans': ['var(--font-open-sans)'], }, - darkMode: ['class', '[data-theme="dark"]'], }, + darkMode: ['class', '[data-theme="dark"]'], } satisfies Config;