@overdoser/react-toolkit 0.0.6 → 0.0.7

package/recipes/interactive-area-chart.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState } from 'react';
+import {
+  AreaChart,
+  Button,
+  Dropdown,
+  Typography,
+  type ChartConfig,
+} from '@overdoser/react-toolkit';
+
+interface DayRow extends Record<string, unknown> {
+  date: string;
+  desktop: number;
+  mobile: number;
+}
+
+// 30 days of sample traffic. Recipe-sized stand-in for a longer real series.
+const chartData: DayRow[] = [
+  { date: '2024-06-01', desktop: 178, mobile: 200 },
+  { date: '2024-06-02', desktop: 470, mobile: 410 },
+  { date: '2024-06-03', desktop: 103, mobile: 160 },
+  { date: '2024-06-04', desktop: 439, mobile: 380 },
+  { date: '2024-06-05', desktop: 88, mobile: 140 },
+  { date: '2024-06-06', desktop: 294, mobile: 250 },
+  { date: '2024-06-07', desktop: 323, mobile: 370 },
+  { date: '2024-06-08', desktop: 385, mobile: 320 },
+  { date: '2024-06-09', desktop: 438, mobile: 480 },
+  { date: '2024-06-10', desktop: 155, mobile: 200 },
+  { date: '2024-06-11', desktop: 92, mobile: 150 },
+  { date: '2024-06-12', desktop: 492, mobile: 420 },
+  { date: '2024-06-13', desktop: 81, mobile: 130 },
+  { date: '2024-06-14', desktop: 426, mobile: 380 },
+  { date: '2024-06-15', desktop: 307, mobile: 350 },
+  { date: '2024-06-16', desktop: 371, mobile: 310 },
+  { date: '2024-06-17', desktop: 475, mobile: 520 },
+  { date: '2024-06-18', desktop: 107, mobile: 170 },
+  { date: '2024-06-19', desktop: 341, mobile: 290 },
+  { date: '2024-06-20', desktop: 408, mobile: 450 },
+  { date: '2024-06-21', desktop: 169, mobile: 210 },
+  { date: '2024-06-22', desktop: 317, mobile: 270 },
+  { date: '2024-06-23', desktop: 480, mobile: 530 },
+  { date: '2024-06-24', desktop: 132, mobile: 180 },
+  { date: '2024-06-25', desktop: 141, mobile: 190 },
+  { date: '2024-06-26', desktop: 434, mobile: 380 },
+  { date: '2024-06-27', desktop: 448, mobile: 490 },
+  { date: '2024-06-28', desktop: 149, mobile: 200 },
+  { date: '2024-06-29', desktop: 103, mobile: 160 },
+  { date: '2024-06-30', desktop: 446, mobile: 400 },
+];
+
+const config: ChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--crk-chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--crk-chart-2)' },
+};
+
+const RANGES = [
+  { value: '7d', label: 'Last 7 days', days: 7 },
+  { value: '14d', label: 'Last 14 days', days: 14 },
+  { value: '30d', label: 'Last 30 days', days: 30 },
+] as const;
+
+type RangeValue = (typeof RANGES)[number]['value'];
+
+function useFiltered(range: RangeValue) {
+  return useMemo(() => {
+    const days = RANGES.find((r) => r.value === range)!.days;
+    return chartData.slice(-days);
+  }, [range]);
+}
+
+const Chevron = ({ direction }: { direction: 'left' | 'right' }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width="14"
+    height="14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />
+  </svg>
+);
+
+function Chart({ data }: { data: DayRow[] }) {
+  return (
+    <AreaChart
+      data={data}
+      xKey="date"
+      config={config}
+      stacked
+      fillGradient
+      xFormat={(d) => d.slice(-5)}
+      showLegend
+    />
+  );
+}
+
+// ─── Variant 1: Tiles ──────────────────────────────────────────────────────
+//
+// Each preset gets a clickable tile. Best for 2–4 fixed ranges where the
+// user benefits from seeing all options at once.
+
+export function InteractiveAreaChartTiles() {
+  const [range, setRange] = useState<RangeValue>('30d');
+  const data = useFiltered(range);
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${RANGES.length}, 1fr)`,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        {RANGES.map((r) => {
+          const isActive = range === r.value;
+          return (
+            <button
+              key={r.value}
+              type="button"
+              onClick={() => setRange(r.value)}
+              style={{
+                padding: 16,
+                textAlign: 'left',
+                background: isActive ? 'var(--crk-color-primary-light)' : 'transparent',
+                border: 'none',
+                borderLeft: '4px solid',
+                borderLeftColor: isActive ? 'var(--crk-color-primary)' : 'transparent',
+                cursor: 'pointer',
+              }}
+            >
+              <Typography variant="span" color="muted">Range</Typography>
+              <div style={{ fontSize: 'var(--crk-font-size-2xl)', fontWeight: 600 }}>{r.label}</div>
+            </button>
+          );
+        })}
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart data={data} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 2: Navigator ──────────────────────────────────────────────────
+//
+// Prev/next steps through the presets. Handy when space is tight.
+
+export function InteractiveAreaChartNavigator() {
+  const [index, setIndex] = useState(2);
+  const range = RANGES[index];
+  const data = useFiltered(range.value);
+
+  const step = (delta: number) => setIndex((i) => (i + delta + RANGES.length) % RANGES.length);
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(-1)} aria-label="Previous range">
+          <Chevron direction="left" />
+        </Button>
+        <Typography variant="span" weight="medium">{range.label}</Typography>
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(1)} aria-label="Next range">
+          <Chevron direction="right" />
+        </Button>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart data={data} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 3: Dropdown ───────────────────────────────────────────────────
+//
+// Uses the toolkit's `<Dropdown>` in select mode. Scales to many presets
+// (custom ranges, etc.).
+
+export function InteractiveAreaChartDropdown() {
+  const [range, setRange] = useState<RangeValue>('30d');
+  const data = useFiltered(range);
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Typography variant="span" color="muted">Range</Typography>
+        <div style={{ width: 220 }}>
+          <Dropdown
+            options={RANGES.map((r) => ({ value: r.value, label: r.label }))}
+            value={range}
+            onChange={(v) => setRange(v as RangeValue)}
+          />
+        </div>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart data={data} />
+      </div>
+    </div>
+  );
+}
+
+const panelStyle: React.CSSProperties = {
+  border: '1px solid var(--crk-color-border)',
+  borderRadius: 12,
+  overflow: 'hidden',
+  background: 'var(--crk-color-bg)',
+};

package/recipes/interactive-bar-chart.tsx

@@ -0,0 +1,211 @@
+import { useMemo, useState } from 'react';
+import {
+  BarChart,
+  Button,
+  Dropdown,
+  Typography,
+  type ChartConfig,
+} from '@overdoser/react-toolkit';
+
+interface MonthRow extends Record<string, unknown> {
+  month: string;
+  desktop: number;
+  mobile: number;
+}
+
+const chartData: MonthRow[] = [
+  { month: 'Jan', desktop: 186, mobile: 80 },
+  { month: 'Feb', desktop: 305, mobile: 200 },
+  { month: 'Mar', desktop: 237, mobile: 120 },
+  { month: 'Apr', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'Jun', desktop: 214, mobile: 140 },
+];
+
+const config: ChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--crk-chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--crk-chart-2)' },
+};
+
+type SeriesKey = keyof typeof config;
+const seriesKeys = Object.keys(config) as SeriesKey[];
+
+function useSeriesTotals() {
+  return useMemo(
+    () => ({
+      desktop: chartData.reduce((s, r) => s + r.desktop, 0),
+      mobile: chartData.reduce((s, r) => s + r.mobile, 0),
+    }),
+    [],
+  );
+}
+
+const Chevron = ({ direction }: { direction: 'left' | 'right' }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width="14"
+    height="14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />
+  </svg>
+);
+
+function Chart({ active }: { active: SeriesKey }) {
+  return (
+    <BarChart
+      data={chartData}
+      xKey="month"
+      config={{ [active]: config[active] }}
+      showLegend={false}
+    />
+  );
+}
+
+// ─── Variant 1: Tiles (shadcn-style) ───────────────────────────────────────
+//
+// Each series gets a clickable tile showing its total. Tile background is
+// active-tinted when selected. Best for 2–4 series with meaningful totals.
+
+export function InteractiveBarChartTiles() {
+  const [active, setActive] = useState<SeriesKey>('desktop');
+  const totals = useSeriesTotals();
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${seriesKeys.length}, 1fr)`,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        {seriesKeys.map((key) => {
+          const isActive = active === key;
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => setActive(key)}
+              style={{
+                padding: 16,
+                textAlign: 'left',
+                background: isActive ? 'var(--crk-color-primary-light)' : 'transparent',
+                border: 'none',
+                borderLeft: '4px solid',
+                borderLeftColor: isActive ? config[key].color : 'transparent',
+                cursor: 'pointer',
+              }}
+            >
+              <Typography variant="span" color="muted">{config[key].label}</Typography>
+              <div style={{ fontSize: 'var(--crk-font-size-2xl)', fontWeight: 600 }}>
+                {totals[key].toLocaleString()}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 2: Navigator (prev / next) ────────────────────────────────────
+//
+// Single label flanked by prev/next buttons. Lightweight when you have many
+// series or limited horizontal space.
+
+export function InteractiveBarChartNavigator() {
+  const [index, setIndex] = useState(0);
+  const active = seriesKeys[index];
+
+  const step = (delta: number) => {
+    setIndex((i) => (i + delta + seriesKeys.length) % seriesKeys.length);
+  };
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(-1)} aria-label="Previous series">
+          <Chevron direction="left" />
+        </Button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 999,
+              background: config[active].color,
+              display: 'inline-block',
+            }}
+            aria-hidden="true"
+          />
+          <Typography variant="span" weight="medium">{config[active].label}</Typography>
+        </div>
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(1)} aria-label="Next series">
+          <Chevron direction="right" />
+        </Button>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 3: Dropdown ───────────────────────────────────────────────────
+//
+// Uses the toolkit's `<Dropdown>` in select mode. Scales well to many series
+// without consuming horizontal space.
+
+export function InteractiveBarChartDropdown() {
+  const [active, setActive] = useState<SeriesKey>('desktop');
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Typography variant="span" color="muted">Series</Typography>
+        <div style={{ width: 200 }}>
+          <Dropdown
+            options={seriesKeys.map((key) => ({ value: key, label: config[key].label }))}
+            value={active}
+            onChange={(v) => setActive(v as SeriesKey)}
+          />
+        </div>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+const panelStyle: React.CSSProperties = {
+  border: '1px solid var(--crk-color-border)',
+  borderRadius: 12,
+  overflow: 'hidden',
+  background: 'var(--crk-color-bg)',
+};

package/recipes/interactive-line-chart.tsx

@@ -0,0 +1,221 @@
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  Dropdown,
+  LineChart,
+  Typography,
+  type ChartConfig,
+} from '@overdoser/react-toolkit';
+
+interface DayRow extends Record<string, unknown> {
+  date: string;
+  desktop: number;
+  mobile: number;
+}
+
+const chartData: DayRow[] = [
+  { date: '2024-04-01', desktop: 222, mobile: 150 },
+  { date: '2024-04-02', desktop: 97, mobile: 180 },
+  { date: '2024-04-03', desktop: 167, mobile: 120 },
+  { date: '2024-04-04', desktop: 242, mobile: 260 },
+  { date: '2024-04-05', desktop: 373, mobile: 290 },
+  { date: '2024-04-06', desktop: 301, mobile: 340 },
+  { date: '2024-04-07', desktop: 245, mobile: 180 },
+  { date: '2024-04-08', desktop: 409, mobile: 320 },
+  { date: '2024-04-09', desktop: 59, mobile: 110 },
+  { date: '2024-04-10', desktop: 261, mobile: 190 },
+  { date: '2024-04-11', desktop: 327, mobile: 350 },
+  { date: '2024-04-12', desktop: 292, mobile: 210 },
+  { date: '2024-04-13', desktop: 342, mobile: 380 },
+  { date: '2024-04-14', desktop: 137, mobile: 220 },
+  { date: '2024-04-15', desktop: 120, mobile: 170 },
+  { date: '2024-04-16', desktop: 138, mobile: 190 },
+  { date: '2024-04-17', desktop: 446, mobile: 360 },
+];
+
+const config: ChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--crk-chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--crk-chart-2)' },
+};
+
+type SeriesKey = keyof typeof config;
+const seriesKeys = Object.keys(config) as SeriesKey[];
+
+function shortDate(d: string) {
+  return d.slice(-5); // "MM-DD"
+}
+
+function useSeriesTotals() {
+  return useMemo(
+    () => ({
+      desktop: chartData.reduce((s, r) => s + r.desktop, 0),
+      mobile: chartData.reduce((s, r) => s + r.mobile, 0),
+    }),
+    [],
+  );
+}
+
+const Chevron = ({ direction }: { direction: 'left' | 'right' }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width="14"
+    height="14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />
+  </svg>
+);
+
+function Chart({ active }: { active: SeriesKey }) {
+  return (
+    <LineChart
+      data={chartData}
+      xKey="date"
+      config={{ [active]: config[active] }}
+      xFormat={shortDate}
+      showLegend={false}
+    />
+  );
+}
+
+// ─── Variant 1: Tiles (shadcn-style) ───────────────────────────────────────
+//
+// Each series gets a clickable tile showing its total. Tile background is
+// active-tinted when selected. Best for 2–4 series with meaningful totals.
+
+export function InteractiveLineChartTiles() {
+  const [active, setActive] = useState<SeriesKey>('desktop');
+  const totals = useSeriesTotals();
+
+  return (
+    <div style={panelStyle}>
+      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${seriesKeys.length}, 1fr)`, borderBottom: '1px solid var(--crk-color-border)' }}>
+        {seriesKeys.map((key) => {
+          const isActive = active === key;
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => setActive(key)}
+              style={{
+                padding: 16,
+                textAlign: 'left',
+                background: isActive ? 'var(--crk-color-primary-light)' : 'transparent',
+                border: 'none',
+                borderLeft: '4px solid',
+                borderLeftColor: isActive ? config[key].color : 'transparent',
+                cursor: 'pointer',
+              }}
+            >
+              <Typography variant="span" color="muted">{config[key].label}</Typography>
+              <div style={{ fontSize: 'var(--crk-font-size-2xl)', fontWeight: 600 }}>
+                {totals[key].toLocaleString()}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 2: Navigator (prev / next) ────────────────────────────────────
+//
+// A single label with prev/next buttons. Lightweight when you have many
+// series or limited horizontal space.
+
+export function InteractiveLineChartNavigator() {
+  const [index, setIndex] = useState(0);
+  const active = seriesKeys[index];
+
+  const step = (delta: number) => {
+    setIndex((i) => (i + delta + seriesKeys.length) % seriesKeys.length);
+  };
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(-1)} aria-label="Previous series">
+          <Chevron direction="left" />
+        </Button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 999,
+              background: config[active].color,
+              display: 'inline-block',
+            }}
+            aria-hidden="true"
+          />
+          <Typography variant="span" weight="medium">{config[active].label}</Typography>
+        </div>
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(1)} aria-label="Next series">
+          <Chevron direction="right" />
+        </Button>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 3: Dropdown ───────────────────────────────────────────────────
+//
+// Uses the toolkit's `<Dropdown>` in select mode. Scales well to many series
+// without burning horizontal space.
+
+export function InteractiveLineChartDropdown() {
+  const [active, setActive] = useState<SeriesKey>('desktop');
+
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <Typography variant="span" color="muted">Series</Typography>
+        <div style={{ width: 200 }}>
+          <Dropdown
+            options={seriesKeys.map((key) => ({ value: key, label: config[key].label }))}
+            value={active}
+            onChange={(v) => setActive(v as SeriesKey)}
+          />
+        </div>
+      </div>
+      <div style={{ padding: 16 }}>
+        <Chart active={active} />
+      </div>
+    </div>
+  );
+}
+
+const panelStyle: React.CSSProperties = {
+  border: '1px solid var(--crk-color-border)',
+  borderRadius: 12,
+  overflow: 'hidden',
+  background: 'var(--crk-color-bg)',
+};