React UI/UX Prototyping Library

A comprehensive React library for rapidly building functional UI/UX mockups, prototypes, and wireframes with production-ready components.

🚀 Quick Start

Installation

npm install @khazra/react-ui-builder

Basic Usage

import { AppSkeleton } from '@khazra/react-ui-builder';
import '@khazra/react-ui-builder/styles';

function App() {
  return (
    <AppSkeleton
      title="My Prototype App"
      theme={{
        designStyle: 'flat-minimal',
        primaryColor: '#3b82f6',
      }}
      pages={[
        {
          path: '/',
          title: 'Dashboard',
          render: () => <div>Welcome to your dashboard!</div>,
        },
      ]}
    />
  );
}

✨ Key Features

🎨 8 Design Styles

• Flat Minimal: Clean, modern design with subtle shadows
• Retro: Nostalgic 80s-inspired aesthetics
• Cyberpunk: Futuristic neon-themed interfaces
• Neubrutalism: Bold, high-contrast design
• Bauhaus: Geometric, functional design principles
• Neumorphic: Soft, tactile interface elements
• Glassmorphism: Translucent, layered effects
• Retro Futurism: Vintage sci-fi inspired design

🧩 Complete Component System

• AppSkeleton: Full application orchestrator
• Layouts: Sidebar, top bar, composite, and full-page layouts
• Navigation: Vertical, horizontal, and breadcrumb navigation
• Data Tables: Advanced tables with sorting, filtering, pagination
• Authentication: Multiple login styles and protected routes
• Theme System: Advanced color palette generation

📱 Production Ready

• TypeScript: Full type safety throughout
• Responsive: Mobile-first design approach
• Accessible: WCAG compliant components
• Tested: 80%+ test coverage
• Documented: Comprehensive Storybook examples

🎯 Perfect For

• Rapid Prototyping: Build functional prototypes in minutes
• Design Systems: Create consistent component libraries
• MVP Development: Launch products faster with pre-built components
• Client Demos: Impressive presentations with realistic data
• Design Exploration: Test different visual styles quickly

📚 Documentation

Online Documentation

• Storybook: Live Component Documentation
• API Reference: Complete TypeScript interfaces and examples
• Design System: Visual guide to all 8 design styles
• Examples: 8+ complete application examples

Local Documentation

# Run Storybook locally
npm run storybook

# Build documentation
npm run build-docs

# Preview built documentation
npm run preview-docs

🛠️ Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Setup

# Clone the repository
git clone https://github.com/khazra/bolt-ui-builder.git
cd react-library

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build library
pnpm build

Project Structure

src/
├── lib/                    # Library source code
│   ├── app-skeleton/      # Main orchestrator component
│   ├── auth/              # Authentication components
│   ├── components/        # Reusable components
│   ├── data/              # Data management components
│   ├── hooks/             # Custom React hooks
│   ├── layouts/           # Layout components
│   ├── navigation/        # Navigation components
│   ├── routing/           # Routing utilities
│   ├── theme/             # Theme system
│   ├── types/             # TypeScript definitions
│   └── utils/             # Utility functions
├── test/                  # Test utilities and E2E tests
└── docs/                  # Documentation and guides

🎨 Design Styles

Flat Minimal (Default)

<AppSkeleton theme={{ designStyle: 'flat-minimal' }} />

Retro

<AppSkeleton theme={{ designStyle: 'retro' }} />

Cyberpunk

<AppSkeleton theme={{ designStyle: 'cyberpunk' }} />

And 5 more styles...

See our Storybook documentation for all design styles.

📦 Components

AppSkeleton

The main component that orchestrates your entire application:

<AppSkeleton
  title="My App"
  theme={{ designStyle: 'flat-minimal', primaryColor: '#3b82f6' }}
  pages={[
    {
      path: '/',
      title: 'Home',
      layout: { type: 'sidebar-nav', showNavigation: true },
      render: () => <div>Home content</div>,
    },
  ]}
/>

Data Tables

Advanced data tables with sorting, filtering, and pagination:

const tableConfig = {
  columns: [
    { id: 'name', label: 'Name', sortable: true, filterable: true },
    { id: 'email', label: 'Email', sortable: true },
  ],
  data: [
    [{ value: 'John Doe' }, { value: 'john@example.com' }],
    [{ value: 'Jane Smith' }, { value: 'jane@example.com' }],
  ],
  pagination: true,
  selectable: true,
};

<AppSkeleton
  pages={[
    {
      path: '/users',
      title: 'Users',
      dataTable: tableConfig,
    },
  ]}
/>

Authentication

Multiple login styles with built-in validation:

<AppSkeleton
  login={{
    style: 'centered',
    title: 'Welcome Back',
    showSocialLogin: true,
    providers: ['google', 'github'],
  }}
  pages={[
    {
      path: '/',
      title: 'Dashboard',
      requireAuth: true,
      render: () => <div>Protected content</div>,
    },
  ]}
/>

🧪 Testing

Unit Tests

# Run all tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests in watch mode
pnpm test:watch

E2E Tests

# Install Playwright browsers
pnpm playwright:install

# Run E2E tests
pnpm playwright

# Run E2E tests with UI
pnpm playwright:ui

🚀 Deployment

Build for Production

# Build library
pnpm build

# Build documentation
pnpm build-docs

# Validate build
pnpm validate

Deploy Documentation

# Deploy to Surge.sh
pnpm deploy-docs

# Or build and deploy manually
pnpm build-docs
npx surge storybook-static --domain your-domain.surge.sh

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Run the test suite
6. Submit a pull request

Code Standards

• TypeScript for all code
• 80%+ test coverage required
• Follow existing code style
• Add Storybook stories for new components
• Update documentation as needed

📄 License

MIT License - see LICENSE file for details.

🆘 Support

• Documentation: Storybook Examples
• Issues: GitHub Issues
• Discussions: GitHub Discussions

🗺️ Roadmap

Current Version (1.0.0)

• ✅ Complete component library
• ✅ 8 design styles
• ✅ Comprehensive documentation
• ✅ 80%+ test coverage

Future Versions

• 1.1.0: Advanced layout components (Grid, Masonry)
• 1.2.0: Form builder components
• 1.3.0: Visual builder interface
• 2.0.0: Plugin system and extensions

---

Ready to build amazing prototypes? Check out our live examples and start prototyping today! 🚀