Contributing

Guide for contributing to the Spring Design Library monorepo.

Prerequisites

• Node.js 20+
• npm (workspaces)
• Figma access token (for token/icon sync only)

Setup

git clone https://github.com/canadadrives/spring-design-library.git
cd spring-design-library
npm install
npm run dev

Open http://localhost:3000/library/getting-started.

For manual QA tests locally, install manual browser browsers once:

Branch & PR Workflow

1. Create a feature branch: git checkout -b feature/your-feature-name
2. Make changes and verify locally:

   npm run build
   

3. Push and open a Pull Request against main
4. Ensure CI passes (build + manual QA)

Common Tasks

Sync design tokens

# Regenerate CSS from design-tokens.mjs
npm run tokens:sync

# Pull from Figma first (requires .env with FIGMA_TOKEN, FIGMA_FILE_ID)
npm run tokens:figma
npm run tokens:sync

Sync icons from Figma

npm run icons:sync

Requires FIGMA_TOKEN or FIGMA_ACCESS_TOKEN in .env.

Figma Code Connect

npm run code-connect:parse    # validate mappings
npm run code-connect:publish  # publish to Figma

Run Validation

npm run lint           # static checks
npm run build          # production build for design-library and personal-loan

Adding a Component

See COMPONENT_ADDITION.md for the full checklist.

Documentation

• REPOSITORY_STRUCTURE.md — full repo map
• PLACEHOLDER_POLICY.md — gallery placeholder conventions
• Package README: packages/spring-ds-react/README.md
• App README: apps/design-library/README.md

Code Standards

• Framework: Next.js (App Router) + React 19 + TypeScript
• Styling: Tailwind CSS with semantic design tokens (no raw hex)
• Components: Functional components; Server Components by default, 'use client' only when needed
• Never generate Vue code — this is a React/Next monorepo

What Not to Commit

• .env (secrets)
• .next/, dist/, *.tsbuildinfo
• packages/spring-ds-react/src/tokens/figma-variables.json (Figma pull output)