create-lumen 1.1.4 → 1.2.0

package/templates/conditional/icons/lucide/feature-based/tailwind/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <GitBranch className="w-8 h-8 text-gray-800" />
+      </div>
+      <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/conditional/router/component-based/bootstrap/src/layouts/MainLayout.jsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  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">
+        <Outlet />
+      </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/conditional/router/component-based/bootstrap/src/layouts/MainLayout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  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">
+        <Outlet />
+      </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/conditional/router/component-based/src/App.jsx

@@ -1,10 +1,10 @@
-import { MainLayout } from "@/layouts/MainLayout";
-import { AppRoutes } from "@/routes";
+import { AppProvider } from '@/providers/AppProvider';
+import { AppRoutes } from '@/router';
 
 export default function App() {
   return (
-    <MainLayout>
+    <AppProvider>
       <AppRoutes />
-    </MainLayout>
+    </AppProvider>
   );
 }

package/templates/conditional/router/component-based/src/App.tsx

@@ -1,10 +1,10 @@
-import { MainLayout } from "@/layouts/MainLayout";
-import { AppRoutes } from "@/routes";
+import { AppProvider } from '@/providers/AppProvider';
+import { AppRoutes } from '@/router';
 
 export default function App() {
   return (
-    <MainLayout>
+    <AppProvider>
       <AppRoutes />
-    </MainLayout>
+    </AppProvider>
   );
 }

package/templates/conditional/router/component-based/src/layouts/MainLayout.jsx

@@ -0,0 +1,39 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  return (
+    <div
+      style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+    >
+      <header
+        style={{
+          padding: "16px 24px",
+          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",
+        }}
+      >
+        <Outlet />
+      </main>
+      <footer
+        style={{
+          padding: "16px 24px",
+          borderTop: "1px solid var(--color-border)",
+          textAlign: "center",
+          color: "var(--color-muted)",
+        }}
+      >
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/router/component-based/src/layouts/MainLayout.tsx

@@ -0,0 +1,39 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  return (
+    <div
+      style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+    >
+      <header
+        style={{
+          padding: "16px 24px",
+          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",
+        }}
+      >
+        <Outlet />
+      </main>
+      <footer
+        style={{
+          padding: "16px 24px",
+          borderTop: "1px solid var(--color-border)",
+          textAlign: "center",
+          color: "var(--color-muted)",
+        }}
+      >
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/router/component-based/src/router/guards/AuthGuard.jsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+
+export function AuthGuard({ children, isAuthenticated = true }) {
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/component-based/src/router/guards/AuthGuard.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface AuthGuardProps {
+  children: ReactNode;
+  isAuthenticated?: boolean;
+}
+
+export function AuthGuard({ children, isAuthenticated = true }: AuthGuardProps) {
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/component-based/src/router/guards/GuestGuard.jsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+
+export function GuestGuard({ children, isAuthenticated = false }) {
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/component-based/src/router/guards/GuestGuard.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface GuestGuardProps {
+  children: ReactNode;
+  isAuthenticated?: boolean;
+}
+
+export function GuestGuard({ children, isAuthenticated = false }: GuestGuardProps) {
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/component-based/src/router/index.jsx

@@ -0,0 +1,44 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { MainLayout } from '@/layouts/MainLayout';
+import { HomePage } from '@/pages/Home';
+import { AuthGuard } from './guards/AuthGuard';
+import { GuestGuard } from './guards/GuestGuard';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'login',
+        element: (
+          <GuestGuard>
+            <div style={{ textAlign: 'center', padding: '32px' }}>
+              <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Login</h1>
+              <p style={{ color: 'var(--color-muted)' }}>Public route — a page only for guests.</p>
+            </div>
+          </GuestGuard>
+        ),
+      },
+      {
+        path: 'admin',
+        element: (
+          <AuthGuard>
+            <div style={{ textAlign: 'center', padding: '32px' }}>
+              <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Protected Page</h1>
+              <p style={{ color: 'var(--color-muted)' }}>Accessible to authenticated users.</p>
+            </div>
+          </AuthGuard>
+        ),
+      },
+    ],
+  },
+]);
+
+export function AppRoutes() {
+  return <RouterProvider router={router} />;
+}

package/templates/conditional/router/component-based/src/router/index.tsx

@@ -0,0 +1,44 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { MainLayout } from '@/layouts/MainLayout';
+import { HomePage } from '@/pages/Home';
+import { AuthGuard } from './guards/AuthGuard';
+import { GuestGuard } from './guards/GuestGuard';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'login',
+        element: (
+          <GuestGuard>
+            <div style={{ textAlign: 'center', padding: '32px' }}>
+              <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Login</h1>
+              <p style={{ color: 'var(--color-muted)' }}>Public route — a page only for guests.</p>
+            </div>
+          </GuestGuard>
+        ),
+      },
+      {
+        path: 'admin',
+        element: (
+          <AuthGuard>
+            <div style={{ textAlign: 'center', padding: '32px' }}>
+              <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Protected Page</h1>
+              <p style={{ color: 'var(--color-muted)' }}>Accessible to authenticated users.</p>
+            </div>
+          </AuthGuard>
+        ),
+      },
+    ],
+  },
+]);
+
+export function AppRoutes() {
+  return <RouterProvider router={router} />;
+}

