docs: fix storybook flashing

Author: thebuilder

pnpm-lock.yaml

@@ -6,12 +6,7 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.@(story|stories).@(ts|tsx)',
   ],
-  addons: [
-    {
-      name: '@storybook/addon-essentials',
-    },
-    'storybook-dark-mode',
-  ],
+  addons: ['@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
   },

storybook/.storybook/DocsContainer.tsx

@@ -6,4 +6,22 @@
   .sbdocs .sbdocs-hidden {
     display: none;
   }
+  .sb-preparing-docs {
+    background: #1b1c1d;
+  }
+  .sb-preparing-docs .sb-previewBlock {
+    background: #2a2a2a;
+  }
+  .sb-preparing-docs .sb-argstableBlock-head {
+    background: #1a1a1a;
+  }
+  .sb-preparing-docs .sb-argstableBlock-body td {
+    background: #2a2a2a;
+  }
+  .sb-argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #1a1a1a;
+  }
+  .sb-preparing-docs .sb-previewBlock_icon {
+    background: #727272;
+  }
 </style>

storybook/.storybook/main.ts

@@ -1,19 +1,15 @@
 import 'intersection-observer';
 import 'tailwindcss/tailwind.css';
 import { themes } from '@storybook/theming';
-import { DocsContainer } from './DocsContainer';
 
 export const parameters = {
   controls: {
     expanded: true,
   },
-  darkMode: {
-    // Override the default dark theme
-    dark: { ...themes.dark },
-    // Override the default light theme
-    light: { ...themes.normal },
+  theme: {
+    ...themes.dark,
   },
   docs: {
-    container: DocsContainer,
+    theme: themes.dark,
   },
 };

storybook/.storybook/preview-head.html

@@ -46,7 +46,6 @@
     "prettier": "^2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.4",
     "storybook": "7.0.0-beta.61",
-    "storybook-dark-mode": "npm:storybook-dark-mode-v7",
     "typescript": "^4.9.5",
     "vite": "^4.1.4"
   }

storybook/.storybook/preview.ts

@@ -53,6 +53,7 @@ export const argTypes: ArgTypes<IntersectionOptions> = {
   },
   onChange: {
     table: { disable: true },
+    action: 'InView',
   },
 };