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

package/src/components/sections/ProductLayoutsShowcase.tsx

@@ -0,0 +1,138 @@
+import {
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
+  Badge,
+  Button,
+  Checkbox,
+  Input,
+  LoadingState,
+  Panel,
+  SettingsLayout,
+  SettingsNav,
+  ShowcaseWrapper,
+  Toggle,
+} from "@/components/ui";
+import { IconDataReel, IconMail, IconPerson, IconTuning } from "@/components/icons";
+
+const settingsGroups = [
+  {
+    label: "Workspace",
+    items: [
+      { id: "general", label: "General", href: "#settings", icon: <IconTuning className="h-4 w-4" aria-hidden />, active: true },
+      { id: "members", label: "Members", href: "#settings", icon: <IconPerson className="h-4 w-4" aria-hidden />, badge: "12" },
+    ],
+  },
+  {
+    label: "Data",
+    items: [
+      { id: "sources", label: "Sources", href: "#settings", icon: <IconDataReel className="h-4 w-4" aria-hidden /> },
+      { id: "email", label: "Email reports", href: "#settings", icon: <IconMail className="h-4 w-4" aria-hidden /> },
+    ],
+  },
+] as const;
+
+export default function ProductLayoutsShowcase() {
+  const authCode = `import { AuthCard, AuthDivider, AuthLayout, Button, Input } from "@xenide-io/the-old-ui-theme";
+
+<AuthLayout brand="Acme Analytics" footer="Privacy · Terms">
+  <AuthCard title="Welcome back" description="Sign in to your workspace">
+    <Input label="Work email" type="email" autoComplete="email" />
+    <Input label="Password" type="password" autoComplete="current-password" />
+    <Button variant="primary" className="w-full">Sign in</Button>
+    <AuthDivider />
+    <Button variant="secondary" className="w-full">Continue with SSO</Button>
+  </AuthCard>
+</AuthLayout>`;
+
+  const settingsCode = `import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
+
+<SettingsLayout
+  title="Workspace settings"
+  navigation={<SettingsNav groups={settingsGroups} />}
+>
+  {/* Route-specific settings panels */}
+</SettingsLayout>`;
+
+  return (
+    <>
+      <ShowcaseWrapper
+        id="auth"
+        title="Authentication layouts"
+        description="Focused sign-in, verification, recovery, and loading shells. Authentication state and provider logic stay application-owned."
+        code={authCode}
+        filename="SignInPage.tsx"
+      >
+        <div className="grid gap-5 xl:grid-cols-[1.35fr,0.65fr]">
+          <AuthLayout
+            className="min-h-[34rem]"
+            brand={<span>The Old UI</span>}
+            aside={
+              <div className="flex h-full flex-col justify-between">
+                <strong className="text-xl">Understand every product decision.</strong>
+                <p className="max-w-xs text-sm opacity-80">One focused authentication step at a time, with room for product context.</p>
+              </div>
+            }
+            footer={<>Privacy · Terms · Status</>}
+          >
+            <AuthCard
+              title="Welcome back"
+              description="Sign in to your workspace"
+              footer={<>New to the workspace? <a href="#auth" className="font-medium text-ph-brand">Create an account</a></>}
+            >
+              <Input label="Work email" type="email" autoComplete="email" placeholder="you@company.com" />
+              <Input label="Password" type="password" autoComplete="current-password" />
+              <div className="flex items-center justify-between gap-3">
+                <Checkbox label="Remember me" />
+                <a href="#auth" className="text-xs font-medium text-ph-brand">Forgot password?</a>
+              </div>
+              <Button variant="primary" className="w-full">Sign in</Button>
+              <AuthDivider />
+              <Button variant="secondary" className="w-full">Continue with SSO</Button>
+            </AuthCard>
+          </AuthLayout>
+
+          <div className="grid gap-5">
+            <AuthCard title="Check your inbox" description="We sent a six-digit code to alex@company.com">
+              <Input label="Verification code" inputMode="numeric" autoComplete="one-time-code" placeholder="000000" />
+              <Button variant="primary" className="w-full">Verify email</Button>
+            </AuthCard>
+            <AuthCard title="Preparing workspace" description="Authentication completed successfully.">
+              <LoadingState
+                label="Preparing your workspace"
+                title="Loading your workspace"
+                description="Connecting data sources and restoring your last view."
+                variant="dots"
+              />
+            </AuthCard>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="settings"
+        title="Settings layout"
+        description="Route-friendly grouped navigation, mobile disclosure menu, page actions, and flexible settings content."
+        code={settingsCode}
+        filename="SettingsPage.tsx"
+      >
+        <SettingsLayout
+          title="Workspace settings"
+          description="Manage identity, data collection, and workspace defaults."
+          actions={<Button variant="primary" size="sm">Save changes</Button>}
+          navigation={<SettingsNav groups={settingsGroups} />}
+        >
+          <Panel title="Workspace identity" description="Shown in navigation, reports, and invitations." className="space-y-4">
+            <Input label="Workspace name" defaultValue="Acme Analytics" />
+            <Input label="Workspace URL" defaultValue="app.example.com/acme" />
+          </Panel>
+          <Panel title="Collection defaults" className="space-y-4">
+            <Toggle label="Capture page views automatically" defaultChecked />
+            <Toggle label="Mask sensitive text inputs" defaultChecked />
+            <div><Badge variant="warning">Restart required</Badge></div>
+          </Panel>
+        </SettingsLayout>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/ProgressShowcase.tsx

@@ -0,0 +1,82 @@
+import {
+  ComponentDocs,
+  Loader,
+  LoadingState,
+  Progress,
+  ShowcaseWrapper,
+  Skeleton,
+} from "@/components/ui";
+
+export default function ProgressShowcase() {
+  const code = `import { Loader, LoadingState, Progress, Skeleton } from "@xenide-io/the-old-ui-theme";
+
+<Progress label="Ingest backlog" value={72} showPercentage />
+<Loader variant="spinner" label="Refreshing insight" />
+<Loader variant="dots" label="Loading events" />
+<Loader variant="pulse" label="Connecting" />
+<LoadingState title="Loading dashboard" description="Restoring the latest results." />
+<div role="status" aria-label="Loading account">
+  <Skeleton shape="title" />
+  <Skeleton shape="text" />
+  <Skeleton shape="short-text" />
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Progress & loading"
+      description="Determinate progress, compact action loaders, full-region loading states, and structure-matching cold-load skeletons."
+      code={code}
+      filename="LoadingExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "Loader.variant", type: "spinner | dots | pulse", defaultValue: "spinner", description: "Indeterminate treatment for compact asynchronous work." },
+            { name: "Loader.size", type: "sm | md | lg", defaultValue: "md", description: "Visual loader size." },
+            { name: "LoadingState", type: "LoadingStateProps", description: "Centered region state with one accessible status message." },
+            { name: "Skeleton.shape", type: "title | text | short-text | avatar | button | block", defaultValue: "text", description: "Decorative skeleton matching expected content geometry." },
+            { name: "Progress.value", type: "number", description: "Real determinate progress value." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-6">
+        <div className="ph-panel space-y-6">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Determinate progress</h3>
+          <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
+          <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
+          <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          {(["spinner", "dots", "pulse"] as const).map((variant) => (
+            <div key={variant} className="ph-panel flex min-h-28 flex-col items-center justify-center gap-3">
+              <Loader variant={variant} size="lg" label={`${variant} loader`} />
+              <code className="ph-kbd">{variant}</code>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div className="ph-panel p-0">
+            <LoadingState
+              label="Loading dashboard"
+              title="Loading dashboard"
+              description="Restoring the latest results without pretending progress is measurable."
+            />
+          </div>
+          <div className="ph-panel" role="status" aria-label="Loading account summary">
+            <div className="mb-5 flex items-center gap-3">
+              <Skeleton shape="avatar" />
+              <div className="min-w-0 flex-1">
+                <Skeleton shape="title" className="mb-2 w-1/2" />
+                <Skeleton shape="short-text" className="w-2/3" />
+              </div>
+            </div>
+            <Skeleton shape="block" className="mb-4" />
+            <div className="flex justify-end"><Skeleton shape="button" /></div>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/SegmentedControlShowcase.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { ComponentDocs, SegmentedControl, ShowcaseWrapper } from "@/components/ui";
+import { IconGridView, IconListView } from "@/components/icons";
+
+export default function SegmentedControlShowcase() {
+  const [view, setView] = useState("grid");
+
+  const options = [
+    { value: "grid", label: "Grid", icon: <IconGridView className="h-4 w-4" /> },
+    { value: "list", label: "List", icon: <IconListView className="h-4 w-4" /> },
+  ];
+
+  const code = `import { SegmentedControl } from "the-old-ui";
+import { IconGridView, IconListView } from "the-old-ui";
+
+<div className="ph-panel">
+  <SegmentedControl options={options} value={view} onChange={setView} />
+  <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
+    Selected: <span className="font-semibold text-ph-ink">{view}</span>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Segmented Control"
+      description="Compact controlled switch for mutually exclusive display modes."
+      code={code}
+      filename="SegmentedControlExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "options", type: "{ value; label; icon? }[]", description: "Segments to render." },
+            { name: "value", type: "string", description: "Currently selected value." },
+            { name: "onChange", type: "(value: string) => void", description: "Called when a segment is selected." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <SegmentedControl options={options} value={view} onChange={setView} />
+        <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
+          Selected: <span className="font-semibold text-ph-ink">{view}</span>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/SetupThemeShowcase.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { CodeBlock, H3, P, Panel, ThemeSwitcher } from "@/components/ui";
+import { THEMES } from "@/themes";
+
+const themePairs = [
+  { name: "HedgeHog", light: "hedgehog-light", dark: "hedgehog-dark" },
+  { name: "Sheets", light: "sheets", dark: "sheets-dark" },
+  { name: "Note", light: "note", dark: "note-dark" },
+  { name: "Presentation", light: "presentation", dark: "presentation-dark" },
+  { name: "Socials", light: "socials", dark: "socials-dark" },
+  { name: "Chats", light: "chats-light", dark: "chats-dark" },
+  { name: "Catppuccin", light: "catppuccin-light", dark: "catppuccin-dark" },
+  { name: "Xenide", light: "xenide-light", dark: "xenide-dark" },
+  { name: "GitHub", light: "github-light", dark: "github-dark" },
+  { name: "Rose Pine", light: "rosepine-light", dark: "rosepine-dark" },
+  { name: "TurtleTime", light: "turtletime", dark: "turtletime-dark" },
+  { name: "Bikini Bottom", light: "bikini-bottom", dark: "bikini-bottom-dark" },
+  { name: "Notion", light: "notion", dark: "notion-dark" },
+] as const;
+
+const guideTokens = [
+  { label: "canvas", token: "--ph-canvas", text: "text-ph-ink" },
+  { label: "surface", token: "--ph-surface", text: "text-ph-ink" },
+  { label: "muted", token: "--ph-muted", text: "text-ph-ink" },
+  { label: "toolbar", token: "--ph-toolbar", text: "text-ph-ink" },
+  { label: "border", token: "--ph-border", text: "text-ph-ink" },
+  { label: "accent", token: "--ph-accent", text: "text-white" },
+  { label: "blue", token: "--ph-blue", text: "text-white" },
+  { label: "purple", token: "--ph-purple", text: "text-white" },
+  { label: "success", token: "--ph-success", text: "text-white" },
+  { label: "warning", token: "--ph-warning", text: "text-white" },
+  { label: "danger", token: "--ph-danger", text: "text-white" },
+  { label: "info", token: "--ph-info", text: "text-white" },
+] as const;
+
+const dataTokens = [1, 2, 3, 4, 5, 6, 7].map((item) => ({
+  label: `data ${item}`,
+  token: `--ph-data-${item}`,
+  text: "text-white",
+}));
+
+const installCode = `bun add the-old-ui
+# or
+npm install the-old-ui`;
+
+const layoutCode = `// app/layout.tsx
+import "the-old-ui/styles.css";
+import { THEME_INIT_SCRIPT, ThemeManager } from "the-old-ui";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-theme="hedgehog-light" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+      </head>
+      <body>
+        <ThemeManager>{children}</ThemeManager>
+      </body>
+    </html>
+  );
+}`;
+
+const tailwindCode = `// tailwind.config.ts
+import theOldUiPreset from "the-old-ui/tailwind-preset";
+
+export default {
+  presets: [theOldUiPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./node_modules/the-old-ui/dist/**/*.{js,mjs}",
+  ],
+};`;
+
+const switchCode = `import { ThemeSwitcher, persistTheme } from "the-old-ui";
+
+<ThemeSwitcher />
+
+// Or switch manually
+persistTheme("sheets-dark");`;
+
+const customThemeCode = `/* app/globals.css */
+@import "the-old-ui/styles.css";
+
+[data-theme="my-theme-light"] {
+  color-scheme: light;
+
+  --ph-canvas: #f8f5ef;
+  --ph-surface: #ffffff;
+  --ph-muted: #eee8dd;
+  --ph-toolbar: #e5dccd;
+  --ph-border: #d7cbb8;
+  --ph-border-strong: #a99b87;
+
+  --ph-text-primary: #15110c;
+  --ph-text-secondary: #4d4337;
+  --ph-text-tertiary: #796f63;
+
+  --ph-accent: #f97316;
+  --ph-accent-hover: #ea580c;
+  --ph-blue: #2563eb;
+  --ph-purple: #7c3aed;
+  --ph-success: #15803d;
+  --ph-warning: #b45309;
+  --ph-danger: #dc2626;
+  --ph-info: #2563eb;
+}
+
+[data-theme="my-theme-dark"] {
+  color-scheme: dark;
+
+  --ph-canvas: #11100e;
+  --ph-surface: #191713;
+  --ph-muted: #242018;
+  --ph-toolbar: #2e281f;
+  --ph-border: #443a2b;
+  --ph-border-strong: #7a6a54;
+
+  --ph-text-primary: #fff7ed;
+  --ph-text-secondary: #d8c8b6;
+  --ph-text-tertiary: #a89985;
+
+  --ph-accent: #fb923c;
+  --ph-accent-hover: #fdba74;
+  --ph-blue: #60a5fa;
+  --ph-purple: #a78bfa;
+  --ph-success: #4ade80;
+  --ph-warning: #facc15;
+  --ph-danger: #f87171;
+  --ph-info: #60a5fa;
+}`;
+
+const registryCode = `// Add to src/themes/registry.ts if this repo should show it in ThemeSwitcher
+{
+  id: "my-theme-light",
+  name: "My Theme Light",
+  description: "Custom light palette.",
+  colorScheme: "light",
+  group: "Custom",
+},
+{
+  id: "my-theme-dark",
+  name: "My Theme Dark",
+  description: "Custom dark palette.",
+  colorScheme: "dark",
+  group: "Custom",
+}`;
+
+export default function SetupThemeShowcase() {
+  const [activeTheme, setActiveTheme] = useState("hedgehog-light");
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const update = () => setActiveTheme(root.getAttribute("data-theme") || "hedgehog-light");
+    update();
+
+    const observer = new MutationObserver(update);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const activeThemeCode = useMemo(() => {
+    const theme = THEMES.find((item) => item.id === activeTheme);
+    return `// Current selected theme in this demo\n${JSON.stringify({
+      id: activeTheme,
+      name: theme?.name ?? activeTheme,
+      colorScheme: theme?.colorScheme ?? "light",
+      group: theme?.group ?? "Custom",
+    }, null, 2)}`;
+  }, [activeTheme]);
+
+  const themeListCode = useMemo(() => {
+    return `export const themePairs = ${JSON.stringify(themePairs, null, 2)} as const;`;
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <Panel className="space-y-4">
+        <H3>Setup</H3>
+        <P tone="subtle">
+          This demo is also the docs. A consuming app imports the package CSS once, adds the Tailwind preset, then switches palettes through <code className="ph-kbd">html[data-theme]</code>.
+        </P>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={installCode} filename="install.sh" language="bash" />
+          <CodeBlock code={tailwindCode} filename="tailwind.config.ts" />
+        </div>
+        <CodeBlock code={layoutCode} filename="app/layout.tsx" />
+      </Panel>
+
+      <Panel className="space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <H3>Theme Switching</H3>
+            <P tone="subtle">Each default palette is a light/dark pair. Pick one below and copy the active theme ID.</P>
+          </div>
+          <ThemeSwitcher />
+        </div>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={activeThemeCode} filename="current-theme.ts" />
+          <CodeBlock code={switchCode} filename="ThemeSwitch.tsx" />
+        </div>
+      </Panel>
+
+      <Panel className="space-y-4">
+        <H3>Default Theme Pairs</H3>
+        <P tone="subtle">Use these IDs with <code className="ph-kbd">data-theme</code> or <code className="ph-kbd">persistTheme()</code>.</P>
+        <CodeBlock code={themeListCode} filename="theme-pairs.ts" />
+      </Panel>
+
+      <Panel className="space-y-5">
+        <div>
+          <H3>Theme Color Guide</H3>
+          <P tone="subtle">
+            Every built-in theme is rendered below with its own <code className="ph-kbd">data-theme</code> attribute. These swatches are the guide for what each token becomes in that theme.
+          </P>
+        </div>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {THEMES.map((theme) => (
+            <div
+              key={theme.id}
+              data-theme={theme.id}
+              className="rounded-xl border border-ph-border bg-ph-canvas p-4 shadow-ph"
+            >
+              <div className="mb-3 flex items-baseline justify-between gap-3">
+                <div>
+                  <h4 className="font-semibold text-ph-ink">{theme.name}</h4>
+                  <p className="text-xs text-ph-mutedtext">{theme.id}</p>
+                </div>
+                <span className="rounded-full border border-ph-border bg-ph-surface px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-ph-mutedtext">
+                  {theme.colorScheme}
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+                {[...guideTokens, ...dataTokens].map((item) => (
+                  <div
+                    key={item.token}
+                    className={`rounded-lg border border-ph-border p-2 ${item.text}`}
+                    style={{ background: `var(${item.token})` }}
+                  >
+                    <div className="text-[10px] font-bold uppercase tracking-wide">{item.label}</div>
+                    <div className="mt-1 truncate font-mono text-[9px] opacity-80">{item.token}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Panel>
+
+      <Panel className="space-y-4">
+        <H3>Custom Light & Dark Theme</H3>
+        <P tone="subtle">Custom themes are DaisyUI-style: define one light token block and one dark token block. Components read semantic tokens, not hardcoded colours.</P>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={customThemeCode} filename="custom-theme.css" language="css" />
+          <CodeBlock code={registryCode} filename="registry.ts" />
+        </div>
+      </Panel>
+    </div>
+  );
+}

package/src/components/sections/StackShowcase.tsx

@@ -0,0 +1,33 @@
+import { ShowcaseWrapper } from "@/components/ui";
+
+export default function StackShowcase() {
+  const code = `
+
+<div className="rounded-xl border border-ph-border bg-ph-muted p-10">
+  <div className="relative mx-auto h-44 w-48">
+    <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
+    <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
+      Replay
+    </div>
+    <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
+      <span className="text-sm font-bold text-ph-brand">Trends insight</span>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Stacked surfaces" code={code} filename="StackExample.tsx">
+      <div className="rounded-xl border border-ph-border bg-ph-muted p-10">
+        <div className="relative mx-auto h-44 w-48">
+          <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
+          <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
+            Replay
+          </div>
+          <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
+            <span className="text-sm font-bold text-ph-brand">Trends insight</span>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}