@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/fields/PortableTextField.tsx

@@ -1,155 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-  lazy,
-  Suspense,
-  useRef,
-} from "react";
-
-interface PortableTextFieldProps {
-  field: {
-    name: string;
-    label?: string;
-    required?: boolean;
-    admin?: {
-      description?: string;
-      placeholder?: string;
-    };
-  };
-  value?: unknown;
-  onChange?: (value: unknown) => void;
-  error?: string;
-  disabled?: boolean;
-}
-
-const EditorLazy = lazy(() => import("./EditorClient"));
-
-function toPortableTextArray(value: unknown): Record<string, unknown>[] {
-  if (Array.isArray(value)) {
-    if (
-      value.length > 0 &&
-      value[0] &&
-      typeof value[0] === "object" &&
-      "_type" in value[0]
-    ) {
-      return value;
-    }
-    if (value.length === 0) return [];
-  }
-  if (typeof value === "string" && value.trim()) {
-    return [
-      {
-        _type: "block",
-        _key: "initial-block",
-        style: "normal",
-        markDefs: [],
-        children: [
-          {
-            _type: "span",
-            _key: "initial-span",
-            text: value,
-            marks: [],
-          },
-        ],
-      },
-    ];
-  }
-  return [];
-}
-
-const PortableTextField: React.FC<PortableTextFieldProps> = ({
-  field,
-  value,
-  onChange,
-  error,
-  disabled,
-}) => {
-  const [isMounted, setIsMounted] = useState(false);
-  const [editorKey, setEditorKey] = useState(0);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  const ptValue = useMemo(() => toPortableTextArray(value), [value]);
-
-  const prevPtValueRef = useRef(ptValue);
-  useEffect(() => {
-    const hasChanged =
-      JSON.stringify(ptValue) !== JSON.stringify(prevPtValueRef.current);
-    if (hasChanged && isMounted) {
-      setEditorKey((k) => k + 1);
-      prevPtValueRef.current = ptValue;
-    }
-  }, [ptValue, isMounted]);
-
-  const handleChange = useCallback(
-    (blocks: Record<string, unknown>[]) => {
-      if (!blocks || !Array.isArray(blocks)) {
-        onChange?.([]);
-        return;
-      }
-      onChange?.(blocks);
-    },
-    [onChange],
-  );
-
-  if (!isMounted) {
-    return (
-      <div className="space-y-1.5">
-        {field.label && (
-          <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-            {field.label}
-            {field.required && (
-              <span className="text-[var(--kyro-error)] ml-1">*</span>
-            )}
-          </label>
-        )}
-        <div className="h-[200px] rounded-lg border border-[var(--kyro-border)] animate-pulse bg-[var(--kyro-bg-secondary)]" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1.5">
-      {field.label && (
-        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-          {field.label}
-          {field.required && (
-            <span className="text-[var(--kyro-error)] ml-1">*</span>
-          )}
-        </label>
-      )}
-      <div
-        className={`border border-[var(--kyro-border)] rounded-lg overflow-hidden ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
-      >
-        <Suspense
-          fallback={
-            <div className="h-[200px] flex items-center justify-center bg-[var(--kyro-bg-secondary)]">
-              <span className="text-sm text-[var(--kyro-text-muted)]">
-                Loading editor...
-              </span>
-            </div>
-          }
-        >
-          <EditorLazy
-            key={editorKey}
-            initialValue={ptValue}
-            onChange={handleChange}
-            disabled={disabled}
-          />
-        </Suspense>
-      </div>
-      {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-muted)]">
-          {field.admin.description}
-        </p>
-      )}
-      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
-    </div>
-  );
-};
-
-export default PortableTextField;

package/src/components/fields/PortableTextRenderer.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { PortableText } from "@portabletext/react";
-import type { PortableTextComponents } from "@portabletext/react";
-
-interface PortableTextRendererProps {
-  value: unknown[];
-  className?: string;
-}
-
-const components: PortableTextComponents = {
-  block: {
-    h1: ({ children }) => (
-      <h1 className="text-2xl font-bold mb-2">{children}</h1>
-    ),
-    h2: ({ children }) => (
-      <h2 className="text-xl font-bold mb-2">{children}</h2>
-    ),
-    h3: ({ children }) => (
-      <h3 className="text-lg font-semibold mb-2">{children}</h3>
-    ),
-    blockquote: ({ children }) => (
-      <blockquote className="border-l-4 border-gray-300 pl-4 italic my-2">
-        {children}
-      </blockquote>
-    ),
-    normal: ({ children }) => <p className="my-1">{children}</p>,
-  },
-  marks: {
-    strong: ({ children }) => <strong>{children}</strong>,
-    em: ({ children }) => <em>{children}</em>,
-    code: ({ children }) => (
-      <code className="bg-gray-100 px-1 rounded text-sm font-mono">
-        {children}
-      </code>
-    ),
-    underline: ({ children }) => <u>{children}</u>,
-    strikeThrough: ({ children }) => <s>{children}</s>,
-  },
-  list: {
-    bullet: ({ children }) => (
-      <ul className="list-disc ml-4 my-2">{children}</ul>
-    ),
-    number: ({ children }) => (
-      <ol className="list-decimal ml-4 my-2">{children}</ol>
-    ),
-  },
-  listItem: {
-    bullet: ({ children }) => <li className="my-1">{children}</li>,
-    number: ({ children }) => <li className="my-1">{children}</li>,
-  },
-};
-
-export const PortableTextRenderer: React.FC<PortableTextRendererProps> = ({
-  value,
-  className = "",
-}) => {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <PortableText value={value} components={components} />
-    </div>
-  );
-};
-
-export default PortableTextRenderer;