Biq Pod UI Library

A comprehensive React-based UI library and application framework for building modern web and desktop applications.

🚀 Features

• Rich Component Library: 70+ pre-built React components
• Multi-platform Support: Web, Desktop (Electron), and Mobile (Capacitor)
• Theme System: Built-in dark/light theme support with customizable colors
• Internationalization: Multi-language support with easy translation management
• Type-safe: Full TypeScript support
• Modular Architecture: Tree-shakeable components and utilities

📦 Installation

npm install @biqpod/app

🏗️ Project Structure

src/
├── core/                    # Core application logic and infrastructure
│   ├── app/                # Application setup and initialization
│   ├── config/             # Configuration files and constants
│   ├── models/             # Data models and business logic
│   ├── services/           # External services and APIs
│   └── store/              # State management (Redux store)
├── shared/                  # Reusable components and utilities
│   ├── ui/                 # UI components and layouts
│   │   ├── components/     # Reusable UI components
│   │   ├── layouts/        # Layout components
│   │   └── styles/         # SCSS/CSS styles
│   ├── hooks/              # Custom React hooks
│   ├── utils/              # Utility functions
│   ├── types/              # TypeScript type definitions
│   ├── functions/          # Utility functions
│   └── assets/             # Static assets (images, fonts, etc.)
└── features/               # Feature-specific modules
    ├── auth/               # Authentication feature
    ├── demo/               # Demo pages and examples
    ├── settings/           # Settings management
    └── notifications/      # Notification system

📖 Read the Architecture Guide for detailed explanations of the new structure.

🚦 Getting Started

Basic Usage

import { Button, Card, Input } from "@biqpod/app/components";
import { startApplication } from "@biqpod/app/app";

const MyApp = () => (
  <Card>
    <Input placeholder="Enter your name" />
    <Button>Submit</Button>
  </Card>
);

// Start the application
startApplication(<MyApp />, {
  isDev: process.env.NODE_ENV === "development",
  projectId: "your-project-id",
});

Available Packages

Core Modules:

• @biqpod/app/core - Core application logic and services
• @biqpod/app/core/app - Application initialization
• @biqpod/app/core/services - API services and integrations

Shared Modules:

• @biqpod/app/shared/ui/components - UI components
• @biqpod/app/shared/ui/layouts - Layout components
• @biqpod/app/shared/hooks - Custom hooks
• @biqpod/app/shared/utils - Utility functions
• @biqpod/app/shared/types - TypeScript types

Legacy Compatibility:

• @biqpod/app/components - UI components (mapped to shared/ui/components)
• @biqpod/app/hooks - Custom hooks (mapped to shared/hooks)
• @biqpod/app/utils - Utility functions (mapped to shared/utils)
• @biqpod/app/layouts - Layout components (mapped to shared/ui/layouts)
• @biqpod/app/types - TypeScript types (mapped to shared/types)

🎨 Components

Form Components

• Input, TextArea, Button
• DateField, ColorField, FileField
• ArrayField, ObjectField, EnumField
• Form validation and management

Layout Components

• Card, Panel, Tabs
• Grid, Flex utilities
• Responsive layouts

Data Display

• List, Tree, Table
• Charts and visualization
• Loading states

Navigation

• Router integration
• Breadcrumbs, Menu
• Command palette

🔧 Development Scripts

# Development server
npm run dev

# Build library
npm run build.lib

# Build web app
npm run build.web

# Type checking
npm run compile

# Linting
npm run lint

# Testing
npm run e2e

🌐 Platform Support

Web

Standard web application deployment with Vite.

Desktop (Electron)

npm run build.electron

Mobile (Capacitor)

Supports iOS and Android via Capacitor integration.

🎯 Configuration

The library supports extensive configuration through the startApplication function:

startApplication(<App />, {
  isDev: boolean,
  projectId: string,
  timeLoading: number,
  onPrepare: () => ({
    colors: Color[],
    settings: Setting[],
    commands: Command[],
    translations: Translation[]
  })
});

📚 Documentation

• Component Documentation
• API Reference
• Theming Guide
• Migration Guide

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE.md for details.

🔗 Links

• GitHub Repository
• NPM Package
• Documentation