Salable Component Library

A flexible set of web components (Stencil + React) for billing interfaces—pricing tables, invoices, checkouts, and more.

Installation

# Stencil components
pnpm add @salable/web-components

# React components
pnpm add @salable/react-web-components

Build & Scripts

Use Node 20. Check each package’s package.json for dev, build, and test scripts.

Testing

Playwright E2E (Stencil):

• Run: pnpm test:e2e or pnpm test:e2e:ui
• Test component rendering, data display, user interactions, and mock backend responses.
• Visual regression for core components only.

Stencil Unit Tests:

• Focus on individual functionalities of common components (no mock data).

React Tests:

• Run: pnpm test or pnpm test:ui in react-client.
• Similar approach to Stencil tests, sharing utilities and mock data.

Unified Testing Approach

• Shared mock data and utilities for Stencil and React tests.
• Framework-specific tests only when needed.

Public Environment Variables

Add any required public env variables to .env.test and .env.prod in packages/web-components. Ensure rollup-plugin-dotenv is properly configured.

Versioning

• Semantic versioning managed by Lerna.
• To update versions:

  pnpm lerna:version
  pnpm lerna:publish

• Document changes in CHANGELOG.md.