create-einja-app 0.2.17 → 0.2.19

package/templates/default/apps/admin/src/hooks/use-table-url-state.ts

@@ -0,0 +1,243 @@
+"use client";
+
+import type { ColumnFiltersState, OnChangeFn, PaginationState } from "@tanstack/react-table";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+type SearchRecord = Record<string, unknown>;
+
+type UseTableUrlStateParams = {
+  pagination?: {
+    pageKey?: string;
+    pageSizeKey?: string;
+    defaultPage?: number;
+    defaultPageSize?: number;
+  };
+  globalFilter?: {
+    enabled?: boolean;
+    key?: string;
+    trim?: boolean;
+  };
+  columnFilters?: Array<
+    | {
+        columnId: string;
+        searchKey: string;
+        type?: "string";
+        // Optional transformers for custom types
+        serialize?: (value: unknown) => unknown;
+        deserialize?: (value: unknown) => unknown;
+      }
+    | {
+        columnId: string;
+        searchKey: string;
+        type: "array";
+        serialize?: (value: unknown) => unknown;
+        deserialize?: (value: unknown) => unknown;
+      }
+  >;
+};
+
+type UseTableUrlStateReturn = {
+  // Global filter
+  globalFilter?: string;
+  onGlobalFilterChange?: OnChangeFn<string>;
+  // Column filters
+  columnFilters: ColumnFiltersState;
+  onColumnFiltersChange: OnChangeFn<ColumnFiltersState>;
+  // Pagination
+  pagination: PaginationState;
+  onPaginationChange: OnChangeFn<PaginationState>;
+  // Helpers
+  ensurePageInRange: (pageCount: number, opts?: { resetTo?: "first" | "last" }) => void;
+};
+
+export function useTableUrlState(params: UseTableUrlStateParams): UseTableUrlStateReturn {
+  const {
+    pagination: paginationCfg,
+    globalFilter: globalFilterCfg,
+    columnFilters: columnFiltersCfg = [],
+  } = params;
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const pageKey = paginationCfg?.pageKey ?? ("page" as string);
+  const pageSizeKey = paginationCfg?.pageSizeKey ?? ("pageSize" as string);
+  const defaultPage = paginationCfg?.defaultPage ?? 1;
+  const defaultPageSize = paginationCfg?.defaultPageSize ?? 10;
+
+  const globalFilterKey = globalFilterCfg?.key ?? ("filter" as string);
+  const globalFilterEnabled = globalFilterCfg?.enabled ?? true;
+  const trimGlobal = globalFilterCfg?.trim ?? true;
+
+  // Convert URLSearchParams to SearchRecord
+  const search = useMemo(() => {
+    const record: SearchRecord = {};
+    searchParams.forEach((value, key) => {
+      // Try to parse as number
+      const num = Number(value);
+      if (!Number.isNaN(num)) {
+        record[key] = num;
+      } else {
+        // Try to parse as JSON (for arrays)
+        try {
+          record[key] = JSON.parse(value);
+        } catch {
+          record[key] = value;
+        }
+      }
+    });
+    return record;
+  }, [searchParams]);
+
+  // Navigate helper
+  const navigate = useCallback(
+    (opts: {
+      search: true | SearchRecord | ((prev: SearchRecord) => Partial<SearchRecord> | SearchRecord);
+      replace?: boolean;
+    }) => {
+      const nextSearch = typeof opts.search === "function" ? opts.search(search) : opts.search;
+
+      if (nextSearch === true) return;
+
+      const params = new URLSearchParams();
+      Object.entries(nextSearch).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          if (typeof value === "object") {
+            params.set(key, JSON.stringify(value));
+          } else {
+            params.set(key, String(value));
+          }
+        }
+      });
+
+      const url = params.toString() ? `?${params.toString()}` : "";
+      if (opts.replace) {
+        router.replace(url);
+      } else {
+        router.push(url);
+      }
+    },
+    [router, search]
+  );
+
+  // Build initial column filters from the current search params
+  const initialColumnFilters: ColumnFiltersState = useMemo(() => {
+    const collected: ColumnFiltersState = [];
+    for (const cfg of columnFiltersCfg) {
+      const raw = (search as SearchRecord)[cfg.searchKey];
+      const deserialize = cfg.deserialize ?? ((v: unknown) => v);
+      if (cfg.type === "string") {
+        const value = (deserialize(raw) as string) ?? "";
+        if (typeof value === "string" && value.trim() !== "") {
+          collected.push({ id: cfg.columnId, value });
+        }
+      } else {
+        // default to array type
+        const value = (deserialize(raw) as unknown[]) ?? [];
+        if (Array.isArray(value) && value.length > 0) {
+          collected.push({ id: cfg.columnId, value });
+        }
+      }
+    }
+    return collected;
+  }, [columnFiltersCfg, search]);
+
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(initialColumnFilters);
+
+  const pagination: PaginationState = useMemo(() => {
+    const rawPage = (search as SearchRecord)[pageKey];
+    const rawPageSize = (search as SearchRecord)[pageSizeKey];
+    const pageNum = typeof rawPage === "number" ? rawPage : defaultPage;
+    const pageSizeNum = typeof rawPageSize === "number" ? rawPageSize : defaultPageSize;
+    return { pageIndex: Math.max(0, pageNum - 1), pageSize: pageSizeNum };
+  }, [search, pageKey, pageSizeKey, defaultPage, defaultPageSize]);
+
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    const nextPage = next.pageIndex + 1;
+    const nextPageSize = next.pageSize;
+    navigate({
+      search: (prev) => ({
+        ...(prev as SearchRecord),
+        [pageKey]: nextPage <= defaultPage ? undefined : nextPage,
+        [pageSizeKey]: nextPageSize === defaultPageSize ? undefined : nextPageSize,
+      }),
+    });
+  };
+
+  const [globalFilter, setGlobalFilter] = useState<string | undefined>(() => {
+    if (!globalFilterEnabled) return undefined;
+    const raw = (search as SearchRecord)[globalFilterKey];
+    return typeof raw === "string" ? raw : "";
+  });
+
+  const onGlobalFilterChange: OnChangeFn<string> | undefined = globalFilterEnabled
+    ? (updater) => {
+        const next = typeof updater === "function" ? updater(globalFilter ?? "") : updater;
+        const value = trimGlobal ? next.trim() : next;
+        setGlobalFilter(value);
+        navigate({
+          search: (prev) => ({
+            ...(prev as SearchRecord),
+            [pageKey]: undefined,
+            [globalFilterKey]: value ? value : undefined,
+          }),
+        });
+      }
+    : undefined;
+
+  const onColumnFiltersChange: OnChangeFn<ColumnFiltersState> = (updater) => {
+    const next = typeof updater === "function" ? updater(columnFilters) : updater;
+    setColumnFilters(next);
+
+    const patch: Record<string, unknown> = {};
+
+    for (const cfg of columnFiltersCfg) {
+      const found = next.find((f) => f.id === cfg.columnId);
+      const serialize = cfg.serialize ?? ((v: unknown) => v);
+      if (cfg.type === "string") {
+        const value = typeof found?.value === "string" ? (found.value as string) : "";
+        patch[cfg.searchKey] = value.trim() !== "" ? serialize(value) : undefined;
+      } else {
+        const value = Array.isArray(found?.value) ? (found?.value as unknown[]) : [];
+        patch[cfg.searchKey] = value.length > 0 ? serialize(value) : undefined;
+      }
+    }
+
+    navigate({
+      search: (prev) => ({
+        ...(prev as SearchRecord),
+        [pageKey]: undefined,
+        ...patch,
+      }),
+    });
+  };
+
+  const ensurePageInRange = (
+    pageCount: number,
+    opts: { resetTo?: "first" | "last" } = { resetTo: "first" }
+  ) => {
+    const currentPage = (search as SearchRecord)[pageKey];
+    const pageNum = typeof currentPage === "number" ? currentPage : defaultPage;
+    if (pageCount > 0 && pageNum > pageCount) {
+      navigate({
+        replace: true,
+        search: (prev) => ({
+          ...(prev as SearchRecord),
+          [pageKey]: opts.resetTo === "last" ? pageCount : undefined,
+        }),
+      });
+    }
+  };
+
+  return {
+    globalFilter: globalFilterEnabled ? (globalFilter ?? "") : undefined,
+    onGlobalFilterChange,
+    columnFilters,
+    onColumnFiltersChange,
+    pagination,
+    onPaginationChange,
+    ensurePageInRange,
+  };
+}

