create-firem 1.0.1

package/scripts/auto-update-packages.js

@@ -0,0 +1,110 @@
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+
+const packagesToUpdate = [
+  'firebase',
+  'react',
+  'react-dom',
+  'react-router-dom',
+  '@mui/material',
+  '@mui/icons-material',
+  '@emotion/react',
+  '@emotion/styled',
+  'vite',
+  '@vitejs/plugin-react',
+  '@types/react',
+  '@types/react-dom'
+];
+
+function getLatestVersion(pkg) {
+  try {
+    return execSync(`npm view ${pkg} version`).toString().trim();
+  } catch (error) {
+    console.error(`Failed to get version for ${pkg}:`, error.message);
+    return null;
+  }
+}
+
+const rootDir = process.cwd();
+const templatePaths = [
+  path.join(rootDir, 'templates/basic/package.json'),
+  path.join(rootDir, 'templates/landing/package.json'),
+  path.join(rootDir, 'templates/dashboard/package.json')
+];
+
+const latestVersions = {};
+for (const pkg of packagesToUpdate) {
+  const version = getLatestVersion(pkg);
+  if (version) {
+    latestVersions[pkg] = `^${version}`;
+  }
+}
+
+console.log('Latest resolved versions:', latestVersions);
+
+let hasChanges = false;
+
+// Update templates
+for (const pjsonPath of templatePaths) {
+  if (fs.existsSync(pjsonPath)) {
+    const data = JSON.parse(fs.readFileSync(pjsonPath, 'utf8'));
+    let fileChanged = false;
+
+    if (data.dependencies) {
+      for (const [dep, ver] of Object.entries(data.dependencies)) {
+        if (latestVersions[dep] && latestVersions[dep] !== ver) {
+          data.dependencies[dep] = latestVersions[dep];
+          fileChanged = true;
+        }
+      }
+    }
+
+    if (data.devDependencies) {
+      for (const [dep, ver] of Object.entries(data.devDependencies)) {
+        if (latestVersions[dep] && latestVersions[dep] !== ver) {
+          data.devDependencies[dep] = latestVersions[dep];
+          fileChanged = true;
+        }
+      }
+    }
+
+    if (fileChanged) {
+      fs.writeFileSync(pjsonPath, JSON.stringify(data, null, 2) + '\n');
+      console.log(`Updated ${path.relative(rootDir, pjsonPath)}`);
+      hasChanges = true;
+    }
+  }
+}
+
+// Update root package.json devDependencies (firebase)
+const rootPjsonPath = path.join(rootDir, 'package.json');
+if (fs.existsSync(rootPjsonPath)) {
+  const rootData = JSON.parse(fs.readFileSync(rootPjsonPath, 'utf8'));
+  let rootChanged = false;
+
+  if (rootData.devDependencies && rootData.devDependencies.firebase && latestVersions['firebase']) {
+    if (rootData.devDependencies.firebase !== latestVersions['firebase']) {
+      rootData.devDependencies.firebase = latestVersions['firebase'];
+      rootChanged = true;
+    }
+  }
+
+  if (rootChanged) {
+    fs.writeFileSync(rootPjsonPath, JSON.stringify(rootData, null, 2) + '\n');
+    console.log('Updated root package.json devDependencies');
+    hasChanges = true;
+  }
+}
+
+if (hasChanges) {
+  // Bump create-firem patch version to ensure npm publish works
+  try {
+    execSync('npm version patch --no-git-tag-version');
+    console.log('Successfully bumped create-firem version');
+  } catch (error) {
+    console.error('Failed to bump version:', error.message);
+  }
+} else {
+  console.log('All packages are already up-to-date!');
+}

package/specs/cli.md

