create-lumen 1.0.0

package/templates/architectures/component-based/src/pages/Home/Home.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/architectures/component-based/src/pages/Home/Home.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/architectures/component-based/src/pages/Home/index.js

@@ -0,0 +1 @@
+export { HomePage } from "./Home";

package/templates/architectures/component-based/src/pages/Home/index.ts

@@ -0,0 +1 @@
+export { HomePage } from "./Home";

package/templates/architectures/component-based/src/routes/index.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Routes, Route } from "react-router-dom";
+import { HomePage } from "@/pages/Home";
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+    </Routes>
+  );
+}

package/templates/architectures/component-based/src/routes/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Routes, Route } from "react-router-dom";
+import { HomePage } from "@/pages/Home";
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+    </Routes>
+  );
+}

package/templates/architectures/component-based/src/styles/globals.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/templates/architectures/component-based/src/utils/cn.jsx

@@ -0,0 +1,3 @@
+export function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}

package/templates/architectures/component-based/src/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}

package/templates/architectures/component-based/src/utils/index.js

@@ -0,0 +1 @@
+export { cn } from "./cn";

package/templates/architectures/component-based/src/utils/index.ts

@@ -0,0 +1 @@
+export { cn } from "./cn";

package/templates/architectures/feature-based/main.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "@/app/App";
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/architectures/feature-based/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "@/app/App";
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/architectures/feature-based/scripts/create-feature.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+// 1. Get feature name from CLI args
+const featureName = process.argv[2];
+
+if (!featureName) {
+  console.error("\x1b[31mError:\x1b[0m Please specify the feature name.");
+  console.log("\x1b[36mExample:\x1b[0m npm run create:feature products");
+  process.exit(1);
+}
+
+const formattedName = featureName.trim().toLowerCase();
+const featureDir = path.join(process.cwd(), "src", "features", formattedName);
+
+// 2. Feature-First subdirectories
+const subdirectories = [
+  "components",
+  "hooks",
+  "interfaces",
+  "layouts",
+  "pages",
+  "services",
+  "store",
+];
+
+// 3. Initial files with starter content
+const initialFiles = {
+  "interfaces/index.ts": `// Types and contracts for the ${formattedName} module\n`,
+  "services/index.ts": `// Endpoints and async calls for the ${formattedName} module\n`,
+  "store/index.ts": `// State for the ${formattedName} module\n`,
+  "pages/index.ts": `// Page components for the ${formattedName} module\n`,
+};
+
+// 4. Create the feature
+try {
+  if (fs.existsSync(featureDir)) {
+    console.error(
+      `\x1b[31mError:\x1b[0m Feature "${formattedName}" already exists in src/features/.`
+    );
+    process.exit(1);
+  }
+
+  console.log(`\x1b[34mCreating feature:\x1b[0m ${formattedName}...`);
+
+  // Create main directory and subdirectories
+  fs.mkdirSync(featureDir, { recursive: true });
+  subdirectories.forEach((subDir) => {
+    fs.mkdirSync(path.join(featureDir, subDir), { recursive: true });
+  });
+
+  // Create base files
+  for (const [filePath, content] of Object.entries(initialFiles)) {
+    fs.writeFileSync(path.join(featureDir, filePath), content, "utf8");
+  }
+
+  console.log(
+    `\x1b[32mSuccess!\x1b[0m Feature "${formattedName}" created at src/features/${formattedName}`
+  );
+} catch (error) {
+  console.error("\x1b[31mUnexpected error:\x1b[0m", error);
+  process.exit(1);
+}

package/templates/architectures/feature-based/src/app/App.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { HomePage } from "@/features/home/pages/HomePage";
+
+export default function App() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <HomePage />
+    </div>
+  );
+}

package/templates/architectures/feature-based/src/app/App.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { HomePage } from "@/features/home/pages/HomePage";
+
+export default function App() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <HomePage />
+    </div>
+  );
+}

package/templates/architectures/feature-based/src/app/providers/ThemeProvider.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export function ThemeProvider({ children }) {
+  return <>{children}</>;
+}

package/templates/architectures/feature-based/src/app/providers/ThemeProvider.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export function ThemeProvider({ children }) {
+  return <>{children}</>;
+}