package/templates/default/apps/admin/src/lib/show-submitted-data.tsx

@@ -0,0 +1,12 @@
+import { toast } from "sonner";
+
+export function showSubmittedData(data: unknown, title = "You submitted the following values:") {
+  toast.message(title, {
+    description: (
+      // w-[340px]
+      <pre className="mt-2 w-full overflow-x-auto rounded-md bg-slate-950 p-4">
+        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+      </pre>
+    ),
+  });
+}

package/templates/default/apps/admin/src/types/table.d.ts

@@ -0,0 +1,9 @@
+import "@tanstack/react-table";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData, TValue> {
+    className?: string;
+    thClassName?: string;
+    tdClassName?: string;
+  }
+}

package/templates/default/apps/admin/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "extends": "@repo/config/typescript",
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@admin/*": [
+        "./src/*",
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx"
+  ]
+}

package/templates/default/apps/web/next.config.ts

@@ -5,6 +5,7 @@ const nextConfig: NextConfig = {
     ignoreDuringBuilds: true,
   },
   output: "standalone",
+  transpilePackages: ["@repo/ui"],
 };
 
 export default nextConfig;

package/templates/default/apps/web/package.json

@@ -6,8 +6,6 @@
     "dev": "rm -rf .next && next dev --turbopack --port ${PORT_WEB:-3000}",
     "build": "next build",
     "start": "next start",
-    "generate": "panda codegen",
-    "panda": "panda codegen",
     "lint": "biome check .",
     "lint:fix": "biome check --write",
     "format": "biome format .",
@@ -23,28 +21,11 @@
     "@repo/server-core": "workspace:*",
     "@repo/ui": "workspace:*",
     "@hookform/resolvers": "^5.1.1",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.10",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "bcryptjs": "^3.0.2",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.523.0",
     "next": "15.3.3",
@@ -54,16 +35,13 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.59.0",
-    "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.10",
-    "vaul": "^1.1.2",
     "zod": "^3.25.67"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@repo/config": "workspace:*",
-    "@pandacss/dev": "^0.53.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/bcryptjs": "^2.4.6",

package/templates/default/apps/web/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    "@pandacss/dev/postcss": {},
     "@tailwindcss/postcss": {},
   },
 };

package/templates/default/apps/web/src/app/(authenticated)/dashboard/page.tsx

@@ -1,30 +1,14 @@
 import { DashboardStats } from "@/components/dashboard/dashboard-stats";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { H1, P } from "@/components/ui/typography";
 import { auth } from "@/lib/auth";
-import { css } from "../../../../styled-system/css";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/ui/card";
+import { H1, P } from "{{packageName}}/ui/typography";
 
 export default async function DashboardPage() {
   const session = await auth();
 
   return (
-    <div
-      className={css({
-        minHeight: "100vh",
-        background: "linear-gradient(135deg, {colors.gray.50} 0%, {colors.blue.50} 100%)",
-      })}
-    >
-      <main
-        className={css({
-          maxWidth: "7xl",
-          margin: "0 auto",
-          padding: {
-            base: "1.5rem 1rem",
-            md: "2rem 1.5rem",
-            lg: "2.5rem 2rem",
-          },
-        })}
-      >
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <main className="max-w-7xl mx-auto px-4 py-6 md:px-6 md:py-8 lg:px-8 lg:py-10">
         <div className="space-y-8">
           {/* ページタイトル */}
           <div className="space-y-2">

