@xenide-io/the-old-ui-theme 0.2.6 → 0.3.0

package/src/components/sections/StatShowcase.tsx

@@ -0,0 +1,129 @@
+import { IconAreaChart, IconArrowUp, IconCohort, IconSurveys } from "@/components/icons";
+import { Avatar, ChatBubble, ComponentDocs, Panel, Stat, ShowcaseWrapper } from "@/components/ui";
+
+export default function StatShowcase() {
+  const code = `import { Avatar, ChatBubble, Panel, Stat } from "the-old-ui";
+
+<div className="space-y-10">
+  <div className="grid gap-4 md:grid-cols-3">
+    <Stat icon={...} label="Total volume" value="2.6M" tone="brand" footer={...} />
+  </div>
+
+  <Panel className="grid gap-6 lg:grid-cols-2">
+    <ChatBubble
+      variant="from"
+      avatar={<Avatar label="M" color="bg-ph-muted text-ph-mutedtext" icon={...} />}
+      name="Max"
+      time="Today · 09:14"
+      footer="Synced with session replay"
+    >
+      Could you summarise the spike on /billing?
+    </ChatBubble>
+
+    <ChatBubble
+      variant="self"
+      avatar={<Avatar label="AI" color="bg-ph-purple text-white" />}
+      name="PostHog AI"
+      time="09:15"
+      footer="Tokens billed per org policy"
+    >
+      Checkout completion jumped 41%...
+    </ChatBubble>
+  </Panel>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Stats & conversational UI"
+      description="Stat cards and chat bubble components for dashboards and AI interfaces."
+      code={code}
+      filename="StatExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "Stat.icon", type: "ReactNode", description: "Leading icon." },
+            { name: "Stat.label", type: "ReactNode", description: "Metric label." },
+            { name: "Stat.value", type: "ReactNode", description: "Metric value." },
+            { name: "Stat.footer", type: "ReactNode", description: "Supporting text." },
+            { name: "Stat.tone", type: "default | brand | blue | purple | warning", defaultValue: "default", description: "Colour treatment." },
+            { name: "ChatBubble.variant", type: "from | self", defaultValue: "from", description: "Bubble alignment and colour." },
+            { name: "ChatBubble.avatar", type: "ReactNode", description: "Avatar element." },
+            { name: "ChatBubble.name", type: "string", description: "Sender name." },
+            { name: "ChatBubble.time", type: "string", description: "Timestamp." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-10">
+        <div className="grid gap-4 md:grid-cols-3">
+          <Stat icon={<IconArrowUp className="h-7 w-7" />} label="Total volume" value="2.6M" tone="brand" footer={<><span className="font-semibold text-emerald-700">up 21%</span> vs previous window</>} />
+          <Stat icon={<IconCohort className="h-7 w-7" />} label="Identified persons" value="89.4K" tone="blue" footer={<>Stable cohort churn <span className="tabular-nums text-ph-mutedtext">1.8%</span></>} />
+          <Stat icon={<IconAreaChart className="h-7 w-7" />} label="Activation" value="12.6%" tone="purple" footer={<>Powered by experimentation <strong className="text-ph-mutedtext">#flags</strong></>} />
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <Stat label="Pageviews" value="1.2M" footer={<><span className="font-semibold text-emerald-700">up 15%</span> vs trailing 7-day</>} />
+          <Stat label="Experiment guardrail" value="42%" tone="warning" footer={<><span className="font-semibold text-ph-danger">down 3%</span> watch conversion</>} />
+        </div>
+
+        <Panel className="grid gap-6 lg:grid-cols-2">
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Co-pilot replies</h3>
+            <div className="space-y-5">
+              <ChatBubble
+                variant="from"
+                avatar={<Avatar
+                  size="sm"
+                  icon={<IconSurveys className="h-5 w-5 text-ph-mutedtext" />}
+                  color="bg-ph-muted text-ph-mutedtext"
+                />}
+                name="Max"
+                time="Today · 09:14"
+                footer="Synced with session replay 19ab…"
+              >
+                Could you summarise the spike on /billing?
+              </ChatBubble>
+              <ChatBubble
+                variant="self"
+                avatar={<Avatar
+                  size="sm"
+                  label="AI"
+                  color="bg-ph-purple text-white"
+                />}
+                name="PostHog AI"
+                time="09:15"
+                footer="Tokens billed per org policy"
+              >
+                Checkout completion jumped 41% once you shipped the HogProvider race fix yesterday.
+              </ChatBubble>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">FAQ accordion</h3>
+            <div className="space-y-2">
+              <details className="ph-details">
+                <summary>What qualifies as an "active user"?</summary>
+                <div className="ph-details-inner leading-relaxed">
+                  Any person emitting at least one non-$feature_flag_called event inside the timezone-aware window configured on the insight.
+                </div>
+              </details>
+              <details className="ph-details">
+                <summary>How do I ship safely with feature flags?</summary>
+                <div className="ph-details-inner leading-relaxed">
+                  Pair multivariate payloads with enrichment properties, ramp traffic slowly, then wire the HogQL guardrail dashboards your team trusts.
+                </div>
+              </details>
+              <details className="ph-details">
+                <summary>Can I correlate LLM traces with revenue?</summary>
+                <div className="ph-details-inner leading-relaxed">
+                  Yes — warehouse joins from <code className="ph-kbd">$ai_generation</code> to Shopify/Snowflake exports are the canonical path PostHog's team dogfoods.
+                </div>
+              </details>
+            </div>
+          </div>
+        </Panel>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/StepperShowcase.tsx

@@ -0,0 +1,37 @@
+import { ComponentDocs, ShowcaseWrapper, Stepper } from "@/components/ui";
+
+export default function StepperShowcase() {
+  const steps = [
+    { id: "1", label: "Account", description: "Login details" },
+    { id: "2", label: "Profile", description: "Personal info" },
+    { id: "3", label: "Settings", description: "Preferences" },
+    { id: "4", label: "Review", description: "Confirm" },
+  ];
+
+  const code = `import { Stepper } from "the-old-ui";
+
+<div className="ph-panel">
+  <Stepper steps={steps} currentStep={1} />
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Stepper"
+      description="Step progress indicator for setup, onboarding, and multi-stage forms."
+      code={code}
+      filename="StepperExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "steps", type: "{ id; label; description? }[]", description: "Steps shown in order." },
+            { name: "currentStep", type: "number", description: "Zero-based active step index." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <Stepper steps={steps} currentStep={1} />
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/SwapShowcase.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { ShowcaseWrapper } from "@/components/ui";
+
+function IconSwapToggle({
+  offIcon: OffIcon,
+  onIcon: OnIcon,
+  offClassName,
+  onClassName,
+  label,
+}: {
+  offIcon: typeof IconBellOff;
+  onIcon: typeof IconBell;
+  offClassName?: string;
+  onClassName?: string;
+  label: string;
+}) {
+  return (
+    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph focus-within:ring-2 focus-within:ring-ph-focus focus-within:ring-offset-2">
+      <input type="checkbox" className="sr-only" aria-label={label} />
+      <span className="ph-icon-swap h-7 w-7" aria-hidden>
+        <OffIcon
+          className={cn(
+            "opacity-100 transition group-has-[:checked]:pointer-events-none group-has-[:checked]:opacity-0",
+            offClassName,
+          )}
+        />
+        <OnIcon
+          className={cn(
+            "opacity-0 transition group-has-[:checked]:opacity-100",
+            onClassName,
+          )}
+        />
+      </span>
+    </label>
+  );
+}
+
+export default function SwapShowcase() {
+  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@xenide-io/the-old-ui-theme";
+
+<div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
+  <IconSwapToggle
+    label="Mute audio"
+    offIcon={IconVolume}
+    onIcon={IconVolumeOff}
+    offClassName="text-ph-brand"
+    onClassName="text-ph-mutedtext"
+  />
+
+  <IconSwapToggle
+    label="Mute notifications"
+    offIcon={IconBell}
+    onIcon={IconBellOff}
+    offClassName="rotate-[-8deg] text-ph-mutedtext"
+    onClassName="text-ph-mutedtext"
+  />
+
+  <IconSwapToggle
+    label="Use light appearance"
+    offIcon={IconMoon}
+    onIcon={IconSun}
+    offClassName="text-ph-mutedtext"
+    onClassName="text-ph-warning"
+  />
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Icon swap" code={code} filename="SwapExample.tsx">
+      <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
+        <IconSwapToggle
+          label="Mute audio"
+          offIcon={IconVolume}
+          onIcon={IconVolumeOff}
+          offClassName="text-ph-brand"
+          onClassName="text-ph-mutedtext"
+        />
+
+        <IconSwapToggle
+          label="Mute notifications"
+          offIcon={IconBell}
+          onIcon={IconBellOff}
+          offClassName="rotate-[-8deg] text-ph-mutedtext"
+          onClassName="text-ph-mutedtext"
+        />
+
+        <IconSwapToggle
+          label="Use light appearance"
+          offIcon={IconMoon}
+          onIcon={IconSun}
+          offClassName="text-ph-mutedtext"
+          onClassName="text-ph-warning"
+        />
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/TabShowcase.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { ComponentDocs, ShowcaseWrapper, Tabs } from "@/components/ui";
+
+const pillItems = [
+  { value: "overview", label: "Overview" },
+  { value: "activity", label: "Activity" },
+  { value: "settings", label: "Settings" },
+];
+
+const insightItems = [
+  { value: "funnels", label: "Funnels" },
+  { value: "trends", label: "Trends" },
+  { value: "retention", label: "Retention" },
+];
+
+const insightCopy: Record<string, string> = {
+  funnels: "Step-through conversion diagnostics for each stage of your onboarding.",
+  trends: "Arithmetic, formulas, breakdowns — the default insight landing state.",
+  retention: "Cohort resurfacing curves with optional granularity controls.",
+};
+
+export default function TabShowcase() {
+  const [pill, setPill] = useState("overview");
+  const [insight, setInsight] = useState("funnels");
+
+  const code = `import { Tabs } from "the-old-ui";
+
+<div className="grid gap-8 lg:grid-cols-2">
+  <div className="ph-panel">
+    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Floating pill track</h3>
+    <Tabs items={pillItems} value={pill} onChange={setPill} />
+    <p className="mt-6 text-sm text-ph-subtle">
+      Mirrors the softly inset control groups from the product chrome — muted rail + white thumb.
+    </p>
+  </div>
+
+  <div className="ph-panel space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Underline tabs</h3>
+    <Tabs items={insightItems} value={insight} onChange={setInsight} variant="underline" />
+    <div className="rounded-lg border border-ph-border bg-ph-surface p-5 shadow-ph">
+      <p className="text-sm leading-relaxed text-ph-subtle">{insightCopy[insight]}</p>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Tabs"
+      description="Controlled tab primitive with pill and underline variants."
+      code={code}
+      filename="TabsExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "items", type: "{ value; label }[]", description: "Tab labels and values." },
+            { name: "value", type: "string", description: "Current tab value." },
+            { name: "onChange", type: "(value: string) => void", description: "Called when a tab is selected." },
+            { name: "variant", type: "pill | underline", defaultValue: "pill", description: "Visual tab style." },
+          ]}
+        />
+      }
+    >
+      <div className="grid gap-8 lg:grid-cols-2">
+        <div className="ph-panel">
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Floating pill track</h3>
+          <Tabs items={pillItems} value={pill} onChange={setPill} />
+          <p className="mt-6 text-sm text-ph-subtle">
+            Mirrors the softly inset control groups from the product chrome — muted rail + white thumb.
+          </p>
+        </div>
+
+        <div className="ph-panel space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Underline tabs</h3>
+          <Tabs items={insightItems} value={insight} onChange={setInsight} variant="underline" />
+          <div className="rounded-lg border border-ph-border bg-ph-surface p-5 shadow-ph">
+            <p className="text-sm leading-relaxed text-ph-subtle">{insightCopy[insight]}</p>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/TableShowcase.tsx

@@ -0,0 +1,140 @@
+import type { CSSProperties } from "react";
+import { Badge, ComponentDocs, ShowcaseWrapper, Table, type TableColumn } from "@/components/ui";
+
+const data = [
+  { id: 1, name: "Alice Johnson", role: "Developer", status: "Active", plan: "Pro" },
+  { id: 2, name: "Bob Smith", role: "Designer", status: "Offline", plan: "Basic" },
+  { id: 3, name: "Charlie Brown", role: "Manager", status: "Active", plan: "Enterprise" },
+  { id: 4, name: "Diana Prince", role: "Developer", status: "Busy", plan: "Pro" },
+  { id: 5, name: "Eve Davis", role: "QA", status: "Active", plan: "Basic" },
+];
+
+const ribbonByPlan: Record<string, string> = {
+  Pro: "var(--ph-data-1)",
+  Basic: "var(--ph-data-4)",
+  Enterprise: "var(--ph-data-6)",
+};
+
+type UserRow = (typeof data)[number];
+
+const statusVariant: Record<string, "success" | "neutral" | "warning"> = {
+  Active: "success",
+  Offline: "neutral",
+  Busy: "warning",
+};
+
+const columns: TableColumn<UserRow>[] = [
+  { key: "id", header: "#", cell: (row) => <span className="tabular-nums text-ph-mutedtext">{row.id}</span>, className: "w-12 text-center" },
+  { key: "name", header: "Name", cell: (row) => <span className="font-medium text-ph-ink">{row.name}</span> },
+  { key: "role", header: "Role", cell: (row) => row.role },
+  { key: "status", header: "Status", cell: (row) => <Badge variant={statusVariant[row.status] ?? "outline"}>{row.status}</Badge> },
+  { key: "plan", header: "Plan", cell: (row) => <span className="text-ph-subtle">{row.plan}</span> },
+];
+
+const keyValueData = [
+  { key: "distinct_id", value: "019b2eef-..." },
+  { key: "capture_api_version", value: "2024-06-06" },
+];
+
+const keyValueColumns: TableColumn<(typeof keyValueData)[number]>[] = [
+  { key: "key", header: "Key", cell: (row) => <span className="font-mono text-xs">{row.key}</span> },
+  { key: "value", header: "Value", cell: (row) => <span className="font-mono text-xs">{row.value}</span> },
+];
+
+export default function TableShowcase() {
+  const code = `import { Badge, Table, type TableColumn } from "the-old-ui";
+
+<div className="space-y-8">
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Dashboard table</h3>
+    <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
+      White canvas, tinted header strip, zebra optional — avoids DaisyUI&apos;s chunky row chrome.
+    </p>
+    <Table data={data} columns={columns} caption="Dashboard users" />
+  </div>
+
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ribbon column</h3>
+    <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
+      Per-row accents via inherited <code className="ph-kbd">--row-ribbon</code> mimic Lemon insight list markers (
+      <code className="ph-kbd">.ph-table--ribbon</code>).
+    </p>
+    <Table
+      data={data}
+      columns={columns}
+      ribbon
+      getRowStyle={(row) => ({
+        "--row-ribbon": ribbonByPlan[row.plan] ?? "var(--ph-data-5)",
+      } as CSSProperties)}
+    />
+  </div>
+
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Zebra rows</h3>
+    <Table data={data} columns={columns.slice(0, 4)} zebra />
+  </div>
+
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Compact density</h3>
+    <Table data={keyValueData} columns={keyValueColumns} compact className="max-w-xl" />
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Tables"
+      description="Data table wrapper with typed columns, zebra rows, compact density, and component-based cell rendering."
+      code={code}
+      filename="TableExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "data", type: "T[]", description: "Rows passed to each column cell renderer." },
+            { name: "columns", type: "TableColumn<T>[]", description: "Column definitions with header and cell render function." },
+            { name: "zebra", type: "boolean", defaultValue: "false", description: "Adds alternating row backgrounds." },
+            { name: "compact", type: "boolean", defaultValue: "false", description: "Reduces density for admin tables." },
+            { name: "ribbon", type: "boolean", defaultValue: "false", description: "Adds per-row accent ribbon support." },
+            { name: "getRowStyle", type: "(row: T) => CSSProperties", description: "Optional row-level CSS variables or inline style." },
+            { name: "caption", type: "string", description: "Accessible table caption rendered visually hidden." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-8">
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Dashboard table</h3>
+          <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
+            White canvas, tinted header strip, zebra optional — avoids DaisyUI&apos;s chunky row chrome.
+          </p>
+          <Table data={data} columns={columns} caption="Dashboard users" />
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ribbon column</h3>
+          <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
+            Per-row accents via inherited <code className="ph-kbd">--row-ribbon</code> mimic Lemon insight list markers (
+            <code className="ph-kbd">.ph-table--ribbon</code>).
+          </p>
+          <Table
+            data={data}
+            columns={columns}
+            ribbon
+            getRowStyle={(row) => ({
+              "--row-ribbon": ribbonByPlan[row.plan] ?? "var(--ph-data-5)",
+            } as CSSProperties)}
+          />
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Zebra rows</h3>
+          <Table data={data} columns={columns.slice(0, 4)} zebra />
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Compact density</h3>
+          <Table data={keyValueData} columns={keyValueColumns} compact className="max-w-xl" />
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/TimelineShowcase.tsx

@@ -0,0 +1,83 @@
+import { IconAreaChart, IconBolt, IconGift, IconRocket } from "@/components/icons";
+import { ComponentDocs, ShowcaseWrapper, Timeline } from "@/components/ui";
+
+const events = [
+  {
+    id: "1",
+    icon: <IconRocket className="h-6 w-6" />,
+    color: "bg-ph-brand text-white",
+    title: "Project scaffolded",
+    desc: "Next.js ingestion keys issued for prod + staging.",
+    time: "2h ago",
+  },
+  {
+    id: "2",
+    icon: <IconBolt className="h-6 w-6" />,
+    color: "bg-ph-purple text-white",
+    title: "$pageview spikes",
+    desc: "CDN edge experiment rolled to 42% cohort.",
+    time: "1h ago",
+  },
+  {
+    id: "3",
+    icon: <IconAreaChart className="h-6 w-6" />,
+    color: "bg-ph-blue text-white",
+    title: "Dashboard shared",
+    desc: "Growth pack pinned to Slack #metrics.",
+    time: "45m ago",
+  },
+  {
+    id: "4",
+    icon: <IconGift className="h-6 w-6" />,
+    color: "bg-emerald-600 text-white",
+    title: "Feature flag LIVE",
+    desc: "pricing-test-v3 now default for EU traffic.",
+    time: "Just now",
+  },
+];
+
+export default function TimelineShowcase() {
+  const code = `import { Timeline } from "the-old-ui";
+
+<Timeline
+  events={[
+    {
+      id: "1",
+      title: "Project scaffolded",
+      description: "Keys issued for prod + staging.",
+      time: "2h ago",
+      icon: <IconRocket />,
+      color: "bg-ph-brand text-white",
+    },
+  ]}
+  alternate
+/>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Timeline"
+      description="Event timeline with icons, descriptions, and alternating layout."
+      code={code}
+      filename="TimelineExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "events", type: "TimelineEvent[]", description: "Timeline events to render." },
+            { name: "alternate", type: "boolean", defaultValue: "false", description: "Alternate left/right on large screens." },
+            { name: "event.id", type: "string", description: "Unique key." },
+            { name: "event.title", type: "string", description: "Event title." },
+            { name: "event.description", type: "string", description: "Event description." },
+            { name: "event.time", type: "string", description: "Timestamp." },
+            { name: "event.icon", type: "ReactNode", description: "Icon element." },
+            { name: "event.color", type: "string", description: "Tailwind colour classes." },
+          ]}
+        />
+      }
+    >
+      <div className="relative ph-panel overflow-hidden">
+        <div className="absolute bottom-8 left-[3.125rem] top-8 w-px bg-ph-border lg:left-[3.5rem]" aria-hidden />
+        <Timeline events={events} alternate />
+      </div>
+    </ShowcaseWrapper>
+  );
+}