swallowkit 1.0.0-beta.2 → 1.0.0-beta.20

package/src/__tests__/__snapshots__/ui-generator.test.ts.snap

@@ -0,0 +1,532 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generateDetailPage generates detail page (snapshot) 1`] = `
+"'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { z } from 'zod/v4';
+import { todoSchema } from '@myapp/shared';
+
+
+type Todo = z.infer<typeof todoSchema>;
+
+export default function TodoDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [todo, setTodo] = useState<Todo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    fetch(\`/api/todo/\${id}\`)
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch todo');
+        return res.json();
+      })
+      .then((data) => {
+        setTodo(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+
+
+  }, [params]);
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this item?')) return;
+
+    try {
+      const res = await fetch(\`/api/todo/\${params?.id}\`, {
+        method: 'DELETE',
+      });
+
+      if (!res.ok) throw new Error('Failed to delete todo');
+
+      router.push('/todo');
+    } catch (err: any) {
+      alert(\`Error: \${err.message}\`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-lg text-gray-900 dark:text-gray-100">Loading...</div>
+      </div>
+    );
+  }
+
+  if (error || !todo) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-red-600 dark:text-red-400">Error: {error || 'Todo not found'}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <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">Todo Details</h1>
+          <div className="space-x-2">
+            <Link
+              href={\`/todo/\${todo.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>
+
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
+          <dl className="space-y-4">
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">id</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.id)}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">title</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.title)}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">description</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.description)}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">completed</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.completed)}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">createdAt</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.createdAt)}</dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">updatedAt</dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{String(todo.updatedAt)}</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div className="mt-6">
+          <Link
+            href="/todo"
+            className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"
+          >
+            &larr; Back to list
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+"
+`;
+
+exports[`generateEditPage generates edit page (snapshot) 1`] = `
+"'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import TodoForm from '../../_components/TodoForm';
+import { z } from 'zod/v4';
+import { todoSchema } from '@myapp/shared';
+
+
+type Todo = z.infer<typeof todoSchema>;
+
+export default function EditTodoPage() {
+  const params = useParams();
+
+  const [todo, setTodo] = useState<Todo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    fetch(\`/api/todo/\${id}\`)
+      .then((res) => res.json())
+      .then((data) => {
+        setTodo(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [params]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-lg">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!todo) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-red-600">Todo not found</div>
+      </div>
+    );
+  }
+
+  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">Edit Todo</h1>
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
+          <TodoForm initialData={todo} isEdit={true} />
+        </div>
+      </div>
+    </div>
+  );
+}
+"
+`;
+
+exports[`generateFormComponent generates form component (snapshot) 1`] = `
+"'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { z } from 'zod/v4';
+import { todoSchema } from '@myapp/shared';
+
+// Input schema: SwallowKit-managed fields (id, createdAt, updatedAt) are optional
+// These fields are ignored by the backend and auto-managed
+const TodoInputSchema = todoSchema.partial({ id: true, createdAt: true, updatedAt: true });
+
+type Todo = z.infer<typeof todoSchema>;
+
+interface TodoFormProps {
+  initialData?: Todo;
+  isEdit?: boolean;
+}
+
+export default function TodoForm({ initialData, isEdit = false }: TodoFormProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+
+  
+  const [formData, setFormData] = useState({
+    title: initialData?.title ?? '',
+    description: initialData?.description ?? '',
+    completed: initialData?.completed ?? false,
+  });
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setErrors({});
+
+    try {
+      // Array フィールドをカンマ区切りから配列に変換
+      const submitData: any = { ...formData };
+
+
+
+
+      
+      // Validate input (excluding SwallowKit-managed fields)
+      TodoInputSchema.parse(submitData);
+
+      const url = isEdit ? \`/api/todo/\${initialData!.id}\` : '/api/todo';
+      const method = isEdit ? 'PUT' : 'POST';
+
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(submitData),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || 'Failed to save todo');
+      }
+
+      router.push('/todo');
+    } catch (err: any) {
+      if (err.issues) {
+        // Zod validation errors
+        const fieldErrors: Record<string, string> = {};
+        err.issues.forEach((error: any) => {
+          const field = error.path[0];
+          fieldErrors[field] = error.message;
+        });
+        setErrors(fieldErrors);
+      } else {
+        alert(\`Error: \${err.message}\`);
+      }
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          title *
+        </label>
+        <input
+          type="text"
+          id="title"
+          name="title"
+          value={formData.title}
+          onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+          className="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm px-3 py-2 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+          required
+        />
+        {errors.title && (
+          <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.title}</p>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          description
+        </label>
+        <input
+          type="text"
+          id="description"
+          name="description"
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          className="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm px-3 py-2 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+          
+        />
+        {errors.description && (
+          <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.description}</p>
+        )}
+      </div>
+
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          id="completed"
+          name="completed"
+          checked={formData.completed}
+          onChange={(e) => setFormData({ ...formData, completed: e.target.checked })}
+          className="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border border-gray-300 dark:border-gray-600 rounded"
+        />
+        <label htmlFor="completed" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+          completed
+        </label>
+        {errors.completed && (
+          <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.completed}</p>
+        )}
+      </div>
+
+      <div className="flex gap-4">
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50"
+        >
+          {loading ? 'Saving...' : isEdit ? 'Update' : 'Create'}
+        </button>
+        <button
+          type="button"
+          onClick={() => router.push('/todo')}
+          className="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
+"
+`;
+
+exports[`generateListPage generates list page for basic model (snapshot) 1`] = `
+"'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { z } from 'zod/v4';
+import { todoSchema } from '@myapp/shared';
+
+
+type Todo = z.infer<typeof todoSchema>;
+
+export default function TodoListPage() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+
+
+  useEffect(() => {
+    fetch('/api/todo')
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch todos');
+        return res.json();
+      })
+      .then((data) => {
+        setTodos(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+
+
+  }, []);
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this item?')) return;
+
+    try {
+      const res = await fetch(\`/api/todo/\${id}\`, {
+        method: 'DELETE',
+      });
+
+      if (!res.ok) throw new Error('Failed to delete todo');
+
+      setTodos(todos.filter((item) => item.id !== id));
+    } catch (err: any) {
+      alert(\`Error: \${err.message}\`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-lg text-gray-900 dark:text-gray-100">Loading...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-red-600 dark:text-red-400">Error: {error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-4">
+        <Link
+          href="/"
+          className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 text-sm"
+        >
+          ← Home
+        </Link>
+      </div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Todo</h1>
+        <Link
+          href="/todo/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>
+      </div>
+
+      {todos.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          No todos found. Create your first one!
+        </div>
+      ) : (
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  title
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  description
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  completed
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {todos.map((item) => (
+                <tr key={item.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {String(item.title)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {String(item.description)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {String(item.completed)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <Link
+                      href={\`/todo/\${item.id}\`}
+                      className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-4"
+                    >
+                      View
+                    </Link>
+                    <Link
+                      href={\`/todo/\${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>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+"
+`;
+
+exports[`generateNewPage generates new page (snapshot) 1`] = `
+"import TodoForm from '../_components/TodoForm';
+
+export default function NewTodoPage() {
+  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 Todo</h1>
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
+          <TodoForm />
+        </div>
+      </div>
+    </div>
+  );
+}
+"
+`;