create-einja-app 0.1.1

package/templates/turborepo-pandacss/apps/web/src/application/use-cases/UserUseCases.test.ts

@@ -0,0 +1,229 @@
+import { failure, isFailure, isSuccess, success } from "{{packageName}}/server-core/core/result";
+import { User } from "{{packageName}}/server-core/domain/entities/User";
+import type { PaginatedResult } from "{{packageName}}/server-core/domain/repository-interfaces/IUserRepository";
+import { buildUserProps, initialize } from "{{packageName}}/server-core/testing";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { userUseCases } from "./UserUseCases";
+
+// UserRepositoryをモック
+vi.mock("@repo/server-core/infrastructure/database/repositories/UserRepository", () => ({
+  userRepository: {
+    search: vi.fn(),
+    findById: vi.fn(),
+    findByEmail: vi.fn(),
+    updateLastLogin: vi.fn(),
+  },
+}));
+
+import { userRepository } from "{{packageName}}/server-core/infrastructure/database/repositories/UserRepository";
+
+describe("UserUseCases", () => {
+  beforeEach(() => {
+    // ユースケーステストではモックリポジトリを使用するため、空のオブジェクトを渡す
+    initialize({ prisma: {} as unknown as Parameters<typeof initialize>[0]["prisma"] });
+    vi.clearAllMocks();
+  });
+
+  describe("list", () => {
+    it("ユーザー一覧をDTO形式で取得できる", async () => {
+      // Given
+      const mockUsers = [
+        new User(await buildUserProps({ id: "user-1", email: "user1@example.com" })),
+        new User(await buildUserProps({ id: "user-2", email: "user2@example.com" })),
+      ];
+      const mockPaginatedResult: PaginatedResult<User> = {
+        items: mockUsers,
+        total: 25,
+        page: 1,
+        limit: 10,
+        totalPages: 3,
+      };
+      vi.mocked(userRepository.search).mockResolvedValue(success(mockPaginatedResult));
+
+      // When
+      const result = await userUseCases.list();
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value.items).toHaveLength(2);
+        expect(result.value.items[0].id).toBe("user-1");
+        expect(result.value.items[0].email).toBe("user1@example.com");
+        expect(result.value.items[0].status).toBe("active");
+        expect(result.value.items[0].role).toBe("user");
+        expect(result.value.total).toBe(25);
+        expect(result.value.page).toBe(1);
+        expect(result.value.limit).toBe(10);
+        expect(result.value.totalPages).toBe(3);
+      }
+    });
+
+    it("nameがnullの場合、空文字に変換される", async () => {
+      // Given
+      const mockUser = new User(await buildUserProps({ id: "user-3", name: null }));
+      const mockPaginatedResult: PaginatedResult<User> = {
+        items: [mockUser],
+        total: 1,
+        page: 1,
+        limit: 10,
+        totalPages: 1,
+      };
+      vi.mocked(userRepository.search).mockResolvedValue(success(mockPaginatedResult));
+
+      // When
+      const result = await userUseCases.list();
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value.items[0].name).toBe("");
+      }
+    });
+
+    it("lastLoginがnullの場合、nullのまま返される", async () => {
+      // Given
+      const mockUser = new User(await buildUserProps({ id: "user-4", lastLogin: null }));
+      const mockPaginatedResult: PaginatedResult<User> = {
+        items: [mockUser],
+        total: 1,
+        page: 1,
+        limit: 10,
+        totalPages: 1,
+      };
+      vi.mocked(userRepository.search).mockResolvedValue(success(mockPaginatedResult));
+
+      // When
+      const result = await userUseCases.list();
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value.items[0].lastLogin).toBeNull();
+      }
+    });
+
+    it("検索条件とページネーションがリポジトリに渡される", async () => {
+      // Given
+      const criteria = { status: "active" as const };
+      const pagination = { page: 2, limit: 20 };
+      vi.mocked(userRepository.search).mockResolvedValue(
+        success({
+          items: [],
+          total: 0,
+          page: 2,
+          limit: 20,
+          totalPages: 0,
+        })
+      );
+
+      // When
+      await userUseCases.list(criteria, pagination);
+
+      // Then
+      expect(userRepository.search).toHaveBeenCalledWith(criteria, pagination);
+    });
+
+    it("Repository失敗時にfailure Resultを返す", async () => {
+      // Given
+      vi.mocked(userRepository.search).mockResolvedValue(failure(new Error("DB error")));
+
+      // When
+      const result = await userUseCases.list();
+
+      // Then
+      expect(isFailure(result)).toBe(true);
+    });
+  });
+
+  describe("getById", () => {
+    it("IDでユーザーをDTO形式で取得できる", async () => {
+      // Given
+      const mockUser = new User(await buildUserProps({ id: "user-123" }));
+      vi.mocked(userRepository.findById).mockResolvedValue(success(mockUser));
+
+      // When
+      const result = await userUseCases.getById("user-123");
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value?.id).toBeDefined();
+        expect(result.value?.email).toBeDefined();
+      }
+    });
+
+    it("見つからない場合はnullを返す", async () => {
+      // Given
+      vi.mocked(userRepository.findById).mockResolvedValue(success(null));
+
+      // When
+      const result = await userUseCases.getById("nonexistent");
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value).toBeNull();
+      }
+    });
+  });
+
+  describe("getByEmail", () => {
+    it("メールアドレスでユーザーをDTO形式で取得できる", async () => {
+      // Given
+      const mockUser = new User(
+        await buildUserProps({ id: "user-456", email: "test@example.com" })
+      );
+      vi.mocked(userRepository.findByEmail).mockResolvedValue(success(mockUser));
+
+      // When
+      const result = await userUseCases.getByEmail("test@example.com");
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value?.email).toBe("test@example.com");
+      }
+    });
+
+    it("見つからない場合はnullを返す", async () => {
+      // Given
+      vi.mocked(userRepository.findByEmail).mockResolvedValue(success(null));
+
+      // When
+      const result = await userUseCases.getByEmail("notfound@example.com");
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      if (isSuccess(result)) {
+        expect(result.value).toBeNull();
+      }
+    });
+  });
+
+  describe("updateLastLogin", () => {
+    it("最終ログイン日時を更新できる", async () => {
+      // Given
+      vi.mocked(userRepository.updateLastLogin).mockResolvedValue(success(undefined));
+
+      // When
+      const result = await userUseCases.updateLastLogin("user-123");
+
+      // Then
+      expect(isSuccess(result)).toBe(true);
+      expect(userRepository.updateLastLogin).toHaveBeenCalledWith("user-123", expect.any(Date));
+    });
+
+    it("Repository失敗時にfailure Resultを返す", async () => {
+      // Given
+      vi.mocked(userRepository.updateLastLogin).mockResolvedValue(
+        failure(new Error("Update failed"))
+      );
+
+      // When
+      const result = await userUseCases.updateLastLogin("user-123");
+
+      // Then
+      expect(isFailure(result)).toBe(true);
+    });
+  });
+});

