# Riverty Design System: Web Components

> [Riverty](https://riverty.com/), your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.

Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.

→ [designsystem.riverty.com](https://designsystem.riverty.com/)

## Contributing

We welcome contributions to the Web Components package! Here's how to get started:

### Development Setup

```bash
cd packages/components
npm install
npm run develop  # Starts watch mode
```

### Creating Components

1. **Generate a new component**:
   ```bash
   npx stencil generate component-name
   ```

2. **Follow the component checklist**:
   - [ ] TypeScript definitions with JSDoc comments
   - [ ] Sass styles following BEM methodology
   - [ ] Responsive design
   - [ ] Dark mode support (via CSS variables)
   - [ ] Storybook story in `packages/storybook/stories/`
   - [ ] Unit tests (Jest)
   - [ ] Accessibility (ARIA labels, keyboard navigation)
   - [ ] Documentation

### Component Structure

```typescript
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'r-component',
  styleUrl: 'component.scss',
  shadow: true,
})
export class RComponent {
  /** Description of prop */
  @Prop() myProp: string;

  render() {
    return <div>{this.myProp}</div>;
  }
}
```

### Testing

```bash
# Run unit tests
npm run test

# Run in watch mode
npm run test -- --watch
```

### Best Practices

- Use web component standards
- Follow StencilJS conventions
- Ensure accessibility (WCAG 2.1/2.2 AA)
- Support keyboard navigation
- Test with screen readers
- Include all component variants in Storybook
- Write meaningful JSDoc comments

### Useful Commands

- `npm run build` - Build the component library
- `npm run develop` - Watch mode for development
- `npm run test` - Run unit tests
- `npm run generate` - Generate new component

For complete contribution guidelines, see [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.