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

package/src/components/sections/DiffShowcase.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { ShowcaseWrapper } from "@/components/ui";
+
+/** Lightweight before/after — PostHog product diffs screenshots in Visual Review Playwright suites. */
+
+export default function DiffShowcase() {
+  const [pct, setPct] = useState(50);
+
+  const code = `
+
+<div className="ph-panel max-w-3xl">
+  <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
+    Position
+    <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
+    <span className="tabular-nums text-ph-ink">{pct}%</span>
+  </label>
+  <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
+    <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
+      After · lightened neutral surfaces
+    </div>
+    <div
+      className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
+      style={{
+        clipPath: \`inset(0 \${100 - pct}% 0 0)\`,
+      }}
+    >
+      <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
+        Before · richer contrast rails
+      </div>
+    </div>
+    <span
+      className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
+      style={{ left: \`\${pct}%\`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
+    />
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Diff slider" code={code} filename="DiffExample.tsx">
+      <div className="ph-panel max-w-3xl">
+        <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
+          Position
+          <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
+          <span className="tabular-nums text-ph-ink">{pct}%</span>
+        </label>
+        <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
+          <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
+            After · lightened neutral surfaces
+          </div>
+          <div
+            className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
+            style={{
+              clipPath: `inset(0 ${100 - pct}% 0 0)`,
+            }}
+          >
+            <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
+              Before · richer contrast rails
+            </div>
+          </div>
+          <span
+            className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
+            style={{ left: `${pct}%`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
+          />
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/DrawerShowcase.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import {
+  IconCohort,
+  IconCumulativeChart,
+  IconFlag,
+  IconFlask,
+  IconHome,
+  IconPanelRight,
+  IconTuning,
+} from "@/components/icons";
+import { Button, ComponentDocs, Drawer, ShowcaseWrapper } from "@/components/ui";
+
+const navItems = [
+  { icon: IconHome, label: "Dashboard" },
+  { icon: IconCumulativeChart, label: "Insights" },
+  { icon: IconCohort, label: "Persons" },
+  { icon: IconFlag, label: "Feature flags" },
+  { icon: IconFlask, label: "Experiments" },
+  { icon: IconTuning, label: "Settings" },
+];
+
+export default function DrawerShowcase() {
+  const [open, setOpen] = useState(false);
+
+  const code = `import { IconCohort, IconCumulativeChart, IconFlag, IconFlask, IconHome, IconPanelRight, IconTuning } from "the-old-ui";
+import { Button, Drawer } from "the-old-ui";
+
+<div className="ph-panel">
+  <Button
+    variant="primary"
+    icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
+    onClick={() => setOpen(true)}
+  >
+    Inspect graph
+  </Button>
+
+  <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
+    <nav className="flex flex-col gap-1 px-3 py-4">
+      {navItems.map((item) => {
+        const Icon = item.icon;
+        return (
+          <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
+            <Icon className="h-4 w-4 shrink-0" />
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  </Drawer>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Drawers"
+      description="Slide-out panels with overlay backdrop — useful for secondary navigation, detail views, or configuration panels."
+      code={code}
+      filename="DrawerExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "open", type: "boolean", defaultValue: "false", description: "Controls drawer visibility." },
+            { name: "onClose", type: "() => void", description: "Called by backdrop and close button." },
+            { name: "side", type: "left | right", defaultValue: "right", description: "Which side the drawer enters from." },
+            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Controls drawer width." },
+            { name: "title", type: "ReactNode", description: "Optional header title." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <Button
+          variant="primary"
+          icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
+          onClick={() => setOpen(true)}
+        >
+          Inspect graph
+        </Button>
+
+        <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
+          <nav className="flex flex-col gap-1 px-3 py-4">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              return (
+                <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
+                  <Icon className="h-4 w-4 shrink-0" />
+                  {item.label}
+                </button>
+              );
+            })}
+          </nav>
+        </Drawer>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/DropdownShowcase.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "@/components/icons";
+import { DropdownButton, DropdownItem, ShowcaseWrapper } from "@/components/ui";
+
+export default function DropdownShowcase() {
+  const code = `import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "@xenide-io/the-old-ui-theme";
+import { DropdownButton, DropdownItem } from "@xenide-io/the-old-ui-theme";
+
+<div className="ph-panel space-y-6">
+  <p className="text-sm text-ph-subtle">
+    Use <code className="ph-kbd">DropdownButton</code> from{" "}
+    <code className="ph-kbd">the-old-ui</code> — labelled Lemon triggers +{" "}
+    <code className="ph-kbd">DropdownItem</code> menu rows.
+  </p>
+
+  <div className="flex flex-wrap items-start gap-6">
+    <DropdownButton label="Actions" variant="primary">
+      <DropdownItem>Refresh cache</DropdownItem>
+      <DropdownItem>Export HogQL</DropdownItem>
+      <DropdownItem>Jump to inspector</DropdownItem>
+    </DropdownButton>
+
+    <DropdownButton label="Account" variant="secondary">
+      <DropdownItem>
+        <IconPerson className="h-4 w-4" aria-hidden /> Profile
+      </DropdownItem>
+      <DropdownItem>
+        <IconTuning className="h-4 w-4" aria-hidden /> Project settings
+      </DropdownItem>
+      <DropdownItem>
+        <IconLogout className="h-4 w-4" aria-hidden /> Sign out
+      </DropdownItem>
+    </DropdownButton>
+
+    <DropdownButton label="Row menu" variant="accent" outline>
+      <DropdownItem>
+        <IconEdit className="h-4 w-4" aria-hidden /> Rename
+      </DropdownItem>
+      <DropdownItem>
+        <IconCopy className="h-4 w-4" aria-hidden /> Duplicate key
+      </DropdownItem>
+      <div className="my-1 h-px bg-ph-border" />
+      <DropdownItem className="text-ph-danger">
+        <IconTrash className="h-4 w-4" aria-hidden /> Delete
+      </DropdownItem>
+    </DropdownButton>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Dropdowns"
+      description="Accessible menu buttons with keyboard navigation and automatic viewport-aware side flipping and alignment shifting."
+      code={code}
+      filename="DropdownExample.tsx"
+    >
+      <div className="ph-panel space-y-6">
+        <p className="text-sm text-ph-subtle">
+          Menus prefer the requested side, then flip above or sideways and shift start/end alignment to remain visible.
+        </p>
+
+        <div className="flex flex-wrap items-start gap-6">
+          <DropdownButton label="Actions" variant="primary">
+            <DropdownItem>Refresh cache</DropdownItem>
+            <DropdownItem>Export HogQL</DropdownItem>
+            <DropdownItem>Jump to inspector</DropdownItem>
+          </DropdownButton>
+
+          <DropdownButton label="Account" variant="secondary">
+            <DropdownItem>
+              <IconPerson className="h-4 w-4" aria-hidden /> Profile
+            </DropdownItem>
+            <DropdownItem>
+              <IconTuning className="h-4 w-4" aria-hidden /> Project settings
+            </DropdownItem>
+            <DropdownItem>
+              <IconLogout className="h-4 w-4" aria-hidden /> Sign out
+            </DropdownItem>
+          </DropdownButton>
+
+          <DropdownButton label="Row menu" variant="accent" outline>
+            <DropdownItem>
+              <IconEdit className="h-4 w-4" aria-hidden /> Rename
+            </DropdownItem>
+            <DropdownItem>
+              <IconCopy className="h-4 w-4" aria-hidden /> Duplicate key
+            </DropdownItem>
+            <div className="my-1 h-px bg-ph-border" />
+            <DropdownItem className="text-ph-danger">
+              <IconTrash className="h-4 w-4" aria-hidden /> Delete
+            </DropdownItem>
+          </DropdownButton>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/EmptyStateShowcase.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Button, ComponentDocs, EmptyState, ShowcaseWrapper } from "@/components/ui";
+import { IconBox, IconPlus } from "@/components/icons";
+
+export default function EmptyStateShowcase() {
+  const code = `import { Button, EmptyState } from "the-old-ui";
+import { IconBox, IconPlus } from "the-old-ui";
+
+<EmptyState
+  icon={<IconBox className="h-7 w-7" />}
+  title="No projects yet"
+  description="Get started by creating your first project to organize your analytics."
+  action={
+    <Button icon={<IconPlus className="h-4 w-4" />}>
+      Create Project
+    </Button>
+  }
+/>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Empty State"
+      description="Reusable blank-state component for zero data, filtered results, or onboarding prompts."
+      code={code}
+      filename="EmptyStateExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "icon", type: "ReactNode", description: "Optional visual icon." },
+            { name: "title", type: "string", description: "Primary message." },
+            { name: "description", type: "string", description: "Supporting copy." },
+            { name: "action", type: "ReactNode", description: "Primary CTA slot." },
+          ]}
+        />
+      }
+    >
+      <EmptyState
+        icon={<IconBox className="h-7 w-7" />}
+        title="No projects yet"
+        description="Get started by creating your first project to organize your analytics."
+        action={
+          <Button icon={<IconPlus className="h-4 w-4" />}>
+            Create Project
+          </Button>
+        }
+      />
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/FilterChipsShowcase.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ComponentDocs,
+  FilterControls,
+  FilterMenu,
+  ShowcaseWrapper,
+  SortMenu,
+} from "@/components/ui";
+
+const statusOptions = [
+  { value: "all", label: "Any status" },
+  { value: "active", label: "Active" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived" },
+] as const;
+
+const ownerOptions = [
+  { value: "anyone", label: "Anyone" },
+  { value: "me", label: "Owned by me" },
+  { value: "team", label: "My team" },
+] as const;
+
+const sortOptions = [
+  { value: "updated", label: "Recently updated" },
+  { value: "created", label: "Recently created" },
+  { value: "name", label: "Name A-Z" },
+] as const;
+
+export default function FilterChipsShowcase() {
+  const [status, setStatus] = useState("active");
+  const [owner, setOwner] = useState("me");
+  const [sort, setSort] = useState("updated");
+
+  const applied = [
+    ...(status !== "all"
+      ? [{ id: "status", label: "Status", value: statusOptions.find((option) => option.value === status)?.label, active: true }]
+      : []),
+    ...(owner !== "anyone"
+      ? [{ id: "owner", label: "Owner", value: ownerOptions.find((option) => option.value === owner)?.label, active: true }]
+      : []),
+  ];
+
+  const clear = () => {
+    setStatus("all");
+    setOwner("anyone");
+    setSort("updated");
+  };
+
+  const remove = (id: string) => {
+    if (id === "status") setStatus("all");
+    if (id === "owner") setOwner("anyone");
+  };
+
+  const code = `import { FilterControls, FilterMenu, SortMenu } from "@xenide-io/the-old-ui-theme";
+
+<FilterControls
+  barProps={{ onClear: clearFilters, resultCount: "24 insights" }}
+  chipsProps={{ chips: appliedFilters, onRemove: removeFilter }}
+  emptyState={<span>No filters applied</span>}
+>
+  <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+  <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+  <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+</FilterControls>`;
+
+  return (
+    <ShowcaseWrapper
+      id="filters"
+      title="Filter and sort"
+      description="Controlled, URL-ready filter menus, applied chips, sorting, clear-all, and result feedback. Menus flip and shift at viewport edges."
+      code={code}
+      filename="FilterBarExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "FilterControls", type: "FilterControlsProps", description: "Combined filter bar and applied-chip composition without owning state." },
+            { name: "FilterBar", type: "FilterBarProps", description: "Lower-level responsive group for filter, sort, clear, and result controls." },
+            { name: "FilterMenu", type: "FilterMenuProps", description: "Single-choice filter using an adaptive radio menu." },
+            { name: "SortMenu", type: "SortMenuProps", description: "Dedicated sort control kept separate from filter state." },
+            { name: "FilterChips", type: "FilterChipsProps", description: "Applied or toggleable chips with independent keyboard-accessible removal." },
+          ]}
+        />
+      }
+    >
+      <FilterControls
+        barProps={{ onClear: clear, resultCount: "24 insights" }}
+        chipsProps={{ chips: applied, onRemove: remove }}
+        emptyState={<p className="text-xs text-ph-mutedtext">No filters applied</p>}
+      >
+          <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+          <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+          <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+      </FilterControls>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/FormShowcase.tsx

