@a2v2ai/uikit 0.0.37 → 0.0.38

package/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,340 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  BarChart,
+  FileText,
+  HelpCircle,
+  Home,
+  LogOut,
+  Mail,
+  PanelLeft,
+  PanelLeftClose,
+  Settings,
+  Users,
+} from "lucide-react"
+import { useState } from "react"
+
+import { Avatar, AvatarFallback } from "../Avatar/Avatar"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenuItem,
+  SidebarSeparator,
+  SidebarSubMenuItem,
+  SidebarToggle,
+} from "./Sidebar"
+
+const meta: Meta<typeof Sidebar> = {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Sidebar>
+
+function DefaultSidebar() {
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className="flex h-[600px] bg-grey-50">
+      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
+        <SidebarHeader>
+          <Flex align="center" gap={3} className="w-full">
+            <Avatar size="regular">
+              <AvatarFallback>AI</AvatarFallback>
+            </Avatar>
+            {!collapsed && (
+              <Flex direction="column" className="flex-1 min-w-0">
+                <Typography variant="subtitle2" className="truncate">
+                  Acme Inc
+                </Typography>
+                <Typography variant="caption" color="grey-500" className="truncate">
+                  Enterprise Plan
+                </Typography>
+              </Flex>
+            )}
+            <SidebarToggle>
+              {collapsed ? (
+                <PanelLeft className="size-4" />
+              ) : (
+                <PanelLeftClose className="size-4" />
+              )}
+            </SidebarToggle>
+          </Flex>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Main Menu</SidebarGroupLabel>
+            <SidebarMenuItem
+              icon={<Home className="size-4" />}
+              label="Dashboard"
+              active
+            />
+            <SidebarMenuItem
+              icon={<BarChart className="size-4" />}
+              label="Analytics"
+            />
+            <SidebarMenuItem
+              icon={<Users className="size-4" />}
+              label="Team"
+              hasChildren
+            >
+              <SidebarSubMenuItem label="Members" />
+              <SidebarSubMenuItem label="Invitations" active />
+              <SidebarSubMenuItem label="Roles" />
+            </SidebarMenuItem>
+            <SidebarMenuItem
+              icon={<FileText className="size-4" />}
+              label="Documents"
+            />
+          </SidebarGroup>
+
+          <SidebarSeparator />
+
+          <SidebarGroup>
+            <SidebarGroupLabel>Settings</SidebarGroupLabel>
+            <SidebarMenuItem
+              icon={<Settings className="size-4" />}
+              label="General"
+              hasChildren
+            >
+              <SidebarSubMenuItem label="Profile" />
+              <SidebarSubMenuItem label="Security" />
+              <SidebarSubMenuItem label="Notifications" />
+            </SidebarMenuItem>
+            <SidebarMenuItem
+              icon={<Mail className="size-4" />}
+              label="Messages"
+            />
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarFooter>
+          <Flex align="center" gap={3} className="w-full">
+            <Avatar size="small">
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            {!collapsed && (
+              <>
+                <Flex direction="column" className="flex-1 min-w-0">
+                  <Typography variant="body2" className="truncate">
+                    John Doe
+                  </Typography>
+                  <Typography variant="caption" color="grey-500" className="truncate">
+                    john@acme.com
+                  </Typography>
+                </Flex>
+                <LogOut className="size-4 text-grey-400 cursor-pointer hover:text-grey-600" />
+              </>
+            )}
+          </Flex>
+        </SidebarFooter>
+      </Sidebar>
+
+      <div className="flex-1 p-6">
+        <Typography variant="h4">Main Content Area</Typography>
+        <Typography variant="body1" color="grey-500" className="mt-2">
+          Click the toggle button to collapse/expand the sidebar.
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <DefaultSidebar />,
+}
+
+export const Expanded: Story = {
+  render: () => (
+    <div className="flex h-[500px] bg-grey-50">
+      <Sidebar>
+        <SidebarHeader>
+          <Flex align="center" gap={3}>
+            <Avatar size="regular">
+              <AvatarFallback>AI</AvatarFallback>
+            </Avatar>
+            <Flex direction="column">
+              <Typography variant="subtitle2">Acme Inc</Typography>
+              <Typography variant="caption" color="grey-500">
+                Enterprise Plan
+              </Typography>
+            </Flex>
+          </Flex>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+            <SidebarMenuItem
+              icon={<Home className="size-4" />}
+              label="Dashboard"
+              active
+            />
+            <SidebarMenuItem
+              icon={<BarChart className="size-4" />}
+              label="Analytics"
+            />
+            <SidebarMenuItem
+              icon={<Users className="size-4" />}
+              label="Team"
+            />
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </div>
+  ),
+}
+
+export const Collapsed: Story = {
+  render: () => (
+    <div className="flex h-[500px] bg-grey-50">
+      <Sidebar collapsed>
+        <SidebarHeader>
+          <Avatar size="regular">
+            <AvatarFallback>AI</AvatarFallback>
+          </Avatar>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenuItem
+              icon={<Home className="size-4" />}
+              label="Dashboard"
+              active
+            />
+            <SidebarMenuItem
+              icon={<BarChart className="size-4" />}
+              label="Analytics"
+            />
+            <SidebarMenuItem
+              icon={<Users className="size-4" />}
+              label="Team"
+            />
+            <SidebarSeparator />
+            <SidebarMenuItem
+              icon={<Settings className="size-4" />}
+              label="Settings"
+            />
+            <SidebarMenuItem
+              icon={<HelpCircle className="size-4" />}
+              label="Help"
+            />
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </div>
+  ),
+}
+
+export const WithNestedItems: Story = {
+  render: () => (
+    <div className="flex h-[600px] bg-grey-50">
+      <Sidebar>
+        <SidebarHeader>
+          <Flex align="center" gap={3}>
+            <Avatar size="regular">
+              <AvatarFallback>AI</AvatarFallback>
+            </Avatar>
+            <Typography variant="subtitle2">Acme Inc</Typography>
+          </Flex>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Sidebar label</SidebarGroupLabel>
+            <SidebarMenuItem
+              icon={<Home className="size-4" />}
+              label="Label"
+              hasChildren
+              expanded
+            >
+              <SidebarSubMenuItem label="Label" />
+              <SidebarSubMenuItem label="Label" />
+              <SidebarSubMenuItem label="Label" active />
+            </SidebarMenuItem>
+            <SidebarMenuItem
+              icon={<Settings className="size-4" />}
+              label="Label"
+              hasChildren
+            >
+              <SidebarSubMenuItem label="Label" />
+              <SidebarSubMenuItem label="Label" />
+              <SidebarSubMenuItem label="Label" />
+            </SidebarMenuItem>
+            <SidebarMenuItem
+              icon={<FileText className="size-4" />}
+              label="Label"
+              hasChildren
+            />
+            <SidebarMenuItem
+              icon={<Mail className="size-4" />}
+              label="Label"
+              hasChildren
+            />
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </div>
+  ),
+}
+
+export const WithLabelClassName: Story = {
+  render: () => (
+    <div className="flex h-[500px] bg-grey-50">
+      <Sidebar>
+        <SidebarHeader>
+          <Flex align="center" gap={3}>
+            <Avatar size="regular">
+              <AvatarFallback>AI</AvatarFallback>
+            </Avatar>
+            <Typography variant="subtitle2">Custom Labels</Typography>
+          </Flex>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+            <SidebarMenuItem
+              icon={<Home className="size-4" />}
+              label="Dashboard"
+              labelClassName="font-semibold text-accent-600"
+              active
+            />
+            <SidebarMenuItem
+              icon={<BarChart className="size-4" />}
+              label="Analytics"
+              labelClassName="italic"
+            />
+            <SidebarMenuItem
+              icon={<Users className="size-4" />}
+              label="Hidden on small screens"
+              labelClassName="hidden md:block"
+            />
+            <SidebarMenuItem
+              icon={<Settings className="size-4" />}
+              label="Custom Color"
+              labelClassName="text-error-500"
+            />
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <div className="flex-1 p-6">
+        <Typography variant="h4">labelClassName Prop</Typography>
+        <Typography variant="body1" color="grey-500" className="mt-2">
+          Use labelClassName to customize the label styling. Useful for responsive hiding, custom colors, or font styles.
+        </Typography>
+      </div>
+    </div>
+  ),
+}