@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/MarkdownField.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import type { MarkdownField as MarkdownFieldType } from "@kyro-cms/core/client";
+
+interface MarkdownFieldProps {
+  field: MarkdownFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+// Simple markdown parser for basic formatting
+function parseMarkdown(text: string): string {
+  if (!text) return "";
+
+  let html = text
+    // Escape HTML
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+
+    // Code blocks
+    .replace(
+      /```(\w+)?\n([\s\S]*?)```/g,
+      '<pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto my-2"><code>$2</code></pre>',
+    )
+
+    // Inline code
+    .replace(
+      /`([^`]+)`/g,
+      '<code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-sm font-mono">$1</code>',
+    )
+
+    // Headers
+    .replace(
+      /^### (.+)$/gm,
+      '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>',
+    )
+    .replace(
+      /^## (.+)$/gm,
+      '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>',
+    )
+    .replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mt-4 mb-2">$1</h1>')
+
+    // Bold and Italic
+    .replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>")
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.+?)\*/g, "<em>$1</em>")
+    .replace(/___(.+?)___/g, "<strong><em>$1</em></strong>")
+    .replace(/__(.+?)__/g, "<strong>$1</strong>")
+    .replace(/_(.+?)_/g, "<em>$1</em>")
+
+    // Strikethrough
+    .replace(/~~(.+?)~~/g, "<del>$1</del>")
+
+    // Blockquotes
+    .replace(
+      /^> (.+)$/gm,
+      '<blockquote class="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-2 text-gray-600 dark:text-gray-400">$1</blockquote>',
+    )
+
+    // Links
+    .replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" class="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">$1</a>',
+    )
+
+    // Images
+    .replace(
+      /!\[([^\]]*)\]\(([^)]+)\)/g,
+      '<img src="$2" alt="$1" class="max-w-full h-auto rounded my-2" />',
+    )
+
+    // Horizontal rules
+    .replace(
+      /^---$/gm,
+      '<hr class="border-gray-300 dark:border-gray-600 my-4" />',
+    )
+    .replace(
+      /^\*\*\*$/gm,
+      '<hr class="border-gray-300 dark:border-gray-600 my-4" />',
+    )
+
+    // Unordered lists
+    .replace(/^[\*\-] (.+)$/gm, '<li class="ml-4">$1</li>')
+
+    // Ordered lists
+    .replace(/^\d+\. (.+)$/gm, '<li class="ml-4 list-decimal">$1</li>')
+
+    // Paragraphs (lines that don't start with special chars)
+    .replace(/^(?!<[a-z]|$)(.+)$/gm, '<p class="my-2">$1</p>')
+
+    // Clean up empty paragraphs
+    .replace(/<p class="my-2"><\/p>/g, "")
+
+    // Wrap consecutive list items in ul/ol
+    .replace(
+      /(<li class="ml-4">.*<\/li>\n?)+/g,
+      '<ul class="list-disc pl-6 my-2">$&</ul>',
+    );
+
+  return html;
+}
+
+export const MarkdownField: React.FC<MarkdownFieldProps> = ({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [showPreview, setShowPreview] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(e.target.value);
+    },
+    [onChange],
+  );
+
+  const wordCount = useMemo(() => {
+    if (!value) return 0;
+    return value.trim().split(/\s+/).filter(Boolean).length;
+  }, [value]);
+
+  const characterCount = value?.length || 0;
+
+  if (!isMounted) {
+    return (
+      <div className="kyro-form-field">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="h-[200px] bg-[var(--kyro-surface)] animate-pulse rounded-md border border-[var(--kyro-border)]" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="kyro-form-field"
+      style={{ position: "relative", zIndex: 10, pointerEvents: "auto" }}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="flex items-center gap-3">
+          {/* Stats */}
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            {wordCount} words • {characterCount} chars
+          </span>
+
+          {/* Preview toggle */}
+          <div className="flex rounded-md overflow-hidden border border-[var(--kyro-border)]">
+            <button
+              type="button"
+              onClick={() => setShowPreview(false)}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                !showPreview
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Write
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowPreview(true)}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                showPreview
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Preview
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{ pointerEvents: "auto", position: "relative", zIndex: 50 }}
+        className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        } ${error ? "border-[var(--kyro-error)]" : ""}`}
+      >
+        {!showPreview ? (
+          <textarea
+            value={value}
+            onChange={handleChange}
+            disabled={disabled}
+            rows={12}
+            style={{ pointerEvents: "auto", cursor: "text", zIndex: 100 }}
+            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
+            placeholder="Enter markdown content...
+
+# Heading 1
+## Heading 2
+
+**Bold text** and *italic text*
+
+- List item 1
+- List item 2
+
+[Link text](https://example.com)
+
+`inline code`
+
+```
+code block
+```"
+          />
+        ) : (
+          <div
+            className={`p-6 min-h-[300px] overflow-auto bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
+          >
+            {value ? (
+              <div
+                className="prose prose-sm dark:prose-invert max-w-none"
+                dangerouslySetInnerHTML={{ __html: parseMarkdown(value) }}
+              />
+            ) : (
+              <p className="text-[var(--kyro-text-muted)] italic">
+                Nothing to preview
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Toolbar with markdown hints */}
+      {!showPreview && (
+        <div className="flex items-center gap-4 mt-2 text-xs text-[var(--kyro-text-muted)]">
+          <span>**bold**</span>
+          <span>*italic*</span>
+          <span>`code`</span>
+          <span>[link](url)</span>
+          <span># heading</span>
+        </div>
+      )}
+
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+};

package/src/components/fields/NumberField.tsx

@@ -1,4 +1,4 @@
-import type { NumberField as NumberFieldType } from '@kyro-cms/core';
+import type { NumberField as NumberFieldType } from "@kyro-cms/core/client";
 
 interface NumberFieldComponentProps {
   field: NumberFieldType;
@@ -8,37 +8,49 @@ interface NumberFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function NumberField({ field, value, onChange, error, disabled }: NumberFieldComponentProps) {
+export default function NumberField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: NumberFieldComponentProps) {
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <input
         type="number"
-        value={value ?? ''}
+        value={value ?? ""}
         onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
         placeholder={field.admin?.placeholder}
         disabled={disabled || field.admin?.readOnly}
         min={field.min}
         max={field.max}
-        step={field.step || (field.integer ? 1 : 'any')}
+        step={field.step || field.integer ? 1 : "any"}
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
-            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
+            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+        } ${
+          disabled || field.admin?.readOnly
+            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
+            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+        }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <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>
   );
 }

package/src/components/fields/PortableTextField.tsx

@@ -0,0 +1,155 @@
+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?: any;
+  onChange?: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+const EditorLazy = lazy(() => import("./EditorClient"));
+
+function toPortableTextArray(value: any): any[] {
+  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: any[]) => {
+      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

@@ -0,0 +1,68 @@
+import React from "react";
+import { PortableText } from "@portabletext/react";
+import type { PortableTextComponents } from "@portabletext/react";
+
+interface PortableTextRendererProps {
+  value: any[];
+  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;