popsite-ui 1.0.0

package/App.jsx

@@ -0,0 +1,95 @@
+import React, { useMemo, useState } from 'react';
+import PortalHeader from './components/layout/PortalHeader';
+import SystemSidebar from './components/layout/SystemSidebar';
+import SystemModuleRenderer from './components/modules/SystemModuleRenderer';
+import systems from './data/systems';
+import { buildSubmissionRecord } from './utils/systemEngine';
+import './styles.css';
+
+const getThemeVariables = (system) => {
+  if (!system) {
+    return {};
+  }
+
+  const isDarkTheme = system.appearance === 'dark';
+
+  return {
+    '--primary': system.primary,
+    '--surface': isDarkTheme ? '#121722' : '#ffffff',
+    '--surface-soft': isDarkTheme ? '#171f2d' : '#f8fafc',
+    '--surface-elevated': isDarkTheme ? '#1f2937' : '#ffffff',
+    '--text-main': isDarkTheme ? '#ecf2ff' : '#0f172a',
+    '--text-muted': isDarkTheme ? '#a9b7d0' : '#4b5563',
+    '--border-soft': isDarkTheme ? 'rgba(134, 156, 192, 0.25)' : 'rgba(148, 163, 184, 0.35)',
+    '--shadow-soft': isDarkTheme ? '0 16px 38px rgba(2, 6, 23, 0.45)' : '0 14px 34px rgba(15, 23, 42, 0.12)',
+    '--bg-layer': isDarkTheme
+      ? `radial-gradient(circle at 12% 12%, ${system.primary}33 0%, transparent 42%), linear-gradient(128deg, #06090f 0%, #101827 100%)`
+      : `radial-gradient(circle at 16% 8%, ${system.primary}22 0%, transparent 38%), linear-gradient(130deg, #f8fbff 0%, #eef3fb 100%)`
+  };
+};
+
+function App() {
+  const [activeSystemId, setActiveSystemId] = useState(systems[0]?.id ?? '');
+  const [recordsBySystem, setRecordsBySystem] = useState({});
+
+  const activeSystem = useMemo(() => {
+    return systems.find((system) => system.id === activeSystemId) ?? systems[0] ?? null;
+  }, [activeSystemId]);
+
+  const activeRecord = activeSystem ? recordsBySystem[activeSystem.id] : null;
+  const themeVariables = useMemo(() => getThemeVariables(activeSystem), [activeSystem]);
+
+  const handleSystemSubmit = (formData) => {
+    if (!activeSystem) {
+      return;
+    }
+
+    const submissionRecord = buildSubmissionRecord(activeSystem, formData);
+
+    setRecordsBySystem((previousRecords) => ({
+      ...previousRecords,
+      [activeSystem.id]: submissionRecord
+    }));
+  };
+
+  if (!activeSystem) {
+    return (
+      <div className="app-shell" style={themeVariables}>
+        <main className="workspace-column">
+          <section className="empty-state">
+            <h3>No systems configured</h3>
+            <p>Add at least one system definition inside data/systems to start rendering templates.</p>
+          </section>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-shell" style={themeVariables}>
+      <PortalHeader activeSystem={activeSystem} totalSystems={systems.length} />
+
+      <main className="app-layout">
+        <SystemSidebar
+          systems={systems}
+          activeSystemId={activeSystem.id}
+          onSelectSystem={setActiveSystemId}
+        />
+
+        <section className="workspace-column">
+          <SystemModuleRenderer
+            system={activeSystem}
+            record={activeRecord}
+            onSubmit={handleSystemSubmit}
+          />
+        </section>
+      </main>
+
+      <footer className="portal-footer-note">
+        <p>Designed for multi-domain demos with independent themes, forms, and summaries.</p>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

package/README.md

@@ -0,0 +1,92 @@
+# Multi Domain Booking Portal
+
+A React component library with themed booking and management workflows.
+
+## Installation
+
+```bash
+npm install multi-domain-booking-portal react react-dom
+```
+
+## Usage
+
+```jsx
+import { App } from "multi-domain-booking-portal";
+import "multi-domain-booking-portal/styles.css";
+
+function Demo() {
+  return <App />;
+}
+
+export default Demo;
+```
+
+## Exports
+
+- `App` and `MultiDomainBookingPortal`
+- `systems`
+- `PortalHeader`, `SystemSidebar`
+- `SystemHero`, `DynamicSystemForm`, `SystemSummaryCard`
+- `SystemModuleRenderer`, `systemModuleMap`
+- `ModuleContentDeck`, `moduleContentMap`
+- utilities from `systemEngine`
+
+## Customizing Module Content
+
+The package ships with content definitions in `components/modules/moduleContentMap.js`.
+
+Each system key (`movie-booking`, `flight-booking`, etc.) supports:
+
+- `overview`: short module description
+- `quickStats`: array of `{ label, value }`
+- `workflowSteps`: ordered list of operational steps
+- `policyNotes`: list of policy/ops notes
+
+Example shape:
+
+```js
+{
+  'movie-booking': {
+    overview: 'Cinema module description',
+    quickStats: [
+      { label: 'Peak Throughput', value: '2.1k bookings/hr' }
+    ],
+    workflowSteps: ['Step 1', 'Step 2'],
+    policyNotes: ['Policy A', 'Policy B']
+  }
+}
+```
+
+## Visual Widgets and Presets
+
+Per-system widgets and sample form presets are managed in `components/modules/moduleEnhancementsMap.js`.
+
+Each system can define:
+
+- `widget`: visual block config
+- `presets`: sample form data buttons rendered above the form
+
+Supported widget types:
+
+- `seat-map`
+- `route-timeline`
+- `occupancy-meter`
+- `kpi-spark-cards`
+
+Each module form includes:
+
+- Preset apply buttons
+- `Reset Form` button (restores defaults)
+
+## Scripts
+
+- `npm run dev` - run local demo app
+- `npm run build` - build demo app output
+- `npm run build:lib` - build npm library output
+
+## Publish
+
+```bash
+npm login
+npm publish --access public
+```

package/components/layout/PortalHeader.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function PortalHeader({ activeSystem, totalSystems }) {
+    return (
+        <header className="portal-header">
+            <p className="eyebrow">Scalable Product UI Collection</p>
+            <h1>{activeSystem.title}</h1>
+            <p className="header-description">{activeSystem.description}</p>
+            <div className="header-meta">
+                <span>{activeSystem.uiStyle}</span>
+                <span>{totalSystems} systems available</span>
+                <span>Primary color: {activeSystem.primary}</span>
+            </div>
+        </header>
+    );
+}
+
+export default PortalHeader;

package/components/layout/SystemSidebar.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function SystemSidebar({ systems, activeSystemId, onSelectSystem }) {
+    return (
+        <aside className="system-sidebar">
+            <h2>System Library</h2>
+            <p>Choose a product pattern to load its dedicated interface and workflow.</p>
+
+            <div className="system-list">
+                {systems.map((system) => {
+                    const isActive = system.id === activeSystemId;
+
+                    return (
+                        <button
+                            key={system.id}
+                            type="button"
+                            onClick={() => onSelectSystem(system.id)}
+                            className={`system-button ${isActive ? 'active' : ''}`}
+                        >
+                            <span className="color-chip" style={{ backgroundColor: system.primary }} />
+                            <span className="button-content">
+                                <strong>{system.title}</strong>
+                                <small>{system.uiStyle}</small>
+                            </span>
+                        </button>
+                    );
+                })}
+            </div>
+        </aside>
+    );
+}
+
+export default SystemSidebar;

package/components/modules/AnalyticsDashboardModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import analyticsDashboardSystem from '../../data/systems/analyticsDashboard';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function AnalyticsDashboardModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={analyticsDashboardSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Data-heavy analytics module for source volume, analyst seats, and refresh setup."
+            emptyHint="Select dashboard setup values to generate your platform usage estimate."
+        />
+    );
+}
+
+export default AnalyticsDashboardModule;

package/components/modules/ChatMessagingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import chatMessagingSystem from '../../data/systems/chatMessaging';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function ChatMessagingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={chatMessagingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="WhatsApp Web inspired module for workspace setup, seats, and support planning."
+            emptyHint="Configure user seats and plan tier to preview subscription totals."
+        />
+    );
+}
+
+export default ChatMessagingModule;

package/components/modules/EcommerceStoreModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ecommerceStoreSystem from '../../data/systems/ecommerceStore';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function EcommerceStoreModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={ecommerceStoreSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Amazon-style commerce module for category selection, quantity, and checkout plans."
+            emptyHint="Choose product plan and quantity to create your order total summary."
+        />
+    );
+}
+
+export default EcommerceStoreModule;

