npm package: @sandip1046/shared-ui
Description: Shared UI components and design system for Rubizz Hotel Inn - Supports both React (Next.js) and Angular
Author: Rubizz Hotel Inn
Latest version: 1.0.0

# @rubizz/shared-ui

Shared UI components and design system for Rubizz Hotel Inn micro-frontend architecture.

## 🎨 Features

- **Dual Framework Support**: React components for Next.js apps + Angular components for Angular apps
- **Framework-Agnostic Core**: Themes, utilities, and styles work for both frameworks
- **Theme System**: Service-specific color themes (Admin, Hotel, Finance, Restaurant, Hall, Customer)
- **Context-Aware Loaders**: Loaders that change based on context (restaurant, hotel, hall, delivery, finance)
- **Design System Components**: Reusable UI components (Button, Card, etc.) in both React and Angular
- **TypeScript Support**: Full TypeScript support with type definitions
- **Storybook**: Component documentation and testing

## 🏗️ Architecture

This library supports **both Next.js (React) and Angular** micro-frontends:

- **React Components** (`src/react/`) - For Next.js apps:
  - Customer Portal, Delivery App, Analytics Dashboard
  - Hotel/Restaurant/Hall Portals

- **Angular Components** (`src/angular/`) - For Angular apps:
  - Admin Dashboard, Manager Portal, Employee Portal
  - Staff Portal, POS Interface

- **Framework-Agnostic Core** (`src/core/`) - Shared by both:
  - Theme system, utilities, types, CSS

## 📦 Installation

Install the package using npm. The library requires React 18+ for React components and Angular 17+ for Angular components as peer dependencies.

## 🚀 Usage Overview

### For Next.js Apps (React)

The library provides React components that can be imported from `@rubizz/shared-ui/react`. 

**Theme Management**: Use the `ThemeProvider` component to wrap your application and the `useTheme` hook to access and modify theme settings.

**Components Available**: Button, Card, ContextLoader, and all individual loader components (SpoonForkLoader, ChefHatLoader, BedLoader, etc.)

**Import Path**: Import React components from `@rubizz/shared-ui/react`

### For Angular Apps

The library provides standalone Angular components that can be imported directly into your Angular modules.

**Theme Management**: Use the `ThemeService` injectable service which uses Angular signals for reactive theme management. The service automatically applies theme changes to CSS variables.

**Components Available**: ButtonComponent, CardComponent, ContextLoaderComponent - all are standalone components compatible with Angular 17+.

**Import Path**: Import Angular components from `@rubizz/shared-ui/angular`

**Global Styles**: Import the global CSS styles in your Angular application's styles configuration or angular.json file.

### Using Core Utilities (Both Frameworks)

Core utilities including currency formatting, date formatting, validation functions, and helper utilities are available to both React and Angular applications.

**Import Path**: Import core utilities from `@rubizz/shared-ui/core`

## 🎨 Theme System

### Available Service Themes

The library includes six service-specific color themes:

- **admin**: Gray shades for Admin Dashboard
- **hotel**: Green shades for Hotel Portal
- **finance**: Golden shades for Finance Portal
- **restaurant**: Orange shades for Restaurant Portal
- **hall**: Blue shades (#2bd5fb) for Hall Booking Portal
- **customer**: Multi-color theme for Customer/Landing Page

### Theme Modes

Each theme supports both light and dark modes. Theme preferences are persisted in localStorage and automatically applied on application load.

### Theme Implementation

Themes are implemented using CSS variables that are dynamically updated based on the selected service and mode. All components automatically adapt to the current theme.

## 🔄 Context-Aware Loaders

The library provides context-specific loaders that automatically display appropriate animations based on the context:

- **restaurant**: Spoon & Fork, Chef Hat, Plate animations
- **hotel**: Bed, Key, Room animations
- **hall**: Hall, Calendar animations
- **delivery**: Delivery Bike, Package, Map animations
- **finance**: Coin, Calculator, Chart animations
- **general**: Logo, Spinner animations

Loaders are available in three sizes: small (sm), medium (md), and large (lg). Each loader can display an optional message.

## 📚 Storybook

The library includes Storybook for component documentation and visual testing. Run Storybook to explore all available components, their variants, and usage examples.

## 🛠️ Development

The library is built with TypeScript and includes:

- TypeScript strict mode configuration
- ESLint for code quality
- Storybook for component documentation
- Build scripts for compilation
- Watch mode for development

## 📁 Project Structure

The library is organized into three main directories:

- **core/**: Contains framework-agnostic code including theme definitions, utility functions, TypeScript types, and global CSS styles
- **react/**: Contains React components and contexts for Next.js applications
- **angular/**: Contains Angular standalone components and services for Angular applications

The compiled output is generated in the `dist/` directory with separate entry points for React, Angular, and core utilities.

## 📦 Package Exports

The package provides multiple entry points for optimal tree-shaking:

- Main entry: Exports everything from the library
- React entry: React-specific components and hooks
- Angular entry: Angular-specific components and services
- Core entry: Framework-agnostic utilities and types
- Styles entry: Global CSS styles

## 🔧 Configuration

### TypeScript

The library requires TypeScript 5+ with experimental decorators enabled for Angular support and React JSX support for React components.

### Peer Dependencies

- React 18+ and React DOM 18+ for React components
- Angular Core 17+ and Angular Common 17+ for Angular components

## 📝 License

MIT