swallowkit 1.0.0-beta.5 → 1.0.0-beta.7

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

@@ -0,0 +1,524 @@
+// 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 } 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>
+  );
+}
+"
+`;

package/src/__tests__/config.test.ts

@@ -0,0 +1,122 @@
+import { validateConfig, loadConfigFromEnv } from "../core/config";
+import { SwallowKitConfig } from "../types";
+
+describe("validateConfig", () => {
+  it("returns valid for a complete config", () => {
+    const config: SwallowKitConfig = {
+      database: { connectionString: "AccountEndpoint=https://..." },
+      backend: { language: "typescript" },
+      api: { endpoint: "/api/_swallowkit" },
+    };
+    const result = validateConfig(config);
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it("returns error when connectionString is missing", () => {
+    const config: SwallowKitConfig = {
+      database: {},
+      backend: { language: "typescript" },
+      api: { endpoint: "/api/_swallowkit" },
+    };
+    const result = validateConfig(config);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain("Cosmos DB connection string is required");
+  });
+
+  it("returns error when endpoint does not start with /", () => {
+    const config: SwallowKitConfig = {
+      database: { connectionString: "AccountEndpoint=https://..." },
+      backend: { language: "typescript" },
+      api: { endpoint: "api/_swallowkit" },
+    };
+    const result = validateConfig(config);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain("API endpoint must start with '/'");
+  });
+
+  it("returns multiple errors for multiple issues", () => {
+    const config: SwallowKitConfig = {
+      database: {},
+      backend: { language: "typescript" },
+      api: { endpoint: "bad-endpoint" },
+    };
+    const result = validateConfig(config);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toHaveLength(2);
+  });
+
+  it("returns error when backend language is invalid", () => {
+    const config: SwallowKitConfig = {
+      backend: { language: "ruby" as never },
+    };
+    const result = validateConfig(config);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain("Backend language must be one of: typescript, csharp, python");
+  });
+
+  it("accepts config without database or api (no validation errors for absent sections)", () => {
+    const config: SwallowKitConfig = {};
+    const result = validateConfig(config);
+    // database is undefined → no connectionString check triggered
+    expect(result.errors.filter((e) => e.includes("endpoint"))).toHaveLength(0);
+  });
+});
+
+describe("loadConfigFromEnv", () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    process.env = { ...originalEnv };
+  });
+
+  afterAll(() => {
+    process.env = originalEnv;
+  });
+
+  it("returns empty config when no env vars set", () => {
+    delete process.env.SWALLOWKIT_DB_CONNECTION_STRING;
+    delete process.env.SWALLOWKIT_DB_NAME;
+    delete process.env.SWALLOWKIT_API_ENDPOINT;
+
+    const config = loadConfigFromEnv();
+    expect(config.database).toBeUndefined();
+    expect(config.api).toBeUndefined();
+  });
+
+  it("reads database connection string from env", () => {
+    process.env.SWALLOWKIT_DB_CONNECTION_STRING = "AccountEndpoint=https://test.documents.azure.com:443/;AccountKey=xxx;";
+    const config = loadConfigFromEnv();
+    expect(config.database?.connectionString).toBe(
+      "AccountEndpoint=https://test.documents.azure.com:443/;AccountKey=xxx;"
+    );
+  });
+
+  it("reads database name from env", () => {
+    process.env.SWALLOWKIT_DB_NAME = "MyTestDB";
+    const config = loadConfigFromEnv();
+    expect(config.database?.databaseName).toBe("MyTestDB");
+  });
+
+  it("reads API endpoint from env", () => {
+    process.env.SWALLOWKIT_API_ENDPOINT = "/api/custom";
+    const config = loadConfigFromEnv();
+    expect(config.api?.endpoint).toBe("/api/custom");
+  });
+
+  it("reads backend language from env", () => {
+    process.env.SWALLOWKIT_BACKEND_LANGUAGE = "python";
+    const config = loadConfigFromEnv();
+    expect(config.backend?.language).toBe("python");
+  });
+
+  it("reads all env vars together", () => {
+    process.env.SWALLOWKIT_DB_CONNECTION_STRING = "conn";
+    process.env.SWALLOWKIT_DB_NAME = "db";
+    process.env.SWALLOWKIT_API_ENDPOINT = "/api/v2";
+    const config = loadConfigFromEnv();
+    expect(config.database?.connectionString).toBe("conn");
+    expect(config.database?.databaseName).toBe("db");
+    expect(config.api?.endpoint).toBe("/api/v2");
+  });
+});

package/src/__tests__/dev.test.ts

@@ -0,0 +1,42 @@
+import * as path from "path";
+import {
+  buildFunctionsStartArgs,
+  buildNextDevArgs,
+  buildPythonFunctionsEnv,
+  getPythonVirtualEnvPaths,
+} from "../cli/commands/dev";
+
+describe("dev command helpers", () => {
+  it("passes the requested port to Azure Functions Core Tools", () => {
+    expect(buildFunctionsStartArgs("7076")).toEqual(["start", "--port", "7076"]);
+  });
+
+  it("uses webpack mode for npm-based Next.js dev", () => {
+    expect(buildNextDevArgs("npm", "3012")).toEqual(["next", "dev", "--port", "3012", "--webpack"]);
+  });
+
+  it("uses pnpm exec for pnpm-based Next.js dev", () => {
+    expect(buildNextDevArgs("pnpm", "3012")).toEqual(["exec", "next", "dev", "--port", "3012", "--webpack"]);
+  });
+
+  it("builds Python virtual environment paths under functions/.venv", () => {
+    const functionsDir = path.join("C:\\repo", "functions");
+    const paths = getPythonVirtualEnvPaths(functionsDir);
+
+    expect(paths.venvDir).toBe(path.join(functionsDir, ".venv"));
+    expect(paths.binDir.endsWith(process.platform === "win32" ? path.join(".venv", "Scripts") : path.join(".venv", "bin"))).toBe(true);
+    expect(paths.pythonExecutable.endsWith(process.platform === "win32" ? path.join("Scripts", "python.exe") : path.join("bin", "python"))).toBe(true);
+  });
+
+  it("injects Python virtual environment settings for Functions", () => {
+    const functionsDir = path.join("C:\\repo", "functions");
+    const env = buildPythonFunctionsEnv({ PATH: "C:\\Windows\\System32" }, functionsDir);
+    const expectedBinDir = getPythonVirtualEnvPaths(functionsDir).binDir;
+
+    expect(env.VIRTUAL_ENV).toBe(path.join(functionsDir, ".venv"));
+    expect(env.languageWorkers__python__defaultExecutablePath).toBe(
+      getPythonVirtualEnvPaths(functionsDir).pythonExecutable
+    );
+    expect(env.PATH?.startsWith(`${expectedBinDir}${path.delimiter}`)).toBe(true);
+  });
+});