@toteat-eng/ds-react 2026.4.28-8 → 2026.5.13

package/README.md

@@ -0,0 +1,124 @@
+# @toteat-eng/ds-react
+
+Toteat React Design System — component library for the Toteat restaurant management platform.
+
+## Installation
+
+```bash
+npm install @toteat-eng/ds-react
+```
+
+### Peer dependencies
+
+```bash
+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`:
+
+```tsx
+// main.tsx
+import "@toteat-eng/ds-react/style.css";
+```
+
+```tsx
+// 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:
+
+```tsx
+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:
+
+```ts
+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:
+
+```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
+
+```bash
+# 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
+```