create-einja-app 0.1.1

package/templates/turborepo-pandacss/apps/web/src/components/shared/Sidebar.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DashboardIcon,
+  ExitIcon,
+  HamburgerMenuIcon,
+  HomeIcon,
+  PersonIcon,
+  TableIcon,
+} from "@radix-ui/react-icons";
+import { cn } from "{{packageName}}/ui/utils";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface SidebarProps {
+  className?: string;
+  isMobileOpen: boolean;
+  setIsMobileOpen: (open: boolean) => void;
+}
+
+const navigationItems = [
+  {
+    title: "ホーム",
+    href: "/",
+    icon: HomeIcon,
+  },
+  {
+    title: "ダッシュボード",
+    href: "/dashboard",
+    icon: DashboardIcon,
+  },
+  {
+    title: "データ管理",
+    href: "/data",
+    icon: TableIcon,
+  },
+  {
+    title: "プロフィール",
+    href: "/profile",
+    icon: PersonIcon,
+  },
+];
+
+export function Sidebar({ className, isMobileOpen, setIsMobileOpen }: SidebarProps) {
+  const [isDesktopCollapsed, setIsDesktopCollapsed] = useState(() => {
+    // ローカルストレージから状態を復元（SSR対応）
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("sidebar-collapsed");
+      return saved ? JSON.parse(saved) : false;
+    }
+    return false;
+  });
+  const pathname = usePathname();
+
+  // デスクトップの折りたたみ状態をローカルストレージに保存
+  useEffect(() => {
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(isDesktopCollapsed));
+  }, [isDesktopCollapsed]);
+
+  const toggleDesktop = () => setIsDesktopCollapsed(!isDesktopCollapsed);
+
+  const handleSignOut = async () => {
+    await signOut({ callbackUrl: "/signin" });
+  };
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isMobileOpen && (
+        // biome-ignore lint/a11y/useKeyWithClickEvents: サイドメニューのオーバーレイ
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setIsMobileOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          "fixed left-0 top-0 z-50 h-full border-r bg-card text-card-foreground transition-all duration-300 ease-in-out",
+          "md:static md:z-auto",
+          // Mobile状態
+          "md:translate-x-0",
+          isMobileOpen ? "translate-x-0 w-64" : "-translate-x-full w-64",
+          // Desktop状態
+          isDesktopCollapsed ? "md:w-16" : "md:w-64",
+          className
+        )}
+      >
+        <div className="flex h-full flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b p-4">
+            <div className="flex items-center gap-2">
+              {!isDesktopCollapsed && <h2 className="text-lg font-semibold">管理システム</h2>}
+              {/* Desktop collapse toggle - integrated in sidebar header */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hidden md:flex"
+                onClick={toggleDesktop}
+                aria-label={isDesktopCollapsed ? "サイドバーを展開" : "サイドバーを折りたたむ"}
+              >
+                {isDesktopCollapsed ? (
+                  <ChevronRightIcon className="h-4 w-4" />
+                ) : (
+                  <ChevronLeftIcon className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+            {/* Mobile close button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setIsMobileOpen(false)}
+              aria-label="メニューを閉じる"
+            >
+              <ExitIcon className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 space-y-1 p-4">
+            {navigationItems.map((item) => {
+              const isActive = pathname === item.href;
+              const Icon = item.icon;
+
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    "flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground",
+                    isDesktopCollapsed ? "justify-center" : "gap-3"
+                  )}
+                  onClick={() => setIsMobileOpen(false)}
+                  title={isDesktopCollapsed ? item.title : undefined}
+                >
+                  <Icon className="h-4 w-4 flex-shrink-0" />
+                  {(!isDesktopCollapsed || isMobileOpen) && (
+                    <span className="truncate">{item.title}</span>
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+
+          {/* Footer with logout */}
+          <div className="border-t p-4">
+            <Button
+              variant="ghost"
+              className={cn(
+                "w-full transition-all",
+                isDesktopCollapsed ? "justify-center px-2" : "justify-start gap-3"
+              )}
+              onClick={handleSignOut}
+              title={isDesktopCollapsed ? "ログアウト" : undefined}
+            >
+              <ExitIcon className="h-4 w-4 flex-shrink-0" />
+              {(!isDesktopCollapsed || isMobileOpen) && <span>ログアウト</span>}
+            </Button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/shared/header.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
+import { css } from "../../../styled-system/css";
+import { hstack, vstack } from "../../../styled-system/patterns";
+
+interface HeaderProps {
+  user:
+    | {
+        id?: string;
+        name?: string | null;
+        email?: string | null;
+        image?: string | null;
+      }
+    | undefined;
+  onMobileMenuToggle?: () => void;
+}
+
+export function Header({ user, onMobileMenuToggle }: HeaderProps) {
+  return (
+    <header
+      className={css({
+        background: "white",
+        borderBottom: "1px solid {colors.gray.200}",
+        boxShadow: "sm",
+      })}
+    >
+      <div
+        className={css({
+          maxWidth: "7xl",
+          margin: "0 auto",
+          padding: {
+            base: "1rem 1rem",
+            md: "1.25rem 1.5rem",
+            lg: "1.5rem 2rem",
+          },
+        })}
+      >
+        <div
+          className={hstack({
+            justifyContent: "space-between",
+            alignItems: "center",
+          })}
+        >
+          {/* ロゴ・ブランド */}
+          <div className={hstack({ gap: "0.75rem", alignItems: "center" })}>
+            {/* Mobile menu button */}
+            {onMobileMenuToggle && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onMobileMenuToggle}
+                className={css({
+                  display: { base: "flex", md: "none" },
+                  padding: "0.5rem",
+                  marginRight: "0.5rem",
+                })}
+                aria-label="メニューを開く"
+              >
+                <HamburgerMenuIcon className={css({ width: "1.25rem", height: "1.25rem" })} />
+              </Button>
+            )}
+            <div
+              className={css({
+                width: "2.5rem",
+                height: "2.5rem",
+                background: "linear-gradient(135deg, {colors.blue.600}, {colors.purple.600})",
+                borderRadius: "md",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              })}
+            >
+              <span
+                className={css({
+                  fontSize: "lg",
+                  fontWeight: "bold",
+                  color: "white",
+                })}
+              >
+                E
+              </span>
+            </div>
+            <h1
+              className={css({
+                fontSize: "xl",
+                fontWeight: "bold",
+                color: "{colors.gray.900}",
+              })}
+            >
+              Einja Management
+            </h1>
+          </div>
+
+          {/* ユーザー情報 */}
+          <div className={hstack({ gap: "1rem", alignItems: "center" })}>
+            <div
+              className={vstack({
+                gap: "0.125rem",
+                alignItems: "flex-end",
+                display: { base: "none", md: "flex" },
+              })}
+            >
+              {user?.name && (
+                <span
+                  className={css({
+                    fontSize: "sm",
+                    fontWeight: "medium",
+                    color: "{colors.gray.900}",
+                  })}
+                >
+                  {user.name}
+                </span>
+              )}
+              <span
+                className={css({
+                  fontSize: "xs",
+                  color: "{colors.gray.500}",
+                })}
+              >
+                {user?.email}
+              </span>
+            </div>
+
+            {/* ユーザーアバター */}
+            <div
+              className={css({
+                width: "2.5rem",
+                height: "2.5rem",
+                background: user?.image ? "transparent" : "{colors.gray.300}",
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+              })}
+            >
+              {user?.image ? (
+                <img
+                  src={user.image}
+                  alt={user.name || "User"}
+                  className={css({
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                  })}
+                />
+              ) : (
+                <span
+                  className={css({
+                    fontSize: "sm",
+                    fontWeight: "medium",
+                    color: "{colors.gray.600}",
+                  })}
+                >
+                  {user?.name?.charAt(0) || user?.email?.charAt(0) || "U"}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/turborepo-pandacss/apps/web/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "{{packageName}}/ui/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/templates/turborepo-pandacss/apps/web/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/templates/turborepo-pandacss/apps/web/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

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

@@ -0,0 +1,41 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/turborepo-pandacss/apps/web/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };