Merge pull request #43 from rtCamp/fix/build

Fix: Build storybook command and setup gp-pages workflow

Author: mohdsayed

.github/workflows/gh-pages.yml

@@ -0,0 +1,50 @@
+name: Publish To Github Pages
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+env:
+  CI: false
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+      pages: 'write'
+      actions: 'write'
+      checks: 'write'
+      deployments: 'write'
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+      - name: Install dependencies
+        run: |
+          npm ci
+      - name: Build Storybook
+        run: |
+          npm run build-storybook
+        
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.storybook/main.ts

@@ -15,7 +15,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-docs"),
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-a11y"),
-		getAbsolutePath("storybook-dark-mode"),
+    getAbsolutePath('@storybook/addon-themes'),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

.storybook/modeDecorator.tsx

@@ -1,19 +1,11 @@
-import { useEffect } from "react";
-import { useDarkMode } from "storybook-dark-mode";
-
-const ModeDecorator = (Story) => {
-  const mode = useDarkMode() ? "dark" : "light";
-
-  useEffect(() => {
-    document.body.className = `${mode} bg-surface-white min-h-screen`;
-    const docsStory = document.querySelector(".docs-story");
-
-    if (docsStory) {
-      docsStory.className = `${mode} bg-surface-white`;
-    }
-  }, [mode]);
-
-  return <Story />;
-};
-
-export default ModeDecorator;
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: '', // Class name for light mode
+      dark: 'dark',  // Class name for dark mode
+    },
+    defaultTheme: 'light', // Default theme
+  }),
+];

.storybook/preview.ts

@@ -1,9 +1,9 @@
 import type { Preview } from "@storybook/react-vite";
+import {decorators} from "./modeDecorator";
 import "@rtcamp/frappe-ui-react/theme.css";
-import ModeDecorator from "./modeDecorator";
 
 const preview: Preview = {
-  decorators: [ModeDecorator],
+  decorators,
   parameters: {
     controls: {
       matchers: {

package-lock.json

@@ -28,6 +28,7 @@
     "@storybook/addon-a11y": "^9.1.3",
     "@storybook/addon-docs": "^9.1.3",
     "@storybook/addon-onboarding": "^9.1.3",
+    "@storybook/addon-themes": "^9.1.10",
     "@storybook/addon-vitest": "^9.1.3",
     "@storybook/addons": "^7.6.17",
     "@storybook/react-vite": "^9.1.3",

package.json

@@ -30,7 +30,10 @@
     "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
     "feather-icons": "^4.29.2",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.5.0",
     "lucide-react": "^0.539.0",
     "quill-image-resize-module-react": "^3.0.0",
     "quill-paste-smart": "^2.0.0",

packages/frappe-ui-react/package.json

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import Sidebar from "./sidebar";
 import {
   LucideBell,
@@ -8,17 +8,14 @@ import {
   LucideClipboard,
   LucideLink,
   LucideMail,
-  LucideMoon,
   LucidePhone,
   LucideSettings,
   LucideUser,
   LucideUserCheck,
   LucideUsers,
 } from "lucide-react";
 import { MemoryRouter } from "react-router";
-import { Meta, StoryObj } from "@storybook/react-vite/*";
-import { useDarkMode } from "storybook-dark-mode";
-import { noop } from "../../utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta: Meta<typeof Sidebar> = {
   title: "Components/Sidebar",
@@ -65,11 +62,6 @@ const crmSidebar = {
     subtitle: "Jane Doe",
     logo: "https://raw.githubusercontent.com/frappe/crm/develop/.github/logo.svg",
     menuItems: [
-      {
-        label: "Toggle Theme",
-        icon: <LucideMoon size={16} className="text-ink-gray-6 mr-2" />,
-        onClick: noop,
-      },
       {
         label: "Help",
         to: "/help",
@@ -171,42 +163,6 @@ const crmSidebar = {
 
 export const SidebarExample: Story = {
   render: () => {
-    const mode = useDarkMode() ? "dark" : "light";
-
-    const toggleTheme = useCallback(() => {
-      const container = document.getElementById("sidebar-container");
-      if (!container) return;
-
-      const bodyHasDark = mode === "dark";
-      const containerHasDark = container.classList.contains("dark");
-
-      // Sync container's dark class with body
-      if (bodyHasDark !== containerHasDark) {
-        if (bodyHasDark) {
-          container.classList.add("dark");
-        } else {
-          container.classList.remove("dark");
-        }
-      }
-
-      // Toggle theme
-      if (bodyHasDark) {
-        const button = parent.document.querySelector(
-          '[title="Change theme to light mode"]'
-        ) as HTMLButtonElement;
-        if (button) button.click();
-
-        container.classList.remove("dark");
-      } else {
-        const button = parent.document.querySelector(
-          '[title="Change theme to dark mode"]'
-        ) as HTMLButtonElement;
-        if (button) button.click();
-
-        container.classList.add("dark");
-      }
-    }, [mode]);
-
     return (
       <div
         className="flex h-screen w-full flex-col bg-surface-white shadow"
@@ -216,11 +172,6 @@ export const SidebarExample: Story = {
           <Sidebar
             header={{
               ...crmSidebar.header,
-              menuItems: crmSidebar.header.menuItems.map((item) =>
-                item.label === "Toggle Theme"
-                  ? { ...item, onClick: toggleTheme }
-                  : item
-              ),
             }}
             sections={crmSidebar.sections}
           />