package/components/modules/EventTicketBookingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import eventTicketBookingSystem from '../../data/systems/eventTicketBooking';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function EventTicketBookingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={eventTicketBookingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Dark event module for conferences, concerts, and access-zone ticketing."
+            emptyHint="Select event and access zone to build your attendee confirmation summary."
+        />
+    );
+}
+
+export default EventTicketBookingModule;

package/components/modules/FlightBookingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import flightBookingSystem from '../../data/systems/flightBooking';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function FlightBookingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={flightBookingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Clean travel booking module for routes, passengers, and cabin class plans."
+            emptyHint="Pick route and cabin class details to generate your flight quote."
+        />
+    );
+}
+
+export default FlightBookingModule;

package/components/modules/FoodOrderingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import foodOrderingSystem from '../../data/systems/foodOrdering';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function FoodOrderingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={foodOrderingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Swiggy-style ordering module focused on speed, items, and delivery mode."
+            emptyHint="Choose restaurant, items, and delivery type to generate order pricing."
+        />
+    );
+}
+
+export default FoodOrderingModule;

package/components/modules/HospitalAppointmentModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import hospitalAppointmentSystem from '../../data/systems/hospitalAppointment';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function HospitalAppointmentModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={hospitalAppointmentSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Medical booking module for department routing, consultation mode, and appointments."
+            emptyHint="Enter patient and consultation details to generate appointment billing."
+        />
+    );
+}
+
+export default HospitalAppointmentModule;

