chore: improve storybook

SnailyCAD · Oct 20, 2023 · 6b41293 · 6b41293
1 parent c6385bd
commit 6b41293
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 1,052 deletions.
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -6,7 +6,8 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/addon-styling",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/react-vite",

diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
@@ -1,11 +1,18 @@
 import * as React from "react";
 import "../src/tailwind.css";
 import type { Preview } from "@storybook/react";
-import { withThemeByDataAttribute } from "@storybook/addon-styling";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { NextIntlProvider } from "next-intl";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#16151a" },
+      ],
+    },
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
@@ -44,6 +51,7 @@ export const decorators = [
       light: "light",
       dark: "dark",
     },
+    parentSelector: "body",
     defaultTheme: "dark",
     attributeName: "data-theme",
   }),

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -19,10 +19,11 @@
     "test:e2e": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"http-server storybook-static --port 6006 --silent\" \"wait-on http-get://127.0.0.1:6006 -v && pnpm test-storybook\""
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.0",
     "@storybook/addon-interactions": "^7.5.0",
     "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-themes": "^7.5.1",
     "@storybook/blocks": "^7.5.0",
     "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.5.0",

diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-body[data-mode="dark"],
-body[data-mode="dark"] {
+body[data-theme="dark"] {
   background-color: theme("colors.primary");
+  color: theme("colors.white");
 }