package/templates/conditional/router/component-based/tailwind/src/layouts/MainLayout.jsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  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">
+        <Outlet />
+      </main>
+      <footer className="px-6 py-4 border-t text-center text-gray-500">
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/router/component-based/tailwind/src/layouts/MainLayout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  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">
+        <Outlet />
+      </main>
+      <footer className="px-6 py-4 border-t text-center text-gray-500">
+        <p>Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/bootstrap/src/shared/layouts/RootLayout.jsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/bootstrap/src/shared/layouts/RootLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/src/app/App.jsx

@@ -1,5 +1,10 @@
+import { ThemeProvider } from "./providers/ThemeProvider";
 import { AppRouter } from "./router";
 
 export default function App() {
-  return <AppRouter />;
+  return (
+    <ThemeProvider>
+      <AppRouter />
+    </ThemeProvider>
+  );
 }

package/templates/conditional/router/feature-based/src/app/App.tsx

@@ -1,5 +1,10 @@
+import { ThemeProvider } from "./providers/ThemeProvider";
 import { AppRouter } from "./router";
 
 export default function App() {
-  return <AppRouter />;
+  return (
+    <ThemeProvider>
+      <AppRouter />
+    </ThemeProvider>
+  );
 }

package/templates/conditional/router/feature-based/src/app/router/guards/AuthGuard.jsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+
+export function AuthGuard({ children, isAuthenticated = true }) {
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/feature-based/src/app/router/guards/AuthGuard.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface AuthGuardProps {
+  children: ReactNode;
+  isAuthenticated?: boolean;
+}
+
+export function AuthGuard({ children, isAuthenticated = true }: AuthGuardProps) {
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/feature-based/src/app/router/guards/RoleGuard.jsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+
+export function RoleGuard({ children, roles = ['admin'], userRole = 'admin' }) {
+  if (!roles.includes(userRole)) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/feature-based/src/app/router/guards/RoleGuard.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface RoleGuardProps {
+  children: ReactNode;
+  roles?: string[];
+  userRole?: string;
+}
+
+export function RoleGuard({ children, roles = ['admin'], userRole = 'admin' }: RoleGuardProps) {
+  if (!roles.includes(userRole)) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+}

package/templates/conditional/router/feature-based/src/app/router/index.jsx

@@ -0,0 +1,16 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { RootLayout } from '@/shared/layouts/RootLayout';
+import { authRoutes } from './routes/auth.routes';
+import { homeRoutes } from './routes/home.routes';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <RootLayout />,
+    children: [...homeRoutes, ...authRoutes],
+  },
+]);
+
+export function AppRouter() {
+  return <RouterProvider router={router} />;
+}

package/templates/conditional/router/feature-based/src/app/router/index.tsx

