create-lumen 1.1.3 → 1.2.0-beta.1

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,11 +1,10 @@
-import React from "react";
-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,11 +1,10 @@
-import React from "react";
-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,6 +1,10 @@
-import React from "react";
+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,6 +1,10 @@
-import React from "react";
+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/component-based/src/pages/Home/counterSlice.ts

@@ -1,8 +1,14 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+
+interface CounterState {
+  value: number;
+}
+
+const initialState: CounterState = { value: 0 };
 
 const counterSlice = createSlice({
   name: "counter",
-  initialState: { value: 0 },
+  initialState,
   reducers: {
     increment: (state) => {
       state.value += 1;
@@ -10,7 +16,7 @@ const counterSlice = createSlice({
     decrement: (state) => {
       state.value -= 1;
     },
-    incrementByAmount: (state, action) => {
+    incrementByAmount: (state, action: PayloadAction<number>) => {
       state.value += action.payload;
     },
   },

package/templates/conditional/state/redux/component-based/src/{context → providers}/StoreProvider.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import { store } from "@/store";
 

package/templates/conditional/state/redux/component-based/src/{context → providers}/StoreProvider.tsx

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

package/templates/conditional/state/redux/component-based/src/store/hooks.ts

@@ -1,4 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch } from "./index";
 
-export const useAppDispatch = useDispatch;
-export const useAppSelector = useSelector;
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/templates/conditional/state/redux/component-based/src/store/index.ts

@@ -7,5 +7,5 @@ export const store = configureStore({
   },
 });
 
-export const RootState = store.getState;
-export const AppDispatch = store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

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

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