@overdoser/react-toolkit 0.0.6 → 0.0.8

package/recipes/interactive-pie-chart.tsx

@@ -0,0 +1,191 @@
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  Dropdown,
+  PieChart,
+  Typography,
+} from '@overdoser/react-toolkit';
+
+interface RegionRow extends Record<string, unknown> {
+  region: string;
+  value: number;
+  fill: string;
+}
+
+// Same regional breakdown computed for two different metrics. The selector
+// picks which metric is shown — all slices stay visible.
+const data = {
+  desktop: [
+    { region: 'NA', value: 420, fill: 'var(--crk-chart-1)' },
+    { region: 'EU', value: 340, fill: 'var(--crk-chart-2)' },
+    { region: 'APAC', value: 280, fill: 'var(--crk-chart-3)' },
+    { region: 'LATAM', value: 110, fill: 'var(--crk-chart-4)' },
+    { region: 'Other', value: 60, fill: 'var(--crk-chart-5)' },
+  ],
+  mobile: [
+    { region: 'NA', value: 280, fill: 'var(--crk-chart-1)' },
+    { region: 'EU', value: 410, fill: 'var(--crk-chart-2)' },
+    { region: 'APAC', value: 520, fill: 'var(--crk-chart-3)' },
+    { region: 'LATAM', value: 220, fill: 'var(--crk-chart-4)' },
+    { region: 'Other', value: 90, fill: 'var(--crk-chart-5)' },
+  ],
+} satisfies Record<string, RegionRow[]>;
+
+const METRICS = [
+  { value: 'desktop', label: 'Desktop' },
+  { value: 'mobile', label: 'Mobile' },
+] as const;
+type MetricValue = (typeof METRICS)[number]['value'];
+
+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 PieFor({ metric }: { metric: MetricValue }) {
+  const rows = data[metric];
+  const total = useMemo(() => rows.reduce((s, r) => s + r.value, 0), [rows]);
+  return (
+    <PieChart
+      data={rows}
+      nameKey="region"
+      valueKey="value"
+      colorKey="fill"
+      innerRadius="60%"
+      centerLabel={
+        <>
+          <div style={{ fontSize: 24, fontWeight: 700 }}>{total.toLocaleString()}</div>
+          <div style={{ fontSize: 12, color: 'var(--crk-color-text-muted)' }}>Total</div>
+        </>
+      }
+    />
+  );
+}
+
+// ─── Variant 1: Tiles ──────────────────────────────────────────────────────
+
+export function InteractivePieChartTiles() {
+  const [metric, setMetric] = useState<MetricValue>('desktop');
+  return (
+    <div style={panelStyle}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${METRICS.length}, 1fr)`,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        {METRICS.map((m) => {
+          const isActive = metric === m.value;
+          const total = data[m.value].reduce((s, r) => s + r.value, 0);
+          return (
+            <button
+              key={m.value}
+              type="button"
+              onClick={() => setMetric(m.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">{m.label}</Typography>
+              <div style={{ fontSize: 'var(--crk-font-size-2xl)', fontWeight: 600 }}>
+                {total.toLocaleString()}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <div style={{ padding: 16 }}>
+        <PieFor metric={metric} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 2: Navigator ──────────────────────────────────────────────────
+
+export function InteractivePieChartNavigator() {
+  const [index, setIndex] = useState(0);
+  const metric = METRICS[index];
+  const step = (delta: number) =>
+    setIndex((i) => (i + delta + METRICS.length) % METRICS.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 metric">
+          <Chevron direction="left" />
+        </Button>
+        <Typography variant="span" weight="medium">{metric.label}</Typography>
+        <Button variant="ghost" size="sm" iconOnly onClick={() => step(1)} aria-label="Next metric">
+          <Chevron direction="right" />
+        </Button>
+      </div>
+      <div style={{ padding: 16 }}>
+        <PieFor metric={metric.value} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Variant 3: Dropdown ───────────────────────────────────────────────────
+
+export function InteractivePieChartDropdown() {
+  const [metric, setMetric] = useState<MetricValue>('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">Metric</Typography>
+        <div style={{ width: 180 }}>
+          <Dropdown
+            options={METRICS.map((m) => ({ value: m.value, label: m.label }))}
+            value={metric}
+            onChange={(v) => setMetric(v as MetricValue)}
+          />
+        </div>
+      </div>
+      <div style={{ padding: 16 }}>
+        <PieFor metric={metric} />
+      </div>
+    </div>
+  );
+}
+
+const panelStyle: React.CSSProperties = {
+  border: '1px solid var(--crk-color-border)',
+  borderRadius: 12,
+  overflow: 'hidden',
+  background: 'var(--crk-color-bg)',
+};

package/recipes/trading-chart.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Dropdown,
+  TradingChart,
+  type Bar,
+  type Datafeed,
+  type IndicatorConfig,
+  type Resolution,
+  type SubscribeBarsArgs,
+  type SubscriptionHandle,
+} from '@overdoser/react-toolkit';
+
+// ─── Minimal in-memory datafeed adapter ────────────────────────────────────
+//
+// Replace `generateBars` and the `subscribeBars` interval with calls to your
+// REST/WebSocket layer. The shape (`getBars` → bars, `subscribeBars` → onTick,
+// `unsubscribeBars`) mirrors the TradingView Charting Library so adapters
+// from that ecosystem port over with minimal change.
+
+interface Subscription {
+  args: SubscribeBarsArgs;
+  timer: ReturnType<typeof setInterval>;
+}
+
+function createMemoryDatafeed(opts: { intervalSec: number; startPrice?: number; seed?: number }): Datafeed {
+  const intervalSec = opts.intervalSec;
+  const subscriptions = new Map<symbol, Subscription>();
+  let seed = opts.seed ?? 1;
+  const rng = () => {
+    seed = (seed * 9301 + 49297) % 233280;
+    return seed / 233280;
+  };
+
+  const generateBars = (count: number, endTime: number, startPrice: number): Bar[] => {
+    let p = startPrice;
+    const out: Bar[] = [];
+    const start = endTime - count * intervalSec;
+    for (let i = 0; i < count; i++) {
+      const change = (rng() - 0.5) * p * 0.02;
+      const open = p;
+      const close = Math.max(0.01, open + change);
+      const high = Math.max(open, close) + rng() * Math.abs(change);
+      const low = Math.min(open, close) - rng() * Math.abs(change);
+      out.push({
+        time: start + i * intervalSec,
+        open,
+        high,
+        low,
+        close,
+        volume: Math.floor(rng() * 10000 + 1000),
+      });
+      p = close;
+    }
+    return out;
+  };
+
+  return {
+    async getBars({ from, to, countBack }) {
+      const count = countBack ?? Math.ceil((to - from) / intervalSec);
+      return generateBars(count, to, opts.startPrice ?? 100);
+    },
+    subscribeBars(args) {
+      const handle = Symbol('memdf');
+      let last: Bar | null = null;
+      const timer = setInterval(() => {
+        const now = Math.floor(Date.now() / 1000);
+        const bucketStart = Math.floor(now / intervalSec) * intervalSec;
+        if (!last || last.time !== bucketStart) {
+          const open = last ? last.close : 100;
+          last = { time: bucketStart, open, high: open, low: open, close: open, volume: 0 };
+        } else {
+          const change = (rng() - 0.5) * last.close * 0.003;
+          const close = Math.max(0.01, last.close + change);
+          last = {
+            ...last,
+            close,
+            high: Math.max(last.high, close),
+            low: Math.min(last.low, close),
+            volume: (last.volume ?? 0) + Math.floor(rng() * 500),
+          };
+        }
+        args.onTick(last);
+      }, 1000);
+      subscriptions.set(handle, { args, timer });
+      return handle;
+    },
+    unsubscribeBars(handle) {
+      const sub = subscriptions.get(handle as symbol);
+      if (sub) {
+        clearInterval(sub.timer);
+        subscriptions.delete(handle as symbol);
+      }
+    },
+  };
+}
+
+// ─── Recipe: full-stack trading chart with controls ────────────────────────
+
+const RESOLUTIONS: Array<{ value: Resolution; label: string }> = [
+  { value: '1', label: '1m' },
+  { value: '5', label: '5m' },
+  { value: '15', label: '15m' },
+  { value: '60', label: '1h' },
+  { value: '240', label: '4h' },
+  { value: 'D', label: '1D' },
+];
+
+const RESOLUTION_TO_SECONDS: Record<string, number> = {
+  '1': 60,
+  '5': 300,
+  '15': 900,
+  '60': 3600,
+  '240': 14400,
+  D: 86400,
+};
+
+/**
+ * Drop-in trading chart with resolution selector and the full indicator stack
+ * (two EMAs, Bollinger Bands, RSI, Volume). The `useDatafeed` hook keeps the
+ * datafeed adapter scoped to the current resolution; swap it for your real
+ * adapter and the rest of the recipe works unchanged.
+ */
+export function TradingChartRecipe() {
+  const [resolution, setResolution] = useState<Resolution>('60');
+  const datafeed = useDatafeed(resolution);
+
+  const indicators: IndicatorConfig[] = useMemo(
+    () => [
+      { type: 'ema', period: 12, color: 'var(--crk-chart-2)' },
+      { type: 'ema', period: 26, color: 'var(--crk-chart-3)' },
+      { type: 'bollinger', period: 20, stdDev: 2, color: 'var(--crk-chart-4)' },
+      { type: 'rsi', period: 14 },
+      { type: 'volume' },
+    ],
+    [],
+  );
+
+  return (
+    <div style={{ border: '1px solid var(--crk-color-border)', borderRadius: 12, overflow: 'hidden' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: 12,
+          borderBottom: '1px solid var(--crk-color-border)',
+        }}
+      >
+        <span style={{ color: 'var(--crk-color-text-muted)' }}>Interval</span>
+        <div style={{ width: 140 }}>
+          <Dropdown
+            options={RESOLUTIONS.map((r) => ({ value: r.value, label: r.label }))}
+            value={resolution}
+            onChange={(v) => setResolution(v as Resolution)}
+          />
+        </div>
+      </div>
+      <TradingChart
+        datafeed={datafeed}
+        symbol="DEMO"
+        resolution={resolution}
+        height={560}
+        indicators={indicators}
+      />
+    </div>
+  );
+}
+
+function useDatafeed(resolution: Resolution): Datafeed {
+  const ref = useRef<Datafeed | null>(null);
+  const [, force] = useState(0);
+
+  useEffect(() => {
+    const intervalSec = RESOLUTION_TO_SECONDS[resolution] ?? 60;
+    ref.current = createMemoryDatafeed({ intervalSec, startPrice: 100 });
+    force((n) => n + 1);
+  }, [resolution]);
+
+  // Stable reference; only the underlying datafeed swaps on resolution change.
+  return useMemo(
+    () => ({
+      getBars: (args) => ref.current!.getBars(args),
+      subscribeBars: (args) => ref.current!.subscribeBars(args),
+      unsubscribeBars: (handle: SubscriptionHandle) => ref.current?.unsubscribeBars(handle),
+    }),
+    [],
+  );
+}

package/components/Button/Button.stories.d.ts

@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Danger: Story;
-export declare const Ghost: Story;
-export declare const LoadingDots: Story;
-export declare const LoadingShimmer: Story;
-export declare const LoadingBorder: Story;
-export declare const LoadingAllStyles: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const FullWidth: Story;
-export declare const AllVariants: Story;

package/components/Dropdown/Dropdown.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Dropdown } from './Dropdown';
-declare const meta: Meta<typeof Dropdown>;
-export default meta;
-type Story = StoryObj<typeof Dropdown>;
-export declare const Default: Story;
-export declare const AlignRight: Story;
-export declare const WithDisabledItem: Story;

package/components/Form/Form.stories.d.ts

@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Form } from './Form';
-declare const meta: Meta<typeof Form>;
-export default meta;
-type Story = StoryObj<typeof Form>;
-export declare const Default: Story;
-export declare const WithValidation: Story;
-export declare const WithLoadingSubmit: Story;
-export declare const AllInputs: Story;
-export declare const WithFormErrors: Story;
-export declare const InlineFields: Story;

package/components/Link/Link.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Link } from './Link';
-declare const meta: Meta<typeof Link>;
-export default meta;
-type Story = StoryObj<typeof Link>;
-export declare const Default: Story;
-export declare const Muted: Story;
-export declare const Danger: Story;
-export declare const External: Story;

package/components/List/List.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { List } from './List';
-declare const meta: Meta<typeof List>;
-export default meta;
-type Story = StoryObj<typeof List>;
-export declare const Unordered: Story;
-export declare const Ordered: Story;
-export declare const NoStyle: Story;
-export declare const Spacing: Story;

package/components/Modal/Modal.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Modal } from './Modal';
-declare const meta: Meta<typeof Modal>;
-export default meta;
-type Story = StoryObj<typeof Modal>;
-export declare const Default: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const NoBackdropClose: Story;

package/components/Popover/Popover.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Popover } from './Popover';
-declare const meta: Meta<typeof Popover>;
-export default meta;
-type Story = StoryObj<typeof Popover>;
-export declare const Bottom: Story;
-export declare const Top: Story;
-export declare const Left: Story;
-export declare const Right: Story;

package/components/Table/Table.stories.d.ts

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Table } from './Table';
-type User = {
-    id: number;
-    name: string;
-    email: string;
-    age: number;
-    role: string;
-};
-declare const meta: Meta<typeof Table<User>>;
-export default meta;
-type Story = StoryObj<typeof Table<User>>;
-export declare const Default: Story;
-export declare const Striped: Story;
-export declare const Hoverable: Story;
-export declare const Compact: Story;
-export declare const MultiSort: Story;
-export declare const WithPagination: Story;
-export declare const ServerSideSort: Story;
-export declare const Empty: Story;

package/components/Typography/Typography.stories.d.ts

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Typography } from './Typography';
-declare const meta: Meta<typeof Typography>;
-export default meta;
-type Story = StoryObj<typeof Typography>;
-export declare const Heading1: Story;
-export declare const Heading2: Story;
-export declare const Heading3: Story;
-export declare const Heading4: Story;
-export declare const Heading5: Story;
-export declare const Heading6: Story;
-export declare const Paragraph: Story;
-export declare const Muted: Story;
-export declare const Truncated: Story;
-export declare const AllVariants: Story;

package/components/inputs/Checkbox/Checkbox.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from './Checkbox';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-export declare const Default: Story;
-export declare const Checked: Story;
-export declare const Indeterminate: Story;
-export declare const Disabled: Story;

package/components/inputs/Input/Input.stories.d.ts

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Input } from './Input';
-declare const meta: Meta<typeof Input>;
-export default meta;
-type Story = StoryObj<typeof Input>;
-export declare const Default: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const WithError: Story;
-export declare const WithPrefix: Story;
-export declare const WithSuffix: Story;
-export declare const WithPrefixAndSuffix: Story;
-export declare const Disabled: Story;

package/components/inputs/Radio/Radio.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RadioGroup } from './Radio';
-declare const meta: Meta<typeof RadioGroup>;
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-export declare const Default: Story;
-export declare const WithDefault: Story;

package/components/inputs/Select/Select.stories.d.ts

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Select } from './Select';
-declare const meta: Meta<typeof Select>;
-export default meta;
-type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const WithPlaceholder: Story;
-export declare const WithError: Story;
-export declare const Disabled: Story;
-export declare const Searchable: Story;
-export declare const SearchableSizes: Story;
-export declare const SearchableWithError: Story;
-export declare const SearchableDisabled: Story;
-export declare const MultiSelect: Story;
-export declare const MultiSelectPreselected: Story;
-export declare const MultiSelectSizes: Story;
-export declare const MultiSelectDisabled: Story;
-export declare const MultiSelectWithError: Story;

package/components/inputs/Textarea/Textarea.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Textarea } from './Textarea';
-declare const meta: Meta<typeof Textarea>;
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-export declare const Default: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const WithError: Story;
-export declare const NoResize: Story;