@oss-ma/tpl 1.0.27 → 1.0.29

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@oss-ma/tpl",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Generate, enforce and maintain clean project architectures",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aos01/oss-ma"
+  },
+  "homepage": "https://github.com/aos01/oss-ma#readme",
+  "bugs": {
+    "url": "https://github.com/aos01/oss-ma/issues"
+  },
   "bin": {
     "tpl": "dist/index.js"
   },
@@ -33,4 +41,4 @@
     "tsx": "^4.16.2",
     "typescript": "^5.5.4"
   }
-}
+}

package/resources/templates/react-ts/files/.env.example

@@ -0,0 +1,9 @@
+# Application
+VITE_APP_NAME={{appName}}
+VITE_APP_VERSION=0.1.0
+
+# API
+VITE_API_BASE_URL=https://api.example.com
+
+# Feature flags
+VITE_ENABLE_DEVTOOLS=true

package/resources/templates/react-ts/files/package.json

@@ -7,50 +7,52 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-
     "test": "vitest run",
-    "test:watch": "vitest",
-
+    "test:watch": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format": "prettier -w .",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-
-    "gen:feature": "node scripts/gen-feature.mjs",
-
     "prepare": "husky",
     "audit": "npm audit --audit-level=high"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.56.0",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.26.0",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.0",
     "@eslint/js": "^9.0.0",
+    "@tanstack/react-query-devtools": "^5.56.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@vitest/ui": "^2.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.0",
     "globals": "^15.0.0",
     "husky": "^9.0.0",
+    "jsdom": "^26.0.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.3.0",
     "typescript": "^5.5.0",
     "vite": "^5.4.0",
-    "vitest": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "jsdom": "^26.0.0"
+    "vitest": "^2.0.0"
   },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx,json,md,yml,yaml}": [
-      "prettier -w"
-    ],
-    "*.{ts,tsx,js,jsx}": [
-      "eslint --fix"
-    ]
+    "*.{ts,tsx,js,jsx,json,md,yml,yaml}": ["prettier -w"],
+    "*.{ts,tsx,js,jsx}": ["eslint --fix"]
   }
 }

package/resources/templates/react-ts/files/src/app/App.tsx

@@ -1,10 +1,12 @@
-import { Example } from "../features/example/Example.js";
+import { Routes, Route } from "react-router-dom";
+import { HomePage } from "@/pages/HomePage";
+import { NotFoundPage } from "@/pages/NotFoundPage";
 
 export function App() {
   return (
-    <main style={{ padding: 16 }}>
-      <h1>{{appName}}</h1>
-      <Example />
-    </main>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
   );
 }

package/resources/templates/react-ts/files/src/app/index.css

@@ -0,0 +1,24 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+body {
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}

package/resources/templates/react-ts/files/src/app/main.tsx

@@ -1,9 +1,27 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App.js";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { App } from "@/app/App";
+import "@/app/index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      retry: 1,
+    },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>
 );

package/resources/templates/react-ts/files/src/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_VERSION: string;
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_ENABLE_DEVTOOLS: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/resources/templates/react-ts/files/src/features/example/ExampleFeature.tsx

