create-lumen 1.0.0

package/src/readme.js

@@ -0,0 +1,178 @@
+import { writeFileRecursive } from "./utils/fs.js";
+import path from "path";
+
+function buildBuiltWith(responses) {
+  const items = ["[React](https://reactjs.org/) + [Vite](https://vitejs.dev/)"];
+
+  if (responses.language === "ts") {
+    items.push("[TypeScript](https://www.typescriptlang.org/)");
+  }
+
+  if (responses.cssFramework === "tailwind") {
+    items.push("[Tailwind CSS](https://tailwindcss.com/)");
+  } else if (responses.cssFramework === "bootstrap") {
+    items.push("[Bootstrap](https://getbootstrap.com/)");
+  }
+
+  if (responses.router) {
+    items.push("[React Router](https://reactrouter.com/)");
+  }
+
+  if (responses.stateManagement === "redux") {
+    items.push("[Redux Toolkit](https://redux-toolkit.js.org/)");
+  } else if (responses.stateManagement === "zustand") {
+    items.push("[Zustand](https://zustand-demo.pmnd.rs/)");
+  }
+
+  if (responses.iconLibrary === "lucide") {
+    items.push("[Lucide Icons](https://lucide.dev/)");
+  } else if (responses.iconLibrary === "huge") {
+    items.push("[Huge Icons](https://hugeicons.com/)");
+  }
+
+  if (responses.axios) {
+    items.push("[Axios](https://axios-http.com/)");
+  }
+
+  if (responses.testing === "vitest") {
+    items.push("[Vitest](https://vitest.dev/)");
+  } else if (responses.testing === "jest") {
+    items.push("[Jest](https://jestjs.io/)");
+  }
+
+  if (responses.linter === "eslint") {
+    items.push("[ESLint](https://eslint.org/)");
+  } else if (responses.linter === "oxlint") {
+    items.push("[Oxlint](https://oxc.rs/)");
+  }
+
+  return items.map((item) => `- ${item}`).join("\n");
+}
+
+function buildScripts(responses) {
+  const rows = [
+    "| `npm run dev` | Start development server |",
+    "| `npm run build` | Build for production |",
+    "| `npm run preview` | Preview production build |",
+  ];
+
+  if (responses.testing !== "none") {
+    rows.push("| `npm run test` | Run tests |");
+  }
+
+  if (responses.linter === "eslint") {
+    rows.push("| `npm run lint` | Run ESLint |");
+    rows.push("| `npm run lint:fix` | Run ESLint with auto-fix |");
+  } else if (responses.linter === "oxlint") {
+    rows.push("| `npm run lint` | Run Oxlint |");
+  }
+
+  return rows.join("\n");
+}
+
+function buildProjectStructure(architecture) {
+  if (architecture === "feature-based") {
+    return `src/
+├── app/          # App shell and providers
+├── components/   # Shared UI components
+├── config/       # Constants and configuration
+├── features/     # Feature modules (pages, hooks, api)
+├── hooks/        # Shared custom hooks
+├── stores/       # Global state stores
+├── types/        # TypeScript type definitions
+└── utils/        # Utility functions`;
+  }
+
+  return `src/
+├── components/   # Reusable UI components (common, form, layout)
+├── config/       # Constants and route definitions
+├── context/      # React context providers
+├── hooks/        # Shared custom hooks
+├── layouts/      # Page layout wrappers
+├── pages/        # Page-level components
+├── routes/       # Route definitions
+├── services/     # API service layer
+├── store/        # State store
+├── styles/       # Global styles
+└── utils/        # Utility functions`;
+}
+
+function buildLicense() {
+  const year = new Date().getFullYear();
+  return `MIT License
+
+Copyright (c) ${year}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+`;
+}
+
+function buildReadme(projectName, responses) {
+  const builtWith = buildBuiltWith(responses);
+  const scripts = buildScripts(responses);
+  const structure = buildProjectStructure(responses.architecture);
+
+  return `# ${projectName}
+
+<!-- TODO: Add a short description of your project -->
+
+## Built With
+
+${builtWith}
+
+## Getting Started
+
+\`\`\`sh
+npm install
+npm run dev
+\`\`\`
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+${scripts}
+
+## Project Structure
+
+<!-- TODO: Update this to match your actual structure -->
+
+\`\`\`
+${structure}
+\`\`\`
+
+## Authors
+
+- **Your Name** - [@your_twitter](https://twitter.com/your_twitter) - your@email.com
+
+See also the list of [contributors](https://github.com/your_username/${projectName}/graphs/contributors) who participated in this project.
+
+## License
+
+Distributed under the MIT License. See \`LICENSE\` for more information.
+`;
+}
+
+export async function generateReadme(projectPath, projectName, responses) {
+  const readmeContent = buildReadme(projectName, responses);
+  const licenseContent = buildLicense();
+
+  await writeFileRecursive(path.join(projectPath, "README.md"), readmeContent);
+  await writeFileRecursive(path.join(projectPath, "LICENSE"), licenseContent);
+}

