@orchard9ai/design-system

v0.1.2 - Complete Component Library

A comprehensive React component library built on DaisyUI and TailwindCSS v4 for the Orchard9 ecosystem. This package provides a full suite of accessible, themeable UI components with TypeScript support.

Features

• 🧩 50+ React Components - Full component library including Button, Card, Modal, Table, Forms, and more
• 🎨 DaisyUI + TailwindCSS v4 - Modern CSS-first configuration with semantic component classes
• 🌓 6 Built-in Themes - Light, dark, cupcake, business, plus custom Grove themes
• 🎯 TypeScript Support - Fully typed components with excellent IDE support
• 📦 Tree-shakeable - Optimized bundle with only what you use
• ♿ Accessible - WCAG 2.1 AA compliant components
• 🧪 Thoroughly Tested - Jest, React Testing Library, accessibility testing
• 📚 Storybook Documentation - Interactive component explorer
• 🚀 Tiny Bundle - Only 467B JS + optimized CSS
• 🛠️ Developer Experience - Theme hooks, utility functions, consistent APIs

Installation

npm install @orchard9ai/design-system

# Install peer dependencies
npm install react react-dom

Quick Start

1. Import Styles

Import the design system CSS in your app entry point:

// In your main.tsx or App.tsx
import '@orchard9ai/design-system/styles.css';

2. Configure PostCSS (if using TailwindCSS v4)

If you're extending the design system with custom styles:

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

3. Use Available Components and Utilities

import { cn } from '@orchard9ai/design-system';

function MyComponent() {
  return (
    <div data-theme="light" className="min-h-screen bg-base-100">
      <button className={cn('btn', 'btn-primary', 'loading')}>Click me</button>
    </div>
  );
}

Available Components

Core Components

• Button - Primary, secondary, variants with loading states
• Card - Flexible content containers with image support
• Modal - Accessible modal dialogs
• Drawer - Side panel navigation
• Dropdown - Menu and select dropdowns

Form Components

• FormControl - Form field wrapper with labels
• Input - Text input with variants
• Select - Dropdown selection
• Textarea - Multi-line text input
• Checkbox - Single and group checkboxes
• Radio - Radio buttons and groups
• Toggle - Switch toggles

Layout Components

• Container - Responsive content wrapper
• Grid - Flexible grid system
• Stack - Vertical/horizontal spacing
• Hero - Hero sections

Data Display

• Table - Data tables with sorting
• Stat - Statistics display
• Avatar - User avatars with groups
• Badge - Status indicators
• Timeline - Event timelines
• Accordion - Collapsible content

Feedback Components

• Alert - Inline notifications
• Toast - Toast notifications
• Progress - Progress bars
• Skeleton - Loading placeholders
• EmptyState - Empty data states

Navigation

• Breadcrumb - Navigation breadcrumbs
• Pagination - Page navigation
• Tabs - Tabbed interfaces

Quick Examples

Using Components

import { Button, Card, ThemeProvider, useTheme } from '@orchard9ai/design-system';

function App() {
  return (
    <ThemeProvider defaultTheme="grove-light">
      <Card>
        <Card.Body>
          <Card.Title>Welcome to Orchard9</Card.Title>
          <p>Build amazing interfaces with our component library.</p>
          <Card.Actions>
            <Button variant="primary">Get Started</Button>
          </Card.Actions>
        </Card.Body>
      </Card>
    </ThemeProvider>
  );
}

Form Example

import { FormControl, Input, Button } from '@orchard9ai/design-system';

function LoginForm() {
  return (
    <form>
      <FormControl>
        <FormControl.Label>Email</FormControl.Label>
        <Input type="email" placeholder="Enter your email" />
      </FormControl>

      <FormControl>
        <FormControl.Label>Password</FormControl.Label>
        <Input type="password" />
      </FormControl>

      <Button variant="primary" type="submit">
        Sign In
      </Button>
    </form>
  );
}

Using Utility Functions

