Merge pull request #62 from rtCamp/fix/dark-mode

Fix: QA issues and styles of storybook for darkmode

Author: mohdsayed

.storybook/main.ts

@@ -36,6 +36,13 @@ const config: StorybookConfig = {
       },
     };
   },
+  typescript: {
+    check: true,
+    skipCompiler: true,
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 };
 export default config;
 

.storybook/modeDecorator.tsx

@@ -3,9 +3,9 @@ import { withThemeByClassName } from "@storybook/addon-themes";
 export const decorators = [
   withThemeByClassName({
     themes: {
-      light: "", // Class name for light mode
-      dark: "dark", // Class name for dark mode
+      light: "",
+      dark: "dark",
     },
-    defaultTheme: "light", // Default theme
+    defaultTheme: "light",
   }),
 ];

.storybook/preview-styles.css

@@ -1,25 +1,3 @@
- #storybook-docs, 
- #storybook-docs .sbdocs-title, 
- #storybook-docs > .sbdocs > .sbdocs > h1  {
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
- }
-
- #storybook-docs .sbdocs-title, 
- #storybook-docs > .sbdocs > .sbdocs > h1  {
-    font-weight: 800;
-    font-size: 36px;
- }
-
- #storybook-docs .sbdocs-content p {
-    font-size: 16px;
- }
-
- #storybook-docs .sbdocs-content h2 {
-   font-weight: 800;
-   font-size: 24px;
- }
-
  .dark body {
 	 background-color: #171717 !important;
  }

.storybook/preview.ts

@@ -1,4 +1,7 @@
 import type { Preview } from "@storybook/react-vite";
+import { themes } from 'storybook/theming';
+import { DocsRenderer } from '@storybook/addon-docs';
+import type { DocsContextProps, Parameters, Renderer } from 'storybook/internal/types';
 import './preview-styles.css';
 import "@rtcamp/frappe-ui-react/theme.css";
 
@@ -13,11 +16,26 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: themes.light,
+      renderer: () => {
+        const renderer = new DocsRenderer();
+        const oldRender = renderer.render;
 
+        renderer.render = async (context: DocsContextProps<Renderer>, docsParameter: Parameters, element: HTMLElement) => {
+          const theme = (context as any).store.userGlobals.globals.theme;
+
+          docsParameter.theme = theme === 'dark' ? themes.dark : themes.light;
+
+          const result = await oldRender.call(renderer, context, docsParameter, element);
+
+          return result;
+        };
+
+        return renderer;
+      },
+    },
     a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
       test: "todo",
     },
     options: {

README.mdx

@@ -1,5 +1,6 @@
 import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 import GETTINGSTARTED from './GETTING-STARTED.md?raw';
+import './preview-styles.css'
 
 <Meta title="Getting Started" />