create-lumen 1.1.4 → 1.2.0

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

@@ -1,10 +1,13 @@
+import { AppProvider } from "@/providers/AppProvider";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 
 export default function App() {
   return (
-    <MainLayout>
-      <HomePage />
-    </MainLayout>
+    <AppProvider>
+      <MainLayout>
+        <HomePage />
+      </MainLayout>
+    </AppProvider>
   );
 }

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

@@ -1,10 +1,13 @@
+import { AppProvider } from "@/providers/AppProvider";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 
 export default function App() {
   return (
-    <MainLayout>
-      <HomePage />
-    </MainLayout>
+    <AppProvider>
+      <MainLayout>
+        <HomePage />
+      </MainLayout>
+    </AppProvider>
   );
 }

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

@@ -5,8 +5,11 @@ export function Button({
   ...props
 }) {
   const styles = {
-    primary: { backgroundColor: "#2563eb", color: "white" },
-    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+    primary: { backgroundColor: "var(--color-primary)", color: "white" },
+    secondary: {
+      backgroundColor: "var(--color-border)",
+      color: "var(--color-fg)",
+    },
   };
 
   return (

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

@@ -10,8 +10,11 @@ export function Button({
   ...props
 }: ButtonProps) {
   const styles = {
-    primary: { backgroundColor: "#2563eb", color: "white" },
-    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+    primary: { backgroundColor: "var(--color-primary)", color: "white" },
+    secondary: {
+      backgroundColor: "var(--color-border)",
+      color: "var(--color-fg)",
+    },
   };
 
   return (

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

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AppContext } from "@/providers/appcontext";
+
+export function useApp() {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useApp must be used within an AppProvider");
+  }
+  return ctx;
+}

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

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AppContext, type AppContextValue } from "@/providers/appcontext";
+
+export function useApp(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useApp must be used within an AppProvider");
+  }
+  return ctx;
+}

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

@@ -4,20 +4,28 @@ export function MainLayout({ children }) {
       <header
         style={{
           padding: "16px 24px",
-          borderBottom: "1px solid #e5e7eb",
+          borderBottom: "1px solid var(--color-border)",
         }}
       >
         <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
       </header>
-      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <main
+        style={{
+          flex: 1,
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         {children}
       </main>
       <footer
         style={{
           padding: "16px 24px",
-          borderTop: "1px solid #e5e7eb",
+          borderTop: "1px solid var(--color-border)",
           textAlign: "center",
-          color: "#6b7280",
+          color: "var(--color-muted)",
         }}
       >
         <p>Built with Lumen</p>

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

@@ -8,20 +8,28 @@ export function MainLayout({ children }: MainLayoutProps) {
       <header
         style={{
           padding: "16px 24px",
-          borderBottom: "1px solid #e5e7eb",
+          borderBottom: "1px solid var(--color-border)",
         }}
       >
         <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
       </header>
-      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <main
+        style={{
+          flex: 1,
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         {children}
       </main>
       <footer
         style={{
           padding: "16px 24px",
-          borderTop: "1px solid #e5e7eb",
+          borderTop: "1px solid var(--color-border)",
           textAlign: "center",
-          color: "#6b7280",
+          color: "var(--color-muted)",
         }}
       >
         <p>Built with Lumen</p>

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

@@ -6,7 +6,12 @@ export function HomePage() {
       <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
         Welcome to Lumen
       </h1>
-      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>

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

@@ -6,7 +6,12 @@ export function HomePage() {
       <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
         Welcome to Lumen
       </h1>
-      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>

package/templates/architectures/component-based/src/providers/AppProvider.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { AppContext } from "./appcontext";
+
+export function AppProvider({ children }) {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem("theme") ?? "light"
+  );
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+    document.documentElement.dataset.theme =
+      theme === "dark" ? "dark" : "light";
+  }, [theme]);
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </AppContext.Provider>
+  );
+}

package/templates/architectures/component-based/src/providers/AppProvider.tsx

@@ -0,0 +1,24 @@
+import {
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { AppContext } from "./appcontext";
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem("theme") ?? "light"
+  );
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+    document.documentElement.dataset.theme =
+      theme === "dark" ? "dark" : "light";
+  }, [theme]);
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </AppContext.Provider>
+  );
+}

package/templates/architectures/component-based/src/providers/appcontext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const AppContext = createContext(null);

