Merge pull request #64 from rtCamp/enhance/storybook-display

Enhancement: Storybook setup and theme showcase

Author: mohdsayed

.storybook/manager-head.html

@@ -69,4 +69,16 @@
     font-size: 14px;
   }
 
-</style>
+</style>
+
+<script>
+  var observer = new MutationObserver(function(mutations) {
+    if (document.title.match(/Storybook$/)) {
+      document.title = "Frappe UI React";
+    }
+  }).observe(document.querySelector("title"), {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+</script>

.storybook/public/favicon.svg

@@ -11,7 +11,7 @@
     "build": "npm run build -w @rtcamp/frappe-ui-react",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build; cp .storybook/public/favicon.svg storybook-static/",
     "test:unit": "jest --config=tests/unitTest.jest.config.cjs",
     "lint": "npm-run-all --parallel lint:*",
     "lint:js": "eslint .",

package.json

@@ -1,11 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+
 import ThemeShowcase from "./ThemeShowcase";
+// @ts-expect-error - Json import
+import tailwindExtend from "../../../../../tailwindExtend.json";
 
 const meta = {
   title: "Theme/DesignSystem",
   component: ThemeShowcase,
   parameters: {
     layout: "fullscreen",
+    docs: {
+      source: {
+        code: `
+Extended Tailwind Config:
+
+${JSON.stringify(tailwindExtend, null, 2)}
+				`,
+      },
+    },
   },
   tags: ["autodocs"],
 } satisfies Meta<typeof ThemeShowcase>;