JSPM

dataflow-ui

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q68128F
  • License MIT

A React component library for data-heavy interfaces — tables, filters, charts, and UI primitives

Package Exports

  • dataflow-ui
  • dataflow-ui/dist/index.cjs.js
  • dataflow-ui/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dataflow-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dataflow-ui

A React component library for data-heavy interfaces — tables, filters, charts, and core UI primitives. Built with TypeScript, Tailwind v4, and Recharts.

Live Storybook →

Install

npm install dataflow-ui

Peer dependencies

npm install react react-dom recharts

Setup

Import the stylesheet in your app entry point:

import 'dataflow-ui/dist/index.css'

Components

Button

import { Button } from 'dataflow-ui'

<Button variant="primary" size="md">Save</Button>
<Button variant="secondary" loading>Saving…</Button>
<Button variant="danger">Delete</Button>

Variants: primary | secondary | ghost | danger
Sizes: sm | md | lg

Input / Select / Checkbox / Toggle

import { Input, Select, Checkbox, Toggle } from 'dataflow-ui'

<Input label="Email" placeholder="you@example.com" error="Required" />

<Select label="Role" options={[{ label: 'Admin', value: 'admin' }]} />

<Checkbox label="Remember me" checked={checked} onChange={setChecked} />

<Toggle checked={enabled} onChange={setEnabled} />

Badge / Tag / Tooltip

import { Badge, Tag, Tooltip } from 'dataflow-ui'

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>

<Tag onRemove={() => remove(id)}>typescript</Tag>

<Tooltip content="Saved automatically">
  <span>hover me</span>
</Tooltip>

Badge variants: default | success | warning | danger | info

FilterBar

Composable filter row — combine SearchInput, MultiSelect, and DateRangePicker inside a FilterBar shell.

import { FilterBar, SearchInput, MultiSelect, DateRangePicker } from 'dataflow-ui'

<FilterBar label="Filters" onClearAll={clearAll}>
  <SearchInput value={q} onChange={setQ} placeholder="Search…" />
  <MultiSelect
    label="Status"
    options={[
      { label: 'Active', value: 'active' },
      { label: 'Archived', value: 'archived' },
    ]}
    value={statuses}
    onChange={setStatuses}
  />
  <DateRangePicker value={range} onChange={setRange} />
</FilterBar>

DataTable

Sort, paginate, per-column header filters, row actions, and skeleton loading — zero external dependencies beyond React.

import { DataTable } from 'dataflow-ui'
import type { Column, RowAction } from 'dataflow-ui'

type User = { id: number; name: string; role: string; status: string }

const columns: Column<User>[] = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'role', header: 'Role', sortable: true },
  {
    key: 'status',
    header: 'Status',
    filterable: true,
    filterOptions: [
      { label: 'Active', value: 'active' },
      { label: 'Inactive', value: 'inactive' },
    ],
    cell: (row) => <Badge variant={row.status === 'active' ? 'success' : 'default'}>{row.status}</Badge>,
  },
]

const actions: RowAction<User>[] = [
  { label: 'Edit', onClick: (row) => edit(row) },
  { label: 'Delete', onClick: (row) => remove(row), variant: 'danger' },
]

<DataTable
  data={users}
  columns={columns}
  rowKey="id"
  rowActions={actions}
  pageSize={20}
  loading={isLoading}
/>

Charts

Thin wrappers over Recharts with shared color tokens and a consistent loading/empty state.

LineChart

import { LineChart } from 'dataflow-ui'

<LineChart
  data={[
    { month: 'Jan', revenue: 4200, costs: 2800 },
    { month: 'Feb', revenue: 5100, costs: 3100 },
  ]}
  xKey="month"
  series={[
    { key: 'revenue', label: 'Revenue' },
    { key: 'costs', label: 'Costs' },
  ]}
  height={300}
  yTickFormatter={(v) => `$${v.toLocaleString()}`}
/>

BarChart

import { BarChart } from 'dataflow-ui'

<BarChart
  data={monthlyData}
  xKey="month"
  series={[{ key: 'signups', label: 'Sign-ups' }]}
  height={300}
/>

PieChart

import { PieChart } from 'dataflow-ui'

<PieChart
  data={[
    { label: 'Direct', value: 40 },
    { label: 'Organic', value: 35 },
    { label: 'Referral', value: 25 },
  ]}
  height={300}
/>

All charts accept loading (renders skeleton) and emptyMessage props.

Color tokens

import { CHART_COLORS } from 'dataflow-ui'
// ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']

Development

npm run storybook     # component explorer on localhost:6006
npm run dev           # Vite dev server
npm run build:lib     # build for npm → dist/

License

MIT