From 5d4dacd26fc0f2787e46283fe11cdb2dab912b7d Mon Sep 17 00:00:00 2001 From: Jan Vollmer Date: Wed, 24 Jul 2024 20:59:44 +0200 Subject: [PATCH] use official storybook themes addon to apply themes --- .storybook/main.ts | 8 ++++++-- .storybook/preview.tsx | 18 +++++++++--------- package.json | 1 + pnpm-lock.yaml | 13 +++++++++++++ 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 8893915..62e451b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -6,7 +6,7 @@ const config: StorybookConfig = { addons: [ "@storybook/addon-interactions", "storybook-dark-mode", - "storybook-addon-mantine", + { name: "@storybook/addon-storysource", options: { @@ -30,7 +30,11 @@ const config: StorybookConfig = { }, }, }, - "@storybook/addon-essentials", + { + name: "@storybook/addon-essentials", + options: { docs: false, backgrounds: false }, + }, + "@storybook/addon-themes", ], framework: { name: "@storybook/react-vite", diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 77d8b35..7343bfc 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,17 +2,17 @@ import { DEFAULT_THEME, MantineProvider, MantineTheme, + MantineThemeProvider, useMantineColorScheme, } from "@mantine/core"; import "@mantine/core/styles.css"; import "@mantine/core/styles.layer.css"; import "@mantine/dates/styles.layer.css"; +import { withThemeFromJSXProvider } from "@storybook/addon-themes"; import { addons } from "@storybook/preview-api"; -import type { Preview } from "@storybook/react"; +import type { Preview, ReactRenderer } from "@storybook/react"; import { useEffect } from "react"; -import { withMantineThemes } from "storybook-addon-mantine"; import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"; - const allColorThemes: MantineTheme[] = Object.keys(DEFAULT_THEME.colors) .sort() .map((primaryColor) => ({ ...DEFAULT_THEME, primaryColor })); @@ -48,12 +48,12 @@ const preview: Preview = { ); }, - withMantineThemes({ - themes: allColorThemes.map((theme) => ({ - id: theme.primaryColor, - name: `Color: ${theme.primaryColor}`, - ...theme, - })), + withThemeFromJSXProvider({ + defaultTheme: "blue", + Provider: MantineThemeProvider, + themes: Object.fromEntries( + allColorThemes.map((theme) => [theme.primaryColor, theme]), + ), }), ], }; diff --git a/package.json b/package.json index 5ac6ae3..33d62ed 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "@storybook/addon-essentials": "^8.2.6", "@storybook/addon-interactions": "^8.2.6", "@storybook/addon-storysource": "^8.2.6", + "@storybook/addon-themes": "^8.2.6", "@storybook/blocks": "^8.2.6", "@storybook/preview-api": "^8.2.6", "@storybook/react": "^8.2.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf15bd3..ced11ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,9 @@ importers: '@storybook/addon-storysource': specifier: ^8.2.6 version: 8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9))) + '@storybook/addon-themes': + specifier: ^8.2.6 + version: 8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9))) '@storybook/blocks': specifier: ^8.2.6 version: 8.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9))) @@ -1382,6 +1385,11 @@ packages: peerDependencies: storybook: ^8.2.6 + '@storybook/addon-themes@8.2.6': + resolution: {integrity: sha512-N1qFD9aam1zpiMltjBOMFKr2/LkaZbvNPEpkFmpTkC21Qon5WxZsj84+ajSh4dMru01wZfGxDe/XqlIfwsoglw==} + peerDependencies: + storybook: ^8.2.6 + '@storybook/addon-toolbars@8.2.6': resolution: {integrity: sha512-0JmRirMpxHS6VZzBk0kY871xWTpkk3TN4S1sxoFf5fcnCfVTHDjEJ5Ws/QWru1RJlIZHuJKRdQIA6Vuq5X+KfQ==} peerDependencies: @@ -5619,6 +5627,11 @@ snapshots: storybook: 8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)) tiny-invariant: 1.3.3 + '@storybook/addon-themes@8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)))': + dependencies: + storybook: 8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)) + ts-dedent: 2.2.0 + '@storybook/addon-toolbars@8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)))': dependencies: storybook: 8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9))