@drawnagency/primitives 0.1.55 → 0.1.57

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

@@ -1,63 +0,0 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { GalleryVerticalEnd } from "lucide-react";
-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",
-  icon: <GalleryVerticalEnd size={18} />,
-  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 },
-      ],
-    },
-  }),
-  getLabel: (content) => {
-    const n = content.content.media.length;
-    return `${n} item${n === 1 ? "" : "s"}`;
-  },
-  getThumbnails: (content) =>
-    content.content.media
-      .filter((m) => m.imageId)
-      .map((m) => ({ type: "image" as const, src: m.imageId })),
-  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/MediaGrid/MediaGrid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MediaGrid.d.ts","sourceRoot":"","sources":["MediaGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAOhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,2CAgChI"}

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

@@ -1,239 +0,0 @@
-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";
-import { ImageDropZone } from "../../primitives/ImageDropZone";
-
-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}
-          invertFrom={item.invertFrom}
-          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}
-          invertFrom={item.invertFrom}
-          onChange={(updated) => {
-            const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
-            onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
-          }}
-        />,
-      );
-    }
-  };
-
-  const setItemImage = (index: number, imageId: string) => {
-    const newMedia = media.map((m, i) => i === index ? { ...m, imageId } : m);
-    onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
-  };
-
-  const handleItemImageClick = (index: number) => {
-    mediaLibrary?.openSelectModal((imageId) => setItemImage(index, imageId));
-  };
-
-  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}
-          onImageReplace={mediaLibrary ? (imageId) => setItemImage(index, imageId) : undefined}
-          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,
-  onImageReplace,
-}: {
-  item: MediaReference;
-  isEditMode: boolean;
-  square?: boolean;
-  border?: boolean;
-  crop?: boolean;
-  showCaptions?: boolean;
-  onCaptionChange?: (caption: string) => void;
-  onImageReplace?: (imageId: 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 itemAny = item as Record<string, unknown>;
-  const resolvedMedia = (
-    <ResolvedMedia
-      imageId={item.imageId || undefined}
-      src={itemAny.src as string | undefined}
-      srcset={itemAny.srcset as string | undefined}
-      alt={itemAny.alt as string | undefined}
-      className="h-full w-full"
-      imgClassName={fitClass}
-      invertFrom={item.invertFrom}
-    />
-  );
-  const media = onImageReplace ? (
-    <ImageDropZone onImageSelected={onImageReplace} className="h-full w-full">
-      {resolvedMedia}
-    </ImageDropZone>
-  ) : (
-    resolvedMedia
-  );
-
-  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.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,wBA+BG"}

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

@@ -1,57 +0,0 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { LayoutGrid } from "lucide-react";
-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",
-  icon: <LayoutGrid size={18} />,
-  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: {},
-  }),
-  getLabel: (content) => {
-    const n = content.content.media.length;
-    return `${n} image${n === 1 ? "" : "s"}`;
-  },
-  getThumbnails: (content) =>
-    content.content.media
-      .filter((m) => m.imageId)
-      .map((m) => ({ type: "image" as const, src: m.imageId })),
-  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/SplitContent/SplitContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SplitContent.d.ts","sourceRoot":"","sources":["SplitContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIhE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,aAAsB,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA2DtG"}

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

@@ -1,84 +0,0 @@
-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 { ImageDropZone } from "../../primitives/ImageDropZone";
-import type { SectionContent } from "../../../schemas/sections";
-import { useMediaLibrary } from "../../shell/MediaLibraryContext";
-import { ImageIcon } from "lucide-react";
-
-interface Props {
-  imageId: string | undefined;
-  src?: string;
-  srcset?: string;
-  alt?: string;
-  body: string;
-  border?: boolean;
-  imagePosition?: "left" | "right";
-  onChange?: (content: SectionContent) => void;
-}
-
-export default function SplitContent({ imageId, src, srcset, alt, 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, src, srcset, alt },
-      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")}>
-        {onChange && mediaLibrary ? (
-          <ImageDropZone onImageSelected={handleImageChange}>
-            <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} className="w-full" />
-          </ImageDropZone>
-        ) : (
-          <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} 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/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAiBA,wBAkBG"}

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

@@ -1,55 +0,0 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { Columns2 } from "lucide-react";
-import SplitContent from "./SplitContent";
-import { stripHtmlToPlainText, truncate } from "../../../lib/text";
-
-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",
-  icon: <Columns2 size={18} />,
-  schema,
-  component: ({ content, options, onChange }) => (
-    <SplitContent
-      imageId={content.content.imageId as string | undefined}
-      src={(content.content as Record<string, unknown>).src as string | undefined}
-      srcset={(content.content as Record<string, unknown>).srcset as string | undefined}
-      alt={(content.content as Record<string, unknown>).alt 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>" },
-  }),
-  settings: {
-    imagePosition: {
-      type: "select",
-      label: "Image Position",
-      default: "left",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Right", value: "right" },
-      ],
-    },
-    border: { type: "checkbox", label: "Show border", default: false },
-  },
-  getLabel: (content) => truncate(stripHtmlToPlainText(content.content.body), 60),
-  getThumbnails: (content) =>
-    content.content.imageId ? [{ type: "image" as const, src: content.content.imageId }] : [],
-});