DesignSystem — design-zystem

Internal React component library shared across all DevCar web apps. Published as the design-zystem npm package.

Tech stack

| Category | Technology | | ---------- | --------------------------------------- | | Framework | React 18 | | Styling | styled-components 6 | | Build | tsup (CJS + ESM) | | TypeScript | strict, full .d.ts | | Storybook | v10 (Vite) | | Tests | vitest + jsdom + @testing-library/react |

Setup

npm install
npx playwright install chromium   # required once for Storybook browser tests

Scripts

npm run build           # tsup → dist/ (CJS + ESM + .d.ts)
npm run storybook       # Storybook dev server on :6006
npm test                # behavioral unit tests (jsdom)
npm publish             # build + publish to npm

Storybook

npm run storybook launches a local dev server on :6006 with interactive docs and stories for all 35+ components. Each component has an auto-generated Docs page (props table + live playground) and multiple variant stories.

A static version can be generated with npm run build-storybook (outputs to storybook-static/) for deployment to a hosting service — not committed to the repo.

Structure

src/
  index.tsx             # barrel export
  Components/           # one folder per component
    <Name>/
      <Name>.tsx        # component + exported interface <Name>Props
      <Name>.css
      <Name>.stories.tsx
  data/
    colors.ts           # color palette
    globalMethods.ts    # shared helpers
__tests__/              # behavioral tests (vitest + @testing-library/react)
dist/                   # generated — do not edit

Components

Layout

Box · Col · Row · Grid · PageContainer · Divider · Bulk

Typography & media

Text · Bubble · Link · Icon · Image

Inputs

Button · Input · Checkbox · Radio · Switch · Select · MultiSelect · DatePicker

Navigation

Tabs · IconTabs · Stepper · Options

Overlays

Modal · NewModal · ModalConfirmation · Drawer · Popover · Tooltip

Data

List · ListItem · Table · CardSkeleton

Usage

import { Button, Input, Modal } from 'design-zystem'

Publishing a new version

1. Bump version in package.json
2. npm publish — triggers prepublishOnly → npm run build automatically
3. Update design-zystem version in ClientOffice/package.json + DeliveryApp/package.json

Related projects

| Project | Description | | ------------ | ------------------ | | ClientOffice | Uses design-zystem | | DeliveryApp | Uses design-zystem | | Check | Uses design-zystem |