package/src/scaffold.js

@@ -0,0 +1,29 @@
+import path from "path";
+import { execa } from "execa";
+import { isYarnV1 } from "./utils/yarn-v1.js";
+
+export async function runViteCreate(projectPath, projectName, pkg, language) {
+  const useYarn = pkg === "yarn";
+  const isYarn1 = useYarn && isYarnV1();
+  const useNpm = pkg === "npm";
+  const template = language === "ts" ? "react-ts" : "react";
+
+  const createArgs = [
+    "create",
+    isYarn1 ? "vite" : "vite@latest",
+    projectName,
+    useNpm && "--",
+    "--template",
+    template,
+  ].filter(Boolean);
+
+  await execa(pkg, createArgs, { stdio: "pipe", cwd: path.dirname(projectPath) });
+}
+
+export async function runBaseInstall(projectPath, pkg) {
+  await execa(pkg, ["install"], { stdio: "pipe", cwd: projectPath });
+}
+
+export async function runGitInit(projectPath) {
+  await execa("git", ["init"], { stdio: "pipe", cwd: projectPath });
+}

package/src/utils/dev-server.js

@@ -0,0 +1,34 @@
+import { isCancel, select } from "@clack/prompts";
+import chalk from "chalk";
+import { execa } from "execa";
+
+export async function handleDevServer(pkg, projectName) {
+  const startDev = await select({
+    message: "Start the development server?",
+    options: [
+      { label: "Yes", value: true },
+      { label: "No", value: false },
+    ],
+    initialValue: true,
+  });
+
+  if (isCancel(startDev)) {
+    printNextSteps(projectName, pkg);
+    return;
+  }
+
+  if (startDev) {
+    console.log(chalk.green("\nStarting dev server...\n"));
+    await execa(pkg, ["run", "dev"], { stdio: "inherit" });
+  } else {
+    printNextSteps(projectName, pkg);
+  }
+}
+
+function printNextSteps(projectName, pkg) {
+  console.log(chalk.bold("\nNext steps:"));
+  if (projectName !== ".") {
+    console.log(chalk.gray(`  cd ${projectName}`));
+  }
+  console.log(chalk.gray(`  ${pkg} run dev\n`));
+}

package/src/utils/fs.js

@@ -0,0 +1,74 @@
+import {
+  access,
+  readdir,
+  readFile,
+  rm,
+  stat,
+  unlink,
+  writeFile,
+  mkdir,
+  copyFile,
+} from "fs/promises";
+import path from "path";
+
+export async function deleteIfExists(filePath) {
+  try {
+    await access(filePath);
+    const s = await stat(filePath);
+    if (s.isDirectory()) {
+      await rm(filePath, { recursive: true, force: true });
+    } else {
+      await unlink(filePath);
+    }
+  } catch {
+    // doesn't exist, skip
+  }
+}
+
+export async function cleanDir(dirPath) {
+  try {
+    await access(dirPath);
+    const files = await readdir(dirPath);
+    for (const file of files) {
+      const target = path.join(dirPath, file);
+      const s = await stat(target);
+      if (s.isDirectory()) {
+        await rm(target, { recursive: true, force: true });
+      } else {
+        await unlink(target);
+      }
+    }
+  } catch {
+    // doesn't exist, skip
+  }
+}
+
+export async function copyDirRecursive(srcDir, destDir, filterFn) {
+  await mkdir(destDir, { recursive: true });
+  const entries = await readdir(srcDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+    const destPath = path.join(destDir, entry.name);
+
+    if (filterFn && !filterFn(entry.name, srcPath)) {
+      continue;
+    }
+
+    if (entry.isDirectory()) {
+      await copyDirRecursive(srcPath, destPath, filterFn);
+    } else {
+      await copyFile(srcPath, destPath);
+    }
+  }
+}
+
+export async function writeFileRecursive(filePath, content) {
+  const dir = path.dirname(filePath);
+  await mkdir(dir, { recursive: true });
+  await writeFile(filePath, content, "utf8");
+}
+
+export async function readFileContent(filePath) {
+  return readFile(filePath, "utf8");
+}

package/src/utils/pkg-manager.js

