@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/FieldRenderer.tsx

@@ -0,0 +1,206 @@
+import React from "react";
+import type { Field } from "@kyro-cms/core/client";
+import { UploadField } from "./fields/UploadField";
+import { CodeField } from "./fields";
+import NumberField from "./fields/NumberField";
+import CheckboxField from "./fields/CheckboxField";
+import SelectField from "./fields/SelectField";
+import DateField from "./fields/DateField";
+import { MarkdownField } from "./fields/MarkdownField";
+import TextField from "./fields/TextField";
+import { BlocksField } from "./fields/BlocksField";
+import PortableTextField from "./fields/PortableTextField";
+import { ListField } from "./fields/ListField";
+import RelationshipField from "./fields/RelationshipField";
+import FieldLayout from "./fields/FieldLayout";
+
+interface FieldRendererProps {
+  field: Field;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export const FieldRenderer: React.FC<FieldRendererProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  if (field.admin?.hidden) return null;
+
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "url":
+      return (
+        <TextField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          error={error}
+          disabled={disabled}
+        />
+      );
+    case "textarea":
+      return (
+        <TextField
+          field={{ ...field, variant: "textarea" } as any}
+          value={value}
+          onChange={onChange}
+          error={error}
+          disabled={disabled}
+        />
+      );
+    case "password":
+      return (
+        <TextField
+          field={{ ...field, variant: "password" } as any}
+          value={value}
+          onChange={onChange}
+          error={error}
+          disabled={disabled}
+        />
+      );
+    case "number":
+      return (
+        <NumberField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "checkbox":
+      return (
+        <CheckboxField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "select":
+      return (
+        <SelectField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "date":
+      return (
+        <DateField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "richtext":
+      return (field as any).hasBlocks === false ? (
+        <PortableTextField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      ) : (
+        <BlocksField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "markdown":
+      return (
+        <MarkdownField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "code":
+      return (
+        <CodeField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "image":
+    case "upload":
+      return (
+        <FieldLayout field={field} error={error}>
+          <UploadField
+            field={field as any}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        </FieldLayout>
+      );
+    case "relationship":
+      return (
+        <RelationshipField
+          field={field as any}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "list":
+      return (
+        <FieldLayout field={field} error={error}>
+          <ListField
+            items={Array.isArray(value) ? value : []}
+            onChange={onChange}
+            compact
+          />
+        </FieldLayout>
+      );
+    case "color":
+      return (
+        <FieldLayout field={field} error={error}>
+          <div className="flex items-center gap-3">
+            <input
+              type="color"
+              value={value || "#000000"}
+              onChange={(e) => onChange(e.target.value)}
+              disabled={disabled}
+              className="h-10 w-14 p-1 cursor-pointer bg-[var(--kyro-input-bg)] border border-[var(--kyro-input-border)] rounded-lg"
+            />
+            <input
+              type="text"
+              className="kyro-form-input font-mono "
+              value={value || ""}
+              onChange={(e) => onChange(e.target.value)}
+              disabled={disabled}
+              placeholder="#000000"
+            />
+          </div>
+        </FieldLayout>
+      );
+    default:
+      return (
+        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 text-xs italic">
+          Field type "{field.type}" is not yet supported in this renderer.
+        </div>
+      );
+  }
+};