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

pagebuilder/components/widgets/iframe-widget.tsx

@@ -0,0 +1,44 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createCheckboxField } from '../../fields';
+import { EmptyPlaceholder } from './_shared';
+
+export type IframeWidgetProps = {
+  src: string;
+  title: string;
+  height: string;
+  sandboxed: boolean;
+};
+
+export const IframeWidget: ComponentConfig<IframeWidgetProps> = {
+  label: 'Iframe',
+  fields: {
+    src: { type: 'text', label: 'Source URL' },
+    title: { type: 'text', label: 'Title (accessibility)' },
+    height: { type: 'text', label: 'Height (e.g. 600px)' },
+    sandboxed: createCheckboxField('Sandbox (block popups & navigation)'),
+  },
+  defaultProps: {
+    src: '',
+    title: 'Embedded content',
+    height: '600px',
+    sandboxed: true,
+  },
+  render: ({ src, title, height, sandboxed }) =>
+    src ? (
+      <div className="container mx-auto py-6">
+        <iframe
+          src={src}
+          title={title || 'Embedded content'}
+          className="w-full rounded-lg border"
+          style={{ height }}
+          // NOTE: allow-scripts + allow-same-origin lets a SAME-ORIGIN embedded
+          // document remove its own sandbox; the protection is meaningful for
+          // cross-origin embeds (the primary use). Do not "simplify" this set
+          // or the label without revisiting that trade-off.
+          sandbox={sandboxed ? 'allow-scripts allow-same-origin allow-forms' : undefined}
+        />
+      </div>
+    ) : (
+      <EmptyPlaceholder label="Iframe (no source)" />
+    ),
+};

pagebuilder/components/widgets/leaderboard-widget.tsx

