@boxcustodia/library 2.0.0-alpha.12 → 2.0.0-alpha.14

package/src/components/timeline/timeline.stories.tsx

@@ -1,84 +1,365 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { Settings, UserCheck } from "lucide-react";
-import { Timeline } from ".";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  GitCompareArrowsIcon,
+  GitForkIcon,
+  GitMergeIcon,
+  GitPullRequestArrowIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Tag } from "../tag/tag";
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineRoot,
+  TimelineSeparator,
+  TimelineTitle,
+} from "./timeline";
 
+/**
+ * Vertical or horizontal timeline that highlights progress up to an active step.
+ * Use the composite `Timeline` for simple item lists, or compose primitives
+ * (`TimelineRoot`, `TimelineItem`, `TimelineHeader`, `TimelineTitle`, `TimelineDate`,
+ * `TimelineIndicator`, `TimelineSeparator`, `TimelineContent`) for full control.
+ * The `value` / `defaultValue` prop marks the active step — every item with
+ * `step <= value` renders as completed.
+ */
 const meta: Meta<typeof Timeline> = {
-  title: "Data display/Timeline",
+  title: "Components/Timeline",
   component: Timeline,
+  args: {
+    defaultValue: 2,
+    items: [
+      {
+        date: "Mar 15, 2024",
+        title: "Project kickoff",
+        content: "Initial planning and team alignment session.",
+      },
+      {
+        date: "Mar 22, 2024",
+        title: "Design review",
+        content: "First round of feedback on wireframes.",
+      },
+      {
+        date: "Apr 02, 2024",
+        title: "Development",
+        content: "Implementation of core features begins.",
+      },
+      {
+        date: "Apr 18, 2024",
+        title: "Launch",
+        content: "Public release and marketing rollout.",
+      },
+    ],
+  },
+  tags: ["beta"],
+  parameters: {
+    layout: "centered",
+  },
 };
 
 export default meta;
