create-einja-app 0.1.1

package/templates/turborepo-pandacss/apps/web/src/app/globals.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+@layer reset, base, tokens, recipes, utilities;
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/turborepo-pandacss/apps/web/src/app/layout.tsx

@@ -0,0 +1,28 @@
+import "./globals.css";
+import { QueryProvider } from "@/components/providers/query-provider";
+import { AuthProvider } from "@/components/providers/session-provider";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: {
+    default: "管理システム",
+    template: "%s | 管理システム",
+  },
+  description: "管理システム",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ja">
+      <body>
+        <QueryProvider>
+          <AuthProvider>{children}</AuthProvider>
+        </QueryProvider>
+      </body>
+    </html>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/not-found.tsx

@@ -0,0 +1,54 @@
+import { css } from "@/styled-system/css";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div
+      className={css({
+        minH: "100vh",
+        display: "flex",
+        flexDir: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        p: "4",
+        bg: "white",
+      })}
+    >
+      <div
+        className={css({
+          textAlign: "center",
+        })}
+      >
+        <h1 className={css({ mb: "4" })}>404 - Page Not Found</h1>
+        <p
+          className={css({
+            color: "gray.600",
+            mb: "8",
+            fontSize: "lg",
+          })}
+        >
+          申し訳ありません。お探しのページが見つかりませんでした。
+        </p>
+        <Link
+          href="/"
+          className={css({
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            px: "6",
+            py: "3",
+            bg: "blue.500",
+            color: "white",
+            fontWeight: "semibold",
+            rounded: "md",
+            _hover: { bg: "blue.600" },
+            _active: { bg: "blue.700" },
+            transition: "all 0.2s",
+          })}
+        >
+          トップページへ戻る
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/page.module.css