package/templates/turborepo-pandacss/apps/web/src/application/use-cases/UserUseCases.ts

@@ -0,0 +1,115 @@
+/**
+ * UserUseCases
+ *
+ * ユーザー関連のユースケース。
+ * Domain層とInfrastructure層を組み合わせてビジネスロジックを実行。
+ */
+
+import { type Result, failure, success } from "{{packageName}}/server-core/core/result";
+import type { User } from "{{packageName}}/server-core/domain/entities/User";
+import type {
+  PaginatedResult,
+  PaginationOptions,
+  UserSearchCriteria,
+} from "{{packageName}}/server-core/domain/repository-interfaces/IUserRepository";
+import { userRepository } from "{{packageName}}/server-core/infrastructure/database/repositories/UserRepository";
+
+/**
+ * ユーザー一覧表示用のDTO
+ */
+export interface UserListItem {
+  readonly id: string;
+  readonly name: string;
+  readonly email: string;
+  readonly status: "active" | "inactive" | "pending";
+  readonly role: "admin" | "user" | "moderator";
+  readonly createdAt: string;
+  readonly lastLogin: string | null;
+}
+
+/**
+ * ページネーション付きユーザー一覧のDTO
+ */
+export interface PaginatedUserList {
+  readonly items: readonly UserListItem[];
+  readonly total: number;
+  readonly page: number;
+  readonly limit: number;
+  readonly totalPages: number;
+}
+
+/**
+ * User Entity を UserListItem DTO に変換
+ */
+function toUserListItem(user: User): UserListItem {
+  return {
+    id: user.id,
+    name: user.name ?? "",
+    email: user.email,
+    status: user.status,
+    role: user.role,
+    createdAt: user.createdAt.toISOString(),
+    lastLogin: user.lastLogin?.toISOString() ?? null,
+  };
+}
+
+/**
+ * PaginatedResult<User> を PaginatedUserList に変換
+ */
+function toPaginatedUserList(result: PaginatedResult<User>): PaginatedUserList {
+  return {
+    items: result.items.map(toUserListItem),
+    total: result.total,
+    page: result.page,
+    limit: result.limit,
+    totalPages: result.totalPages,
+  };
+}
+
+/**
+ * ユーザー関連のユースケース
+ */
+export const userUseCases = {
+  /**
+   * ユーザー一覧を取得
+   */
+  async list(
+    criteria?: UserSearchCriteria,
+    pagination?: PaginationOptions
+  ): Promise<Result<PaginatedUserList, Error>> {
+    const result = await userRepository.search(criteria ?? {}, pagination);
+    if (!result.isSuccess) {
+      return failure(result.error);
+    }
+    return success(toPaginatedUserList(result.value));
+  },
+
+  /**
+   * IDでユーザーを取得
+   */
+  async getById(id: string): Promise<Result<UserListItem | null, Error>> {
+    const result = await userRepository.findById(id);
+    if (!result.isSuccess) {
+      return failure(result.error);
+    }
+    return success(result.value ? toUserListItem(result.value) : null);
+  },
+
+  /**
+   * メールアドレスでユーザーを取得
+   */
+  async getByEmail(email: string): Promise<Result<UserListItem | null, Error>> {
+    const result = await userRepository.findByEmail(email);
+    if (!result.isSuccess) {
+      return failure(result.error);
+    }
+    return success(result.value ? toUserListItem(result.value) : null);
+  },
+
+  /**
+   * 最終ログイン日時を更新
+   */
+  async updateLastLogin(id: string): Promise<Result<void, Error>> {
+    return userRepository.updateLastLogin(id, new Date());
+  },
+};

