Skip to content

README.md

Latest commit

 

History

History
86 lines (60 loc) · 2.23 KB

README.md

File metadata and controls

86 lines (60 loc) · 2.23 KB

EdgePlug UI (@edgeplug/ui)

Design system and React component library for EdgePlug industrial automation UIs: tokens, components, Vite-powered demos, Storybook, Jest, and Playwright (including accessibility).

Parent repository: EdgePlug.

Stack

  • React 18, TypeScript (strict), Tailwind CSS
  • Vite (demos), Storybook 7, Framer Motion, Lottie
  • ESLint, Prettier, Jest (jest.config.cjs, jest.setup.cjs), Playwright

Prerequisites

  • Node.js 20 LTS (or newer active LTS)
  • npm 9+

Install and scripts

cd ui
npm ci

# Library TypeScript watch
npm run dev

# Production-type build (declaration emit to dist/)
npm run build

npm run lint
npm run lint:fix

# Unit tests
npm test

# Vite demos
npm run demo
npm run demo:hifi

# Storybook
npm run storybook
npm run build-storybook

# Accessibility (requires demo server reachable at http://localhost:5173)
npm run test:a11y
npx playwright test --project=accessibility

# Chromatic (set CHROMATIC_PROJECT_TOKEN in the environment)
npm run chromatic

Project structure

ui/
├── components/       # Components and co-located __tests__
├── design-system/      # Token and motion documentation
├── demo/               # Vite entry HTML/TSX
├── scripts/            # a11y and tooling helpers
├── tests/              # Playwright specs
├── locales/            # i18n resources
├── jest.config.cjs
├── playwright.config.ts
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── vite.config.ts

Quality and accessibility

  • Typecheck is enforced via npm run build (tsc).
  • Playwright webServer can start npm run demo when CI is set (see playwright.config.ts).
  • For WCAG-oriented checks, use npm run test:a11y and the Playwright accessibility project.

Continuous integration

Root workflow .github/workflows/ui.yml: npm ci, lint, build, Jest, Playwright Chromium + accessibility flows, artifact upload for reports.

Contributing

Follow CONTRIBUTING.md. For design tokens and D01 foundations, see design-system/README.md.

License

Apache License 2.0 — see LICENSE.