simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/components/widgets/feature-showcase-widget.tsx

@@ -0,0 +1,118 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn, parseList } from '../../utils/widgetUtils';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { ContentMedia, CTAButton, EyebrowText, Heading, Section } from './_shared';
+
+export type FeatureShowcaseWidgetProps = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+  imagePosition: 'left' | 'right';
+  bulletList: string;
+  ctaLabel: string;
+  ctaHref: string;
+};
+
+export const FeatureShowcaseWidget: ComponentConfig<FeatureShowcaseWidgetProps> = {
+  label: 'Feature showcase (image + bullets)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow (optional)' },
+    title: { type: 'text', label: 'Title' },
+    description: { type: 'textarea', label: 'Description' },
+    imageUrl: createImageField(mediaLibraryAdapter, 'Image URL'),
+    imageAlt: { type: 'text', label: 'Image alt text' },
+    imagePosition: {
+      type: 'select',
+      label: 'Image position',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+    bulletList: { type: 'textarea', label: 'Bullet list (one per line)' },
+    ctaLabel: { type: 'text', label: 'CTA label (optional)' },
+    ctaHref: { type: 'text', label: 'CTA link (optional)' },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Tools built for contributors',
+    description: 'Compose your pages from reusable blocks.',
+    imageUrl: '',
+    imageAlt: '',
+    imagePosition: 'right',
+    bulletList: 'Drag and drop\nLive preview\nNo code required',
+    ctaLabel: '',
+    ctaHref: '',
+  },
+  render: ({
+    eyebrow,
+    title,
+    description,
+    imageUrl,
+    imageAlt,
+    imagePosition,
+    bulletList,
+    ctaLabel,
+    ctaHref,
+  }) => {
+    const bullets = parseList(bulletList);
+    return (
+      <Section variant="default" spacing="loose">
+        <div
+          className={cn(
+            'flex flex-col lg:flex-row items-center gap-12',
+            imagePosition === 'left' ? 'lg:flex-row-reverse' : '',
+          )}
+        >
+          <div className="flex-1">
+            <EyebrowText>{eyebrow}</EyebrowText>
+            <Heading as="h2" size="lg" text={title} />
+            {description && (
+              <RichTextBlock
+                text={description}
+                className="mt-4 text-lg"
+                style={{ color: 'var(--pb-body-color)' }}
+              />
+            )}
+            {bullets.length > 0 && (
+              <ul className="mt-6 space-y-3">
+                {bullets.map((bullet, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                  <li key={`${idx}-${bullet}`} className="flex items-start gap-3">
+                    <svg
+                      className="size-5 text-primary-700 flex-none mt-0.5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <title>Check</title>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                    <span>{renderRichText(bullet)}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {ctaLabel && (
+              <div className="mt-6">
+                <CTAButton label={ctaLabel} href={ctaHref} variant="primary" />
+              </div>
+            )}
+          </div>
+          <div className="flex-1">
+            <ContentMedia imageUrl={imageUrl} imageAlt={imageAlt} aspect="video" />
+          </div>
+        </div>
+      </Section>
+    );
+  },
+};

pagebuilder/components/widgets/gallery-widget.tsx

@@ -0,0 +1,139 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { renderRichText } from './_internal/rich-text';
+import { maskStyle } from './_shared';
+
+export type GalleryItem = {
+  src: string;
+  alt: string;
+};
+
+export type GalleryWidgetProps = {
+  title: string;
+  columns: '2' | '3' | '4' | '5';
+  /**
+   * Organic mask (SVG url, from the tenant's content) clipped over every item
+   * image — e.g. the team "egg" grid. When set, items switch to the egg aspect
+   * (309/382) and lose their square rounding. Empty = the standard square grid.
+   */
+  maskUrl?: string;
+  /**
+   * How each tile is framed. "square" is the default crop. "image" keeps the
+   * source's own portrait proportions and does not crop or round it — for
+   * artwork that already carries its shape (BioGarden's team portraits ship
+   * pre-cut to organic blobs, each one different, so a single CSS mask can't
+   * reproduce them).
+   */
+  itemShape?: 'square' | 'image';
+  items: GalleryItem[];
+};
+
+const COLS_CLASS: Record<GalleryWidgetProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 sm:grid-cols-3',
+  '4': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+  '5': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+};
+
+export const GalleryWidget: ComponentConfig<GalleryWidgetProps> = {
+  label: 'Image gallery',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+        { label: '5', value: '5' },
+      ],
+    },
+    itemShape: {
+      type: 'select',
+      label: 'Item shape',
+      options: [
+        { label: 'Square crop', value: 'square' },
+        { label: "Image's own shape", value: 'image' },
+      ],
+    },
+    maskUrl: {
+      type: 'text',
+      label: 'Item mask URL (organic shape — optional)',
+    },
+    items: {
+      type: 'array',
+      label: 'Items',
+      arrayFields: {
+        src: createImageField(mediaLibraryAdapter, 'Image URL'),
+        alt: { type: 'text', label: 'Alt text' },
+      },
+      defaultItemProps: { src: '', alt: '' },
+      min: 1,
+      max: 24,
+    },
+  },
+  defaultProps: {
+    title: 'Gallery',
+    columns: '3',
+    maskUrl: '',
+    itemShape: 'square',
+    items: [
+      { src: '', alt: '' },
+      { src: '', alt: '' },
+      { src: '', alt: '' },
+    ],
+  },
+  render: ({ title, columns, maskUrl = '', itemShape = 'square', items }) => {
+    const masked = Boolean(maskUrl);
+    const maskCss = masked ? maskStyle(maskUrl) : undefined;
+    // A mask still wins (unchanged behaviour); otherwise "image" tiles keep
+    // their own proportions and are contained rather than cropped.
+    const ownShape = !masked && itemShape === 'image';
+    return (
+      <section className="container mx-auto my-4">
+        {title && (
+          <h2 className="my-8 text-center text-4xl tracking-tight font-light sm:text-5xl lg:text-6xl leading-[1.1]">
+            {renderRichText(title)}
+          </h2>
+        )}
+        {items && items.length > 0 ? (
+          <div className={cn('grid gap-2 sm:gap-4 py-2', COLS_CLASS[columns])}>
+            {items.map((item, idx) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={idx}
+                className={cn(
+                  'overflow-hidden',
+                  masked && 'aspect-[309/382]',
+                  ownShape && 'aspect-[250/309]',
+                  !masked && !ownShape && 'aspect-square rounded',
+                )}
+              >
+                {item.src ? (
+                  <img
+                    src={item.src}
+                    alt={item.alt || ''}
+                    loading="lazy"
+                    className={cn('w-full h-full', ownShape ? 'object-contain' : 'object-cover')}
+                    style={maskCss}
+                  />
+                ) : (
+                  <div
+                    className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300"
+                    style={maskCss}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-gray-500 text-center py-4">
+            Add images in the editor to populate the gallery.
+          </div>
+        )}
+      </section>
+    );
+  },
+};

pagebuilder/components/widgets/grid-widget.tsx

@@ -0,0 +1,59 @@
+import type { ComponentConfig, Slot } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type GridWidgetProps = {
+  columns: '1' | '2' | '3' | '4';
+  gap: 'none' | 'sm' | 'md' | 'lg';
+  grid: Slot;
+};
+
+const COLS_CLASS: Record<GridWidgetProps['columns'], string> = {
+  '1': 'grid-cols-1',
+  '2': 'grid-cols-1 sm:grid-cols-2',
+  '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+
+const GAP_CLASS: Record<GridWidgetProps['gap'], string> = {
+  none: 'gap-0',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-8',
+};
+
+export const GridWidget: ComponentConfig<GridWidgetProps> = {
+  label: 'Grid',
+  fields: {
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { label: '1', value: '1' },
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    gap: {
+      type: 'select',
+      label: 'Gap',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+      ],
+    },
+    grid: { type: 'slot' },
+  },
+  defaultProps: {
+    columns: '3',
+    gap: 'md',
+    grid: [],
+  },
+  render: ({ columns, gap, grid: Grid }) => (
+    <div className={cn('grid', COLS_CLASS[columns], GAP_CLASS[gap])}>
+      <Grid />
+    </div>
+  ),
+};

pagebuilder/components/widgets/hero-widget.tsx

@@ -0,0 +1,292 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createCheckboxField, createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock } from './_internal/rich-text';
+import {
+  BackgroundMedia,
+  ContentMedia,
+  CTAButton,
+  EyebrowText,
+  Heading,
+  maskStyle,
+  Section,
+} from './_shared';
+
+export type HeroWidgetProps = {
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  logoUrl: string;
+  logoAlt: string;
+  imageUrl: string;
+  imageAlt: string;
+  /**
+   * Organic mask (SVG url, from the tenant's content) applied to the side
+   * image in the right/left layouts. Empty = the standard rounded media.
+   */
+  imageMaskUrl?: string;
+  /**
+   * "native" renders supplied transparent artwork exactly as-is — no mask, no
+   * crop — for a photo already cut to its final organic shape. Preferred over
+   * `imageMaskUrl`, which re-derives the silhouette from a hand-kept SVG.
+   */
+  imageShape?: 'rounded' | 'native';
+  imagePosition: 'background' | 'right' | 'left';
+  primaryLabel: string;
+  primaryHref: string;
+  secondaryLabel: string;
+  secondaryHref: string;
+  overlay: boolean;
+  align: 'left' | 'center';
+  surface: 'plain' | 'card';
+};
+
+// Exported so CenteredHeroWidget can render through it without smuggling
+// Puck's ComponentConfig.render signature past the type system.
+export function renderHero({
+  eyebrow,
+  title,
+  subtitle,
+  logoUrl,
+  logoAlt,
+  imageUrl,
+  imageAlt,
+  imageMaskUrl = '',
+  imageShape = 'rounded',
+  imagePosition,
+  primaryLabel,
+  primaryHref,
+  secondaryLabel,
+  secondaryHref,
+  overlay,
+  align,
+  surface,
+}: HeroWidgetProps) {
+  // A brand-logo lockup (e.g. a script wordmark) can stand in for the plain
+  // text title; the title then only feeds screen readers.
+  // Both axes are capped so a tenant can pin the lockup to its Figma box
+  // (BioGarden: 371x268 on the background hero, 445x214 on the side-image
+  // one). `--pb-hero-logo-max-w` defaults to 100%, i.e. the previous
+  // `max-w-full`; the side layout's tokens fall back to the background ones.
+  const logoImg = (side: boolean) =>
+    logoUrl ? (
+      <h1 className={align === 'center' ? 'flex justify-center' : 'flex'}>
+        <img
+          src={logoUrl}
+          alt={logoAlt || title}
+          className={
+            side
+              ? 'max-h-[var(--pb-hero-side-logo-max-h,var(--pb-hero-logo-max-h,14rem))] w-auto max-w-[var(--pb-hero-side-logo-max-w,var(--pb-hero-logo-max-w,100%))] object-contain'
+              : 'max-h-[var(--pb-hero-logo-max-h,14rem)] w-auto max-w-[var(--pb-hero-logo-max-w,100%)] object-contain'
+          }
+        />
+      </h1>
+    ) : null;
+  const heading = logoImg(false);
+
+  if (imagePosition === 'background') {
+    const content = (
+      <>
+        <EyebrowText tone="inverse">{eyebrow}</EyebrowText>
+        {heading ?? <Heading as="h1" size="xl" tone="inverse" text={title} align={align} accent />}
+        {/* Size/weight/opacity are themeable: BioGarden's Figma sets the hero
+				    lede in Body 20M (Medium, full white); the fallbacks keep the
+				    previous regular-weight 90%-white 20px for other tenants. */}
+        {subtitle && (
+          <RichTextBlock
+            text={subtitle}
+            className="mt-6 text-[length:var(--pb-hero-subtitle-size,1.25rem)] font-[number:var(--pb-hero-subtitle-weight,400)] leading-relaxed text-white opacity-[var(--pb-hero-subtitle-opacity,0.9)]"
+          />
+        )}
+        <div
+          className={cn(
+            'flex flex-wrap gap-4 mt-8',
+            align === 'center' ? 'justify-center' : 'justify-start',
+          )}
+        >
+          <CTAButton label={primaryLabel} href={primaryHref} variant="inverse-primary" />
+          <CTAButton label={secondaryLabel} href={secondaryHref} variant="inverse-outline" />
+        </div>
+      </>
+    );
+    return (
+      <section
+        className="relative isolate flex min-h-[var(--pb-hero-min-h,560px)] items-center overflow-hidden bg-slate-900 text-white"
+        // `--pb-hero-pull` (default 0) lets a full-bleed hero slide up under
+        // a normal-flow floating header (the pill nav) so the photo shows
+        // through behind it, as in the BioGarden Figma.
+        style={{ marginTop: 'var(--pb-hero-pull, 0px)' }}
+      >
+        <BackgroundMedia
+          imageUrl={imageUrl}
+          imageAlt={imageAlt}
+          overlay={overlay ? 'dark' : 'none'}
+          fallback="gradient-mesh"
+          objectPosition="var(--pb-hero-image-position, 50% 50%)"
+        />
+        <div className="container mx-auto px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
+          <div
+            className={cn(
+              'relative max-w-3xl text-white',
+              align === 'center' ? 'mx-auto text-center' : '',
+            )}
+          >
+            {surface === 'card' ? (
+              <div className="bg-black/60 p-8 sm:p-12 rounded-lg">{content}</div>
+            ) : (
+              content
+            )}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    // The side-image hero's top/bottom rhythm is its own: the Figma sets the
+    // artwork 152px below the page top (i.e. 52px under the 100px-tall header)
+    // and 100px above the next section, which the symmetric section padding
+    // can't express. Section emits BOTH `py-*` and `lg:py-*`, and the `lg:`
+    // rule is emitted after the unprefixed one, so an unprefixed `pt-*` alone
+    // silently loses at desktop — the override has to be stated for both
+    // breakpoints. Unset, every token resolves to Section's own padding, so
+    // tenants without them are untouched.
+    <Section
+      variant="default"
+      spacing="loose"
+      className="pt-[var(--pb-hero-side-pt,var(--pb-section-py,4rem))] pb-[var(--pb-hero-side-pb,var(--pb-section-py,4rem))] lg:pt-[var(--pb-hero-side-pt,var(--pb-section-py,6rem))] lg:pb-[var(--pb-hero-side-pb,var(--pb-section-py,6rem))]"
+    >
+      <div
+        className={cn(
+          'flex flex-col lg:flex-row items-center gap-12',
+          imagePosition === 'left' ? 'lg:flex-row-reverse' : '',
+        )}
+      >
+        <div className="flex-1">
+          <EyebrowText>{eyebrow}</EyebrowText>
+          {logoImg(true) ?? <Heading as="h1" size="xl" text={title} accent />}
+          {subtitle && (
+            <RichTextBlock
+              text={subtitle}
+              className="mt-6 text-xl leading-relaxed"
+              style={{ color: 'var(--pb-body-color)' }}
+            />
+          )}
+          {/* Both CTAButtons render null when their label is blank, but the
+					    row itself still contributed its `mt-8`, pushing the column's
+					    content up by half that — enough to visibly break the Figma's
+					    "logo vertically centred on the image" in the side layout. */}
+          {(primaryLabel || secondaryLabel) && (
+            <div className="flex flex-wrap gap-4 mt-8">
+              <CTAButton label={primaryLabel} href={primaryHref} variant="primary" />
+              <CTAButton label={secondaryLabel} href={secondaryHref} variant="secondary" />
+            </div>
+          )}
+        </div>
+        <div className="flex-1">
+          {imageShape === 'native' && imageUrl ? (
+            // Supplied cut-out: rendered exactly as delivered, capped to the
+            // Figma's box width. No mask, no crop — the file IS the shape.
+            <img
+              src={imageUrl}
+              alt={imageAlt || title}
+              loading="lazy"
+              className="h-auto w-full max-w-[var(--pb-hero-media-max-w,none)]"
+            />
+          ) : imageMaskUrl && imageUrl ? (
+            // `--pb-hero-media-max-w` / `--pb-hero-media-aspect` pin the
+            // organic cut-out to the Figma's box (BioGarden: 545x481);
+            // unset, the image keeps its previous free-flowing size.
+            <img
+              src={imageUrl}
+              alt={imageAlt || title}
+              loading="lazy"
+              className="h-auto w-full max-w-[var(--pb-hero-media-max-w,none)] object-cover"
+              style={{
+                ...maskStyle(imageMaskUrl),
+                aspectRatio: 'var(--pb-hero-media-aspect, auto)',
+              }}
+            />
+          ) : (
+            <ContentMedia imageUrl={imageUrl} imageAlt={imageAlt} aspect="square" />
+          )}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+export const HeroWidget: ComponentConfig<HeroWidgetProps> = {
+  label: 'Hero',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow (optional)' },
+    title: { type: 'text', label: 'Title' },
+    subtitle: { type: 'textarea', label: 'Subtitle' },
+    logoUrl: createImageField(mediaLibraryAdapter, 'Logo image (replaces title, optional)'),
+    logoAlt: { type: 'text', label: 'Logo alt text' },
+    imageUrl: createImageField(mediaLibraryAdapter, 'Image'),
+    imageAlt: { type: 'text', label: 'Image alt text' },
+    imageMaskUrl: {
+      type: 'text',
+      label: 'Image mask URL (organic shape, side layouts — optional)',
+    },
+    imageShape: {
+      type: 'select',
+      label: 'Image shape (side layouts)',
+      options: [
+        { label: 'Rounded', value: 'rounded' },
+        { label: "Image's own shape (transparent artwork)", value: 'native' },
+      ],
+    },
+    imagePosition: {
+      type: 'select',
+      label: 'Image position',
+      options: [
+        { label: 'Background', value: 'background' },
+        { label: 'Right', value: 'right' },
+        { label: 'Left', value: 'left' },
+      ],
+    },
+    primaryLabel: { type: 'text', label: 'Primary button text' },
+    primaryHref: { type: 'text', label: 'Primary button link' },
+    secondaryLabel: { type: 'text', label: 'Secondary button text' },
+    secondaryHref: { type: 'text', label: 'Secondary button link' },
+    overlay: createCheckboxField('Dark overlay (background only)'),
+    align: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+      ],
+    },
+    surface: {
+      type: 'select',
+      label: 'Surface (background variant)',
+      options: [
+        { label: 'Plain', value: 'plain' },
+        { label: 'Card overlay', value: 'card' },
+      ],
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Open knowledge, *mapped*.',
+    subtitle: "Discover and contribute to the world's largest community-maintained gazetteer.",
+    logoUrl: '',
+    logoAlt: '',
+    imageUrl: '',
+    imageAlt: '',
+    imageMaskUrl: '',
+    imageShape: 'rounded',
+    imagePosition: 'background',
+    primaryLabel: 'Get started',
+    primaryHref: '#',
+    secondaryLabel: 'Learn more',
+    secondaryHref: '#',
+    overlay: true,
+    align: 'center',
+    surface: 'plain',
+  },
+  render: renderHero,
+};

pagebuilder/components/widgets/html-widget.tsx

@@ -0,0 +1,42 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { EmptyPlaceholder } from './_shared';
+
+export type HtmlWidgetProps = {
+  html: string;
+  height: string;
+};
+
+export const HtmlWidget: ComponentConfig<HtmlWidgetProps> = {
+  label: 'Raw HTML',
+  fields: {
+    html: {
+      type: 'textarea',
+      label: 'HTML (rendered in sandboxed iframe)',
+    },
+    height: {
+      type: 'text',
+      label: 'Height (e.g. 400px)',
+    },
+  },
+  defaultProps: {
+    html: '<p>Edit me…</p>',
+    height: '400px',
+  },
+  render: ({ html, height }) =>
+    html?.trim() ? (
+      <div className="container mx-auto py-6">
+        <iframe
+          title="Embedded HTML"
+          className="w-full rounded-lg border bg-white"
+          // Stored blocks may omit height (Puck's public Render does not
+          // merge defaultProps) — fall back to the default instead of
+          // letting the iframe collapse to the UA default ~150px.
+          style={{ height: height || '400px' }}
+          sandbox="allow-same-origin"
+          srcDoc={html}
+        />
+      </div>
+    ) : (
+      <EmptyPlaceholder label="Html (no content)" />
+    ),
+};