create-lumen 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/readme.js

@@ -10,8 +10,6 @@ function buildBuiltWith(responses) {
 
   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) {
@@ -119,6 +117,29 @@ ${nestedTree(appChildren)}
 ${nestedTree(shared)}`;
   }
 
+  if (responses.architecture === "hybrid") {
+    const shared = [
+      "components/ # Shared UI components",
+      "hooks/    # Shared custom hooks",
+      "layouts/  # High-level layout wrappers",
+      "stores/   # Global state stores",
+      `styles/   # ${responses.cssFramework === "none" ? "main.css (reset) + themes.css (CSS variables)" : "globals.css (framework directives) + themes.css"}`,
+      "types/    # Global type definitions",
+      "utils/    # Pure utility functions",
+    ];
+    return `src/
+├── features/     # Feature modules (domain boundaries)
+└── shared/       # Reusable, business-agnostic resources
+${nestedTree(shared)}`;
+  }
+
+  if (responses.architecture === "none") {
+    return `src/
+├── App.${responses.language === "ts" ? "tsx" : "jsx"}          # Root application component
+├── main.${responses.language === "ts" ? "tsx" : "jsx"}         # Application entry point
+└── styles/       # Stylesheets`;
+  }
+
   const rows = ["components/   # Reusable UI components (common, form)"];
   if (responses.apiClient !== "none") {
     rows.push("config/       # API configuration (axios/fetch)");

package/src/scaffold.js

@@ -1,5 +1,7 @@
+import { promises as fsp } from "fs";
 import path from "path";
 import { execa } from "execa";
+import { copyDirRecursive } from "@/utils/fs.js";
 import { isYarnV1 } from "@/utils/yarn-v1.js";
 
 export async function runViteCreate(projectPath, projectName, pkg, language) {
@@ -27,3 +29,18 @@ export async function runBaseInstall(projectPath, pkg) {
 export async function runGitInit(projectPath) {
   await execa("git", ["init"], { stdio: "pipe", cwd: projectPath });
 }
+
+export async function scaffoldBase(projectPath, provider, language, templatesDir) {
+  if (provider && typeof provider.getFilePlan === "function") {
+    const filePlan = provider.getFilePlan({ lang: language });
+    const baseDir = path.join(templatesDir, "..", filePlan);
+    try {
+      await fsp.access(baseDir);
+      await copyDirRecursive(baseDir, projectPath);
+      return true;
+    } catch {
+      // Base directory does not exist yet in templates/bases
+    }
+  }
+  return false;
+}

package/templates/architectures/hybrid/main.jsx

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

package/templates/architectures/hybrid/main.tsx

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

package/templates/architectures/hybrid/src/App.jsx

@@ -0,0 +1,20 @@
+import { Button } from "@/shared/components/ui/Button";
+
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg, #ffffff)",
+      }}
+    >
+      <h1>Welcome to Lumen</h1>
+      <p>Hybrid architecture (src/features + src/shared).</p>
+      <Button>Click me</Button>
+    </div>
+  );
+}

package/templates/architectures/hybrid/src/App.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@/shared/components/ui/Button";
+
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg, #ffffff)",
+      }}
+    >
+      <h1>Welcome to Lumen</h1>
+      <p>Hybrid architecture (src/features + src/shared).</p>
+      <Button>Click me</Button>
+    </div>
+  );
+}

package/templates/architectures/hybrid/src/shared/components/ui/Button.jsx

@@ -0,0 +1,31 @@
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}) {
+  const styles = {
+    primary: { backgroundColor: "var(--color-primary)", color: "white" },
+    secondary: {
+      backgroundColor: "var(--color-border)",
+      color: "var(--color-fg)",
+    },
+  };
+
+  return (
+    <button
+      style={{
+        padding: "8px 16px",
+        borderRadius: "8px",
+        fontWeight: 500,
+        border: "none",
+        cursor: "pointer",
+        ...styles[variant],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/architectures/hybrid/src/shared/components/ui/Button.tsx

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

package/templates/architectures/hybrid/src/shared/components/ui/index.js

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

package/templates/architectures/hybrid/src/shared/components/ui/index.ts

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

package/templates/architectures/hybrid/src/shared/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/hybrid/src/shared/hooks/useLocalStorage.ts

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      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] as const;
+}

package/templates/architectures/hybrid/src/shared/types/index.js

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

package/templates/architectures/hybrid/src/shared/types/index.ts

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

package/templates/architectures/hybrid/src/shared/utils/cn.jsx

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

package/templates/architectures/hybrid/src/shared/utils/cn.ts

@@ -0,0 +1,5 @@
+type ClassValue = string | false | null | undefined;
+
+export function cn(...inputs: ClassValue[]): string {
+  return inputs.filter(Boolean).join(" ");
+}

package/templates/architectures/none/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/none/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/none/src/App.jsx

@@ -0,0 +1,15 @@
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg, #ffffff)",
+      }}
+    >
+      <h1>Welcome to Lumen</h1>
+    </div>
+  );
+}

package/templates/architectures/none/src/App.tsx

@@ -0,0 +1,15 @@
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg, #ffffff)",
+      }}
+    >
+      <h1>Welcome to Lumen</h1>
+    </div>
+  );
+}

package/templates/architectures/none/src/styles/.gitkeep

@@ -0,0 +1 @@
+

package/templates/architectures/none/src/types/index.js

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

package/templates/architectures/none/src/types/index.ts

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

package/templates/conditional/testing/jest/hybrid/src/__tests__/App.test.jsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/hybrid/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/none/src/__tests__/App.test.jsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/none/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/hybrid/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/hybrid/src/__tests__/App.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/none/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/none/src/__tests__/App.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/css/tailwind/src/globals.css

@@ -1 +1,11 @@
 @import "tailwindcss";
+@import "./themes.css";
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/css/tailwind/src/themes.css

@@ -1,9 +1,91 @@
 /* themes.css — Tailwind v4 theme tokens
  * Synced with ThemeProvider / AppProvider via
- * document.documentElement.dataset.theme.
+ * document.documentElement.dataset.theme and .dark class.
  */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
-@theme {
-  --color-primary: #6366f1;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+}
+
+[data-theme="dark"], .dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
 }

package/templates/ui/shadcn/lib/utils.js

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

package/templates/ui/shadcn/lib/utils.ts

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