create-lumen 1.1.3 → 1.2.0-beta.1

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/providers/appcontext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export interface AppContextValue {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+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/component-based/src/utils/cn.ts

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

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,9 +1,9 @@
 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(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </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,10 +1,20 @@
-import React from "react";
-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,10 +1,20 @@
-import React from "react";
-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,5 +1,20 @@
-import React from "react";
+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 React from "react";
+import {
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { ThemeContext, type ThemeContextValue } from "../contexts/themecontext";
 
-export function ThemeProvider({ children }) {
-  return <>{children}</>;
+export function ThemeProvider({ 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]);
+
+  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,11 +1,24 @@
-import React from "react";
-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,11 +1,24 @@
-import React from "react";
-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/{hooks → shared/hooks}/useLocalStorage.ts

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

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/architectures/feature-based/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/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",
+  },
+};

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

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { axiosConfig } from "@/config/axios.config";
+
+const api = axios.create(axiosConfig);
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("access_token");
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default api;

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

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { axiosConfig } from "@/config/axios.config";
+
+const api = axios.create(axiosConfig);
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("access_token");
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default api;

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

@@ -0,0 +1,33 @@
+/**
+ * @typedef {import("@/types").ApiResponse} ApiResponse
+ * @typedef {import("@/types").CreateUserPayload} CreateUserPayload
+ * @typedef {import("@/types").User} User
+ */
+import api from "@/services/axios.client";
+
+export const userService = {
+  async getAll() {
+    const { data } = await api.get("/users");
+    return data;
+  },
+
+  async getById(id) {
+    const { data } = await api.get(`/users/${id}`);
+    return data;
+  },
+
+  async create(payload) {
+    const { data } = await api.post("/users", payload);
+    return data;
+  },
+
+  async update(id, payload) {
+    const { data } = await api.put(`/users/${id}`, payload);
+    return data;
+  },
+
+  async remove(id) {
+    const { data } = await api.delete(`/users/${id}`);
+    return data;
+  },
+};

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

@@ -0,0 +1,29 @@
+import api from "@/services/axios.client";
+import type { ApiResponse, CreateUserPayload, User } from "@/types";
+
+export const userService = {
+  async getAll(): Promise<ApiResponse<User[]>> {
+    const { data } = await api.get<ApiResponse<User[]>>("/users");
+    return data;
+  },
+
+  async getById(id: string): Promise<ApiResponse<User>> {
+    const { data } = await api.get<ApiResponse<User>>(`/users/${id}`);
+    return data;
+  },
+
+  async create(payload: CreateUserPayload): Promise<ApiResponse<User>> {
+    const { data } = await api.post<ApiResponse<User>>("/users", payload);
+    return data;
+  },
+
+  async update(id: string, payload: CreateUserPayload): Promise<ApiResponse<User>> {
+    const { data } = await api.put<ApiResponse<User>>(`/users/${id}`, payload);
+    return data;
+  },
+
+  async remove(id: string): Promise<ApiResponse<null>> {
+    const { data } = await api.delete<ApiResponse<null>>(`/users/${id}`);
+    return data;
+  },
+};

package/templates/conditional/axios/feature-based/src/features/home/services/user.service.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {import("@/shared/types").ApiResponse} ApiResponse
+ * @typedef {import("@/shared/types").CreateUserPayload} CreateUserPayload
+ * @typedef {import("@/shared/types").User} User
+ */
+import { api } from "@/shared/lib/axios";
+
+export const userService = {
+  async getAll() {
+    const { data } = await api.get("/users");
+    return data;
+  },
+
+  async getById(id) {
+    const { data } = await api.get(`/users/${id}`);
+    return data;
+  },
+
+  async create(payload) {
+    const { data } = await api.post("/users", payload);
+    return data;
+  },
+
+  async update(id, payload) {
+    const { data } = await api.put(`/users/${id}`, payload);
+    return data;
+  },
+
+  async remove(id) {
+    const { data } = await api.delete(`/users/${id}`);
+    return data;
+  },
+};