@otfdashkit/ui 0.1.0

package/src/charts/area-chart.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { cn } from '../utils/cn'
+
+const DEFAULT_COLORS = [
+  'hsl(var(--primary))',
+  'hsl(217 91% 60%)',
+  'hsl(142 71% 45%)',
+  'hsl(38 92% 50%)',
+  'hsl(280 65% 60%)',
+]
+
+export interface AreaChartProps {
+  data: Record<string, unknown>[]
+  dataKey: string | string[]
+  xAxisKey?: string
+  height?: number
+  colors?: string[]
+  showGrid?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  curved?: boolean
+  className?: string
+}
+
+export function AreaChart({
+  data,
+  dataKey,
+  xAxisKey = 'name',
+  height = 300,
+  colors = DEFAULT_COLORS,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  curved = true,
+  className,
+}: AreaChartProps) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey]
+  const curve = curved ? 'monotone' : 'linear'
+
+  return (
+    <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
+      <ResponsiveContainer width="100%" height={height}>
+        <RechartsAreaChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+          {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
+          <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          {showTooltip && (
+            <Tooltip
+              contentStyle={{
+                background: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: 'var(--radius)',
+                fontSize: 12,
+              }}
+            />
+          )}
+          {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+          {keys.map((key, i) => (
+            <Area
+              key={key}
+              type={curve}
+              dataKey={key}
+              stroke={colors[i % colors.length]}
+              fill={colors[i % colors.length]}
+              fillOpacity={0.15}
+              strokeWidth={2}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/src/charts/bar-chart.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import {
+  BarChart as RechartsBarChart,
+  ComposedChart,
+  Bar,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { cn } from '../utils/cn'
+
+const DEFAULT_COLORS = [
+  'hsl(var(--primary))',
+  'hsl(217 91% 60%)',
+  'hsl(142 71% 45%)',
+  'hsl(38 92% 50%)',
+  'hsl(280 65% 60%)',
+]
+
+export interface BarChartProps {
+  data: Record<string, unknown>[]
+  dataKey: string | string[]
+  xAxisKey?: string
+  height?: number
+  colors?: string[]
+  showGrid?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  layout?: 'vertical' | 'horizontal'
+  stacked?: boolean
+  /** Exact bar width/height in px. Defaults to 28 for a slim, elegant look. */
+  barSize?: number
+  /** Maximum bar width/height in px */
+  maxBarSize?: number
+  /** Gap between bar groups. Defaults to '45%' for generous whitespace. */
+  barCategoryGap?: number | string
+  /** Optional line overlay key — switches to ComposedChart with second Y axis */
+  lineDataKey?: string
+  lineColor?: string
+  lineStrokeWidth?: number
+  rightAxisFormatter?: (v: number) => string
+  rightAxisDomain?: [number | string, number | string]
+  className?: string
+}
+
+export function BarChart({
+  data,
+  dataKey,
+  xAxisKey = 'name',
+  height = 300,
+  colors = DEFAULT_COLORS,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  layout = 'horizontal',
+  stacked = false,
+  barSize = 28,
+  maxBarSize,
+  barCategoryGap = '45%',
+  lineDataKey,
+  lineColor = 'hsl(var(--foreground))',
+  lineStrokeWidth = 2,
+  rightAxisFormatter,
+  rightAxisDomain,
+  className,
+}: BarChartProps) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey]
+  const isVertical = layout === 'vertical'
+  const Chart = lineDataKey ? ComposedChart : RechartsBarChart
+
+  return (
+    <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
+      <ResponsiveContainer width="100%" height={height}>
+        <Chart
+          data={data.map((d) => ({ ...d }))}
+          layout={layout}
+          margin={{ top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 }}
+          barSize={barSize}
+          maxBarSize={maxBarSize}
+          barCategoryGap={barCategoryGap}
+        >
+          {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
+          {isVertical ? (
+            <>
+              <XAxis type="number" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+              <YAxis type="category" dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+            </>
+          ) : (
+            <>
+              <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+              <YAxis yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+              {lineDataKey && (
+                <YAxis
+                  yAxisId="right"
+                  orientation="right"
+                  tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }}
+                  axisLine={false}
+                  tickLine={false}
+                  domain={rightAxisDomain}
+                  tickFormatter={rightAxisFormatter}
+                />
+              )}
+            </>
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={false}
+              contentStyle={{
+                background: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: 'var(--radius)',
+                fontSize: 12,
+              }}
+            />
+          )}
+          {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+          {keys.map((key, i) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              yAxisId={isVertical ? undefined : 'left'}
+              fill={colors[i % colors.length]}
+              radius={isVertical ? [0, 6, 6, 0] : [6, 6, 0, 0]}
+              stackId={stacked ? 'stack' : undefined}
+            />
+          ))}
+          {lineDataKey && !isVertical && (
+            <Line
+              type="monotone"
+              dataKey={lineDataKey}
+              yAxisId="right"
+              stroke={lineColor}
+              strokeWidth={lineStrokeWidth}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          )}
+        </Chart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/src/charts/heatmap.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from 'react'
+import { cn } from '../utils/cn'
+
+export interface HeatmapDay {
+  date: string
+  value: number
+}
+
+export interface HeatmapProps {
+  data: HeatmapDay[]
+  endDate?: Date
+  weeks?: number
+  cellSize?: number
+  gap?: number
+  colorScale?: string[]
+  className?: string
+  showMonthLabels?: boolean
+  showDayLabels?: boolean
+  showLegend?: boolean
+  formatTooltip?: (day: HeatmapDay) => string
+}
+
+const DEFAULT_SCALE = [
+  'hsl(var(--muted))',
+  'hsl(var(--primary) / 0.25)',
+  'hsl(var(--primary) / 0.5)',
+  'hsl(var(--primary) / 0.75)',
+  'hsl(var(--primary))',
+]
+
+const MONTHS = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
+const DAYS = ['', 'M', '', 'W', '', 'F', '']
+
+function dateKey(d: Date) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function startOfWeek(d: Date) {
+  const out = new Date(d)
+  const day = out.getDay()
+  const diff = day === 0 ? -6 : 1 - day
+  out.setDate(out.getDate() + diff)
+  out.setHours(0, 0, 0, 0)
+  return out
+}
+
+export function Heatmap({
+  data,
+  endDate = new Date(),
+  weeks = 53,
+  cellSize = 11,
+  gap = 3,
+  colorScale = DEFAULT_SCALE,
+  className,
+  showMonthLabels = true,
+  showDayLabels = true,
+  showLegend = true,
+  formatTooltip,
+}: HeatmapProps) {
+  const valueByDate = useMemo(() => {
+    const m = new Map<string, number>()
+    for (const d of data) m.set(d.date, d.value)
+    return m
+  }, [data])
+
+  const max = useMemo(() => Math.max(1, ...data.map((d) => d.value)), [data])
+
+  const grid = useMemo(() => {
+    const end = startOfWeek(endDate)
+    end.setDate(end.getDate() + 6)
+    const cols: { date: Date; value: number; key: string }[][] = []
+    const cursor = new Date(end)
+    cursor.setDate(cursor.getDate() - (weeks * 7 - 1))
+    for (let w = 0; w < weeks; w++) {
+      const col: { date: Date; value: number; key: string }[] = []
+      for (let dow = 0; dow < 7; dow++) {
+        const dt = new Date(cursor)
+        const k = dateKey(dt)
+        col.push({ date: dt, value: valueByDate.get(k) ?? 0, key: k })
+        cursor.setDate(cursor.getDate() + 1)
+      }
+      cols.push(col)
+    }
+    return cols
+  }, [endDate, weeks, valueByDate])
+
+  const monthLabels = useMemo(() => {
+    const labels: { col: number; label: string }[] = []
+    let lastMonth = -1
+    grid.forEach((col, i) => {
+      const first = col[0]
+      if (!first) return
+      const monthOfFirst = first.date.getMonth()
+      if (monthOfFirst !== lastMonth && first.date.getDate() <= 7) {
+        labels.push({ col: i, label: MONTHS[monthOfFirst] ?? '' })
+        lastMonth = monthOfFirst
+      }
+    })
+    return labels
+  }, [grid])
+
+  function colorFor(value: number) {
+    if (value === 0) return colorScale[0] ?? 'transparent'
+    const t = value / max
+    const idx = Math.min(colorScale.length - 1, 1 + Math.floor(t * (colorScale.length - 2)))
+    return colorScale[idx] ?? colorScale[0] ?? 'transparent'
+  }
+
+  const dx = cellSize + gap
+  const labelGutter = showDayLabels ? 18 : 0
+  const monthGutter = showMonthLabels ? 16 : 0
+  const width = labelGutter + weeks * dx
+  const height = monthGutter + 7 * dx
+
+  return (
+    <div data-slot="heatmap" className={cn('inline-flex flex-col gap-2', className)}>
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className="text-[hsl(var(--muted-foreground))]"
+        role="img"
+      >
+        {showMonthLabels &&
+          monthLabels.map(({ col, label }) => (
+            <text
+              key={`m-${col}-${label}`}
+              x={labelGutter + col * dx}
+              y={11}
+              fontSize={10}
+              fill="currentColor"
+            >
+              {label}
+            </text>
+          ))}
+        {showDayLabels &&
+          DAYS.map((d, i) =>
+            d ? (
+              <text
+                key={`d-${i}`}
+                x={0}
+                y={monthGutter + i * dx + cellSize - 1}
+                fontSize={9}
+                fill="currentColor"
+              >
+                {d}
+              </text>
+            ) : null,
+          )}
+        {grid.map((col, ci) =>
+          col.map((cell, ri) => (
+            <rect
+              key={cell.key}
+              x={labelGutter + ci * dx}
+              y={monthGutter + ri * dx}
+              width={cellSize}
+              height={cellSize}
+              rx={2}
+              fill={colorFor(cell.value)}
+            >
+              <title>
+                {formatTooltip
+                  ? formatTooltip({ date: cell.key, value: cell.value })
+                  : `${cell.key}: ${cell.value}`}
+              </title>
+            </rect>
+          )),
+        )}
+      </svg>
+      {showLegend && (
+        <div className="flex items-center gap-1.5 text-[10px] text-[hsl(var(--muted-foreground))] self-end">
+          <span>Fewer</span>
+          {colorScale.map((c, i) => (
+            <span
+              key={i}
+              className="rounded-[2px]"
+              style={{ background: c, width: cellSize, height: cellSize }}
+            />
+          ))}
+          <span>More</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/charts/line-chart.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { cn } from '../utils/cn'
+
+const DEFAULT_COLORS = [
+  'hsl(var(--primary))',
+  'hsl(217 91% 60%)',
+  'hsl(142 71% 45%)',
+  'hsl(38 92% 50%)',
+  'hsl(280 65% 60%)',
+]
+
+export interface LineChartProps {
+  data: Record<string, unknown>[]
+  dataKey: string | string[]
+  xAxisKey?: string
+  height?: number
+  colors?: string[]
+  showGrid?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  curved?: boolean
+  dotted?: boolean
+  strokeWidth?: number
+  className?: string
+}
+
+export function LineChart({
+  data,
+  dataKey,
+  xAxisKey = 'name',
+  height = 300,
+  colors = DEFAULT_COLORS,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  curved = true,
+  dotted = false,
+  strokeWidth = 2,
+  className,
+}: LineChartProps) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey]
+  const curve = curved ? 'monotone' : 'linear'
+  const dash = dotted ? '4 4' : undefined
+
+  return (
+    <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
+      <ResponsiveContainer width="100%" height={height}>
+        <RechartsLineChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+          {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
+          <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          {showTooltip && (
+            <Tooltip
+              contentStyle={{
+                background: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: 'var(--radius)',
+                fontSize: 12,
+              }}
+            />
+          )}
+          {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+          {keys.map((key, i) => (
+            <Line
+              key={key}
+              type={curve}
+              dataKey={key}
+              stroke={colors[i % colors.length]}
+              strokeWidth={strokeWidth}
+              strokeDasharray={dash}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          ))}
+        </RechartsLineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/src/charts/sparkline.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+export interface SparklineProps {
+  data: number[]
+  type?: 'line' | 'area'
+  color?: string
+  height?: number
+  width?: number
+  className?: string
+}
+
+function buildPath(data: number[], w: number, h: number): string {
+  if (data.length < 2) return ''
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+  const pad = 2
+  const points = data.map((v, i) => {
+    const x = pad + (i / (data.length - 1)) * (w - pad * 2)
+    const y = pad + (1 - (v - min) / range) * (h - pad * 2)
+    return `${x},${y}`
+  })
+  return `M ${points.join(' L ')}`
+}
+
+export function Sparkline({
+  data,
+  type = 'line',
+  color = 'hsl(var(--primary))',
+  height = 32,
+  width = 100,
+  className,
+}: SparklineProps) {
+  const path = buildPath(data, width, height)
+  if (!path) return null
+
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+  const pad = 2
+  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2)
+
+  const areaPath = type === 'area'
+    ? `${path} L ${width - pad},${height - pad} L ${pad},${height - pad} Z`
+    : undefined
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      className={className}
+      style={{ display: 'inline-block', verticalAlign: 'middle' }}
+    >
+      {type === 'area' && areaPath && (
+        <path d={areaPath} fill={color} fillOpacity={0.15} stroke="none" />
+      )}
+      <path d={path} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx={width - pad} cy={lastY} r={2} fill={color} />
+    </svg>
+  )
+}

package/src/charts/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../../utils/cn'

package/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Banner } from './Banner'
+
+// TODO: add all variants
+const meta: Meta<typeof Banner> = {
+  title: 'Components/Banner',
+  component: Banner,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Banner>
+
+export const Default: Story = {}

package/src/components/Banner/Banner.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Banner } from './Banner'
+
+// TODO: add full a11y + variant tests
+describe('Banner', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Banner />)).not.toThrow()
+  })
+})