create-einja-app 0.1.1 → 0.1.2

package/templates/default/apps/web/src/app/(authenticated)/data/_components/UserTableContainer.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useUsers, type UserFilters } from "@/hooks/use-users";
+import type { PaginatedUserList } from "@web/application/use-cases/UserUseCases";
+import { UserTable } from "./UserTable";
+
+interface UserTableContainerProps {
+  initialData?: PaginatedUserList;
+  filters?: UserFilters;
+}
+
+/**
+ * UserTableContainer
+ *
+ * Client Component - Tanstack Queryでデータ管理
+ */
+export function UserTableContainer({
+  initialData,
+  filters = {},
+}: UserTableContainerProps) {
+  const { data, isLoading, error } = useUsers(filters, initialData);
+
+  const handleView = (userId: string) => {
+    console.log("詳細表示:", userId);
+    // TODO: 詳細ページへの遷移やモーダル表示
+  };
+
+  const handleEdit = (userId: string) => {
+    console.log("編集:", userId);
+    // TODO: 編集ページへの遷移やモーダル表示
+  };
+
+  const handleDelete = (userId: string) => {
+    console.log("削除:", userId);
+    // TODO: 削除確認モーダル表示とAPI呼び出し
+  };
+
+  if (error) {
+    return (
+      <div className="text-destructive">
+        エラーが発生しました: {error.message}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return <div>読み込み中...</div>;
+  }
+
+  if (!data) {
+    return <div>データがありません</div>;
+  }
+
+  return (
+    <UserTable
+      users={data.items}
+      onView={handleView}
+      onEdit={handleEdit}
+      onDelete={handleDelete}
+    />
+  );
+}

package/templates/{turborepo-pandacss → default}/apps/web/src/app/(authenticated)/data/page.tsx

@@ -1,11 +1,18 @@
-import { userUseCases } from "@/application/use-cases/UserUseCases";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { UserTable } from "./_components/UserTable";
+import { prefetchUsers } from "@/hooks/use-users";
+import { UserTableContainer } from "./_components/UserTableContainer";
 
 export default async function DataPage() {
-  const result = await userUseCases.list({}, { page: 1, limit: 100 });
+  let initialData;
+  let error;
 
-  if (!result.isSuccess) {
+  try {
+    initialData = await prefetchUsers({ page: 1, limit: 100 });
+  } catch (e) {
+    error = e instanceof Error ? e.message : "データの取得に失敗しました";
+  }
+
+  if (error) {
     return (
       <div className="container mx-auto p-6">
         <div className="space-y-6">
@@ -22,7 +29,7 @@ export default async function DataPage() {
               <CardDescription>データの取得中にエラーが発生しました。</CardDescription>
             </CardHeader>
             <CardContent>
-              <p className="text-destructive">{result.error.message}</p>
+              <p className="text-destructive">{error}</p>
             </CardContent>
           </Card>
         </div>
@@ -30,8 +37,6 @@ export default async function DataPage() {
     );
   }
 
-  const { items: users } = result.value;
-
   return (
     <div className="container mx-auto p-6">
       <div className="space-y-6">
@@ -48,7 +53,7 @@ export default async function DataPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <UserTable users={users} />
+            <UserTableContainer initialData={initialData} />
           </CardContent>
         </Card>
       </div>

package/templates/default/apps/web/src/app/api/rpc/[[...route]]/route.ts

@@ -0,0 +1,31 @@
+/**
+ * route.ts
+ *
+ * Hono APIエントリーポイント
+ * basePath: /api/rpc
+ */
+
+import { Hono } from "hono";
+import { handle } from "hono/vercel";
+import { userRoutes } from "@web/server/presentation/routes/userRoutes";
+
+const app = new Hono().basePath("/api/rpc");
+
+/**
+ * ルート登録
+ */
+const routes = app.route("/users", userRoutes);
+
+/**
+ * 型エクスポート（Hono Client用）
+ */
+export type AppType = typeof routes;
+
+/**
+ * Next.js App Router統合
+ */
+export const GET = handle(app);
+export const POST = handle(app);
+export const PUT = handle(app);
+export const DELETE = handle(app);
+export const PATCH = handle(app);

package/templates/default/apps/web/src/hooks/use-users.ts

@@ -0,0 +1,118 @@
+/**
+ * use-users.ts
+ *
+ * Tanstack Query hooks for user data management
+ */
+
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api-client";
+import type { PaginatedUserList } from "@web/application/use-cases/UserUseCases";
+
+/**
+ * QueryKey factory for users
+ */
+export const userKeys = {
+  all: ["users"] as const,
+  lists: () => [...userKeys.all, "list"] as const,
+  list: (filters: UserFilters) => [...userKeys.lists(), filters] as const,
+  details: () => [...userKeys.all, "detail"] as const,
+  detail: (id: string) => [...userKeys.details(), id] as const,
+};
+
+/**
+ * User filters type
+ */
+export interface UserFilters {
+  page?: number;
+  limit?: number;
+  search?: string;
+  status?: "active" | "inactive";
+  role?: "admin" | "user";
+}
+
+/**
+ * useUsers hook
+ *
+ * ユーザー一覧を取得するhook
+ */
+export function useUsers(
+  filters: UserFilters = {},
+  initialData?: PaginatedUserList
+) {
+  return useQuery({
+    queryKey: userKeys.list(filters),
+    queryFn: async () => {
+      const response = await apiClient.api.rpc.users.$get({
+        query: {
+          page: filters.page?.toString() ?? "1",
+          limit: filters.limit?.toString() ?? "10",
+          search: filters.search,
+          status: filters.status,
+          role: filters.role,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch users");
+      }
+
+      return response.json() as Promise<PaginatedUserList>;
+    },
+    initialData,
+  });
+}
+
+/**
+ * useUser hook
+ *
+ * 特定のユーザーを取得するhook
+ */
+export function useUser(id: string) {
+  return useQuery({
+    queryKey: userKeys.detail(id),
+    queryFn: async () => {
+      const response = await apiClient.api.rpc.users[":id"].$get({
+        param: { id },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch user");
+      }
+
+      return response.json();
+    },
+    enabled: !!id,
+  });
+}
+
+/**
+ * prefetchUsers
+ *
+ * Server Component用のデータ取得関数
+ */
+export async function prefetchUsers(
+  filters: UserFilters = {}
+): Promise<PaginatedUserList> {
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+  const params = new URLSearchParams();
+
+  if (filters.page) params.set("page", filters.page.toString());
+  if (filters.limit) params.set("limit", filters.limit.toString());
+  if (filters.search) params.set("search", filters.search);
+  if (filters.status) params.set("status", filters.status);
+  if (filters.role) params.set("role", filters.role);
+
+  const url = `${baseUrl}/api/rpc/users?${params.toString()}`;
+
+  const response = await fetch(url, {
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to prefetch users");
+  }
+
+  return response.json();
+}

package/templates/default/apps/web/src/lib/api-client.ts

@@ -0,0 +1,18 @@
+/**
+ * api-client.ts
+ *
+ * Hono Client設定
+ * 型安全なAPI呼び出しを提供
+ */
+
+import { hc } from "hono/client";
+import type { AppType } from "@/app/api/rpc/[[...route]]/route";
+
+/**
+ * Hono Client インスタンス
+ *
+ * 使用方法:
+ * - 一覧取得: apiClient.api.rpc.users.$get({ query: { page: "1", limit: "10" } })
+ * - 詳細取得: apiClient.api.rpc.users[":id"].$get({ param: { id: "..." } })
+ */
+export const apiClient = hc<AppType>("/");

package/templates/{turborepo-pandacss → default}/apps/web/tsconfig.json

@@ -10,6 +10,10 @@
       "@/*": [
         "./src/*"
       ],
+      "@web/*": [
+        "./src/*",
+        "./*"
+      ],
       "@/styled-system/*": [
         "./styled-system/*"
       ],
@@ -24,6 +28,7 @@
     "test/matchers.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "server/**/*.ts",
     ".next/types/**/*.ts",
     "../../packages/front-core/src/auth/types/**/*.d.ts"
   ],

package/templates/{turborepo-pandacss → default}/package.json

@@ -45,12 +45,12 @@
     "dotenvx": "dotenvx",
     "env:encrypt": "dotenvx encrypt",
     "env:show": "tsx scripts/env-show.ts",
-    "task:loop": "einja task:loop"
+    "task:loop": "npx @einja/dev-cli task:loop",
+    "einja:sync": "npx @einja/dev-cli sync"
   },
   "devDependencies": {
     "@clack/prompts": "^0.11.0",
     "@dotenvx/dotenvx": "^1.51.4",
-    "@einja/dev-cli": "workspace:*",
     "@types/node": "^25.0.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.0",
@@ -60,5 +60,10 @@
   "volta": {
     "node": "22.16.0",
     "pnpm": "10.14.0"
+  },
+  "dependencies": {
+    "@hono/zod-validator": "^0.7.6",
+    "hono": "^4.11.3",
+    "zod": "^4.3.5"
   }
 }

package/templates/default/packages/server-core/src/domain/validators/user.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+/**
+ * ユーザー一覧取得クエリパラメータスキーマ
+ */
+export const userListQuerySchema = z.object({
+  page: z.string().optional().default("1").transform(Number),
+  limit: z.string().optional().default("10").transform(Number),
+  search: z.string().optional(),
+  status: z.enum(["active", "inactive"]).optional(),
+  role: z.enum(["admin", "user"]).optional(),
+});
+
+export type UserListQuery = z.infer<typeof userListQuerySchema>;
+
+/**
+ * ユーザーIDパスパラメータスキーマ
+ */
+export const userIdParamSchema = z.object({
+  id: z.string().uuid("Invalid user ID format"),
+});
+
+export type UserIdParam = z.infer<typeof userIdParamSchema>;

package/templates/{turborepo-pandacss → default}/pnpm-lock.yaml

@@ -7,6 +7,16 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@hono/zod-validator':
+        specifier: ^0.7.6
+        version: 0.7.6(hono@4.11.3)(zod@4.3.5)
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      zod:
+        specifier: ^4.3.5
+        version: 4.3.5
     devDependencies:
       '@clack/prompts':
         specifier: ^0.11.0
@@ -14,9 +24,6 @@ importers:
       '@dotenvx/dotenvx':
         specifier: ^1.51.4
         version: 1.51.4
-      '@einja/dev-cli':
-        specifier: workspace:*
-        version: link:packages/cli
       '@types/node':
         specifier: ^25.0.3
         version: 25.0.3
@@ -1094,6 +1101,12 @@ packages:
     peerDependencies:
       hono: ^4
 
+  '@hono/zod-validator@0.7.6':
+    resolution: {integrity: sha512-Io1B6d011Gj1KknV4rXYz4le5+5EubcWEU/speUjuw9XMMIaP3n78yXLhjd2A3PXaXaUwEAluOiAyLqhBEJgsw==}
+    peerDependencies:
+      hono: '>=3.9.0'
+      zod: ^3.25.0 || ^4.0.0
+
   '@hookform/resolvers@5.2.2':
     resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
     peerDependencies:
@@ -5205,6 +5218,11 @@ snapshots:
     dependencies:
       hono: 4.11.3
 
+  '@hono/zod-validator@0.7.6(hono@4.11.3)(zod@4.3.5)':
+    dependencies:
+      hono: 4.11.3
+      zod: 4.3.5
+
   '@hookform/resolvers@5.2.2(react-hook-form@7.65.0(react@19.2.0))':
     dependencies:
       '@standard-schema/utils': 0.3.0