chore(storybook): add custom SB theme

.storybook/manager.ts

@@ -1,4 +1,10 @@
+import { addons } from "@storybook/manager-api";
 import registerDarkModeAddon from "./addons/toggle-dark-mode/addon-setup";
+import customTheme from "./theme";
+
+addons.setConfig({
+  theme: customTheme,
+});
 
 // Register the addon
 registerDarkModeAddon();

.storybook/preview.ts

@@ -3,9 +3,13 @@ import "./preview.css";
 
 import type { Preview } from "@storybook/react";
 import * as darkModeConstants from "./addons/toggle-dark-mode/addon-constants";
+import customTheme from "./theme";
 
 const preview: Preview = {
   parameters: {
+    docs: {
+      theme: customTheme,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/theme.ts

@@ -0,0 +1,11 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "Glassy UI",
+  brandUrl: "https://itsjavi.com/glassy-ui",
+  brandTarget: "_self",
+  brandImage: undefined, //url
+});
+
+// @see https://storybook.js.org/docs/configure/user-interface/theming#create-a-theme-quickstart

package.json

@@ -88,6 +88,7 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@types/node": "^22.5.1",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",

src/stories/breadcrumb.stories.tsx

@@ -1,10 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../components/ui/breadcrumb';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../components/ui/breadcrumb";
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI/Breadcrumb',
+  title: "UI/Breadcrumb",
   component: Breadcrumb,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 };
 
 export default meta;
@@ -13,19 +27,33 @@ type Story = StoryObj<typeof Breadcrumb>;
 export const Default: Story = {
   render: () => (
     <Breadcrumb>
-      <Breadcrumb>
+      <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          <BreadcrumbLink href="#/">Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/docs/components">Components</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
         </BreadcrumbItem>
-      </Breadcrumb>
+      </BreadcrumbList>
     </Breadcrumb>
   ),
 };