VetEngage Design System

VetEngage Design System is a comprehensive React component library designed to provide a consistent and efficient development experience for VetEngage web applications.

Tech Stack

• React: Core framework for building UI components
• Vite: Fast build tool for development and production
• TypeScript: Ensures type safety and maintainability
• Tailwind CSS: Utility-first styling for flexibility and efficiency
• Storybook: Component documentation and testing
• shadcn/ui: Pre-styled, accessible UI components
• Vitest: Unit testing for React components
• React Testing Library: Testing utilities
• React Hook Form: Form handling
• Zod: Schema validation
• Playwright (optional): Visual regression testing
• ESLint & Prettier: Code linting and formatting
• Husky: Enforce pre-commit hooks, linting, testing, and prevent bad commits
• Changesets: Versioning and package publishing
• Cursor: AI-powered coding assistant

Installation

To install the VetEngage Design System in your project, run:

pnpm add vetengage-ui-library

Usage

1. Import components:

import { Button } from 'vetengage-ui-library';

2. Import styles in your main entry file (e.g., main.ts or App.tsx):

import 'vetengage-ui-library/style.css';

3. Use components in your template:

function App() {
  return <Button variant="primary">Click me</Button>;
}

export default App;

Development

To set up the project for development:

1. Clone the repository:

git clone [email protected]:VetEngage/design-system.git
cd design-system

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Run Storybook:

pnpm storybook

Building & Versioning

Build the Library

To generate the production-ready package:

pnpm build

Versioning & Releasing

We use Changesets for semantic versioning and automated releases via GitHub Actions.

1. Creating a Changeset

Run the following command to create a new changeset:

pnpm changeset

Select the appropriate version bump (patch, minor, or major) and describe the change.

2. Merging & Automatic Release

• Select which packages you've modified
• Choose the semver bump type (major, minor, patch)
• Describe your changes

Once a changeset is merged into the main branch, GitHub Actions will automatically:

• Bump the package version
• Publish the new version to npm
• Push the updated package.json and changelog to the repository

For available versions, see the tags on this repository.

Testing

Run unit tests:

pnpm test

Run visual regression tests (if configured):

pnpm test:visual

Linting and Formatting

Lint the code:

pnpm lint

Format the code:

pnpm format

Contributing

Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

• React.js
• Vite
• Tailwind CSS
• shadcn/ui
• HorizonUI Pro
• Storybook