@xenide-io/the-old-ui-theme 0.2.5 → 0.2.9

package/src/components/sections/IconShowcase.tsx

@@ -0,0 +1,247 @@
+/**
+ * Bespoke Lemon glyphs from PostHog open source — filled Material / product paths,
+ * not Lucide stroke icons.
+ */
+import {
+  IconActivity,
+  IconAreaChart,
+  IconArrowDown,
+  IconArrowUp,
+  IconBell,
+  IconBellOff,
+  IconBolt,
+  IconBox,
+  IconCancel,
+  IconCheck,
+  IconCheckCircle,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconClipboardEdit,
+  IconClose,
+  IconCohort,
+  IconCopy,
+  IconCumulativeChart,
+  IconDatabase,
+  IconDownload,
+  IconEdit,
+  IconErrorOutline,
+  IconExclamation,
+  IconFlag,
+  IconFlare,
+  IconFlask,
+  IconGift,
+  IconGridView,
+  IconHandClick,
+  IconHome,
+  IconLayers,
+  IconListView,
+  IconLogout,
+  IconMail,
+  IconMoon,
+  IconPanelRight,
+  IconPerson,
+  IconPlayCircle,
+  IconPlus,
+  IconPremium,
+  IconQueryEditor,
+  IconRadar,
+  IconRecording,
+  IconRobot,
+  IconRocket,
+  IconSave,
+  IconSearch,
+  IconSelectEvents,
+  IconStar,
+  IconSubArrowRight,
+  IconSun,
+  IconSurveys,
+  IconSync,
+  IconTableChart,
+  IconTerminal,
+  IconToggle,
+  IconTrash,
+  IconTuning,
+  IconUpload,
+  IconVolume,
+  IconVolumeOff,
+  PH_ICONS,
+  type IconName,
+} from "@/components/icons";
+import { ShowcaseWrapper } from "@/components/ui";
+
+const iconCells: { name: IconName; Icon: (typeof PH_ICONS)[IconName] }[] = [
+  { name: "activity", Icon: IconActivity },
+  { name: "areaChart", Icon: IconAreaChart },
+  { name: "arrowUp", Icon: IconArrowUp },
+  { name: "arrowDown", Icon: IconArrowDown },
+  { name: "bell", Icon: IconBell },
+  { name: "bellOff", Icon: IconBellOff },
+  { name: "bolt", Icon: IconBolt },
+  { name: "box", Icon: IconBox },
+  { name: "cancel", Icon: IconCancel },
+  { name: "check", Icon: IconCheck },
+  { name: "checkCircle", Icon: IconCheckCircle },
+  { name: "chevronDown", Icon: IconChevronDown },
+  { name: "chevronLeft", Icon: IconChevronLeft },
+  { name: "chevronRight", Icon: IconChevronRight },
+  { name: "clipboard", Icon: IconClipboardEdit },
+  { name: "close", Icon: IconClose },
+  { name: "cohort", Icon: IconCohort },
+  { name: "copy", Icon: IconCopy },
+  { name: "cumulativeChart", Icon: IconCumulativeChart },
+  { name: "database", Icon: IconDatabase },
+  { name: "download", Icon: IconDownload },
+  { name: "edit", Icon: IconEdit },
+  { name: "errorOutline", Icon: IconErrorOutline },
+  { name: "exclamation", Icon: IconExclamation },
+  { name: "flag", Icon: IconFlag },
+  { name: "flare", Icon: IconFlare },
+  { name: "flask", Icon: IconFlask },
+  { name: "gift", Icon: IconGift },
+  { name: "grid", Icon: IconGridView },
+  { name: "handClick", Icon: IconHandClick },
+  { name: "home", Icon: IconHome },
+  { name: "layers", Icon: IconLayers },
+  { name: "list", Icon: IconListView },
+  { name: "logout", Icon: IconLogout },
+  { name: "mail", Icon: IconMail },
+  { name: "moon", Icon: IconMoon },
+  { name: "panelRight", Icon: IconPanelRight },
+  { name: "person", Icon: IconPerson },
+  { name: "play", Icon: IconPlayCircle },
+  { name: "plus", Icon: IconPlus },
+  { name: "premium", Icon: IconPremium },
+  { name: "queryEditor", Icon: IconQueryEditor },
+  { name: "radar", Icon: IconRadar },
+  { name: "recording", Icon: IconRecording },
+  { name: "robot", Icon: IconRobot },
+  { name: "rocket", Icon: IconRocket },
+  { name: "save", Icon: IconSave },
+  { name: "search", Icon: IconSearch },
+  { name: "selectEvents", Icon: IconSelectEvents },
+  { name: "settings", Icon: IconTuning },
+  { name: "star", Icon: IconStar },
+  { name: "subArrowRight", Icon: IconSubArrowRight },
+  { name: "sun", Icon: IconSun },
+  { name: "surveys", Icon: IconSurveys },
+  { name: "sync", Icon: IconSync },
+  { name: "tableChart", Icon: IconTableChart },
+  { name: "terminal", Icon: IconTerminal },
+  { name: "toggle", Icon: IconToggle },
+  { name: "trash", Icon: IconTrash },
+  { name: "upload", Icon: IconUpload },
+  { name: "volume", Icon: IconVolume },
+  { name: "volumeOff", Icon: IconVolumeOff },
+];
+
+const colourTiles = [
+  { label: "Session replay", Icon: IconRecording, fg: "--ph-product-session-replay" as const },
+  { label: "Product analytics", Icon: IconAreaChart, fg: "--ph-product-product-analytics" as const },
+  { label: "Data pipeline", Icon: IconGridView, fg: "--ph-product-data-pipeline" as const },
+  { label: "Feature flags", Icon: IconFlag, fg: "--ph-product-feature-flags" as const },
+  { label: "Experiments", Icon: IconFlask, fg: "--ph-product-experiments" as const },
+  { label: "Data warehouse", Icon: IconDatabase, fg: "--ph-product-data-warehouse" as const },
+  { label: "Surveys", Icon: IconSurveys, fg: "--ph-product-surveys" as const },
+];
+
+export default function IconShowcase() {
+  const code = `import { IconActivity, IconAreaChart, IconArrowDown, IconArrowUp, IconBell, IconBellOff, IconBolt, IconBox, IconCancel, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconClipboardEdit, IconClose, IconCohort, IconCopy, IconCumulativeChart, IconDatabase, IconDownload, IconEdit, IconErrorOutline, IconExclamation, IconFlag, IconFlare, IconFlask, IconGift, IconGridView, IconHandClick, IconHome, IconLayers, IconListView, IconLogout, IconMail, IconMoon, IconPanelRight, IconPerson, IconPlayCircle, IconPlus, IconPremium, IconQueryEditor, IconRadar, IconRecording, IconRobot, IconRocket, IconSave, IconSearch, IconSelectEvents, IconStar, IconSubArrowRight, IconSun, IconSurveys, IconSync, IconTableChart, IconTerminal, IconToggle, IconTrash, IconTuning, IconUpload, IconVolume, IconVolumeOff, PH_ICONS, type IconName } from "the-old-ui";
+
+<div className="space-y-8">
+  <div className="ph-panel space-y-4">
+    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
+    <p className="text-sm leading-relaxed text-ph-subtle">
+      Paths mirror PostHog&apos;s Lemon UI — filled{" "}
+      <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
+      <code className="ph-kbd">the-old-ui</code> (no Lucide).
+    </p>
+
+    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
+      {iconCells.map(({ name, Icon }) => (
+        <div
+          key={name}
+          className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
+          style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
+        >
+          <Icon className="h-6 w-6 text-ph-ink" />
+          <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+
+  <div className="ph-panel space-y-4">
+    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
+    <p className="text-sm leading-relaxed text-ph-subtle">
+      In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
+      <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
+    </p>
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
+      {colourTiles.map(({ label, Icon, fg }) => (
+        <div
+          key={label}
+          className="ph-icon-tile border-white/15 text-white"
+          style={{ backgroundColor: \`var(\${fg})\` }}
+        >
+          <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
+          <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Icons"
+      description="Bespoke Lemon glyphs from PostHog open source — filled Material / product paths, not Lucide stroke icons."
+      code={code}
+      filename="IconExample.tsx"
+    >
+      <div className="space-y-8">
+        <div className="ph-panel space-y-4">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
+          <p className="text-sm leading-relaxed text-ph-subtle">
+            Paths mirror PostHog&apos;s Lemon UI — filled{" "}
+            <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
+            <code className="ph-kbd">the-old-ui</code> (no Lucide).
+          </p>
+
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
+            {iconCells.map(({ name, Icon }) => (
+              <div
+                key={name}
+                className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
+                style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
+              >
+                <Icon className="h-6 w-6 text-ph-ink" />
+                <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="ph-panel space-y-4">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
+          <p className="text-sm leading-relaxed text-ph-subtle">
+            In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
+            <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
+          </p>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
+            {colourTiles.map(({ label, Icon, fg }) => (
+              <div
+                key={label}
+                className="ph-icon-tile border-white/15 text-white"
+                style={{ backgroundColor: `var(${fg})` }}
+              >
+                <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
+                <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/IndicatorShowcase.tsx

@@ -0,0 +1,52 @@
+import { IconBell, IconMail, IconShoppingCart, IconSurveys } from "@/components/icons";
+import { ComponentDocs, Indicator, ShowcaseWrapper } from "@/components/ui";
+
+const indicators = [
+  { icon: IconBell, label: "Notifications", count: "8", hue: "bg-ph-brand" },
+  { icon: IconMail, label: "Messages", count: "99+", hue: "bg-ph-blue" },
+  { icon: IconSurveys, label: "Comments", count: "3", hue: "bg-emerald-600" },
+  { icon: IconShoppingCart, label: "Cart", count: "!", hue: "bg-ph-danger" },
+] as const;
+
+export default function IndicatorShowcase() {
+  const code = `import { Indicator } from "the-old-ui";
+
+<Indicator badge="8" color="bg-ph-brand">
+  <Button variant="ghost" shape="circle">
+    <IconBell className="h-6 w-6" />
+  </Button>
+</Indicator>
+
+<Indicator dot color="bg-ph-brand">
+  <Avatar label="JD" />
+</Indicator>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Badge hotspots"
+      description="Indicator badges and dots for notifications, status, and counts."
+      code={code}
+      filename="IndicatorExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "badge", type: "ReactNode", description: "Badge content (number, text, !)." },
+            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class." },
+            { name: "position", type: "top-right | top-left | bottom-right | bottom-left", defaultValue: "top-right", description: "Indicator position." },
+            { name: "dot", type: "boolean", defaultValue: "false", description: "Show a simple dot instead of badge." },
+          ]}
+        />
+      }
+    >
+      <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted px-10 py-8">
+        {indicators.map(({ icon: Icon, label, count, hue }) => (
+          <Indicator key={label} badge={count} color={hue}>
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-ph-surface shadow-ph">
+              <Icon className="h-6 w-6 text-ph-mutedtext" />
+            </div>
+          </Indicator>
+        ))}
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/KbdShowcase.tsx