-
 type Story = StoryObj<typeof Timeline>;
 
 export const Default: Story = {
+  render: (args) => (
+    <div className="w-[400px]">
+      <Timeline {...args} />
+    </div>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  render: (args) => (
+    <div className="w-full">
+      <Timeline {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Controlled timeline — external state drives which step is active.
+ */
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(1);
+    return (
+      <div className="flex w-[400px] flex-col gap-4">
+        <Timeline {...args} value={value} onValueChange={setValue} />
+        <div className="flex gap-2">
+          {args.items?.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => setValue(i + 1)}
+              className="rounded border px-3 py-1 text-sm"
+            >
+              Step {i + 1}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom indicators with icons inside larger dots, and the date moved below
+ * the description via primitives composed in `description`. Override the
+ * `indicator`, `separator`, `item` and `title` slots in `classNames` to
+ * retune offsets when the dot size changes.
+ */
+export const WithIndicator: Story = {
   args: {
+    defaultValue: 3,
+    className: "w-full max-w-md",
+    classNames: {
+      item: "group-data-[orientation=vertical]/timeline:ms-10",
+      title: "mt-0.5",
+      indicator:
+        "bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7",
+      separator:
+        "group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5",
+    },
     items: [
       {
-        content: "First",
-        color: "green",
+        title: "Forked Repository",
+        content: (
+          <>
+            Forked the repository to create a new branch for development.
+            <TimelineDate className="mt-2 mb-0">15 minutes ago</TimelineDate>
+          </>
+        ),
+        indicator: <GitForkIcon className="size-4" />,
       },
       {
-        content: "Second",
-        icon: <UserCheck />,
-        status: "done",
+        title: "Pull Request Submitted",
+        content: (
+          <>
+            Submitted PR #342 with new feature implementation. Waiting for code
+            review.
+            <TimelineDate className="mt-2 mb-0">10 minutes ago</TimelineDate>
+          </>
+        ),
+        indicator: <GitPullRequestArrowIcon className="size-3.5" />,
       },
       {
-        content: "Third",
-        icon: <Settings />,
-        status: "pending",
+        title: (
+          <span className="inline-flex items-center gap-2">
+            Comparing Branches
+            <Tag variant="error">Build failed</Tag>
+          </span>
+        ),
+        content: (
+          <>
+            CI build failed on the feature branch. Tests are red — review
+            required before merge.
+            <TimelineDate className="mt-2 mb-0">5 minutes ago</TimelineDate>
+          </>
+        ),
+        indicator: <GitCompareArrowsIcon className="size-3.5" />,
+      },
+      {
+        title: "Merged Branch",
+        content: (
+          <>
+            Merged the feature branch into the main branch. Ready for
+            deployment.
+            <TimelineDate className="mt-2 mb-0">Just now</TimelineDate>
+          </>
+        ),
+        indicator: <GitMergeIcon className="size-3.5" />,
       },
     ],
   },
 };
 
-export const OnlyRight: Story = {
+/**
+ * Custom content in `description` — pass any ReactNode to render rich layouts
+ * (links, lists, badges, avatars) inside each item.
+ */
+export const CustomContent: Story = {
   args: {
+    defaultValue: 2,
     items: [
       {
+        date: "Mar 15, 2024",
+        title: "Pull request merged",
         content: (
-          <div>
-            <time className="text-gray-400 text-sm">12/12/2022</time>
-            <p>Argentina Campeón Mundial</p>
-            <p>El dibu héroe de un país</p>
-            <p>Messi mejor jugador del mundo</p>
-            <p>Mejor país del mundo</p>
-          </div>
-        ),
-        status: "done",
-      },
-      {
-        content: (
-          <div>
-            <time className="text-gray-400 text-sm">10/12/2023</time>
-            <p>Milei electo</p>
+          <div className="flex flex-col gap-2">
+            <p>
+              <a
+                href="#"
+                className="font-medium text-foreground underline underline-offset-2"
+              >
+                #482 — Add Timeline component
+              </a>{" "}
+              merged into <code className="text-xs">main</code>.
+            </p>
+            <div className="flex flex-wrap gap-1">
+              <span className="rounded-md bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
+                +1.2k
+              </span>
+              <span className="rounded-md bg-error/10 px-2 py-0.5 text-xs font-medium text-error">
+                -34
+              </span>
+              <span className="rounded-md bg-muted px-2 py-0.5 text-xs font-medium">
+                6 files
+              </span>
+            </div>
           </div>
         ),
-        status: "done",
       },
       {
+        date: "Mar 22, 2024",
+        title: "Review requested",
         content: (
-          <div>
-            <time className="text-gray-400 text-sm">14/10/2024</time>
-            <p>Año de recuperación del país</p>
-          </div>
+          <ul className="list-disc space-y-1 pl-4">
+            <li>Add stories covering horizontal orientation</li>
+            <li>Document the controlled API in the meta JSDoc</li>
+            <li>Verify line alignment in RTL mode</li>
+          </ul>
         ),
-        status: "done",
       },
       {
+        date: "Apr 02, 2024",
+        title: "Released",
         content: (
-          <div>
-            <time className="text-gray-400 text-sm">1/1/2025</time>
-            <p>Nuevo año</p>
-          </div>
+          <p>
+            Shipped in{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-xs">
+              v2.0.0-alpha.15
+            </code>
+            . See the{" "}
+            <a
+              href="#"
+              className="font-medium text-foreground underline underline-offset-2"
+            >
+              changelog
+            </a>
+            .
+          </p>
         ),
-        status: "pending",
       },
     ],
   },
-  render: (args) => (
+};
+
+const roadmap = [
+  {
+    date: "Jan 2025",
+    title: "AI Engine Integration",
+    content:
+      "Deep integration of advanced LLMs for real-time code generation and context-aware suggestions.",
+  },
+  {
+    date: "Feb 2025",
+    title: "Collaborative Editing",
+    content:
+      "Multi-user real-time collaboration with shared cursors and instant synchronization across workspaces.",
+  },
+  {
+    date: "Mar 2025",
+    title: "Visual Theme Builder",
+    content:
+      "Interactive interface for creating and managing custom design systems with automated CSS variable generation.",
+  },
+  {
+    date: "Apr 2025",
+    title: "Enterprise Security",
+    content:
+      "Role-based access control, SOC2 compliance audit, and enhanced data encryption protocols.",
+  },
+];
+
+const milestones = [
+  {
+    date: "Jan 2024",
+    title: "Seed Funding",
+    content: "$2M raised to kick off product development.",
+  },
+  {
+    date: "Mar 2024",
+    title: "Product MVP",
+    content: "First working version shipped to beta testers.",
+  },
+  {
+    date: "May 2024",
+    title: "First Client",
+    content: "Signed first enterprise deal with a Fortune 500.",
+  },
+  {
+    date: "Jul 2024",
+    title: "Series A",
+    content: "$18M round led by Accel Partners.",
+  },
+  {
+    date: "Sep 2024",
+    title: "Global Expansion",
+    content: "Opened offices in London and Singapore.",
+  },
+];
+
+export const DateLeft: Story = {
+  args: {
+    variant: "date-left",
+    defaultValue: 2,
+    className: "w-full max-w-md",
+    items: roadmap,
+  },
+};
+
+export const Alternate: Story = {
+  args: {
+    variant: "alternate",
+    defaultValue: 3,
+    className: "w-[24rem]",
+    items: milestones,
+  },
+};
+
+/**
+ * Build the timeline manually with primitives when you need custom slots,
+ * extra markup, or conditional content per step.
+ */
+export const Primitive: Story = {
+  render: () => (
     <div className="w-[400px]">
-      <Timeline {...args} />
+      <TimelineRoot defaultValue={2}>
+        <TimelineItem step={1}>
+          <TimelineHeader>
+            <TimelineDate>Mar 15, 2024</TimelineDate>
+            <TimelineTitle>Kickoff</TimelineTitle>
+          </TimelineHeader>
+          <TimelineIndicator />
+          <TimelineSeparator />
+          <TimelineContent>Project planning starts.</TimelineContent>
+        </TimelineItem>
+        <TimelineItem step={2}>
+          <TimelineHeader>
+            <TimelineDate>Apr 02, 2024</TimelineDate>
+            <TimelineTitle>Development</TimelineTitle>
+          </TimelineHeader>
+          <TimelineIndicator />
+          <TimelineSeparator />
+          <TimelineContent>Feature implementation in progress.</TimelineContent>
+        </TimelineItem>
+        <TimelineItem step={3}>
+          <TimelineHeader>
+            <TimelineDate>Apr 18, 2024</TimelineDate>
+            <TimelineTitle>Launch</TimelineTitle>
+          </TimelineHeader>
+          <TimelineIndicator />
+          <TimelineSeparator />
+          <TimelineContent>Public release.</TimelineContent>
+        </TimelineItem>
+      </TimelineRoot>
     </div>
   ),
 };