@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4

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

@@ -1,49 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-"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

@@ -1,57 +0,0 @@
-"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

@@ -1,62 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-"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";