create-lumen 1.1.4 → 1.2.0

package/templates/css/component-styles/bootstrap/component-based/src/components/common/Button.tsx

@@ -0,0 +1,22 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}: ButtonProps) {
+  const variants = {
+    primary: "btn btn-primary",
+    secondary: "btn btn-secondary",
+  };
+
+  return (
+    <button className={`${variants[variant]} ${className ?? ""}`} {...props}>
+      {children}
+    </button>
+  );
+}

package/templates/css/component-styles/bootstrap/component-based/src/layouts/MainLayout.jsx

@@ -0,0 +1,15 @@
+export function MainLayout({ children }) {
+  return (
+    <div className="min-vh-100 d-flex flex-column">
+      <header className="px-4 py-3 border-bottom">
+        <h2 className="h5 fw-semibold mb-0">Lumen</h2>
+      </header>
+      <main className="flex-grow-1 p-4 d-flex align-items-center justify-content-center">
+        {children}
+      </main>
+      <footer className="px-4 py-3 border-top text-center text-muted">
+        <p className="mb-0">Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/component-based/src/layouts/MainLayout.tsx

@@ -0,0 +1,19 @@
+interface MainLayoutProps {
+  children: React.ReactNode;
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div className="min-vh-100 d-flex flex-column">
+      <header className="px-4 py-3 border-bottom">
+        <h2 className="h5 fw-semibold mb-0">Lumen</h2>
+      </header>
+      <main className="flex-grow-1 p-4 d-flex align-items-center justify-content-center">
+        {children}
+      </main>
+      <footer className="px-4 py-3 border-top text-center text-muted">
+        <p className="mb-0">Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/component-based/src/pages/Home/Home.jsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/component-based/src/pages/Home/Home.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/app/App.jsx

@@ -0,0 +1,9 @@
+import { HomePage } from "@/features/home";
+
+export default function App() {
+  return (
+    <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+      <HomePage />
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/app/App.tsx

@@ -0,0 +1,9 @@
+import { HomePage } from "@/features/home";
+
+export default function App() {
+  return (
+    <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+      <HomePage />
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,13 @@
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/shared/components/ui/Button.jsx

@@ -0,0 +1,17 @@
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}) {
+  const variants = {
+    primary: "btn btn-primary",
+    secondary: "btn btn-secondary",
+  };
+
+  return (
+    <button className={`${variants[variant]} ${className ?? ""}`} {...props}>
+      {children}
+    </button>
+  );
+}

package/templates/css/component-styles/bootstrap/feature-based/src/shared/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = "primary",
+  children,
+  className,
+  ...props
+}: ButtonProps) {
+  const variants = {
+    primary: "btn btn-primary",
+    secondary: "btn btn-secondary",
+  };
+
+  return (
+    <button className={`${variants[variant]} ${className ?? ""}`} {...props}>
+      {children}
+    </button>
+  );
+}

package/templates/{architectures/feature-based/src/components/ui → css/component-styles/tailwind/component-based/src/components/common}/Button.jsx

@@ -18,4 +18,4 @@ export function Button({
       {children}
     </button>
   );
-}
+}

package/templates/{architectures/feature-based/src/components/ui → css/component-styles/tailwind/component-based/src/components/common}/Button.tsx

@@ -23,4 +23,4 @@ export function Button({
       {children}
     </button>
   );
-}
+}

package/templates/css/component-styles/tailwind/component-based/src/layouts/MainLayout.jsx

@@ -0,0 +1,15 @@
+export function MainLayout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="px-6 py-4 border-b">
+        <h2 className="text-xl font-semibold">Lumen</h2>
+      </header>
+      <main className="flex-1 p-6 flex items-center justify-center">
+        {children}
+      </main>
+      <footer className="px-6 py-4 border-t text-center text-gray-500">
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/css/component-styles/tailwind/component-based/src/layouts/MainLayout.tsx

@@ -0,0 +1,19 @@
+interface MainLayoutProps {
+  children: React.ReactNode;
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="px-6 py-4 border-b">
+        <h2 className="text-xl font-semibold">Lumen</h2>
+      </header>
+      <main className="flex-1 p-6 flex items-center justify-center">
+        {children}
+      </main>
+      <footer className="px-6 py-4 border-t text-center text-gray-500">
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/css/component-styles/tailwind/component-based/src/pages/Home/Home.jsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/common";
+
+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/css/component-styles/tailwind/component-based/src/pages/Home/Home.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/common";
+
+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/css/component-styles/tailwind/feature-based/src/app/App.jsx

@@ -0,0 +1,9 @@
+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>
+  );
+}

package/templates/css/component-styles/tailwind/feature-based/src/app/App.tsx

@@ -0,0 +1,9 @@
+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>
+  );
+}

package/templates/css/component-styles/tailwind/feature-based/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,13 @@
+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">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/tailwind/feature-based/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,13 @@
+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">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/css/component-styles/tailwind/feature-based/src/shared/components/ui/Button.jsx

@@ -0,0 +1,21 @@
+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/css/component-styles/tailwind/feature-based/src/shared/components/ui/Button.tsx

@@ -0,0 +1,26 @@
+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/css/none/src/{index.css → main.css}

@@ -15,4 +15,6 @@ body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     sans-serif;
   line-height: 1.5;
+  background-color: var(--color-bg);
+  color: var(--color-fg);
 }

package/templates/css/none/src/themes.css

@@ -0,0 +1,19 @@
+/* themes.css — vanilla CSS theme tokens
+ * Driven by the ThemeProvider (feat) / AppProvider (comp) via
+ * document.documentElement.dataset.theme.
+ */
+:root {
+  --color-bg: #ffffff;
+  --color-fg: #111827;
+  --color-muted: #6b7280;
+  --color-primary: #6366f1;
+  --color-border: #e5e7eb;
+}
+
+:root[data-theme="dark"] {
+  --color-bg: #111827;
+  --color-fg: #f9fafb;
+  --color-muted: #9ca3af;
+  --color-primary: #818cf8;
+  --color-border: #374151;
+}

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

@@ -0,0 +1,9 @@
+/* themes.css — Tailwind v4 theme tokens
+ * Synced with ThemeProvider / AppProvider via
+ * document.documentElement.dataset.theme.
+ */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme {
+  --color-primary: #6366f1;
+}

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

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

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

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

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

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

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

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

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

@@ -1,12 +0,0 @@
-import { useState } from "react";
-import { AppContext } from "./app-context";
-
-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

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

package/templates/architectures/component-based/src/context/app-context.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-
-// React Fast Refresh requires contexts to live in a separate file from
-// components, so the AppProvider component exports from AppContext.jsx.
-export const AppContext = createContext(null);

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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-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/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

package/templates/conditional/fetch/component-based/src/services/api.jsx

@@ -1,27 +0,0 @@
-import { API_BASE_URL } from "@/config/constants";
-
-const apiClient = async (endpoint, options = {}) => {
-  const token = localStorage.getItem("access_token");
-
-  const headers = {
-    "Content-Type": "application/json",
-    ...options.headers,
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    ...options,
-    headers,
-  });
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  return response.json();
-};
-
-export default apiClient;