@drawnagency/primitives 0.1.0

package/src/components/sections/IconList/IconList.tsx

@@ -0,0 +1,462 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import type { SectionContent } from "../../../schemas/sections";
+import { cn } from "../../../lib/cn";
+import { getIcon } from "../../../lib/icons";
+import { useEditableCollection } from "../../primitives/useEditableCollection";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
+import { IconButton } from "../../shared/IconButton";
+import { IconPicker } from "../../primitives/IconPicker";
+
+interface IconListItem {
+  label: string;
+  text: string;
+  icon?: string;
+}
+
+interface Props {
+  items: IconListItem[];
+  icon?: string | null;
+  showLabel?: boolean;
+  stackText?: boolean;
+  labelClassName?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  onChange?: (content: SectionContent) => void;
+  onItemsChange?: (items: IconListItem[]) => void;
+}
+
+export default function IconList({
+  items,
+  icon = null,
+  showLabel = true,
+  stackText = false,
+  labelClassName = "font-bold text-base-contrast",
+  textClassName = "text-base-contrast-light",
+  iconClassName = "text-primary",
+  onChange,
+  onItemsChange,
+}: Props) {
+  const isEditMode = !!onChange || !!onItemsChange;
+
+  const emitItems = useCallback(
+    (newItems: IconListItem[]) => {
+      onChange?.({
+        type: "icon_list",
+        content: { items: newItems },
+        options: { icon, showLabel, stackText },
+      });
+      onItemsChange?.(newItems);
+    },
+    [onChange, onItemsChange, icon, showLabel, stackText],
+  );
+
+  if (!isEditMode) {
+    return (
+      <ViewIconList
+        items={items}
+        defaultIcon={icon}
+        showLabel={showLabel}
+        stackText={stackText}
+        labelClassName={labelClassName}
+        textClassName={textClassName}
+        iconClassName={iconClassName}
+      />
+    );
+  }
+
+  return (
+    <EditIconList
+      items={items}
+      defaultIcon={icon}
+      showLabel={showLabel}
+      stackText={stackText}
+      labelClassName={labelClassName}
+      textClassName={textClassName}
+      iconClassName={iconClassName}
+      onItemsChange={emitItems}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Resolve the effective icon for an item: per-item override > section default
+// ---------------------------------------------------------------------------
+
+function resolveIcon(item: IconListItem, defaultIcon: string | null | undefined) {
+  const id = item.icon ?? defaultIcon;
+  return id ? getIcon(id) : null;
+}
+
+// ---------------------------------------------------------------------------
+// View mode
+// ---------------------------------------------------------------------------
+
+function ViewIconList({
+  items,
+  defaultIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName,
+}: {
+  items: IconListItem[];
+  defaultIcon: string | null | undefined;
+  showLabel: boolean;
+  stackText: boolean;
+  labelClassName: string;
+  textClassName: string;
+  iconClassName: string;
+}) {
+  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+
+  return (
+    <div className="grid gap-4 pb-4">
+      {items.map((item, i) => {
+        const iconEntry = resolveIcon(item, defaultIcon);
+        return (
+          <div
+            key={i}
+            className={cn(
+              "grid gap-x-3",
+              hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
+            )}
+          >
+            {hasAnyIcon && (
+              <div
+                data-testid="icon-list-icon"
+                className={cn("flex items-start pt-0.5", iconClassName)}
+              >
+                {iconEntry && <iconEntry.icon size={18} />}
+              </div>
+            )}
+            <div
+              data-testid="icon-list-content"
+              className={stackText ? "flex flex-col" : undefined}
+            >
+              {showLabel && (
+                <span className={labelClassName}>{item.label}{!stackText && " "}</span>
+              )}
+              <span className={textClassName}>{item.text}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Edit mode
+// ---------------------------------------------------------------------------
+
+function EditIconList({
+  items,
+  defaultIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName,
+  onItemsChange,
+}: {
+  items: IconListItem[];
+  defaultIcon: string | null | undefined;
+  showLabel: boolean;
+  stackText: boolean;
+  labelClassName: string;
+  textClassName: string;
+  iconClassName: string;
+  onItemsChange: (items: IconListItem[]) => void;
+}) {
+  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+    items,
+    onChange: onItemsChange,
+    createItem: () => ({ label: "", text: "" }),
+  });
+
+  const [dragState, setDragState] = useState<{
+    sourceId: string | null;
+    targetId: string | null;
+  }>({ sourceId: null, targetId: null });
+
+  const updateItem = useCallback(
+    (index: number, patch: Partial<IconListItem>) => {
+      const updated = wrappedItems.map((w, i) =>
+        i === index ? { ...w.data, ...patch } : w.data,
+      );
+      onItemsChange(updated);
+    },
+    [wrappedItems, onItemsChange],
+  );
+
+  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+
+  return (
+    <div className="group/list relative grid gap-4 pb-4">
+      {wrappedItems.map((wrapped, index) => (
+        <EditableRow
+          key={wrapped.id}
+          id={wrapped.id}
+          index={index}
+          item={wrapped.data}
+          defaultIcon={defaultIcon}
+          hasAnyIcon={hasAnyIcon}
+          showLabel={showLabel}
+          stackText={stackText}
+          labelClassName={labelClassName}
+          textClassName={textClassName}
+          iconClassName={iconClassName}
+          dragState={dragState}
+          setDragState={setDragState}
+          onReorder={onReorder}
+          onRemove={onRemove}
+          onUpdateItem={(patch) => updateItem(index, patch)}
+        />
+      ))}
+
+      <TrailingDropZone
+        index={wrappedItems.length}
+        dragState={dragState}
+        setDragState={setDragState}
+        onReorder={onReorder}
+      />
+
+      {/* Add button — centered below list, visible on list hover */}
+      <IconButton
+        icon={<AddIcon size={16} />}
+        label="Add item"
+        size="lg"
+        intent="primary"
+        onClick={onAdd}
+        className="absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/list:opacity-100"
+      />
+    </div>
+  );
+}
+
+function EditableRow({
+  id,
+  index,
+  item,
+  defaultIcon,
+  hasAnyIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName,
+  dragState,
+  setDragState,
+  onReorder,
+  onRemove,
+  onUpdateItem,
+}: {
+  id: string;
+  index: number;
+  item: IconListItem;
+  defaultIcon: string | null | undefined;
+  hasAnyIcon: boolean;
+  showLabel: boolean;
+  stackText: boolean;
+  labelClassName: string;
+  textClassName: string;
+  iconClassName: string;
+  dragState: { sourceId: string | null; targetId: string | null };
+  setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
+  onReorder: (from: number, to: number) => void;
+  onRemove: (id: string) => void;
+  onUpdateItem: (patch: Partial<IconListItem>) => void;
+}) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [iconHover, setIconHover] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const iconEntry = resolveIcon(item, defaultIcon);
+  const effectiveIconId = item.icon ?? defaultIcon ?? null;
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+
+    const cleanupDraggable = draggable({
+      element: handle,
+      getInitialData: () => ({ dragType: "icon-list-row", id, index }),
+      onDragStart: () => setDragState({ sourceId: id, targetId: null }),
+      onDrop: () => setDragState({ sourceId: null, targetId: null }),
+    });
+
+    const cleanupDropTarget = dropTargetForElements({
+      element: row,
+      canDrop: ({ source }) => source.data.dragType === "icon-list-row",
+      getData: () => ({ id, index }),
+      onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
+      onDragLeave: () =>
+        setDragState((prev) =>
+          prev.targetId === id ? { ...prev, targetId: null } : prev,
+        ),
+      onDrop: ({ source }) => {
+        const fromIndex = source.data.index as number;
+        if (fromIndex !== index) onReorder(fromIndex, index);
+      },
+    });
+
+    return () => {
+      cleanupDraggable();
+      cleanupDropTarget();
+    };
+  }, [id, index, onReorder, setDragState]);
+
+  const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+
+  return (
+    <div
+      ref={rowRef}
+      className={cn(
+        "group/row relative grid gap-x-3",
+        hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
+        isDropTarget && "border-t-2 border-primary",
+      )}
+    >
+      {/* Drag handle — absolute in left gutter, no layout shift */}
+      <IconButton
+        ref={handleRef}
+        icon={<DragHandle size={16} />}
+        label="Drag to reorder"
+        size="sm"
+        className={cn(
+          "absolute -left-7 top-0 shrink-0 cursor-grab rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast active:cursor-grabbing",
+          iconHover
+            ? "opacity-0 pointer-events-none"
+            : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
+        )}
+        tabIndex={-1}
+      />
+
+      {/* Icon — matches ViewIconList layout: 24px column, flex items-start pt-0.5 */}
+      {hasAnyIcon && (
+        <div
+          className={cn("relative flex items-start pt-0.5", iconClassName)}
+          onMouseEnter={() => setIconHover(true)}
+          onMouseLeave={() => setIconHover(false)}
+        >
+          {iconEntry ? (
+            <button
+              className="cursor-pointer transition-opacity hover:opacity-70"
+              aria-label="Change icon"
+              onClick={() => setPickerOpen((prev) => !prev)}
+            >
+              <iconEntry.icon size={18} />
+            </button>
+          ) : null}
+
+          {iconHover && !pickerOpen && iconEntry && (
+            <span className="pointer-events-none absolute right-full mr-3 top-0.5 whitespace-nowrap text-xs text-base-contrast-light/80">
+              Edit
+            </span>
+          )}
+
+          {pickerOpen && (
+            <div className="absolute top-full left-0 z-50 mt-1">
+              <IconPicker
+                selected={effectiveIconId}
+                showRemove={false}
+                onSelect={(newIcon) => {
+                  if (newIcon !== null) onUpdateItem({ icon: newIcon });
+                  setPickerOpen(false);
+                  setIconHover(false);
+                }}
+                onClose={() => {
+                  setPickerOpen(false);
+                  setIconHover(false);
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content: label + text — matches ViewIconList layout */}
+      <div className={stackText ? "flex flex-col" : undefined}>
+        {showLabel && (
+          <EditablePlainText
+            tag="span"
+            value={item.label}
+            onChange={(label) => onUpdateItem({ label })}
+            isEditMode={true}
+            placeholder="Label"
+            className={cn(labelClassName, !stackText && "mr-1")}
+          />
+        )}
+        <EditablePlainText
+          tag="span"
+          value={item.text}
+          onChange={(text) => onUpdateItem({ text })}
+          isEditMode={true}
+          placeholder="Text"
+          className={textClassName}
+        />
+      </div>
+
+      {/* Delete button — absolute positioned, no layout shift */}
+      <IconButton
+        icon={<DeleteIcon size={14} />}
+        label="Delete item"
+        size="sm"
+        intent="destructive"
+        onClick={() => onRemove(id)}
+        className="absolute -right-7 top-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
+      />
+    </div>
+  );
+}
+
+function TrailingDropZone({
+  index,
+  dragState,
+  setDragState,
+  onReorder,
+}: {
+  index: number;
+  dragState: { sourceId: string | null; targetId: string | null };
+  setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const trailingId = "__trailing__";
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const cleanup = dropTargetForElements({
+      element: el,
+      canDrop: ({ source }) => source.data.dragType === "icon-list-row",
+      getData: () => ({ id: trailingId, index }),
+      onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
+      onDragLeave: () =>
+        setDragState((prev) =>
+          prev.targetId === trailingId ? { ...prev, targetId: null } : prev,
+        ),
+      onDrop: ({ source }) => {
+        const fromIndex = source.data.index as number;
+        if (fromIndex !== index - 1) onReorder(fromIndex, index - 1);
+      },
+    });
+
+    return cleanup;
+  }, [index, onReorder, setDragState]);
+
+  const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary")}
+    />
+  );
+}

package/src/components/sections/IconList/IconListSettings.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Checkbox } from "../../shared/Checkbox";
+import { FormLabel } from "../../shared/FormLabel";
+import { IconPicker } from "../../primitives/IconPicker";
+import { getIcon } from "../../../lib/icons";
+
+export function IconListSettings({
+  icon: initialIcon,
+  showLabel: initialShowLabel,
+  stackText: initialStackText,
+  onChange,
+}: {
+  icon: string | null;
+  showLabel: boolean;
+  stackText: boolean;
+  onChange: (values: { icon: string | null; showLabel: boolean; stackText: boolean }) => void;
+}) {
+  const [icon, setIcon] = useState(initialIcon);
+  const [showLabel, setShowLabel] = useState(initialShowLabel);
+  const [stackText, setStackText] = useState(initialStackText);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const emit = (overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean }>) =>
+    onChange({ icon, showLabel, stackText, ...overrides });
+
+  const showIcons = icon !== null;
+  const iconEntry = icon ? getIcon(icon) : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <FormLabel htmlFor="icon-picker-btn">Default Icon</FormLabel>
+        <div className="flex items-center gap-2">
+          <button
+            id="icon-picker-btn"
+            className="cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary"
+            onClick={() => setPickerOpen((prev) => !prev)}
+          >
+            {iconEntry && <iconEntry.icon size={16} />}
+            <span>{iconEntry?.label ?? "None"}</span>
+          </button>
+          {icon && (
+            <button
+              className="cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast"
+              onClick={() => { setIcon(null); emit({ icon: null }); }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+        {pickerOpen && (
+          <div className="absolute top-full left-0 z-50 mt-1">
+            <IconPicker
+              selected={icon}
+              onSelect={(newIcon) => {
+                if (newIcon !== null) {
+                  setIcon(newIcon);
+                  emit({ icon: newIcon });
+                }
+                setPickerOpen(false);
+              }}
+              onClose={() => setPickerOpen(false)}
+            />
+          </div>
+        )}
+      </div>
+      <Checkbox
+        checked={showLabel}
+        onChange={(v) => { setShowLabel(v); emit({ showLabel: v }); }}
+        label="Show labels"
+      />
+      {showLabel && (
+        <Checkbox
+          checked={stackText}
+          onChange={(v) => { setStackText(v); emit({ stackText: v }); }}
+          label="Stack label above text"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/sections/IconList/index.tsx

@@ -0,0 +1,36 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import IconList from "./IconList";
+import { IconListSettings } from "./IconListSettings";
+
+const schema = z.object({
+  type: z.literal("icon_list"),
+  content: z.object({
+    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional() })),
+  }),
+  options: z.object({
+    icon: z.string().nullable().optional(),
+    showLabel: z.boolean().optional(),
+    stackText: z.boolean().optional(),
+  }).optional(),
+});
+
+export default defineSection({
+  type: "icon_list",
+  label: "Icon List",
+  schema,
+  component: ({ content, options, onChange }) => (
+    <IconList
+      items={content.content.items}
+      icon={options?.icon as string | null}
+      showLabel={options?.showLabel as boolean}
+      stackText={options?.stackText as boolean}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+    />
+  ),
+  defaults: () => ({
+    type: "icon_list" as const,
+    content: { items: [{ label: "", text: "" }] },
+  }),
+  settingsForm: IconListSettings,
+});

package/src/components/sections/LinkHeading/index.tsx

@@ -0,0 +1,24 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { HeadingSection } from "../../primitives/HeadingSection";
+
+const schema = z.object({
+  type: z.literal("link_heading"),
+  content: z.object({ heading: z.string() }),
+});
+
+export default defineSection({
+  type: "link_heading",
+  label: "Link Heading",
+  schema,
+  component: ({ content, onChange }) => (
+    <HeadingSection
+      heading={content.content.heading}
+      tag="h2"
+      placeholder="Section heading"
+      className="text-primary"
+      onChange={onChange ? (heading: string) => onChange({ type: "link_heading", content: { heading } }) : undefined}
+    />
+  ),
+  defaults: () => ({ type: "link_heading" as const, content: { heading: "New Section" } }),
+});