@a2v2ai/uikit 0.0.38 → 0.0.39

package/Sidebar/Sidebar.stories.tsx

@@ -1,340 +0,0 @@
-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>
-  ),
-}