@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/EditorClient.tsx

@@ -0,0 +1,537 @@
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
+import {
+  EditorProvider,
+  PortableTextEditable,
+  useEditor,
+  type RenderStyleFunction,
+  type RenderDecoratorFunction,
+  type RenderBlockFunction,
+  type RenderListItemFunction,
+  type RenderAnnotationFunction,
+} from "@portabletext/editor";
+import { defineSchema } from "@portabletext/schema";
+import { EventListenerPlugin } from "@portabletext/editor/plugins";
+import {
+  useToolbarSchema,
+  useDecoratorButton,
+  useListButton,
+  useStyleSelector,
+  useHistoryButtons,
+  useAnnotationButton,
+  useAnnotationPopover,
+} from "@portabletext/toolbar";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Link,
+  List,
+  ListOrdered,
+  Undo,
+  Redo,
+  ChevronDown,
+  X,
+  ExternalLink,
+} from "lucide-react";
+
+interface EditorClientProps {
+  initialValue: any[];
+  onChange: (blocks: any[]) => void;
+  disabled?: boolean;
+}
+
+function sanitizeInitialValue(value: any): any[] {
+  if (!value || !Array.isArray(value)) return [];
+  return value.filter((block) => {
+    if (!block || typeof block !== "object") return false;
+    if (!block._type) return false;
+    if (block._type === "block" && Array.isArray(block.children)) {
+      block.children = block.children.map((child: any) => ({
+        ...child,
+        _type: child._type || "span",
+        text: typeof child.text === "string" ? child.text : "",
+      }));
+    }
+    return true;
+  });
+}
+
+const schemaDefinition = defineSchema({
+  decorators: [
+    { name: "strong", title: "Bold" },
+    { name: "em", title: "Italic" },
+    { name: "underline", title: "Underline" },
+    { name: "strikeThrough", title: "Strikethrough" },
+    { name: "code", title: "Code" },
+  ],
+  styles: [
+    { name: "normal", title: "Normal" },
+    { name: "h1", title: "H1" },
+    { name: "h2", title: "H2" },
+    { name: "h3", title: "H3" },
+    { name: "blockquote", title: "Quote" },
+  ],
+  lists: [
+    { name: "bullet", title: "Bullet" },
+    { name: "number", title: "Number" },
+  ],
+  annotations: [
+    {
+      name: "link",
+      title: "Link",
+      fields: [{ name: "href", type: "string", title: "URL" }],
+    },
+  ],
+  inlineObjects: [],
+  blockObjects: [],
+});
+
+const renderStyle: RenderStyleFunction = (props) => {
+  if (props.schemaType.value === "h1") {
+    return <h1 className="text-2xl font-bold mb-2">{props.children}</h1>;
+  }
+  if (props.schemaType.value === "h2") {
+    return <h2 className="text-xl font-bold mb-2">{props.children}</h2>;
+  }
+  if (props.schemaType.value === "h3") {
+    return <h3 className="text-lg font-semibold mb-1">{props.children}</h3>;
+  }
+  if (props.schemaType.value === "blockquote") {
+    return (
+      <blockquote className="border-l-2 border-[var(--kyro-primary)] pl-4 italic text-[var(--kyro-text-muted)] my-2">
+        {props.children}
+      </blockquote>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+const renderDecorator: RenderDecoratorFunction = (props) => {
+  if (props.value === "strong") {
+    return <strong>{props.children}</strong>;
+  }
+  if (props.value === "em") {
+    return <em>{props.children}</em>;
+  }
+  if (props.value === "underline") {
+    return <u>{props.children}</u>;
+  }
+  if (props.value === "strikeThrough") {
+    return <s>{props.children}</s>;
+  }
+  if (props.value === "code") {
+    return (
+      <code className="px-1 py-0.5 rounded bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] text-sm font-mono">
+        {props.children}
+      </code>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+const renderBlock: RenderBlockFunction = (props) => {
+  return <div>{props.children}</div>;
+};
+
+const renderListItem: RenderListItemFunction = (props) => {
+  if (props.schemaType.value === "bullet") {
+    return <li className="list-disc ml-4">{props.children}</li>;
+  }
+  if (props.schemaType.value === "number") {
+    return <li className="list-decimal ml-4">{props.children}</li>;
+  }
+  return <li>{props.children}</li>;
+};
+
+const renderAnnotation: RenderAnnotationFunction = (props) => {
+  if (props.schemaType.name === "link") {
+    return (
+      <a
+        href={props.value.href as string}
+        className="text-[var(--kyro-primary)] underline hover:opacity-80"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {props.children}
+      </a>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+function FocusRestoringButton({
+  onClick,
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const editor = useEditor();
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onClick?.(e);
+        editor.send({ type: "focus" });
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+const decoratorIcons: Record<
+  string,
+  React.ComponentType<{ className?: string }>
+> = {
+  strong: Bold,
+  em: Italic,
+  underline: Underline,
+  strikeThrough: Strikethrough,
+  code: Code,
+};
+
+const DecoratorButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
+}) => {
+  const schema = useToolbarSchema({});
+  const decoratorSchema = schema.decorators?.find((d) => d.name === name);
+  if (!decoratorSchema) return null;
+  const { snapshot, send } = useDecoratorButton({
+    schemaType: decoratorSchema,
+  });
+  const Icon = decoratorIcons[name];
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() => send({ type: "toggle" })}
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const ListButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
+}) => {
+  const schema = useToolbarSchema({});
+  const listSchema = schema.lists?.find((l) => l.name === name);
+  if (!listSchema) return null;
+  const { snapshot, send } = useListButton({ schemaType: listSchema });
+  const Icon = name === "bullet" ? List : ListOrdered;
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() => send({ type: "toggle" })}
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const AnnotationButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
+}) => {
+  const schema = useToolbarSchema({});
+  const annotationSchema = schema.annotations?.find((a) => a.name === name);
+  if (!annotationSchema) return null;
+  const { snapshot, send } = useAnnotationButton({
+    schemaType: annotationSchema,
+  });
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+  const isShowingDialog = snapshot.matches({
+    enabled: { inactive: "showing dialog" },
+  });
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() =>
+        send({
+          type: isShowingDialog ? "close dialog" : "open dialog",
+        })
+      }
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {name === "link" && <Link className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const LinkDialog: React.FC = () => {
+  const schema = useToolbarSchema({});
+  const popover = useAnnotationPopover({
+    schemaTypes: schema.annotations || [],
+  });
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (popover.snapshot.matches({ enabled: "active" }) && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [popover.snapshot]);
+
+  if (!popover.snapshot.matches({ enabled: "active" })) return null;
+
+  const activeAnnotations = popover.snapshot.context.annotations || [];
+  const activeLink = activeAnnotations.find(
+    (a) => a.schemaType.name === "link",
+  );
+  const currentHref = activeLink?.value?.href as string | undefined;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const href = formData.get("href") as string;
+
+    if (activeLink) {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: activeLink.at,
+          props: { href: href.trim() },
+        });
+      } else {
+        popover.send({
+          type: "remove",
+          schemaType: activeLink.schemaType,
+        });
+      }
+    } else {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: [] as any,
+          props: { href: href.trim() },
+        });
+      }
+    }
+    popover.send({ type: "close" });
+  };
+
+  const handleRemove = () => {
+    if (activeLink) {
+      popover.send({
+        type: "remove",
+        schemaType: activeLink.schemaType,
+      });
+    }
+    popover.send({ type: "close" });
+  };
+
+  return (
+    <div
+      ref={dialogRef}
+      className="absolute top-full left-0 z-50 mt-1 w-72 p-3 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-bg-primary)] shadow-lg"
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+          Link
+        </span>
+        <button
+          type="button"
+          onClick={() => popover.send({ type: "close" })}
+          className="p-1 rounded hover:bg-[var(--kyro-surface-accent)]"
+        >
+          <X className="w-3.5 h-3.5 text-[var(--kyro-text-muted)]" />
+        </button>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <div className="flex gap-1.5">
+          <input
+            ref={inputRef}
+            name="href"
+            type="url"
+            defaultValue={currentHref || "https://"}
+            placeholder="Enter URL..."
+            className="flex-1 px-2.5 py-1.5 text-sm rounded border border-[var(--kyro-border)] bg-transparent text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
+          />
+          <button
+            type="submit"
+            className="px-2.5 py-1.5 text-sm rounded bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+          >
+            {activeLink ? "Update" : "Add"}
+          </button>
+        </div>
+        {activeLink && (
+          <button
+            type="button"
+            onClick={handleRemove}
+            className="w-full text-xs text-[var(--kyro-error)] hover:opacity-80 flex items-center justify-center gap-1 py-1"
+          >
+            <ExternalLink className="w-3 h-3" />
+            Remove link
+          </button>
+        )}
+      </form>
+    </div>
+  );
+};
+
+const StyleSelector: React.FC = () => {
+  const schema = useToolbarSchema({});
+  const editor = useEditor();
+  const { snapshot, send } = useStyleSelector({
+    schemaTypes: schema.styles || [],
+  });
+  if (!snapshot.matches("enabled")) return null;
+  const activeStyle = snapshot.context.activeStyle || "normal";
+
+  return (
+    <div className="relative">
+      <select
+        value={activeStyle}
+        onChange={(e) => {
+          send({ type: "toggle", style: e.target.value as any });
+          editor.send({ type: "focus" });
+        }}
+        className="appearance-none bg-transparent text-sm pr-6 pl-2 py-1 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
+      >
+        {schema.styles?.map((s) => (
+          <option key={s.name} value={s.name}>
+            {s.title}
+          </option>
+        ))}
+      </select>
+      <ChevronDown className="w-3 h-3 absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]" />
+    </div>
+  );
+};
+
+const Toolbar: React.FC = () => {
+  const { snapshot: historySnapshot, send: historySend } = useHistoryButtons();
+  return (
+    <div className="relative flex items-center gap-0.5 p-1.5 border-b border-[var(--kyro-border)]">
+      <FocusRestoringButton
+        disabled={!historySnapshot.matches("enabled")}
+        onClick={() => historySend({ type: "history.undo" })}
+        title="Undo"
+        className="p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30"
+      >
+        <Undo className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+      </FocusRestoringButton>
+      <FocusRestoringButton
+        disabled={!historySnapshot.matches("enabled")}
+        onClick={() => historySend({ type: "history.redo" })}
+        title="Redo"
+        className="p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30"
+      >
+        <Redo className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+      </FocusRestoringButton>
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <StyleSelector />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <DecoratorButton name="strong" title="Bold" />
+      <DecoratorButton name="em" title="Italic" />
+      <DecoratorButton name="underline" title="Underline" />
+      <DecoratorButton name="strikeThrough" title="Strikethrough" />
+      <DecoratorButton name="code" title="Code" />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <AnnotationButton name="link" title="Link" />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <ListButton name="bullet" title="Bullet List" />
+      <ListButton name="number" title="Numbered List" />
+      <LinkDialog />
+    </div>
+  );
+};
+
+const EditorInner: React.FC<{
+  onChange: (blocks: any[]) => void;
+  disabled?: boolean;
+}> = ({ onChange, disabled }) => {
+  return (
+    <>
+      <Toolbar />
+      <PortableTextEditable
+        className="min-h-[200px] p-4 focus:outline-none text-[var(--kyro-text-primary)]"
+        placeholder="Start typing..."
+        readOnly={disabled}
+        renderStyle={renderStyle}
+        renderDecorator={renderDecorator}
+        renderBlock={renderBlock}
+        renderListItem={renderListItem}
+        renderAnnotation={renderAnnotation}
+      />
+    </>
+  );
+};
+
+export const EditorClient: React.FC<EditorClientProps> = ({
+  initialValue,
+  onChange,
+  disabled,
+}) => {
+  const [value, setValue] = useState(() => sanitizeInitialValue(initialValue));
+  const prevInitialValueRef = useRef(initialValue);
+
+  useEffect(() => {
+    const sanitized = sanitizeInitialValue(initialValue);
+    const prevSanitized = sanitizeInitialValue(prevInitialValueRef.current);
+    if (JSON.stringify(sanitized) !== JSON.stringify(prevSanitized)) {
+      setValue(sanitized);
+      prevInitialValueRef.current = initialValue;
+    }
+  }, [initialValue]);
+
+  const handleChange = useCallback(
+    (newValue: any) => {
+      setValue(newValue);
+      onChange(newValue);
+    },
+    [onChange],
+  );
+
+  return (
+    <EditorProvider
+      key={JSON.stringify(value)}
+      initialConfig={{
+        schemaDefinition: schemaDefinition as any,
+        initialValue: value,
+      }}
+    >
+      <EventListenerPlugin
+        on={(event: any) => {
+          if (event.type === "mutation" && event.value) {
+            handleChange(event.value);
+          }
+        }}
+      />
+      <EditorInner onChange={handleChange} disabled={disabled} />
+    </EditorProvider>
+  );
+};
+
+export default EditorClient;

