@olwiba/ui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/components/Chart.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { cn } from '@olwiba/cn';
+
+export interface ChartSeries {
+  /** Data key to plot. */
+  key: string;
+  /** Legend and tooltip label. @default key */
+  label?: string;
+  /** CSS color. @default theme tokens --chart-1..5 in fixed order */
+  color?: string;
+}
+
+export interface ChartProps {
+  /** Chart form. @default 'line' */
+  type?: 'line' | 'area' | 'bar' | 'donut';
+  data: Array<Record<string, string | number>>;
+  /** Key for x-axis categories (line/area/bar) or slice labels (donut). */
+  xKey: string;
+  /** Series to plot. Donut uses `series[0].key` as the slice value. */
+  series: ChartSeries[];
+  /** Chart height in px. @default 300 */
+  height?: number;
+  /** Horizontal grid lines. @default true (ignored for donut) */
+  grid?: boolean;
+  /** Legend. @default true for multiple series or donut, false for one series */
+  legend?: boolean;
+  /** Formats values in tooltips and the y-axis, e.g. `(v) => \`$${v}\``. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+
+// Fixed categorical order — series N always gets token N, never cycled.
+const TOKEN_COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'];
+
+const seriesColor = (s: ChartSeries, i: number) => s.color ?? TOKEN_COLORS[i % TOKEN_COLORS.length];
+
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  valueFormatter,
+}: {
+  active?: boolean;
+  payload?: Array<{ name?: string; value?: number | string; color?: string; payload?: { fill?: string } }>;
+  label?: string | number;
+  valueFormatter: (value: number) => string;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-lg border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md">
+      {label !== undefined && <p className="mb-1 font-medium">{label}</p>}
+      <div className="space-y-1">
+        {payload.map((entry, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <span
+              aria-hidden
+              className="size-2 shrink-0 rounded-full"
+              style={{ background: entry.color ?? entry.payload?.fill }}
+            />
+            <span className="text-muted-foreground">{entry.name}</span>
+            <span className="ml-auto pl-3 font-medium tabular-nums">
+              {typeof entry.value === 'number' ? valueFormatter(entry.value) : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChartLegend({ entries }: { entries: Array<{ label: string; color: string }> }) {
+  return (
+    <div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+      {entries.map((entry) => (
+        <div key={entry.label} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span aria-hidden className="size-2 rounded-full" style={{ background: entry.color }} />
+          {entry.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const axisProps = {
+  tickLine: false,
+  axisLine: false,
+  tick: { fill: 'var(--muted-foreground)', fontSize: 12 },
+  tickMargin: 8,
+} as const;
+
+/**
+ * Theme-aware chart — one component, `type` switches the form. Colors come
+ * from the `--chart-1..5` theme tokens in fixed order (override per series
+ * via `color`). Line and area for change-over-time, bar for magnitude
+ * comparison, donut for part-of-whole identity. More than 5 donut slices:
+ * fold the tail into an "Other" slice in your data instead of adding hues.
+ */
+export function Chart({
+  type = 'line',
+  data,
+  xKey,
+  series,
+  height = 300,
+  grid = true,
+  legend,
+  valueFormatter = (v) => String(v),
+  className,
+}: ChartProps) {
+  const showLegend = legend ?? (type === 'donut' || series.length > 1);
+  const tooltip = (
+    <Tooltip
+      cursor={type === 'bar' ? { fill: 'var(--muted)', opacity: 0.4 } : { stroke: 'var(--border)' }}
+      content={<ChartTooltip valueFormatter={valueFormatter} />}
+    />
+  );
+  const gridEl = grid ? (
+    <CartesianGrid vertical={false} stroke="var(--border)" strokeOpacity={0.6} />
+  ) : null;
+
+  let chart: React.ReactElement;
+  let legendEntries: Array<{ label: string; color: string }>;
+
+  if (type === 'donut') {
+    const valueKey = series[0]?.key;
+    legendEntries = data.map((row, i) => ({
+      label: String(row[xKey]),
+      color: TOKEN_COLORS[i % TOKEN_COLORS.length],
+    }));
+    chart = (
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey={valueKey}
+          nameKey={xKey}
+          innerRadius="60%"
+          outerRadius="85%"
+          paddingAngle={2}
+          stroke="var(--card)"
+          strokeWidth={2}
+        >
+          {data.map((row, i) => (
+            <Cell key={String(row[xKey])} fill={TOKEN_COLORS[i % TOKEN_COLORS.length]} />
+          ))}
+        </Pie>
+        {tooltip}
+      </PieChart>
+    );
+  } else {
+    legendEntries = series.map((s, i) => ({ label: s.label ?? s.key, color: seriesColor(s, i) }));
+
+    if (type === 'bar') {
+      chart = (
+        <BarChart data={data} barCategoryGap="25%">
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Bar
+              key={s.key}
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              fill={seriesColor(s, i)}
+              radius={[4, 4, 0, 0]}
+              maxBarSize={40}
+            />
+          ))}
+        </BarChart>
+      );
+    } else if (type === 'area') {
+      chart = (
+        <AreaChart data={data}>
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Area
+              key={s.key}
+              type="monotone"
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              stroke={seriesColor(s, i)}
+              strokeWidth={2}
+              fill={seriesColor(s, i)}
+              fillOpacity={0.12}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          ))}
+        </AreaChart>
+      );
+    } else {
+      chart = (
+        <LineChart data={data}>
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Line
+              key={s.key}
+              type="monotone"
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              stroke={seriesColor(s, i)}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          ))}
+        </LineChart>
+      );
+    }
+  }
+
+  return (
+    <div className={cn('w-full', className)}>
+      <div style={{ height }}>
+        <ResponsiveContainer width="100%" height="100%">
+          {chart}
+        </ResponsiveContainer>
+      </div>
+      {showLegend && <ChartLegend entries={legendEntries} />}
+    </div>
+  );
+}

