regua

A React design system, at regua.pt. Documentation at regua.pt/docs, and two clickable products built only from regua: a helpdesk at regua.pt/examples/helpdesk and billing at regua.pt/examples/billing.

Install

npm install @xyazi/regua

Requires React 18 or later.

Use

Import the stylesheet once, at the root of your app, then use the components:

import '@xyazi/regua/styles.css'
import { Page, Stats } from '@xyazi/regua'

export function Overview() {
  return (
    <Page title="Overview" actions={[{ label: 'New project', variant: 'primary' }]}>
      <Stats
        title="This month"
        description="Compared with the previous 30 days."
        items={[
          { label: 'Orders', value: 1284, format: 'number', previous: 1146, better: 'up' },
          { label: 'Returned', value: 4.2, format: 'percent', previous: 5, better: 'down' },
        ]}
      />
    </Page>
  )
}

Theme and mode

Two attributes on <html> set the look of the whole app:

• data-mode="light" or "dark" forces a mode. Without it, regua follows the operating system.
• data-theme="<name>" picks a theme. Without it, regua uses Petróleo, which styles.css includes. Every theme ships on its own as @xyazi/regua/themes/<name>.css: import the ones the app needs after styles.css, and switch between them with the attribute.

<html data-theme="petroleo" data-mode="dark"></html>

App settings

ReguaProvider holds the settings regua cannot guess. It is optional; wrap your app in it once:

import { ReguaProvider } from '@xyazi/regua'

export function Root() {
  return (
    <ReguaProvider navigate={(href) => router.push(href)} locale="en-GB" currency="EUR">
      <App />
    </ReguaProvider>
  )
}

• navigate: in-app links go through your router. Without it, they do a full page load.
• locale: every number regua shows is formatted for it. Defaults to en-US.
• currency: the currency of every currency format. Defaults to USD.

Components

AppShell, Page, FieldGroup, FieldRow, TextField, NumberField, Textarea, Switch, Checkbox, Select, Stats, SummaryList, Table, Timeline, AttentionList, AssistantChat and Chart.

A page is one column of sections, straight in the Page, in one order: AttentionList, then SummaryList, Stats and Chart, then FieldGroup, then Timeline, then Table. An AssistantChat takes a page alone. Another order, or anything else in a Page, warns in development.

Upgrading

What to change in your code, version by version, is in CHANGELOG.md.

Develop

npm install
npm run dev        # Storybook on localhost:6006
npm run examples   # the examples on localhost:6007/examples/helpdesk/ and /examples/billing/
npm test
npm run build:site # the site into storybook-static/: the landing, the docs in docs/, the examples

License

MIT