@launch77-shared/lib-ui

Core UI component library with design system integration for the Launch77 platform.

Installation

This library is part of the launch77-shared monorepo workspace.

npm install @launch77-shared/lib-ui @launch77-shared/lib-design-system

Setup

1. Configure Tailwind

Update your tailwind.config.ts:

const preset = require('@launch77-shared/lib-design-system/preset')

export default {
  presets: [preset],
  content: ['./src/**/*.{js,ts,jsx,tsx}', 'node_modules/@launch77-shared/lib-ui/dist/**/*.js'],
}

2. Import Design System Tokens

In your global CSS file:

@import '@launch77-shared/lib-design-system/tokens.css';

Usage

import { Button, Card, Input, Alert } from '@launch77-shared/lib-ui'

function MyComponent() {
  return (
    <Card>
      <Alert>Welcome!</Alert>
      <Input placeholder="Enter text" />
      <Button>Submit</Button>
    </Card>
  )
}

Components

Form Components

• Button - Button with multiple variants
• Input - Text input field
• Textarea - Multi-line text input
• Checkbox - Checkbox with label
• Switch - Toggle switch
• Select - Dropdown select

Layout Components

• Card - Card container
• Sidebar - Collapsible sidebar

Feedback Components

• Alert - Alert messages
• Badge - Status badges
• Toast - Toast notifications

Overlay Components

• Dialog - Modal dialogs
• Tooltip - Tooltips

Form Helpers

• FormField - Form field wrapper
• FormError - Error messages
• FormHelperText - Helper text

Other

• Avatar - User avatars

Development

Type Checking

npm run typecheck

Testing

npm run test

Building

npm run build

Component Documentation

If this library contains UI components, use Launch77 annotations for catalog generation:

/**
 * @launch77-component
 * @category your-category
 * @description What this component does
 * @whenToUse Use for...
 * @whenNotToUse Don't use for...
 * @tags tag1, tag2, tag3
 * @example
 * <YourComponent prop="value" />
 */
export const YourComponent = () => { ... }

Annotation Reference

| Tag | Required | Purpose | | --------------------- | ----------- | ----------------------------------------------- | | @launch77-component | Yes | Identifies component for catalog | | @category | Yes | Component category (e.g., "forms", "marketing") | | @description | Yes | Brief description of what the component does | | @whenToUse | Recommended | Guidance on when to use this component | | @whenNotToUse | Recommended | Anti-patterns and when not to use | | @tags | Optional | Comma-separated searchable keywords | | @example | Optional | Code example showing usage |

To exclude a component from the catalog:

/**
 * @launch77-ignore
 * @reason Not ready for production use
 */

License

UNLICENSED - Private package