@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import { useCounterStore } from "./store";
+import { Button } from "@/shared/ui/Button";
+
+interface Post {
+  id: number;
+  title: string;
+}
+
+async function fetchPosts(): Promise<Post[]> {
+  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=3");
+  if (!res.ok) throw new Error("Failed to fetch posts");
+  return res.json();
+}
+
+export function ExampleFeature() {
+  const { count, increment, decrement, reset } = useCounterStore();
+
+  const { data: posts, isLoading, isError } = useQuery({
+    queryKey: ["posts"],
+    queryFn: fetchPosts,
+  });
+
+  return (
+    <section style={{ marginTop: "2rem" }}>
+      {/* Zustand counter */}
+      <div style={{ marginBottom: "2rem" }}>
+        <h2>Counter (Zustand)</h2>
+        <p style={{ fontSize: "2rem", margin: "0.5rem 0" }}>{count}</p>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <Button onClick={decrement}>−</Button>
+          <Button onClick={increment}>+</Button>
+          <Button onClick={reset} variant="secondary">Reset</Button>
+        </div>
+      </div>
+
+      {/* React Query fetch */}
+      <div>
+        <h2>Posts (TanStack Query)</h2>
+        {isLoading && <p>Loading...</p>}
+        {isError && <p>Error loading posts.</p>}
+        {posts && (
+          <ul style={{ marginTop: "0.5rem", paddingLeft: "1.2rem" }}>
+            {posts.map((post) => (
+              <li key={post.id} style={{ marginBottom: "0.25rem" }}>
+                {post.title}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}

package/resources/templates/react-ts/files/src/features/example/store.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useCounterStore } from "@/features/example/store";
+
+describe("useCounterStore", () => {
+  beforeEach(() => {
+    useCounterStore.getState().reset();
+  });
+
+  it("starts at 0", () => {
+    expect(useCounterStore.getState().count).toBe(0);
+  });
+
+  it("increments", () => {
+    useCounterStore.getState().increment();
+    expect(useCounterStore.getState().count).toBe(1);
+  });
+
+  it("decrements", () => {
+    useCounterStore.getState().increment();
+    useCounterStore.getState().decrement();
+    expect(useCounterStore.getState().count).toBe(0);
+  });
+
+  it("resets to 0", () => {
+    useCounterStore.getState().increment();
+    useCounterStore.getState().increment();
+    useCounterStore.getState().reset();
+    expect(useCounterStore.getState().count).toBe(0);
+  });
+});

package/resources/templates/react-ts/files/src/features/example/store.ts

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

package/resources/templates/react-ts/files/src/pages/HomePage.tsx

@@ -0,0 +1,13 @@
+import { ExampleFeature } from "@/features/example/ExampleFeature";
+
+export function HomePage() {
+  return (
+    <main style={{ padding: "2rem", maxWidth: 800, margin: "0 auto" }}>
+      <h1>{{appName}}</h1>
+      <p style={{ marginTop: "0.5rem", opacity: 0.7 }}>
+        React + TypeScript + Vite
+      </p>
+      <ExampleFeature />
+    </main>
+  );
+}

package/resources/templates/react-ts/files/src/pages/NotFoundPage.tsx

@@ -0,0 +1,13 @@
+import { Link } from "react-router-dom";
+
+export function NotFoundPage() {
+  return (
+    <main style={{ padding: "2rem", textAlign: "center" }}>
+      <h1>404</h1>
+      <p>Page not found.</p>
+      <Link to="/" style={{ marginTop: "1rem", display: "inline-block" }}>
+        Go home
+      </Link>
+    </main>
+  );
+}

package/resources/templates/react-ts/files/src/shared/ui/Button.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "@/shared/ui/Button";
+
+describe("Button", () => {
+  it("renders children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it("calls onClick when clicked", () => {
+    const handler = vi.fn();
+    render(<Button onClick={handler}>Click</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("applies secondary variant", () => {
+    render(<Button variant="secondary">Cancel</Button>);
+    const btn = screen.getByRole("button");
+    expect(btn).toHaveStyle({ background: "#3a3a3a" });
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});

package/resources/templates/react-ts/files/src/shared/ui/Button.tsx

@@ -1,19 +1,31 @@
-type Props = {
-  children: React.ReactNode;
-  onClick?: () => void;
-};
+import type { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+}
+
+export function Button({
+  variant = "primary",
+  children,
+  style,
+  ...props
+}: ButtonProps) {
+  const base: React.CSSProperties = {
+    padding: "0.4rem 1rem",
+    borderRadius: 6,
+    border: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: "0.9rem",
+  };
+
+  const variants: Record<string, React.CSSProperties> = {
+    primary: { background: "#646cff", color: "#fff" },
+    secondary: { background: "#3a3a3a", color: "#fff" },
+  };
 
-export function Button({ children, onClick }: Props) {
   return (
-    <button
-      onClick={onClick}
-      style={{
-        padding: "8px 12px",
-        borderRadius: 10,
-        border: "1px solid #ddd",
-        cursor: "pointer"
-      }}
-    >
+    <button style={{ ...base, ...variants[variant], ...style }} {...props}>
       {children}
     </button>
   );

package/resources/templates/react-ts/files/src/tests/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/resources/templates/react-ts/files/tsconfig.json

@@ -1,21 +1,24 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src", "vitest.setup.ts"]
+  "include": ["src"]
 }

package/resources/templates/react-ts/files/vite.config.ts

@@ -1,6 +1,22 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/tests/setup.ts"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "html"],
+      exclude: ["node_modules/", "src/tests/"],
+    },
+  },
 });

package/resources/templates/react-ts/files/src/features/example/Example.tsx

@@ -1,14 +0,0 @@
-import { useState } from "react";
-import { Button } from "../../shared/ui/Button.js";
-
-export function Example() {
-  const [msg, setMsg] = useState<string | null>(null);
-
-  return (
-    <section style={{ marginTop: 16 }}>
-      <p>Feature module example.</p>
-      <Button onClick={() => setMsg("Hello!")}>Click</Button>
-      {msg && <p style={{ marginTop: 8 }}>{msg}</p>}
-    </section>
-  );
-}

package/resources/templates/react-ts/files/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts", "vitest.config.ts"]
-}

package/resources/templates/react-ts/files/vitest.config.js

@@ -1,9 +0,0 @@
-import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react";
-export default defineConfig({
-    plugins: [react()],
-    test: {
-        environment: "jsdom",
-        setupFiles: ["./vitest.setup.ts"]
-    }
-});