sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/sidebar.stories.tsx

@@ -0,0 +1,351 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Home,
+  Settings,
+  Users,
+  HelpCircle,
+  Search,
+  ChevronDown,
+  LogOut,
+  Plus,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  SidebarInset,
+} from "./sidebar";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+import { Avatar } from "./avatar";
+
+const meta: Meta<typeof Sidebar> = {
+  title: "Components/Layout/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+const mainNavItems = [
+  { icon: Home, label: "Dashboard", href: "#" },
+  { icon: Users, label: "Customers", href: "#" },
+  { icon: Settings, label: "Settings", href: "#" },
+  { icon: HelpCircle, label: "Help", href: "#" },
+];
+
+const productItems = [
+  { label: "Architectural", href: "#", isActive: true },
+  { label: "Outdoor", href: "#" },
+  { label: "Invisible Series", href: "#" },
+  { label: "Amplifiers", href: "#" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <div className="flex min-h-[600px] w-full">
+        <Sidebar>
+          <SidebarHeader>
+            <div className="flex items-center gap-2 px-2 py-1">
+              <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
+                S
+              </div>
+              <span id="default-span-sonance" className="font-medium text-foreground">Sonance</span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {mainNavItems.map((item) => (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton asChild>
+                        <a id="default-a" href={item.href}>
+                          <item.icon />
+                          <span id="default-span-itemlabel">{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarSeparator />
+            <SidebarGroup>
+              <Collapsible defaultOpen className="group/collapsible">
+                <SidebarGroupLabel asChild>
+                  <CollapsibleTrigger className="flex w-full items-center">
+                    Products
+                    <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                  </CollapsibleTrigger>
+                </SidebarGroupLabel>
+                <CollapsibleContent>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {productItems.map((item) => (
+                        <SidebarMenuItem key={item.label}>
+                          <SidebarMenuButton asChild isActive={item.isActive}>
+                            <a id="default-a" href={item.href}>
+                              <span id="default-span-itemlabel">{item.label}</span>
+                            </a>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </CollapsibleContent>
+              </Collapsible>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Avatar fallback="John Doe" size="sm" />
+                  <span id="default-span-john-doe">John Doe</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-14 items-center gap-4 border-b border-border px-4">
+            <SidebarTrigger />
+            <h1 id="header-h1-dashboard" className="text-lg font-medium">Dashboard</h1>
+          </header>
+          <div className="flex-1 p-6">
+            <p id="header-p-main-content-area-pr" className="text-foreground-secondary">
+              Main content area. Press ⌘B to toggle the sidebar.
+            </p>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};
+
+export const WithSearch: Story = {
+  render: () => (
+    <SidebarProvider>
+      <div className="flex min-h-[600px] w-full">
+        <Sidebar>
+          <SidebarHeader>
+            <div className="flex items-center gap-2 px-2 py-1">
+              <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
+                S
+              </div>
+              <span id="with-search-span-sonance" className="font-medium text-foreground">Sonance</span>
+            </div>
+            <div className="relative px-2">
+              <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
+              <SidebarInput placeholder="Search..." className="pl-8" />
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Main</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {mainNavItems.map((item) => (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton asChild tooltip={item.label}>
+                        <a id="with-search-a" href={item.href}>
+                          <item.icon />
+                          <span id="with-search-span-itemlabel">{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-14 items-center gap-4 border-b border-border px-4">
+            <SidebarTrigger />
+            <h1 id="header-h1-search-example" className="text-lg font-medium">Search Example</h1>
+          </header>
+          <div className="flex-1 p-6">
+            <p id="header-p-this-sidebar-include" className="text-foreground-secondary">
+              This sidebar includes a search input in the header.
+            </p>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};
+
+export const WithSubMenu: Story = {
+  render: () => (
+    <SidebarProvider>
+      <div className="flex min-h-[600px] w-full">
+        <Sidebar>
+          <SidebarHeader>
+            <div className="flex items-center gap-2 px-2 py-1">
+              <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
+                S
+              </div>
+              <span id="with-sub-menu-span-sonance" className="font-medium text-foreground">Sonance</span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Products</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <Collapsible asChild defaultOpen>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton asChild>
+                        <a id="with-sub-menu-a" href="#">
+                          <Home />
+                          <span id="with-sub-menu-span-architectural">Architectural</span>
+                        </a>
+                      </SidebarMenuButton>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton className="ml-auto">
+                          <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton asChild>
+                              <a id="with-sub-menu-a" href="#">In-Ceiling</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton asChild isActive>
+                              <a id="with-sub-menu-a" href="#">In-Wall</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton asChild>
+                              <a id="with-sub-menu-a" href="#">Invisible</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <a id="with-sub-menu-a" href="#">
+                        <Users />
+                        <span id="with-sub-menu-span-outdoor">Outdoor</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Plus />
+                  <span id="with-sub-menu-span-add-product">Add Product</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <LogOut />
+                  <span id="with-sub-menu-span-logout">Logout</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-14 items-center gap-4 border-b border-border px-4">
+            <SidebarTrigger />
+            <h1 id="header-h1-with-sub-menu" className="text-lg font-medium">With Sub Menu</h1>
+          </header>
+          <div className="flex-1 p-6">
+            <p id="header-p-this-sidebar-include" className="text-foreground-secondary">
+              This sidebar includes expandable sub-menus.
+            </p>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};
+
+export const Floating: Story = {
+  render: () => (
+    <SidebarProvider>
+      <div className="flex min-h-[600px] w-full bg-background-secondary p-4">
+        <Sidebar variant="floating">
+          <SidebarHeader>
+            <div className="flex items-center gap-2 px-2 py-1">
+              <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
+                S
+              </div>
+              <span id="floating-span-sonance" className="font-medium text-foreground">Sonance</span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {mainNavItems.map((item) => (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton asChild>
+                        <a id="floating-a" href={item.href}>
+                          <item.icon />
+                          <span id="floating-span-itemlabel">{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-14 items-center gap-4 border-b border-border px-4">
+            <SidebarTrigger />
+            <h1 id="header-h1-floating-variant" className="text-lg font-medium">Floating Variant</h1>
+          </header>
+          <div className="flex-1 p-6">
+            <p id="header-p-the-floating-variant" className="text-foreground-secondary">
+              The floating variant adds rounded corners and a shadow to the sidebar.
+            </p>
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};
+