Contributing Guide

Before Reporting

• Check if the issue has already been reported
• Verify you are using the latest version
• Try to reproduce the issue consistently
• Gather relevant information (browser, OS, version)

Bug Report Template

**Component:** Button

**Version:** 1.2.3

**Description:**
Clear description of the bug and what you expected to happen.

**Steps to Reproduce:**
1. Import Button component
2. Set variant to "primary"
3. Click the button
4. Observe incorrect behavior

**Expected Behavior:**
What should happen

**Actual Behavior:**
What actually happens

**Environment:**
- Browser: Chrome 120
- OS: macOS 14
- React: 18.2
- Node: 20.10

**Code Example:**
```tsx
<Button variant="primary" onClick={handleClick}>
  Click me
</Button>
```

**Screenshots:**
If applicable, add screenshots to help explain the problem.

**Additional Context:**
Any other relevant information.

Before Requesting

• Check if a similar feature has been requested
• Consider if it fits the design system philosophy
• Think about how it would benefit other users
• Prepare examples or mockups if possible

Feature Request Template

**Feature Type:** New Component / Enhancement / Pattern

**Title:** Clear, descriptive title

**Problem Statement:**
What problem does this solve? Why is it needed?

**Proposed Solution:**
How would this feature work? Include details about:
- API design (props, events)
- Visual appearance
- Behavior and interactions
- Accessibility considerations

**Alternatives Considered:**
What other approaches did you consider?

**Use Cases:**
Specific examples of when this would be used

**Privacy Considerations:**
How does this relate to user privacy?

**Additional Context:**
Mockups, code examples, references to similar implementations

Before You Start

• Fork the repository and create a new branch
• For significant changes, open an issue first to discuss
• Read the architecture and design philosophy documentation
• Set up your development environment

Development Setup

# Clone your fork
git clone https://github.com/YOUR_USERNAME/fidus.git
cd fidus

# Install dependencies
pnpm install

# Run tests
pnpm test

# Start development server
cd packages/design-system
pnpm dev

Code Standards

• Use TypeScript with strict type checking
• Never use any type
• Avoid type casting with as
• Follow existing code style and conventions
• Use CSS variables for spacing and colors
• Never hardcode spacing values
• Include proper TypeScript types for all props
• Write clear, descriptive variable and function names

Commit Messages

Use conventional commit format:

feat(button): add loading state
fix(input): correct validation error display
docs(contributing): update PR guidelines
test(card): add accessibility tests
refactor(modal): simplify animation logic

Pull Request Checklist

Example Test

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Button } from './Button';

describe('Button', () => {
  it('should render with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('should call onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).toHaveBeenCalledOnce();
  });

  it('should be disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByText('Click me')).toBeDisabled();
  });

  it('should have correct ARIA attributes', () => {
    render(<Button aria-label="Submit form">Submit</Button>);
    expect(screen.getByRole('button')).toHaveAttribute(
      'aria-label',
      'Submit form'
    );
  });

  it('should support keyboard navigation', () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    const button = screen.getByText('Click me');
    fireEvent.keyDown(button, { key: 'Enter' });
    expect(handleClick).toHaveBeenCalledOnce();
  });
});

Running Tests

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

# Run specific test file
pnpm test Button.test.tsx

Documentation Page Structure

• Clear description of component purpose
• When to use and when not to use
• Interactive examples
• Props table with types, defaults, descriptions
• Variants and states
• Accessibility information
• Best practices
• Related components