@nous-research/ui 0.14.2 → 0.16.0

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
+}

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

@@ -0,0 +1,265 @@
+'use client'
+
+import {
+  type ComponentType,
+  type HTMLAttributes,
+  type RefObject,
+  useEffect,
+  useState
+} from 'react'
+
+import { useSmoothControls } from '../../../hooks/use-smooth-controls'
+import {
+  type BlendColors,
+  type BlendModeProps
+} from '../blend-mode'
+
+export const accessor = <T, R>(key: ((d: T) => R) | keyof T) =>
+  typeof key === 'function' ? key : (d: T) => d[key] as R
+
+export const CHART_MARGINS = {
+  marginBottom: 24,
+  marginLeft: 36,
+  marginRight: 12,
+  marginTop: 8
+} as const
+
+export const CHART_STYLE = {
+  background: 'transparent',
+  color: 'var(--midground)',
+  fontFamily: 'var(--font-mono), monospace',
+  fontSize: '11px',
+  overflow: 'hidden'
+} as const
+
+export const stylePlot = (plot: HTMLElement) => {
+  plot.querySelectorAll('[aria-label*="grid"] line').forEach(el =>
+    Object.assign((el as SVGLineElement).style, {
+      stroke: 'currentColor',
+      strokeDasharray: '2,4',
+      strokeOpacity: '0.3'
+    })
+  )
+
+  plot.querySelectorAll('text').forEach(el =>
+    Object.assign((el as SVGTextElement).style, {
+      fontSize: '11px',
+      fontWeight: '600'
+    })
+  )
+
+  plot
+    .querySelectorAll('[aria-label*="label"] text')
+    .forEach(el => ((el as SVGTextElement).style.opacity = '0.4'))
+
+  const svg = plot.querySelector('svg')
+  svg && (svg.style.display = 'block')
+}
+
+export const useDims = (ref: RefObject<HTMLElement | null>) => {
+  const [dims, setDims] = useState({ h: 0, w: 0 })
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const update = () => {
+      const { height: h, width: w } = ref.current!.getBoundingClientRect()
+      const [rh, rw] = [Math.round(h), Math.round(w)]
+
+      rh &&
+        rw &&
+        setDims(st => (st.h === rh && st.w === rw ? st : { h: rh, w: rw }))
+    }
+
+    update()
+
+    const ro = new ResizeObserver(update)
+    ro.observe(ref.current)
+
+    return () => ro.disconnect()
+  }, [ref])
+
+  return dims
+}
+
+export const Crosshair = ({
+  color = 'var(--foreground)',
+  containerWidth,
+  height,
+  points,
+  x
+}: CrosshairState & {
+  color?: string
+  containerWidth: number
+  height: number
+}) => {
+  if (x === null) {
+    return null
+  }
+
+  const nearRight = x > containerWidth * 0.7
+
+  return (
+    <>
+      <div
+        className="pointer-events-none absolute top-0 w-px"
+        style={{ background: color, height, left: x, opacity: 0.4 }}
+      />
+
+      {points?.map((pt, i) => (
+        <div
+          className="pointer-events-none absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+          key={i}
+          style={{ background: color, left: x, top: pt.dotY }}
+        />
+      ))}
+
+      {points?.map((pt, i) => (
+        <div
+          className="tooltip absolute -translate-y-1/2"
+          key={i}
+          style={{
+            left: nearRight ? undefined : x + 12,
+            right: nearRight ? containerWidth - x + 12 : undefined,
+            top: pt.dotY
+          }}
+        >
+          {pt.tooltip}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export const setupCrosshair = <T extends DataPoint>(
+  container: HTMLElement,
+  data: T[],
+  getX: (d: T) => number,
+  getY: (d: T) => number,
+  yDomain: [number, number],
+  formatTooltip: (d: T) => string,
+  onUpdate: (state: CrosshairState) => void,
+  getZ?: (d: T) => unknown
+) => {
+  if (!data.length) {
+    return () => {}
+  }
+
+  const { marginBottom, marginLeft, marginRight, marginTop } = CHART_MARGINS
+
+  const seriesMap = data.reduce((m, d) => {
+    const key = getZ?.(d) ?? '__single__'
+    m.set(key, [...(m.get(key) ?? []), d])
+
+    return m
+  }, new Map<unknown, T[]>())
+
+  const sortedSeries = [...seriesMap.values()].map(s =>
+    [...s].sort((a, b) => getX(a) - getX(b))
+  )
+
+  const allX = data.map(getX)
+  const [xMin, xMax] = [Math.min(...allX), Math.max(...allX)]
+
+  const onMove = (e: MouseEvent) => {
+    const rect = container.getBoundingClientRect()
+    const [localX, localY] = [e.clientX - rect.left, e.clientY - rect.top]
+
+    if (
+      localX < 0 ||
+      localX > rect.width ||
+      localY < 0 ||
+      localY > rect.height
+    ) {
+      return onUpdate({ x: null })
+    }
+
+    const [chartLeft, chartRight] = [marginLeft, rect.width - marginRight]
+    const [chartTop, chartBottom] = [marginTop, rect.height - marginBottom]
+
+    if (localX < chartLeft || localX > chartRight) {
+      return onUpdate({ x: null })
+    }
+
+    const pct = (localX - chartLeft) / (chartRight - chartLeft)
+    const xVal = xMin + pct * (xMax - xMin)
+
+    const points = sortedSeries.map(sorted => {
+      const idx = sorted.findIndex(d => getX(d) >= xVal)
+
+      const [closest, yVal] =
+        idx <= 0
+          ? [sorted[0], getY(sorted[0])]
+          : idx >= sorted.length
+            ? [sorted.at(-1)!, getY(sorted.at(-1)!)]
+            : (() => {
+                const [left, right] = [sorted[idx - 1], sorted[idx]]
+                const t = (xVal - getX(left)) / (getX(right) - getX(left))
+
+                return [
+                  t < 0.5 ? left : right,
+                  getY(left) + t * (getY(right) - getY(left))
+                ] as const
+              })()
+
+      const yPct = (yVal - yDomain[0]) / (yDomain[1] - yDomain[0])
+
+      return {
+        dotY: chartBottom - yPct * (chartBottom - chartTop),
+        tooltip: formatTooltip(closest)
+      }
+    })
+
+    onUpdate({ points, x: localX })
+  }
+
+  document.addEventListener('mousemove', onMove)
+
+  return () => document.removeEventListener('mousemove', onMove)
+}
+
+export const withChartBlend = <P extends BlendModeProps>(
+  Component: ComponentType<P>
+) => {
+  const Wrapped = (props: Omit<P, keyof BlendColors>) => {
+    const { color } = useSmoothControls(
+      'Charts',
+      { color: { value: '#709fea' } },
+      { collapsed: true }
+    )
+
+    return <Component {...(props as P)} color={color} />
+  }
+
+  Wrapped.displayName = `withChartBlend(${Component.displayName ?? Component.name})`
+
+  return Wrapped
+}
+
+export type DataPoint = Record<string, unknown>
+
+export interface CrosshairPoint {
+  dotY: number
+  tooltip: string
+}
+
+export interface CrosshairState {
+  points?: CrosshairPoint[]
+  x: null | number
+}
+
+export interface ChartProps<T = DataPoint>
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  data?: T[]
+  formatTooltip?: (d: T) => string
+  formatX?: (v: unknown) => string
+  formatY?: (v: number) => string
+  height?: number
+  x?: ((d: T) => unknown) | keyof T
+  xTicks?: number | number[]
+  y?: ((d: T) => number) | keyof T
+  yDomain?: [number, number]
+  yTicks?: number | number[]
+}

package/src/ui/components/grid/grid.css

@@ -0,0 +1,79 @@
+.g {
+  @apply grid grid-cols-1 border-l border-current/20;
+
+  &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) > .gc:nth-child(2) {
+    @apply -order-1;
+  }
+
+  @media (width >= 40rem) {
+    &:has(> .gc:nth-child(2)) {
+      @apply grid-cols-2;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4)))
+      > .gc:nth-child(2) {
+      @apply -order-1 col-span-full;
+    }
+  }
+
+  @media (width >= 64rem) {
+    &:has(> .gc:nth-child(3)) {
+      @apply grid-cols-3;
+    }
+
+    &:has(> .gc:nth-child(4)) {
+      @apply grid-cols-4;
+    }
+
+    &:has(> .gc:nth-child(5)) {
+      @apply grid-cols-5;
+    }
+
+    &:has(> .gc:nth-child(6)) {
+      @apply grid-cols-6;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) {
+      grid-template-columns: 1fr 2fr 1fr;
+
+      > .gc:nth-child(2) {
+        @apply order-none col-auto;
+      }
+    }
+  }
+
+  &:last-child {
+    @apply border-b;
+  }
+
+  &:first-child,
+  + .g > .gc,
+  > .g {
+    @apply border-t;
+  }
+
+  .g {
+    @apply border-l-0;
+  }
+
+  &:not(:last-child) .gc:last-child {
+    @apply border-b-0;
+  }
+
+  .gc {
+    min-width: 0;
+    @apply border-r border-inherit p-4;
+
+    &:has(> .gc) {
+      @apply p-0;
+
+      > .gc {
+        @apply border-r-0 not-first:border-t last:border-b-0;
+      }
+    }
+  }
+
+  .post.gc {
+    @apply lg:p-12;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { createElement } from 'react'
+
+import { cn, polyRef } from '../../../utils'
+
+export const Grid = polyRef<'div'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'div') as React.ElementType, {
+    ...rest,
+    className: cn('g', className),
+    ref
+  })
+)
+
+export const Cell = polyRef<'div'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'div') as React.ElementType, {
+    ...rest,
+    className: cn('gc', className),
+    ref
+  })
+)

