@codebakers/mcp 5.4.2 → 5.4.3

package/dist/tools/generate-component.js

@@ -26,134 +26,134 @@ export async function generateComponent(args) {
     const filePath = path.join(cwd, `src/components/${name}.tsx`);
     await fs.mkdir(path.dirname(filePath), { recursive: true });
     await fs.writeFile(filePath, code, 'utf-8');
-    return `🍞 CodeBakers: Component Generated
-
-**File:** src/components/${name}.tsx
-**Type:** ${type}
-**Entity:** ${entity}
-
-Includes:
-✅ All states (loading/error/empty/success)
-✅ TypeScript types
-✅ Store integration
-✅ Error handling
+    return `🍞 CodeBakers: Component Generated
+
+**File:** src/components/${name}.tsx
+**Type:** ${type}
+**Entity:** ${entity}
+
+Includes:
+✅ All states (loading/error/empty/success)
+✅ TypeScript types
+✅ Store integration
+✅ Error handling
 ✅ Accessibility (ARIA labels)`;
 }
 function generateListComponent(name, entity) {
     const storeName = `use${entity}Store`;
     const entityLower = entity.toLowerCase();
-    return `'use client';
-
-import { useEffect } from 'react';
-import { ${storeName} } from '@/stores/${entityLower}-store';
-
-export function ${name}() {
-  const { ${entityLower}s, loading, error, fetch${entity}s } = ${storeName}();
-
-  useEffect(() => {
-    fetch${entity}s();
-  }, [fetch${entity}s]);
-
-  // LOADING STATE
-  if (loading) {
-    return (
-      <div className="space-y-4" role="status" aria-label="Loading ${entityLower}s">
-        <div className="h-20 bg-gray-200 animate-pulse rounded" />
-        <div className="h-20 bg-gray-200 animate-pulse rounded" />
-        <div className="h-20 bg-gray-200 animate-pulse rounded" />
-      </div>
-    );
-  }
-
-  // ERROR STATE
-  if (error) {
-    return (
-      <div className="p-4 bg-red-50 border border-red-200 rounded" role="alert">
-        <h3 className="font-semibold text-red-900">Failed to load ${entityLower}s</h3>
-        <p className="text-sm text-red-700">{error}</p>
-        <button
-          onClick={() => fetch${entity}s()}
-          className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  // EMPTY STATE
-  if (${entityLower}s.length === 0) {
-    return (
-      <div className="text-center p-8">
-        <p className="text-gray-500">No ${entityLower}s yet</p>
-        <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
-          Create ${entity}
-        </button>
-      </div>
-    );
-  }
-
-  // SUCCESS STATE
-  return (
-    <div className="space-y-4">
-      {${entityLower}s.map((item) => (
-        <div key={item.id} className="p-4 border rounded hover:bg-gray-50">
-          <div className="flex justify-between items-center">
-            <div>
-              <h3 className="font-medium">{item.id}</h3>
-              <p className="text-sm text-gray-500">
-                {new Date(item.created_at).toLocaleDateString()}
-              </p>
-            </div>
-            <button
-              className="text-red-600 hover:text-red-700"
-              aria-label="Delete ${entityLower}"
-            >
-              Delete
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+    return `'use client';
+
+import { useEffect } from 'react';
+import { ${storeName} } from '@/stores/${entityLower}-store';
+
+export function ${name}() {
+  const { ${entityLower}s, loading, error, fetch${entity}s } = ${storeName}();
+
+  useEffect(() => {
+    fetch${entity}s();
+  }, [fetch${entity}s]);
+
+  // LOADING STATE
+  if (loading) {
+    return (
+      <div className="space-y-4" role="status" aria-label="Loading ${entityLower}s">
+        <div className="h-20 bg-gray-200 animate-pulse rounded" />
+        <div className="h-20 bg-gray-200 animate-pulse rounded" />
+        <div className="h-20 bg-gray-200 animate-pulse rounded" />
+      </div>
+    );
+  }
+
+  // ERROR STATE
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 border border-red-200 rounded" role="alert">
+        <h3 className="font-semibold text-red-900">Failed to load ${entityLower}s</h3>
+        <p className="text-sm text-red-700">{error}</p>
+        <button
+          onClick={() => fetch${entity}s()}
+          className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  // EMPTY STATE
+  if (${entityLower}s.length === 0) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-gray-500">No ${entityLower}s yet</p>
+        <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+          Create ${entity}
+        </button>
+      </div>
+    );
+  }
+
+  // SUCCESS STATE
+  return (
+    <div className="space-y-4">
+      {${entityLower}s.map((item) => (
+        <div key={item.id} className="p-4 border rounded hover:bg-gray-50">
+          <div className="flex justify-between items-center">
+            <div>
+              <h3 className="font-medium">{item.id}</h3>
+              <p className="text-sm text-gray-500">
+                {new Date(item.created_at).toLocaleDateString()}
+              </p>
+            </div>
+            <button
+              className="text-red-600 hover:text-red-700"
+              aria-label="Delete ${entityLower}"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
 `;
 }
 function generateDetailComponent(name, entity) {
-    return `'use client';
-
-export function ${name}({ id }: { id: string }) {
-  return <div>Detail view for ${entity} {id}</div>;
-}
+    return `'use client';
+
+export function ${name}({ id }: { id: string }) {
+  return <div>Detail view for ${entity} {id}</div>;
+}
 `;
 }
 function generateFormComponent(name, entity) {
-    return `'use client';
-
-import { useState } from 'react';
-import { use${entity}Store } from '@/stores/${entity.toLowerCase()}-store';
-
-export function ${name}() {
-  const [formData, setFormData] = useState({});
-  const { create${entity}, loading } = use${entity}Store();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    await create${entity}(formData);
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <button
-        type="submit"
-        disabled={loading}
-        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
-      >
-        {loading ? 'Creating...' : 'Create ${entity}'}
-      </button>
-    </form>
-  );
-}
+    return `'use client';
+
+import { useState } from 'react';
+import { use${entity}Store } from '@/stores/${entity.toLowerCase()}-store';
+
+export function ${name}() {
+  const [formData, setFormData] = useState({});
+  const { create${entity}, loading } = use${entity}Store();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await create${entity}(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <button
+        type="submit"
+        disabled={loading}
+        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+      >
+        {loading ? 'Creating...' : 'Create ${entity}'}
+      </button>
+    </form>
+  );
+}
 `;
 }
 //# sourceMappingURL=generate-component.js.map