@mbao01/common 0.0.48 → 0.0.50

package/src/components/Sidebar/stories/examples/components/AppMain.tsx

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from "react";
+import { Breadcrumb } from "../../../../Breadcrumb";
+import { Sidebar } from "../../../Sidebar";
+import { type SidebarProps } from "../../../types";
+
+export const AppMain = ({
+  side,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & Pick<SidebarProps, "side">) => {
+  return (
+    <Sidebar.Inset {...props}>
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        {side !== "right" ? <Sidebar.Trigger className="-ml-1" /> : null}
+        <Breadcrumb>
+          <Breadcrumb.List>
+            <Breadcrumb.Link asChild className="hidden md:block">
+              <a href="#">Building Your Application</a>
+            </Breadcrumb.Link>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
+          </Breadcrumb.List>
+        </Breadcrumb>
+        {side === "right" ? <Sidebar.Trigger className="-mr-1 ml-auto !rotate-180" /> : null}
+      </header>
+      <div className="flex flex-1 flex-col gap-4 p-4">
+        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+        </div>
+        <div className="min-h-[100vh] flex-1 rounded-xl bg-base-200/50 md:min-h-min" />
+      </div>
+    </Sidebar.Inset>
+  );
+};

package/src/components/Sidebar/stories/examples/components/AppSidebar.tsx

@@ -0,0 +1,531 @@
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  Command,
+  File,
+  Folder,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  Minus,
+  MoreHorizontal,
+  PieChart,
+  Plus,
+  Settings2,
+  Share,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react";
+import { Collapsible } from "../../../../Collapsible";
+import { DropdownMenu } from "../../../../Menu";
+import { useSidebar } from "../../../hooks";
+import { Sidebar } from "../../../Sidebar";
+import { SidebarGroup } from "../../../SidebarGroup";
+import { SidebarMenu } from "../../../SidebarMenu";
+import { type SidebarProps } from "../../../types";
+import { SearchForm } from "./SearchForm";
+import { VersionSwitcher } from "./VersionSwitcher";
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      isActive: false,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      isActive: false,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      isActive: false,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+};
+
+export const AppSidebar = (props: SidebarProps) => {
+  return (
+    <Sidebar {...props}>
+      <Sidebar.Header>
+        <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
+        <SearchForm />
+      </Sidebar.Header>
+      <Sidebar.Content>
+        {/* We create a SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <SidebarGroup key={item.title}>
+            <SidebarGroup.Label>{item.title}</SidebarGroup.Label>
+            <SidebarGroup.Content>
+              <SidebarMenu>
+                {item.items.map((item) => (
+                  <SidebarMenu.Item key={item.title}>
+                    <SidebarMenu.Button asChild isActive={item.isActive}>
+                      <a href={item.url}>{item.title}</a>
+                    </SidebarMenu.Button>
+                  </SidebarMenu.Item>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup.Content>
+          </SidebarGroup>
+        ))}
+      </Sidebar.Content>
+      <Sidebar.Rail />
+    </Sidebar>
+  );
+};
+
+export const AppSidebarWithCollapsibleGroup = (props: SidebarProps) => {
+  return (
+    <Sidebar {...props}>
+      <Sidebar.Header>
+        <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
+        <SearchForm />
+      </Sidebar.Header>
+      <Sidebar.Content className="gap-0">
+        {/* We create a collapsible SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroup.Label
+                asChild
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <Collapsible.Trigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </Collapsible.Trigger>
+              </SidebarGroup.Label>
+              <Collapsible.Content>
+                <SidebarGroup.Content>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenu.Item key={item.title}>
+                        <SidebarMenu.Button asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenu.Button>
+                      </SidebarMenu.Item>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroup.Content>
+              </Collapsible.Content>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </Sidebar.Content>
+      <Sidebar.Rail />
+    </Sidebar>
+  );
+};
+
+export const AppSidebarWithSubMenu = (props: SidebarProps) => {
+  return (
+    <Sidebar {...props}>
+      <Sidebar.Header>
+        <SidebarMenu>
+          <SidebarMenu.Item>
+            <SidebarMenu.Button size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenu.Button>
+          </SidebarMenu.Item>
+        </SidebarMenu>
+      </Sidebar.Header>
+      <Sidebar.Content>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <Collapsible
+                key={item.title}
+                asChild
+                defaultOpen={item.isActive}
+                className="group/collapsible"
+              >
+                <SidebarMenu.Item key={item.title}>
+                  <Collapsible.Trigger asChild>
+                    <SidebarMenu.Button tooltip={item.title}>
+                      {item.icon && <item.icon />}
+                      <a href={item.url} className="font-medium">
+                        {item.title}
+                      </a>
+                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                    </SidebarMenu.Button>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    {item.items?.length ? (
+                      <SidebarMenu.Sub>
+                        {item.items.map((item) => (
+                          <SidebarMenu.SubItem key={item.title}>
+                            <SidebarMenu.SubButton asChild isActive={item.isActive}>
+                              <a href={item.url}>{item.title}</a>
+                            </SidebarMenu.SubButton>
+                          </SidebarMenu.SubItem>
+                        ))}
+                      </SidebarMenu.Sub>
+                    ) : null}
+                  </Collapsible.Content>
+                </SidebarMenu.Item>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </Sidebar.Content>
+      <Sidebar.Rail />
+    </Sidebar>
+  );
+};
+
+export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
+  const { isMobile } = useSidebar();
+
+  return (
+    <Sidebar {...props}>
+      <Sidebar.Header>
+        <SidebarMenu>
+          <SidebarMenu.Item>
+            <SidebarMenu.Button size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenu.Button>
+          </SidebarMenu.Item>
+        </SidebarMenu>
+      </Sidebar.Header>
+      <Sidebar.Content>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <Collapsible
+                key={item.title}
+                asChild
+                defaultOpen={item.isActive}
+                className="group/collapsible"
+              >
+                <SidebarMenu.Item key={item.title}>
+                  <Collapsible.Trigger asChild>
+                    <SidebarMenu.Button tooltip={item.title}>
+                      {item.icon && <item.icon />}
+                      <a href={item.url} className="font-medium">
+                        {item.title}
+                      </a>
+                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                    </SidebarMenu.Button>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    {item.items?.length ? (
+                      <SidebarMenu.Sub>
+                        {item.items.map((item) => (
+                          <SidebarMenu.SubItem key={item.title}>
+                            <SidebarMenu.SubButton asChild isActive={item.isActive}>
+                              <a href={item.url}>{item.title}</a>
+                            </SidebarMenu.SubButton>
+                          </SidebarMenu.SubItem>
+                        ))}
+                      </SidebarMenu.Sub>
+                    ) : null}
+                  </Collapsible.Content>
+                </SidebarMenu.Item>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+          <SidebarGroup.Label>Projects</SidebarGroup.Label>
+          <SidebarMenu>
+            {data.projects.map((item) => (
+              <SidebarMenu.Item key={item.name}>
+                <SidebarMenu.Button asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.name}</span>
+                  </a>
+                </SidebarMenu.Button>
+                <DropdownMenu>
+                  <DropdownMenu.Trigger asChild>
+                    <SidebarMenu.Action showOnHover>
+                      <MoreHorizontal />
+                      <span className="sr-only">More</span>
+                    </SidebarMenu.Action>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content
+                    className="w-48"
+                    side={isMobile ? "bottom" : "right"}
+                    align={isMobile ? "end" : "start"}
+                  >
+                    <DropdownMenu.Item>
+                      <Folder className="text-muted-foreground" />
+                      <span>View Project</span>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item>
+                      <Share className="text-muted-foreground" />
+                      <span>Share Project</span>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Item>
+                      <Trash2 className="text-muted-foreground" />
+                      <span>Delete Project</span>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu>
+              </SidebarMenu.Item>
+            ))}
+            <SidebarMenu.Item>
+              <SidebarMenu.Button>
+                <MoreHorizontal />
+                <span>More</span>
+              </SidebarMenu.Button>
+            </SidebarMenu.Item>
+          </SidebarMenu>
+        </SidebarGroup>
+      </Sidebar.Content>
+      <Sidebar.Rail />
+    </Sidebar>
+  );
+};
+
+// This is sample data.
+const treeData = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    ["app", ["api", ["hello", ["route.ts"]], "page.tsx", "layout.tsx", ["blog", ["page.tsx"]]]],
+    ["components", ["ui", "button.tsx", "card.tsx"], "header.tsx", "footer.tsx"],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+};
+
+type TreeType = string | TreeType[];
+const Tree = ({ item }: { item: TreeType }) => {
+  const [name, ...items] = Array.isArray(item) ? item : [item];
+
+  if (!items.length) {
+    return (
+      <SidebarMenu.Button
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenu.Button>
+    );
+  }
+
+  return (
+    <SidebarMenu.Item>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <Collapsible.Trigger asChild>
+          <SidebarMenu.Button>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenu.Button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <SidebarMenu.Sub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenu.Sub>
+        </Collapsible.Content>
+      </Collapsible>
+    </SidebarMenu.Item>
+  );
+};
+
+export const AppSidebarCollapsibleTree = (props: SidebarProps) => {
+  return (
+    <Sidebar {...props}>
+      <Sidebar.Content>
+        <SidebarGroup>
+          <SidebarGroup.Label>Changes</SidebarGroup.Label>
+          <SidebarGroup.Content>
+            <SidebarMenu>
+              {treeData.changes.map((item, index) => (
+                <SidebarMenu.Item key={index}>
+                  <SidebarMenu.Button>
+                    <File />
+                    {item.file}
+                  </SidebarMenu.Button>
+                  <SidebarMenu.Badge>{item.state}</SidebarMenu.Badge>
+                </SidebarMenu.Item>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup.Content>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroup.Label>Files</SidebarGroup.Label>
+          <SidebarGroup.Content>
+            <SidebarMenu>
+              {treeData.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroup.Content>
+        </SidebarGroup>
+      </Sidebar.Content>
+      <Sidebar.Rail />
+    </Sidebar>
+  );
+};

package/src/components/Sidebar/stories/examples/components/SearchForm.tsx

@@ -0,0 +1,26 @@
+import { Search } from "lucide-react";
+import { Label } from "../../../../Form";
+import { Sidebar } from "../../../Sidebar";
+import { SidebarGroup } from "../../../SidebarGroup";
+
+export const SearchForm = ({ ...props }: React.ComponentProps<"form">) => {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroup.Content className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <Sidebar.Input
+            size="sm"
+            outline
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroup.Content>
+      </SidebarGroup>
+    </form>
+  );
+};

package/src/components/Sidebar/stories/examples/components/VersionSwitcher.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react";
+import { DropdownMenu } from "../../../../Menu";
+import { SidebarMenu } from "../../../SidebarMenu";
+
+export const VersionSwitcher = ({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[];
+  defaultVersion: string;
+}) => {
+  const [selectedVersion, setSelectedVersion] = useState(defaultVersion);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenu.Item>
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <SidebarMenu.Button
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenu.Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content className="w-[--radix-dropdown-menu-trigger-width]" align="start">
+            {versions.map((version) => (
+              <DropdownMenu.Item key={version} onSelect={() => setSelectedVersion(version)}>
+                v{version} {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </SidebarMenu.Item>
+    </SidebarMenu>
+  );
+};