@drawnagency/primitives 0.1.0

package/src/components/primitives/useEditableRichText.ts

@@ -0,0 +1,74 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Editor } from "@tiptap/core";
+import { presets, type PresetName } from "./tiptap-presets";
+
+interface UseEditableRichTextOptions {
+  value: string;
+  onChange: (html: string) => void;
+  preset: PresetName;
+}
+
+interface UseEditableRichTextReturn {
+  isEditorActive: boolean;
+  editor: Editor | null;
+  activate: () => void;
+  deactivate: () => void;
+}
+
+export function useEditableRichText({
+  value,
+  onChange,
+  preset,
+}: UseEditableRichTextOptions): UseEditableRichTextReturn {
+  // Dual ref+state: ref for stable callback access, state for re-renders
+  const editorRef = useRef<Editor | null>(null);
+  const [editor, setEditor] = useState<Editor | null>(null);
+
+  // Refs for latest prop values (avoids stale closures in callbacks)
+  const valueRef = useRef(value);
+  const onChangeRef = useRef(onChange);
+
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const activate = useCallback(() => {
+    if (editorRef.current) return;
+    const ed = new Editor({
+      extensions: presets[preset],
+      content: valueRef.current,
+    });
+    editorRef.current = ed;
+    setEditor(ed);
+  }, [preset]);
+
+  const deactivate = useCallback(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const html = ed.getHTML();
+    ed.destroy();
+    editorRef.current = null;
+    setEditor(null);
+    if (html !== valueRef.current) {
+      onChangeRef.current(html);
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, []);
+
+  return {
+    isEditorActive: editor !== null,
+    editor,
+    activate,
+    deactivate,
+  };
+}

package/src/components/sections/Button/CTAButton.tsx

@@ -0,0 +1,50 @@
+import { cn } from "../../../lib/cn";
+import { Download } from "lucide-react";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import type { SectionContent } from "../../../schemas/sections";
+
+interface Props {
+  text: string;
+  href?: string;
+  target?: string;
+  download?: boolean;
+  onChange?: (content: SectionContent) => void;
+}
+
+export default function Button({ text, href, target, download, onChange }: Props) {
+  const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
+  const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
+
+  if (onChange) {
+    return (
+      <span className={cn(base, variant, "inline-flex items-center gap-2")}>
+        {download && <Download size={16} className="shrink-0" />}
+        <EditablePlainText
+          tag="span"
+          value={text}
+          onChange={(newText) =>
+            onChange({
+              type: "button",
+              content: { text: newText, href, target, download },
+            })
+          }
+          isEditMode={true}
+          placeholder="Button text"
+        />
+      </span>
+    );
+  }
+
+  if (href) {
+    return (
+      <a href={href} target={target} download={download ? "" : undefined} className={cn(base, variant, download && "inline-flex items-center gap-2")}>
+        {download && <Download size={16} className="shrink-0" />}
+        {text}
+      </a>
+    );
+  }
+
+  return (
+    <button className={cn("cursor-pointer", base, variant)}>{text}</button>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import CTAButton from "./CTAButton";
+
+const schema = z.object({
+  type: z.literal("button"),
+  content: z.object({
+    text: z.string(),
+    href: z.string().optional(),
+    target: z.string().optional(),
+    download: z.boolean().optional(),
+  }),
+});
+
+export default defineSection({
+  type: "button",
+  label: "Button",
+  schema,
+  component: ({ content, onChange }) => (
+    <CTAButton
+      text={content.content.text}
+      href={content.content.href}
+      target={content.content.target}
+      download={content.content.download}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+    />
+  ),
+  defaults: () => ({ type: "button" as const, content: { text: "Button" } }),
+  settings: {
+    href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
+    target: {
+      type: "select", label: "Target", default: "_self", target: "content",
+      options: [{ label: "Same tab (_self)", value: "_self" }, { label: "New tab (_blank)", value: "_blank" }],
+    },
+    download: { type: "checkbox", label: "Download link", default: false, target: "content" },
+  },
+});

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

@@ -0,0 +1,45 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { ColorItemSchema } from "../../../schemas/shared";
+import Colors from "../../brandguide/Colors";
+
+const schema = z.object({
+  type: z.literal("colors"),
+  content: z.object({ colors: z.array(ColorItemSchema) }),
+  options: z.object({
+    label: z.string().optional(),
+    columns: z.number().int().min(2).max(4).optional(),
+    collapsing: z.boolean().optional(),
+    showLabel: z.boolean().optional(),
+  }).optional(),
+});
+
+export default defineSection({
+  type: "colors",
+  label: "Colors",
+  schema,
+  component: ({ content, options, onChange, openModal }) => (
+    <Colors
+      colors={content.content.colors}
+      columns={options?.columns as number}
+      label={options?.label as string}
+      collapsing={options?.collapsing as boolean}
+      showLabel={options?.showLabel as boolean}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+      openModal={openModal}
+    />
+  ),
+  defaults: () => ({
+    type: "colors" as const,
+    content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
+  }),
+  settings: {
+    columns: {
+      type: "select", label: "Columns", default: "3", coerce: "number",
+      options: [{ label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
+    },
+    label: { type: "text", label: "Label", default: "", placeholder: "Color Section Label" },
+    showLabel: { type: "checkbox", label: "Show label", default: true },
+    collapsing: { type: "checkbox", label: "Collapsing layout", default: false },
+  },
+});

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

@@ -0,0 +1,43 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import DoDontList from "../../brandguide/DoDontList";
+
+const DoDontItemSchema = z.object({ label: z.string(), text: z.string(), icon: z.string().optional() });
+
+const schema = z.object({
+  type: z.literal("do_dont"),
+  content: z.object({
+    doItems: z.array(DoDontItemSchema),
+    dontItems: z.array(DoDontItemSchema),
+  }),
+  options: z.object({
+    showLabel: z.boolean().optional(),
+    stackText: z.boolean().optional(),
+  }).optional(),
+});
+
+export default defineSection({
+  type: "do_dont",
+  label: "Do / Don't",
+  schema,
+  component: ({ content, options, onChange }) => (
+    <DoDontList
+      doItems={content.content.doItems}
+      dontItems={content.content.dontItems}
+      showLabel={options?.showLabel as boolean}
+      stackText={options?.stackText as boolean}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+    />
+  ),
+  defaults: () => ({
+    type: "do_dont" as const,
+    content: {
+      doItems: [{ label: "Do", text: "" }],
+      dontItems: [{ label: "Don't", text: "" }],
+    },
+  }),
+  settings: {
+    showLabel: { type: "checkbox", label: "Show labels", default: true },
+    stackText: { type: "checkbox", label: "Stack label above text", default: false },
+  },
+});

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

@@ -0,0 +1,53 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { MediaReferenceSchema } from "../../../schemas/shared";
+import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
+import DoDontMediaGrid from "../../brandguide/DoDontMediaGrid";
+
+const schema = z.object({
+  type: z.literal("do_dont_grid"),
+  content: z.object({
+    columns: z.number().int().min(1).max(5),
+    media: z.array(MediaReferenceSchema),
+  }),
+  options: MediaGridOptionsSchema,
+});
+
+export default defineSection({
+  type: "do_dont_grid",
+  label: "Do / Don't Grid",
+  schema,
+  component: ({ content, options, onChange, openModal }) => (
+    <DoDontMediaGrid
+      media={content.content.media}
+      columns={content.content.columns}
+      square={options?.square as boolean}
+      border={options?.border as boolean}
+      crop={options?.crop as boolean}
+      showCaptions={options?.showCaptions as boolean}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+      openModal={openModal}
+    />
+  ),
+  defaults: () => ({
+    type: "do_dont_grid" as const,
+    options: {},
+    content: {
+      columns: 2,
+      media: [
+        { type: "doDontImage" as const, imageId: "", doDont: "do" as const },
+        { type: "doDontImage" as const, imageId: "", doDont: "dont" as const },
+      ],
+    },
+  }),
+  settings: {
+    columns: {
+      type: "select", label: "Columns", default: "2", target: "content", coerce: "number",
+      options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
+    },
+    border: { type: "checkbox", label: "Show border", default: false },
+    square: { type: "checkbox", label: "Square aspect ratio", default: false },
+    crop: { type: "checkbox", label: "Crop to fill", default: false },
+    showCaptions: { type: "checkbox", label: "Show captions", default: false },
+  },
+});