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

package/src/components/sections/DashboardShowcase.tsx

@@ -1,191 +0,0 @@
-import { IconAreaChart, IconArrowUp, IconCohort, IconPlus } from "@/components/icons";
-import {
-  DashboardFiltersBar,
-  DashboardGrid,
-  DashboardInsightPlaceholder,
-  DashboardKpiCard,
-  DashboardToolbar,
-  DashboardWell,
-  InsightMiniCard,
-} from "@/components/dashboard";
-import { Button, ShowcaseWrapper } from "@/components/ui";
-
-const insightCards = [
-  {
-    title: "Weekly active users",
-    subtitle: "Last 14 days · product analytics",
-    ribbonColour: "var(--ph-product-product-analytics)",
-    heights: [40, 55, 48, 62, 58, 70, 52, 45, 68, 72, 65, 80, 75, 88],
-  },
-  {
-    title: "Session length",
-    subtitle: "Median minutes · replay cohort",
-    ribbonColour: "var(--ph-product-session-replay)",
-    heights: [52, 48, 45, 50, 55, 60, 58, 54, 50, 48, 55, 60, 58, 62],
-  },
-  {
-    title: "Flag evaluations",
-    subtitle: "Per minute · infrastructure",
-    ribbonColour: "var(--ph-product-feature-flags)",
-    heights: [30, 35, 42, 38, 45, 50, 48, 52, 55, 58, 54, 50, 48, 55],
-  },
-] as const;
-
-export default function DashboardShowcase() {
-  const code = `import { IconAreaChart, IconArrowUp, IconCohort, IconPlus } from "the-old-ui";
-import { DashboardFiltersBar, DashboardGrid, DashboardInsightPlaceholder, DashboardKpiCard, DashboardToolbar, DashboardWell, InsightMiniCard } from "the-old-ui";
-import { Button } from "the-old-ui";
-
-<DashboardWell className="space-y-6">
-  <DashboardToolbar
-    title="Marketing overview"
-    description="Mock layout · spacing and elevation only"
-    actions={
-      <Button variant="secondary" size="sm">
-        Edit layout
-      </Button>
-    }
-  />
-
-  <DashboardFiltersBar className="text-xs">
-    <span className="font-semibold text-ph-ink">Last 14 days</span>
-    <span className="text-ph-mutedtext">·</span>
-    <span>Global cohort</span>
-    <Button variant="ghost" size="xs" className="rounded-md px-2">
-      Breakdown
-    </Button>
-  </DashboardFiltersBar>
-
-  <div className="grid gap-4 md:grid-cols-3">
-    <DashboardKpiCard
-      icon={<IconArrowUp className="text-ph-brand" aria-hidden />}
-      label="Event volume"
-      value={<span className="text-ph-brand tabular-nums">2.6M</span>}
-      footer={
-        <>
-          <span className="font-semibold text-emerald-700">▲ 21%</span> vs previous window
-        </>
-      }
-    />
-    <DashboardKpiCard
-      icon={<IconCohort className="text-ph-blue" aria-hidden />}
-      label="Weekly active users"
-      value={<span className="text-ph-blue tabular-nums">12.8K</span>}
-      footer="Stable vs trailing 28-day baseline"
-    />
-    <DashboardKpiCard
-      icon={<IconAreaChart className="text-ph-purple" aria-hidden />}
-      label="Experiments exposing"
-      value={<span className="text-ph-purple tabular-nums">4</span>}
-      footer="Flags + multivariates counted"
-    />
-  </div>
-
-  <DashboardGrid>
-    {insightCards.map((card) => (
-      <InsightMiniCard
-        key={card.title}
-        title={card.title}
-        subtitle={card.subtitle}
-        ribbonColour={card.ribbonColour}
-        heights={card.heights}
-      />
-    ))}
-  </DashboardGrid>
-
-  <div className="grid gap-4 md:grid-cols-2">
-    <InsightMiniCard
-      title="Activation funnel"
-      subtitle="Mock · drop-off by step"
-      ribbonColour="var(--ph-product-experiments)"
-      heights={[88, 72, 58, 44, 32, 28, 24, 22, 20, 18, 16, 15, 14, 13]}
-    />
-    <DashboardInsightPlaceholder>
-      <IconPlus className="h-8 w-8 text-ph-mutedtext group-hover:text-ph-brand" aria-hidden />
-      <span className="text-sm font-medium text-ph-subtle group-hover:text-ph-ink">Add insight</span>
-      <span className="max-w-[14rem] text-xs text-ph-mutedtext">Opens the same picker pattern your app uses for new tiles.</span>
-    </DashboardInsightPlaceholder>
-  </div>
-</DashboardWell>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Dashboard shells"
-      description="Inset canvas (DashboardWell) and raised insight tiles (InsightShell / InsightMiniCard) mirror how the PostHog app frames dashboards."
-      code={code}
-      filename="DashboardExample.tsx"
-    >
-      <DashboardWell className="space-y-6">
-        <DashboardToolbar
-          title="Marketing overview"
-          description="Mock layout · spacing and elevation only"
-          actions={
-            <Button variant="secondary" size="sm">
-              Edit layout
-            </Button>
-          }
-        />
-
-        <DashboardFiltersBar className="text-xs">
-          <span className="font-semibold text-ph-ink">Last 14 days</span>
-          <span className="text-ph-mutedtext">·</span>
-          <span>Global cohort</span>
-          <Button variant="ghost" size="xs" className="rounded-md px-2">
-            Breakdown
-          </Button>
-        </DashboardFiltersBar>
-
-        <div className="grid gap-4 md:grid-cols-3">
-          <DashboardKpiCard
-            icon={<IconArrowUp className="text-ph-brand" aria-hidden />}
-            label="Event volume"
-            value={<span className="text-ph-brand tabular-nums">2.6M</span>}
-            footer={
-              <>
-                <span className="font-semibold text-emerald-700">▲ 21%</span> vs previous window
-              </>
-            }
-          />
-          <DashboardKpiCard
-            icon={<IconCohort className="text-ph-blue" aria-hidden />}
-            label="Weekly active users"
-            value={<span className="text-ph-blue tabular-nums">12.8K</span>}
-            footer="Stable vs trailing 28-day baseline"
-          />
-          <DashboardKpiCard
-            icon={<IconAreaChart className="text-ph-purple" aria-hidden />}
-            label="Experiments exposing"
-            value={<span className="text-ph-purple tabular-nums">4</span>}
-            footer="Flags + multivariates counted"
-          />
-        </div>
-
-        <DashboardGrid>
-          {insightCards.map((card) => (
-            <InsightMiniCard
-              key={card.title}
-              title={card.title}
-              subtitle={card.subtitle}
-              ribbonColour={card.ribbonColour}
-              heights={card.heights}
-            />
-          ))}
-        </DashboardGrid>
-
-        <div className="grid gap-4 md:grid-cols-2">
-          <InsightMiniCard
-            title="Activation funnel"
-            subtitle="Mock · drop-off by step"
-            ribbonColour="var(--ph-product-experiments)"
-            heights={[88, 72, 58, 44, 32, 28, 24, 22, 20, 18, 16, 15, 14, 13]}
-          />
-          <DashboardInsightPlaceholder>
-            <IconPlus className="h-8 w-8 text-ph-mutedtext group-hover:text-ph-brand" aria-hidden />
-            <span className="text-sm font-medium text-ph-subtle group-hover:text-ph-ink">Add insight</span>
-            <span className="max-w-[14rem] text-xs text-ph-mutedtext">Opens the same picker pattern your app uses for new tiles.</span>
-          </DashboardInsightPlaceholder>
-        </div>
-      </DashboardWell>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/StatShowcase.tsx

@@ -1,129 +0,0 @@
-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>
-  );
-}