package/src/components/fields/HeadingField.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface HeadingFieldProps {
+  text?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const HeadingField: React.FC<HeadingFieldProps> = ({
+  text = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "" : "space-y-3"}>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => onChange("text", e.target.value)}
+        className={inputClass}
+        placeholder="Enter heading text..."
+      />
+    </div>
+  );
+};
+
+export default HeadingField;

package/src/components/fields/HeroField.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+
+interface HeroFieldProps {
+  heading?: string;
+  subheading?: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const HeroField: React.FC<HeroFieldProps> = ({
+  heading = "",
+  subheading = "",
+  ctaText = "",
+  ctaUrl = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  const textareaClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[50px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[80px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <input
+          type="text"
+          value={heading}
+          onChange={(e) => onChange("heading", e.target.value)}
+          className={`${inputClass} font-bold text-base`}
+          placeholder="Hero heading..."
+        />
+        <textarea
+          value={subheading}
+          onChange={(e) => onChange("subheading", e.target.value)}
+          className={textareaClass}
+          placeholder="Hero subheading..."
+        />
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={ctaText}
+            onChange={(e) => onChange("ctaText", e.target.value)}
+            className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+            placeholder="CTA text..."
+          />
+          <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+          <input
+            type="url"
+            value={ctaUrl}
+            onChange={(e) => onChange("ctaUrl", e.target.value)}
+            className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+            placeholder="https://..."
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <input
+        type="text"
+        value={heading}
+        onChange={(e) => onChange("heading", e.target.value)}
+        className={`${inputClass} font-bold text-base`}
+        placeholder="Hero heading..."
+      />
+      <textarea
+        value={subheading}
+        onChange={(e) => onChange("subheading", e.target.value)}
+        className={textareaClass}
+        placeholder="Hero subheading..."
+      />
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={ctaText}
+          onChange={(e) => onChange("ctaText", e.target.value)}
+          className="flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+          placeholder="CTA text..."
+        />
+        <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+        <input
+          type="url"
+          value={ctaUrl}
+          onChange={(e) => onChange("ctaUrl", e.target.value)}
+          className="flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+          placeholder="https://..."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HeroField;