@@ -0,0 +1,165 @@
+.page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}
+
+.main ol {
+  font-family: var(--font-geist-mono);
+  padding-left: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
+.main code {
+  font-family: inherit;
+  background: var(--gray-alpha-100);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+}
+
+.ctas a {
+  appearance: none;
+  border-radius: 128px;
+  height: 48px;
+  padding: 0 20px;
+  border: none;
+  border: 1px solid transparent;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--foreground);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--gray-alpha-200);
+  min-width: 158px;
+}
+
+.footer {
+  grid-row-start: 3;
+  display: flex;
+  gap: 24px;
+}
+
+.footer a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer img {
+  flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    padding-bottom: 80px;
+  }
+
+  .main {
+    align-items: center;
+  }
+
+  .main ol {
+    text-align: center;
+  }
+
+  .ctas {
+    flex-direction: column;
+  }
+
+  .ctas a {
+    font-size: 14px;
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  a.secondary {
+    min-width: auto;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+}

package/templates/turborepo-pandacss/apps/web/src/app/page.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import Home from "./page";
+
+// UserAvatarコンポーネントをモック
+vi.mock("@/components/auth/user-avatar", () => ({
+  UserAvatar: () => <div data-testid="user-avatar">UserAvatar</div>,
+}));
+
+describe("ホームページ", () => {
+  it("管理画面テンプレートのタイトルが表示される", () => {
+    render(<Home />);
+
+    expect(screen.getByText("Einja Management Template")).toBeInTheDocument();
+    expect(screen.getByText("管理画面テンプレート")).toBeInTheDocument();
+  });
+
+  it("技術スタックのセクションが表示される", () => {
+    render(<Home />);
+
+    expect(screen.getByText("🚀 技術スタック")).toBeInTheDocument();
+    expect(screen.getByText("• Next.js 15 (App Router)")).toBeInTheDocument();
+    expect(screen.getByText("• TypeScript (Strict Mode)")).toBeInTheDocument();
+  });
+
+  it("主な機能のセクションが表示される", () => {
+    render(<Home />);
+
+    expect(screen.getByText("✨ 主な機能")).toBeInTheDocument();
+    expect(screen.getByText("• メール・パスワード認証")).toBeInTheDocument();
+  });
+
+  it("セットアップ手順が表示される", () => {
+    render(<Home />);
+
+    expect(screen.getByText("🔧 セットアップ手順")).toBeInTheDocument();
+    expect(screen.getByText("npm install")).toBeInTheDocument();
+  });
+
+  it("ナビゲーションリンクが表示される", () => {
+    render(<Home />);
+
+    const signupLink = screen.getByRole("link", { name: "新規登録" });
+    const signinLink = screen.getByRole("link", { name: "ログイン" });
+
+    expect(signupLink).toBeInTheDocument();
+    expect(signupLink).toHaveAttribute("href", "/signup");
+    expect(signinLink).toBeInTheDocument();
+    expect(signinLink).toHaveAttribute("href", "/signin");
+  });
+});

package/templates/turborepo-pandacss/apps/web/src/app/page.tsx

@@ -0,0 +1,284 @@
+import { UserAvatar } from "@/components/auth/user-avatar";
+import Link from "next/link";
+import React from "react";
+import { css } from "../../styled-system/css";
+
+export default function Home() {
+  return (
+    <main
+      className={css({
+        minHeight: "screen",
+        padding: { base: "4", md: "8" },
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        color: "white",
+      })}
+    >
+      <header
+        className={css({
+          marginBottom: { base: "6", md: "12" },
+        })}
+      >
+        <nav
+          className={css({
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: { base: "4", md: "6" },
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            borderRadius: "lg",
+            backdropFilter: "blur(10px)",
+          })}
+        >
+          <h1
+            className={css({
+              fontSize: { base: "xl", md: "2xl" },
+              fontWeight: "bold",
+            })}
+          >
+            Einja Management Template
+          </h1>
+          <UserAvatar />
+        </nav>
+      </header>
+
+      <div
+        className={css({
+          maxWidth: "4xl",
+          margin: "0 auto",
+          padding: { base: "4", md: "8" },
+        })}
+      >
+        <section
+          className={css({
+            textAlign: "center",
+            marginBottom: { base: "8", md: "12" },
+          })}
+        >
+          <h2
+            className={css({
+              fontSize: { base: "2xl", md: "4xl" },
+              fontWeight: "bold",
+              marginBottom: "4",
+              textShadow: "0 2px 4px rgba(0,0,0,0.3)",
+            })}
+          >
+            管理画面テンプレート
+          </h2>
+          <p
+            className={css({
+              fontSize: { base: "lg", md: "xl" },
+              opacity: "0.9",
+              lineHeight: "relaxed",
+            })}
+          >
+            Next.js 15 + TypeScript + PandaCSS + NextAuth を使用した
+            <br />
+            モダンな管理画面テンプレートです
+          </p>
+        </section>
+
+        <div
+          className={css({
+            display: "grid",
+            gridTemplateColumns: { base: "1fr", md: "repeat(2, 1fr)" },
+            gap: { base: "4", md: "8" },
+            marginBottom: { base: "8", md: "12" },
+          })}
+        >
+          <div
+            className={css({
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+              padding: { base: "4", md: "6" },
+              borderRadius: "lg",
+              backdropFilter: "blur(10px)",
+            })}
+          >
+            <h3
+              className={css({
+                fontSize: { base: "lg", md: "xl" },
+                fontWeight: "semibold",
+                marginBottom: "3",
+              })}
+            >
+              🚀 技術スタック
+            </h3>
+            <ul
+              className={css({
+                fontSize: "sm",
+                lineHeight: "relaxed",
+                opacity: "0.9",
+              })}
+            >
+              <li>• Next.js 15 (App Router)</li>
+              <li>• TypeScript (Strict Mode)</li>
+              <li>• PandaCSS (CSS-in-JS)</li>
+              <li>• NextAuth v5 (認証)</li>
+              <li>• Prisma ORM + PostgreSQL</li>
+              <li>• shadcn/ui コンポーネント</li>
+              <li>• Biome (Linting & Formatting)</li>
+            </ul>
+          </div>
+
+          <div
+            className={css({
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+              padding: { base: "4", md: "6" },
+              borderRadius: "lg",
+              backdropFilter: "blur(10px)",
+            })}
+          >
+            <h3
+              className={css({
+                fontSize: { base: "lg", md: "xl" },
+                fontWeight: "semibold",
+                marginBottom: "3",
+              })}
+            >
+              ✨ 主な機能
+            </h3>
+            <ul
+              className={css({
+                fontSize: "sm",
+                lineHeight: "relaxed",
+                opacity: "0.9",
+              })}
+            >
+              <li>• メール・パスワード認証</li>
+              <li>• ユーザー登録・ログイン</li>
+              <li>• 認証保護されたダッシュボード</li>
+              <li>• レスポンシブデザイン</li>
+              <li>• Docker対応（PostgreSQL）</li>
+              <li>• Vercel デプロイ対応</li>
+              <li>• 拡張可能なアーキテクチャ</li>
+            </ul>
+          </div>
+        </div>
+
+        <section
+          className={css({
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            padding: { base: "4", md: "6" },
+            borderRadius: "lg",
+            backdropFilter: "blur(10px)",
+            marginBottom: { base: "6", md: "8" },
+          })}
+        >
+          <h3
+            className={css({
+              fontSize: { base: "lg", md: "xl" },
+              fontWeight: "semibold",
+              marginBottom: "4",
+            })}
+          >
+            🔧 セットアップ手順
+          </h3>
+          <div
+            className={css({
+              fontSize: "sm",
+              lineHeight: "relaxed",
+              opacity: "0.9",
+            })}
+          >
+            <ol
+              className={css({
+                listStyleType: "decimal",
+                paddingLeft: "4",
+                gap: "2",
+                display: "flex",
+                flexDirection: "column",
+              })}
+            >
+              <li>
+                <strong>依存関係のインストール:</strong> <code>npm install</code>
+              </li>
+              <li>
+                <strong>データベース起動:</strong> <code>docker-compose up postgres -d</code>
+              </li>
+              <li>
+                <strong>環境変数設定:</strong> <code>.env.example</code> を <code>.env</code>{" "}
+                にコピー
+              </li>
+              <li>
+                <strong>データベースセットアップ:</strong> <code>npm run db:push</code>
+              </li>
+              <li>
+                <strong>開発サーバー起動:</strong> <code>npm run dev</code>
+              </li>
+            </ol>
+          </div>
+        </section>
+
+        <div
+          className={css({
+            display: "flex",
+            justifyContent: "center",
+            gap: "4",
+            flexWrap: "wrap",
+          })}
+        >
+          <Link
+            href="/signup"
+            className={css({
+              backgroundColor: "white",
+              color: "#667eea",
+              padding: { base: "3 6", md: "4 8" },
+              borderRadius: "lg",
+              fontWeight: "semibold",
+              fontSize: { base: "sm", md: "base" },
+              textDecoration: "none",
+              transition: "all 0.2s",
+              boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
+              _hover: {
+                transform: "translateY(-2px)",
+                boxShadow: "0 6px 12px rgba(0,0,0,0.15)",
+              },
+            })}
+          >
+            新規登録
+          </Link>
+          <Link
+            href="/signin"
+            className={css({
+              backgroundColor: "transparent",
+              color: "white",
+              padding: { base: "3 6", md: "4 8" },
+              borderRadius: "lg",
+              fontWeight: "semibold",
+              fontSize: { base: "sm", md: "base" },
+              textDecoration: "none",
+              border: "2px solid white",
+              transition: "all 0.2s",
+              _hover: {
+                backgroundColor: "white",
+                color: "#667eea",
+                transform: "translateY(-2px)",
+              },
+            })}
+          >
+            ログイン
+          </Link>
+          <Link
+            href="/dashboard"
+            className={css({
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+              color: "white",
+              padding: { base: "3 6", md: "4 8" },
+              borderRadius: "lg",
+              fontWeight: "semibold",
+              fontSize: { base: "sm", md: "base" },
+              textDecoration: "none",
+              border: "1px solid rgba(255, 255, 255, 0.3)",
+              transition: "all 0.2s",
+              _hover: {
+                backgroundColor: "rgba(255, 255, 255, 0.3)",
+                transform: "translateY(-2px)",
+              },
+            })}
+          >
+            デモを見る
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}