@syscore/ui-library 1.25.0 → 2.0.0

package/client/ui/Timeline/timeline.stories.tsx

@@ -0,0 +1,404 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Timeline, TimelineItem } from "../../components/ui/timeline";
+
+// ─── Inline SVG icons ─────────────────────────────────────────────────────────
+
+function IconStar() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </svg>
+  );
+}
+function IconBook() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+    </svg>
+  );
+}
+function IconWind() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M9.59 4.59A2 2 0 1 1 11 8H2" />
+      <path d="M12.59 19.41A2 2 0 1 0 14 16H2" />
+      <path d="M6.91 12.91A2 2 0 1 0 8 16H2" />
+    </svg>
+  );
+}
+function IconLayers() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
+    </svg>
+  );
+}
+function IconInfo() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+function IconAlertCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+
+// ─── Color token map ──────────────────────────────────────────────────────────
+
+const DOT_COLOR_OPTIONS = ["primary", "secondary", "accent", "destructive", "muted"] as const;
+
+const DOT_COLOR_MAP: Record<string, string> = {
+  primary: "hsl(var(--primary))",
+  secondary: "hsl(var(--secondary-foreground))",
+  accent: "hsl(var(--accent))",
+  destructive: "hsl(var(--destructive))",
+  muted: "hsl(var(--muted-foreground))",
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+type TimelineStoryArgs = React.ComponentPropsWithoutRef<typeof Timeline> & {
+  dotColor?: string;
+};
+
+const meta: Meta<TimelineStoryArgs> = {
+  title: "UI/Timeline",
+  component: Timeline,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  args: {
+    dotColor: DOT_COLOR_MAP.primary,
+  },
+  argTypes: {
+    direction: { control: "select", options: ["vertical", "horizontal"] },
+    side: { control: "select", options: ["alternate", "start", "end"] },
+    align: { control: "select", options: ["center", "start"] },
+    density: { control: "select", options: ["default", "compact"] },
+    dotColor: {
+      control: "select",
+      options: DOT_COLOR_OPTIONS,
+      mapping: DOT_COLOR_MAP,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TimelineStoryArgs>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: ({ dotColor }) => (
+    <Timeline>
+      {["First event", "Second event", "Third event"].map((label, i) => (
+        <TimelineItem key={i} dotColor={dotColor} size="small">
+          <div className="timeline-story-card">
+            <strong>{label}</strong>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Side: End ───────────────────────────────────────────────────────────────
+
+export const SideEnd: Story = {
+  render: ({ dotColor }) => (
+    <Timeline side="end">
+      <TimelineItem dotColor={dotColor} size="small" icon={<IconInfo />} fillDot>
+        <div className="timeline-alert timeline-alert--info">
+          <strong>Info</strong>
+          <p>Lorem ipsum dolor sit amet, no nam oblique veritus.</p>
+        </div>
+      </TimelineItem>
+      <TimelineItem dotColor={dotColor} size="small" icon={<IconAlertCircle />} fillDot>
+        <div className="timeline-alert timeline-alert--error">
+          <strong>Error</strong>
+          <p>Lorem ipsum dolor sit amet, no nam oblique veritus.</p>
+        </div>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+// ─── Alignment: Start ────────────────────────────────────────────────────────
+
+export const AlignStart: Story = {
+  render: ({ dotColor }) => (
+    <Timeline align="start" side="end">
+      {[
+        { time: "5pm", title: "New Icon", sub: "Mobile App" },
+        { time: "3–4pm", title: "Design Stand Up", sub: "Hangouts" },
+        { time: "12pm", title: "Lunch break", sub: "" },
+        { time: "9–11am", title: "Finish Home Screen", sub: "Web App" },
+      ].map((item, i) => (
+        <TimelineItem key={i} dotColor={dotColor} size="small">
+          <div style={{ display: "flex", gap: "1rem" }}>
+            <strong style={{ flexShrink: 0, width: "4rem" }}>{item.time}</strong>
+            <div>
+              <strong>{item.title}</strong>
+              {item.sub && <div className="timeline-story-sub">{item.sub}</div>}
+            </div>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Dot Color ───────────────────────────────────────────────────────────────
+
+export const DotColor: Story = {
+  render: ({ dotColor }) => (
+    <Timeline side="end">
+      {[
+        "Order placed",
+        "Processing",
+        "Shipped",
+        "Delivered",
+      ].map((label, i) => (
+        <TimelineItem key={i} dotColor={dotColor} size="small">
+          <span>{label}</span>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Icon Dots ────────────────────────────────────────────────────────────────
+
+export const IconDots: Story = {
+  render: ({ dotColor }) => (
+    <Timeline align="start">
+      {[
+        { icon: <IconStar />, title: "Lorem Ipsum Dolor" },
+        { icon: <IconBook />, title: "Lorem Ipsum Dolor" },
+        { icon: <IconWind />, title: "Lorem Ipsum Dolor" },
+        { icon: <IconLayers />, title: "Lorem Ipsum Dolor" },
+      ].map((item, i) => (
+        <TimelineItem key={i} dotColor={dotColor} icon={item.icon} fillDot size="default">
+          <div className="timeline-story-card" style={{ borderTop: `3px solid ${dotColor}` }}>
+            <strong>{item.title}</strong>
+            <p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut.</p>
+            <button
+              type="button"
+              className="timeline-story-btn"
+              style={{ borderColor: dotColor, color: dotColor }}
+            >
+              Button
+            </button>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Size ─────────────────────────────────────────────────────────────────────
+
+export const Size: Story = {
+  render: ({ dotColor }) => (
+    <Timeline>
+      {(["x-small", "small", "default", "large", "x-large"] as const).map((size) => (
+        <TimelineItem key={size} dotColor={dotColor} size={size} fillDot>
+          <div className="timeline-story-card">
+            <strong>size="{size}"</strong>
+            <p>Lorem ipsum dolor sit amet.</p>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Horizontal ───────────────────────────────────────────────────────────────
+
+export const Horizontal: Story = {
+  render: ({ dotColor }) => (
+    <Timeline direction="horizontal">
+      {["Step 1", "Step 2", "Step 3"].map((label, i) => (
+        <TimelineItem
+          key={i}
+          dotColor={dotColor}
+          size="small"
+          opposite={<span className="timeline-story-opposite">Opposite content</span>}
+        >
+          <div>
+            <strong>{label}</strong>
+            <p style={{ fontSize: "0.8125rem" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Slot: Icon ──────────────────────────────────────────────────────────────
+
+export const SlotIcon: Story = {
+  render: ({ dotColor }) => (
+    <Timeline>
+      <TimelineItem
+        size="large"
+        dotColor={dotColor}
+        icon={
+          <img
+            src="https://i.pravatar.cc/64"
+            alt="User avatar"
+            style={{ width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" }}
+          />
+        }
+        opposite={<span className="timeline-story-opposite">Tus eu perfecto</span>}
+      >
+        <div className="timeline-story-card">
+          <strong style={{ fontSize: "1.125rem" }}>Lorem ipsum</strong>
+          <p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.</p>
+        </div>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+// ─── Slot: Opposite ──────────────────────────────────────────────────────────
+
+export const SlotOpposite: Story = {
+  render: ({ dotColor }) => (
+    <Timeline align="start">
+      {["1960", "1970", "1980", "1990", "2000"].map((year) => (
+        <TimelineItem
+          key={year}
+          dotColor={dotColor}
+          size="small"
+          opposite={
+            <strong style={{ color: dotColor, fontSize: "1.25rem" }}>{year}</strong>
+          }
+        >
+          <div>
+            <h3 style={{ color: dotColor, fontWeight: 300, marginBottom: "0.5rem" }}>
+              Lorem ipsum
+            </h3>
+            <p style={{ fontSize: "0.875rem" }}>
+              Lorem ipsum dolor sit amet, no nam oblique veritus. Commune
+              scaevola imperdiet nec ut, sed euismod convenire principes at.
+            </p>
+          </div>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  ),
+};
+
+// ─── Order Activity ───────────────────────────────────────────────────────────
+
+export const OrderActivity: Story = {
+  render: ({ dotColor }) => {
+    const [events, setEvents] = useState<{ id: number; text: string; time: string }[]>([]);
+    const [input, setInput] = useState("");
+    const [nonce, setNonce] = useState(0);
+
+    function handleComment() {
+      if (!input.trim()) return;
+      const now = new Date();
+      const time = `${now.getHours()}:${String(now.getMinutes()).padStart(2, "0")} EDT`;
+      setEvents((prev) => [...prev, { id: nonce, text: input, time }]);
+      setNonce((n) => n + 1);
+      setInput("");
+    }
+
+    return (
+      <div style={{ maxWidth: 560, margin: "0 auto" }}>
+        <Timeline density="compact" side="end">
+          <TimelineItem
+            dotColor={dotColor}
+            size="large"
+            fillDot
+            icon={<span style={{ fontSize: "0.625rem", fontWeight: 700, color: "#fff" }}>JL</span>}
+          >
+            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleComment()}
+                placeholder="Leave a comment..."
+                className="timeline-comment-input"
+              />
+              <button type="button" className="timeline-comment-btn" onClick={handleComment}>
+                Post
+              </button>
+            </div>
+          </TimelineItem>
+
+          {[...events].reverse().map((ev) => (
+            <TimelineItem key={ev.id} dotColor={dotColor} size="small">
+              <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+                <span>{ev.text}</span>
+                <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>{ev.time}</span>
+              </div>
+            </TimelineItem>
+          ))}
+
+          <TimelineItem hideDot>
+            <strong style={{ fontSize: "0.75rem", letterSpacing: "0.05em" }}>TODAY</strong>
+          </TimelineItem>
+
+          <TimelineItem dotColor={dotColor} size="small">
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+              <span>This order was archived.</span>
+              <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>15:26 EDT</span>
+            </div>
+          </TimelineItem>
+
+          <TimelineItem dotColor={dotColor} size="small">
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+              <div>
+                <span className="timeline-chip">APP</span> Digital Downloads fulfilled 1 item.
+              </div>
+              <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>15:25 EDT</span>
+            </div>
+          </TimelineItem>
+
+          <TimelineItem dotColor={dotColor} size="small">
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+              <span>Order confirmation email was sent to John Leider (john@google.com).</span>
+              <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>15:25 EDT</span>
+            </div>
+          </TimelineItem>
+
+          <TimelineItem hideDot>
+            <button type="button" className="timeline-story-btn">Resend Email</button>
+          </TimelineItem>
+
+          <TimelineItem dotColor={dotColor} size="small">
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+              <span>A $15.00 USD payment was processed on PayPal Express Checkout.</span>
+              <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>15:25 EDT</span>
+            </div>
+          </TimelineItem>
+
+          <TimelineItem dotColor={dotColor} size="small">
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+              <span>John Leider placed this order on Online Store (checkout #1937432132572).</span>
+              <span style={{ flexShrink: 0, fontSize: "0.75rem", color: "#71747d" }}>15:25 EDT</span>
+            </div>
+          </TimelineItem>
+        </Timeline>
+      </div>
+    );
+  },
+};