firebase-os 1.0.0

package/README.md

@@ -0,0 +1,236 @@
+# 🔥 Firebase OS
+
+**A complete, production-ready Firebase admin OS — packaged as a single React component.**
+
+Authentication, user management, role-based access control, file storage, dynamic pages, form builder, theme customisation, and more — all behind one import.
+
+```tsx
+import { FirebaseOS } from 'firebase-os';
+import 'firebase-os/styles.css';
+
+export default function App() {
+  return <FirebaseOS />;
+}
+```
+
+That's it. **One component. Zero configuration files.**
+
+---
+
+## ✨ What you get
+
+| Feature | Details |
+|:--------|:--------|
+| 🔐 **Authentication** | Email/password, email verification, password reset |
+| 👥 **User Management** | Admin panel, role assignment, inactive user blocking |
+| 🗂️ **Dynamic Pages** | Create pages from the admin panel — no code needed |
+| 📋 **Templates** | Board (Kanban), Calendar, Table, Inline Form, Popup Form, Confirmation |
+| 🎨 **Theme Engine** | Full dark/light mode, custom accent colours, fonts, corner radii, logo |
+| 📁 **File Storage** | Firebase Storage drive with folder structure |
+| 📬 **Form Builder** | Contact forms, support forms — fully customisable |
+| ⚙️ **Settings** | All admin settings via UI — no `.env` editing needed after setup |
+| 📊 **Dashboard** | Personalised user dashboard |
+| 🧑‍💼 **Submissions & Requests** | Track form submissions and user requests |
+
+---
+
+## 📦 Installation
+
+### Peer dependencies (install these in your project)
+
+```bash
+npm install firebase react react-dom react-router-dom
+```
+
+### Install the library
+
+**From npm:**
+```bash
+npm install firebase-os
+```
+
+**From a local build (development):**
+```bash
+npm pack  # in the firebase-os repo
+npm install /path/to/firebase-os-1.0.0.tgz  # in your app
+```
+
+---
+
+## 🚀 Quick Start
+
+### Option A — Zero config (recommended)
+
+On first load, Firebase OS shows a **Setup Wizard** that guides you through pasting your Firebase project credentials. Nothing is stored on any server — keys are saved in your browser's `localStorage`.
+
+```tsx
+// App.tsx
+import { FirebaseOS } from 'firebase-os';
+import 'firebase-os/styles.css';
+
+export default function App() {
+  return <FirebaseOS />;
+}
+```
+
+1. Run your app
+2. The Setup Wizard opens automatically
+3. Paste your Firebase config (from the Firebase Console)
+4. Done — the full OS loads
+
+### Option B — Pre-configured (CI/CD, teams)
+
+Skip the wizard entirely by passing your Firebase config as props:
+
+```tsx
+import { FirebaseOS } from 'firebase-os';
+import 'firebase-os/styles.css';
+
+export default function App() {
+  return (
+    <FirebaseOS
+      firebaseConfig={{
+        apiKey: import.meta.env.VITE_API_KEY,
+        authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+        projectId: import.meta.env.VITE_PROJECT_ID,
+        storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+        messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+        appId: import.meta.env.VITE_APP_ID,
+      }}
+      adminEmails={['you@yourcompany.com']}
+    />
+  );
+}
+```
+
+---
+
+## 🎛️ Props API
+
+```typescript
+interface FirebaseOSProps {
+  /**
+   * Pass Firebase config directly to skip the Setup Wizard.
+   * If omitted, the wizard runs on first load and saves config to localStorage.
+   */
+  firebaseConfig?: {
+    apiKey: string;
+    authDomain: string;
+    projectId: string;
+    storageBucket: string;
+    messagingSenderId: string;
+    appId: string;
+  };
+
+  /**
+   * Email addresses that are automatically assigned the 'admin' role
+   * on their first login. Replaces the VITE_ADMIN_EMAILS env var.
+   */
+  adminEmails?: string[];
+
+  /**
+   * Custom router basename (e.g. "/app" if your app lives at a subdirectory).
+   */
+  basename?: string;
+
+  /**
+   * Callback fired whenever the Firebase auth state changes.
+   * Useful for integrating with your own auth layer.
+   */
+  onAuthChange?: (user: any) => void;
+}
+```
+
+---
+
+## 🪝 Advanced: Hooks
+
+For advanced integrations, two hooks are exported from the library:
+
+```tsx
+import { useAuth, useTheme } from 'firebase-os';
+
+// Access auth state anywhere inside <FirebaseOS />
+function MyWidget() {
+  const { user, userRole, signOut } = useAuth();
+  const { theme, toggleTheme, activeConfig } = useTheme();
+  // ...
+}
+```
+
+> **Note:** These hooks only work when rendered inside the `<FirebaseOS />` component tree.
+
+---
+
+## 🔥 Getting your Firebase config
+
+1. Go to [Firebase Console](https://console.firebase.google.com/)
+2. Create or select a project
+3. Go to **Project Settings** → **Your apps** → **Web app**
+4. Copy the `firebaseConfig` object
+5. Enable **Authentication** (Email/Password), **Firestore**, and **Storage** in your project
+
+---
+
+## 🎨 Theming
+
+The theme is managed entirely through the admin UI at `/theme`. No code changes needed.
+
+All CSS is scoped to `.firebase-os` — the library's styles **do not leak** into your own application's CSS.
+
+---
+
+## 📐 CSS Isolation
+
+Firebase OS uses a `.firebase-os` container div for all its CSS variable scope. This means:
+
+- ✅ Library's theme variables stay inside `.firebase-os`
+- ✅ Your own `:root` variables are untouched
+- ✅ `data-theme` attribute is set on the container, not `<html>`
+- ✅ No Tailwind class pollution on your global styles
+
+---
+
+## 🔒 How data is stored
+
+- **Firebase credentials** — `localStorage` (your browser only, never any server)
+- **User data** — your own Firebase Firestore
+- **Files** — your own Firebase Storage
+- **Theme / page config** — your own Firestore (`sys_configs` collection)
+
+You own all your data. Firebase OS is just the UI layer.
+
+---
+
+## 📁 Project structure (for contributors)
+
+```
+src/
+├── index.ts          ← Public API (only exports FirebaseOS + hooks)
+├── FirebaseOS.tsx    ← The library component wrapper
+├── App.tsx           ← Router + route guards (internal)
+├── lib/
+│   ├── firebase.ts   ← Dynamic Firebase init (env OR props)
+│   ├── AuthContext   ← Auth lifecycle (internal)
+│   ├── ThemeContext  ← CSS variable injection (internal)
+│   └── ConfigContext ← Library props → internal bridge
+├── pages/            ← 17 page components (internal)
+├── templates/        ← 8 template components (internal)
+├── components/       ← Shared UI (internal)
+└── configs/          ← Default configurations (internal)
+```
+
+### Scripts
+
+```bash
+npm run dev          # Run standalone app (for development)
+npm run test         # Run test suite (47 tests)
+npm run build:lib    # Build the distributable library
+npm pack             # Create .tgz for local testing
+```
+
+---
+
+## 📄 License
+
+MIT

package/dist/FirebaseOS.d.ts

@@ -0,0 +1,18 @@
+export interface FirebaseOSProps {
+    /** Skip the setup wizard — pass Firebase config directly */
+    firebaseConfig?: {
+        apiKey: string;
+        authDomain: string;
+        projectId: string;
+        storageBucket: string;
+        messagingSenderId: string;
+        appId: string;
+    };
+    /** Admin email addresses (replaces VITE_ADMIN_EMAILS env var) */
+    adminEmails?: string[];
+    /** Custom basename for the router (e.g., "/app") */
+    basename?: string;
+    /** Called when auth state changes */
+    onAuthChange?: (user: any) => void;
+}
+export declare function FirebaseOS(props: FirebaseOSProps): import("react/jsx-runtime").JSX.Element;

package/dist/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

package/dist/contactForm.config-BHvMbfxM.js

@@ -0,0 +1,42 @@
+//#region src/configs/forms/contactForm.config.ts
+var e = {
+	systemName: "contact",
+	formType: "public",
+	submitPage: "submissions",
+	redirectTo: "/",
+	title: "Get in Touch",
+	buttonName: "Contact Us",
+	submitText: "Send Message",
+	fields: [
+		{
+			name: "name",
+			type: "text",
+			label: "Full Name",
+			placeholder: "John Doe",
+			required: !0
+		},
+		{
+			name: "email",
+			type: "email",
+			label: "Email Address",
+			placeholder: "john@example.com",
+			required: !0
+		},
+		{
+			name: "phone",
+			type: "tel",
+			label: "Phone Number",
+			placeholder: "+1 (555) 000-0000",
+			required: !1
+		},
+		{
+			name: "questions",
+			type: "textarea",
+			label: "Your Questions",
+			placeholder: "How can we help you?",
+			required: !0
+		}
+	]
+};
+//#endregion
+export { e as t };

package/dist/contactForm.config-DLeI_ZEj.js

@@ -0,0 +1,2 @@
+import { t as e } from "./contactForm.config-BHvMbfxM.js";
+export { e as contactFormConfig };

package/dist/contactForm.config-Dfh0WPXL.cjs

@@ -0,0 +1 @@
+const e=require(`./contactForm.config-Y2AYSH9s.cjs`);require(`./firebase-os.cjs.js`),exports.contactFormConfig=e.t;

package/dist/contactForm.config-Y2AYSH9s.cjs

@@ -0,0 +1 @@
+var e={systemName:`contact`,formType:`public`,submitPage:`submissions`,redirectTo:`/`,title:`Get in Touch`,buttonName:`Contact Us`,submitText:`Send Message`,fields:[{name:`name`,type:`text`,label:`Full Name`,placeholder:`John Doe`,required:!0},{name:`email`,type:`email`,label:`Email Address`,placeholder:`john@example.com`,required:!0},{name:`phone`,type:`tel`,label:`Phone Number`,placeholder:`+1 (555) 000-0000`,required:!1},{name:`questions`,type:`textarea`,label:`Your Questions`,placeholder:`How can we help you?`,required:!0}]};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});

package/dist/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+  <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+</svg>