swallowkit 1.0.0-beta.9 → 1.0.0

package/src/core/scaffold/ui-generator.ts

@@ -3,16 +3,52 @@
  * CRUD 画面（一覧、詳細、新規作成、編集）を生成する
  */
 
-import { ModelInfo, FieldInfo, toCamelCase, toKebabCase, toPascalCase } from "./model-parser";
+import { ModelInfo, toCamelCase, toKebabCase } from "./model-parser";
+import { ModelAuthPolicy } from "../../types";
+
+/** auth が有効かつ authPolicy が存在する場合に渡されるオプション */
+export interface UIAuthOptions {
+  /** モデル固有のロールポリシー */
+  authPolicy: ModelAuthPolicy;
+  writeRoles?: string[];
+  authenticatedFetchImport?: string;
+  authContextImport?: string;
+}
+
+/**
+ * 認証付きCRUDルートを、ページ側のuseAuthと同じAuthProviderで囲むレイアウトを生成する。
+ */
+export function generateAuthLayout(model: ModelInfo, authOptions?: UIAuthOptions): string | undefined {
+  if (!authOptions) return undefined;
+
+  const authContextImport = authOptions.authContextImport ?? '@/lib/auth/auth-context';
+
+  return `import { AuthProvider } from '${authContextImport}';
+import type { ReactNode } from 'react';
+
+export default function ${model.name}Layout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <AuthProvider>{children}</AuthProvider>;
+}
+`;
+}
 
 /**
  * 一覧画面を生成
  */