@@ -0,0 +1,203 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { renderRichText } from './_internal/rich-text';
+
+export type LeaderboardRow = {
+  rank: string;
+  name: string;
+  score: string;
+  avatarUrl?: string;
+};
+
+export type LeaderboardWidgetProps = {
+  eyebrow: string;
+  title: string;
+  surface: 'default' | 'navy';
+  top: { name: string; score: string; avatarUrl: string }[];
+  rows: LeaderboardRow[];
+};
+
+// Inline icons keep the shared widget dependency-free.
+function CrownIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="#f5b40a" className="size-6 shrink-0" aria-hidden="true">
+      <title>Top rank</title>
+      <path d="M5 16 3 6l5 4 4-6 4 6 5-4-2 10H5Zm0 2h14v2H5v-2Z" />
+    </svg>
+  );
+}
+
+function UserGlyph() {
+  return (
+    <svg viewBox="0 0 24 24" fill="#ffffff" className="size-1/2" aria-hidden="true">
+      <title>User</title>
+      <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4 0-7 2.2-7 5v1h14v-1c0-2.8-3-5-7-5Z" />
+    </svg>
+  );
+}
+
+// Avatar: photo when supplied, else a pink disc with a white user glyph
+// (matches the Figma's #f1708a fallback avatars).
+function Avatar({ src, size }: { src?: string; size: string }) {
+  if (src) {
+    return <img src={src} alt="" className={cn('shrink-0 rounded-full object-cover', size)} />;
+  }
+  return (
+    <span
+      className={cn('flex shrink-0 items-center justify-center rounded-full bg-[#f1708a]', size)}
+    >
+      <UserGlyph />
+    </span>
+  );
+}
+
+export const LeaderboardWidget: ComponentConfig<LeaderboardWidgetProps> = {
+  label: 'Leaderboard',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    title: { type: 'text', label: 'Title' },
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Navy band', value: 'navy' },
+      ],
+    },
+    top: {
+      type: 'array',
+      label: 'Podium (top 3)',
+      arrayFields: {
+        name: { type: 'text', label: 'Name' },
+        score: { type: 'text', label: 'Score' },
+        avatarUrl: createImageField(mediaLibraryAdapter, 'Avatar image'),
+      },
+      defaultItemProps: { name: 'Player', score: '0', avatarUrl: '' },
+      min: 1,
+      max: 3,
+    },
+    rows: {
+      type: 'array',
+      label: 'Ranked rows',
+      arrayFields: {
+        rank: { type: 'text', label: 'Rank' },
+        name: { type: 'text', label: 'Name' },
+        score: { type: 'text', label: 'Score' },
+        avatarUrl: createImageField(mediaLibraryAdapter, 'Avatar image'),
+      },
+      defaultItemProps: {
+        rank: '1',
+        name: 'Player',
+        score: '0',
+        avatarUrl: '',
+      },
+      min: 1,
+      max: 20,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Leaderboard',
+    surface: 'navy',
+    top: [
+      { name: 'username', score: '1737', avatarUrl: '' },
+      { name: 'username', score: '1706', avatarUrl: '' },
+      { name: 'username', score: '924', avatarUrl: '' },
+    ],
+    rows: Array.from({ length: 7 }, (_, i) => ({
+      rank: String(i + 4),
+      name: 'username',
+      score: '—',
+    })),
+  },
+  render: (props) => <LeaderboardView {...props} />,
+};
+
+// Presentational leaderboard — shared by the static base widget (above) and the
+// app's live, data-driven override, so both render pixel-for-pixel identically.
+export function LeaderboardView({ eyebrow, title, surface, top, rows }: LeaderboardWidgetProps) {
+  const navy = surface === 'navy';
+  return (
+    <section className="py-[var(--pb-section-py,3rem)]">
+      <div
+        className={cn(
+          'container mx-auto rounded-[12px] px-6 py-10 sm:px-10 sm:py-12',
+          navy
+            ? 'bg-[var(--secondary,#42547e)] text-white'
+            : 'bg-[var(--pb-surface-muted,#f3f3f4)]',
+        )}
+      >
+        {eyebrow && (
+          <p className="text-sm font-semibold uppercase tracking-wider opacity-80">
+            {renderRichText(eyebrow)}
+          </p>
+        )}
+        {/* AccentText, not bare renderRichText: this is a display heading on
+				    `--pb-display-weight`, where a plain <strong>'s relative `bolder`
+				    can compute to no visible change. */}
+        {title && (
+          <h2
+            className="leading-tight"
+            style={{
+              fontWeight: 'var(--pb-display-weight)',
+              fontFamily: 'var(--pb-display-font)',
+              fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem))',
+              color: navy ? '#ffffff' : 'var(--pb-heading-color)',
+            }}
+          >
+            <AccentText text={title} />
+          </h2>
+        )}
+        <div className="mt-8 grid items-start gap-6 lg:grid-cols-[minmax(0,5fr)_7fr]">
+          {/* Podium — three stacked cards */}
+          <ol className="flex flex-col gap-4">
+            {top.map((p, idx) => (
+              <li
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={idx}
+                className="flex items-center gap-4 rounded-[12px] border border-[#dcdcdf]/40 px-4 py-3"
+              >
+                <Avatar src={p.avatarUrl || undefined} size="size-16" />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-semibold">{p.name}</p>
+                  <p className="flex items-center gap-2 text-3xl font-semibold leading-tight">
+                    {p.score}
+                    {idx === 0 && <CrownIcon />}
+                  </p>
+                </div>
+                <span className="grid size-12 shrink-0 place-items-center rounded-full border-2 border-white text-xl font-semibold">
+                  {idx + 1}
+                </span>
+              </li>
+            ))}
+          </ol>
+
+          {/* Ranked table */}
+          <div className="overflow-hidden rounded-[12px]">
+            <div className="grid grid-cols-[1fr_auto_auto] gap-x-6 bg-white px-6 py-4 text-sm text-[#161728] sm:gap-x-10">
+              <span>User</span>
+              <span className="w-16 text-center">Rank</span>
+              <span className="w-16 text-right">Score</span>
+            </div>
+            {rows.map((r, i) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={i}
+                className="grid grid-cols-[1fr_auto_auto] items-center gap-x-6 bg-[#f3f3f4] px-6 py-3 text-[#161728] sm:gap-x-10"
+              >
+                <div className="flex min-w-0 items-center gap-3">
+                  <Avatar src={r.avatarUrl || undefined} size="size-10" />
+                  <span className="truncate text-sm font-medium">{r.name}</span>
+                </div>
+                <span className="w-16 text-center text-sm font-medium">{r.rank}</span>
+                <span className="w-16 text-right text-sm font-semibold">{r.score}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

pagebuilder/components/widgets/list-widget.tsx

@@ -0,0 +1,56 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { renderRichText } from './_internal/rich-text';
+
+export type ListWidgetProps = {
+  type: 'ul' | 'ol';
+  items: string;
+};
+
+export const ListWidget: ComponentConfig<ListWidgetProps> = {
+  label: 'List',
+  fields: {
+    type: {
+      type: 'select',
+      label: 'List type',
+      options: [
+        { label: 'Unordered', value: 'ul' },
+        { label: 'Ordered', value: 'ol' },
+      ],
+    },
+    items: {
+      type: 'textarea',
+      label: 'Items (one per line)',
+    },
+  },
+  defaultProps: {
+    type: 'ul',
+    items: 'First item\nSecond item\nThird item',
+  },
+  render: ({ type, items }) => {
+    const list = items
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean);
+    const className =
+      type === 'ol' ? 'list-decimal list-inside space-y-1' : 'list-disc list-inside space-y-1';
+    return (
+      <div className="container mx-auto px-4 py-2">
+        {type === 'ol' ? (
+          <ol className={`${className} max-w-3xl mx-auto`}>
+            {list.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}>{renderRichText(item)}</li>
+            ))}
+          </ol>
+        ) : (
+          <ul className={`${className} max-w-3xl mx-auto`}>
+            {list.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}>{renderRichText(item)}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  },
+};

pagebuilder/components/widgets/logo-cloud-widget.tsx

@@ -0,0 +1,127 @@
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { EyebrowSplitSection } from './_internal/eyebrow-split-section';
+import { renderRichText } from './_internal/rich-text';
+
+export type LogoCloudItem = {
+  src: string;
+  alt: string;
+  href: string;
+};
+
+export type LogoCloudWidgetProps = {
+  title: string;
+  eyebrow: string;
+  heading: string;
+  variant: 'inline' | 'grid';
+  items: LogoCloudItem[];
+};
+
+export const LogoCloudWidget: ComponentConfig<LogoCloudWidgetProps> = {
+  label: 'Logo cloud (partners / funders)',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    eyebrow: { type: 'text', label: 'Eyebrow (enables section layout)' },
+    heading: { type: 'text', label: 'Heading (section layout)' },
+    variant: {
+      type: 'select',
+      label: 'Layout',
+      options: [
+        { label: 'Inline strip', value: 'inline' },
+        { label: 'Grid', value: 'grid' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Logos',
+      arrayFields: {
+        src: createImageField(mediaLibraryAdapter, 'Image'),
+        alt: { type: 'text', label: 'Alt text' },
+        href: { type: 'text', label: 'Link (optional)' },
+      },
+      defaultItemProps: { src: '', alt: 'Partner logo', href: '' },
+      min: 1,
+      max: 24,
+    },
+  },
+  defaultProps: {
+    title: 'Funded by',
+    eyebrow: '',
+    heading: '',
+    variant: 'inline',
+    items: [
+      { src: '', alt: 'Partner 1', href: '' },
+      { src: '', alt: 'Partner 2', href: '' },
+      { src: '', alt: 'Partner 3', href: '' },
+      { src: '', alt: 'Partner 4', href: '' },
+    ],
+  },
+  render: ({ title, eyebrow = '', heading = '', variant = 'inline', items }) => {
+    if (eyebrow || heading) {
+      return (
+        <EyebrowSplitSection eyebrow={eyebrow} heading={heading}>
+          <div
+            className={
+              variant === 'grid'
+                ? 'grid grid-cols-2 items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-4'
+                : 'flex flex-wrap items-center gap-x-10 gap-y-6'
+            }
+          >
+            {items?.map((logo, idx) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+              <LogoCloudItem key={idx} logo={logo} />
+            ))}
+          </div>
+        </EyebrowSplitSection>
+      );
+    }
+    return (
+      // data-pb-logo-* hooks let a tenant restyle the strip from its theme
+      // stylesheet (GCA: greyscale, spread edge-to-edge, bottom keyline).
+      <section
+        data-pb-logo-strip=""
+        className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] text-center sm:px-6 lg:px-8"
+      >
+        {title && (
+          <p
+            data-pb-logo-label=""
+            className="text-xs font-semibold uppercase tracking-[0.2em] mb-6"
+            style={{ color: 'var(--pb-body-color)' }}
+          >
+            {renderRichText(title)}
+          </p>
+        )}
+        <div
+          data-pb-logo-row=""
+          className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6"
+        >
+          {items?.map((logo, idx) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+            <LogoCloudItem key={idx} logo={logo} />
+          ))}
+        </div>
+      </section>
+    );
+  },
+};
+
+function LogoCloudItem({ logo }: { logo: LogoCloudItem }) {
+  const img = logo.src ? (
+    <img
+      src={logo.src}
+      alt={logo.alt}
+      loading="lazy"
+      className="h-10 w-auto opacity-70 hover:opacity-100 transition-opacity"
+    />
+  ) : (
+    <div className="h-10 w-32 rounded bg-gray-100" aria-hidden="true" />
+  );
+  return logo.href ? (
+    <a href={logo.href} className="block" aria-label={logo.alt}>
+      {img}
+    </a>
+  ) : (
+    <div>{img}</div>
+  );
+}

