test

livechat · Jan 22, 2024 · 41d105b · 41d105b
1 parent bec4b92
commit 41d105b
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-components/.storybook/main.js b/packages/react-components/.storybook/main.js
@@ -15,6 +15,7 @@ module.exports = {
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-designs'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('@storybook/addon-themes'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

diff --git a/packages/react-components/.storybook/modes.js b/packages/react-components/.storybook/modes.js
@@ -1,10 +1,10 @@
 export const allModes = {
   dark: {
     backgrounds: { value: '#131317' },
-    theme: 'dark',
+    theme: 'lc-dark-theme',
   },
   light: {
     backgrounds: { value: '#fff' },
-    theme: 'light',
+    theme: 'lc-light-theme',
   },
 };
diff --git a/packages/react-components/.storybook/preview-head.html b/packages/react-components/.storybook/preview-head.html
@@ -29,13 +29,15 @@
   }
 
   .lc-dark-theme .docs-story,
-  .lc-dark-theme.sb-show-main {
+  .lc-dark-theme.sb-show-main,
+  .lc-dark-theme .sb-show-main {
     background-color: #131317;
     color: rgb(255 255 255 / 80%);
   }
 
   .lc-light-theme .docs-story,
-  .lc-light-theme.sb-show-main {
+  .lc-light-theme.sb-show-main,
+  .lc-light-theme .sb-show-main {
     background-color: #fff;
     color: #131317;
   }

diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js
@@ -1,4 +1,5 @@
 import { mockDateDecorator } from 'storybook-mock-date-decorator';
+import { withThemeByClassName } from '@storybook/addon-themes';
 
 import '../src/themes/legacy.scss';
 import '../src/themes/light.scss';
@@ -9,7 +10,16 @@ import '../src/foundations/color-scheme.css';
 import '../src/foundations/radius.css';
 import '../src/foundations/transition.css';
 
-export const decorators = [mockDateDecorator];
+export const decorators = [
+  mockDateDecorator,
+  withThemeByClassName({
+    themes: {
+      light: 'lc-light-theme',
+      dark: 'lc-dark-theme',
+    },
+    defaultTheme: 'light',
+  }),
+];
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -20,14 +30,26 @@ export const parameters = {
     },
     expanded: true,
   },
+  // backgrounds: {
+  //   disable: true,
+  // },
   backgrounds: {
-    disable: true,
-  },
-  themes: {
-    default: 'light',
-    list: [
-      { name: 'light', class: 'lc-light-theme', color: '#06f' },
-      { name: 'dark', class: 'lc-dark-theme', color: '#000' },
+    values: [
+      { name: 'light', value: '#fff' },
+      { name: 'dark', value: '#131317' },
     ],
   },
+  // themes: {
+  //   default: 'light',
+  //   list: [
+  //     { name: 'light', class: 'lc-light-theme', color: '#06f' },
+  //     { name: 'dark', class: 'lc-dark-theme', color: '#000' },
+  //   ],
+  // },
+  // chromatic: {
+  //   modes: {
+  //     light: allModes["light"],
+  //     dark: allModes["dark"],
+  //   },
+  // },
 };
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -41,6 +41,7 @@
     "@storybook/addon-essentials": "^7.6.8",
     "@storybook/addon-links": "^7.6.8",
     "@storybook/addon-mdx-gfm": "^7.6.8",
+    "@storybook/addon-themes": "^7.6.10",
     "@storybook/blocks": "^7.6.8",
     "@storybook/core-common": "^7.6.8",
     "@storybook/react": "^7.6.8",