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

pagebuilder/components/widgets/call-to-action-render.tsx

@@ -0,0 +1,285 @@
+/** CallToActionWidget types, helpers and render — split from call-to-action-widget.tsx,
+ *  which keeps the field definitions, so both stay under the 300-line cap. */
+
+import type { CSSProperties } from 'react';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { CTAButton, Heading, Section } from './_shared';
+import {
+  BAND_SHELL,
+  DISPLAY_STYLE,
+  LIME_HEADING_STYLE,
+  SOFT_HEADING_STYLE,
+} from './call-to-action-styles';
+
+export type CtaLink = { label: string; href: string };
+export type CtaImage = { src: string; alt: string; caption: string };
+
+export type CallToActionWidgetProps = {
+  surface: 'default' | 'lime' | 'soft' | 'related';
+  /**
+   * Optional CSS color for the band background (e.g. a tenant's program
+   * color). When set, renders the centered band on this color with white
+   * text, overriding `surface`.
+   */
+  surfaceColor?: string;
+  align: 'left' | 'center';
+  eyebrow: string;
+  heading: string;
+  subheading: string;
+  primaryLabel: string;
+  primaryHref: string;
+  secondaryLabel: string;
+  secondaryHref: string;
+  links: CtaLink[];
+  images: CtaImage[];
+};
+
+export const CallToActionWidgetRender = ({
+  surface,
+  align,
+  eyebrow,
+  heading,
+  subheading,
+  primaryLabel,
+  primaryHref,
+  secondaryLabel,
+  secondaryHref,
+  links,
+  images,
+  surfaceColor = '',
+}: CallToActionWidgetProps) => {
+  // Custom-colored band (tenant program colors): centered white text on
+  // the given background, with the links rendered as white text links.
+  if (surfaceColor) {
+    return (
+      <section className={BAND_SHELL}>
+        <div
+          className="rounded-3xl px-6 py-12 text-center lg:py-16"
+          style={{ backgroundColor: surfaceColor }}
+        >
+          {eyebrow && (
+            <p
+              className="text-sm font-medium opacity-80"
+              style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+            >
+              {renderRichText(eyebrow)}
+            </p>
+          )}
+          {heading && (
+            <h2
+              className="mx-auto max-w-3xl text-2xl sm:text-3xl lg:text-4xl"
+              style={{
+                ...DISPLAY_STYLE,
+                color: 'var(--pb-surface-contrast, #ffffff)',
+              }}
+            >
+              {renderRichText(heading)}
+            </h2>
+          )}
+          {subheading && (
+            <RichTextBlock
+              text={subheading}
+              className="mx-auto mt-3 max-w-2xl opacity-85"
+              style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+            />
+          )}
+          {links && links.length > 0 && (
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
+              {links.map((link, idx) => (
+                <a
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  href={link.href || '#'}
+                  className="text-sm font-semibold underline-offset-4 hover:underline"
+                  style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+                >
+                  {renderRichText(link.label || '', { allowLinks: false })}
+                </a>
+              ))}
+            </div>
+          )}
+          {primaryLabel && (
+            <a
+              href={primaryHref || '#'}
+              className="mt-6 inline-flex items-center justify-center rounded-full border px-6 py-2.5 text-sm font-semibold transition-colors hover:bg-white/10"
+              style={{
+                color: 'var(--pb-surface-contrast, #ffffff)',
+                borderColor: 'var(--pb-surface-contrast, #ffffff)',
+              }}
+            >
+              {renderRichText(primaryLabel, { allowLinks: false })}
+            </a>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // Lavender "related links" band — left heading column, right stacked
+  // link rows with arrows + dividers (the recurring "you might also be
+  // interested" / "keep exploring" section).
+  if (surface === 'related') {
+    return (
+      <section className={BAND_SHELL}>
+        <div className="grid gap-8 rounded-3xl bg-[#eeedff] px-6 py-12 lg:grid-cols-[1fr_1.5fr] lg:gap-12 lg:px-12 lg:py-14">
+          <div>
+            {eyebrow && (
+              <p className="text-sm font-medium text-[#475c61]">{renderRichText(eyebrow)}</p>
+            )}
+            {heading && (
+              <h2
+                className="mt-2 text-2xl sm:text-3xl lg:text-4xl"
+                style={{ ...DISPLAY_STYLE, color: '#1a353e' }}
+              >
+                {renderRichText(heading)}
+              </h2>
+            )}
+            {subheading && (
+              <RichTextBlock text={subheading} className="mt-3 max-w-md text-[#475c61]" />
+            )}
+          </div>
+          {links && links.length > 0 && (
+            <ul className="self-center">
+              {links.map((link, idx) => (
+                <li
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  className="border-t border-[#1a353e]/15 last:border-b"
+                >
+                  <a
+                    href={link.href || '#'}
+                    className="flex items-center justify-between gap-4 py-4 text-[#1a353e] transition-opacity hover:opacity-70"
+                  >
+                    <span className="font-medium">
+                      {renderRichText(link.label || '', {
+                        allowLinks: false,
+                      })}
+                    </span>
+                    <span aria-hidden="true">→</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // Lavender "soft" band — centered heading with a row of text links.
+  // Sized to the GCA design system (H2 44 Light, 18px SemiBold links —
+  // SNAG_012).
+  if (surface === 'soft') {
+    return (
+      <section className={BAND_SHELL}>
+        <div className="rounded-3xl bg-[#eeedff] px-6 py-14 text-center lg:py-20">
+          {heading && (
+            <h2
+              className="mx-auto max-w-4xl leading-[var(--pb-heading-leading,1.15)]"
+              style={SOFT_HEADING_STYLE}
+            >
+              {renderRichText(heading)}
+            </h2>
+          )}
+          {subheading && (
+            <RichTextBlock
+              text={subheading}
+              className="mx-auto mt-4 max-w-2xl text-[17px] text-[#475c61]"
+            />
+          )}
+          {links && links.length > 0 && (
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-10 gap-y-3">
+              {links.map((link, idx) => (
+                <a
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  href={link.href || '#'}
+                  className="text-[17px] font-semibold text-[#1a353e] transition-colors hover:text-[#468f8c]"
+                >
+                  {renderRichText(link.label || '', { allowLinks: false })}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // Lime "Get involved" band — text + button left, image collage right.
+  // The main call to action: display-size heading, 20px body, white pill
+  // button that inverts to ink on hover (design-system "Secondary" button —
+  // SNAG_013).
+  if (surface === 'lime') {
+    return (
+      <section className={BAND_SHELL}>
+        <div className="grid items-center gap-10 rounded-3xl bg-[#d8ec29] px-6 py-12 lg:grid-cols-2 lg:gap-16 lg:px-14 lg:py-16">
+          <div>
+            {heading && (
+              <h2 className="leading-[var(--pb-heading-leading,1.15)]" style={LIME_HEADING_STYLE}>
+                {renderRichText(heading)}
+              </h2>
+            )}
+            {subheading && (
+              <RichTextBlock
+                text={subheading}
+                className="mt-6 max-w-md text-[19px] leading-relaxed text-[#1a353e]/85"
+              />
+            )}
+            {primaryLabel && (
+              <a
+                href={primaryHref || '#'}
+                className="mt-8 inline-flex items-center justify-center rounded-full bg-white px-7 py-3 text-[17px] font-semibold text-[#1a353e] transition-colors hover:bg-[#1a353e] hover:text-white"
+              >
+                {renderRichText(primaryLabel, { allowLinks: false })}
+              </a>
+            )}
+          </div>
+          {images && images.length > 0 && (
+            <div className="grid grid-cols-3 gap-4">
+              {images.map((img, idx) => (
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  className="relative aspect-square overflow-hidden rounded-lg bg-[#1a353e]/10"
+                >
+                  {img.src && (
+                    <img
+                      src={img.src}
+                      alt={img.alt}
+                      loading="lazy"
+                      className="size-full object-cover"
+                    />
+                  )}
+                  {img.caption && (
+                    <span className="absolute bottom-1.5 right-1.5 rounded bg-[#1a353e]/70 px-2 py-0.5 text-[11px] font-medium text-white">
+                      {renderRichText(img.caption)}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // Default accent CTA (unchanged — used by other tenants).
+  return (
+    <Section variant="accent" spacing="default" align={align}>
+      <div className="lg:flex lg:items-center lg:justify-between gap-6">
+        <div className="flex-1">
+          <Heading as="h2" size="md" tone="inverse" text={heading} />
+          {subheading && (
+            <RichTextBlock text={subheading} className="mt-2 text-xl text-primary-100" />
+          )}
+        </div>
+        <div className="mt-6 lg:mt-0 flex flex-wrap gap-3">
+          <CTAButton label={primaryLabel} href={primaryHref} variant="inverse-primary" />
+          <CTAButton label={secondaryLabel} href={secondaryHref} variant="inverse-outline" />
+        </div>
+      </div>
+    </Section>
+  );
+};

pagebuilder/components/widgets/call-to-action-styles.ts

@@ -0,0 +1,28 @@
+/** Heading styles and band shell for the call-to-action widget. */
+
+import type { CSSProperties } from 'react';
+
+export const DISPLAY_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+};
+
+// Hoisted band-heading styles (constant tokens only). The fallback clamps
+// reproduce the prior `text-2xl sm:text-3xl lg:text-4xl` responsive steps:
+// 24px on phones, 30px at 640px, 36px at 1024px.
+export const SOFT_HEADING_STYLE: CSSProperties = {
+  ...DISPLAY_STYLE,
+  color: '#1a353e',
+  fontSize: 'var(--pb-heading-lg, clamp(1.5rem, 1.25rem + 1.5625vw, 2.25rem))',
+};
+
+export const LIME_HEADING_STYLE: CSSProperties = {
+  ...DISPLAY_STYLE,
+  color: '#1a353e',
+  fontSize: 'var(--pb-heading-xl, clamp(1.5rem, 1.25rem + 1.5625vw, 2.25rem))',
+};
+
+// Inset bands (lime / soft) share one shell so they line up with every other
+// contained section at the same content width across breakpoints.
+export const BAND_SHELL = 'container mx-auto px-4 py-12 sm:px-6 lg:px-8';

pagebuilder/components/widgets/call-to-action-widget.tsx

@@ -0,0 +1,83 @@
+/** CallToActionWidget: field definitions and config assembly.
+ *  Types, helpers and render live in call-to-action-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+
+import { type CallToActionWidgetProps, CallToActionWidgetRender } from './call-to-action-render';
+
+export type * from './call-to-action-render';
+
+export const CallToActionWidget: ComponentConfig<CallToActionWidgetProps> = {
+  label: 'Call to action',
+  fields: {
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default (accent)', value: 'default' },
+        { label: 'Lime band', value: 'lime' },
+        { label: 'Soft band (links)', value: 'soft' },
+        { label: 'Related links band', value: 'related' },
+      ],
+    },
+    surfaceColor: {
+      type: 'text',
+      label: 'Surface color (CSS, white text — optional)',
+    },
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    align: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+      ],
+    },
+    heading: { type: 'text', label: 'Heading' },
+    subheading: { type: 'textarea', label: 'Subheading' },
+    primaryLabel: { type: 'text', label: 'Primary label' },
+    primaryHref: { type: 'text', label: 'Primary link' },
+    secondaryLabel: { type: 'text', label: 'Secondary label' },
+    secondaryHref: { type: 'text', label: 'Secondary link' },
+    links: {
+      type: 'array',
+      label: 'Links (soft band)',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'URL' },
+      },
+      defaultItemProps: { label: 'Link', href: '#' },
+      min: 1,
+      max: 6,
+    },
+    images: {
+      type: 'array',
+      label: 'Images (lime band)',
+      arrayFields: {
+        src: createImageField(mediaLibraryAdapter, 'Image'),
+        alt: { type: 'text', label: 'Alt text' },
+        caption: { type: 'text', label: 'Caption' },
+      },
+      defaultItemProps: { src: '', alt: '', caption: '' },
+      min: 1,
+      max: 8,
+    },
+  },
+  defaultProps: {
+    surface: 'default',
+    surfaceColor: '',
+    align: 'left',
+    eyebrow: '',
+    heading: 'Start contributing today.',
+    subheading: 'Add a place, a photo, or a story — every contribution counts.',
+    primaryLabel: 'Get started',
+    primaryHref: '#',
+    secondaryLabel: 'Learn more',
+    secondaryHref: '#',
+    links: [],
+    images: [],
+  },
+  render: (props) => <CallToActionWidgetRender {...props} />,
+};

pagebuilder/components/widgets/carousel-widget.tsx

@@ -0,0 +1,97 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { useState } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { renderRichText } from './_internal/rich-text';
+import { EmptyPlaceholder } from './_shared';
+
+export type CarouselSlide = {
+  imageUrl: string;
+  caption: string;
+};
+
+export type CarouselWidgetProps = {
+  slides: CarouselSlide[];
+};
+
+function CarouselRenderer({ slides }: CarouselWidgetProps) {
+  const [index, setIndex] = useState(0);
+  if (!slides || slides.length === 0) {
+    return <EmptyPlaceholder label="Carousel (no slides)" />;
+  }
+  const slide = slides[Math.min(index, slides.length - 1)];
+  return (
+    <div className="container mx-auto py-6">
+      <div className="relative aspect-video w-full overflow-hidden rounded-xl">
+        {slide.imageUrl ? (
+          <img
+            src={slide.imageUrl}
+            alt={slide.caption || ''}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300" />
+        )}
+        {slide.caption && (
+          <div className="absolute inset-x-0 bottom-0 bg-black/60 text-white p-4 text-center">
+            {renderRichText(slide.caption)}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={() => setIndex((i) => (i === 0 ? slides.length - 1 : i - 1))}
+          className="absolute left-3 top-1/2 -translate-y-1/2 size-10 rounded-full bg-white/80 hover:bg-white text-gray-900 grid place-items-center"
+          aria-label="Previous slide"
+        >
+          ‹
+        </button>
+        <button
+          type="button"
+          onClick={() => setIndex((i) => (i === slides.length - 1 ? 0 : i + 1))}
+          className="absolute right-3 top-1/2 -translate-y-1/2 size-10 rounded-full bg-white/80 hover:bg-white text-gray-900 grid place-items-center"
+          aria-label="Next slide"
+        >
+          ›
+        </button>
+        <div className="absolute inset-x-0 bottom-2 flex justify-center gap-2">
+          {slides.map((_, i) => (
+            <button
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              key={i}
+              type="button"
+              onClick={() => {
+                if (i !== index) setIndex(i);
+              }}
+              className={`size-2 rounded-full ${i === index ? 'bg-white' : 'bg-white/40'}`}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const CarouselWidget: ComponentConfig<CarouselWidgetProps> = {
+  label: 'Carousel',
+  fields: {
+    slides: {
+      type: 'array',
+      label: 'Slides',
+      arrayFields: {
+        imageUrl: createImageField(mediaLibraryAdapter, 'Image URL'),
+        caption: { type: 'text', label: 'Caption' },
+      },
+      defaultItemProps: { imageUrl: '', caption: '' },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    slides: [
+      { imageUrl: '', caption: 'Slide one' },
+      { imageUrl: '', caption: 'Slide two' },
+      { imageUrl: '', caption: 'Slide three' },
+    ],
+  },
+  render: ({ slides }) => <CarouselRenderer slides={slides || []} />,
+};

pagebuilder/components/widgets/centered-hero-widget.tsx

@@ -0,0 +1,54 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { renderHero } from './hero-widget';
+
+export type CenteredHeroWidgetProps = {
+  title: string;
+  subtitle: string;
+  imageUrl: string;
+  imageAlt: string;
+  primaryLabel: string;
+  primaryHref: string;
+};
+
+/**
+ * @deprecated Use HeroWidget with imagePosition="background", align="center",
+ * surface="card". Kept for backwards compatibility with saved pages.
+ */
+export const CenteredHeroWidget: ComponentConfig<CenteredHeroWidgetProps> = {
+  label: 'Centered hero (deprecated)',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    subtitle: { type: 'textarea', label: 'Subtitle' },
+    imageUrl: createImageField(mediaLibraryAdapter, 'Background image URL'),
+    imageAlt: { type: 'text', label: 'Image alt text' },
+    primaryLabel: { type: 'text', label: 'Button label' },
+    primaryHref: { type: 'text', label: 'Button link' },
+  },
+  defaultProps: {
+    title: 'Welcome to GeoWiki',
+    subtitle: 'Discover and contribute to global knowledge.',
+    imageUrl: '',
+    imageAlt: '',
+    primaryLabel: 'Get started',
+    primaryHref: '#',
+  },
+  render: (props) =>
+    renderHero({
+      eyebrow: '',
+      title: props.title,
+      subtitle: props.subtitle,
+      logoUrl: '',
+      logoAlt: '',
+      imageUrl: props.imageUrl,
+      imageAlt: props.imageAlt,
+      imagePosition: 'background',
+      primaryLabel: props.primaryLabel,
+      primaryHref: props.primaryHref,
+      secondaryLabel: '',
+      secondaryHref: '',
+      overlay: false,
+      align: 'center',
+      surface: 'card',
+    }),
+};

pagebuilder/components/widgets/colored-action-list-widget.tsx

@@ -0,0 +1,117 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+import { renderRichText } from './_internal/rich-text';
+
+export type ColoredActionListItem = {
+  title: string;
+  href: string;
+};
+
+export type ColoredActionListWidgetProps = {
+  eyebrow: string;
+  heading: string;
+  tone: 'green' | 'purple' | 'neutral';
+  items: ColoredActionListItem[];
+};
+
+const TONE_CLASS: Record<ColoredActionListWidgetProps['tone'], string> = {
+  green: 'bg-primary-700 text-white',
+  purple: 'bg-[#eeedff] text-gray-900',
+  neutral: 'bg-gray-100 text-gray-900',
+};
+
+const TONE_DIVIDER: Record<ColoredActionListWidgetProps['tone'], string> = {
+  green: 'border-white/20',
+  purple: 'border-black/10',
+  neutral: 'border-black/10',
+};
+
+export const ColoredActionListWidget: ComponentConfig<ColoredActionListWidgetProps> = {
+  label: 'Colored action list (tinted block)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    heading: { type: 'text', label: 'Heading' },
+    tone: {
+      type: 'select',
+      label: 'Tone',
+      options: [
+        { label: 'Green', value: 'green' },
+        { label: 'Purple', value: 'purple' },
+        { label: 'Neutral', value: 'neutral' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Items',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        href: { type: 'text', label: 'Link' },
+      },
+      defaultItemProps: { title: 'Action', href: '#' },
+      min: 1,
+      max: 20,
+    },
+  },
+  defaultProps: {
+    eyebrow: 'Get Started',
+    heading: 'Get started with our Farmer Cluster guidelines',
+    tone: 'green',
+    items: [
+      { title: 'Farmer Cluster: An Overview', href: '#' },
+      { title: 'Starting a Farmer Cluster', href: '#' },
+      { title: 'Managing a Farmer Cluster', href: '#' },
+      { title: 'Farmer Cluster Communication Guidelines', href: '#' },
+      { title: 'Stakeholder Engagement Guidelines', href: '#' },
+      { title: 'Monitoring Biodiversity', href: '#' },
+    ],
+  },
+  render: ({ eyebrow, heading, tone, items }) => (
+    <section className="container mx-auto px-4 py-6">
+      <div className={cn('rounded-xl p-6 sm:p-10', TONE_CLASS[tone])}>
+        {eyebrow && (
+          <p className="text-xs font-semibold uppercase tracking-wider opacity-80">
+            {renderRichText(eyebrow)}
+          </p>
+        )}
+        {heading && (
+          <h2 className="mt-2 text-2xl sm:text-3xl font-light leading-tight">
+            {renderRichText(heading)}
+          </h2>
+        )}
+        {items?.length > 0 && (
+          <ul className={cn('mt-6 divide-y rounded-lg overflow-hidden border', TONE_DIVIDER[tone])}>
+            {items.map((item, idx) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              <li key={idx}>
+                <a
+                  href={item.href || '#'}
+                  className={cn(
+                    'flex items-center justify-between px-4 py-3 text-base font-medium transition-colors',
+                    tone === 'green' ? 'hover:bg-white/10' : 'hover:bg-black/5',
+                  )}
+                >
+                  {renderRichText(item.title || '', { allowLinks: false })}
+                  <svg
+                    className="size-4 opacity-80"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <title>Open</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  ),
+};