Digital Promise Design Library

This is a React + Typescript + Tailwind + Vite component library for the development and maintenance of UI components aligned to the Digital Promise Design System.

Getting Started

Installation

NVM is recommended for the installation and management of Node.js. With NVM installed, you can view and develop components locally following these steps:

• nvm use # Install or switch to specific version of Node
• corepack enable # Enabling tooling for switching Node package managers
• corepack use pnpm # Use the package manager pnpm
• pnpm install # Install dependencies
• pnpm storybook # Start Storybook

This will install all project dependencies and start a local Storybook server.

Style Dictionary

Design tokens are defined in the tokens directory and exported using Style Dictionary. These design tokens provide the fundamental style definitions for colors and spacing used to generate this component library's Tailwind CSS theme. Source and output options are specified in config.json.

Linting and Testing

Use pnpm lint to run static analysis on files in the src directory. Use pnpm test to run specs defined for components using Vitest. See vite.config.ts and the testing setup script for further information about how those tests are configured to run.