@syscore/ui-library 1.15.4 → 1.17.0

package/client/ui/MobileNav.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MobileNav,
+  MobileNavPanel,
+  MobileNavBar,
+  MobileNavTrigger,
+} from "../components/ui/mobile-nav";
+import {
+  Workflow,
+  PenLine,
+  MessageSquare,
+  TriangleAlert,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+import { UtilityText } from "../components/icons/UtilityText";
+import { UtilityCompare } from "../components/icons/UtilityCompare";
+import { UtilityRevisionsShow } from "../components/icons/UtilityRevisionsShow";
+import { UtilityFeedback } from "../components/icons/UtilityFeedback";
+
+const meta = {
+  title: "Review/MobileNav",
+  component: MobileNav,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+Mobile navigation with a spring-animated slide-up panel. Built as a **compound component** — state is managed internally via React context, so consumers never need \`useState\` or handlers.
+
+## Compound Components
+
+| Component | Role |
+|---|---|
+| \`MobileNav\` | Root — holds state, provides context |
+| \`MobileNavPanel\` | Slide-up panel with 3 discrete states: **initial** (content height, max 70%), **full** (viewport), **closed** |
+| \`MobileNavBar\` | Bottom nav bar wrapper |
+| \`MobileNavTrigger\` | Individual nav button — toggles the panel or fires a custom action |
+
+## Basic Usage
+
+\`\`\`tsx
+<MobileNav className="h-screen">
+  <MobileNavPanel>
+    {(activeKey) => <MyContent tab={activeKey} />}
+  </MobileNavPanel>
+
+  <MobileNavBar>
+    <MobileNavTrigger value="home" label="Home">
+      <HomeIcon className="size-6" />
+    </MobileNavTrigger>
+    <MobileNavTrigger value="search" label="Search">
+      <SearchIcon className="size-6" />
+    </MobileNavTrigger>
+  </MobileNavBar>
+</MobileNav>
+\`\`\`
+
+## Styling Active State
+
+\`MobileNavTrigger\` renders a \`<button>\` with the \`group\` class and a \`data-active\` attribute when selected. Use Tailwind's \`group-data-active:\` modifier on children to style based on active state:
+
+\`\`\`tsx
+<MobileNavTrigger value="home" label="Home">
+  <HomeIcon className="size-6 text-gray-400 group-data-active:text-gray-900" />
+  <span className="text-xs hidden group-data-active:block">Home</span>
+</MobileNavTrigger>
+\`\`\`
+
+## Custom Actions (onAction)
+
+Use \`onAction\` on a trigger to fire a custom callback instead of opening the panel:
+
+\`\`\`tsx
+<MobileNavTrigger value="add" label="Add" onAction={() => openModal()}>
+  <PlusIcon className="size-6" />
+</MobileNavTrigger>
+\`\`\`
+
+## Panel Gestures
+
+The drag handle supports swipe gestures that snap between discrete states:
+
+- **Swipe up** from initial → full screen
+- **Swipe down** from full → initial height
+- **Swipe down** from initial → close
+`,
+      },
+    },
+  },
+} satisfies Meta<typeof MobileNav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TabKey = "list" | "workflow" | "edit" | "comments";
+
+const tabContent: Record<
+  TabKey,
+  { title: string; items: { label: string; description: string }[] }
+> = {
+  list: {
+    title: "Changes",
+    items: [
+      {
+        label: "Reduced scope",
+        description:
+          "Requirement 2 no longer includes sulfide as a testing parameter.",
+      },
+      {
+        label: "Clarity edits",
+        description: "Requirement 2 has been re-written to maximize clarity.",
+      },
+      {
+        label: "New threshold",
+        description:
+          "Requirement 3 adds a 0.05 mg/L threshold for lead in drinking water.",
+      },
+    ],
+  },
+  workflow: {
+    title: "Workflow",
+    items: [
+      {
+        label: "Review pending",
+        description: "3 items awaiting team review before finalization.",
+      },
+      {
+        label: "Approved",
+        description: "12 strategies have been approved this cycle.",
+      },
+    ],
+  },
+  edit: {
+    title: "Edits",
+    items: [
+      {
+        label: "Draft update",
+        description: "Strategy C8.2 has been revised with new language.",
+      },
+      {
+        label: "Formatting fix",
+        description:
+          "Table headers in Requirement 1 corrected for consistency.",
+      },
+    ],
+  },
+  comments: {
+    title: "Comments",
+    items: [
+      {
+        label: "Team feedback",
+        description:
+          'Sarah noted: "Consider adding a grace period for compliance."',
+      },
+      {
+        label: "Compliance window",
+        description:
+          "Suggest extending the compliance window from 30 to 60 days.",
+      },
+      {
+        label: "Testing methodology",
+        description:
+          "Lab results should include both grab and composite samples.",
+      },
+      {
+        label: "Documentation gap",
+        description:
+          "Section 4.2 is missing referenced appendix for field procedures.",
+      },
+      {
+        label: "Stakeholder input",
+        description:
+          "Community advisory board requested public comment period extension.",
+      },
+      {
+        label: "Budget concern",
+        description:
+          "Monitoring costs may exceed allocated budget by 15% in Q3.",
+      },
+      {
+        label: "Reviewer note",
+        description:
+          "External reviewer flagged Requirement 4 for further clarification.",
+      },
+    ],
+  },
+};
+
+const PanelContent = ({ activeKey }: { activeKey: string }) => {
+  const content = tabContent[activeKey as TabKey];
+  if (!content) return null;
+
+  return (
+    <div className="mx-auto w-full max-w-md">
+      <div className="px-4 pb-2">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {content.title}
+        </h2>
+      </div>
+      <div className="px-4 pb-4 space-y-3">
+        {content.items.map((item) => (
+          <div
+            key={item.label}
+            className="flex items-start justify-between gap-3 rounded-lg border border-gray-100 bg-white p-4"
+          >
+            <div className="space-y-1">
+              <p className="text-sm font-semibold text-gray-900">
+                {item.label}
+              </p>
+              <p className="text-sm text-gray-500">{item.description}</p>
+            </div>
+            <TriangleAlert className="mt-0.5 size-5 shrink-0 text-teal-400" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: { children: null },
+
+  render: () => (
+    <MobileNav className="h-screen w-full bg-gray-50">
+      {/* Main content area */}
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          Tap an icon below to open the panel.
+        </p>
+      </div>
+
+      {/* Panel slides up above the nav */}
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      {/* Nav — always visible */}
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="edit" label="Edits">
+          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments">
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+    </MobileNav>
+  ),
+};
+
+const WithCustomActionRender = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <MobileNav className="relative h-screen w-full bg-gray-50">
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          The &ldquo;Edits&rdquo; trigger opens a modal instead of the panel.
+        </p>
+      </div>
+
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-8 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger
+          value="edit"
+          label="Edits"
+          onAction={() => setModalOpen(true)}
+        >
+          <UtilityRevisionsShow className="size-6 text-gray-500" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments">
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+
+      {modalOpen && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20">
+          <div className="relative rounded-xl bg-white p-6 shadow-lg w-72">
+            <button
+              onClick={() => setModalOpen(false)}
+              className="absolute top-3 right-3 text-gray-400 hover:text-gray-600"
+              aria-label="Close"
+            >
+              <X className="size-4" />
+            </button>
+            <p className="text-sm font-semibold text-gray-900">Edit mode</p>
+            <p className="mt-1 text-sm text-gray-500">
+              This modal was opened via onAction instead of the panel.
+            </p>
+          </div>
+        </div>
+      )}
+    </MobileNav>
+  );
+};
+
+export const WithCustomAction: Story = {
+  args: { children: null },
+  render: () => <WithCustomActionRender />,
+};
+
+export const WithDisabledTrigger: Story = {
+  args: { children: null },
+
+  render: () => (
+    <MobileNav className="h-screen w-full bg-gray-50">
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          The &ldquo;Comments&rdquo; trigger is disabled because there are no
+          comments.
+        </p>
+      </div>
+
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="edit" label="Edits">
+          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments" disabled>
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+    </MobileNav>
+  ),
+};