package/templates/default/apps/web/src/app/(authenticated)/data/_components/UserTable.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import type { UserListItem } from "@/application/use-cases/UserUseCases";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/ui/data-table";
+import { Badge } from "{{packageName}}/ui/badge";
+import { Button } from "{{packageName}}/ui/button";
+import { DataTable } from "{{packageName}}/ui/data-table";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "{{packageName}}/ui/dropdown-menu";
 import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, Edit, Eye, MoreHorizontal, Trash2 } from "lucide-react";
 

package/templates/default/apps/web/src/app/(authenticated)/data/page.tsx

@@ -1,6 +1,6 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { prefetchUsers } from "@/hooks/api/prefetch-users";
 import type { PaginatedUserList } from "@/shared/schemas/user";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/ui/card";
 import { UserTableContainer } from "./_components/UserTableContainer";
 
 export default async function DataPage() {

package/templates/default/apps/web/src/app/(authenticated)/profile/page.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { auth } from "@/lib/auth";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/ui/card";
 
 export default async function ProfilePage() {
   const session = await auth();

package/templates/default/apps/web/src/app/error.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { css } from "@/styled-system/css";
-import { flex } from "@/styled-system/patterns";
-
 type ErrorPageProps = {
   error: Error & { digest?: string };
   reset: () => void;
@@ -14,89 +11,30 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
   };
 
   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" })}>エラーが発生しました</h1>
-        <p
-          className={css({
-            color: "gray.600",
-            mb: "8",
-            fontSize: "lg",
-          })}
-        >
+    <div className="min-h-screen flex flex-col items-center justify-center p-4 bg-white">
+      <div className="text-center">
+        <h1 className="mb-4">エラーが発生しました</h1>
+        <p className="text-gray-600 mb-8 text-lg">
           申し訳ありません。予期せぬエラーが発生しました。
         </p>
-        <div className={flex({ gap: "4", justify: "center" })}>
+        <div className="flex gap-4 justify-center">
           <button
             type="button"
             onClick={reset}
-            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",
-            })}
+            className="inline-flex items-center justify-center px-6 py-3 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 active:bg-blue-700 transition-all duration-200"
           >
             もう一度試す
           </button>
           <button
             type="button"
             onClick={handleHomeClick}
