@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/forms.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { Checkbox } from './checkbox'
+import { Input } from './input'
+import { Label } from './label'
+import { Select, SelectOption } from './select'
+import { Separator } from './separator'
+import { Switch } from './switch'
+
+const meta: Meta = {
+  title: 'Components/Forms/All Forms'
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const AllFormControls: Story = {
+  render: () => {
+    function FormDemo() {
+      const [name, setName] = useState('Hermes')
+      const [email, setEmail] = useState('hermes@nousresearch.com')
+      const [provider, setProvider] = useState('anthropic')
+      const [logging, setLogging] = useState(true)
+      const [telemetry, setTelemetry] = useState(false)
+      const [terms, setTerms] = useState(false)
+      const [newsletter, setNewsletter] = useState(true)
+
+      return (
+        <div className="flex w-full max-w-lg flex-col gap-6">
+          <div className="flex flex-col gap-1">
+            <h2 className="font-expanded text-sm font-bold tracking-[0.08em] uppercase">
+              Form Controls
+            </h2>
+
+            <p className="font-mondwest text-xs text-midground/60">
+              All form primitives from the design system.
+            </p>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Text Inputs</Label>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-name">Name</Label>
+              <Input
+                id="form-name"
+                onChange={e => setName(e.target.value)}
+                placeholder="Enter your name"
+                value={name}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-email">Email</Label>
+              <Input
+                id="form-email"
+                onChange={e => setEmail(e.target.value)}
+                placeholder="Enter your email"
+                type="email"
+                value={email}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-disabled">Disabled Input</Label>
+              <Input
+                disabled
+                id="form-disabled"
+                placeholder="Cannot edit"
+                value="Read-only value"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Select</Label>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-provider">Provider</Label>
+
+              <Select
+                onValueChange={setProvider}
+                placeholder="Choose a provider…"
+                value={provider}
+              >
+                <SelectOption value="openai">OpenAI</SelectOption>
+                <SelectOption value="anthropic">Anthropic</SelectOption>
+                <SelectOption value="google">Google</SelectOption>
+                <SelectOption value="mistral">Mistral</SelectOption>
+              </Select>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Switches</Label>
+
+            <label className="flex items-center justify-between">
+              <span className="text-sm">Enable logging</span>
+              <Switch checked={logging} onCheckedChange={setLogging} />
+            </label>
+
+            <label className="flex items-center justify-between">
+              <span className="text-sm">Send telemetry</span>
+              <Switch checked={telemetry} onCheckedChange={setTelemetry} />
+            </label>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Checkboxes</Label>
+
+            <div className="flex items-center gap-2.5">
+              <Checkbox
+                checked={terms}
+                id="form-terms"
+                onCheckedChange={setTerms}
+              />
+
+              <label className="cursor-pointer text-sm" htmlFor="form-terms">
+                Accept terms and conditions
+              </label>
+            </div>
+
+            <div className="flex items-center gap-2.5">
+              <Checkbox
+                checked={newsletter}
+                id="form-newsletter"
+                onCheckedChange={setNewsletter}
+              />
+
+              <label className="cursor-pointer text-sm" htmlFor="form-newsletter">
+                Subscribe to newsletter
+              </label>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Buttons</Label>
+
+            <div className="flex flex-wrap gap-2">
+              <Button>Primary</Button>
+              <Button outlined>Outlined</Button>
+              <Button invert>Inverted</Button>
+              <Button destructive>Destructive</Button>
+              <Button disabled>Disabled</Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center justify-end gap-2">
+            <Button outlined>Cancel</Button>
+            <Button>Save Changes</Button>
+          </div>
+        </div>
+      )
+    }
+
+    return <FormDemo />
+  }
+}

package/src/ui/components/graphs/bar-chart.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import * as Plot from '@observablehq/plot'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { cn } from '../../../utils'
+
+import {
+  accessor,
+  CHART_MARGINS,
+  CHART_STYLE,
+  type ChartProps,
+  Crosshair,
+  type CrosshairState,
+  type DataPoint,
+  setupCrosshair,
+  stylePlot,
+  useDims,
+  withChartBlend
+} from './utils'
+
+export const BarChart = withChartBlend(
+  <T extends DataPoint>({
+    backgroundColor: _,
+    className,
+    color: fillColor,
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    x = 'label' as keyof T,
+    xDomain,
+    xTicks = [0, 50000, 100000],
+    y = 'value' as keyof T,
+    yDomain = [0, 10],
+    yTicks = [10, 8, 4, 2],
+    ...props
+  }: BarChartProps<T> & { backgroundColor?: string; color?: string }) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const plotRef = useRef<HTMLDivElement>(null)
+    const [crosshair, setCrosshair] = useState<CrosshairState>({ x: null })
+    const dims = useDims(ref)
+
+    const formatX = useCallback(
+      (v: unknown) =>
+        formatXProp?.(v) ??
+        (typeof v === 'number' ? v.toLocaleString('en-US') : String(v)),
+      [formatXProp]
+    )
+
+    const formatY = useCallback(
+      (v: number) => formatYProp?.(v) ?? String(v),
+      [formatYProp]
+    )
+
+    const getX = useMemo(() => accessor<T, unknown>(x), [x])
+    const getY = useMemo(() => accessor<T, number>(y), [y])
+
+    useEffect(() => {
+      if (
+        !ref.current ||
+        !plotRef.current ||
+        !data.length ||
+        !dims.h ||
+        !dims.w
+      ) {
+        return
+      }
+
+      plotRef.current.innerHTML = ''
+
+      const [xMin, xMax] = [
+        xDomain?.[0] ?? 0,
+        xDomain?.[1] ?? Math.max(...data.map(d => getX(d) as number))
+      ]
+
+      const plot = Plot.plot({
+        ...CHART_MARGINS,
+        height: dims.h,
+        marks: [
+          Plot.rectY(data, {
+            fill: fillColor ?? 'currentColor',
+            fillOpacity: 0.3,
+            interval: (xMax - xMin) / data.length,
+            x: getX as (d: T) => unknown,
+            y: getY
+          }),
+          Plot.axisX({ tickFormat: formatX, ticks: xTicks })
+        ],
+        style: CHART_STYLE,
+        width: dims.w,
+        x: { domain: [xMin, xMax], label: null, type: 'linear' },
+        y: {
+          domain: yDomain,
+          grid: true,
+          label: null,
+          tickFormat: formatY,
+          ticks: yTicks
+        }
+      })
+
+      stylePlot(plot as HTMLElement)
+      plotRef.current.appendChild(plot)
+
+      const cleanup = setupCrosshair(
+        ref.current,
+        data,
+        d => getX(d) as number,
+        getY,
+        yDomain,
+        d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`,
+        setCrosshair
+      )
+
+      return cleanup
+    }, [
+      data,
+      dims.h,
+      dims.w,
+      fillColor,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      xDomain,
+      xTicks,
+      yDomain,
+      yTicks
+    ])
+
+    return (
+      <div
+        className={cn('relative aspect-4/1 w-full overflow-clip', className)}
+        ref={ref}
+        {...props}
+      >
+        <div className="absolute inset-0" ref={plotRef} />
+
+        <Crosshair
+          color={fillColor}
+          containerWidth={dims.w}
+          height={dims.h}
+          {...crosshair}
+        />
+      </div>
+    )
+  }
+)
+
+interface BarChartProps<T extends DataPoint> extends ChartProps<T> {
+  xDomain?: [number, number]
+}

package/src/ui/components/graphs/index.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { BarChart, LineChart } from '../graphs'
+import { Small } from '../typography/small'
+
+const LINE_DATA = (['primary', 'secondary', 'tertiary'] as const).flatMap(
+  (series, si) =>
+    [0, 50000, 100000, 150000].map((label, i) => ({
+      label,
+      series,
+      value: 0.15 + si * 0.1 + (i % 2) * 0.05 + Math.sin(i + si) * 0.08
+    }))
+)
+
+const BAR_DATA = (() => {
+  let x = 42
+  const f = () => (x = (1103515245 * x + 12345) % 0x80000000) / 0x80000000
+
+  return Array.from({ length: 100 }, (_, i) => ({
+    label: (i / 99) * 150000,
+    value: f() * 10
+  }))
+})()
+
+const meta = {
+  parameters: { layout: 'padded' },
+  title: 'Components/Data Display/Graphs'
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Line: Story = {
+  render: () => (
+    <div>
+      <Small className="mb-5 block opacity-50">LineChart</Small>
+
+      <LineChart
+        data={LINE_DATA}
+        series="series"
+        x="label"
+        y="value"
+        yDomain={[0, 0.5]}
+      />
+    </div>
+  )
+}
+
+export const Bar: Story = {
+  render: () => (
+    <div>
+      <Small className="mb-5 block opacity-50">BarChart</Small>
+
+      <BarChart
+        data={BAR_DATA}
+        x="label"
+        xDomain={[0, 150000]}
+        y="value"
+        yDomain={[0, 10]}
+      />
+    </div>
+  )
+}

package/src/ui/components/graphs/index.tsx

@@ -0,0 +1,4 @@
+export { BarChart } from './bar-chart'
+export { LineChart } from './line-chart'
+
+export * from './utils'

package/src/ui/components/graphs/line-chart.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import * as Plot from '@observablehq/plot'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { cn } from '../../../utils'
+
+import {
+  accessor,
+  CHART_MARGINS,
+  CHART_STYLE,
+  type ChartProps,
+  Crosshair,
+  type CrosshairState,
+  type DataPoint,
+  setupCrosshair,
+  stylePlot,
+  useDims,
+  withChartBlend
+} from './utils'
+
+export const LineChart = withChartBlend(
+  <T extends DataPoint>({
+    backgroundColor: _,
+    className,
+    color: strokeColor,
+    curve = 'natural',
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    series = 'series' as keyof T,
+    showArea = false,
+    x = 'label' as keyof T,
+    xTicks,
+    y = 'value' as keyof T,
+    yDomain = [0, 0.5],
+    yTicks = 4,
+    ...props
+  }: LineChartProps<T> & { backgroundColor?: string; color?: string }) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const plotRef = useRef<HTMLDivElement>(null)
+    const [hovered, setHovered] = useState<null | T>(null)
+    const [crosshair, setCrosshair] = useState<CrosshairState>({ x: null })
+    const dims = useDims(ref)
+
+    const formatX = useCallback(
+      (v: unknown) =>
+        formatXProp?.(v) ??
+        ((v as number) >= 1e3 ? `${(v as number) / 1e3}k` : `${v}`),
+      [formatXProp]
+    )
+
+    const formatY = useCallback(
+      (v: number) => formatYProp?.(v) ?? `${Math.round(v * 100)}%`,
+      [formatYProp]
+    )
+
+    const getX = useMemo(() => accessor<T, unknown>(x), [x])
+    const getY = useMemo(() => accessor<T, number>(y), [y])
+    const getZ = useCallback((d: T) => d[series], [series])
+
+    useEffect(() => {
+      if (
+        !ref.current ||
+        !plotRef.current ||
+        !data.length ||
+        !dims.h ||
+        !dims.w
+      ) {
+        return
+      }
+
+      plotRef.current.innerHTML = ''
+
+      const hasSeries = data.some(d => d[series] !== undefined)
+
+      const seriesIdx = hasSeries
+        ? data.reduce(
+            (acc, d, i) => ((acc[d[series] as string] ??= i), acc),
+            {} as Record<string, number>
+          )
+        : {}
+
+      const n = Object.keys(seriesIdx).length
+
+      const opacity = (d: T) => {
+        if (!hasSeries) {
+          return 1
+        }
+
+        if (hovered) {
+          return d[series] === hovered[series] ? 1 : 0.2
+        }
+
+        return 1 - (seriesIdx[d[series] as string] / Math.max(n - 1, 1)) * 0.2
+      }
+
+      const lineOpts = {
+        curve,
+        x: getX as (d: T) => unknown,
+        y: getY,
+        ...(hasSeries && { z: getZ as (d: T) => unknown })
+      }
+
+      const plot = Plot.plot({
+        ...CHART_MARGINS,
+        height: dims.h,
+        marks: [
+          ...(showArea
+            ? [
+                Plot.areaY(data, {
+                  ...lineOpts,
+                  fill: strokeColor,
+                  fillOpacity: 0.15,
+                  y1: yDomain[0]
+                })
+              ]
+            : []),
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: 'transparent',
+            strokeWidth: 16
+          }),
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: strokeColor,
+            strokeOpacity: opacity,
+            strokeWidth: 1.5
+          })
+        ],
+        style: { ...CHART_STYLE, fontStretch: 'expanded' },
+        width: dims.w,
+        x: { label: null, tickFormat: formatX, ticks: xTicks },
+        y: {
+          domain: yDomain,
+          grid: true,
+          label: null,
+          tickFormat: formatY,
+          ticks: yTicks
+        }
+      })
+
+      plot.addEventListener('input', () => setHovered(plot.value as null | T))
+      stylePlot(plot as HTMLElement)
+
+      plot.querySelectorAll('g[aria-label="line"] path').forEach(el =>
+        Object.assign((el as SVGPathElement).style, {
+          transition: 'stroke-opacity 0.2s'
+        })
+      )
+
+      plotRef.current.appendChild(plot)
+
+      const cleanup = setupCrosshair(
+        ref.current,
+        data,
+        d => getX(d) as number,
+        getY,
+        yDomain,
+        d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`,
+        setCrosshair,
+        hasSeries ? d => getZ(d) : undefined
+      )
+
+      return () => {
+        cleanup()
+        plot.parentNode && plot.remove()
+      }
+    }, [
+      curve,
+      data,
+      dims.h,
+      dims.w,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      getZ,
+      hovered,
+      series,
+      showArea,
+      strokeColor,
+      xTicks,
+      yDomain,
+      yTicks
+    ])
+
+    return (
+      <div
+        className={cn('relative aspect-4/1 w-full overflow-clip', className)}
+        ref={ref}
+        {...props}
+      >
+        <div className="absolute inset-0" ref={plotRef} />
+
+        <Crosshair
+          color={strokeColor}
+          containerWidth={dims.w}
+          height={dims.h}
+          {...crosshair}
+        />
+      </div>
+    )
+  }
+)
+
+interface LineChartProps<T extends DataPoint> extends ChartProps<T> {
+  curve?: 'basis' | 'catmull-rom' | 'linear' | 'natural' | 'step'
+  series?: keyof T
+  showArea?: boolean
+}