Skip to content

Latest commit

 

History

History
145 lines (100 loc) · 3.67 KB

CONTRIBUTING.md

File metadata and controls

145 lines (100 loc) · 3.67 KB

Contributing to AI DIAL UI Kit

Thank you for your interest in contributing to AI DIAL UI Kit! This document provides guidelines and information for contributors.

Table of Contents

Development Workflow

Branching Strategy

We follow a simple branching strategy:

  • development - main branch for integrating development code
  • <custom name> - feature development branches

Creating a Feature Branch

git checkout development
git pull origin development
git checkout -b your-feature-name

PR Guidelines

Follow rules from pull request template

Component Development

Component Guidelines

  1. File Structure: Each component should have its own directory with:

    • ComponentName.tsx - Main component
    • ComponentName.spec.tsx - Unit tests
    • ComponentName.stories.tsx - Storybook stories

  2. TypeScript: Use proper TypeScript with:

    • Explicit interface definitions for props
    • Generic types where appropriate
    • Proper export patterns

  3. Styling:

    • Use Tailwind CSS classes
    • Create reusable SCSS mixins when needed
    • Follow design system
    • Do not write inline styles
    • Do not use hardcoded custom values like hex colors, font sizes, etc
    • Use dial prefix for custom css classes

  4. Update policy:

    • Do not make breaking changes to existing UI components. Use Open-Close principle from SOLID

  5. Documentation:

    • Add JsDoc for Component

  6. Naming

    • Use Dial prefix for the components

Storybook Stories

Every component must have Storybook stories. See src\components\Button\Button.stories.tsx as an example.

Testing

Testing Requirements

  • Coverage: Minimum 70% code coverage required
  • Unit Tests: Every component must have unit tests
  • Test Framework: Vitest with React Testing Library

Guidelines

Code Style

Linting and Formatting

We use ESLint and Prettier for code consistency:

# Check linting and fix issues
npm run lint

# Check formatting and fix issues
npm run format-fix

Code Style Guidelines

  • Use functional components with hooks
  • Prefer explicit typing over any
  • Use destructuring for props
  • Keep components small and focused
  • Use meaningful variable and function names
  • Add JSDoc comments for complex functions

Pull Request Process

Before Submitting

  1. Run Quality Checks Do not skip pre-commit and pre-push hooks. They'll run:

    npm run lint
npm run format
npm run test

  2. Update Documentation

    • Update Storybook stories if needed
    • Add/update README sections
    • Document breaking changes

Review Process

  • All PRs require at least one approval
  • Automated checks must pass
  • Address review feedback
  • Keep PRs focused and reasonably sized

Release Process

Versioning

We follow Semantic Versioning:

  • MAJOR: Breaking changes
  • MINOR: New features (backward compatible)
  • PATCH: Bug fixes (backward compatible)

Code of Conduct

For detailed information on DIAL project contributing guidelines, see the main contributing documentation.