create-einja-app 0.2.17 → 0.2.19

package/templates/default/packages/admin-ui/src/command-menu/index.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { Monitor, Moon, Sun } from "lucide-react";
+import type { NavGroup } from "../layout/types";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../ui/command";
+
+interface CommandMenuProps {
+  navGroups: NavGroup[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface FlatNavItem {
+  title: string;
+  url: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  group: string;
+  parentTitle?: string;
+}
+
+function CommandMenu({ navGroups, open: controlledOpen, onOpenChange }: CommandMenuProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const router = useRouter();
+  const { setTheme } = useTheme();
+
+  // 制御されている場合は親の状態、そうでない場合は内部状態を使用
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const setOpen = onOpenChange || setInternalOpen;
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (onOpenChange) {
+          onOpenChange(!open);
+        } else {
+          setInternalOpen((prev) => !prev);
+        }
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, [open, onOpenChange]);
+
+  const handleSelect = React.useCallback(
+    (url: string) => {
+      setOpen(false);
+      router.push(url);
+    },
+    [router]
+  );
+
+  const handleThemeChange = React.useCallback(
+    (theme: string) => {
+      setOpen(false);
+      setTheme(theme);
+    },
+    [setTheme]
+  );
+
+  // navGroupsをフラット化して全てのページをリストアップ
+  const flatItems = React.useMemo(() => {
+    const items: FlatNavItem[] = [];
+
+    navGroups.forEach((group) => {
+      group.items.forEach((item) => {
+        if (item.url) {
+          // 直接URLを持つアイテム
+          items.push({
+            title: item.title,
+            url: item.url,
+            icon: item.icon,
+            group: group.title,
+          });
+        }
+        // サブアイテムがある場合
+        if (item.items && item.items.length > 0) {
+          item.items.forEach((subItem) => {
+            items.push({
+              title: subItem.title,
+              url: subItem.url,
+              icon: item.icon,
+              group: group.title,
+              parentTitle: item.title,
+            });
+          });
+        }
+      });
+    });
+
+    return items;
+  }, [navGroups]);
+
+  // グループごとに整理
+  const groupedItems = React.useMemo(() => {
+    const groups = new Map<string, FlatNavItem[]>();
+
+    flatItems.forEach((item) => {
+      const key = item.group;
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key)?.push(item);
+    });
+
+    return Array.from(groups.entries());
+  }, [flatItems]);
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        {/* ページナビゲーション */}
+        {groupedItems.map(([groupTitle, items], index) => (
+          <React.Fragment key={groupTitle}>
+            {index > 0 && <CommandSeparator />}
+            <CommandGroup heading={groupTitle}>
+              {items.map((item) => {
+                const displayTitle = item.parentTitle
+                  ? `${item.parentTitle} > ${item.title}`
+                  : item.title;
+
+                return (
+                  <CommandItem
+                    key={item.url}
+                    value={`${groupTitle} ${displayTitle}`}
+                    onSelect={() => handleSelect(item.url)}
+                  >
+                    {item.icon && <item.icon className="mr-2 h-4 w-4" />}
+                    <span>{displayTitle}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </React.Fragment>
+        ))}
+
+        {/* テーマ切り替え */}
+        <CommandSeparator />
+        <CommandGroup heading="Theme">
+          <CommandItem value="theme light" onSelect={() => handleThemeChange("light")}>
+            <Sun className="mr-2 h-4 w-4" />
+            <span>Light</span>
+          </CommandItem>
+          <CommandItem value="theme dark" onSelect={() => handleThemeChange("dark")}>
+            <Moon className="mr-2 h-4 w-4" />
+            <span>Dark</span>
+          </CommandItem>
+          <CommandItem value="theme system" onSelect={() => handleThemeChange("system")}>
+            <Monitor className="mr-2 h-4 w-4" />
+            <span>System</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}
+
+export { CommandMenu };
+export type { CommandMenuProps };

package/templates/default/packages/admin-ui/src/data-table/bulk-actions.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import type { Table } from "@tanstack/react-table";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+type DataTableBulkActionsProps<TData> = {
+  table: Table<TData>;
+  entityName: string;
+  children: React.ReactNode;
+};
+
+/**
+ * A modular toolbar for displaying bulk actions when table rows are selected.
+ *
+ * @template TData The type of data in the table.
+ * @param {object} props The component props.
+ * @param {Table<TData>} props.table The react-table instance.
+ * @param {string} props.entityName The name of the entity being acted upon (e.g., "task", "user").
+ * @param {React.ReactNode} props.children The action buttons to be rendered inside the toolbar.
+ * @returns {React.ReactNode | null} The rendered component or null if no rows are selected.
+ */
+export function DataTableBulkActions<TData>({
+  table,
+  entityName,
+  children,
+}: DataTableBulkActionsProps<TData>): React.ReactNode | null {
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+  const selectedCount = selectedRows.length;
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const [announcement, setAnnouncement] = useState("");
+
+  // Announce selection changes to screen readers
+  useEffect(() => {
+    if (selectedCount > 0) {
+      const message = `${selectedCount} ${entityName}${selectedCount > 1 ? "s" : ""} selected. Bulk actions toolbar is available.`;
+
+      // Use queueMicrotask to defer state update and avoid cascading renders
+      queueMicrotask(() => {
+        setAnnouncement(message);
+      });
+
+      // Clear announcement after a delay
+      const timer = setTimeout(() => setAnnouncement(""), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [selectedCount, entityName]);
+
+  const handleClearSelection = () => {
+    table.resetRowSelection();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    const buttons = toolbarRef.current?.querySelectorAll("button");
+    if (!buttons) return;
+
+    const currentIndex = Array.from(buttons).findIndex(
+      (button) => button === document.activeElement
+    );
+
+    switch (event.key) {
+      case "ArrowRight": {
+        event.preventDefault();
+        const nextIndex = (currentIndex + 1) % buttons.length;
+        buttons[nextIndex]?.focus();
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        const prevIndex =
+          currentIndex === 0 ? buttons.length - 1 : currentIndex - 1;
+        buttons[prevIndex]?.focus();
+        break;
+      }
+      case "Home":
+        event.preventDefault();
+        buttons[0]?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        buttons[buttons.length - 1]?.focus();
+        break;
+      case "Escape": {
+        // Check if the Escape key came from a dropdown trigger or content
+        // We can't check dropdown state because Radix UI closes it before our handler runs
+        const target = event.target as HTMLElement;
+        const activeElement = document.activeElement as HTMLElement;
+
+        // Check if the event target or currently focused element is a dropdown trigger
+        const isFromDropdownTrigger =
+          target?.getAttribute("data-slot") === "dropdown-menu-trigger" ||
+          activeElement?.getAttribute("data-slot") ===
+            "dropdown-menu-trigger" ||
+          target?.closest('[data-slot="dropdown-menu-trigger"]') ||
+          activeElement?.closest('[data-slot="dropdown-menu-trigger"]');
+
+        // Check if the focused element is inside dropdown content (which is portaled)
+        const isFromDropdownContent =
+          activeElement?.closest('[data-slot="dropdown-menu-content"]') ||
+          target?.closest('[data-slot="dropdown-menu-content"]');
+
+        if (isFromDropdownTrigger || isFromDropdownContent) {
+          // Escape was meant for the dropdown - don't clear selection
+          return;
+        }
+
+        // Escape was meant for the toolbar - clear selection
+        event.preventDefault();
+        handleClearSelection();
+        break;
+      }
+    }
+  };
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Live region for screen reader announcements */}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+        role="status"
+      >
+        {announcement}
+      </div>
+
+      <div
+        ref={toolbarRef}
+        role="toolbar"
+        aria-label={`Bulk actions for ${selectedCount} selected ${entityName}${selectedCount > 1 ? "s" : ""}`}
+        aria-describedby="bulk-actions-description"
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "fixed bottom-6 left-1/2 z-[var(--z-header)] -translate-x-1/2 rounded-xl",
+          "transition-all delay-100 duration-300 ease-out hover:scale-105",
+          "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
+        )}
+      >
+        <div
+          className={cn(
+            "p-2 shadow-xl",
+            "rounded-xl border",
+            "bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/60",
+            "flex items-center gap-x-2"
+          )}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleClearSelection}
+                className="size-6 rounded-full"
+                aria-label="Clear selection"
+                title="Clear selection (Escape)"
+              >
+                <X />
+                <span className="sr-only">Clear selection</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Clear selection (Escape)</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Separator
+            className="h-5"
+            orientation="vertical"
+            aria-hidden="true"
+          />
+
+          <div
+            className="flex items-center gap-x-1 text-sm"
+            id="bulk-actions-description"
+          >
+            <Badge
+              variant="default"
+              className="min-w-8 rounded-lg"
+              aria-label={`${selectedCount} selected`}
+            >
+              {selectedCount}
+            </Badge>{" "}
+            <span className="hidden sm:inline">
+              {entityName}
+              {selectedCount > 1 ? "s" : ""}
+            </span>{" "}
+            selected
+          </div>
+
+          <Separator
+            className="h-5"
+            orientation="vertical"
+            aria-hidden="true"
+          />
+
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/default/packages/admin-ui/src/data-table/column-header.tsx

@@ -0,0 +1,73 @@
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronsUpDownIcon,
+  EyeOffIcon,
+} from "lucide-react";
+import type { Column } from "@tanstack/react-table";
+
+import { cn } from "../lib/utils";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDownIcon className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUpIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronsUpDownIcon className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOffIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export { DataTableColumnHeader };

package/templates/default/packages/admin-ui/src/data-table/data-table.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { DataTablePagination } from "./pagination";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  toolbar?: React.ReactNode;
+}
+
+function DataTable<TData, TValue>({
+  columns,
+  data,
+  toolbar,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className="space-y-4">
+      {toolbar}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} colSpan={header.colSpan}>
+                    {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"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  );
+}
+
+export { DataTable };
+export type { DataTableProps };