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

package/src/components/charts/index.ts

@@ -1,8 +1,9 @@
-export {
-  HogTrendLineChart,
-  InsightDoughnutChart,
-  InsightHorizontalBarChart,
-  InsightPolarAreaChart,
-  InsightStackedBarChart,
-  InsightVerticalBarChart,
-} from "@/components/charts/ph-insight-charts";
+"use client";
+
+export { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart } from "./quill";
+export type { TimeSeriesLineChartProps, TimeSeriesLineChartSeries } from "./quill";
+export type { BarChartProps, BarChartSeries } from "./quill";
+export type { PieChartProps, PieChartSlice } from "./quill";
+export type { SparklineProps } from "./quill";
+export type { MetricCardProps } from "./quill";
+export type { FunnelChartProps, FunnelStep } from "./quill/FunnelChart";

package/src/components/charts/quill/BarChart.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface BarChartSeries {
+  key: string;
+  label: string;
+  data: number[];
+  color?: string;
+}
+
+export interface BarChartProps {
+  series: BarChartSeries[];
+  labels: string[];
+  className?: string;
+  height?: number;
+}
+
+export function BarChart({ series, labels, className, height = 280 }: BarChartProps) {
+  const tokens = useChartTokens();
+  const groupCount = labels.length;
+  const barCount = series.length;
+
+  const { maxVal, chartData } = useMemo(() => {
+    let mx = 0;
+    const flat = series.flatMap((s) => s.data);
+    for (const v of flat) if (v > mx) mx = v;
+    return {
+      maxVal: mx || 1,
+      chartData: series.map((s, i) => ({
+        label: s.label,
+        color: s.color ?? tokens.series[i % tokens.series.length],
+        values: s.data,
+      })),
+    };
+  }, [series, tokens.series]);
+
+  const padding = { top: 16, right: 8, bottom: 24, left: 8 };
+  const innerW = 400 - padding.left - padding.right;
+  const innerH = height - padding.top - padding.bottom;
+  const groupW = innerW / groupCount;
+  const barW = Math.max(4, (groupW * 0.7) / barCount);
+  const gap = groupW * 0.15;
+
+  return (
+    <div className={cn("relative w-full", className)} style={{ height }}>
+      <svg viewBox={`0 0 400 ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid meet" suppressHydrationWarning>
+        {chartData.map((bar, bi) =>
+          bar.values.map((v, li) => {
+            const x = padding.left + li * groupW + gap / 2 + bi * barW;
+            const barH = (v / maxVal) * (innerH - 4);
+            const y = padding.top + innerH - barH;
+            return (
+              <rect
+                key={`${bi}-${li}`}
+                x={x}
+                y={y}
+                width={barW}
+                height={barH}
+                fill={bar.color}
+                rx={2}
+              >
+                <title>{`${bar.label}: ${v}`}</title>
+              </rect>
+            );
+          })
+        )}
+        {labels.map((l, i) => (
+          <text
+            key={l}
+            x={padding.left + i * groupW + groupW / 2}
+            y={height - 4}
+            textAnchor="middle"
+            className="fill-ph-mutedtext"
+            fontSize="10"
+          >
+            {l}
+          </text>
+        ))}
+      </svg>
+    </div>
+  );
+}

package/src/components/charts/quill/FunnelChart.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface FunnelStep {
+  label: string;
+  count: number;
+}
+
+export interface FunnelChartProps {
+  steps: FunnelStep[];
+  className?: string;
+}
+
+export function FunnelChart({ steps, className }: FunnelChartProps) {
+  const tokens = useChartTokens();
+
+  const maxCount = useMemo(() => Math.max(...steps.map((s) => s.count)), [steps]);
+
+  return (
+    <div className={cn("space-y-2", className)} suppressHydrationWarning>
+      {steps.map((step, i) => {
+        const pct = (step.count / maxCount) * 100;
+        const prev = i > 0 ? steps[i - 1].count : step.count;
+        const dropoff = prev > 0 ? ((prev - step.count) / prev) * 100 : 0;
+
+        return (
+          <div key={step.label} className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <span className="font-medium text-ph-ink">{step.label}</span>
+              <span className="tabular-nums text-ph-subtle">{step.count.toLocaleString()}</span>
+            </div>
+            <div className="relative h-8 overflow-hidden rounded-md" style={{ background: tokens.muted }}>
+              <div
+                className="h-full rounded-md transition-all duration-500"
+                style={{ width: `${pct}%`, background: i === 0 ? tokens.series[0] : tokens.series[i % tokens.series.length] }}
+              />
+            </div>
+            {i > 0 && dropoff > 0 && (
+              <p className="text-xs text-ph-danger">-{dropoff.toFixed(1)}% dropoff</p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/charts/quill/InsightShell.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface InsightShellProps {
+  title: string;
+  subtitle?: string;
+  ribbonColor?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function InsightShell({ title, subtitle, ribbonColor, children, className }: InsightShellProps) {
+  return (
+    <div className={cn("ph-insight-shell", className)}>
+      <div className="flex items-start gap-3 px-4 pt-4">
+        {ribbonColor && <div className="ph-insight-shell__ribbon" style={{ background: ribbonColor }} />}
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold text-ph-ink truncate">{title}</h3>
+          {subtitle && <p className="text-xs text-ph-mutedtext mt-0.5">{subtitle}</p>}
+        </div>
+      </div>
+      <div className="p-4 pt-3">{children}</div>
+    </div>
+  );
+}

package/src/components/charts/quill/MetricCard.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { Sparkline } from "@/components/charts/quill/Sparkline";
+import { Badge } from "@/components/ui/Badge";
+
+export interface MetricCardProps {
+  value: string | number;
+  label: string;
+  change?: { value: number; positive?: boolean };
+  sparklineData?: number[];
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function MetricCard({
+  value,
+  label,
+  change,
+  sparklineData,
+  icon,
+  className,
+}: MetricCardProps) {
+  return (
+    <div className={cn("ph-metric", className)}>
+      <div className="ph-metric__header">
+        {icon && <span className="ph-metric__icon">{icon}</span>}
+        <span className="ph-metric__label">{label}</span>
+        {change && (
+          <Badge variant={change.positive ?? change.value >= 0 ? "success" : "danger"}>
+            {change.value >= 0 ? "+" : ""}{change.value}%
+          </Badge>
+        )}
+      </div>
+      <div className="ph-metric__value">{value}</div>
+      {sparklineData && sparklineData.length > 0 && (
+        <div className="mt-2">
+          <Sparkline data={sparklineData} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/charts/quill/PieChart.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface PieChartSlice {
+  key: string;
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export interface PieChartProps {
+  slices: PieChartSlice[];
+  className?: string;
+  size?: number;
+}
+
+export function PieChart({ slices, className, size = 200 }: PieChartProps) {
+  const tokens = useChartTokens();
+
+  const { total, segments } = useMemo(() => {
+    const t = slices.reduce((s, sl) => s + Math.max(0, sl.value), 0);
+    let cum = 0;
+    const segs = slices.map((sl, i) => {
+      const start = cum;
+      const val = Math.max(0, sl.value);
+      cum += val;
+      return {
+        ...sl,
+        color: sl.color ?? tokens.series[i % tokens.series.length],
+        startAngle: (start / t) * 360,
+        endAngle: (cum / t) * 360,
+        pct: t > 0 ? (val / t) * 100 : 0,
+      };
+    });
+    return { total: t, segments: segs };
+  }, [slices, tokens.series]);
+
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.38;
+  const ir = r * 0.6;
+
+  const polarToCart = (angleDeg: number, radius: number) => {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+  };
+
+  const describeArc = (start: number, end: number) => {
+    if (end - start >= 359.9) {
+      const p1 = polarToCart(start, r);
+      const p2 = polarToCart(start + 179.9, r);
+      const p3 = polarToCart(start + 359.9, r);
+      return `M${p1.x},${p1.y} A${r},${r} 0 0,1 ${p2.x},${p2.y} A${r},${r} 0 0,1 ${p3.x},${p3.y} Z`;
+    }
+    const s = polarToCart(start, r);
+    const e = polarToCart(end, r);
+    const si = polarToCart(start, ir);
+    const ei = polarToCart(end, ir);
+    const large = end - start > 180 ? 1 : 0;
+    return `M${s.x},${s.y} A${r},${r} 0 ${large},1 ${e.x},${e.y} L${ei.x},${ei.y} A${ir},${ir} 0 ${large},0 ${si.x},${si.y} Z`;
+  };
+
+  return (
+    <div className={cn("relative", className)} style={{ width: size, height: size }}>
+      <svg viewBox={`0 0 ${size} ${size}`} className="h-full w-full" suppressHydrationWarning>
+        {segments.map((s) => (
+          <path key={s.key} d={describeArc(s.startAngle, s.endAngle)} fill={s.color}>
+            <title>{`${s.label}: ${s.pct.toFixed(1)}%`}</title>
+          </path>
+        ))}
+        <circle cx={cx} cy={cy} r={ir} fill="var(--ph-surface)" />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <span className="text-lg font-bold text-ph-ink tabular-nums">{slices.length}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/charts/quill/Sparkline.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface SparklineProps {
+  data: number[];
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+}
+
+export function Sparkline({
+  data,
+  color,
+  className,
+  width = 80,
+  height = 32,
+  strokeWidth = 2,
+}: SparklineProps) {
+  const tokens = useChartTokens();
+  const resolvedColor = color ?? tokens.series[0];
+
+  const path = useMemo(() => {
+    if (data.length < 2) return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const xStep = width / (data.length - 1);
+
+    return data
+      .map((v, i) => {
+        const x = i * xStep;
+        const y = height - ((v - min) / range) * (height - 4) - 2;
+        return `${i === 0 ? "M" : "L"}${x},${y}`;
+      })
+      .join(" ");
+  }, [data, width, height]);
+
+  if (data.length < 2) return null;
+
+  return (
+    <svg
+      className={cn("shrink-0", className)}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden
+      suppressHydrationWarning
+    >
+      <path d={path} fill="none" stroke={resolvedColor} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/components/charts/quill/TimeSeriesLineChart.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useMemo } from "react";
+import { CanvasTrendLineChart } from "@/lib/hog-charts-lite/CanvasTrendLineChart";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { buildHogChartTheme } from "@/lib/hog-charts-lite/build-theme";
+import { cn } from "@/lib/cn";
+
+export interface TimeSeriesLineChartSeries {
+  key: string;
+  label: string;
+  data: number[];
+  color?: string;
+}
+
+export interface TimeSeriesLineChartProps {
+  series: TimeSeriesLineChartSeries[];
+  labels: string[];
+  className?: string;
+  showGrid?: boolean;
+  showCrosshair?: boolean;
+  height?: number;
+}
+
+export function TimeSeriesLineChart({
+  series,
+  labels,
+  className,
+  showGrid = true,
+  showCrosshair = true,
+  height = 280,
+}: TimeSeriesLineChartProps) {
+  const tokens = useChartTokens();
+  const theme = useMemo(() => buildHogChartTheme(tokens), [tokens]);
+
+  const resolved = useMemo(
+    () =>
+      series.map((s, i) => ({
+        key: s.key,
+        label: s.label,
+        data: s.data,
+        color: s.color ?? tokens.series[i % tokens.series.length],
+      })),
+    [series, tokens.series]
+  );
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      style={{ height, minHeight: 220 }}
+    >
+      <CanvasTrendLineChart
+        labels={labels}
+        series={resolved}
+        theme={theme}
+        showGrid={showGrid}
+        showCrosshair={showCrosshair}
+        className="h-full min-h-[220px]"
+      />
+    </div>
+  );
+}

package/src/components/charts/quill/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { TimeSeriesLineChart, type TimeSeriesLineChartProps, type TimeSeriesLineChartSeries } from "./TimeSeriesLineChart";
+export { BarChart, type BarChartProps, type BarChartSeries } from "./BarChart";
+export { PieChart, type PieChartProps, type PieChartSlice } from "./PieChart";
+export { Sparkline, type SparklineProps } from "./Sparkline";
+export { MetricCard, type MetricCardProps } from "./MetricCard";
+export { FunnelChart, type FunnelChartProps, type FunnelStep } from "./FunnelChart";
+export { InsightShell, type InsightShellProps } from "./InsightShell";

package/src/components/icons/IconBase.tsx

@@ -1,13 +1,13 @@
-import type { SVGAttributes } from "react";
+import { forwardRef, type SVGAttributes } from "react";
 import { cn } from "@/lib/cn";
 
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
-  /** Pixel size or CSS length — defaults to `1em` (Lemon parity). */
+  /** Pixel size or CSS length; defaults to `1em`. */
   size?: number | string;
 }
 
-/** Base SVG wrapper — mirrors PostHog `LemonIconBase` + `.LemonIcon` metrics. */
-export function IconBase({
+/** Shared SVG wrapper with predictable sizing and accessible-name behavior. */
+export const IconBase = forwardRef<SVGSVGElement, IconProps>(function IconBase({
   className,
   size,
   children,
@@ -15,25 +15,33 @@ export function IconBase({
   fill = "none",
   xmlns = "http://www.w3.org/2000/svg",
   focusable = "false",
+  style,
+  role,
+  "aria-hidden": ariaHidden,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
-}: IconProps) {
-  const dimensionProps =
-    size != null
-      ? { width: size, height: size }
-      : {};
+}, ref) {
+  const hasAccessibleName = Boolean(ariaLabel || ariaLabelledBy);
 
   return (
     <svg
+      ref={ref}
       className={cn("ph-icon", className)}
-      {...dimensionProps}
       viewBox={viewBox}
       fill={fill}
       xmlns={xmlns}
       focusable={focusable}
-      aria-hidden={props["aria-hidden"] ?? true}
+      role={role ?? (hasAccessibleName ? "img" : undefined)}
+      aria-hidden={ariaHidden ?? (hasAccessibleName ? undefined : true)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      style={{ width: size, height: size, ...style }}
       {...props}
     >
       {children}
     </svg>
   );
-}
+});
+
+IconBase.displayName = "IconBase";

package/src/components/icons/createIconBase.tsx

@@ -1,26 +1,31 @@
-import type { ReactNode } from "react";
+import { forwardRef, type ReactNode } from "react";
 import type { IconProps } from "@/components/icons/IconBase";
 import { IconBase } from "@/components/icons/IconBase";
 
 interface IconBaseDefinition {
+  name?: string;
   viewBox?: string;
   paths: ReactNode;
 }
 
-/** Factory for filled Lemon-style glyphs (Material / PostHog paths). */
-export function createIconBase({ viewBox = "0 0 24 24", paths }: IconBaseDefinition) {
-  return function IconGlyph(props: IconProps) {
+/** Factory for filled Old UI, Lemon, and Material-style glyphs. */
+export function createIconBase({ name = "IconGlyph", viewBox = "0 0 24 24", paths }: IconBaseDefinition) {
+  const IconGlyph = forwardRef<SVGSVGElement, IconProps>(function IconGlyph(props, ref) {
     return (
-      <IconBase viewBox={viewBox} {...props}>
+      <IconBase ref={ref} viewBox={viewBox} {...props}>
         {paths}
       </IconBase>
     );
-  };
+  });
+
+  IconGlyph.displayName = name;
+  return IconGlyph;
 }
 
 /** Shorthand for single-path filled icons. */
-export function createIconBasePath(d: string, viewBox = "0 0 24 24") {
+export function createIconBasePath(d: string, viewBox = "0 0 24 24", name?: string) {
   return createIconBase({
+    name,
     viewBox,
     paths: <path d={d} fill="currentColor" />,
   });