@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