@@ -0,0 +1,83 @@
+# Specification: Command-Line Interface (`cli.md`)
+
+This document specifies the behavior, interactive prompt flow, and command-line options for the `create-firem` CLI generator.
+
+---
+
+## 1. CLI Commands & Arguments
+Users can run the generator with options directly from the CLI or follow the interactive prompts.
+
+### Command Syntax
+```bash
+npx create-firem [project-name] [options]
+```
+
+### Options (CLI Flags)
+- `--template <type>`: Skip prompt and select template: `dashboard`, `landing`, or `basic`.
+- `--layout <type>`: Skip prompt and select navigation layout: `top`, `bottom`, `sidebar`, or `none`.
+- `--auth <boolean>`: Skip prompt and enable/disable Firebase authentication (relevant for `landing`).
+- `--install`: Automatically install dependencies after scaffolding.
+- `--help` / `-h`: Display help documentation.
+
+---
+
+## 2. Interactive Prompt Flow
+
+If the CLI is run without arguments, it will guide the user through the following questions using `prompts` or `inquirer`.
+
+### Step 1: Project Name
+- **Prompt**: `What is the name of your project?`
+- **Type**: Input text
+- **Default**: `my-firem-app`
+- **Validation**: Must be a valid npm package name (lowercase, no spaces, URL-safe characters).
+
+### Step 2: Template Type
+- **Prompt**: `Select a template type:`
+- **Type**: Select list
+- **Options**:
+  - 📊 **Dashboard**: Includes Firebase Auth with persistent session login, dashboard panels, and protected routes.
+  - 🚀 **Landing Page**: Public frontend landing page, loads directly, with an optional configuration to add authentication.
+  - 📦 **Basic**: A minimal skeleton project with React, Firebase SDK configured, and MUI installed.
+
+### Step 3: Firebase Authentication (Conditional)
+- **Condition**: Only prompt if **Landing Page** was selected in Step 2.
+- **Prompt**: `Do you want to include Firebase Authentication in your Landing Page?`
+- **Type**: Confirm (Yes/No)
+- **Default**: `No`
+
+### Step 4: Layout Navigation Menu Position
+- **Prompt**: `Where should the main navigation menu be positioned?`
+- **Type**: Select list
+- **Options**:
+  - ⬆️ **Top (Superior)**: A classic horizontal navbar at the header.
+  - ⬇️ **Bottom (Inferior)**: Ideal for mobile-first layouts, showing a bottom navigation bar.
+  - ⬅️ **Sidebar (Lateral)**: A modern collapsible sidebar navigation drawer on the left side.
+  - ❌ **None (Sin menú)**: No navigation menu will be rendered (useful for clean/minimal setups).
+
+---
+
+## 3. Scaffolding & Customization Logic
+
+Based on the selections made during the prompts, the CLI performs the following changes:
+
+### A. Template Choice Implementation
+- **Dashboard**: Copies dashboard-specific components (e.g. `Login.jsx`, `DashboardLayout.jsx`, persistent auth context in `AuthContext.jsx`).
+- **Landing**: Copies public-facing homepage component (`LandingPage.jsx`). If auth was selected, includes a modal/page for login and hooks to Firebase Auth.
+- **Basic**: Copies a minimal main page and sets up Vite + MUI + Firebase config without views.
+
+### B. Layout Menu Customization
+The CLI will copy or modify the navigation layout component (`src/components/Navigation.jsx`) according to the user's choice:
+- **`top`**: Generates a component using MUI's `AppBar` and `Toolbar`.
+- **`bottom`**: Generates a component using MUI's `BottomNavigation` and `BottomNavigationAction`.
+- **`sidebar`**: Generates a component using MUI's `Drawer` and `List` with `ListItem`.
+- **`none`**: Generates a stub component that returns `null` (rendering no navigation menu).
+
+---
+
+## 4. Dependencies of the CLI Tool
+
+To ensure a lightweight and beautiful CLI execution, the CLI itself will use:
+- **`prompts`**: For fast, user-friendly interactive prompts.
+- **`kolorist`**: For terminal text coloring.
+- **`ora`**: For loading spinners during dependency installation.
+- **`commander`**: For option/flag parsing.

package/specs/fireabse.md

