ve-design-system

v1.1.4

Published

2 months ago

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

0High
0Medium
0Low

kenneth-vetengage

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 ve-design-system

Usage

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

import 've-design-system/style.css';

Add fonts (fonts are opt-in for performance):

// Easiest: Use the utility function
import { loadFonts } from 've-design-system/fonts';
loadFonts();

// Or: Import the CSS file (slower)
import 've-design-system/fonts.css';

Why are fonts opt-in? CSS @import statements cause render-blocking waterfalls that slow down your app. Making fonts opt-in gives you control over loading strategy.

See Font Configuration Guide and Performance Guide for details.

Import and use components:

import { Button } from 've-design-system';

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

export default App;

Font Configuration

The design system uses Google Fonts (Noto Sans and JetBrains Mono) by default. For optimal performance, we recommend adding font preload links to your application.

Quick Example:

import { FONT_PRELOAD_LINKS } from 've-design-system/fonts';

// Add to your HTML <head> or framework-specific head component
{
  FONT_PRELOAD_LINKS.map((props, i) => <link key={i} {...props} />);
}

Features:

Separate font export (ve-design-system/fonts)
Font preload utilities for better performance
TypeScript support
Framework-agnostic utilities (Next.js, Remix, Vite, etc.)

For complete documentation, see docs/FONTS.md

Development

To set up the project for development:

Clone the repository:

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

Install dependencies:

pnpm install

Start the development server:

pnpm dev

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.

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.

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.