@@ -0,0 +1,16 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { RootLayout } from '@/shared/layouts/RootLayout';
+import { authRoutes } from './routes/auth.routes';
+import { homeRoutes } from './routes/home.routes';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <RootLayout />,
+    children: [...homeRoutes, ...authRoutes],
+  },
+]);
+
+export function AppRouter() {
+  return <RouterProvider router={router} />;
+}

package/templates/conditional/router/feature-based/src/app/router/routes/auth.routes.jsx

@@ -0,0 +1,18 @@
+import { AuthGuard } from '../guards/AuthGuard';
+import { RoleGuard } from '../guards/RoleGuard';
+
+export const authRoutes = [
+  {
+    path: 'admin',
+    element: (
+      <AuthGuard>
+        <RoleGuard>
+          <div style={{ textAlign: 'center', padding: '32px' }}>
+            <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Protected Page</h1>
+            <p style={{ color: 'var(--color-muted)' }}>Accessible to authenticated admin users.</p>
+          </div>
+        </RoleGuard>
+      </AuthGuard>
+    ),
+  },
+];

package/templates/conditional/router/feature-based/src/app/router/routes/auth.routes.tsx

@@ -0,0 +1,18 @@
+import { AuthGuard } from '../guards/AuthGuard';
+import { RoleGuard } from '../guards/RoleGuard';
+
+export const authRoutes = [
+  {
+    path: 'admin',
+    element: (
+      <AuthGuard>
+        <RoleGuard>
+          <div style={{ textAlign: 'center', padding: '32px' }}>
+            <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Protected Page</h1>
+            <p style={{ color: 'var(--color-muted)' }}>Accessible to authenticated admin users.</p>
+          </div>
+        </RoleGuard>
+      </AuthGuard>
+    ),
+  },
+];

package/templates/conditional/router/feature-based/src/app/router/routes/home.routes.jsx

@@ -0,0 +1,8 @@
+import { HomePage } from '@/features/home';
+
+export const homeRoutes = [
+  {
+    index: true,
+    element: <HomePage />,
+  },
+];

package/templates/conditional/router/feature-based/src/app/router/routes/home.routes.tsx

@@ -0,0 +1,8 @@
+import { HomePage } from '@/features/home';
+
+export const homeRoutes = [
+  {
+    index: true,
+    element: <HomePage />,
+  },
+];

package/templates/conditional/router/feature-based/src/shared/layouts/RootLayout.jsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg)",
+      }}
+    >
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/src/shared/layouts/RootLayout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--color-bg)",
+      }}
+    >
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/tailwind/src/shared/layouts/RootLayout.jsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/router/feature-based/tailwind/src/shared/layouts/RootLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export function RootLayout() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Outlet />
+    </div>
+  );
+}

package/templates/conditional/state/redux/feature-based/src/app/providers/StoreProvider.jsx

@@ -1,5 +1,5 @@
 import { Provider } from "react-redux";
-import { store } from "@/stores";
+import { store } from "@/shared/stores";
 
 export function StoreProvider({ children }) {
   return <Provider store={store}>{children}</Provider>;

package/templates/conditional/state/redux/feature-based/src/app/providers/StoreProvider.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { Provider } from "react-redux";
-import { store } from "@/stores";
+import { store } from "@/shared/stores";
 
 export function StoreProvider({ children }: { children: ReactNode }) {
   return <Provider store={store}>{children}</Provider>;

package/templates/css/bootstrap/src/themes.css

@@ -0,0 +1,14 @@
+/* themes.css — Bootstrap 5.3+ theme overrides
+ * Bootstrap 5.3+ reads data-bs-theme on a parent element to switch between
+ * light/dark variants. The themes here customize the default tokens; the
+ * data-bs-theme attribute is applied externally.
+ */
+:root[data-bs-theme="light"] {
+  --bs-primary: #6366f1;
+}
+
+:root[data-bs-theme="dark"] {
+  --bs-body-bg: #111827;
+  --bs-body-color: #f9fafb;
+  --bs-primary: #818cf8;
+}

package/templates/css/component-styles/bootstrap/component-based/src/components/common/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>
+  );
+}