-export function generateListPage(model: ModelInfo, sharedPackageName: string): string {
+export function generateListPage(model: ModelInfo, sharedPackageName: string, authOptions?: UIAuthOptions): string {
   const modelName = model.name;
   const modelCamel = toCamelCase(modelName);
   const modelKebab = toKebabCase(modelName);
   
+  const hasAuth = !!authOptions;
+  const authContextImport = authOptions?.authContextImport ?? '@/lib/auth/auth-context';
+  const writeRoles = authOptions?.writeRoles ?? (Array.isArray(authOptions?.authPolicy?.write) ? authOptions.authPolicy.write : authOptions?.authPolicy?.roles);
+  const hasWriteRoles = hasAuth && writeRoles && writeRoles.length > 0;
+  
   // フィールドから表示するカラムを抽出（id以外の最初の3つ）
   const displayFields = model.fields
     .filter(f => f.name !== 'id')
@@ -22,10 +58,6 @@ export function generateListPage(model: ModelInfo, sharedPackageName: string): s
   const foreignKeyFields = displayFields.filter(f => f.isForeignKey);
   const hasForeignKeys = foreignKeyFields.length > 0;
   
-  // ネストスキーマフィールドを検出
-  const nestedFields = displayFields.filter(f => f.isNestedSchema);
-  const hasNestedSchemas = nestedFields.length > 0;
-  
   // 外部キー用のstate定義を生成
   const foreignKeyStates = foreignKeyFields.map(f => {
     const refModel = f.referencedModel!;
@@ -39,7 +71,7 @@ export function generateListPage(model: ModelInfo, sharedPackageName: string): s
     const refModelCamel = toCamelCase(refModel);
     return `    fetch('/api/${refModelCamel}')
       .then(res => res.json())
-      .then((data: any[]) => {
+      .then((data: Array<{ id: string; name?: string; title?: string }>) => {
         const map: Record<string, string> = {};
         data.forEach(item => {
           // name または title フィールドを表示用文字列として使用
@@ -64,6 +96,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { z } from 'zod/v4';
 ${schemaImportLine}
+${hasAuth ? `import { useAuth } from '${authContextImport}';` : ''}
 
 type ${modelName} = z.infer<typeof ${localSchemaName}>;
 
@@ -72,6 +105,9 @@ export default function ${modelName}ListPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 ${hasForeignKeys ? foreignKeyStates : ''}
+${hasWriteRoles ? `  const { hasAnyRole } = useAuth();
+  const canWrite = hasAnyRole(${JSON.stringify(writeRoles)});` : hasAuth ? `  const { user } = useAuth();
+  const canWrite = !!user;` : ''}
 
   useEffect(() => {
     fetch('/api/${modelCamel}')
@@ -102,8 +138,8 @@ ${hasForeignKeys ? foreignKeyFetches : ''}
       if (!res.ok) throw new Error('Failed to delete ${modelCamel}');
 
       set${modelName}s(${modelCamel}s.filter((item) => item.id !== id));
-    } catch (err: any) {
-      alert(\`Error: \${err.message}\`);
+    } catch (err) {
+      alert(\`Error: \${err instanceof Error ? err.message : String(err)}\`);
     }
   };
 
@@ -135,12 +171,19 @@ ${hasForeignKeys ? foreignKeyFetches : ''}
       </div>
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">${modelName}</h1>
-        <Link
+${hasAuth ? `        {canWrite && (
+          <Link
+            href="/${modelKebab}/new"
+            className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2 rounded"
+          >
+            Create New
+          </Link>
+        )}` : `        <Link
           href="/${modelKebab}/new"
           className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2 rounded"
         >
           Create New
-        </Link>
+        </Link>`}
       </div>
 
       {${modelCamel}s.length === 0 ? (
@@ -173,7 +216,7 @@ ${displayFields.map(f => {
     const displayField = f.nestedDisplayField || 'name';
     if (f.isArray) {
       return `                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    {Array.isArray(item.${f.name}) ? item.${f.name}.map((ref: any) => ref?.${displayField} || '-').join(', ') : '-'}
+                    {Array.isArray(item.${f.name}) ? item.${f.name}.map((ref: unknown) => (ref as { ${displayField}?: string } | null)?.${displayField} || '-').join(', ') : '-'}
                   </td>`;
     } else {
       return `                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
@@ -183,6 +226,11 @@ ${displayFields.map(f => {
   } else if (f.isForeignKey && f.referencedModel) {
     const refModel = f.referencedModel;
     const refModelCamel = toCamelCase(refModel);
+    if (f.isOptional || f.isNullable) {
+      return `                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {item.${f.name} ? ${refModelCamel}Map[item.${f.name}] || item.${f.name} : '-'}
+                  </td>`;
+    }
     return `                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                     {${refModelCamel}Map[item.${f.name}] || item.${f.name}}
                   </td>`;
@@ -199,7 +247,22 @@ ${displayFields.map(f => {
                     >
                       View
                     </Link>
-                    <Link
+${hasAuth ? `                    {canWrite && (
+                      <>
+                        <Link
+                          href={\`/${modelKebab}/\${item.id}/edit\`}
+                          className="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 mr-4"
+                        >
+                          Edit
+                        </Link>
+                        <button
+                          onClick={() => handleDelete(item.id)}
+                          className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                        >
+                          Delete
+                        </button>
+                      </>
+                    )}` : `                    <Link
                       href={\`/${modelKebab}/\${item.id}/edit\`}
                       className="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 mr-4"
                     >
@@ -210,7 +273,7 @@ ${displayFields.map(f => {
                       className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
                     >
                       Delete
-                    </button>
+                    </button>`}
                   </td>
                 </tr>
               ))}
@@ -227,11 +290,16 @@ ${displayFields.map(f => {
 /**
  * 詳細画面を生成
  */
-export function generateDetailPage(model: ModelInfo, sharedPackageName: string): string {
+export function generateDetailPage(model: ModelInfo, sharedPackageName: string, authOptions?: UIAuthOptions): string {
   const modelName = model.name;
   const modelCamel = toCamelCase(modelName);
   const modelKebab = toKebabCase(modelName);
   
+  const hasAuth = !!authOptions;
+  const authContextImport = authOptions?.authContextImport ?? '@/lib/auth/auth-context';
+  const writeRoles = authOptions?.writeRoles ?? (Array.isArray(authOptions?.authPolicy?.write) ? authOptions.authPolicy.write : authOptions?.authPolicy?.roles);
+  const hasWriteRoles = hasAuth && writeRoles && writeRoles.length > 0;
+  
   // 外部キーフィールドを検出
   const foreignKeyFields = model.fields.filter(f => f.isForeignKey);
   const hasForeignKeys = foreignKeyFields.length > 0;
@@ -249,7 +317,7 @@ export function generateDetailPage(model: ModelInfo, sharedPackageName: string):
     const refModelCamel = toCamelCase(refModel);
     return `    fetch('/api/${refModelCamel}')
       .then(res => res.json())
-      .then((data: any[]) => {
+      .then((data: Array<{ id: string; name?: string; title?: string }>) => {
         const map: Record<string, string> = {};
         data.forEach(item => {
           map[item.id] = item.name || item.title || item.id;
@@ -274,6 +342,7 @@ import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { z } from 'zod/v4';
 ${schemaImportLine}
+${hasAuth ? `import { useAuth } from '${authContextImport}';` : ''}
 
 type ${modelName} = z.infer<typeof ${localSchemaName}>;
 
@@ -284,6 +353,9 @@ export default function ${modelName}DetailPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 ${hasForeignKeys ? foreignKeyStates : ''}
+${hasWriteRoles ? `  const { hasAnyRole } = useAuth();
+  const canWrite = hasAnyRole(${JSON.stringify(writeRoles)});` : hasAuth ? `  const { user } = useAuth();
+  const canWrite = !!user;` : ''}
 
   useEffect(() => {
     const id = params?.id as string;
@@ -317,8 +389,8 @@ ${hasForeignKeys ? foreignKeyFetches : ''}
       if (!res.ok) throw new Error('Failed to delete ${modelCamel}');
 
       router.push('/${modelKebab}');
-    } catch (err: any) {
-      alert(\`Error: \${err.message}\`);
+    } catch (err) {
+      alert(\`Error: \${err instanceof Error ? err.message : String(err)}\`);
     }
   };
 
@@ -343,7 +415,22 @@ ${hasForeignKeys ? foreignKeyFetches : ''}
       <div className="max-w-2xl mx-auto">
         <div className="flex justify-between items-center mb-6">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">${modelName} Details</h1>
-          <div className="space-x-2">
+${hasAuth ? `          {canWrite && (
+            <div className="space-x-2">
+              <Link
+                href={\`/${modelKebab}/\${${modelCamel}.id}/edit\`}
+                className="inline-flex items-center bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white px-4 py-2 rounded"
+              >
+                Edit
+              </Link>
+              <button
+                onClick={handleDelete}
+                className="inline-flex items-center bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white px-4 py-2 rounded"
+              >
+                Delete
+              </button>
+            </div>
+          )}` : `          <div className="space-x-2">
             <Link
               href={\`/${modelKebab}/\${${modelCamel}.id}/edit\`}
               className="inline-flex items-center bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white px-4 py-2 rounded"
@@ -356,7 +443,7 @@ ${hasForeignKeys ? foreignKeyFetches : ''}
             >
               Delete
             </button>
-          </div>
+          </div>`}
         </div>
 
         <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
@@ -368,7 +455,7 @@ ${model.fields.map(f => {
     if (f.isArray) {
       return `            <div>
               <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${label}</dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{Array.isArray(${modelCamel}.${f.name}) ? ${modelCamel}.${f.name}.map((ref: any) => ref?.${displayField} || '-').join(', ') : '-'}</dd>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{Array.isArray(${modelCamel}.${f.name}) ? ${modelCamel}.${f.name}.map((ref: unknown) => (ref as { ${displayField}?: string } | null)?.${displayField} || '-').join(', ') : '-'}</dd>
             </div>`;
     } else {
       return `            <div>
@@ -379,6 +466,12 @@ ${model.fields.map(f => {
   } else if (f.isForeignKey && f.referencedModel) {
     const refModel = f.referencedModel;
     const refModelCamel = toCamelCase(refModel);
+    if (f.isOptional || f.isNullable) {
+      return `            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${refModel}</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{${modelCamel}.${f.name} ? ${refModelCamel}Map[${modelCamel}.${f.name}] || ${modelCamel}.${f.name} : '-'}</dd>
+            </div>`;
+    }
     return `            <div>
               <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${refModel}</dt>
               <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{${refModelCamel}Map[${modelCamel}.${f.name}] || ${modelCamel}.${f.name}}</dd>
@@ -454,7 +547,7 @@ export function generateFormComponent(model: ModelInfo, sharedPackageName: strin
     return `    // ${refModelPascal} の一覧を取得
     fetch('/api/${refModelCamel}')
       .then(res => res.json())
-      .then(data => set${refModelPascal}Options(data.map((item: any) => ({ id: item.id, name: item.${displayField} || item.name || item.title || item.id }))))
+      .then(data => set${refModelPascal}Options(data.map((item: Record<string, string>) => ({ id: item.id, name: item.${displayField} || item.name || item.title || item.id }))))
       .catch(err => console.error('Failed to load ${refModelPascal} options:', err));`;
   }).join('\n');
   
@@ -488,7 +581,7 @@ ${formFields.map(f => {
   // ネストスキーマの場合は参照ID（単一: string, 配列: string[]）を管理
   if (f.isNestedSchema) {
     if (f.isArray) {
-      return `    ${f.name}Ids: initialData?.${f.name} ? (Array.isArray(initialData.${f.name}) ? initialData.${f.name}.map((item: any) => item.id) : []) : [] as string[],`;
+      return `    ${f.name}Ids: initialData?.${f.name} ? (Array.isArray(initialData.${f.name}) ? initialData.${f.name}.map((item: { id: string }) => item.id) : []) : [] as string[],`;
     } else {
       return `    ${f.name}Id: initialData?.${f.name}?.id ?? '',`;
     }
@@ -522,7 +615,7 @@ ${needsUseEffect ? `
 ${hasForignKeys ? foreignKeyFields.map(f => `    // ${f.referencedModel} の一覧を取得
     fetch('/api/${toKebabCase(f.referencedModel!)}')
       .then(res => res.json())
-      .then(data => set${f.referencedModel}Options(data.map((item: any) => ({ id: item.id, name: item.name || item.title || item.id }))))
+      .then(data => set${f.referencedModel}Options(data.map((item: Record<string, string>) => ({ id: item.id, name: item.name || item.title || item.id }))))
       .catch(err => console.error('Failed to load ${f.referencedModel} options:', err));`).join('\n') : ''}
 ${hasNestedSchemas ? nestedSchemaFetches : ''}
   }, []);
@@ -534,7 +627,7 @@ ${hasNestedSchemas ? nestedSchemaFetches : ''}
 
     try {
       // Array フィールドをカンマ区切りから配列に変換
-      const submitData: any = { ...formData };
+      const submitData: Record<string, unknown> = { ...formData };
 ${formFields.filter(f => f.isArray && !f.isNestedSchema).map(f => `      if (typeof submitData.${f.name} === 'string') {
         submitData.${f.name} = submitData.${f.name}.split(',').map((s: string) => s.trim()).filter((s: string) => s.length > 0);
       }`).join('\n')}
@@ -558,7 +651,7 @@ ${nestedSchemaFields.map(f => {
   if (f.isArray) {
     return `      // ${refModelPascal} 配列参照の変換
       if (submitData.${f.name}Ids) {
-        submitData.${f.name} = submitData.${f.name}Ids
+        submitData.${f.name} = (submitData.${f.name}Ids as string[])
           .map((refId: string) => ${refModelCamel}Options.find(opt => opt.id === refId))
           .filter(Boolean);
         delete submitData.${f.name}Ids;
@@ -595,17 +688,17 @@ ${nestedSchemaFields.map(f => {
       }
 
       router.push('/${toKebabCase(modelName)}');
-    } catch (err: any) {
-      if (err.issues) {
+    } catch (err) {
+      if (err instanceof z.ZodError) {
         // Zod validation errors
         const fieldErrors: Record<string, string> = {};
-        err.issues.forEach((error: any) => {
-          const field = error.path[0];
-          fieldErrors[field] = error.message;
+        err.issues.forEach((issue) => {
+          const field = String(issue.path[0]);
+          fieldErrors[field] = issue.message;
         });
         setErrors(fieldErrors);
       } else {
-        alert(\`Error: \${err.message}\`);
+        alert(\`Error: \${err instanceof Error ? err.message : String(err)}\`);
       }
       setLoading(false);
     }
@@ -849,11 +942,17 @@ ${f.enumValues.map(v => `          <option value="${v}">${v}</option>`).join('\n
 /**
  * 新規作成画面を生成
  */
-export function generateNewPage(model: ModelInfo): string {
+export function generateNewPage(model: ModelInfo, authOptions?: UIAuthOptions): string {
   const modelName = model.name;
   const modelKebab = toKebabCase(modelName);
   
-  return `import ${modelName}Form from '../_components/${modelName}Form';
+  const hasAuth = !!authOptions;
+  const authContextImport = authOptions?.authContextImport ?? '@/lib/auth/auth-context';
+  const writeRoles = authOptions?.writeRoles ?? (Array.isArray(authOptions?.authPolicy?.write) ? authOptions.authPolicy.write : authOptions?.authPolicy?.roles);
+  const hasWriteRoles = hasAuth && writeRoles && writeRoles.length > 0;
+  
+  if (!hasAuth) {
+    return `import ${modelName}Form from '../_components/${modelName}Form';
 
 export default function New${modelName}Page() {
   return (
@@ -867,17 +966,61 @@ export default function New${modelName}Page() {
     </div>
   );
 }
+`;
+  }
+  
+  return `'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import ${modelName}Form from '../_components/${modelName}Form';
+import { useAuth } from '${authContextImport}';
+
+export default function New${modelName}Page() {
+  const router = useRouter();
+${hasWriteRoles ? `  const { hasAnyRole, loading } = useAuth();
+  const canWrite = hasAnyRole(${JSON.stringify(writeRoles)});` : `  const { user, loading } = useAuth();
+  const canWrite = !!user;`}
+
+  useEffect(() => {
+    if (!loading && !canWrite) {
+      router.push('/${modelKebab}');
+    }
+  }, [loading, canWrite, router]);
+
+  if (loading) {
+    return <div className="flex items-center justify-center min-h-screen"><div className="text-lg">Loading...</div></div>;
+  }
+
+  if (!canWrite) return null;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold mb-6">Create New ${modelName}</h1>
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
+          <${modelName}Form />
+        </div>
+      </div>
+    </div>
+  );
+}
 `;
 }
 
 /**
  * 編集画面を生成
  */
-export function generateEditPage(model: ModelInfo, sharedPackageName: string): string {
+export function generateEditPage(model: ModelInfo, sharedPackageName: string, authOptions?: UIAuthOptions): string {
   const modelName = model.name;
   const modelCamel = toCamelCase(modelName);
   const modelKebab = toKebabCase(modelName);
   
+  const hasAuth = !!authOptions;
+  const authContextImport = authOptions?.authContextImport ?? '@/lib/auth/auth-context';
+  const writeRoles = authOptions?.writeRoles ?? (Array.isArray(authOptions?.authPolicy?.write) ? authOptions.authPolicy.write : authOptions?.authPolicy?.roles);
+  const hasWriteRoles = hasAuth && writeRoles && writeRoles.length > 0;
+  
   const schemaName = model.schemaName;
   // Zod公式パターン対応: schemaNameとmodelNameが同じ場合はimportエイリアスで名前衝突を回避
   const needsAlias = schemaName === modelName;
@@ -889,17 +1032,29 @@ export function generateEditPage(model: ModelInfo, sharedPackageName: string): s
   return `'use client';
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import ${modelName}Form from '../../_components/${modelName}Form';
 import { z } from 'zod/v4';
 ${schemaImportLine}
+${hasAuth ? `import { useAuth } from '${authContextImport}';` : ''}
 
 type ${modelName} = z.infer<typeof ${localSchemaName}>;
 
 export default function Edit${modelName}Page() {
   const params = useParams();
+${hasAuth ? '  const router = useRouter();' : ''}
   const [${modelCamel}, set${modelName}] = useState<${modelName} | null>(null);
   const [loading, setLoading] = useState(true);
+${hasWriteRoles ? `  const { hasAnyRole, loading: authLoading } = useAuth();
+  const canWrite = hasAnyRole(${JSON.stringify(writeRoles)});` : hasAuth ? `  const { user, loading: authLoading } = useAuth();
+  const canWrite = !!user;` : ''}
+${hasAuth ? `
+  useEffect(() => {
+    if (!authLoading && !canWrite) {
+      router.push('/${modelKebab}');
+    }
+  }, [authLoading, canWrite, router]);
+` : ''}
 
   useEffect(() => {
     const id = params?.id as string;