package/src/ui/components/hover-bg.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { HoverBg } from './hover-bg'
+import { Typography } from './typography'
+
+const meta = {
+  component: HoverBg,
+  title: 'Components/HoverBg'
+} satisfies Meta<typeof HoverBg>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Row: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      {['Alpha', 'Beta', 'Gamma'].map(label => (
+        <div
+          className="group relative flex items-center justify-center px-6 py-3"
+          key={label}
+        >
+          <Typography mono>{label}</Typography>
+          <HoverBg />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/components/hover-bg.tsx

@@ -0,0 +1,15 @@
+import { createElement } from 'react'
+
+import { cn, polyRef } from '../../utils'
+
+export const HoverBg = polyRef<'span'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'span') as React.ElementType, {
+    ...rest,
+    className: cn(
+      'absolute inset-1 bg-midground pointer-events-none',
+      'opacity-5 transition-opacity duration-250 group-hover:opacity-5 opacity-0 group-hover:duration-0',
+      className
+    ),
+    ref
+  })
+)

package/src/ui/components/icons/arrow.tsx

@@ -0,0 +1,42 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function ArrowIcon({
+  className,
+  direction = 'down',
+  ...props
+}: ArrowIconProps) {
+  return (
+    <svg
+      className={cn(
+        direction === 'up' && 'rotate-180',
+        direction === 'left' && 'rotate-90',
+        direction === 'right' && '-rotate-90',
+        'origin-center',
+        className
+      )}
+      fill="none"
+      viewBox="0 0 13 15"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M5 15V0h2.50075v15z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M10 12.5007H2.5V9.99998H10zM12.4976 9.99951H9.99805v-2.4996h2.49955zM2.4996 9.99951H0v-2.4996h2.4996z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+interface ArrowIconProps extends SVGProps<SVGSVGElement> {
+  direction?: 'down' | 'left' | 'right' | 'up'
+}

package/src/ui/components/icons/check.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function CheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 12 12" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M10.28 2.22a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L1.72 6.28a.75.75 0 1 1 1.06-1.06L4.5 6.94l4.72-4.72a.75.75 0 0 1 1.06 0Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}