@@ -0,0 +1,66 @@
+# Specification: Firebase Configuration (`firebase.ts`)
+
+This specification defines how Firebase must be integrated and initialized within the generated templates. To ensure simplicity and eliminate configuration layers, all templates must utilize a unified `firebase.ts` file with direct (hardcoded) configurations.
+
+---
+
+## 1. File Location
+The Firebase configuration file must always be placed at:
+```text
+src/config/firebase.ts
+```
+
+---
+
+## 2. Dependencies
+The generated projects must have the `firebase` package installed:
+- `firebase`: `^10.0.0` or higher.
+
+---
+
+## 3. Configuration & Exports
+The `firebase.ts` file initializes the Firebase application using a direct configuration constant and exports the required services (Authentication and Firestore database). No environment variables (`.env`) are used.
+
+### File Template (`src/config/firebase.ts`)
+```typescript
+import { initializeApp, FirebaseApp } from 'firebase/app';
+import { getAuth, Auth } from 'firebase/auth';
+import { getFirestore, Firestore } from 'firebase/firestore';
+
+// Define the structure of the configuration object
+interface FirebaseConfig {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId?: string;
+}
+
+// Hardcoded Firebase configuration object
+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"
+};
+
+// Initialize Firebase
+const app: FirebaseApp = initializeApp(firebaseConfig);
+
+// Initialize and export services
+export const auth: Auth = getAuth(app);
+export const db: Firestore = getFirestore(app);
+
+export default app;
+```
+
+---
+
+## 4. Security & Verification
+- **Configuration Values**: The initial scaffold contains placeholder strings (e.g., `"YOUR_API_KEY"`). The developer must replace these placeholders directly in `firebase.ts` with their project's credentials.
+- **Strict Typing**: All services (`auth`, `db`) and configuration values must be explicitly or implicitly typed using Firebase's TypeScript definitions.

package/specs/render.md

