TypeScript

Generics, discriminated unions, and module resolution.

Generic components

DataTable is generic over your row type, so a wrong key is a compile error rather than an empty column.

import { DataTable, type Column } from '@the_viveksingh/vivek-ui'

interface Row { id: string; name: string }

const columns: Column<Row>[] = [
  { key: 'name', header: 'Name', sortable: true },
  // { key: 'nmae', ... }  <- a typo here fails to compile
]

<DataTable data={rows} rowKey="id" columns={columns} />

Discriminated unions

Six components take a union rather than one interface, so impossible prop combinations do not typecheck: Slider is single or range, Calendar and Combobox single or multiple, Accordion single or multiple. Their props tables show one section per branch for exactly that reason.

<Slider defaultValue={40} onValueChange={(n: number) => {}} />
<Slider range defaultValue={[20, 60]} onValueChange={(r: [number, number]) => {}} />

Module resolution

Verified on every release under bundler, node16 and legacy node, in both ESM and CJS. The ./charts subpath resolves under legacy node too, via typesVersions.

Prop types are exported

Every component exports its props interface, so you can extend or reuse it.

import { Button, type ButtonProps } from '@the_viveksingh/vivek-ui'

interface TrackedProps extends ButtonProps { event: string }

export function Tracked({ event, ...rest }: TrackedProps) {
  return <Button {...rest} onClick={() => track(event)} />
}

Back to the introduction