@launch77-shared/plugin-ui

Launch77 UI library plugin - Setup Radix UI component library with design system integration.

Overview

This plugin installs and configures the @launch77-shared/lib-ui component library in your Launch77 application. It automatically:

• ✅ Installs @launch77-shared/lib-ui package
• ✅ Configures Tailwind to include UI library components
• ✅ Verifies design system integration
• ✅ Provides interactive component showcase
• ✅ Includes comprehensive documentation

Requirements

• Design System Plugin: This plugin requires the design-system plugin to be installed first
• Tailwind CSS: Your application must have Tailwind CSS configured
• Next.js: Compatible with Next.js App Router applications

Installation

From your Launch77 application directory:

launch77 plugin:install ui

The plugin will automatically:

1. Check for design-system plugin dependency
2. Install @launch77-shared/lib-ui package
3. Update tailwind.config.ts to include UI library in content paths
4. Copy example pages and documentation to your app

What Gets Installed

Package Dependencies

• @launch77-shared/lib-ui - UI component library

Configuration Changes

tailwind.config.ts

• Adds node_modules/@launch77-shared/lib-ui/dist/**/*.js to content array
• Ensures Tailwind processes UI component styles

Template Files

src/
├── app/
│   └── ui-examples/
│       └── page.tsx              # Interactive component showcase
└── modules/
    └── ui/
        ├── README.md              # Component documentation
        └── index.ts               # Convenience re-exports

Usage

Importing Components

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

// Or from module re-exports
import { Button, Input, Card } from '@/modules/ui'

export default function MyComponent() {
  return (
    <Card className="p-6">
      <h2>Hello World</h2>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  )
}

Available Components

• Form Controls: Button, Input, Textarea, Select, Checkbox, Switch
• Layout: Card, Sidebar
• Feedback: Alert, Badge, Dialog
• Display: Avatar
• Form Utilities: FormField, FormError, FormHelperText

Component Showcase

Visit the interactive showcase to explore all components:

npm run dev
# Navigate to http://localhost:3000/ui-examples

Documentation

After installation, view detailed component documentation at:

• src/modules/ui/README.md - Full API reference and examples
• /ui-examples - Live interactive examples

Architecture

How It Works

1. Plugin Dependencies: Declares design-system as a required plugin
2. Package Installation: Adds @launch77-shared/lib-ui to your package.json
3. Tailwind Integration: Updates content paths so Tailwind processes component styles
4. Template Copy: Copies example pages and documentation to your app

Generator Logic

The plugin's generator (src/generator.ts) extends StandardGenerator and:

1. updateDependencies() - Merges library dependencies into your package.json
2. installDependencies() - Runs npm install to fetch packages
3. copyTemplates() - Copies example and documentation files
4. injectCode() - Updates Tailwind config with UI library content path
5. showNextSteps() - Displays usage instructions

Customization

Styling Components

All components support Tailwind utility classes via className prop:

<Button className="w-full bg-purple-600 hover:bg-purple-700">Custom Button</Button>

Brand Customization

Customize the design system tokens that affect all UI components:

/* src/modules/design-system/config/brand.css */
:root {
  --primary: 220 90% 56%;
  --secondary: 240 5% 26%;
  /* ... more tokens */
}

Extending Components

Create custom variants by wrapping base components:

// src/components/PrimaryButton.tsx
import { Button } from '@launch77-shared/lib-ui'

export function PrimaryButton(props) {
  return <Button className="bg-gradient-to-r from-blue-600 to-purple-600" {...props} />
}

Troubleshooting

Styles Not Appearing

If component styles aren't applying:

1. Check Tailwind Config: Verify tailwind.config.ts includes:

   content: [
     // ... other paths
     'node_modules/@launch77-shared/lib-ui/dist/**/*.js',
   ]

2. Rebuild: Restart your dev server:

   npm run dev

3. Design System: Ensure design-system plugin is installed:

   launch77 plugin:install design-system

TypeScript Errors

If you see TypeScript errors importing components:

1. Install Dependencies:

   npm install

2. Check Package: Verify @launch77-shared/lib-ui is in your package.json

Missing Components

If example page shows missing components:

1. Verify Installation: Check node_modules/@launch77-shared/lib-ui exists
2. Reinstall Plugin:

   launch77 plugin:install ui

Development

Building the Plugin

cd plugins/ui
npm run build

Testing Locally

# In your app directory
launch77 plugin:install ui

Related Plugins

• design-system (required) - Provides design tokens and Tailwind preset
• analytics-web - Track user interactions with UI components

License

UNLICENSED - Internal use only

Support

For issues or questions:

1. Check src/modules/ui/README.md for component documentation
2. Review design system at /design-system-test
3. Open an issue in the Launch77 CLI repository