npm - create-firem - Versions diffs - 1.0.1 - Mend

create-firem 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/.github/workflows/auto-update.yml +42 -0
package/.github/workflows/npm-publish.yml +42 -0
package/LICENSE +21 -0
package/agents.md +32 -0
package/bin/index.js +405 -0
package/package.json +32 -0
package/readme.md +90 -0
package/scripts/auto-update-packages.js +110 -0
package/specs/cli.md +83 -0
package/specs/fireabse.md +66 -0
package/specs/render.md +140 -0
package/specs/template.md +170 -0
package/templates/basic/package.json +32 -0
package/templates/basic/src/App.jsx +28 -0
package/templates/basic/src/main.jsx +15 -0
package/templates/common/gitignore +27 -0
package/templates/common/index.html +15 -0
package/templates/common/src/components/AppRouter.jsx +23 -0
package/templates/common/src/config/firebase.ts +30 -0
package/templates/common/src/config/routerConfig.js +6 -0
package/templates/common/src/theme/theme.js +14 -0
package/templates/common/vite.config.js +28 -0
package/templates/dashboard/package.json +32 -0
package/templates/dashboard/src/App.jsx +50 -0
package/templates/dashboard/src/components/Login.jsx +67 -0
package/templates/dashboard/src/context/AuthContext.jsx +43 -0
package/templates/dashboard/src/main.jsx +15 -0
package/templates/dashboard/src/pages/DashboardOverview.jsx +21 -0
package/templates/dashboard/src/pages/Profile.jsx +23 -0
package/templates/landing/package.json +32 -0
package/templates/landing/src/App.jsx +131 -0
package/templates/landing/src/context/AuthContext.jsx +43 -0
package/templates/landing/src/main.jsx +15 -0

package/templates/common/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+    <!-- Roboto Font for Material UI -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/common/src/components/AppRouter.jsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React, { Suspense } from 'react';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { ROUTER_MODE } from '../config/routerConfig';
+// Common fallback loader for Suspense during lazy chunk retrieval
+const PageLoader = () => (
+  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', fontFamily: 'sans-serif' }}>
+    <h3>Loading...</h3>
+  </div>
+);
+export function AppRouter({ children }) {
+  // Select router type dynamically
+  const Router = ROUTER_MODE === 'hash' ? HashRouter : BrowserRouter;
+  return (
+    <Router>
+      <Suspense fallback={<PageLoader />}>
+        {children}
+      </Suspense>
+    </Router>
+  );
+}

package/templates/common/src/config/firebase.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { initializeApp, FirebaseApp } from 'firebase/app';
+import { getAuth, Auth } from 'firebase/auth';
+import { getFirestore, Firestore } from 'firebase/firestore';
+interface FirebaseConfig {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId?: string;
+}
+const firebaseConfig: FirebaseConfig = {
+  apiKey: "YOUR_API_KEY",
+  authDomain: "YOUR_AUTH_DOMAIN",
+  projectId: "YOUR_PROJECT_ID",
+  storageBucket: "YOUR_STORAGE_BUCKET",
+  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+  appId: "YOUR_APP_ID",
+  measurementId: "YOUR_MEASUREMENT_ID"
+};
+const app: FirebaseApp = initializeApp(firebaseConfig);
+export const auth: Auth = getAuth(app);
+export const db: Firestore = getFirestore(app);
+export default app;

package/templates/common/src/config/routerConfig.js ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Configure the rendering route structure for the application.
+ * - 'browser': Standard HTML5 history routing. Requires hosting server redirects (rewrite to index.html).
+ * - 'hash': Hash-based routing (#/path). Works on any hosting setup out-of-the-box (zero-config).
+ */
+export const ROUTER_MODE = 'browser'; // 'browser' | 'hash'

package/templates/common/src/theme/theme.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { createTheme } from '@mui/material/styles';
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976d2',
+    },
+    secondary: {
+      main: '#9c27b0',
+    },
+  },
+});
+export default theme;

package/templates/common/vite.config.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('firebase')) {
+              return 'vendor-firebase';
+            }
+            if (id.includes('@mui') || id.includes('@emotion')) {
+              return 'vendor-mui';
+            }
+            if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
+              return 'vendor-core';
+            }
+            return 'vendor-helpers';
+          }
+        }
+      }
+    },
+    chunkSizeWarningLimit: 800,
+  }
+})