@@ -0,0 +1,140 @@
+# Specification: Rendering & Frontend Routing Architecture (`render.md`)
+
+This document defines the rendering model, bundle optimization configurations, and routing patterns for projects generated by `create-firem`. The architecture is designed to remain highly performant, modular, and lightweight as applications (such as administrative dashboards) grow in size and complexity.
+
+---
+
+## 1. Single Page Application (SPA) Model
+
+All templates scaffolded by `create-firem` must strictly adhere to a **Single Page Application (SPA)** model based on **Client-Side Rendering (CSR)**.
+
+- **No Server-Side Rendering (SSR)**: The build pipeline must not generate server-side hydration scripts (e.g., Next.js, Remix style).
+- **Static Assets Delivery**: The entire application compiles into static HTML, JavaScript, CSS, and asset files.
+- **Zero-Config Hosting Compatibility**: Being a pure SPA ensures the output directory (`dist`) can be hosted directly on any static web server, CDN, or static hosting provider (e.g., Firebase Hosting, GitHub Pages, Netlify, Vercel, AWS S3, or standard Nginx).
+- **Client-Side Routing**: The browser is responsible for managing the routing lifecycle and rendering components dynamically without full-page reloads.
+
+---
+
+## 2. Vite Modular Loading & Optimization
+
+To prevent initial load time degradation as dashboards and views scale, Vite must be configured to split the build bundle into optimized modular chunks. This prevents the browser from downloading a single, bloated JavaScript bundle.
+
+### A. Dynamic Imports & Code Splitting (React.lazy)
+Instead of importing all pages statically at startup, pages and sub-modules must be loaded dynamically using React’s native `React.lazy` and wrapped in a `<Suspense>` boundary.
+
+- **Static Import (Avoid for Pages)**:
+  ```javascript
+  import DashboardOverview from './pages/DashboardOverview'; // Loaded on initial start
+  ```
+- **Dynamic Import (Mandatory for Routes)**:
+  ```javascript
+  const DashboardOverview = React.lazy(() => import('./pages/DashboardOverview'));
+  ```
+
+### B. Vite Manual Chunking Configuration (`vite.config.js`)
+To maintain optimal caching and keep chunks lightweight, Vite's build settings must split heavy dependencies (such as Material UI and Firebase SDKs) into dedicated chunks rather than packing them together.
+
+The scaffolded `vite.config.js` must implement the following `rollupOptions` configuration:
+
+```javascript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    // Split chunks aggressively for better browser caching and minimal initial payload
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          // Check if dependency is within node_modules
+          if (id.includes('node_modules')) {
+            // Firebase SDK - separate chunk
+            if (id.includes('firebase')) {
+              return 'vendor-firebase';
+            }
+            // Material UI - separate chunk as it is very heavy
+            if (id.includes('@mui') || id.includes('@emotion')) {
+              return 'vendor-mui';
+            }
+            // Core React runtime
+            if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
+              return 'vendor-core';
+            }
+            // General fallback chunk for other dependencies
+            return 'vendor-helpers';
+          }
+        }
+      }
+    },
+    // Prevent console spam warnings for larger individual files if they exceed default limit slightly
+    chunkSizeWarningLimit: 800,
+  }
+});
+```
+
+---
+
+## 3. Flexible React Router Configuration (Rewrite vs. Hash Route)
+
+Standard SPAs require the host server to redirect all traffic back to `/index.html` (Rewrites) for paths to resolve correctly on direct loads or page refreshes. When server rewrites are not possible (e.g., hosting from subdirectory paths without rewrite control, local filesystem viewing, or simple static file hosting), **Hash Routing** is required.
+
+To solve this, the template generator must provide a standardized structure that allows developers to toggle between history-based routing (`BrowserRouter`) and hash-based routing (`HashRouter`) by changing a single configuration value.
+
+### A. Router Mode Settings File (`src/config/routerConfig.ts`)
+A dedicated router configuration file determines the routing behavior:
+
+```typescript
+// src/config/routerConfig.ts
+
+export type RouterMode = 'browser' | 'hash';
+
+/**
+ * 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: RouterMode = 'browser';
+```
+
+### B. Standardized Router Implementation (`src/components/AppRouter.tsx`)
+A wrapper router component selects the appropriate React Router class depending on the `ROUTER_MODE` setting:
+
+```tsx
+// src/components/AppRouter.tsx
+import React, { Suspense } from 'react';
+import { BrowserRouter, HashRouter, Routes, Route, Navigate } 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' }}>
+    Loading component...
+  </div>
+);
+
+interface AppRouterProps {
+  children: React.ReactNode;
+}
+
+export const AppRouter: React.FC<AppRouterProps> = ({ children }) => {
+  // Select router type dynamically
+  const Router = ROUTER_MODE === 'hash' ? HashRouter : BrowserRouter;
+
+  return (
+    <Router>
+      <Suspense fallback={<PageLoader />}>
+        {children}
+      </Suspense>
+    </Router>
+  );
+};
+```
+
+---
+
+## 4. Scaffold Templates Implementation Rules
+
+1. **Routing Setup**: Generated templates must define routes clearly using path mappings inside `App.jsx` or a dedicated routes definition component, wrapped inside the dynamic `AppRouter` configuration.
+2. **Lazy Loading Practices**: Any page/view template directory must split major logical views (e.g., `Dashboard`, `Profile`, `Settings`, `Login`) into separate files that are imported lazily.
+3. **No Legacy Imports**: Avoid placing massive component sub-sections directly in the main layout file. Standardize on building components as separate modules to let Rollup optimize page chunks individually.

package/specs/template.md