package/templates/architectures/feature-based/src/components/ui/Button.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}) {
+  const base = "px-4 py-2 rounded-lg font-medium transition-colors";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700",
+    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+  };
+
+  return (
+    <button
+      className={`${base} ${variants[variant]} ${className ?? ""}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/architectures/feature-based/src/components/ui/Button.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}: ButtonProps) {
+  const base = "px-4 py-2 rounded-lg font-medium transition-colors";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700",
+    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+  };
+
+  return (
+    <button
+      className={`${base} ${variants[variant]} ${className ?? ""}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/architectures/feature-based/src/components/ui/index.js

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/templates/architectures/feature-based/src/components/ui/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/templates/architectures/feature-based/src/config/constants.js

@@ -0,0 +1,2 @@
+export const APP_NAME = "Lumen";
+export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/feature-based/src/config/constants.ts

@@ -0,0 +1,2 @@
+export const APP_NAME = "Lumen";
+export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/feature-based/src/features/home/index.js

@@ -0,0 +1 @@
+export { HomePage } from "./pages/HomePage";

package/templates/architectures/feature-based/src/features/home/index.ts

@@ -0,0 +1 @@
+export { HomePage } from "./pages/HomePage";

package/templates/architectures/feature-based/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "@/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/architectures/feature-based/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "@/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/architectures/feature-based/src/hooks/index.js

@@ -0,0 +1 @@
+export { useLocalStorage } from "./useLocalStorage";

package/templates/architectures/feature-based/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useLocalStorage } from "./useLocalStorage";

package/templates/architectures/feature-based/src/hooks/useLocalStorage.jsx

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+
+export function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value) => {
+      try {
+        const valueToStore =
+          value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  return [storedValue, setValue];
+}

package/templates/architectures/feature-based/src/hooks/useLocalStorage.ts

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+
+export function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value) => {
+      try {
+        const valueToStore =
+          value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  return [storedValue, setValue];
+}

package/templates/architectures/feature-based/src/styles/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/architectures/feature-based/src/types/index.js

@@ -0,0 +1,13 @@
+/**
+ * @typedef {Object} User
+ * @property {string} id
+ * @property {string} email
+ * @property {string} name
+ */
+
+/**
+ * @typedef {Object} ApiResponse
+ * @property {*} data
+ * @property {string} message
+ * @property {boolean} success
+ */

package/templates/architectures/feature-based/src/types/index.ts

@@ -0,0 +1,11 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message: string;
+  success: boolean;
+}

package/templates/architectures/feature-based/src/utils/cn.jsx

@@ -0,0 +1,3 @@
+export function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}

package/templates/architectures/feature-based/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/templates/architectures/feature-based/src/utils/index.js

@@ -0,0 +1 @@
+export { cn } from "./cn";

package/templates/architectures/feature-based/src/utils/index.ts

@@ -0,0 +1 @@
+export { cn } from "./cn";

package/templates/conditional/axios/component-based/src/services/axios.jsx

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { API_BASE_URL } from "@/config/constants";
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

package/templates/conditional/axios/component-based/src/services/axios.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { API_BASE_URL } from "@/config/constants";
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

package/templates/conditional/axios/component-based/src/services/index.js

@@ -0,0 +1 @@
+export { default as api } from "./axios";

package/templates/conditional/axios/component-based/src/services/index.ts

@@ -0,0 +1 @@
+export { default as api } from "./axios";

package/templates/conditional/axios/feature-based/src/lib/axios.jsx

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { API_BASE_URL } from "@/config/constants";
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

package/templates/conditional/axios/feature-based/src/lib/axios.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { API_BASE_URL } from "@/config/constants";
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

package/templates/conditional/axios/feature-based/src/lib/index.js

@@ -0,0 +1 @@
+export { default as api } from "./axios";

package/templates/conditional/axios/feature-based/src/lib/index.ts

@@ -0,0 +1 @@
+export { default as api } from "./axios";

package/templates/conditional/icons/huge/component-based/src/pages/Home/Home.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Sun, Moon, Github } from "@hugeicons/react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <Github className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/component-based/src/pages/Home/Home.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Sun, Moon, Github } from "@hugeicons/react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <Github className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Sun, Moon, Github } from "@hugeicons/react";
+import { Button } from "@/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <Github className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Sun, Moon, Github } from "@hugeicons/react";
+import { Button } from "@/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <Github className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}