create-lumen 1.1.3 → 1.2.0-beta.1

package/templates/conditional/state/redux/feature-based/src/features/home/store/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/feature-based/src/shared/stores/hooks.ts

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

package/templates/conditional/state/redux/feature-based/src/{stores → shared/stores}/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/zustand/component-based/src/store/useCounterStore.ts

@@ -1,6 +1,13 @@
 import { create } from "zustand";
 
-export const useCounterStore = create((set) => ({
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  incrementByAmount: (amount: number) => void;
+}
+
+export const useCounterStore = create<CounterState>()((set) => ({
   count: 0,
   increment: () => set((state) => ({ count: state.count + 1 })),
   decrement: () => set((state) => ({ count: state.count - 1 })),

package/templates/conditional/state/zustand/feature-based/src/stores/useCounterStore.ts

@@ -1,6 +1,13 @@
 import { create } from "zustand";
 
-export const useCounterStore = create((set) => ({
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  incrementByAmount: (amount: number) => void;
+}
+
+export const useCounterStore = create<CounterState>()((set) => ({
   count: 0,
   increment: () => set((state) => ({ count: state.count + 1 })),
   decrement: () => set((state) => ({ count: state.count - 1 })),

package/templates/conditional/testing/jest/babel.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    ["@babel/preset-react", { runtime: "automatic" }],
+    ["@babel/preset-typescript"],
+  ],
+};

package/templates/conditional/testing/jest/component-based/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/component-based/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/{src → feature-based/src}/__tests__/App.test.jsx

@@ -1,3 +1,4 @@
+import { describe, it, expect } from "@jest/globals";
 import { render, screen } from "@testing-library/react";
 import App from "@/app/App";
 
@@ -6,4 +7,4 @@ describe("App", () => {
     render(<App />);
     expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
   });
-});
+});

package/templates/conditional/testing/jest/feature-based/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/app/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/jest.config.js

@@ -1,5 +1,4 @@
-/** @type {import('jest').Config} */
-module.exports = {
+export default {
   testEnvironment: "jsdom",
   roots: ["<rootDir>/src"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
@@ -9,4 +8,4 @@ module.exports = {
   transform: {
     "^.+\\.jsx?$": "babel-jest",
   },
-};
+};

package/templates/conditional/testing/jest/jest.config.ts

@@ -1,6 +1,6 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  preset: "ts-jest",
+import type { Config } from "jest";
+
+const config: Config = {
   testEnvironment: "jsdom",
   roots: ["<rootDir>/src"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
@@ -8,6 +8,8 @@ module.exports = {
     "^@/(.*)$": "<rootDir>/src/$1",
   },
   transform: {
-    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.tsx?$": "babel-jest",
   },
 };
+
+export default config;

package/templates/conditional/testing/jest/jest.setup.js

@@ -1 +1,7 @@
 import "@testing-library/jest-dom";
+import { TextDecoder, TextEncoder } from "node:util";
+
+// react-router (and other modern libs) reference TextEncoder/TextDecoder at
+// module scope; jest's jsdom runner does not expose Node's globals by default.
+globalThis.TextEncoder = TextEncoder;
+globalThis.TextDecoder = TextDecoder;

package/templates/conditional/testing/jest/jest.setup.ts

@@ -1 +1,7 @@
 import "@testing-library/jest-dom";
+import { TextDecoder, TextEncoder } from "node:util";
+
+// react-router (and other modern libs) reference TextEncoder/TextDecoder at
+// module scope; jest's jsdom runner does not expose Node's globals by default.
+globalThis.TextEncoder = TextEncoder;
+globalThis.TextDecoder = TextDecoder;

package/templates/conditional/testing/vitest/component-based/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/{jest → vitest/component-based}/src/__tests__/App.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
-import App from "@/app/App";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
 
 describe("App", () => {
   it("renders without crashing", () => {

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>
+  );
+}

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

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Button({
   variant = "primary",
   children,
@@ -20,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

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
   children: React.ReactNode;
@@ -25,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;
+}