@@ -0,0 +1,31 @@
+import { Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
+
+export default function KbdShowcase() {
+  const code = `import { Kbd, Panel } from "the-old-ui";
+
+<Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
+  <Kbd keys={["⌘", "K"]} />
+  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
+  <Kbd keys={["⌥", "⇧", "E"]} />
+  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
+  <Kbd variant="token">HogQL</Kbd>
+  <p className="w-full pt-5 text-xs text-ph-mutedtext">
+    Keyboard hints and code tokens are rendered through the same reusable component.
+  </p>
+</Panel>`;
+
+  return (
+    <ShowcaseWrapper title="Keyboard glyphs" code={code} filename="KbdExample.tsx">
+      <Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
+        <Kbd keys={["⌘", "K"]} />
+        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
+        <Kbd keys={["⌥", "⇧", "E"]} />
+        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
+        <Kbd variant="token">HogQL</Kbd>
+        <p className="w-full pt-5 text-xs text-ph-mutedtext">
+          Keyboard hints and code tokens are rendered through the same reusable component.
+        </p>
+      </Panel>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/ModalShowcase.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState } from "react";
+import { IconCheck, IconClose, IconPlus } from "@/components/icons";
+import { Button, ComponentDocs, Input, Modal, Select, ShowcaseWrapper, Textarea } from "@/components/ui";
+
+export default function ModalShowcase() {
+  const [openModal, setOpenModal] = useState<string | null>(null);
+
+  const close = () => setOpenModal(null);
+
+  const code = `import { IconCheck, IconClose, IconPlus } from "the-old-ui";
+import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
+
+<div className="ph-panel space-y-4">
+  <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
+
+  <div className="flex flex-wrap gap-3">
+    <Button variant="secondary" onClick={() => setOpenModal("info")}>
+      Info
+    </Button>
+    <Button variant="success" onClick={() => setOpenModal("success")}>
+      Success
+    </Button>
+    <Button variant="danger" onClick={() => setOpenModal("error")}>
+      Error
+    </Button>
+    <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
+      Form modal
+    </Button>
+  </div>
+
+  <Modal
+    open={openModal === "info"}
+    onClose={close}
+    title="Configure capture"
+    description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
+    footer={<Button variant="secondary" onClick={close}>Close</Button>}
+  />
+
+  <Modal
+    open={openModal === "success"}
+    onClose={close}
+    showCloseButton={false}
+    footer={<Button variant="success" onClick={close}>Continue</Button>}
+  >
+    <div className="flex items-start gap-3">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+        <IconCheck className="h-5 w-5" />
+      </div>
+      <div>
+        <h3 className="text-lg font-bold text-ph-success">Saved</h3>
+        <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
+      </div>
+    </div>
+  </Modal>
+
+  <Modal
+    open={openModal === "error"}
+    onClose={close}
+    showCloseButton={false}
+    footer={
+      <>
+        <Button variant="ghost" onClick={close}>Cancel</Button>
+        <Button variant="danger" onClick={close}>View logs</Button>
+      </>
+    }
+  >
+    <div className="flex items-start gap-3">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+        <IconClose className="h-5 w-5" />
+      </div>
+      <div>
+        <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
+        <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
+      </div>
+    </div>
+  </Modal>
+
+  <Modal
+    open={openModal === "form"}
+    onClose={close}
+    size="lg"
+    title="Create feature flag"
+    footer={
+      <>
+        <Button variant="ghost" onClick={close}>Cancel</Button>
+        <Button variant="primary" onClick={close}>Create</Button>
+      </>
+    }
+  >
+    <div className="space-y-4">
+      <Input label="Key" placeholder="billing-ui-v3" />
+      <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
+      <Select label="Rollout">
+        <option>10% staged</option>
+        <option>Everyone</option>
+      </Select>
+    </div>
+  </Modal>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Modals"
+      description="Accessible modal shell with open state, title, description, size, close button, and footer props."
+      code={code}
+      filename="ModalExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "open", type: "boolean", defaultValue: "false", description: "Controls modal visibility." },
+            { name: "onClose", type: "() => void", description: "Called by overlay and close button." },
+            { name: "size", type: "sm | md | lg | xl | full", defaultValue: "md", description: "Controls panel max width." },
+            { name: "title", type: "string", description: "Accessible dialog heading." },
+            { name: "footer", type: "ReactNode", description: "Renders action row with consistent spacing." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel space-y-4">
+        <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
+
+        <div className="flex flex-wrap gap-3">
+          <Button variant="secondary" onClick={() => setOpenModal("info")}>
+            Info
+          </Button>
+          <Button variant="success" onClick={() => setOpenModal("success")}>
+            Success
+          </Button>
+          <Button variant="danger" onClick={() => setOpenModal("error")}>
+            Error
+          </Button>
+          <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
+            Form modal
+          </Button>
+        </div>
+
+        <Modal
+          open={openModal === "info"}
+          onClose={close}
+          title="Configure capture"
+          description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
+          footer={<Button variant="secondary" onClick={close}>Close</Button>}
+        />
+
+        <Modal
+          open={openModal === "success"}
+          onClose={close}
+          showCloseButton={false}
+          footer={<Button variant="success" onClick={close}>Continue</Button>}
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+              <IconCheck className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-ph-success">Saved</h3>
+              <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
+            </div>
+          </div>
+        </Modal>
+
+        <Modal
+          open={openModal === "error"}
+          onClose={close}
+          showCloseButton={false}
+          footer={
+            <>
+              <Button variant="ghost" onClick={close}>Cancel</Button>
+              <Button variant="danger" onClick={close}>View logs</Button>
+            </>
+          }
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+              <IconClose className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
+              <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
+            </div>
+          </div>
+        </Modal>
+
+        <Modal
+          open={openModal === "form"}
+          onClose={close}
+          size="lg"
+          title="Create feature flag"
+          footer={
+            <>
+              <Button variant="ghost" onClick={close}>Cancel</Button>
+              <Button variant="primary" onClick={close}>Create</Button>
+            </>
+          }
+        >
+          <div className="space-y-4">
+            <Input label="Key" placeholder="billing-ui-v3" />
+            <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
+            <Select label="Rollout">
+              <option>10% staged</option>
+              <option>Everyone</option>
+            </Select>
+          </div>
+        </Modal>
+      </div>
+    </ShowcaseWrapper>
+  );
+}