@@ -0,0 +1,127 @@
+import {
+  ComponentDocs,
+  Checkbox,
+  FileUpload,
+  Input,
+  Panel,
+  Radio,
+  Range,
+  Rating,
+  SearchGroup,
+  Select,
+  Textarea,
+  Toggle,
+  ShowcaseWrapper,
+} from "@/components/ui";
+
+export default function FormShowcase() {
+  const code = `import { Checkbox, FileUpload, Input, Panel, Radio, Range, Rating, SearchGroup, Select, Textarea, Toggle } from "@xenide-io/the-old-ui-theme";
+
+<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+  <Panel title="Text inputs" className="space-y-6">
+    <Input label="Default" placeholder="Filter events..." />
+    <Input label="Error" placeholder="hogql query" error="Malformed identifier near line 12" />
+    <Input label="Ghost toolbar field" type="search" placeholder="Search..." variant="ghost" />
+    <Input label="Disabled" placeholder="Unavailable" disabled />
+  </Panel>
+
+  <Panel title="Select & textarea" className="space-y-6">
+    <Select label="Environment" defaultValue="prod">
+      <option value="prod">Production</option>
+      <option value="staging">Staging</option>
+      <option value="dev">Development</option>
+    </Select>
+
+    <Textarea label="Description" placeholder="Explain the rollout..." />
+
+    <Checkbox label="Autocapture pageviews" defaultChecked />
+    <Checkbox label="Record console logs (disabled product)" disabled />
+
+    <div className="flex flex-col gap-2">
+      <Radio name="cohort" label="Dynamic cohort" defaultChecked />
+      <Radio name="cohort" label="Static upload" />
+    </div>
+
+    <Toggle label="Session replay" defaultChecked />
+    <Toggle label="Error tracking (disabled)" disabled />
+  </Panel>
+
+  <Panel title="Range, rating, uploads" className="space-y-6 lg:col-span-2">
+    <Range label="Sample rate" min={0} max={100} defaultValue={42} minLabel="Off" valueLabel="42%" maxLabel="Full" wrapperClassName="max-w-xl" />
+
+    <Rating label="Satisfaction" value={4} />
+
+    <FileUpload label="Source map archive" prompt="Drop tarball or browse" wrapperClassName="max-w-xl" />
+
+    <SearchGroup label="Grouped search" submitLabel="Search records" />
+  </Panel>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Inputs & Forms"
+      description="Actual exported input components with built-in labels, error states, helper text, disabled state, and size/variant props."
+      code={code}
+      filename="FormExample.tsx"
+      docs={
+        <ComponentDocs
+          title="Input components"
+          rows={[
+            { name: "FormField", type: "component", description: "Shared label, description, error, required-state, and generated-ID composition for custom controls." },
+            { name: "Input", type: "text | search | email | password", description: "Labelled input with error, helperText, size, and variant props." },
+            { name: "Select", type: "select", description: "Labelled select with error, helperText, size, and disabled props." },
+            { name: "Textarea", type: "textarea", description: "Labelled multiline input with the same state props as Input." },
+            { name: "Checkbox", type: "checkbox", description: "Checkbox with label and native input props." },
+            { name: "Radio", type: "radio", description: "Radio item with label and native input props." },
+            { name: "Toggle", type: "switch", description: "Switch-style checkbox with row layout." },
+            { name: "Range", type: "range", description: "Range slider with optional min/value/max labels." },
+            { name: "Rating", type: "rating", description: "Star rating display/control with value, max, and onChange props." },
+            { name: "FileUpload", type: "file", description: "Dropzone-style file input wrapper." },
+            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Shared density prop for Input, Select, and Textarea." },
+            { name: "variant", type: "default | ghost", defaultValue: "default", description: "Input visual variant. Ghost is useful in toolbar/search contexts." },
+          ]}
+        />
+      }
+    >
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <Panel title="Text inputs" className="space-y-6">
+          <Input label="Default" placeholder="Filter events..." />
+          <Input label="Error" placeholder="hogql query" error="Malformed identifier near line 12" />
+          <Input label="Ghost toolbar field" type="search" placeholder="Search..." variant="ghost" />
+          <Input label="Disabled" placeholder="Unavailable" disabled />
+        </Panel>
+
+        <Panel title="Select & textarea" className="space-y-6">
+          <Select label="Environment" defaultValue="prod">
+            <option value="prod">Production</option>
+            <option value="staging">Staging</option>
+            <option value="dev">Development</option>
+          </Select>
+
+          <Textarea label="Description" placeholder="Explain the rollout..." />
+
+          <Checkbox label="Autocapture pageviews" defaultChecked />
+          <Checkbox label="Record console logs (disabled product)" disabled />
+
+          <div className="flex flex-col gap-2">
+            <Radio name="cohort" label="Dynamic cohort" defaultChecked />
+            <Radio name="cohort" label="Static upload" />
+          </div>
+
+          <Toggle label="Session replay" defaultChecked />
+          <Toggle label="Error tracking (disabled)" disabled />
+        </Panel>
+
+        <Panel title="Range, rating, uploads" className="space-y-6 lg:col-span-2">
+          <Range label="Sample rate" min={0} max={100} defaultValue={42} minLabel="Off" valueLabel="42%" maxLabel="Full" wrapperClassName="max-w-xl" />
+
+          <Rating label="Satisfaction" value={4} />
+
+          <FileUpload label="Source map archive" prompt="Drop tarball or browse" wrapperClassName="max-w-xl" />
+
+          <SearchGroup label="Grouped search" submitLabel="Search records" />
+        </Panel>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/HoverCardShowcase.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Badge, Button, ComponentDocs, HoverCard, ShowcaseWrapper } from "@/components/ui";
+
+export default function HoverCardShowcase() {
+  const code = `import { Badge, Button, HoverCard } from "the-old-ui";
+
+<div className="ph-panel flex justify-center py-12">
+  <HoverCard trigger={<Button>Hover me</Button>}>
+    <div className="space-y-2">
+      <h4 className="font-semibold text-ph-ink">User Profile</h4>
+      <p className="text-sm text-ph-subtle">This is a hover card with rich content that appears on hover.</p>
+      <div className="flex gap-2 pt-2">
+        <Badge variant="brand">Admin</Badge>
+        <Badge variant="neutral">Pro</Badge>
+      </div>
+    </div>
+  </HoverCard>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Hover Card"
+      description="Rich hover disclosure for contextual details."
+      code={code}
+      filename="HoverCardExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "trigger", type: "ReactNode", description: "Element users hover or focus." },
+            { name: "children", type: "ReactNode", description: "Content shown in the card." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel flex justify-center py-12">
+        <HoverCard trigger={<Button>Hover me</Button>}>
+          <div className="space-y-2">
+            <h4 className="font-semibold text-ph-ink">User Profile</h4>
+            <p className="text-sm text-ph-subtle">This is a hover card with rich content that appears on hover.</p>
+            <div className="flex gap-2 pt-2">
+              <Badge variant="brand">Admin</Badge>
+              <Badge variant="neutral">Pro</Badge>
+            </div>
+          </div>
+        </HoverCard>
+      </div>
+    </ShowcaseWrapper>
+  );
+}