package/templates/turborepo-pandacss/apps/web/src/components/auth/login-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+
+interface LoginButtonProps {
+  provider?: "credentials"; // | "google" | "github" - add when OAuth is enabled
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function LoginButton({
+  provider = "credentials",
+  children,
+  className = "",
+}: LoginButtonProps) {
+  const handleSignIn = async () => {
+    await signIn(provider, { callbackUrl: "/" });
+  };
+
+  const defaultText = {
+    credentials: "Sign in with Email",
+    // google: "Sign in with Google", // add when needed
+    // github: "Sign in with GitHub", // add when needed
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleSignIn}
+      className={`px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors ${className}`}
+    >
+      {children || defaultText[provider]}
+    </button>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/auth/logout-button.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+
+interface LogoutButtonProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function LogoutButton({ children = "Sign out", className = "" }: LogoutButtonProps) {
+  const handleSignOut = async () => {
+    await signOut({ callbackUrl: "/" });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleSignOut}
+      className={`px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors ${className}`}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/auth/user-avatar.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import type { Session } from "next-auth";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { UserAvatar } from "./user-avatar";
+
+// next-authのuseSessionをモック
+vi.mock("next-auth/react", () => ({
+  useSession: vi.fn(),
+}));
+
+// LoginButtonコンポーネントをモック
+vi.mock("./login-button", () => ({
+  LoginButton: () => <button type="button">ログイン</button>,
+}));
+
+// LogoutButtonコンポーネントをモック
+vi.mock("./logout-button", () => ({
+  LogoutButton: () => <button type="button">ログアウト</button>,
+}));
+
+describe("UserAvatar", () => {
+  it("認証されていない場合ログインボタンを表示", async () => {
+    const { useSession } = await import("next-auth/react");
+    vi.mocked(useSession).mockReturnValue({
+      data: null,
+      status: "unauthenticated",
+      update: vi.fn(),
+    });
+
+    render(<UserAvatar />);
+
+    expect(screen.getByText("ログイン")).toBeInTheDocument();
+  });
+
+  it("認証されている場合ユーザー情報を表示", async () => {
+    const { useSession } = await import("next-auth/react");
+    vi.mocked(useSession).mockReturnValue({
+      data: {
+        user: {
+          name: "テストユーザー",
+          email: "test@example.com",
+        },
+      } as Session,
+      status: "authenticated",
+      update: vi.fn(),
+    });
+
+    render(<UserAvatar />);
+
+    expect(screen.getByText("テストユーザー")).toBeInTheDocument();
+    expect(screen.getByText("test@example.com")).toBeInTheDocument();
+  });
+
+  it("ローディング状態でローディング表示をする", async () => {
+    const { useSession } = await import("next-auth/react");
+    vi.mocked(useSession).mockReturnValue({
+      data: null,
+      status: "loading",
+      update: vi.fn(),
+    });
+
+    const { container } = render(<UserAvatar />);
+
+    const loadingElement = container.querySelector(".animate-pulse");
+    expect(loadingElement).toBeInTheDocument();
+  });
+});

package/templates/turborepo-pandacss/apps/web/src/components/auth/user-avatar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import React from "react";
+import { LoginButton } from "./login-button";
+import { LogoutButton } from "./logout-button";
+
+interface UserAvatarProps {
+  className?: string;
+}
+
+export function UserAvatar({ className = "" }: UserAvatarProps) {
+  const { data: session, status } = useSession();
+
+  if (status === "loading") {
+    return <div className={`animate-pulse bg-gray-300 rounded-full w-8 h-8 ${className}`} />;
+  }
+
+  if (!session) {
+    return (
+      <div className={`flex gap-2 ${className}`}>
+        <LoginButton provider="credentials" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center gap-3 ${className}`}>
+      {session.user?.image && (
+        <img
+          src={session.user.image}
+          alt={session.user.name || "User"}
+          className="w-8 h-8 rounded-full"
+        />
+      )}
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{session.user?.name || "User"}</span>
+        <span className="text-xs text-gray-500">{session.user?.email}</span>
+      </div>
+      <LogoutButton />
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/dashboard/dashboard-stats.tsx

@@ -0,0 +1,128 @@
+import { css } from "../../../styled-system/css";
+import { hstack, vstack } from "../../../styled-system/patterns";
+
+const stats = [
+  {
+    title: "総プロジェクト数",
+    value: "24",
+    change: "+12%",
+    changeType: "increase" as const,
+    icon: "📊",
+  },
+  {
+    title: "アクティブユーザー",
+    value: "1,234",
+    change: "+23%",
+    changeType: "increase" as const,
+    icon: "👥",
+  },
+  {
+    title: "今月の売上",
+    value: "¥2,480,000",
+    change: "+8%",
+    changeType: "increase" as const,
+    icon: "💰",
+  },
+  {
+    title: "システム稼働率",
+    value: "99.9%",
+    change: "-0.1%",
+    changeType: "decrease" as const,
+    icon: "⚡",
+  },
+];
+
+export function DashboardStats() {
+  return (
+    <div
+      className={css({
+        display: "grid",
+        gridTemplateColumns: {
+          base: "1fr",
+          sm: "repeat(2, 1fr)",
+          lg: "repeat(4, 1fr)",
+        },
+        gap: "1.5rem",
+      })}
+    >
+      {stats.map((stat) => (
+        <div
+          key={stat.title}
+          className={css({
+            background: "white",
+            borderRadius: "lg",
+            padding: { base: "1.25rem", md: "1.5rem", lg: "1.75rem" },
+            boxShadow: "sm",
+            border: "1px solid {colors.gray.200}",
+            transition: "all 0.2s",
+            _hover: {
+              boxShadow: "md",
+              transform: "translateY(-2px)",
+            },
+          })}
+        >
+          <div className={vstack({ gap: "1rem", alignItems: "flex-start" })}>
+            {/* アイコンとタイトル */}
+            <div className={hstack({ gap: "0.75rem", alignItems: "center" })}>
+              <span
+                className={css({
+                  fontSize: "1.5rem",
+                })}
+              >
+                {stat.icon}
+              </span>
+              <h3
+                className={css({
+                  fontSize: "sm",
+                  fontWeight: "medium",
+                  color: "{colors.gray.600}",
+                  lineHeight: "tight",
+                })}
+              >
+                {stat.title}
+              </h3>
+            </div>
+
+            {/* 値と変化率 */}
+            <div className={vstack({ gap: "0.5rem", alignItems: "flex-start" })}>
+              <p
+                className={css({
+                  fontSize: "2xl",
+                  fontWeight: "bold",
+                  color: "{colors.gray.900}",
+                  lineHeight: "none",
+                })}
+              >
+                {stat.value}
+              </p>
+              <div className={hstack({ gap: "0.25rem", alignItems: "center" })}>
+                <span
+                  className={css({
+                    fontSize: "xs",
+                    fontWeight: "medium",
+                    color:
+                      stat.changeType === "increase" ? "{colors.green.600}" : "{colors.red.600}",
+                    background:
+                      stat.changeType === "increase" ? "{colors.green.100}" : "{colors.red.100}",
+                    padding: "0.125rem 0.375rem",
+                    borderRadius: "full",
+                  })}
+                >
+                  {stat.changeType === "increase" ? "↗" : "↘"} {stat.change}
+                </span>
+                <span
+                  className={css({
+                    fontSize: "xs",
+                    color: "{colors.gray.500}",
+                  })}
+                >
+                  前月比
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/providers/query-provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 60 * 1000, // 5分
+            gcTime: 10 * 60 * 1000, // 10分
+            retry: 1,
+            refetchOnWindowFocus: false,
+          },
+          mutations: {
+            retry: false,
+          },
+        },
+      })
+  );
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

package/templates/turborepo-pandacss/apps/web/src/components/providers/session-provider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import type { ReactNode } from "react";
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  return <SessionProvider>{children}</SessionProvider>;
+}