@emara/ui 1.1.0

package/components/ui/app-shell.stories.tsx

@@ -0,0 +1,270 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  RiDashboardLine,
+  RiFolderLine,
+  RiNotification3Line,
+  RiSettings4Line,
+  RiTeamLine,
+} from "@remixicon/react";
+
+import {
+  AppShell,
+  AppShellFooter,
+  AppShellHeader,
+  AppShellMain,
+  AppShellSidebar,
+} from "./app-shell";
+import { Avatar, AvatarFallback } from "./avatar";
+import { Badge } from "./badge";
+import { Breadcrumbs } from "./breadcrumb";
+import { Button } from "./button";
+import { PageHeader } from "./page-header";
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarBrand,
+  SidebarCollapseToggle,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarItem,
+  SidebarSubItem,
+} from "./sidebar";
+import { TopBar, TopBarBrand, TopBarEnd, TopBarStart } from "./top-bar";
+
+const meta: Meta<typeof AppShell> = {
+  title: "Layout/AppShell",
+  component: AppShell,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: { control: "select", options: ["default", "header-only", "sidebar-only", "minimal"] },
+    sidebarPosition: { control: "select", options: ["start", "end"] },
+    sidebarWidth: { control: "select", options: ["sm", "md", "lg"] },
+    headerHeight: { control: "select", options: ["sm", "md", "lg"] },
+    sidebarBreakpoint: { control: "select", options: ["sm", "md", "lg"] },
+    stickyHeader: { control: "boolean" },
+    bordered: { control: "boolean" },
+    defaultSidebarCollapsed: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppShell>;
+
+function ShellBrand() {
+  return (
+    <SidebarBrand>
+      <span className="inline-flex size-6 items-center justify-center rounded bg-primary text-primary-foreground text-xs font-bold">
+        E
+      </span>
+      <span>Emara</span>
+    </SidebarBrand>
+  );
+}
+
+function ShellTopBarBrand() {
+  return (
+    <TopBarBrand>
+      <span className="inline-flex size-6 items-center justify-center rounded bg-primary text-primary-foreground text-xs font-bold">
+        E
+      </span>
+      <span>Emara</span>
+    </TopBarBrand>
+  );
+}
+
+function SidebarContents({
+  collapsed,
+  onToggle,
+}: {
+  collapsed: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <Sidebar collapsed={collapsed} className="h-full">
+      <ShellBrand />
+      <SidebarBody>
+        <SidebarGroup>
+          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+          <SidebarItem icon={<RiDashboardLine />} label="Dashboard" tooltip="Dashboard" active />
+          <SidebarItem
+            icon={<RiTeamLine />}
+            label="Team"
+            tooltip="Team"
+            badge={<Badge size="xs" variant="info">12</Badge>}
+          />
+          <SidebarItem
+            icon={<RiFolderLine />}
+            label="Projects"
+            tooltip="Projects"
+            expandable
+            defaultExpanded
+          >
+            <SidebarSubItem label="Apollo" />
+            <SidebarSubItem label="Mercury" active />
+            <SidebarSubItem label="Gemini" />
+          </SidebarItem>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Settings</SidebarGroupLabel>
+          <SidebarItem icon={<RiSettings4Line />} label="Preferences" tooltip="Preferences" />
+        </SidebarGroup>
+      </SidebarBody>
+      <SidebarFooter>
+        <SidebarCollapseToggle onClick={onToggle} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+function ShellHeader() {
+  return (
+    <TopBar bordered>
+      <TopBarStart>
+        <ShellTopBarBrand />
+      </TopBarStart>
+      <TopBarEnd>
+        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
+          <RiNotification3Line />
+        </Button>
+        <Avatar size="sm">
+          <AvatarFallback>AZ</AvatarFallback>
+        </Avatar>
+      </TopBarEnd>
+    </TopBar>
+  );
+}
+
+function PageContent() {
+  return (
+    <div className="p-6">
+      <PageHeader
+        title="Dashboard"
+        description="Welcome back — here's what's happening today."
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: "Home", href: "/" },
+              { label: "Dashboard" },
+            ]}
+          />
+        }
+        actions={<Button>New report</Button>}
+        divider
+      />
+      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div
+            key={i}
+            className="rounded-md border border-border bg-card p-4 shadow-sm"
+          >
+            <div className="text-xs text-muted-foreground">Metric {i}</div>
+            <div className="mt-1 text-2xl font-semibold tabular-nums">
+              {(i * 1234).toLocaleString()}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: (args) => {
+    function Demo() {
+      const [collapsed, setCollapsed] = useState(false);
+      return (
+        <AppShell {...args} sidebarCollapsed={collapsed} onSidebarCollapsedChange={setCollapsed}>
+          <AppShellHeader>
+            <ShellHeader />
+          </AppShellHeader>
+          <AppShellSidebar>
+            <SidebarContents collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />
+          </AppShellSidebar>
+          <AppShellMain>
+            <PageContent />
+          </AppShellMain>
+        </AppShell>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const HeaderOnly: Story = {
+  args: { variant: "header-only" },
+  render: (args) => (
+    <AppShell {...args}>
+      <AppShellHeader>
+        <ShellHeader />
+      </AppShellHeader>
+      <AppShellMain>
+        <PageContent />
+      </AppShellMain>
+    </AppShell>
+  ),
+};
+
+export const SidebarOnly: Story = {
+  args: { variant: "sidebar-only" },
+  render: (args) => {
+    function Demo() {
+      const [collapsed, setCollapsed] = useState(false);
+      return (
+        <AppShell {...args} sidebarCollapsed={collapsed} onSidebarCollapsedChange={setCollapsed}>
+          <AppShellSidebar>
+            <SidebarContents collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />
+          </AppShellSidebar>
+          <AppShellMain>
+            <PageContent />
+          </AppShellMain>
+        </AppShell>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Minimal: Story = {
+  args: { variant: "minimal" },
+  render: (args) => (
+    <AppShell {...args}>
+      <AppShellMain>
+        <PageContent />
+      </AppShellMain>
+    </AppShell>
+  ),
+};
+
+export const SidebarEnd: Story = {
+  args: { sidebarPosition: "end" },
+  render: Default.render!,
+};
+
+export const WithFooter: Story = {
+  render: (args) => {
+    function Demo() {
+      const [collapsed, setCollapsed] = useState(false);
+      return (
+        <AppShell {...args} sidebarCollapsed={collapsed} onSidebarCollapsedChange={setCollapsed}>
+          <AppShellHeader>
+            <ShellHeader />
+          </AppShellHeader>
+          <AppShellSidebar>
+            <SidebarContents collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />
+          </AppShellSidebar>
+          <AppShellMain>
+            <PageContent />
+          </AppShellMain>
+          <AppShellFooter>
+            <div className="px-6 py-3 text-xs text-muted-foreground">
+              © 2026 Emara. All rights reserved.
+            </div>
+          </AppShellFooter>
+        </AppShell>
+      );
+    }
+    return <Demo />;
+  },
+};