@@ -0,0 +1,17 @@
+export function getPkgManager() {
+  const ua = process.env.npm_config_user_agent || "";
+  const execPath = process.env.npm_execpath || "";
+  const argv0 = process.argv[1] || "";
+
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("bun")) return "bun";
+  if (execPath.includes("yarn")) return "yarn";
+  if (execPath.includes("pnpm")) return "pnpm";
+  if (execPath.includes("bun")) return "bun";
+  if (argv0.includes("yarn")) return "yarn";
+  if (argv0.includes("pnpm")) return "pnpm";
+  if (argv0.includes("bun")) return "bun";
+
+  return "npm";
+}

package/src/utils/yarn-v1.js

@@ -0,0 +1,10 @@
+import { execaSync } from "execa";
+
+export function isYarnV1() {
+  try {
+    const { stdout } = execaSync("yarn", ["-v"]);
+    return stdout.trim().startsWith("1.");
+  } catch {
+    return false;
+  }
+}

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

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

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

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

package/templates/architectures/component-based/src/App.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { MainLayout } from "@/layouts/MainLayout";
+import { HomePage } from "@/pages/Home/Home";
+
+export default function App() {
+  return (
+    <MainLayout>
+      <HomePage />
+    </MainLayout>
+  );
+}

package/templates/architectures/component-based/src/App.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { MainLayout } from "@/layouts/MainLayout";
+import { HomePage } from "@/pages/Home/Home";
+
+export default function App() {
+  return (
+    <MainLayout>
+      <HomePage />
+    </MainLayout>
+  );
+}

package/templates/architectures/component-based/src/components/common/Button.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}) {
+  const styles = {
+    primary: { backgroundColor: "#2563eb", color: "white" },
+    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+  };
+
+  return (
+    <button
+      style={{
+        padding: "8px 16px",
+        borderRadius: "8px",
+        fontWeight: 500,
+        border: "none",
+        cursor: "pointer",
+        ...styles[variant],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/architectures/component-based/src/components/common/Button.tsx

@@ -0,0 +1,35 @@
+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 styles = {
+    primary: { backgroundColor: "#2563eb", color: "white" },
+    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+  };
+
+  return (
+    <button
+      style={{
+        padding: "8px 16px",
+        borderRadius: "8px",
+        fontWeight: 500,
+        border: "none",
+        cursor: "pointer",
+        ...styles[variant],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/architectures/component-based/src/components/common/index.js

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

package/templates/architectures/component-based/src/components/common/index.ts

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

package/templates/architectures/component-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/component-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/component-based/src/config/routes.js

@@ -0,0 +1,7 @@
+export const ROUTES = {
+  HOME: "/",
+  ABOUT: "/about",
+  LOGIN: "/login",
+  DASHBOARD: "/dashboard",
+  SETTINGS: "/settings",
+};

package/templates/architectures/component-based/src/config/routes.ts

@@ -0,0 +1,7 @@
+export const ROUTES = {
+  HOME: "/",
+  ABOUT: "/about",
+  LOGIN: "/login",
+  DASHBOARD: "/dashboard",
+  SETTINGS: "/settings",
+};

package/templates/architectures/component-based/src/context/AppContext.jsx

@@ -0,0 +1,13 @@
+import React, { createContext, useState } from "react";
+
+export const AppContext = createContext(null);
+
+export function AppProvider({ children }) {
+  const [theme, setTheme] = useState("light");
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </AppContext.Provider>
+  );
+}

package/templates/architectures/component-based/src/context/AppContext.tsx

@@ -0,0 +1,13 @@
+import React, { createContext, useState, useEffect } from "react";
+
+export const AppContext = createContext(null);
+
+export function AppProvider({ children }) {
+  const [theme, setTheme] = useState("light");
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </AppContext.Provider>
+  );
+}

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

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

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

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

package/templates/architectures/component-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/component-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/component-based/src/layouts/MainLayout.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export function MainLayout({ children }) {
+  return (
+    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
+      <header
+        style={{
+          padding: "16px 24px",
+          borderBottom: "1px solid #e5e7eb",
+        }}
+      >
+        <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
+      </header>
+      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        {children}
+      </main>
+      <footer
+        style={{
+          padding: "16px 24px",
+          borderTop: "1px solid #e5e7eb",
+          textAlign: "center",
+          color: "#6b7280",
+        }}
+      >
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/architectures/component-based/src/layouts/MainLayout.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface MainLayoutProps {
+  children: React.ReactNode;
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
+      <header
+        style={{
+          padding: "16px 24px",
+          borderBottom: "1px solid #e5e7eb",
+        }}
+      >
+        <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
+      </header>
+      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        {children}
+      </main>
+      <footer
+        style={{
+          padding: "16px 24px",
+          borderTop: "1px solid #e5e7eb",
+          textAlign: "center",
+          color: "#6b7280",
+        }}
+      >
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

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

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

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

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