@morphika/andami 0.5.1 → 0.5.2

package/components/builder/editors/MarqueeBlockEditor.tsx

@@ -0,0 +1,621 @@
+"use client";
+
+/**
+ * MarqueeBlockEditor — Settings editor for the marqueeBlock.
+ *
+ * Sections:
+ *   - Content  (items list with add / reorder / remove, inline edit)
+ *   - Motion   (direction, speed, pause on hover)
+ *   - Typography (font size, weight, color, text style, letter spacing, transform)
+ *   - Layout   (gap, row height, vertical padding, background color)
+ *
+ * Items reorder uses native HTML5 drag & drop — no dnd-kit dependency. Kept
+ * intentionally lightweight because the item list rarely exceeds ~20 entries.
+ *
+ * Typography controls apply to both text and separator items — separators
+ * inherit everything except the per-item character.
+ */
+
+import React, { useCallback, useState } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type {
+  MarqueeBlock,
+  MarqueeItem,
+  MarqueeTextItem,
+  MarqueeImageItem,
+  MarqueeSeparatorItem,
+  MarqueeFontSize,
+} from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+} from "./shared";
+import {
+  ContentIcon,
+  AnimationIcon,
+  TypographyIcon,
+  LayoutIcon,
+} from "./section-icons";
+
+// ============================================
+// Constants
+// ============================================
+
+const DIRECTION_OPTIONS = [
+  { value: "left", label: "← Left" },
+  { value: "right", label: "Right →" },
+] as const;
+
+const FONT_SIZE_OPTIONS: { value: MarqueeFontSize; label: string }[] = [
+  { value: "s", label: "S" },
+  { value: "base", label: "Base" },
+  { value: "l", label: "L" },
+  { value: "xl", label: "XL" },
+  { value: "2xl", label: "2XL" },
+  { value: "3xl", label: "3XL" },
+  { value: "4xl", label: "4XL" },
+  { value: "5xl", label: "5XL" },
+  { value: "6xl", label: "6XL" },
+];
+
+const FONT_WEIGHT_OPTIONS = [
+  { value: "400", label: "Normal" },
+  { value: "500", label: "Medium" },
+  { value: "700", label: "Bold" },
+  { value: "900", label: "Black" },
+] as const;
+
+const TEXT_STYLE_OPTIONS = [
+  { value: "solid", label: "Solid" },
+  { value: "outline", label: "Outline" },
+  { value: "italic-outline", label: "Italic outline" },
+] as const;
+
+const TEXT_TRANSFORM_OPTIONS = [
+  { value: "none", label: "Aa" },
+  { value: "uppercase", label: "AA" },
+  { value: "lowercase", label: "aa" },
+] as const;
+
+const ITEM_TYPE_LABEL: Record<MarqueeItem["_type"], string> = {
+  marqueeText: "Text",
+  marqueeImage: "Image",
+  marqueeSeparator: "Separator",
+};
+
+// ============================================
+// Shared mini-components
+// ============================================
+
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const active = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
+              active
+                ? "bg-[#3580f9] text-white"
+                : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+            }`}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function RangeSlider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix = "",
+  decimals = 0,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+  decimals?: number;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-1 accent-[#3580f9] cursor-pointer"
+      />
+      <span className="text-[11px] text-neutral-500 w-14 text-right tabular-nums shrink-0">
+        {value.toFixed(decimals)}{suffix}
+      </span>
+    </div>
+  );
+}
+
+function Dropdown<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value as T)}
+      className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]"
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]"
+    />
+  );
+}
+
+function ColorInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex gap-2 items-center">
+      <input
+        type="color"
+        value={value || "#000000"}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-8 h-8 rounded cursor-pointer border border-neutral-200 bg-transparent p-0 shrink-0"
+      />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="#000000"
+        className="flex-1 rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9]"
+      />
+    </div>
+  );
+}
+
+// ============================================
+// Item row — inline editor per item
+// ============================================
+
+interface ItemRowProps {
+  item: MarqueeItem;
+  index: number;
+  isDragging: boolean;
+  isDragOver: boolean;
+  onUpdate: (updates: Partial<MarqueeItem>) => void;
+  onRemove: () => void;
+  onDragStart: () => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+}
+
+function ItemRow({
+  item,
+  index,
+  isDragging,
+  isDragOver,
+  onUpdate,
+  onRemove,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+}: ItemRowProps) {
+  return (
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={`rounded-lg border p-2 transition-colors ${
+        isDragging
+          ? "opacity-40 border-[#7500d5]"
+          : isDragOver
+          ? "border-[#7500d5] bg-[#7500d5]/5"
+          : "border-neutral-200 bg-white hover:border-neutral-300"
+      }`}
+    >
+      <div className="flex items-center gap-2 mb-1.5">
+        <span
+          className="text-neutral-300 cursor-grab active:cursor-grabbing select-none"
+          title="Drag to reorder"
+          aria-label="Drag handle"
+        >
+          ⋮⋮
+        </span>
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
+          {ITEM_TYPE_LABEL[item._type]} · #{index + 1}
+        </span>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="ml-auto text-[11px] text-neutral-400 hover:text-red-500 transition-colors"
+          aria-label="Remove item"
+        >
+          ✕
+        </button>
+      </div>
+
+      {item._type === "marqueeText" && (
+        <TextInput
+          value={(item as MarqueeTextItem).text}
+          onChange={(v) => onUpdate({ text: v } as Partial<MarqueeTextItem>)}
+          placeholder="Enter text…"
+        />
+      )}
+
+      {item._type === "marqueeImage" && (
+        <div className="space-y-1.5">
+          <TextInput
+            value={(item as MarqueeImageItem).asset_path}
+            onChange={(v) =>
+              onUpdate({ asset_path: v } as Partial<MarqueeImageItem>)
+            }
+            placeholder="Asset path (e.g. logos/client.svg)"
+          />
+          <TextInput
+            value={(item as MarqueeImageItem).alt ?? ""}
+            onChange={(v) =>
+              onUpdate({ alt: v } as Partial<MarqueeImageItem>)
+            }
+            placeholder="Alt text (accessibility)"
+          />
+        </div>
+      )}
+
+      {item._type === "marqueeSeparator" && (
+        <TextInput
+          value={(item as MarqueeSeparatorItem).character}
+          onChange={(v) =>
+            onUpdate({
+              character: v.slice(0, 4),
+            } as Partial<MarqueeSeparatorItem>)
+          }
+          placeholder="• · — / ▸ ★"
+        />
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Main editor
+// ============================================
+
+interface MarqueeBlockEditorProps {
+  block: MarqueeBlock;
+}
+
+/** Small random _key generator — matches the format used elsewhere in the builder. */
+function randomKey(): string {
+  return Math.random().toString(36).slice(2, 12);
+}
+
+export default function MarqueeBlockEditor({ block }: MarqueeBlockEditorProps) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+
+  const update = useCallback(
+    (updates: Partial<MarqueeBlock>) => {
+      updateBlock(block._key, updates as Partial<MarqueeBlock>);
+    },
+    [updateBlock, block._key],
+  );
+
+  const items = block.items ?? [];
+
+  // ─── Item mutations ──────────────────────────────
+  const addItem = useCallback(
+    (type: MarqueeItem["_type"]) => {
+      const base = { _key: randomKey(), _type: type };
+      let newItem: MarqueeItem;
+      if (type === "marqueeText") {
+        newItem = { ...base, _type: "marqueeText", text: "New text" };
+      } else if (type === "marqueeImage") {
+        newItem = {
+          ...base,
+          _type: "marqueeImage",
+          asset_path: "",
+          alt: "",
+          border_radius: 0,
+        };
+      } else {
+        newItem = { ...base, _type: "marqueeSeparator", character: "•" };
+      }
+      update({ items: [...items, newItem] });
+    },
+    [items, update],
+  );
+
+  const updateItem = useCallback(
+    (index: number, updates: Partial<MarqueeItem>) => {
+      const next = items.map((it, i) =>
+        i === index ? ({ ...it, ...updates } as MarqueeItem) : it,
+      );
+      update({ items: next });
+    },
+    [items, update],
+  );
+
+  const removeItem = useCallback(
+    (index: number) => {
+      update({ items: items.filter((_, i) => i !== index) });
+    },
+    [items, update],
+  );
+
+  // ─── Drag-reorder state ──────────────────────────
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  const handleDragStart = (index: number) => {
+    setDraggingIndex(index);
+  };
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    setDragOverIndex(index);
+  };
+  const handleDrop = (targetIndex: number) => {
+    if (draggingIndex === null || draggingIndex === targetIndex) return;
+    const next = [...items];
+    const [moved] = next.splice(draggingIndex, 1);
+    next.splice(targetIndex, 0, moved);
+    update({ items: next });
+  };
+  const handleDragEnd = () => {
+    setDraggingIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // ─── Resolved values (with defaults) ────────────
+  const direction = block.direction ?? "left";
+  const speed = block.speed ?? 60;
+  const pauseOnHover = block.pause_on_hover !== false;
+
+  const fontSize = block.font_size ?? "3xl";
+  const fontWeight = block.font_weight ?? "700";
+  const color = block.color ?? "#111111";
+  const textStyle = block.text_style ?? "solid";
+  const letterSpacing = block.letter_spacing ?? 0;
+  const textTransform = block.text_transform ?? "uppercase";
+
+  const gap = block.gap ?? 48;
+  const rowHeight = block.row_height ?? 120;
+  const paddingY = block.padding_y ?? 16;
+  const backgroundColor = block.background_color ?? "";
+
+  return (
+    <>
+      {/* ─── Content ─────────────────────────────────── */}
+      <SettingsSection title="Content" defaultOpen icon={<ContentIcon />}>
+        <div className="space-y-1.5 mb-2">
+          {items.length === 0 && (
+            <p className="text-[11px] text-neutral-400 italic py-2 text-center">
+              No items yet. Add text, images or separators below.
+            </p>
+          )}
+          {items.map((item, i) => (
+            <ItemRow
+              key={item._key}
+              item={item}
+              index={i}
+              isDragging={draggingIndex === i}
+              isDragOver={dragOverIndex === i && draggingIndex !== i}
+              onUpdate={(updates) => updateItem(i, updates)}
+              onRemove={() => removeItem(i)}
+              onDragStart={() => handleDragStart(i)}
+              onDragOver={(e) => handleDragOver(e, i)}
+              onDrop={() => handleDrop(i)}
+              onDragEnd={handleDragEnd}
+            />
+          ))}
+        </div>
+
+        {/* Add-item buttons */}
+        <div className="grid grid-cols-3 gap-1.5">
+          <button
+            type="button"
+            onClick={() => addItem("marqueeText")}
+            className="px-2 py-1.5 text-[11px] font-medium rounded-lg bg-neutral-100 text-neutral-700 hover:bg-[#3580f9]/10 hover:text-[#3580f9] transition-colors"
+          >
+            + Text
+          </button>
+          <button
+            type="button"
+            onClick={() => addItem("marqueeImage")}
+            className="px-2 py-1.5 text-[11px] font-medium rounded-lg bg-neutral-100 text-neutral-700 hover:bg-[#3580f9]/10 hover:text-[#3580f9] transition-colors"
+          >
+            + Image
+          </button>
+          <button
+            type="button"
+            onClick={() => addItem("marqueeSeparator")}
+            className="px-2 py-1.5 text-[11px] font-medium rounded-lg bg-neutral-100 text-neutral-700 hover:bg-[#3580f9]/10 hover:text-[#3580f9] transition-colors"
+          >
+            + Sep.
+          </button>
+        </div>
+      </SettingsSection>
+
+      {/* ─── Motion ───────────────────────────────────── */}
+      <SettingsSection title="Motion" defaultOpen icon={<AnimationIcon />}>
+        <SettingsField label="Direction">
+          <SegmentedControl
+            options={DIRECTION_OPTIONS}
+            value={direction}
+            onChange={(v) => update({ direction: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Speed">
+          <RangeSlider
+            value={speed}
+            onChange={(v) => update({ speed: Math.round(v) })}
+            min={5}
+            max={600}
+            step={5}
+            suffix=" px/s"
+          />
+        </SettingsField>
+
+        <SettingsField label="Hover">
+          <StyledCheckbox
+            checked={pauseOnHover}
+            onChange={(checked) => update({ pause_on_hover: checked })}
+            label="Pause on hover"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Typography ──────────────────────────────── */}
+      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
+        <SettingsField label="Size">
+          <Dropdown
+            options={FONT_SIZE_OPTIONS}
+            value={fontSize}
+            onChange={(v) => update({ font_size: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Weight">
+          <SegmentedControl
+            options={FONT_WEIGHT_OPTIONS}
+            value={fontWeight}
+            onChange={(v) => update({ font_weight: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Color">
+          <ColorInput
+            value={color}
+            onChange={(v) => update({ color: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <SegmentedControl
+            options={TEXT_STYLE_OPTIONS}
+            value={textStyle}
+            onChange={(v) => update({ text_style: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Tracking">
+          <RangeSlider
+            value={letterSpacing}
+            onChange={(v) => update({ letter_spacing: v })}
+            min={-0.1}
+            max={0.5}
+            step={0.01}
+            decimals={2}
+            suffix="em"
+          />
+        </SettingsField>
+
+        <SettingsField label="Case">
+          <SegmentedControl
+            options={TEXT_TRANSFORM_OPTIONS}
+            value={textTransform}
+            onChange={(v) => update({ text_transform: v })}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Layout ──────────────────────────────────── */}
+      <SettingsSection title="Layout" defaultOpen icon={<LayoutIcon />}>
+        <SettingsField label="Gap">
+          <RangeSlider
+            value={gap}
+            onChange={(v) => update({ gap: Math.round(v) })}
+            min={0}
+            max={200}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Row height">
+          <RangeSlider
+            value={rowHeight}
+            onChange={(v) => update({ row_height: Math.round(v) })}
+            min={24}
+            max={600}
+            step={4}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Padding Y">
+          <RangeSlider
+            value={paddingY}
+            onChange={(v) => update({ padding_y: Math.round(v) })}
+            min={0}
+            max={200}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Background">
+          <ColorInput
+            value={backgroundColor}
+            onChange={(v) => update({ background_color: v })}
+          />
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}