@drawnagency/primitives 0.1.0

package/src/components/sections/MediaGrid/MediaGrid.tsx

@@ -0,0 +1,219 @@
+import type { MediaReference } from "../../../schemas/shared";
+import type { SectionContent } from "../../../schemas/sections";
+import { cn } from "../../../lib/cn";
+import { gridColsClass } from "../../../lib/grid";
+import { EditableGrid } from "../../primitives/EditableGrid";
+import { ResolvedMedia } from "../../primitives/ResolvedMedia";
+import { ImageSettingsForm, DoDontImageSettingsForm } from "../../primitives/MediaSettingsForms";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import type { ReactNode } from "react";
+import { Check, X } from "lucide-react";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+
+interface Props {
+  media: MediaReference[];
+  columns: number;
+  square?: boolean;
+  border?: boolean;
+  crop?: boolean;
+  showCaptions?: boolean;
+  sectionType?: string;
+  onChange?: (content: SectionContent) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+export default function MediaGrid({ media, columns, square, border, crop, showCaptions, sectionType, onChange, openModal }: Props) {
+  if (onChange && openModal) {
+    return (
+      <MediaGridEditable
+        media={media}
+        columns={columns}
+        square={square}
+        border={border}
+        crop={crop}
+        showCaptions={showCaptions}
+        sectionType={sectionType}
+        onChange={onChange}
+        openModal={openModal}
+      />
+    );
+  }
+
+  return (
+    <div className={cn("grid gap-4", gridColsClass[columns] || "grid-cols-1")}>
+      {media.map((item, i) => (
+        <MediaGridItem
+          key={i}
+          item={item}
+          isEditMode={false}
+          square={square}
+          border={border}
+          crop={crop}
+          showCaptions={showCaptions}
+        />
+      ))}
+    </div>
+  );
+}
+
+function MediaGridEditable({ media, columns, square, border, crop, showCaptions, sectionType = "media_grid", onChange, openModal }: Props & { onChange: (content: SectionContent) => void; openModal: (title: string, content: ReactNode) => void }) {
+  const mediaLibrary = useMediaLibrary();
+
+  const opts = square || border || crop || showCaptions
+    ? { options: { square, border, crop, showCaptions } }
+    : {};
+
+  const createItem = (): MediaReference =>
+    sectionType === "do_dont_grid"
+      ? { type: "doDontImage", imageId: "", doDont: "do" }
+      : { type: "image", imageId: "" };
+
+  const handleItemSettings = (index: number) => {
+    const item = media[index];
+
+    if (item.type === "doDontImage") {
+      openModal(
+        "Image Settings",
+        <DoDontImageSettingsForm
+          border={item.border}
+          objectFit={item.objectFit}
+          doDont={item.doDont}
+          onChange={(updated) => {
+            const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
+            onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
+          }}
+        />,
+      );
+    } else {
+      openModal(
+        "Image Settings",
+        <ImageSettingsForm
+          border={item.border}
+          objectFit={item.objectFit}
+          onChange={(updated) => {
+            const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
+            onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
+          }}
+        />,
+      );
+    }
+  };
+
+  const handleItemImageClick = (index: number) => {
+    mediaLibrary?.openSelectModal((imageId) => {
+      const newMedia = media.map((m, i) => i === index ? { ...m, imageId } : m);
+      onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
+    });
+  };
+
+  return (
+    <EditableGrid
+      items={media}
+      columns={columns}
+      onChange={(newMedia) =>
+        onChange({ type: sectionType, content: { columns, media: newMedia as MediaReference[] }, ...opts } as SectionContent)
+      }
+      createItem={createItem}
+      isEditMode={true}
+      onItemSettings={handleItemSettings}
+      onItemImageClick={mediaLibrary ? handleItemImageClick : undefined}
+      chromeTopClass={sectionType === "do_dont_grid" ? "top-[50px]" : undefined}
+      renderItem={(item, { isEditMode, index }) => (
+        <MediaGridItem
+          item={item}
+          isEditMode={isEditMode}
+          square={square}
+          border={border}
+          crop={crop}
+          showCaptions={showCaptions}
+          onCaptionChange={(caption) => {
+            const newMedia = media.map((m, i) => i === index ? { ...m, caption: caption || undefined } : m);
+            onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
+          }}
+        />
+      )}
+    />
+  );
+}
+
+function MediaGridItem({
+  item,
+  isEditMode,
+  square,
+  border,
+  crop,
+  showCaptions,
+  onCaptionChange,
+}: {
+  item: MediaReference;
+  isEditMode: boolean;
+  square?: boolean;
+  border?: boolean;
+  crop?: boolean;
+  showCaptions?: boolean;
+  onCaptionChange?: (caption: string) => void;
+}) {
+  const isDoDont = item.type === "doDontImage";
+
+  const showBorder = item.border ?? border;
+  const itemFit = item.objectFit ?? (crop ? "cover" : undefined);
+
+  const fitClass = itemFit === "cover" ? "object-cover" : "object-contain";
+
+  const captionStr = item.caption
+    ? (Array.isArray(item.caption) ? item.caption.join("\n") : item.caption)
+    : "";
+
+  const media = (
+    <ResolvedMedia
+      imageId={item.imageId || undefined}
+      className="h-full w-full"
+      imgClassName={fitClass}
+    />
+  );
+
+  return (
+    <figure>
+      {isDoDont && (
+        <div className="flex h-10 items-center justify-center pb-1">
+          {item.doDont === "do"
+            ? <Check size={28} className="text-green-600" />
+            : <X size={28} className="text-red-600" />
+          }
+        </div>
+      )}
+
+      <div className={cn(
+        "overflow-hidden rounded-md",
+        showBorder && "border border-base-200",
+        square && "aspect-square",
+      )}>
+        {item.type === "linkedImage" && !isEditMode ? (
+          <a href={item.href} target={item.target} className="group block">
+            {media}
+            {item.linkText && (
+              <span className="mt-2 block text-sm text-primary group-hover:underline">{item.linkText}</span>
+            )}
+          </a>
+        ) : media}
+      </div>
+
+      {showCaptions && (
+        <figcaption className="mt-2 min-h-[1em] text-sm text-base-contrast-light">
+          {isEditMode && onCaptionChange ? (
+            <EditablePlainText
+              tag="span"
+              value={captionStr}
+              onChange={onCaptionChange}
+              isEditMode={true}
+              placeholder="Caption"
+              className="block min-h-[1em]"
+            />
+          ) : (
+            captionStr || " "
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { MediaReferenceSchema } from "../../../schemas/shared";
+import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
+import MediaGrid from "./MediaGrid";
+
+const schema = z.object({
+  type: z.literal("media_grid"),
+  content: z.object({
+    columns: z.number().int().min(1).max(5),
+    media: z.array(MediaReferenceSchema),
+  }),
+  options: MediaGridOptionsSchema,
+});
+
+export default defineSection({
+  type: "media_grid",
+  label: "Media Grid",
+  schema,
+  component: ({ content, options, onChange, openModal }) => (
+    <MediaGrid
+      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: "media_grid" as const,
+    content: { columns: 2, media: [{ type: "image" as const, imageId: "" }] },
+    options: {},
+  }),
+  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 },
+  },
+});

package/src/components/sections/Prose/Prose.tsx

@@ -0,0 +1,34 @@
+import { EditableRichText } from "../../primitives/EditableRichText";
+import { sanitizeHtml } from "../../../lib/sanitize";
+import type { SectionContent } from "../../../schemas/sections";
+
+interface Props {
+  body: string;
+  onChange?: (content: SectionContent) => void;
+}
+
+export default function Prose({ body, onChange }: Props) {
+  if (onChange) {
+    return (
+      <div className="prose-content">
+        <EditableRichText
+          value={body}
+          onChange={(html) =>
+            onChange({ type: "prose", content: { body: html } })
+          }
+          isEditMode={true}
+          preset="rich"
+        />
+      </div>
+    );
+  }
+
+  // View mode: renders server-side via Astro SSR; content comes from trusted project JSON files.
+  // eslint-disable-next-line react/no-danger
+  return (
+    <div
+      className="prose-content"
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }}
+    />
+  );
+}

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

@@ -0,0 +1,18 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import Prose from "./Prose";
+
+const schema = z.object({
+  type: z.literal("prose"),
+  content: z.object({ body: z.string() }),
+});
+
+export default defineSection({
+  type: "prose",
+  label: "Prose",
+  schema,
+  component: ({ content, onChange }) => (
+    <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />
+  ),
+  defaults: () => ({ type: "prose" as const, content: { body: "<p></p>" } }),
+});

package/src/components/sections/SectionLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+const categoryMap: Record<string, string> = {
+  link_heading: "section-heading",
+  sub_heading: "section-subheading",
+  sub_sub_heading: "section-subheading",
+};
+
+function getSectionCategory(type: string): string {
+  return categoryMap[type] ?? "section-content";
+}
+
+interface Props {
+  type: string;
+  status?: string;
+  dimNonPublished?: boolean;
+  children: ReactNode;
+}
+
+export function SectionLayout({ type, status, dimNonPublished, children }: Props) {
+  const isDimmed = dimNonPublished && status && status !== "published";
+
+  return (
+    <div className={cn("section-wrapper group", getSectionCategory(type), isDimmed && "opacity-50")}>
+      {children}
+    </div>
+  );
+}
+
+export { getSectionCategory };

package/src/components/sections/SplitContent/SplitContent.tsx

@@ -0,0 +1,77 @@
+import { cn } from "../../../lib/cn";
+import { sanitizeHtml } from "../../../lib/sanitize";
+import { ResolvedMedia } from "../../primitives/ResolvedMedia";
+import { EditableRichText } from "../../primitives/EditableRichText";
+import { IconButton } from "../../shared/IconButton";
+import type { SectionContent } from "../../../schemas/sections";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+import { ImageIcon } from "lucide-react";
+
+interface Props {
+  imageId: string | undefined;
+  body: string;
+  border?: boolean;
+  imagePosition?: "left" | "right";
+  onChange?: (content: SectionContent) => void;
+}
+
+export default function SplitContent({ imageId, body, border, imagePosition = "left", onChange }: Props) {
+  const mediaLibrary = useMediaLibrary();
+
+  const handleImageChange = (newImageId: string) => {
+    onChange?.({
+      type: "split_content",
+      content: { imageId: newImageId, body },
+      options: { border, imagePosition },
+    });
+  };
+
+  const handleBodyChange = (html: string) => {
+    onChange?.({
+      type: "split_content",
+      content: { imageId, body: html },
+      options: { border, imagePosition },
+    });
+  };
+
+  const handleImageClick = () => {
+    mediaLibrary?.openSelectModal(handleImageChange);
+  };
+
+  return (
+    <div className={cn(
+      "flex flex-col gap-6 lg:flex-row lg:items-start",
+      imagePosition === "right" && "lg:flex-row-reverse",
+    )}>
+      <div className={cn("group/img relative flex-shrink-0 lg:w-1/2", border && "overflow-hidden rounded-md border border-base-200")}>
+        <ResolvedMedia
+          imageId={imageId}
+          className="w-full"
+        />
+        {onChange && mediaLibrary && (
+          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity group-hover/img:opacity-100">
+            <IconButton
+              icon={<ImageIcon size={16} />}
+              label="Change image"
+              onClick={handleImageClick}
+              className="bg-base/80 shadow-sm"
+            />
+          </div>
+        )}
+      </div>
+      <div className="prose-content lg:w-1/2">
+        {onChange ? (
+          <EditableRichText
+            value={body}
+            onChange={handleBodyChange}
+            isEditMode={true}
+            preset="rich"
+          />
+        ) : (
+          // eslint-disable-next-line react/no-danger
+          <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/sections/SplitContent/SplitContentSettings.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { Select } from "../../shared/Select";
+import { Checkbox } from "../../shared/Checkbox";
+
+export function SplitContentSettings({
+  imagePosition: initialPos,
+  border: initialBorder,
+  onChange,
+}: {
+  imagePosition: "left" | "right";
+  border: boolean;
+  onChange: (values: { imagePosition: "left" | "right"; border: boolean }) => void;
+}) {
+  const [imagePosition, setImagePosition] = useState(initialPos);
+  const [border, setBorder] = useState(initialBorder);
+
+  const emit = (overrides: Partial<{ imagePosition: "left" | "right"; border: boolean }>) =>
+    onChange({ imagePosition, border, ...overrides });
+
+  return (
+    <div className="space-y-4">
+      <Select
+        label="Image Position"
+        value={imagePosition}
+        onChange={(val) => {
+          const v = val as "left" | "right";
+          setImagePosition(v);
+          emit({ imagePosition: v });
+        }}
+        options={[
+          { value: "left", label: "Left" },
+          { value: "right", label: "Right" },
+        ]}
+      />
+      <Checkbox
+        checked={border}
+        onChange={(v) => { setBorder(v); emit({ border: v }); }}
+        label="Show border"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import SplitContent from "./SplitContent";
+import { SplitContentSettings } from "./SplitContentSettings";
+
+const schema = z.object({
+  type: z.literal("split_content"),
+  content: z.object({
+    imageId: z.string().optional(),
+    body: z.string(),
+  }),
+  options: z.object({
+    border: z.boolean().optional(),
+    imagePosition: z.enum(["left", "right"]).optional(),
+  }).optional(),
+});
+
+export default defineSection({
+  type: "split_content",
+  label: "Split Content",
+  schema,
+  component: ({ content, options, onChange }) => (
+    <SplitContent
+      imageId={content.content.imageId as string | undefined}
+      body={content.content.body as string}
+      border={options?.border as boolean}
+      imagePosition={options?.imagePosition as "left" | "right"}
+      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+    />
+  ),
+  defaults: () => ({
+    type: "split_content" as const,
+    content: { imageId: undefined, body: "<p></p>" },
+  }),
+  settingsForm: SplitContentSettings,
+});

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

@@ -0,0 +1,27 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { HeadingSection } from "../../primitives/HeadingSection";
+
+const schema = z.object({
+  type: z.literal("sub_heading"),
+  content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
+});
+
+export default defineSection({
+  type: "sub_heading",
+  label: "Sub Heading",
+  schema,
+  component: ({ content, onChange }) => (
+    <HeadingSection
+      heading={content.content.heading}
+      tag="h3"
+      placeholder="Sub heading"
+      className="text-base-contrast"
+      onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
+    />
+  ),
+  defaults: () => ({ type: "sub_heading" as const, content: { heading: "New Sub Heading" } }),
+  settings: {
+    excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
+  },
+});

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

@@ -0,0 +1,27 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { HeadingSection } from "../../primitives/HeadingSection";
+
+const schema = z.object({
+  type: z.literal("sub_sub_heading"),
+  content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
+});
+
+export default defineSection({
+  type: "sub_sub_heading",
+  label: "Sub Sub Heading",
+  schema,
+  component: ({ content, onChange }) => (
+    <HeadingSection
+      heading={content.content.heading}
+      tag="h4"
+      placeholder="Sub sub heading"
+      className="text-lg font-bold text-base-contrast"
+      onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
+    />
+  ),
+  defaults: () => ({ type: "sub_sub_heading" as const, content: { heading: "New Sub Sub Heading" } }),
+  settings: {
+    excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
+  },
+});

package/src/components/sections/ViewRenderer.tsx

@@ -0,0 +1,29 @@
+import "./register";
+import { getSection } from "../../lib/registry";
+import { SectionLayout } from "./SectionLayout";
+import type { LoadedSection } from "../../lib/loader";
+
+interface Props {
+  sections: LoadedSection[];
+}
+
+export default function ViewRenderer({ sections }: Props) {
+  return (
+    <>
+      {sections.map(({ section, meta }) => {
+        const def = getSection(section.type);
+        if (!def) return null;
+        const Component = def.component;
+        return (
+          <SectionLayout key={section.id} type={section.type} status={meta.status} dimNonPublished>
+            <Component
+              content={section}
+              options={"options" in section ? (section.options as Record<string, unknown>) : undefined}
+              isEditMode={false}
+            />
+          </SectionLayout>
+        );
+      })}
+    </>
+  );
+}

package/src/components/sections/register-schemas.ts

@@ -0,0 +1,16 @@
+import { registerSchema } from "../../lib/registry";
+import linkHeading from "./LinkHeading";
+import subHeading from "./SubHeading";
+import subSubHeading from "./SubSubHeading";
+import prose from "./Prose";
+import mediaGrid from "./MediaGrid";
+import splitContent from "./SplitContent";
+import button from "./Button";
+import colors from "./Colors";
+import doDontList from "./DoDontList";
+import doDontImageGrid from "./DoDontMediaGrid";
+import iconList from "./IconList";
+
+[linkHeading, subHeading, subSubHeading, prose, mediaGrid,
+ splitContent, button, colors, doDontList, doDontImageGrid, iconList,
+].forEach((def) => registerSchema(def.type, def.schema));

package/src/components/sections/register.ts

@@ -0,0 +1,16 @@
+import { registerSection } from "../../lib/registry";
+import linkHeading from "./LinkHeading";
+import subHeading from "./SubHeading";
+import subSubHeading from "./SubSubHeading";
+import prose from "./Prose";
+import mediaGrid from "./MediaGrid";
+import splitContent from "./SplitContent";
+import button from "./Button";
+import colors from "./Colors";
+import doDontList from "./DoDontList";
+import doDontImageGrid from "./DoDontMediaGrid";
+import iconList from "./IconList";
+
+[linkHeading, subHeading, subSubHeading, prose, mediaGrid,
+ splitContent, button, colors, doDontList, doDontImageGrid, iconList,
+].forEach(registerSection);