package/templates/dashboard/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "firebase": "^12.13.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "vite": "^8.0.13"
+  }
+}

package/templates/dashboard/src/App.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+import React, { Suspense } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import Login from './components/Login';
+import Navigation from './components/Navigation';
+import { Box, Container } from '@mui/material';
+import { AppRouter } from './components/AppRouter';
+// Modular loading: lazy import the sub-views of the dashboard to keep the initial build lightweight
+const DashboardOverview = React.lazy(() => import('./pages/DashboardOverview'));
+const Profile = React.lazy(() => import('./pages/Profile'));
+function DashboardLayout() {
+  const { logout } = useAuth();
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh', flexDirection: 'column' }}>
+      <Navigation onLogout={logout} isAuthenticated={true} />
+      <Box component="main" sx={{ flexGrow: 1, p: 3, pb: 10 }}>
+        <Container maxWidth="lg" sx={{ mt: 4 }}>
+          <Routes>
+            <Route path="/" element={<DashboardOverview />} />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Container>
+      </Box>
+    </Box>
+  );
+}
+function MainApp() {
+  const { currentUser } = useAuth();
+  if (!currentUser) {
+    return <Login />;
+  }
+  return <DashboardLayout />;
+}
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppRouter>
+        <MainApp />
+      </AppRouter>
+    </AuthProvider>
+  );
+}

package/templates/dashboard/src/components/Login.jsx ADDED Viewed

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { Box, Button, TextField, Typography, Paper, Container, Alert } from '@mui/material';
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  async function handleSubmit(e) {
+    e.preventDefault();
+    try {
+      setError('');
+      setLoading(true);
+      await login(email, password);
+    } catch (err) {
+      setError('Failed to log in. Please check your credentials. (Ensure Firebase config is set up correctly in .env)');
+    }
+    setLoading(false);
+  }
+  return (
+    <Container maxWidth="xs">
+      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Paper elevation={3} sx={{ p: 4, width: '100%' }}>
+          <Typography variant="h5" align="center" gutterBottom>
+            Sign In
+          </Typography>
+          {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Email Address"
+              autoComplete="email"
+              autoFocus
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              disabled={loading}
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </Button>
+          </Box>
+        </Paper>
+      </Box>
+    </Container>
+  );
+}

package/templates/dashboard/src/context/AuthContext.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { auth } from '../config/firebase';
+import { onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
+const AuthContext = createContext();
+export function AuthProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  function login(email, password) {
+    return signInWithEmailAndPassword(auth, email, password);
+  }
+  function logout() {
+    return signOut(auth);
+  }
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setCurrentUser(user);
+      setLoading(false);
+    });
+    return unsubscribe;
+  }, []);
+  const value = {
+    currentUser,
+    login,
+    logout
+  };
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+}
+export function useAuth() {
+  return useContext(AuthContext);
+}

package/templates/dashboard/src/main.jsx ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import theme from './theme/theme'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+)