package/templates/architectures/component-based/src/{context/app-context.ts → providers/appcontext.ts}

@@ -1,10 +1,8 @@
 import { createContext } from "react";
 
-// React Fast Refresh requires contexts to live in a separate file from
-// components, so the AppProvider component exports from AppContext.tsx.
 export interface AppContextValue {
   theme: string;
   setTheme: (theme: string) => void;
 }
 
-export const AppContext = createContext<AppContextValue | null>(null);
+export const AppContext = createContext<AppContextValue | null>(null);

package/templates/architectures/{feature-based → component-based}/src/types/index.js

@@ -11,3 +11,10 @@
  * @property {string} message
  * @property {boolean} success
  */
+
+/**
+ * @typedef {Object} CreateUserPayload
+ * @property {string} email
+ * @property {string} name
+ */
+export {};

package/templates/architectures/{feature-based → component-based}/src/types/index.ts

@@ -9,3 +9,8 @@ export interface ApiResponse<T> {
   message: string;
   success: boolean;
 }
+
+export interface CreateUserPayload {
+  email: string;
+  name: string;
+}

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

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

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

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

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

@@ -19,19 +19,19 @@ const featureDir = path.join(process.cwd(), "src", "features", formattedName);
 const subdirectories = [
   "components",
   "hooks",
-  "interfaces",
   "layouts",
   "pages",
   "services",
   "store",
+  "types",
 ];
 
 // 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`,
+  "types/index.ts": `// Types exclusive to the ${formattedName} module\n`,
 };
 
 // 4. Create the feature

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

@@ -1,9 +1,20 @@
-import { HomePage } from "@/features/home/pages/HomePage";
+import { ThemeProvider } from "@/app/providers/ThemeProvider";
+import { HomePage } from "@/features/home";
 
 export default function App() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <HomePage />
-    </div>
+    <ThemeProvider>
+      <div
+        style={{
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--color-bg)",
+        }}
+      >
+        <HomePage />
+      </div>
+    </ThemeProvider>
   );
 }

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

@@ -1,9 +1,20 @@
-import { HomePage } from "@/features/home/pages/HomePage";
+import { ThemeProvider } from "@/app/providers/ThemeProvider";
+import { HomePage } from "@/features/home";
 
 export default function App() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <HomePage />
-    </div>
+    <ThemeProvider>
+      <div
+        style={{
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--color-bg)",
+        }}
+      >
+        <HomePage />
+      </div>
+    </ThemeProvider>
   );
 }

package/templates/architectures/feature-based/src/app/contexts/themecontext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ThemeContext = createContext(null);

package/templates/architectures/feature-based/src/app/contexts/themecontext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export interface ThemeContextValue {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);

package/templates/architectures/feature-based/src/app/hooks/useTheme.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext } from "../contexts/themecontext";
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}

package/templates/architectures/feature-based/src/app/hooks/useTheme.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext, type ThemeContextValue } from "../contexts/themecontext";
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}

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

@@ -1,3 +1,20 @@
+import { useEffect, useState } from "react";
+import { ThemeContext } from "../contexts/themecontext";
+
 export function ThemeProvider({ children }) {
-  return <>{children}</>;
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem("theme") ?? "light"
+  );
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+    document.documentElement.dataset.theme =
+      theme === "dark" ? "dark" : "light";
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
 }

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

@@ -1,5 +1,22 @@
-import type { ReactNode } from "react";
+import {
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { ThemeContext, type ThemeContextValue } from "../contexts/themecontext";
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  return <>{children}</>;
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem("theme") ?? "light"
+  );
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+    document.documentElement.dataset.theme =
+      theme === "dark" ? "dark" : "light";
+  }, [theme]);
+
+  const value: ThemeContextValue = { theme, setTheme };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }

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

@@ -1,10 +1,24 @@
-import { Button } from "@/components/ui";
+import { Button } from "@/shared/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">
+    <div style={{ textAlign: "center" }}>
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "var(--color-fg)",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>

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

@@ -1,10 +1,24 @@
-import { Button } from "@/components/ui";
+import { Button } from "@/shared/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">
+    <div style={{ textAlign: "center" }}>
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "var(--color-fg)",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>

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

@@ -0,0 +1,7 @@
+export const axiosConfig = {
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+};

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

@@ -0,0 +1,7 @@
+export const axiosConfig = {
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+};