@riverty/web-components

Riverty Design System: Web Components

Riverty, 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

Contributing

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

Development Setup

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

Creating Components

• Generate a new component:

  npx stencil generate component-name
  

• 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

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

# 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 in the repository root.