Component tour

This page shows each built-in building block once, with the declaration that asks for it and a link to it in the component library, where you can switch between the three looks, light and dark.

The library is Storybook, built with this site. Each story draws the real component from src/client/components over fixture data, with no server behind it. The pictures here are in Mono. The Look and Mode buttons in the library’s toolbar dress any story in the others.

Lists

A list view is a grid unless its presentation says otherwise. The rows, the filters and the permissions don’t change with the presentation. See Lists and Choose a building block.

A task list in a grid: tabs with counts, a search box, a status filter chip, sortable column heads, and statuses as a dot and a word. — **Grid**: the default, with tabs, filters, Sort and a selection. `listView('Tasks', 'task', { show, tabs, filters })` · Open in the library

Vehicle cards: a photo, a title, a price and a line of facts on each. — **Cards**: a picture, a figure and a line of facts. `cards('title', { value, facts, image })` · Open in the library

A queue of tasks: each row a title, its status badge, a line of facts and an Open button. — **Queue**: compact rows made to work through. `queue('title', { badge, lines, facts })` · Open in the library

A board of task cards in lanes by status, with lane counts. — **Board**: lanes by one column; a drag is an ordinary update. `board: { by: 'status', primary }` · Open in the library

A month calendar with a task on each of several days. — **Calendar**: a month by one date column, or ranges with `end`. `calendar('due_on', 'title')` · Open in the library

A split inbox: a list of tasks on the left, the selected task’s details on the right. — **Split**: the list beside the picked record. `split: { detail }` · Open in the library

Records

A record page is a list of sections. See record pages.

A related list of invoices under an account: name, status, account, amount due and due date. — **Related list**: the rows that point at this record. `related('Invoices', 'invoice', 'account_id', { show })` · Open in the library

A record’s history: who changed which field, from what to what, and when. — **History**: the record's own changes, newest first. `history()` · Open in the library

A workflow strip: Submitted, In review (current), Approved, Issued. — **Workflow**: where the record stands. a resource's `machine('status', { … })`, drawn over its summary · Open in the library

Dashboards

A dashboard is a list of sections about whole tables. On a record page, the same helpers take whose and count only the rows that point at that record. See dashboards.

Three stat cards: a figure, its change against the compare window with a trend line, and a target meter. — **Metrics**: a figure, its change and a target. `metric('Open tasks', 'task', { query, better: 'down' })` · Open in the library

A bar chart of counts by month, the current bar marked. — **Charts**: lines, bars, stacked bars and donuts. `chart('Created', 'task', 'month created_on', { shape: 'bar' })` · Open in the library

A breakdown: work by status as solid bars with their counts. — **Breakdowns**: a count per value, in its vocabulary's order, else biggest first. `breakdown('Work by status', 'task', 'status')` · Open in the library

An activity feed: Today, Yesterday and This week, a search, and four changes, each with what the write did, the record, the field from what to what, who and when. — **Activity**: recent changes across resources, as the reader may read them. `activity('Latest updates', { task: { icon: 'list-checks' } })` · Open in the library

A first run: a welcome with two numbered steps, each with a button to open its list. — **First run**: next steps in place of a dashboard of zeros. `firstRun('Welcome', [{ title, to }])` · Open in the library

Forms and commands

The New form comes from the resource. A command’s form comes from its declared inputs. See forms and command forms.

A guided request form: a step indicator, labeled fields with hints, and Continue. — **Guided form**: a command form in steps. `commandForm('Request', ref, [step('About you', [...])])` · Open in the library

Command fields with a repeating group of lines, each with an item and a quantity. — **Declared inputs**, including a repeating group. `field.group({ … }, { repeat: { min: 1, max: 30 } })` · Open in the library

States

A room that has nothing to show, may not be read, or could not be fetched says so in one line where its rows would be. You don’t declare them; a list’s empty gives its own words.

An empty task list: its tabs gone, No tasks yet under the search. — **Empty**: the list's own words. `empty: { title, message }` · Open in the library

A refused task list: the one line the server refused it with, You do not have access to Tasks. — **Refused**: a room the reader may not open; signed out, its action is the sign-in. · Open in the library

A list whose server stopped answering: one line saying so and what to do. — **Problem**: a fetch that failed, said in plain words. · Open in the library

Chrome

The sign-in screen, the account menu and the bell come with auth. You don’t declare them. See sign-in.

The sign-in screen: the App’s name, email and password fields, and a Sign in button. — **Sign-in**: the App's front door. `auth: { providers: ['email'] }` · Open in the library

The account menu open under the signed-in name: Your profile, Manage accounts, Sign out.

Account menu: profile and settings; Manage accounts for an admin. · Open in the library

The bell open: three notifications, two unread, with Mark all read. — **Bell**: the reader's notifications, from a resource's `notify` rules. · Open in the library

Custom components

Where no built-in fits, an App draws its own with a React module and tablewalk/ui. A module’s examples are also stories: the library shows two from the test Apps under Fixture Apps. See custom components.

A forum’s post stream: posts with avatars, photos, reactions, and Reply and Report. — **Post stream**, a list view's rows drawn by the App. `customList(postStream, { show })`

A warehouse bin map: two aisles of bins shaded by how full each is, a reserve and a dock. — **Bin map**, a page section fed by declared reads. `custom('Floor', binMap, { rows })`

Run the library locally

npm install && (cd storybook && npm install)
cd storybook && npm run dev   # http://localhost:6006

npm run build:site builds it into site/dist/components/.