pagebuilder/components/widgets/markdown-widget.tsx

@@ -0,0 +1,148 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { useMemo } from 'react';
+import { parseMarkdownBlocks as renderMarkdown } from '../../utils/markdown';
+import { renderRichText } from './_internal/rich-text';
+
+export type MarkdownWidgetProps = {
+  content: string;
+  /**
+   * Text column width. "auto" is the legacy centred `max-w-4xl`; "660" is the
+   * Figma's measure for the legal and event pages.
+   */
+  width?: 'auto' | '660';
+  /**
+   * Left placement on the 12-column page grid. "none" keeps the centred
+   * column; "4" starts the text at the 4th column, as the Figma does.
+   */
+  indent?: 'none' | '4';
+};
+
+// Emphasis tokenization is shared with the markdown→HTML converter; links are
+// layered on top of it by renderRichText, which is also what the FAQ answers
+// use — before that, `[label](href)` rendered here as literal text.
+const renderInline = renderRichText;
+
+export const MarkdownWidget: ComponentConfig<MarkdownWidgetProps> = {
+  label: 'Markdown',
+  fields: {
+    width: {
+      type: 'select',
+      label: 'Text width',
+      options: [
+        { label: 'Auto (centred)', value: 'auto' },
+        { label: '660px', value: '660' },
+      ],
+    },
+    indent: {
+      type: 'select',
+      label: 'Grid indent',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: '4th column', value: '4' },
+      ],
+    },
+    content: {
+      type: 'textarea',
+      label: 'Markdown content',
+    },
+  },
+  defaultProps: {
+    width: 'auto',
+    indent: 'none',
+    content: '# Heading\n\nBody paragraph text.\n\n## Subheading\n\n- First item\n- Second item',
+  },
+  render: (props) => <MarkdownRender {...props} />,
+};
+
+function MarkdownRender({ content, width = 'auto', indent = 'none' }: MarkdownWidgetProps) {
+  const blocks = useMemo(() => renderMarkdown(content || ''), [content]);
+  const indented = indent === '4';
+  return (
+    <div
+      className={`container mx-auto px-4 py-8${indented ? ' lg:grid lg:grid-cols-12 lg:gap-6' : ''}`}
+    >
+      <div
+        className={[
+          // `--pb-prose-link-color` lets a tenant colour links (BioGarden's
+          // Figma uses the brand purple); unset, links keep the prose default.
+          'prose prose-lg dark:prose-invert break-words [&_a]:text-[color:var(--pb-prose-link-color,inherit)]',
+          // The last block's own `mb-4` sits BELOW the text and stacks on top
+          // of this section's bottom padding, so the visible gap to whatever
+          // follows is 16px wider than the padding says. A tenant measuring
+          // exact gaps off a Figma (BioGarden: 48px text→image, 40px
+          // text→CTA) sets `--pb-prose-trailing-mb: 0` to make the section
+          // padding the whole gap; the 1rem fallback matches every block
+          // type's own mb-4 (h3's mb-3 is the one exception — content ending
+          // on a bare h3 gains 4px).
+          '[&>*:last-child]:mb-[var(--pb-prose-trailing-mb,1rem)]',
+          width === '660' ? 'max-w-[660px]' : 'max-w-4xl',
+          // Indented text starts at the 4th grid column instead of centring.
+          indented ? 'lg:col-start-4 lg:col-span-9' : 'mx-auto',
+        ].join(' ')}
+      >
+        {blocks.map((block, idx) => {
+          if (block.type === 'h1')
+            return (
+              <h1
+                // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
+                key={idx}
+                // `**key words**` must read as semibold against the light
+                // display weight. `<strong>`'s default `bolder` is RELATIVE,
+                // so on a 300-weight heading it resolves to 400 and the
+                // emphasis is invisible — state the weight explicitly.
+                // `leading-[calc(2.5/2.25)]` restores what `text-4xl` bundles:
+                // Tailwind's font-size utilities also set a line-height, and
+                // `text-[length:…]` sets ONLY the size. The `prose` classes
+                // can't cover for it — @tailwindcss/typography is not
+                // installed, so they compile to nothing. Unitless keeps the
+                // old 2.25rem/2.5rem ratio exactly while scaling with a
+                // tenant's larger heading. Size first, leading second (the
+                // reverse order is silently dropped by tailwind-merge).
+                className="text-[length:var(--pb-prose-h1-size,2.25rem)] leading-[calc(2.5/2.25)] font-light mb-4 [&_strong]:font-semibold"
+              >
+                {renderInline(block.text)}
+              </h1>
+            );
+          if (block.type === 'h2')
+            return (
+              // Token-sized like the H1 above: the fallback reproduces the
+              // previous `text-3xl` (size AND its bundled 1.2 line-height),
+              // while a pack can scale prose H2s per breakpoint — without
+              // this, a mobile pack that shrinks the H1 leaves section H2s
+              // LARGER than the page title (BioGarden QA, SUB-36).
+              <h2
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={idx}
+                className="text-[length:var(--pb-prose-h2-size,1.875rem)] leading-[1.2] font-light mt-8 mb-4"
+              >
+                {renderInline(block.text)}
+              </h2>
+            );
+          if (block.type === 'h3')
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              <h3 key={idx} className="text-2xl font-semibold mt-6 mb-3">
+                {renderInline(block.text)}
+              </h3>
+            );
+          if (block.type === 'ul')
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              <ul key={idx} className="list-disc list-inside space-y-1 mb-4">
+                {block.items.map((item, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                  <li key={i}>{renderInline(item)}</li>
+                ))}
+              </ul>
+            );
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+            <p key={idx} className="leading-relaxed mb-4">
+              {renderInline(block.text)}
+            </p>
+          );
+        })}
+      </div>
+    </div>
+  );
+}