create-featurebased-architecture 1.0.0

package/templates/user-management-frontend/src/features/users/components/UserFormPage.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams, Link } from "react-router-dom";
+import { userService } from "../services/userService";
+import type { CreateUserDto } from "../types";
+
+export function UserFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEditing = Boolean(id);
+
+  const [form, setForm] = useState<CreateUserDto>({ email: "", name: "" });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      userService.getById(id).then(setForm).catch((err) => setError(err.message));
+    }
+  }, [id]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      if (isEditing && id) {
+        await userService.update(id, form);
+      } else {
+        await userService.create(form);
+      }
+      navigate("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="card" style={{ maxWidth: "500px" }}>
+      <h2>{isEditing ? "Edit User" : "Create User"}</h2>
+
+      {error && <p className="error">{error}</p>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label>Name</label>
+          <input
+            type="text"
+            value={form.name}
+            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>Email</label>
+          <input
+            type="email"
+            value={form.email}
+            onChange={(e) => setForm({ ...form, email: e.target.value })}
+            required
+          />
+        </div>
+
+        <div className="actions">
+          <button type="submit" className="btn btn-primary" disabled={loading}>
+            {loading ? "Saving..." : isEditing ? "Update" : "Create"}
+          </button>
+          <Link to="/" className="btn btn-secondary">Cancel</Link>
+        </div>
+      </form>
+    </div>
+  );
+}

package/templates/user-management-frontend/src/features/users/components/UsersPage.tsx

@@ -0,0 +1,61 @@
+import { useNavigate, Link } from "react-router-dom";
+import { useUsers } from "../hooks/useUsers";
+
+export function UsersPage() {
+  const { users, loading, error, deleteUser } = useUsers();
+  const navigate = useNavigate();
+
+  const handleDelete = async (id: string) => {
+    if (confirm("Are you sure you want to delete this user?")) {
+      try {
+        await deleteUser(id);
+      } catch (err) {
+        alert(err instanceof Error ? err.message : "Failed to delete user");
+      }
+    }
+  };
+
+  if (loading) return <div className="loading">Loading...</div>;
+  if (error) return <div className="error">{error}</div>;
+
+  return (
+    <div className="card">
+      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "1rem" }}>
+        <h2>Users</h2>
+        <Link to="/users/new" className="btn btn-primary">Add User</Link>
+      </div>
+
+      {users.length === 0 ? (
+        <p>No users found. Create one to get started.</p>
+      ) : (
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user.id}>
+                <td>{user.name}</td>
+                <td>{user.email}</td>
+                <td>{new Date(user.created_at).toLocaleDateString()}</td>
+                <td className="actions">
+                  <button className="btn btn-secondary" onClick={() => navigate(`/users/${user.id}/edit`)}>
+                    Edit
+                  </button>
+                  <button className="btn btn-danger" onClick={() => handleDelete(user.id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/templates/user-management-frontend/src/features/users/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./UsersPage";
+export * from "./UserFormPage";

package/templates/user-management-frontend/src/features/users/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useUsers";

package/templates/user-management-frontend/src/features/users/hooks/useUsers.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from "react";
+import { userService } from "../services/userService";
+import type { User, CreateUserDto, UpdateUserDto } from "../types";
+
+export function useUsers() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await userService.getAll();
+      setUsers(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch users");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const createUser = async (data: CreateUserDto) => {
+    const user = await userService.create(data);
+    setUsers((prev) => [user, ...prev]);
+    return user;
+  };
+
+  const updateUser = async (id: string, data: UpdateUserDto) => {
+    const user = await userService.update(id, data);
+    setUsers((prev) => prev.map((u) => (u.id === id ? user : u)));
+    return user;
+  };
+
+  const deleteUser = async (id: string) => {
+    await userService.delete(id);
+    setUsers((prev) => prev.filter((u) => u.id !== id));
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  return { users, loading, error, fetchUsers, createUser, updateUser, deleteUser };
+}

package/templates/user-management-frontend/src/features/users/index.ts

@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./services";
+export * from "./types";

package/templates/user-management-frontend/src/features/users/services/index.ts

@@ -0,0 +1 @@
+export * from "./userService";

package/templates/user-management-frontend/src/features/users/services/userService.ts

@@ -0,0 +1,48 @@
+import { API_URL } from "../../config/env";
+import type { User, CreateUserDto, UpdateUserDto, ApiResponse } from "./types";
+
+const BASE_URL = `${API_URL}/users`;
+
+export const userService = {
+  async getAll(): Promise<User[]> {
+    const res = await fetch(BASE_URL);
+    const data: ApiResponse<User[]> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data || [];
+  },
+
+  async getById(id: string): Promise<User> {
+    const res = await fetch(`${BASE_URL}/${id}`);
+    const data: ApiResponse<User> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data!;
+  },
+
+  async create(user: CreateUserDto): Promise<User> {
+    const res = await fetch(BASE_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(user),
+    });
+    const data: ApiResponse<User> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data!;
+  },
+
+  async update(id: string, user: UpdateUserDto): Promise<User> {
+    const res = await fetch(`${BASE_URL}/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(user),
+    });
+    const data: ApiResponse<User> = await res.json();
+    if (!data.success) throw new Error(data.error);
+    return data.data!;
+  },
+
+  async delete(id: string): Promise<void> {
+    const res = await fetch(`${BASE_URL}/${id}`, { method: "DELETE" });
+    const data: ApiResponse<null> = await res.json();
+    if (!data.success) throw new Error(data.error);
+  },
+};

package/templates/user-management-frontend/src/features/users/types.ts

@@ -0,0 +1,24 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateUserDto {
+  email: string;
+  name: string;
+}
+
+export interface UpdateUserDto {
+  email?: string;
+  name?: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}

package/templates/user-management-frontend/src/index.css

@@ -0,0 +1,108 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  background: #f5f5f5;
+}
+
+.app {
+  min-height: 100vh;
+}
+
+.header {
+  background: #0070f3;
+  color: white;
+  padding: 1rem 2rem;
+}
+
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.btn-primary {
+  background: #0070f3;
+  color: white;
+}
+
+.btn-danger {
+  background: #dc3545;
+  color: white;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+.table th {
+  font-weight: 600;
+  background: #f9f9f9;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.error {
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+
+.loading {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+}

package/templates/user-management-frontend/src/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/user-management-frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@/features/*": ["src/features/*"],
+      "@/shared/*": ["src/shared/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/user-management-frontend/tsconfig.node.json

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

package/templates/user-management-frontend/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});