@xenide-io/the-old-ui-theme 0.4.3 → 0.4.6

package/src/components/sections/ModalShowcase.tsx

@@ -1,211 +0,0 @@
-"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 { Button, IconCheck, IconClose, IconPlus, Input, Modal, Select, Textarea } from "@xenide-io/the-old-ui-theme";
-
-<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-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
-        <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-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
-        <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." },
-            { name: "closeOnOutsideClick", type: "boolean", defaultValue: "true", description: "Controls pointer dismissal outside the dialog." },
-            { name: "closeOnEscape", type: "boolean", defaultValue: "true", description: "Controls Escape-key dismissal." },
-          ]}
-        />
-      }
-    >
-      <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-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
-              <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-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
-              <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>
-  );
-}

package/src/components/sections/NavigationShowcase.tsx

@@ -1,199 +0,0 @@
-"use client";
-
-import { IconBell, IconPerson } from "@/components/icons";
-import { Button, DropdownItem, DropdownMenu, SearchInput, ShowcaseWrapper } from "@/components/ui";
-
-export default function NavigationShowcase() {
-  const code = `import { IconBell, IconPerson } from "the-old-ui";
-import { Button, DropdownItem, DropdownMenu, SearchInput } from "the-old-ui";
-
-<div className="space-y-8">
-  <div className="ph-panel">
-    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
-    <div className="ph-navbar-demo justify-between gap-4">
-      <span className="text-lg font-bold text-ph-brand">posthog</span>
-      <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
-        <SearchInput
-          label="Jump to"
-          hideLabel
-          shortcut="Cmd K"
-          placeholder="Jump to…"
-          density="compact"
-        />
-        <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
-          <IconBell className="h-5 w-5 text-ph-mutedtext" />
-          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
-        </Button>
-        <DropdownMenu
-          align="end"
-          aria-label="Account menu"
-          trigger={
-            <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
-              <IconPerson className="h-5 w-5" aria-hidden />
-            </span>
-          }
-        >
-          <DropdownItem>Personal API keys</DropdownItem>
-          <DropdownItem>Organisation settings</DropdownItem>
-        </DropdownMenu>
-      </div>
-    </div>
-  </div>
-
-  <div className="ph-panel flex gap-10">
-    <div>
-      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
-      <ul className="w-52 space-y-1 text-sm font-medium">
-        <li>
-          <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
-            Home
-          </a>
-        </li>
-        <li>
-          <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
-            Data pipeline
-          </a>
-        </li>
-        <li>
-          <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
-            <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
-            <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
-              <li>
-                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
-                  Sources
-                </a>
-              </li>
-              <li>
-                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
-                  Views
-                </a>
-              </li>
-            </ul>
-          </details>
-        </li>
-      </ul>
-    </div>
-
-    <div className="flex-1">
-      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
-      <ol className="ph-steps">
-        <li className="flex flex-col items-center gap-2">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
-            1
-          </span>
-          <span>Install snippet</span>
-        </li>
-        <li className="flex flex-col items-center gap-2 opacity-60">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
-            2
-          </span>
-          <span>Send test event</span>
-        </li>
-        <li className="flex flex-col items-center gap-2 opacity-60">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
-            3
-          </span>
-          <span>Invite team</span>
-        </li>
-      </ol>
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Navigation chrome" code={code} filename="NavigationExample.tsx">
-      <div className="space-y-8">
-        <div className="ph-panel">
-          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
-          <div className="ph-navbar-demo justify-between gap-4">
-            <span className="text-lg font-bold text-ph-brand">posthog</span>
-            <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
-              <SearchInput
-                label="Jump to"
-                hideLabel
-                shortcut="Cmd K"
-                placeholder="Jump to…"
-                density="compact"
-              />
-              <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
-                <IconBell className="h-5 w-5 text-ph-mutedtext" />
-                <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
-              </Button>
-              <DropdownMenu
-                align="end"
-                aria-label="Account menu"
-                trigger={
-                  <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
-                    <IconPerson className="h-5 w-5" aria-hidden />
-                  </span>
-                }
-              >
-                <DropdownItem>Personal API keys</DropdownItem>
-                <DropdownItem>Organisation settings</DropdownItem>
-              </DropdownMenu>
-            </div>
-          </div>
-        </div>
-
-        <div className="ph-panel flex gap-10">
-          <div>
-            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
-            <ul className="w-52 space-y-1 text-sm font-medium">
-              <li>
-                <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
-                  Home
-                </a>
-              </li>
-              <li>
-                <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
-                  Data pipeline
-                </a>
-              </li>
-              <li>
-                <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
-                  <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
-                  <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
-                    <li>
-                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
-                        Sources
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
-                        Views
-                      </a>
-                    </li>
-                  </ul>
-                </details>
-              </li>
-            </ul>
-          </div>
-
-          <div className="flex-1">
-            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
-            <ol className="ph-steps">
-              <li className="flex flex-col items-center gap-2">
-                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
-                  1
-                </span>
-                <span>Install snippet</span>
-              </li>
-              <li className="flex flex-col items-center gap-2 opacity-60">
-                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
-                  2
-                </span>
-                <span>Send test event</span>
-              </li>
-              <li className="flex flex-col items-center gap-2 opacity-60">
-                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
-                  3
-                </span>
-                <span>Invite team</span>
-              </li>
-            </ol>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}