Dragone

An independent Angular design system inspired by the Sirio design system (INPS), built on ng-primitives for behavior and accessibility. Targeted at Italian public-sector digital services, released as open source.

The CONTEXT.md defines the project's domain vocabulary. Architectural decisions are recorded in docs/adr/.

🚀 Getting Started

Prerequisites

• pnpm >= 11.0.0 (install globally via npm install -g pnpm)
• Node.js >= 24.15.0

Install

git clone <repository-url>
cd dragone
pnpm install

💻 Development Workflow

This project uses Storybook as the primary environment for developing, previewing, and testing components in isolation.

Storybook

pnpm storybook

Opens Storybook in your browser with all @dragone/ui components, autodocs, and an a11y panel.

Build the Library

pnpm build @dragone/ui

Output is written to dist/projects/dragone/ui.

Run Tests

pnpm test

Unit tests run via Vitest in browser mode (Playwright).

✨ Code Quality & Conventions

Linting & Formatting

• Lint: pnpm lint
• Format: pnpm format

Both run automatically on staged files before every commit via lefthook.

Commit Messages

All commits must follow Conventional Commits. Use pnpm commit to create a commit via the interactive prompt (commitizen); the commit-msg hook validates your message with commitlint. Versioning is managed natively by pnpm — record a change intent with pnpm change in each PR that changes the published API, then apply the release plan with pnpm version -r.