@micro-cms/admin-ui 0.0.1

package/dist/AutoForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Entity } from '@micro-cms/types';
+interface AutoFormProps {
+    entity: Entity;
+    initialData?: any;
+    onSubmit: (data: any) => void;
+}
+export declare const AutoForm: React.FC<AutoFormProps>;
+export {};

package/dist/AutoForm.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { ComponentRegistry, DefaultTextInput } from './registry';
+export const AutoForm = ({ entity, initialData = {}, onSubmit }) => {
+    const [formData, setFormData] = useState(initialData);
+    // Update form data if initialData changes
+    useEffect(() => {
+        setFormData(initialData || {});
+    }, [initialData]);
+    const handleChange = (fieldName, value) => {
+        setFormData((prev) => ({ ...prev, [fieldName]: value }));
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(formData);
+    };
+    return (React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4 p-4 border rounded shadow-sm bg-white" },
+        React.createElement("h3", { className: "text-lg font-semibold mb-4" },
+            "Create ",
+            entity.name),
+        entity.fields.map((field) => {
+            const Component = ComponentRegistry.get(field.type) || DefaultTextInput;
+            return (React.createElement("div", { key: field.name, className: "mb-2" },
+                React.createElement(Component, { field: field, value: formData[field.name], onChange: (val) => handleChange(field.name, val) })));
+        }),
+        React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" },
+            "Save ",
+            entity.name)));
+};

package/dist/AutoTable.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Entity } from '@micro-cms/types';
+interface AutoTableProps {
+    entity: Entity;
+    data: any[];
+    onEdit?: (item: any) => void;
+    onDelete?: (item: any) => void;
+}
+export declare const AutoTable: React.FC<AutoTableProps>;
+export {};

package/dist/AutoTable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+export const AutoTable = ({ entity, data, onEdit, onDelete }) => {
+    if (!data || data.length === 0) {
+        return React.createElement("div", { className: "p-4 text-gray-500" },
+            "No records found for ",
+            entity.name);
+    }
+    return (React.createElement("div", { className: "overflow-x-auto border rounded" },
+        React.createElement("table", { className: "min-w-full divide-y divide-gray-200" },
+            React.createElement("thead", { className: "bg-gray-50" },
+                React.createElement("tr", null,
+                    entity.fields.map((field) => (React.createElement("th", { key: field.name, className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, field.label || field.name))),
+                    (onEdit || onDelete) && React.createElement("th", { className: "px-6 py-3 text-right" }, "Actions"))),
+            React.createElement("tbody", { className: "bg-white divide-y divide-gray-200" }, data.map((item, idx) => (React.createElement("tr", { key: item.id || idx },
+                entity.fields.map((field) => (React.createElement("td", { key: field.name, className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900" }, typeof item[field.name] === 'boolean'
+                    ? item[field.name] ? 'Yes' : 'No'
+                    : String(item[field.name])))),
+                (onEdit || onDelete) && (React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium" },
+                    onEdit && (React.createElement("button", { onClick: () => onEdit(item), className: "text-indigo-600 hover:text-indigo-900 mr-4" }, "Edit")),
+                    onDelete && (React.createElement("button", { onClick: () => onDelete(item), className: "text-red-600 hover:text-red-900" }, "Delete")))))))))));
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { CmsModule } from '@micro-cms/types';
+export * from './registry';
+export * from './AutoForm';
+export * from './AutoTable';
+declare const adminUiModule: CmsModule;
+export default adminUiModule;

package/dist/index.js

@@ -0,0 +1,26 @@
+import { ComponentRegistry, DefaultTextInput, DefaultNumberInput, DefaultBooleanInput } from './registry';
+export * from './registry';
+export * from './AutoForm';
+export * from './AutoTable';
+const adminUiModule = {
+    manifest: {
+        name: '@micro-cms/admin-ui',
+        version: '0.0.1',
+        provides: ['admin-interface'],
+        requires: ['introspection'],
+        pairsWith: {
+            '@micro-cms/mock-db': { reason: 'Admin needs data to display', strength: 'recommended' }
+        }
+    },
+    async load({ context }) {
+        // Register default components
+        ComponentRegistry.register('text', DefaultTextInput);
+        ComponentRegistry.register('number', DefaultNumberInput);
+        ComponentRegistry.register('boolean', DefaultBooleanInput);
+        // Listen to schema changes to potentially re-render or update internal UI state
+        context.subscribe('database.schema', (schema) => {
+            console.log('Admin UI detected schema update', schema);
+        });
+    }
+};
+export default adminUiModule;

package/dist/registry.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Field, FieldType } from '@micro-cms/types';
+export interface FieldComponentProps {
+    field: Field;
+    value: any;
+    onChange: (value: any) => void;
+    error?: string;
+}
+export type FieldComponent = React.ComponentType<FieldComponentProps>;
+declare class Registry {
+    private components;
+    register(type: FieldType | string, component: FieldComponent): void;
+    get(type: string): FieldComponent | undefined;
+}
+export declare const ComponentRegistry: Registry;
+export declare const DefaultTextInput: FieldComponent;
+export declare const DefaultNumberInput: FieldComponent;
+export declare const DefaultBooleanInput: FieldComponent;
+export {};

package/dist/registry.js

@@ -0,0 +1,27 @@
+import React from 'react';
+class Registry {
+    constructor() {
+        this.components = new Map();
+    }
+    register(type, component) {
+        this.components.set(type, component);
+    }
+    get(type) {
+        return this.components.get(type);
+    }
+}
+export const ComponentRegistry = new Registry();
+// Default Components (Fallbacks)
+export const DefaultTextInput = ({ field, value, onChange }) => (React.createElement("div", { className: "flex flex-col gap-1" },
+    React.createElement("label", { className: "text-sm font-medium" }, field.label || field.name),
+    React.createElement("input", { className: "border rounded px-2 py-1", type: "text", value: value || '', onChange: (e) => onChange(e.target.value), required: field.constraints?.required })));
+export const DefaultNumberInput = ({ field, value, onChange }) => (React.createElement("div", { className: "flex flex-col gap-1" },
+    React.createElement("label", { className: "text-sm font-medium" }, field.label || field.name),
+    React.createElement("input", { className: "border rounded px-2 py-1", type: "number", value: value || '', onChange: (e) => onChange(Number(e.target.value)) })));
+export const DefaultBooleanInput = ({ field, value, onChange }) => (React.createElement("div", { className: "flex items-center gap-2" },
+    React.createElement("input", { type: "checkbox", checked: !!value, onChange: (e) => onChange(e.target.checked) }),
+    React.createElement("label", { className: "text-sm font-medium" }, field.label || field.name)));
+// Register defaults
+ComponentRegistry.register('text', DefaultTextInput);
+ComponentRegistry.register('number', DefaultNumberInput);
+ComponentRegistry.register('boolean', DefaultBooleanInput);

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@micro-cms/admin-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+        "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@micro-cms/types": "workspace:*"
+  },
+  "scripts": {
+  "devDependencies": {},
+    "typescript": "^5.0.0",
+
+    "build": "tsc",
+    "prepare": "pnpm build"
+  }
+}