firebase-os 1.1.4 → 1.1.6

package/src/templates/TemplatePopupForm.tsx

@@ -0,0 +1,174 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, CheckCircle2, AlertCircle, X, Plus } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+import { useState } from 'react';
+import { auth, db } from '../lib/firebase';
+import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
+
+export function TemplatePopupForm() {
+  const [popupOpen, setPopupOpen] = useState(false);
+
+  const [formData, setFormData] = useState({ concept: '', featureRequest: '', notes: '' });
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    
+    try {
+      const currentUserId = auth.currentUser?.uid || 'guest';
+      await addDoc(collection(db, 'user_submissions'), {
+        uid: currentUserId,
+        ...formData,
+        type: 'template_simulation',
+        submittedAt: serverTimestamp(),
+      });
+      
+      setStatus('success');
+      setTimeout(() => {
+        setStatus('idle');
+        setFormData({ concept: '', featureRequest: '', notes: '' });
+        setPopupOpen(false);
+      }, 3000);
+    } catch (err: any) {
+       setStatus('error');
+    }
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-4">
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          Popup Form
+        </h1>
+        <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+          <span className="w-8 h-[1px] bg-foreground/10" />
+          /popup_form
+        </div>
+      </motion.div>
+
+      <div className="flex justify-between items-center mb-6 border-b border-[var(--panel-border)] pb-6 relative z-20">
+        <Link to="/templates" className="px-5 py-2 border border-[var(--panel-border)] rounded-xl text-[13px] font-bold hover:bg-foreground/5 transition-all flex items-center gap-2 text-foreground/70">
+          <ArrowLeft className="w-4 h-4" /> Go Back
+        </Link>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden shadow-2xl relative flex flex-col w-full min-h-[150px] p-6 lg:p-10"
+      >
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent/5 blur-[120px] rounded-full pointer-events-none -z-10" />
+        
+        <div className="flex h-full w-full justify-end items-start relative z-10">
+          <Button onClick={() => setPopupOpen(true)} className="px-6 py-2.5 text-[14px] font-bold rounded-xl shadow-lg flex items-center justify-center gap-2 btn-primary transition-all hover:-translate-y-1">
+            <Plus className="w-4 h-4" /> Open Form
+          </Button>
+        </div>
+      </motion.div>
+
+      <AnimatePresence>
+        {popupOpen && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-background/60 backdrop-blur-xl cursor-pointer"
+              onClick={() => setPopupOpen(false)}
+            />
+
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 10 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 10 }}
+              className="w-full max-w-[500px] p-6 sm:p-8 lg:p-10 rounded-3xl md:rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)] z-10 mx-4 max-h-[95vh] overflow-y-auto no-scrollbar"
+            >
+              <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl md:rounded-3xl -z-10" />
+
+              <div className="relative z-10 w-full">
+                <button
+                  onClick={() => setPopupOpen(false)}
+                  className="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center rounded-full hover:bg-foreground/5 text-foreground/60 hover:text-foreground transition-colors z-20"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+
+                {status === 'success' ? (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="flex flex-col items-center justify-center py-12 text-center"
+                  >
+                    <div className="w-16 h-16 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center text-green-500 mb-4">
+                      <CheckCircle2 className="w-8 h-8" />
+                    </div>
+                    <h4 className="text-xl font-bold text-foreground mb-2">Simulation Complete!</h4>
+                    <p className="text-[14px] text-foreground/60 leading-relaxed max-w-[280px]">Your test data was sent successfully. Log in as an admin and check the Submissions tab!</p>
+                  </motion.div>
+                ) : status === 'loading' ? (
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className="flex flex-col items-center justify-center py-16 text-center"
+                  >
+                    <div className="w-10 h-10 border-4 border-accent border-r-transparent rounded-full animate-spin mb-4" />
+                    <h4 className="text-lg font-bold text-foreground tracking-tight">Processing</h4>
+                    <p className="text-[13px] text-foreground/50 mt-1">Simulating submission...</p>
+                  </motion.div>
+                ) : (
+                  <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                    <div className="mb-6 text-center">
+                      <h3 className="text-2xl sm:text-3xl font-extrabold mb-2 text-foreground tracking-tight break-words">Popup Template</h3>
+                      <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide leading-relaxed">Fill out the simulated fields below to test the interaction.</p>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-4 w-full">
+                      <Input
+                        label="Concept Name"
+                        placeholder="e.g. Project Apollo"
+                        value={formData.concept}
+                        onChange={e => setFormData({ ...formData, concept: e.target.value })}
+                      />
+                      <Input
+                        label="Feature Request"
+                        placeholder="e.g. Real-time sync"
+                        value={formData.featureRequest}
+                        onChange={e => setFormData({ ...formData, featureRequest: e.target.value })}
+                      />
+
+                      <div className="flex flex-col w-full relative">
+                        <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+                          Simulated Notes
+                        </label>
+                        <textarea
+                          rows={3}
+                          placeholder="Type something here..."
+                          value={formData.notes}
+                          onChange={e => setFormData({ ...formData, notes: e.target.value })}
+                          className="flex w-full rounded-xl text-[15px] text-foreground px-4 py-3 transition-all duration-300 placeholder:text-foreground/40 focus:outline-none focus:border-accent glow-focus disabled:cursor-not-allowed disabled:opacity-50 glass-panel min-h-[100px] resize-none"
+                        />
+                      </div>
+
+                      <div className="pt-2">
+                        <Button
+                          type="submit"
+                          className="w-full px-6 md:px-8 py-3 md:py-3.5 rounded-xl font-semibold tracking-wide btn-primary text-[15px] shadow-xl transition-all duration-300 hover:-translate-y-1 active:scale-95 flex items-center justify-center"
+                          isLoading={false}
+                        >
+                          Trigger Simulation
+                        </Button>
+                      </div>
+                    </form>
+                  </motion.div>
+                )}
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </main>
+  );
+}

package/src/templates/TemplateTable.test.tsx

@@ -0,0 +1,106 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { TemplateTable } from './TemplateTable';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockAuthContext = { 
+  user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+  userWorkspaces: [], 
+  activeWorkspace: null,
+  activeOrg: null,
+  loading: false
+};
+
+const mockThemeContext = { 
+  themeMode: 'light', 
+  setThemeMode: vi.fn(), 
+  activeConfig: {} 
+};
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => mockAuthContext
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => mockThemeContext
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('TemplateTable Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <TemplateTable />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});