create-einja-app 0.1.1

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

@@ -0,0 +1,101 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,56 @@
+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 buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,75 @@
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

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

@@ -0,0 +1,29 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "{{packageName}}/ui/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

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

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Input } from "./input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  searchKey?: string;
+  searchPlaceholder?: string;
+  enableColumnVisibility?: boolean;
+  enablePagination?: boolean;
+  pageSize?: number;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = "フィルター...",
+  enableColumnVisibility = true,
+  enablePagination = true,
+  pageSize = 10,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+    initialState: {
+      pagination: enablePagination
+        ? {
+            pageSize: pageSize,
+          }
+        : undefined,
+    },
+  });
+
+  return (
+    <div className="w-full">
+      {/* ツールバー */}
+      <div className="flex items-center py-4">
+        {searchKey && (
+          <Input
+            placeholder={searchPlaceholder}
+            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+            onChange={(event) => table.getColumn(searchKey)?.setFilterValue(event.target.value)}
+            className="max-w-sm"
+          />
+        )}
+        {enableColumnVisibility && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                列 <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+
+      {/* テーブル */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  データがありません。
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* ページネーション */}
+      {enablePagination && (
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} 行が選択されています。
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              前へ
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              次へ
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,210 @@
+"use client";
+
+import { createContext, useCallback, useContext, useState } from "react";
+import type React from "react";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+interface DialogOptions {
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "destructive";
+  showCloseButton?: boolean;
+}
+
+interface DialogState {
+  isOpen: boolean;
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "destructive";
+  showCloseButton?: boolean;
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  content?: React.ReactNode;
+}
+
+interface DialogContextType {
+  openDialog: (
+    options: DialogOptions & {
+      onConfirm?: () => void | Promise<void>;
+      onCancel?: () => void;
+    }
+  ) => void;
+  openCustomDialog: (content: React.ReactNode, options?: DialogOptions) => void;
+  closeDialog: () => void;
+  confirm: (
+    options: Omit<DialogOptions, "cancelText" | "confirmText"> & {
+      message: string;
+      confirmText?: string;
+      cancelText?: string;
+    }
+  ) => Promise<boolean>;
+}
+
+const DialogContext = createContext<DialogContextType | undefined>(undefined);
+
+export function DialogProvider({ children }: { children: React.ReactNode }) {
+  const [dialogState, setDialogState] = useState<DialogState>({
+    isOpen: false,
+    showCloseButton: true,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const openDialog = useCallback(
+    (
+      options: DialogOptions & {
+        onConfirm?: () => void | Promise<void>;
+        onCancel?: () => void;
+      }
+    ) => {
+      setDialogState({
+        isOpen: true,
+        title: options.title,
+        description: options.description,
+        confirmText: options.confirmText || "OK",
+        cancelText: options.cancelText || "キャンセル",
+        variant: options.variant || "default",
+        showCloseButton: options.showCloseButton ?? true,
+        onConfirm: options.onConfirm,
+        onCancel: options.onCancel,
+      });
+    },
+    []
+  );
+
+  const openCustomDialog = useCallback((content: React.ReactNode, options?: DialogOptions) => {
+    setDialogState({
+      isOpen: true,
+      content,
+      showCloseButton: options?.showCloseButton ?? true,
+      variant: options?.variant || "default",
+    });
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setDialogState((prev) => ({ ...prev, isOpen: false }));
+    setIsLoading(false);
+  }, []);
+
+  const confirm = useCallback(
+    (
+      options: Omit<DialogOptions, "cancelText" | "confirmText"> & {
+        message: string;
+        confirmText?: string;
+        cancelText?: string;
+      }
+    ) => {
+      return new Promise<boolean>((resolve) => {
+        setDialogState({
+          isOpen: true,
+          title: options.title || "確認",
+          description: options.message,
+          confirmText: options.confirmText || "OK",
+          cancelText: options.cancelText || "キャンセル",
+          variant: options.variant || "default",
+          showCloseButton: options.showCloseButton ?? true,
+          onConfirm: () => {
+            resolve(true);
+            closeDialog();
+          },
+          onCancel: () => {
+            resolve(false);
+            closeDialog();
+          },
+        });
+      });
+    },
+    [closeDialog]
+  );
+
+  const handleConfirm = async () => {
+    if (dialogState.onConfirm) {
+      setIsLoading(true);
+      try {
+        await dialogState.onConfirm();
+        closeDialog();
+      } catch (error) {
+        console.error("Dialog confirm error:", error);
+        setIsLoading(false);
+      }
+    } else {
+      closeDialog();
+    }
+  };
+
+  const handleCancel = () => {
+    if (dialogState.onCancel) {
+      dialogState.onCancel();
+    }
+    closeDialog();
+  };
+
+  const contextValue: DialogContextType = {
+    openDialog,
+    openCustomDialog,
+    closeDialog,
+    confirm,
+  };
+
+  return (
+    <DialogContext.Provider value={contextValue}>
+      {children}
+      <Dialog open={dialogState.isOpen} onOpenChange={(open: boolean) => !open && closeDialog()}>
+        <DialogContent showCloseButton={dialogState.showCloseButton}>
+          {dialogState.content ? (
+            dialogState.content
+          ) : (
+            <>
+              {dialogState.title && (
+                <DialogHeader>
+                  <DialogTitle>{dialogState.title}</DialogTitle>
+                  {dialogState.description && (
+                    <DialogDescription>{dialogState.description}</DialogDescription>
+                  )}
+                </DialogHeader>
+              )}
+
+              {(dialogState.onConfirm || dialogState.onCancel) && (
+                <DialogFooter>
+                  {dialogState.onCancel && (
+                    <Button variant="outline" onClick={handleCancel} disabled={isLoading}>
+                      {dialogState.cancelText}
+                    </Button>
+                  )}
+                  {dialogState.onConfirm && (
+                    <Button
+                      variant={dialogState.variant === "destructive" ? "destructive" : "default"}
+                      onClick={handleConfirm}
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "処理中..." : dialogState.confirmText}
+                    </Button>
+                  )}
+                </DialogFooter>
+              )}
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </DialogContext.Provider>
+  );
+}
+
+export function useDialog() {
+  const context = useContext(DialogContext);
+  if (context === undefined) {
+    throw new Error("useDialog must be used within a DialogProvider");
+  }
+  return context;
+}