package/components/modules/HotelBookingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import hotelBookingSystem from '../../data/systems/hotelBooking';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function HotelBookingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={hotelBookingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Hospitality-first module designed for stay duration, room type, and guest details."
+            emptyHint="Add stay and room details to generate a complete reservation summary."
+        />
+    );
+}
+
+export default HotelBookingModule;

package/components/modules/InvoiceBillingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import invoiceBillingSystem from '../../data/systems/invoiceBilling';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function InvoiceBillingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={invoiceBillingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="FreshBooks-style billing module for client invoicing, units, and plan-tier costing."
+            emptyHint="Add billable units and plan type to generate an invoice-ready total."
+        />
+    );
+}
+
+export default InvoiceBillingModule;

package/components/modules/LibraryManagementModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import libraryManagementSystem from '../../data/systems/libraryManagement';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function LibraryManagementModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={libraryManagementSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Admin-panel style module for library issue flow, membership, and usage charges."
+            emptyHint="Set member and borrow details to generate the library service summary."
+        />
+    );
+}
+
+export default LibraryManagementModule;

package/components/modules/ModuleContentDeck.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+function ModuleContentDeck({ overview, quickStats = [], workflowSteps = [], policyNotes = [] }) {
+    return (
+        <section className="module-content-grid">
+            <article className="module-panel module-overview">
+                <h4>Module Overview</h4>
+                <p>{overview}</p>
+            </article>
+
+            <article className="module-panel">
+                <h4>Quick Stats</h4>
+                <ul className="module-list">
+                    {quickStats.map((item) => (
+                        <li key={item.label}>
+                            <span>{item.label}</span>
+                            <strong>{item.value}</strong>
+                        </li>
+                    ))}
+                </ul>
+            </article>
+
+            <article className="module-panel">
+                <h4>Workflow Steps</h4>
+                <ol className="module-steps">
+                    {workflowSteps.map((step) => (
+                        <li key={step}>{step}</li>
+                    ))}
+                </ol>
+            </article>
+
+            <article className="module-panel">
+                <h4>Policy and Notes</h4>
+                <ul className="module-policies">
+                    {policyNotes.map((note) => (
+                        <li key={note}>{note}</li>
+                    ))}
+                </ul>
+            </article>
+        </section>
+    );
+}
+
+export default ModuleContentDeck;

package/components/modules/MovieBookingModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import movieBookingSystem from '../../data/systems/movieBooking';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function MovieBookingModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={movieBookingSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Dark cinema-focused module with fast seat and showtime selection."
+            emptyHint="Choose movie, date, and seat tier to generate a booking summary."
+        />
+    );
+}
+
+export default MovieBookingModule;

package/components/modules/QuizExamModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import quizExamSystem from '../../data/systems/quizExam';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function QuizExamModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={quizExamSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="Test-taking module for exam setup, candidate volume, and proctoring mode."
+            emptyHint="Enter assessment details to generate your exam operation summary."
+        />
+    );
+}
+
+export default QuizExamModule;

package/components/modules/StudentRegistrationModule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import studentRegistrationSystem from '../../data/systems/studentRegistration';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function StudentRegistrationModule({ record, onSubmit }) {
+    return (
+        <SystemModuleTemplate
+            system={studentRegistrationSystem}
+            record={record}
+            onSubmit={onSubmit}
+            intro="University portal module for enrollment, academic track, and semester billing."
+            emptyHint="Fill student and enrollment type details to generate registration output."
+        />
+    );
+}
+
+export default StudentRegistrationModule;

package/components/modules/SystemModuleRenderer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import systemModuleMap from './systemModuleMap';
+import SystemModuleTemplate from './SystemModuleTemplate';
+
+function SystemModuleRenderer({ system, record, onSubmit }) {
+    if (!system) {
+        return null;
+    }
+
+    const SpecificModule = systemModuleMap[system.id];
+
+    if (SpecificModule) {
+        return <SpecificModule record={record} onSubmit={onSubmit} />;
+    }
+
+    return <SystemModuleTemplate system={system} record={record} onSubmit={onSubmit} />;
+}
+
+export default SystemModuleRenderer;

package/components/modules/SystemModuleTemplate.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import SystemHero from '../system/SystemHero';
+import DynamicSystemForm from '../system/DynamicSystemForm';
+import SystemSummaryCard from '../system/SystemSummaryCard';
+import ModuleContentDeck from './ModuleContentDeck';
+import moduleContentMap from './moduleContentMap';
+import moduleEnhancementsMap from './moduleEnhancementsMap';
+import SystemVisualWidget from './SystemVisualWidget';
+
+function SystemModuleTemplate({
+    system,
+    record,
+    onSubmit,
+    intro,
+    emptyHint,
+    overview,
+    quickStats,
+    workflowSteps,
+    policyNotes
+}) {
+    const safeSubmit = typeof onSubmit === 'function' ? onSubmit : () => { };
+    const defaultContent = moduleContentMap[system.id] || {};
+    const enhancements = moduleEnhancementsMap[system.id] || {};
+
+    return (
+        <>
+            <SystemHero system={system} />
+
+            {intro ? (
+                <section className="module-intro">
+                    <p>{intro}</p>
+                </section>
+            ) : null}
+
+            <ModuleContentDeck
+                overview={overview || defaultContent.overview || system.description}
+                quickStats={quickStats || defaultContent.quickStats || []}
+                workflowSteps={workflowSteps || defaultContent.workflowSteps || []}
+                policyNotes={policyNotes || defaultContent.policyNotes || []}
+            />
+
+            <SystemVisualWidget widget={enhancements.widget} />
+
+            <DynamicSystemForm
+                system={system}
+                onSubmit={safeSubmit}
+                presets={enhancements.presets || []}
+            />
+
+            {record ? (
+                <SystemSummaryCard system={system} record={record} />
+            ) : (
+                <section className="empty-state">
+                    <h3>Ready to generate</h3>
+                    <p>{emptyHint || `Fill out the ${system.title} form to generate an output summary.`}</p>
+                </section>
+            )}
+        </>
+    );
+}
+
+export default SystemModuleTemplate;