Skip to main content

Components

A shared package that contains reusable React components used across Rhapsody applications.

Overview​

This library provides common UI components that are shared across multiple applications in the Rhapsody monorepo. It uses the Starlight design system tokens and SVG icons to ensure consistency with the overall design language.

Installation​

This is a private workspace package. Add it to your app's dependencies:

{
  "dependencies": {
    "@shared/components": "workspace:*"
  }
}

Development​

Dependencies​

  • React 18.2.0
  • Styled Components ^5.3.0
  • @starlight/svgs ^9.3.1
  • @starlight/tokens (catalog)

Testing​

Components include comprehensive test coverage using React Testing Library:

pnpm test

Styling​

Components use styled-components with Starlight design tokens for consistent theming across the application.

Contributing​

When adding new components to this library:

  1. Create a new folder under src/ with the component name
  2. Include the following files:
    • ComponentName.tsx - Main component
    • ComponentName.styles.ts - Styled components
    • ComponentName.spec.tsx - Tests
  3. Export the component from src/index.ts

Design System Guidelines​

Ownership​

  • Owner: @SalesLoft/lost-in-tabs
  • Additional Approvers: @Salesloft/lost-in-tabs

For questions or contributions, reach out to the design system team in #design-system on Slack.