package/src/index.ts

@@ -115,6 +115,7 @@ export { PageTransition, type PageTransitionProps } from './motion/PageTransitio
 
 // ─── Mechanics — behavior wrappers that play any children ────────────────────
 export { Carousel, type CarouselProps } from './mechanics/Carousel';
+export { Sortable, type SortableProps } from './mechanics/Sortable';
 
 // ─── Components — interactive ────────────────────────────────────────────────
 export { Spotlight, type SpotlightProps, type SpotlightGroup, type SpotlightItem } from './components/Spotlight';
@@ -125,6 +126,7 @@ export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type Command
 
 // ─── Components — data ───────────────────────────────────────────────────────
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { Chart, type ChartProps, type ChartSeries } from './components/Chart';
 export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';
 
 // ─── Components — notifications ──────────────────────────────────────────────

package/src/mechanics/Sortable.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  rectSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '@olwiba/cn';
+
+export interface SortableProps {
+  /** Item ids in render order — one per child, same order as `children`. */
+  items: string[];
+  /** Fired with the new id order after a drag completes. */
+  onReorder: (items: string[]) => void;
+  /** One element per id — pairing is by position, so keep orders aligned. */
+  children: React.ReactNode;
+  /** Layout of the sortable collection. @default 'vertical' */
+  direction?: 'vertical' | 'horizontal' | 'grid';
+  disabled?: boolean;
+  className?: string;
+  itemClassName?: string;
+}
+
+const strategies = {
+  vertical: verticalListSortingStrategy,
+  horizontal: horizontalListSortingStrategy,
+  grid: rectSortingStrategy,
+} as const;
+
+const containerClasses = {
+  vertical: 'flex flex-col gap-2',
+  horizontal: 'flex gap-2',
+  grid: 'grid gap-2',
+} as const;
+
+function SortableItem({
+  id,
+  disabled,
+  className,
+  children,
+}: {
+  id: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        'touch-none',
+        !disabled && 'cursor-grab active:cursor-grabbing',
+        isDragging && 'relative z-10 opacity-80',
+        className,
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Drag-to-reorder behavior — wraps any children and makes them sortable by
+ * pointer or keyboard. A mechanic, not a list component: feed it cards, rows,
+ * or tiles. Controlled: pass `items` (ids in order) and apply the new order
+ * in `onReorder`.
+ */
+export function Sortable({
+  items,
+  onReorder,
+  children,
+  direction = 'vertical',
+  disabled,
+  className,
+  itemClassName,
+}: SortableProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = items.indexOf(String(active.id));
+    const newIndex = items.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    onReorder(arrayMove(items, oldIndex, newIndex));
+  };
+
+  const childArray = React.Children.toArray(children);
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={items} strategy={strategies[direction]}>
+        <div className={cn(containerClasses[direction], className)}>
+          {childArray.map((child, i) =>
+            items[i] === undefined ? null : (
+              <SortableItem key={items[i]} id={items[i]} disabled={disabled} className={itemClassName}>
+                {child}
+              </SortableItem>
+            ),
+          )}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}