-            className={css({
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              px: "6",
-              py: "3",
-              border: "1px solid",
-              borderColor: "blue.500",
-              color: "blue.500",
-              fontWeight: "semibold",
-              rounded: "md",
-              _hover: { bg: "blue.50" },
-              _active: { bg: "blue.100" },
-              transition: "all 0.2s",
-            })}
+            className="inline-flex items-center justify-center px-6 py-3 border border-blue-500 text-blue-500 font-semibold rounded-md hover:bg-blue-50 active:bg-blue-100 transition-all duration-200"
           >
             トップページへ戻る
           </button>
         </div>
         {process.env.NODE_ENV === "development" && (
-          <pre
-            className={css({
-              mt: "8",
-              p: "4",
-              bg: "gray.100",
-              rounded: "md",
-              textAlign: "left",
-              overflow: "auto",
-              maxW: "full",
-              fontFamily: "mono",
-              fontSize: "sm",
-            })}
-          >
+          <pre className="mt-8 p-4 bg-gray-100 rounded-md text-left overflow-auto max-w-full font-mono text-sm">
             {error.message}
           </pre>
         )}

package/templates/default/apps/web/src/app/global-error.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { css } from "@/styled-system/css";
-import { flex } from "@/styled-system/patterns";
-
 type GlobalErrorPageProps = {
   error: Error & { digest?: string };
   reset: () => void;
@@ -16,89 +13,30 @@ export default function GlobalError({ error, reset }: GlobalErrorPageProps) {
   return (
     <html lang="ja">
       <body>
-        <div
-          className={css({
-            minH: "100vh",
-            display: "flex",
-            flexDir: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            p: "4",
-            bg: "gray.50",
-          })}
-        >
-          <div
-            className={css({
-              textAlign: "center",
-            })}
-          >
-            <h1 className={css({ mb: "4" })}>システムエラー</h1>
-            <p
-              className={css({
-                color: "gray.600",
-                mb: "8",
-                fontSize: "lg",
-              })}
-            >
+        <div className="min-h-screen flex flex-col items-center justify-center p-4 bg-gray-50">
+          <div className="text-center">
+            <h1 className="mb-4">システムエラー</h1>
+            <p className="text-gray-600 mb-8 text-lg">
               申し訳ありません。システムエラーが発生しました。
             </p>
-            <div className={flex({ gap: "4", justify: "center" })}>
+            <div className="flex gap-4 justify-center">
               <button
                 type="button"
                 onClick={reset}
-                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",
-                })}
+                className="inline-flex items-center justify-center px-6 py-3 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 active:bg-blue-700 transition-all duration-200"
               >
                 もう一度試す
               </button>
               <button
                 type="button"
                 onClick={handleHomeClick}
-                className={css({
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  px: "6",
-                  py: "3",
-                  border: "1px solid",
-                  borderColor: "blue.500",
-                  color: "blue.500",
-                  fontWeight: "semibold",
-                  rounded: "md",
-                  _hover: { bg: "blue.50" },
-                  _active: { bg: "blue.100" },
-                  transition: "all 0.2s",
-                })}
+                className="inline-flex items-center justify-center px-6 py-3 border border-blue-500 text-blue-500 font-semibold rounded-md hover:bg-blue-50 active:bg-blue-100 transition-all duration-200"
               >
                 トップページへ戻る
               </button>
             </div>
             {process.env.NODE_ENV === "development" && (
-              <pre
-                className={css({
-                  mt: "8",
-                  p: "4",
-                  bg: "gray.100",
-                  rounded: "md",
-                  textAlign: "left",
-                  overflow: "auto",
-                  maxW: "full",
-                  fontFamily: "mono",
-                  fontSize: "sm",
-                })}
-              >
+              <pre className="mt-8 p-4 bg-gray-100 rounded-md text-left overflow-auto max-w-full font-mono text-sm">
                 {error.message}
               </pre>
             )}