apptise-component/CONTRIBUTING.md

React components for Apprise notification channel configuration

# Contributing to apptise-component

Thank you for your interest in contributing to apptise-component! This document provides guidelines and information for contributors.

## Development Setup

### Prerequisites

- Node.js (version 16 or higher)
- pnpm (recommended package manager)

### Getting Started

1. Clone the repository:
   ```bash
   git clone https://github.com/easychen/apptise.git
   cd apptise
   ```

2. Install dependencies:
   ```bash
   pnpm install
   ```

3. Navigate to the component package:
   ```bash
   cd packages/apptise-component
   ```

4. Start development:
   ```bash
   pnpm dev          # Watch mode for TypeScript compilation
   pnpm storybook    # Start Storybook for component development
   ```

## Development Workflow

### Code Style

- We use TypeScript for type safety
- Follow the existing code style and conventions
- Use meaningful variable and function names
- Add JSDoc comments for public APIs
- Ensure all components are properly typed

### Testing

- Write tests for new components and utilities
- Ensure existing tests pass before submitting changes
- Test components in Storybook to verify visual behavior
- Test accessibility features

### Building

Before submitting changes, ensure the package builds successfully:

```bash
pnpm build
pnpm type-check
pnpm lint
```

## Component Development Guidelines

### Creating New Components

1. Create the component file in `src/components/`
2. Export the component from `src/components/index.ts`
3. Add proper TypeScript interfaces
4. Create a Storybook story in `src/stories/`
5. Update the main `src/index.ts` export

### Component Structure

```tsx
import React from 'react';
import { BaseComponentProps } from '../types';

export interface YourComponentProps extends BaseComponentProps {
  // Component-specific props
}

export const YourComponent: React.FC<YourComponentProps> = ({
  className = '',
  labels,
  styles,
  // other props
}) => {
  // Component implementation
  return (
    <div className={`your-component ${className}`}>
      {/* Component content */}
    </div>
  );
};
```

### Styling Guidelines

- Use CSS classes for styling
- Follow BEM naming convention when possible
- Ensure components are responsive
- Support custom styling through props
- Test on different screen sizes

## Submitting Changes

### Pull Request Process

1. Fork the repository
2. Create a feature branch from `main`:
   ```bash
   git checkout -b feature/your-feature-name
   ```
3. Make your changes following the guidelines above
4. Commit your changes with clear, descriptive messages
5. Push to your fork and submit a pull request

### Pull Request Guidelines

- Provide a clear description of the changes
- Include screenshots for UI changes
- Reference any related issues
- Ensure all checks pass (build, tests, linting)
- Update documentation if necessary

### Commit Message Format

Use clear and descriptive commit messages:

```
type(scope): description

Examples:
feat(components): add new ChannelSelector component
fix(validation): resolve email validation regex issue
docs(readme): update installation instructions
style(css): improve mobile responsiveness
```

## Issue Reporting

### Bug Reports

When reporting bugs, please include:

- Clear description of the issue
- Steps to reproduce
- Expected vs actual behavior
- Browser/environment information
- Code examples if applicable

### Feature Requests

For feature requests, please provide:

- Clear description of the proposed feature
- Use case and motivation
- Possible implementation approach
- Any relevant examples or mockups

## Code of Conduct

- Be respectful and inclusive
- Provide constructive feedback
- Help others learn and grow
- Follow the project's coding standards

## Questions and Support

- Check existing issues and documentation first
- Create an issue for bugs or feature requests
- Use discussions for general questions
- Be patient and respectful when asking for help

## Release Process

Releases are handled by maintainers:

1. Update version in `package.json`
2. Update `CHANGELOG.md`
3. Create a release tag
4. Publish to npm

Thank you for contributing to apptise-component! 🎉