@drawnagency/primitives 0.1.0

package/src/components/primitives/IconPicker.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/cn";
+import { curatedIcons } from "../../lib/icons";
+
+interface IconPickerProps {
+  selected: string | null;
+  onSelect: (iconId: string | null) => void;
+  onClose: () => void;
+  showRemove?: boolean;
+}
+
+export function IconPicker({ selected, onSelect, onClose, showRemove = true }: IconPickerProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [onClose]);
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute z-50 w-56 rounded-lg border border-base-200 bg-base p-2 shadow-lg"
+    >
+      <div className="grid grid-cols-5 gap-1">
+        {curatedIcons.map((entry) => {
+          const Icon = entry.icon;
+          const isSelected = selected === entry.id;
+          return (
+            <button
+              key={entry.id}
+              aria-label={entry.label}
+              className={cn(
+                "cursor-pointer flex h-9 w-9 items-center justify-center rounded transition-colors",
+                "text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
+                isSelected && "ring-2 ring-primary bg-base-accent text-primary",
+              )}
+              onClick={() => onSelect(entry.id)}
+            >
+              <Icon size={18} />
+            </button>
+          );
+        })}
+      </div>
+      {showRemove && (
+        <button
+          className="cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+          onClick={() => onSelect(null)}
+        >
+          Remove icon
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/LinkPopover.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/core";
+import { Button } from "../shared/Button";
+
+interface LinkPopoverProps {
+  editor: Editor;
+  onClose: () => void;
+}
+
+export function LinkPopover({ editor, onClose }: LinkPopoverProps) {
+  const existingAttrs = editor.getAttributes("link");
+  const [url, setUrl] = useState<string>(existingAttrs.href ?? "");
+  const [openInNewTab, setOpenInNewTab] = useState<boolean>(
+    existingAttrs.target === "_blank"
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const hasLink = Boolean(existingAttrs.href);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleApply = () => {
+    if (url.trim()) {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: url.trim(), target: openInNewTab ? "_blank" : null })
+        .run();
+    }
+    onClose();
+  };
+
+  const handleRemove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="flex flex-col gap-2 rounded bg-base-accent p-3 shadow-lg"
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <input
+        ref={inputRef}
+        type="url"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="https://example.com"
+        className="rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary"
+      />
+      <label className="flex cursor-pointer items-center gap-2 text-sm text-base-contrast">
+        <input
+          type="checkbox"
+          checked={openInNewTab}
+          onChange={(e) => setOpenInNewTab(e.target.checked)}
+          className="accent-primary"
+        />
+        Open in new tab
+      </label>
+      <div className="flex gap-2">
+        <Button
+          variant="brand"
+          size="sm"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            handleApply();
+          }}
+        >
+          Apply
+        </Button>
+        {hasLink && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              handleRemove();
+            }}
+          >
+            Remove
+          </Button>
+        )}
+        <Button
+          variant="secondary"
+          size="sm"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onClose();
+          }}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/primitives/MediaSettingsForms.tsx

