@health-samurai/react-components 0.0.0-alpha.1

package/src/shadcn/components/ui/sidebar.stories.tsx

@@ -0,0 +1,384 @@
+// biome-ignore-all lint/a11y/useValidAnchor: Useless in stories
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Bell,
+	Calendar,
+	GalleryVerticalEnd,
+	Home,
+	Inbox,
+	Mail,
+	Search,
+	Settings,
+	Users,
+} from "lucide-react";
+import type * as React from "react";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "#shadcn/components/ui/breadcrumb";
+import { Separator } from "#shadcn/components/ui/separator";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarHeader,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+} from "#shadcn/components/ui/sidebar";
+
+// This is sample data.
+const data = {
+	navMain: [
+		{
+			title: "Getting Started",
+			url: "#",
+			items: [
+				{
+					title: "Installation",
+					url: "#",
+				},
+				{
+					title: "Project Structure",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Building Your Application",
+			url: "#",
+			items: [
+				{
+					title: "Routing",
+					url: "#",
+				},
+				{
+					title: "Data Fetching",
+					url: "#",
+					isActive: true,
+				},
+				{
+					title: "Rendering",
+					url: "#",
+				},
+				{
+					title: "Caching",
+					url: "#",
+				},
+				{
+					title: "Styling",
+					url: "#",
+				},
+				{
+					title: "Optimizing",
+					url: "#",
+				},
+				{
+					title: "Configuring",
+					url: "#",
+				},
+				{
+					title: "Testing",
+					url: "#",
+				},
+				{
+					title: "Authentication",
+					url: "#",
+				},
+				{
+					title: "Deploying",
+					url: "#",
+				},
+				{
+					title: "Upgrading",
+					url: "#",
+				},
+				{
+					title: "Examples",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "API Reference",
+			url: "#",
+			items: [
+				{
+					title: "Components",
+					url: "#",
+				},
+				{
+					title: "File Conventions",
+					url: "#",
+				},
+				{
+					title: "Functions",
+					url: "#",
+				},
+				{
+					title: "next.config.js Options",
+					url: "#",
+				},
+				{
+					title: "CLI",
+					url: "#",
+				},
+				{
+					title: "Edge Runtime",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Architecture",
+			url: "#",
+			items: [
+				{
+					title: "Accessibility",
+					url: "#",
+				},
+				{
+					title: "Fast Refresh",
+					url: "#",
+				},
+				{
+					title: "Next.js Compiler",
+					url: "#",
+				},
+				{
+					title: "Supported Browsers",
+					url: "#",
+				},
+				{
+					title: "Turbopack",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Community",
+			url: "#",
+			items: [
+				{
+					title: "Contribution Guide",
+					url: "#",
+				},
+			],
+		},
+	],
+};
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	return (
+		<Sidebar {...props}>
+			<SidebarHeader>
+				<SidebarMenu>
+					<SidebarMenuItem>
+						<SidebarMenuButton size="lg" asChild>
+							<a href="#">
+								<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+									<GalleryVerticalEnd className="size-4" />
+								</div>
+								<div className="flex flex-col gap-0.5 leading-none">
+									<span className="font-medium">Documentation</span>
+									<span className="">v1.0.0</span>
+								</div>
+							</a>
+						</SidebarMenuButton>
+					</SidebarMenuItem>
+				</SidebarMenu>
+			</SidebarHeader>
+			<SidebarContent>
+				<SidebarGroup>
+					<SidebarMenu>
+						{data.navMain.map((item) => (
+							<SidebarMenuItem key={item.title}>
+								<SidebarMenuButton asChild>
+									<a href={item.url} className="font-medium">
+										{item.title}
+									</a>
+								</SidebarMenuButton>
+								{item.items?.length ? (
+									<SidebarMenuSub>
+										{item.items.map((item) => (
+											<SidebarMenuSubItem key={item.title}>
+												<SidebarMenuSubButton
+													asChild
+													{...(item.isActive !== undefined
+														? { isActive: item.isActive }
+														: {})}
+												>
+													<a href={item.url}>{item.title}</a>
+												</SidebarMenuSubButton>
+											</SidebarMenuSubItem>
+										))}
+									</SidebarMenuSub>
+								) : null}
+							</SidebarMenuItem>
+						))}
+					</SidebarMenu>
+				</SidebarGroup>
+			</SidebarContent>
+			<SidebarRail />
+		</Sidebar>
+	);
+}
+
+const meta = {
+	title: "Component/Sidebar",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<SidebarProvider>
+			<AppSidebar />
+			<SidebarInset>
+				<header className="flex h-16 shrink-0 items-center gap-2 border-b">
+					<div className="flex items-center gap-2 px-3">
+						<SidebarTrigger />
+						<Separator orientation="vertical" className="mr-2 h-4" />
+						<Breadcrumb>
+							<BreadcrumbList>
+								<BreadcrumbItem className="hidden md:block">
+									<BreadcrumbLink href="#">
+										Building Your Application
+									</BreadcrumbLink>
+								</BreadcrumbItem>
+								<BreadcrumbSeparator className="hidden md:block" />
+								<BreadcrumbItem>
+									<BreadcrumbPage>Data Fetching</BreadcrumbPage>
+								</BreadcrumbItem>
+							</BreadcrumbList>
+						</Breadcrumb>
+					</div>
+				</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="bg-muted/50 aspect-video rounded-xl" />
+						<div className="bg-muted/50 aspect-video rounded-xl" />
+						<div className="bg-muted/50 aspect-video rounded-xl" />
+					</div>
+					<div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+				</div>
+			</SidebarInset>
+		</SidebarProvider>
+	),
+} satisfies Story;
+
+// Aidbox
+
+type AidboxSidebarItem = {
+	title: string;
+	url: string;
+	icon: React.FC;
+	badge?: React.ReactNode;
+};
+
+const mainMenuItems: AidboxSidebarItem[] = [
+	{ title: "Home", url: "#", icon: Home },
+];
+
+const projectItems: AidboxSidebarItem[] = [
+	{ title: "Resources", url: "#", icon: Inbox },
+	{ title: "REST Console", url: "#", icon: Calendar },
+	{ title: "DB Console", url: "#", icon: Search },
+	{ title: "Notebooks", url: "#", icon: Settings },
+];
+
+const teamItems: AidboxSidebarItem[] = [
+	{ title: "API", url: "#", icon: Users },
+	{ title: "Database", url: "#", icon: Mail },
+	{ title: "IAM", url: "#", icon: Bell },
+	{ title: "FHIR Artefact Registry", url: "#", icon: Users },
+	{ title: "Plugins", url: "#", icon: Mail },
+	{ title: "Settings", url: "#", icon: Bell },
+];
+
+export const AidboxSidebar: Story = {
+	render: () => (
+		<SidebarProvider>
+			<div className="flex h-screen w-full">
+				<Sidebar>
+					<SidebarContent>
+						<SidebarGroup>
+							<SidebarGroupContent>
+								<SidebarMenu>
+									{mainMenuItems.map((item) => (
+										<SidebarMenuItem key={item.title}>
+											<SidebarMenuButton
+												asChild
+												isActive={item.title === "Home"}
+											>
+												<a href={item.url}>
+													<item.icon />
+													<span>{item.title}</span>
+												</a>
+											</SidebarMenuButton>
+										</SidebarMenuItem>
+									))}
+								</SidebarMenu>
+							</SidebarGroupContent>
+						</SidebarGroup>
+						<SidebarSeparator />
+						<SidebarGroup>
+							<SidebarGroupContent>
+								<SidebarMenu>
+									{projectItems.map((item) => (
+										<SidebarMenuItem key={item.title}>
+											<SidebarMenuButton asChild>
+												<a href={item.url}>
+													<item.icon />
+													<span>{item.title}</span>
+												</a>
+											</SidebarMenuButton>
+											{item.badge && (
+												<SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+											)}
+										</SidebarMenuItem>
+									))}
+								</SidebarMenu>
+							</SidebarGroupContent>
+						</SidebarGroup>
+						<SidebarSeparator />
+						<SidebarGroup>
+							<SidebarGroupContent>
+								<SidebarMenu>
+									{teamItems.map((item) => (
+										<SidebarMenuItem key={item.title}>
+											<SidebarMenuButton asChild>
+												<a href={item.url}>
+													<item.icon />
+													<span>{item.title}</span>
+												</a>
+											</SidebarMenuButton>
+											{item.badge && (
+												<SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+											)}
+										</SidebarMenuItem>
+									))}
+								</SidebarMenu>
+							</SidebarGroupContent>
+						</SidebarGroup>
+					</SidebarContent>
+				</Sidebar>
+			</div>
+		</SidebarProvider>
+	),
+};