import { cn } from '@orchard9ai/design-system';

// Conditional class merging
const buttonClass = cn(
  'btn',
  variant && `btn-${variant}`,
  isLoading && 'loading',
  isDisabled && 'btn-disabled'
);

// Complex conditional styling
const cardClass = cn(
  'card',
  'bg-base-100',
  'shadow-xl',
  isActive && 'ring-2 ring-primary',
  isCompact && 'card-compact'
);

Theme Switching

Using the ThemeProvider and useTheme hook:

import { useTheme } from '@orchard9ai/design-system';

function ThemeSwitcher() {
  const { theme, setTheme, themes } = useTheme();

  return (
    <select
      className="select select-bordered"
      value={theme}
      onChange={(e) => setTheme(e.target.value as any)}
    >
      {themes.map((t) => (
        <option key={t} value={t}>
          {t}
        </option>
      ))}
    </select>
  );
}

Theme System

DaisyUI Semantic Colors

The design system uses DaisyUI's semantic color system:

• primary - Brand color (customizable per theme)
• secondary - Secondary brand color
• accent - Accent color for highlights
• neutral - Neutral grays
• base-100/200/300 - Background layers
• info/success/warning/error - Status colors

Available Themes

• Light - Clean, minimal light theme
• Dark - High-contrast dark theme
• Cupcake - Soft, pastel color palette
• Business - Professional, corporate styling
• Grove Light - Orchard9 brand theme with emerald accents on light background
• Grove Dark - Orchard9 brand theme with vibrant emerald on dark background

Theme Implementation

// Set theme on document root
document.documentElement.setAttribute('data-theme', 'light');

// Or use React state
function App() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return <div className="min-h-screen bg-base-100">{/* Your app content */}</div>;
}

Testing Your Integration

Verification Steps

1. Install and import: Ensure the package installs and CSS imports correctly
2. Theme switching: Test all 4 themes work properly
3. DaisyUI classes: Verify DaisyUI utilities are available
4. Bundle size: Check impact on your app's bundle size
5. Build process: Ensure production builds work correctly

Example Test Component

import { cn } from '@orchard9ai/design-system';
import '@orchard9ai/design-system/styles.css';

export function DesignSystemTest() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold">Design System Test</h2>

      {/* Theme Switcher */}
      <select
        className="select select-bordered"
        value={theme}
        onChange={(e) => setTheme(e.target.value)}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="cupcake">Cupcake</option>
        <option value="business">Business</option>
      </select>

      {/* Component Tests */}
      <div className="space-x-2">
        <button className={cn('btn', 'btn-primary')}>Primary</button>
        <button className="btn btn-secondary">Secondary</button>
        <button className="btn btn-accent">Accent</button>
      </div>

      <div className="alert alert-success">
        <span>✅ Design system is working correctly!</span>
      </div>

      <div className="card bg-base-100 shadow">
        <div className="card-body">
          <h3 className="card-title">Test Card</h3>
          <p>Testing DaisyUI components in {theme} theme</p>
        </div>
      </div>
    </div>
  );
}

Development (for Contributors)

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build package
pnpm build

# Start Storybook
pnpm storybook

# Check bundle size
pnpm size

# Type checking
pnpm typecheck

Roadmap

v0.1.2 ✅ (Current)

• Complete component library (50+ components)
• Theme system with 6 themes
• Full TypeScript support
• Comprehensive test coverage
• Storybook documentation

v0.2.0 (Next)

• Enhanced form validation
• Animation utilities
• Additional theme customization
• Component composition patterns

v1.0.0 (Future)

• Stable API
• Performance optimizations
• Extended accessibility features
• Figma design kit

Documentation

• 📖 Usage Guide - Detailed usage instructions
• 🧪 Testing Guide - Testing strategies and examples
• 🎨 Design Tokens - Color and spacing system
• ♿ Accessibility - WCAG compliance guidelines

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Storybook (coming soon)

License

MIT © Orchard9