@toteat-eng/ds-react

Toteat React Design System — component library for the Toteat restaurant management platform.

Installation

npm install @toteat-eng/ds-react

Peer dependencies

npm install react react-dom @tanstack/react-table recharts

Usage

Import the stylesheet once in your app entry point, then wrap your app with DsProvider:

// main.tsx
import "@toteat-eng/ds-react/style.css";

// App.tsx
import { DsProvider } from "@toteat-eng/ds-react";

export function App() {
  return (
    <DsProvider theme="toteat-react-ds">
      <YourApp />
    </DsProvider>
  );
}

Import components as named exports:

import { Button, TextInput, Dialog } from "@toteat-eng/ds-react";

function MyForm() {
  return (
    <>
      <TextInput label="Name" value="" onChange={() => {}} />
      <Button variant="primary" size="md" onClick={() => {}}>
        Save
      </Button>
    </>
  );
}

Themes

DsProvider accepts a theme prop:

| Value | Description | |---|---| | "toteat-react-ds" | Current Toteat React look (default) | | "angular-legacy" | Absorbed Angular DS tokens (legacy apps) |

Available components

Accordion, AppleSignInButton, BackgroundWrapper, Badge, Button, Card, AreaChart, BarChart, KpiCard, LineChart, Checkbox, DataTable, DatePicker, DateRangePicker, Dialog, DropZone, DropdownButton, DropdownMenu, DsProvider, EmptyState, ErrorBoundary, ExtrasDialog, FormField, GoogleSignInButton, GroupedButtons, Header, Icon, ImagePreview, LanguageSelector, LogoToteat, Multiselect, NavBar, Overlay, OverlayMessage, PageLoadingOverlay, PinLockOverlay, ProductTile, Radio, Select, Sidebar, SidebarNavItem, SidebarNavSection, Skeleton, Spinner, TabBar, Tabs, TextInput, Textarea, ThemeGate, Toast, Toggle, Tooltip, TreeItem, TreeList

All named exports are TypeScript-typed. Import types via the same package:

import type { ButtonProps, DialogProps } from "@toteat-eng/ds-react";

Design tokens

All visual properties (colors, spacing, typography, radius, shadows, animations) are CSS custom properties defined in dist/style.css and scoped under the .tot-ds-root class set by DsProvider. Do not hardcode hex or pixel values — reference DS tokens from your own CSS:

.my-component {
  color: var(--ds-color-text-primary);
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-md);
}

Token definitions live in src/tokens/. The [data-theme] attribute on the DsProvider root switches the active token set.

Development

# Component explorer (Storybook, port 6007)
npm run storybook

# Build library + emit type declarations
npm run build:all

# Type check only
npm run typecheck

# Run unit / browser tests (Vitest)
npm test

# Run visual regression tests (Playwright CT)
npm run visual:test

# Approve / update visual snapshots
npm run visual:approve

# Lint and auto-fix
npm run lint:fix