@reactor-team/ui

A reusable React component library for Reactor applications.

Installation

npm install @reactor-team/ui

Usage

import { Button } from '@reactor-team/ui';
import '@reactor-team/ui/styles.css';

function App() {
  return (
    <Button variant="primary" shadow>
      Click Me
    </Button>
  );
}

Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

npm install

Storybook

Run Storybook for component development and documentation:

npm run dev
# or
npm run storybook

Build

Build the library for production:

npm run build

Type Checking

npm run typecheck

Components

Button

A customizable button component with multiple variants and sizes.

<Button
  variant="primary"  // 'primary' | 'tertiary' | 'secondary' | 'ghost'
  size="default"     // 'small' | 'default' | 'large'
  shadow={true}      // Enable/disable shadow effect
  disabled={false}   // Disable the button
>
  Button Text
</Button>

Design Tokens

The library uses CSS custom properties for design tokens:

Colors

• --reactor-color-interstellar: #000000
• --reactor-color-light: #FFFFFF
• --reactor-color-light-gold: #FDF5C6

Typography

• --reactor-font-mono: 'IBM Plex Mono', monospace

Contributing

This project uses semantic-release for automated versioning and publishing. Your commit messages determine the version bump:

| Commit message | Release type | |----------------|--------------| | fix: fix button hover state | Patch (0.1.0 → 0.1.1) | | feat: add Input component | Minor (0.1.0 → 0.2.0) | | feat!: redesign Button API | Major (0.1.0 → 1.0.0) | | BREAKING CHANGE: remove shadow prop | Major (0.1.0 → 1.0.0) | | chore: update deps | No release | | docs: update readme | No release |

Releasing

Just push to main with a valid commit message:

git add .
git commit -m "feat: add new component"
git push

The GitHub Action will automatically:

1. Analyze your commits
2. Bump the version
3. Update CHANGELOG.md
4. Publish to npm
5. Create a GitHub release