@@ -0,0 +1,170 @@
+# Specification: Template Configuration (`template.md`)
+
+This document defines the structure, core libraries, and configuration rules for the base project template distributed by `create-firem`. The generated template is pre-configured to build web applications using React, Firebase, and Material UI (MUI).
+
+---
+
+## 1. Core Stack
+The template must include and pre-configure the following technologies:
+- **Frontend Framework**: ReactJS (bootstrapped with [Vite](https://vite.dev/) for optimal performance).
+- **Styling & UI Components**: Material UI (MUI) v5+ (`@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled`).
+- **Backend & Services**: Firebase SDK v10+ (Authentication, Firestore, Storage, and Analytics).
+
+---
+
+## 2. Directory Structure of the Template
+The template is housed inside the `template/` directory of the generator. When copied to the target user directory, it should look like this:
+
+```text
+template/
+├── src/
+│   ├── assets/           # Images, SVG icons, and static assets
+│   ├── components/       # Common reusable MUI components
+│   ├── config/
+│   │   └── firebase.ts   # Firebase initialization & exports (auth, db, etc.)
+│   ├── theme/
+│   │   └── theme.js      # Custom MUI theme (colors, typography)
+│   ├── App.jsx           # Main layout containing theme provider and routing
+│   └── main.jsx          # App entry point (mounting React to the DOM)
+├── gitignore             # Placeholder (renamed to .gitignore by CLI)
+├── index.html            # Main HTML document template
+├── package.json          # Package definition with placeholders
+└── vite.config.js        # Vite configuration with React support
+```
+
+---
+
+## 3. Libraries and Dependencies (`package.json`)
+
+The template's `package.json` should contain at least the following dependencies:
+
+```json
+{
+  "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.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.0",
+    "firebase": "^10.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "vite": "^5.0.0"
+  }
+}
+```
+
+---
+
+## 4. Integration Details
+
+### A. Firebase Setup (`src/config/firebase.ts`)
+Initialize Firebase using a direct configuration constant, with TypeScript typings:
+
+```typescript
+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;
+```
+
+### B. Material UI Theme & Provider (`src/theme/theme.js` & `src/App.jsx`)
+Configure a basic customizable MUI theme:
+
+**`src/theme/theme.js`**:
+```javascript
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976d2', // Customize primary color
+    },
+    secondary: {
+      main: '#9c27b0', // Customize secondary color
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  },
+});
+
+export default theme;
+```
+
+**`src/App.jsx`**:
+```jsx
+import React from 'react';
+import { ThemeProvider, CssBaseline, Container, Typography, Box } from '@mui/material';
+import theme from './theme/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Container maxWidth="sm">
+        <Box sx={{ my: 4, textAlign: 'center' }}>
+          <Typography variant="h4" component="h1" gutterBottom>
+            Welcome to Firem Template!
+          </Typography>
+          <Typography variant="body1">
+            ReactJS + Firebase + Material UI are ready to go.
+          </Typography>
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 5. Scaffold Replacement Rules
+During the creation process, the CLI generator must apply these transformations:
+1. **Placeholder Replacement**: Replace all occurrences of `{{PROJECT_NAME}}` in `package.json` and `index.html` with the name chosen by the user.
+2. **Rename Dotfiles**: Rename `gitignore` in the template folder to `.gitignore` when writing to the target project directory.

package/templates/basic/package.json

@@ -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/basic/src/App.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Container, Typography, Box } from '@mui/material';
+import Navigation from './components/Navigation';
+import { AppRouter } from './components/AppRouter';
+
+function App() {
+  return (
+    <AppRouter>
+      <Box sx={{ display: 'flex', minHeight: '100vh', flexDirection: 'column' }}>
+        <Navigation isAuthenticated={false} />
+        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+          <Container maxWidth="sm">
+            <Box sx={{ my: 4, textAlign: 'center' }}>
+              <Typography variant="h4" component="h1" gutterBottom>
+                Welcome to Firem (Basic Template)
+              </Typography>
+              <Typography variant="body1">
+                ReactJS + Firebase + Material UI are configured and ready.
+              </Typography>
+            </Box>
+          </Container>
+        </Box>
+      </Box>
+    </AppRouter>
+  );
+}
+
+export default App;

package/templates/basic/src/main.jsx

@@ -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/common/gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Firebase
+.firebase