@@ -0,0 +1,109 @@
+import { useState, useRef } from "react";
+import { cn } from "../../lib/cn";
+import { Check, X } from "lucide-react";
+import { Checkbox } from "../shared/Checkbox";
+import { Select } from "../shared/Select";
+
+export function ImageSettingsForm({
+  border,
+  objectFit,
+  onChange,
+}: {
+  border?: boolean;
+  objectFit?: "cover" | "contain";
+  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain" }) => void;
+}) {
+  const [itemBorder, setItemBorder] = useState(border);
+  const [fit, setFit] = useState(objectFit);
+
+  return (
+    <div className="space-y-4">
+      <Select
+        label="Object fit"
+        value={fit ?? ""}
+        onChange={(v) => {
+          const val = (v || undefined) as "cover" | "contain" | undefined;
+          setFit(val);
+          onChange({ border: itemBorder, objectFit: val });
+        }}
+        options={[
+          { value: "", label: "Default (inherit from grid)" },
+          { value: "contain", label: "Contain" },
+          { value: "cover", label: "Crop to fill" },
+        ]}
+      />
+      <Checkbox
+        checked={itemBorder ?? false}
+        onChange={(v) => {
+          const val = v || undefined;
+          setItemBorder(val);
+          onChange({ border: val, objectFit: fit });
+        }}
+        label="Override border settings"
+      />
+    </div>
+  );
+}
+
+export function DoDontImageSettingsForm({
+  border,
+  objectFit,
+  doDont: initialDoDont,
+  onChange,
+}: {
+  border?: boolean;
+  objectFit?: "cover" | "contain";
+  doDont: "do" | "dont";
+  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain"; doDont: "do" | "dont" }) => void;
+}) {
+  const [doDont, setDoDont] = useState<"do" | "dont">(initialDoDont);
+  const latestRef = useRef<{ border?: boolean; objectFit?: "cover" | "contain" }>({ border, objectFit });
+
+  const handleBaseChange = (updated: { border?: boolean; objectFit?: "cover" | "contain" }) => {
+    latestRef.current = updated;
+    onChange({ ...updated, doDont });
+  };
+
+  return (
+    <div className="space-y-4">
+      <ImageSettingsForm
+        border={border}
+        objectFit={objectFit}
+        onChange={handleBaseChange}
+      />
+      <hr className="border-base-200" />
+      <div className="space-y-2">
+        <button
+          className={cn(
+            "cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors",
+            doDont === "do"
+              ? "border-green-600 bg-base-accent text-base-contrast"
+              : "border-base-200 text-base-contrast-light hover:bg-base-accent",
+          )}
+          onClick={() => {
+            setDoDont("do");
+            onChange({ ...latestRef.current, doDont: "do" });
+          }}
+        >
+          <Check size={16} className="text-green-600" />
+          Do
+        </button>
+        <button
+          className={cn(
+            "cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors",
+            doDont === "dont"
+              ? "border-red-600 bg-base-accent text-base-contrast"
+              : "border-base-200 text-base-contrast-light hover:bg-base-accent",
+          )}
+          onClick={() => {
+            setDoDont("dont");
+            onChange({ ...latestRef.current, doDont: "dont" });
+          }}
+        >
+          <X size={16} className="text-red-600" />
+          Don't
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/primitives/ResolvedMedia.tsx

@@ -0,0 +1,36 @@
+import { cn } from "../../lib/cn";
+import { ImageIcon } from "lucide-react";
+import { useResolvedMedia } from "../../hooks/useResolvedMedia";
+
+interface ResolvedMediaProps {
+  imageId: string | undefined;
+  className?: string;
+  imgClassName?: string;
+}
+
+export function ResolvedMedia({
+  imageId,
+  className,
+  imgClassName,
+}: ResolvedMediaProps) {
+  const { src, srcset, poster, alt, kind } = useResolvedMedia(imageId);
+
+  const mediaClass = cn("h-full w-full", imgClassName);
+
+  return (
+    <div className={className}>
+      {src ? (
+        kind === "video" ? (
+          <video src={src} poster={poster} muted playsInline loop autoPlay className={mediaClass} />
+        ) : (
+          <img src={src} srcSet={srcset} alt={alt} className={mediaClass} />
+        )
+      ) : (
+        <div className="flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50">
+          <ImageIcon size={24} />
+          <span className="text-sm">No Image</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/RichTextToolbar.tsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+import type { Editor } from "@tiptap/core";
+import { cn } from "../../lib/cn";
+import { LinkPopover } from "./LinkPopover";
+import type { PresetName } from "./tiptap-presets";
+
+interface RichTextToolbarProps {
+  editor: Editor;
+  preset: PresetName;
+}
+
+interface ToolbarButtonProps {
+  isActive?: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+function ToolbarButton({ isActive, onClick, title, children }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      aria-pressed={isActive}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      className={cn(
+        "cursor-pointer rounded px-2 py-1 text-sm font-medium transition-colors",
+        isActive
+          ? "bg-primary text-primary-contrast"
+          : "bg-base-accent text-base-contrast hover:opacity-80"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Separator() {
+  return <div className="mx-1 h-5 w-px bg-base-contrast/20" />;
+}
+
+export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
+  const [showLinkPopover, setShowLinkPopover] = useState(false);
+
+  const paragraphClass = editor.getAttributes("paragraph").class as string | undefined;
+
+  const isLargeActive = paragraphClass === "large";
+  const isLeadInActive = paragraphClass === "lead-in";
+
+  const toggleParagraphClass = (cls: string) => {
+    const next = paragraphClass === cls ? null : cls;
+    editor.chain().focus().updateAttributes("paragraph", { class: next }).run();
+  };
+
+  return (
+    <div
+      data-testid="rich-text-toolbar"
+      className="flex items-center gap-1 rounded border border-base-contrast/10 bg-base-accent p-1 shadow-md"
+    >
+      {/* Inline formatting group */}
+      <ToolbarButton
+        isActive={editor.isActive("bold")}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        title="Bold"
+      >
+        <strong>B</strong>
+      </ToolbarButton>
+      <ToolbarButton
+        isActive={editor.isActive("italic")}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        title="Italic"
+      >
+        <em>I</em>
+      </ToolbarButton>
+      <ToolbarButton
+        isActive={editor.isActive("underline")}
+        onClick={() => editor.chain().focus().toggleUnderline().run()}
+        title="Underline"
+      >
+        <span className="underline">U</span>
+      </ToolbarButton>
+
+      {preset === "rich" && (
+        <>
+          <Separator />
+
+          {/* Link */}
+          <div className="relative">
+            <ToolbarButton
+              isActive={editor.isActive("link") || showLinkPopover}
+              onClick={() => setShowLinkPopover((prev) => !prev)}
+              title="Link"
+            >
+              🔗
+            </ToolbarButton>
+            {showLinkPopover && (
+              <div className="absolute left-0 top-full z-50 mt-1">
+                <LinkPopover
+                  editor={editor}
+                  onClose={() => setShowLinkPopover(false)}
+                />
+              </div>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Lists */}
+          <ToolbarButton
+            isActive={editor.isActive("bulletList")}
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            title="Bullet List"
+          >
+            •≡
+          </ToolbarButton>
+          <ToolbarButton
+            isActive={editor.isActive("orderedList")}
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            title="Ordered List"
+          >
+            1≡
+          </ToolbarButton>
+
+          <Separator />
+
+          {/* Paragraph variants */}
+          <ToolbarButton
+            isActive={isLargeActive}
+            onClick={() => toggleParagraphClass("large")}
+            title="Large Paragraph"
+          >
+            Lg
+          </ToolbarButton>
+          <ToolbarButton
+            isActive={isLeadInActive}
+            onClick={() => toggleParagraphClass("lead-in")}
+            title="Lead-In"
+          >
+            Li
+          </ToolbarButton>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/tiptap-presets.ts

@@ -0,0 +1,50 @@
+import type { Extensions } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import { CustomParagraph } from "./CustomParagraph";
+
+/**
+ * Basic preset: inline formatting only.
+ * Bold, italic, underline. No lists, links, or structural elements.
+ */
+const basic: Extensions = [
+  StarterKit.configure({
+    paragraph: false,
+    heading: false,
+    blockquote: false,
+    bulletList: false,
+    orderedList: false,
+    listItem: false,
+    codeBlock: false,
+    horizontalRule: false,
+    code: false,
+    strike: false,
+  }),
+  CustomParagraph,
+  Underline,
+];
+
+/**
+ * Rich preset: full prose editing.
+ * Everything in basic + links, bullet lists, ordered lists,
+ * large paragraph and lead-in variants (via CustomParagraph).
+ */
+const rich: Extensions = [
+  StarterKit.configure({
+    paragraph: false,
+    heading: false,
+    blockquote: false,
+    codeBlock: false,
+    horizontalRule: false,
+    code: false,
+    strike: false,
+  }),
+  CustomParagraph,
+  Underline,
+  Link.configure({ openOnClick: false }),
+];
+
+export type PresetName = "basic" | "rich";
+
+export const presets: Record<PresetName, Extensions> = { basic, rich };

package/src/components/primitives/useEditableCollection.ts

@@ -0,0 +1,104 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+
+interface WrappedItem<T> {
+  id: string;
+  data: T;
+}
+
+interface UseEditableCollectionOptions<T> {
+  items: T[];
+  onChange: (items: T[]) => void;
+  createItem: () => T;
+}
+
+interface UseEditableCollectionReturn<T> {
+  wrappedItems: WrappedItem<T>[];
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  onAdd: () => void;
+  onInsert: (index: number) => void;
+  onRemove: (id: string) => void;
+}
+
+let nextId = 0;
+function uid(): string {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : `_id_${nextId++}_${Date.now()}`;
+}
+
+function wrapItems<T>(items: T[]): WrappedItem<T>[] {
+  return items.map((data) => ({ id: uid(), data }));
+}
+
+export function useEditableCollection<T>({
+  items,
+  onChange,
+  createItem,
+}: UseEditableCollectionOptions<T>): UseEditableCollectionReturn<T> {
+  const [wrappedItems, setWrappedItems] = useState<WrappedItem<T>[]>(() =>
+    wrapItems(items)
+  );
+  const prevItemsRef = useRef(items);
+
+  useEffect(() => {
+    if (items === prevItemsRef.current) return;
+    prevItemsRef.current = items;
+
+    setWrappedItems((prev) => {
+      return items.map((data, i) => {
+        if (i < prev.length) {
+          return { id: prev[i].id, data };
+        }
+        return { id: uid(), data };
+      });
+    });
+  }, [items]);
+
+  const onReorder = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setWrappedItems((prev) => {
+        const next = [...prev];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [onChange]
+  );
+
+  const onAdd = useCallback(() => {
+    const newItem = createItem();
+    setWrappedItems((prev) => {
+      const next = [...prev, { id: uid(), data: newItem }];
+      onChange(next.map((w) => w.data));
+      return next;
+    });
+  }, [createItem, onChange]);
+
+  const onInsert = useCallback(
+    (index: number) => {
+      const newItem = createItem();
+      setWrappedItems((prev) => {
+        const next = [...prev];
+        next.splice(index, 0, { id: uid(), data: newItem });
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [createItem, onChange],
+  );
+
+  const onRemove = useCallback(
+    (id: string) => {
+      setWrappedItems((prev) => {
+        const next = prev.filter((w) => w.id !== id);
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [onChange]
+  );
+
+  return { wrappedItems, onReorder, onAdd, onInsert, onRemove };
+}

package/src/components/primitives/useEditablePlainText.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+interface UseEditablePlainTextOptions {
+  value: string;
+  onChange: (value: string) => void;
+  multiline?: boolean;
+}
+
+interface UseEditablePlainTextReturn {
+  value: string;
+  handleInput: (text: string) => void;
+  handleBlur: () => void;
+  shouldPreventEnter: boolean;
+}
+
+export function useEditablePlainText({
+  value: propValue,
+  onChange,
+  multiline = false,
+}: UseEditablePlainTextOptions): UseEditablePlainTextReturn {
+  const [value, setValue] = useState(propValue);
+  const lastPropValue = useRef(propValue);
+
+  // Sync with external prop changes
+  useEffect(() => {
+    if (propValue !== lastPropValue.current) {
+      setValue(propValue);
+      lastPropValue.current = propValue;
+    }
+  }, [propValue]);
+
+  const handleInput = useCallback((text: string) => {
+    setValue(text);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    if (value !== propValue) {
+      onChange(value);
+      lastPropValue.current = value;
+    }
+  }, [value, propValue, onChange]);
+
+  return {
+    value,
+    handleInput,
+    handleBlur,
+    shouldPreventEnter: !multiline,
+  };
+}