@codebakers/mcp 5.2.0

package/dist/tools/generate-component.js

@@ -0,0 +1,159 @@
+/**
+ * codebakers_generate_component
+ *
+ * React Component Generator
+ *
+ * Generates components with all required states:
+ * - Loading, Error, Empty, Success
+ * - Mobile responsive
+ * - Accessibility
+ */
+import * as fs from 'fs/promises';
+import * as path from 'path';
+export async function generateComponent(args) {
+    const cwd = process.cwd();
+    const { name, entity, type } = args;
+    let code = '';
+    if (type === 'list') {
+        code = generateListComponent(name, entity);
+    }
+    else if (type === 'detail') {
+        code = generateDetailComponent(name, entity);
+    }
+    else {
+        code = generateFormComponent(name, entity);
+    }
+    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
+✅ 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>
+  );
+}
+`;
+}
+function generateDetailComponent(name, entity) {
+    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>
+  );
+}
+`;
+}
+//# sourceMappingURL=generate-component.js.map

package/dist/tools/generate-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-component.js","sourceRoot":"","sources":["../../src/tools/generate-component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAQ7B,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,IAAmB;IACzD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAC1B,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAEpC,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,IAAI,GAAG,qBAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,IAAI,GAAG,uBAAuB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,qBAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,kBAAkB,IAAI,MAAM,CAAC,CAAC;IAC9D,MAAM,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,MAAM,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAE5C,OAAO;;2BAEkB,IAAI;YACnB,IAAI;cACF,MAAM;;;;;;;8BAOU,CAAC;AAC/B,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAY,EAAE,MAAc;IACzD,MAAM,SAAS,GAAG,MAAM,MAAM,OAAO,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IAEzC,OAAO;;;WAGE,SAAS,qBAAqB,WAAW;;kBAElC,IAAI;YACV,WAAW,2BAA2B,MAAM,SAAS,SAAS;;;WAG/D,MAAM;aACJ,MAAM;;;;;qEAKkD,WAAW;;;;;;;;;;;;oEAYZ,WAAW;;;gCAG/C,MAAM;;;;;;;;;;QAU9B,WAAW;;;0CAGuB,WAAW;;mBAElC,MAAM;;;;;;;;;SAShB,WAAW;;;;;;;;;;;mCAWe,WAAW;;;;;;;;;;CAU7C,CAAC;AACF,CAAC;AAED,SAAS,uBAAuB,CAAC,IAAY,EAAE,MAAc;IAC3D,OAAO;;kBAES,IAAI;gCACU,MAAM;;CAErC,CAAC;AACF,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAY,EAAE,MAAc;IACzD,OAAO;;;cAGK,MAAM,0BAA0B,MAAM,CAAC,WAAW,EAAE;;kBAEhD,IAAI;;kBAEJ,MAAM,oBAAoB,MAAM;;;;kBAIhC,MAAM;;;;;;;;;;6CAUqB,MAAM;;;;;CAKlD,CAAC;AACF,CAAC"}

package/dist/tools/generate-docs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * codebakers_generate_docs
+ *
+ * Documentation Generator - Beautiful HTML Docs
+ *
+ * Generates complete documentation:
+ * - Quick start guide
+ * - API reference
+ * - Component documentation
+ * - Architecture overview
+ * - Setup instructions
+ * - Beautiful HTML output with navigation
+ */
+interface DocsArgs {
+    include_api?: boolean;
+    include_components?: boolean;
+    output_dir?: string;
+}
+export declare function generateDocs(args?: DocsArgs): Promise<string>;
+export {};
+//# sourceMappingURL=generate-docs.d.ts.map

package/dist/tools/generate-docs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-docs.d.ts","sourceRoot":"","sources":["../../src/tools/generate-docs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,UAAU,QAAQ;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAsB,YAAY,CAAC,IAAI,GAAE,QAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAyDvE"}