package/templates/dashboard/src/pages/DashboardOverview.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Typography, Paper, Button } from '@mui/material';
+import { useAuth } from '../context/AuthContext';
+export default function DashboardOverview() {
+  const { currentUser, logout } = useAuth();
+  return (
+    <Paper sx={{ p: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        Dashboard Overview
+      </Typography>
+      <Typography variant="body1" sx={{ mb: 2 }}>
+        Welcome back, <strong>{currentUser?.email}</strong>! You are successfully authenticated.
+      </Typography>
+      <Button variant="contained" color="secondary" onClick={logout}>
+        Sign Out
+      </Button>
+    </Paper>
+  );
+}

package/templates/dashboard/src/pages/Profile.jsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Typography, Paper, Box } from '@mui/material';
+import { useAuth } from '../context/AuthContext';
+export default function Profile() {
+  const { currentUser } = useAuth();
+  return (
+    <Paper sx={{ p: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        User Profile
+      </Typography>
+      <Box sx={{ mt: 2 }}>
+        <Typography variant="body1">
+          <strong>Email:</strong> {currentUser?.email}
+        </Typography>
+        <Typography variant="body1" sx={{ mt: 1 }}>
+          <strong>UID:</strong> {currentUser?.uid}
+        </Typography>
+      </Box>
+    </Paper>
+  );
+}

package/templates/landing/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "firebase": "^12.13.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "vite": "^8.0.13"
+  }
+}

package/templates/landing/src/App.jsx ADDED Viewed

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Container, Typography, Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, TextField, Alert } from '@mui/material';
+import Navigation from './components/Navigation';
+import { AppRouter } from './components/AppRouter';
+/* AUTH_START */
+import { AuthProvider, useAuth } from './context/AuthContext';
+/* AUTH_END */
+function LandingContent() {
+  /* AUTH_START */
+  const { currentUser, logout, login } = useAuth();
+  const [openLogin, setOpenLogin] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const handleLoginSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      setError('');
+      setLoading(true);
+      await login(email, password);
+      setOpenLogin(false);
+      setEmail('');
+      setPassword('');
+    } catch (err) {
+      setError('Login failed. Please check credentials or Firebase setup.');
+    }
+    setLoading(false);
+  };
+  /* AUTH_END */
+  return (
+    <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <Navigation
+        /* AUTH_START */
+        onLogout={logout}
+        isAuthenticated={!!currentUser}
+        /* AUTH_END */
+        /* AUTH_NO_START */
+        // isAuthenticated={false}
+        /* AUTH_NO_END */
+      />
+      <Container maxWidth="md" sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', py: 4, textAlign: 'center', pb: 10 }}>
+        <Box sx={{ my: 4 }}>
+          <Typography variant="h2" component="h1" gutterBottom fontWeight="bold" color="primary">
+            Welcome to Firem Landing
+          </Typography>
+          <Typography variant="h5" color="text.secondary" paragraph>
+            A high-performance landing template using React, Material UI, and Firebase.
+          </Typography>
+          <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 2 }}>
+            <Button variant="contained" size="large">
+              Get Started
+            </Button>
+            {/* AUTH_START */}
+            {!currentUser ? (
+              <Button variant="outlined" size="large" onClick={() => setOpenLogin(true)}>
+                Sign In
+              </Button>
+            ) : (
+              <Button variant="outlined" color="secondary" size="large" onClick={logout}>
+                Sign Out ({currentUser.email})
+              </Button>
+            )}
+            {/* AUTH_END */}
+          </Box>
+        </Box>
+      </Container>
+      {/* AUTH_START */}
+      <Dialog open={openLogin} onClose={() => setOpenLogin(false)} maxWidth="xs" fullWidth>
+        <DialogTitle>Sign In</DialogTitle>
+        <form onSubmit={handleLoginSubmit}>
+          <DialogContent>
+            {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+            <TextField
+              margin="dense"
+              required
+              fullWidth
+              label="Email Address"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoFocus
+            />
+            <TextField
+              margin="dense"
+              required
+              fullWidth
+              label="Password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </DialogContent>
+          <DialogActions sx={{ px: 3, pb: 3 }}>
+            <Button onClick={() => setOpenLogin(false)}>Cancel</Button>
+            <Button type="submit" variant="contained" disabled={loading}>Sign In</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+      {/* AUTH_END */}
+    </Box>
+  );
+}
+/* AUTH_START */
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppRouter>
+        <LandingContent />
+      </AppRouter>
+    </AuthProvider>
+  );
+}
+/* AUTH_END */
+/* AUTH_NO_START */
+// export default function App() {
+//   return (
+//     <AppRouter>
+//       <LandingContent />
+//     </AppRouter>
+//   );
+// }
+/* AUTH_NO_END */

package/templates/landing/src/context/AuthContext.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { auth } from '../config/firebase';
+import { onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
+const AuthContext = createContext();
+export function AuthProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  function login(email, password) {
+    return signInWithEmailAndPassword(auth, email, password);
+  }
+  function logout() {
+    return signOut(auth);
+  }
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setCurrentUser(user);
+      setLoading(false);
+    });
+    return unsubscribe;
+  }, []);
+  const value = {
+    currentUser,
+    login,
+    logout
+  };
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+}
+export function useAuth() {
+  return useContext(AuthContext);
+}

package/templates/landing/src/main.jsx ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import theme from './theme/theme'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+)