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

pagebuilder/components/widgets/row-widget.tsx

@@ -0,0 +1,74 @@
+import type { ComponentConfig, Slot } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type RowWidgetProps = {
+  gap: 'none' | 'sm' | 'md' | 'lg';
+  align: 'start' | 'center' | 'end';
+  wrap: 'wrap' | 'nowrap';
+  row: Slot;
+};
+
+const GAP_CLASS: Record<RowWidgetProps['gap'], string> = {
+  none: 'gap-0',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-8',
+};
+
+const ALIGN_CLASS: Record<RowWidgetProps['align'], string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+};
+
+export const RowWidget: ComponentConfig<RowWidgetProps> = {
+  label: 'Row',
+  fields: {
+    gap: {
+      type: 'select',
+      label: 'Gap',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+      ],
+    },
+    align: {
+      type: 'select',
+      label: 'Vertical alignment',
+      options: [
+        { label: 'Start', value: 'start' },
+        { label: 'Center', value: 'center' },
+        { label: 'End', value: 'end' },
+      ],
+    },
+    wrap: {
+      type: 'select',
+      label: 'Wrap',
+      options: [
+        { label: 'Wrap', value: 'wrap' },
+        { label: 'No wrap', value: 'nowrap' },
+      ],
+    },
+    row: { type: 'slot' },
+  },
+  defaultProps: {
+    gap: 'md',
+    align: 'start',
+    wrap: 'wrap',
+    row: [],
+  },
+  render: ({ gap, align, wrap, row: Row }) => (
+    <div
+      className={cn(
+        'flex w-full',
+        GAP_CLASS[gap],
+        ALIGN_CLASS[align],
+        wrap === 'wrap' ? 'flex-wrap' : 'flex-nowrap',
+      )}
+    >
+      <Row />
+    </div>
+  ),
+};

pagebuilder/components/widgets/section-intro-widget.tsx

@@ -0,0 +1,143 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { eyebrowTextStyle } from './_shared';
+
+export type SectionIntroWidgetProps = {
+  eyebrow: string;
+  heading: string;
+  body: string;
+  align: 'left' | 'center';
+  layout: 'stacked' | 'split';
+  ctaLabel: string;
+  ctaHref: string;
+};
+
+const headingStyle: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  fontSize: 'var(--pb-heading-lg, clamp(1.875rem, 1.3rem + 2.5vw, 3rem))',
+  color: 'var(--pb-heading-color)',
+};
+
+export const SectionIntroWidget: ComponentConfig<SectionIntroWidgetProps> = {
+  label: 'Section intro',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow (optional)' },
+    heading: { type: 'text', label: 'Heading' },
+    body: { type: 'textarea', label: 'Body text' },
+    align: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+      ],
+    },
+    layout: {
+      type: 'select',
+      label: 'Layout',
+      options: [
+        { label: 'Stacked', value: 'stacked' },
+        { label: 'Split (eyebrow left)', value: 'split' },
+      ],
+    },
+    ctaLabel: { type: 'text', label: 'Button label (optional)' },
+    ctaHref: { type: 'text', label: 'Button link (optional)' },
+  },
+  defaultProps: {
+    eyebrow: '',
+    heading: 'Our mission',
+    body: 'We help people build great things.',
+    align: 'left',
+    layout: 'stacked',
+    ctaLabel: '',
+    ctaHref: '',
+  },
+  render: ({ eyebrow, heading, body, align, layout, ctaLabel, ctaHref }) => {
+    const content = (
+      <div
+        className={cn(
+          'flex flex-col gap-6',
+          align === 'center' ? 'items-center text-center' : 'items-start',
+        )}
+      >
+        {heading && (
+          <h2 className="leading-[var(--pb-heading-leading,1.1)]" style={headingStyle}>
+            {renderRichText(heading)}
+          </h2>
+        )}
+        {body && (
+          <RichTextBlock
+            text={body}
+            className={cn(
+              'text-lg leading-[var(--pb-body-leading,1.625)]',
+              // Mowing Figma: the split intro's body wraps at 432px.
+              layout === 'split' && 'max-w-[432px]',
+            )}
+            style={{ color: 'var(--pb-body-color)' }}
+          />
+        )}
+        {ctaLabel && (
+          <a
+            href={ctaHref || '#'}
+            className="inline-flex items-center rounded-full bg-[var(--primary,#000000)] px-7 py-4 font-medium text-[var(--primary-foreground,#ffffff)] transition-opacity hover:opacity-90"
+          >
+            {renderRichText(ctaLabel, { allowLinks: false })}
+          </a>
+        )}
+      </div>
+    );
+
+    // Split column geometry is tenant-tunable via `--pb-split-cols`/
+    // `--pb-split-gap` (Mowing aligns the content to the 4th page-grid
+    // column); the 1fr/2fr fallback keeps tenants without the tokens on the
+    // prior layout.
+    if (layout === 'split') {
+      return (
+        <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+          <div className="grid gap-6 md:grid-cols-[var(--pb-split-cols,1fr_2fr)] md:gap-x-[var(--pb-split-gap,1.5rem)]">
+            {eyebrow && (
+              <p
+                style={{
+                  // Eyebrow size/weight/case/tracking are theme-driven; the
+                  // fallbacks keep today's look for tenants that don't set them.
+                  ...eyebrowTextStyle('1.125rem', '400'),
+                  color: 'var(--pb-heading-color,#161728)',
+                }}
+              >
+                {renderRichText(eyebrow)}
+              </p>
+            )}
+            <div className={eyebrow ? undefined : 'md:col-span-2'}>{content}</div>
+          </div>
+        </section>
+      );
+    }
+
+    return (
+      <section
+        className={cn(
+          'container mx-auto px-4 py-[var(--pb-section-py,3rem)] max-w-4xl flex flex-col gap-4',
+          align === 'center' ? 'text-center' : 'text-left',
+        )}
+      >
+        {eyebrow && (
+          <p
+            style={{
+              // Eyebrow size/weight/case/tracking are theme-driven; the
+              // fallbacks keep today's look for tenants that don't set them.
+              ...eyebrowTextStyle('1.125rem', '400'),
+              color: 'var(--pb-heading-color,#161728)',
+            }}
+          >
+            {renderRichText(eyebrow)}
+          </p>
+        )}
+        {content}
+      </section>
+    );
+  },
+};

pagebuilder/components/widgets/signup-banner-widget.tsx

@@ -0,0 +1,50 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type SignupBannerWidgetProps = {
+  heading: string;
+  subheading: string;
+  primaryLabel: string;
+  primaryHref: string;
+};
+
+export const SignupBannerWidget: ComponentConfig<SignupBannerWidgetProps> = {
+  label: 'Signup banner',
+  fields: {
+    heading: { type: 'text', label: 'Heading' },
+    subheading: { type: 'textarea', label: 'Subheading' },
+    primaryLabel: { type: 'text', label: 'Button label' },
+    primaryHref: { type: 'text', label: 'Button link' },
+  },
+  defaultProps: {
+    heading: 'Join us today',
+    subheading: 'Create a free account in seconds.',
+    primaryLabel: 'Sign up',
+    primaryHref: '#',
+  },
+  render: ({ heading, subheading, primaryLabel, primaryHref }) => (
+    <section className="rounded-xl bg-gray-900 text-white">
+      <div className="container mx-auto py-12 px-6 sm:px-10 text-center">
+        {heading && (
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-light tracking-tight">
+            {renderRichText(heading)}
+          </h2>
+        )}
+        {subheading && (
+          <RichTextBlock
+            text={subheading}
+            className="mt-3 text-lg text-gray-300 max-w-2xl mx-auto"
+          />
+        )}
+        {primaryLabel && (
+          <a
+            href={primaryHref || '#'}
+            className="mt-8 inline-flex items-center justify-center px-6 py-3 rounded-md bg-primary-700 hover:bg-primary-800 text-white font-medium transition-colors"
+          >
+            {renderRichText(primaryLabel, { allowLinks: false })}
+          </a>
+        )}
+      </div>
+    </section>
+  ),
+};

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

@@ -0,0 +1,91 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { renderRichText } from './_internal/rich-text';
+
+export type SimpleActionItem = {
+  title: string;
+  description: string;
+  href: string;
+};
+
+export type SimpleActionListWidgetProps = {
+  title: string;
+  items: SimpleActionItem[];
+};
+
+export const SimpleActionListWidget: ComponentConfig<SimpleActionListWidgetProps> = {
+  label: 'Action List',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    items: {
+      type: 'array',
+      label: 'Actions',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        // Each row is a link, so markdown links here render as label text.
+        description: {
+          type: 'textarea',
+          label: 'Description (links not supported here)',
+        },
+        href: { type: 'text', label: 'Link URL' },
+      },
+      defaultItemProps: {
+        title: 'Action',
+        description: 'Description...',
+        href: '#',
+      },
+      min: 1,
+      max: 20,
+    },
+  },
+  defaultProps: {
+    title: 'Quick links',
+    items: [
+      {
+        title: 'Documentation',
+        description: 'Read the docs',
+        href: '#',
+      },
+      {
+        title: 'API reference',
+        description: 'Browse the API',
+        href: '#',
+      },
+    ],
+  },
+  render: ({ title, items }) => (
+    <div className="container mx-auto px-4 py-12 max-w-3xl">
+      {title && <h2 className="text-2xl font-light mb-6">{renderRichText(title)}</h2>}
+      <div className="divide-y border rounded-lg overflow-hidden">
+        {items?.map((item, idx) => (
+          <a
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+            key={idx}
+            href={item.href || '#'}
+            className="flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            <div>
+              <div className="font-semibold">
+                {renderRichText(item.title, { allowLinks: false })}
+              </div>
+              {item.description && (
+                <div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+                  {renderRichText(item.description, { allowLinks: false })}
+                </div>
+              )}
+            </div>
+            <svg
+              className="size-5 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <title>Arrow</title>
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </a>
+        ))}
+      </div>
+    </div>
+  ),
+};

pagebuilder/components/widgets/site-footer-widget.tsx

@@ -0,0 +1,97 @@
+/** Site footer for the layout's footer slot: dark block with logo + nav.
+ *
+ * The "supported and funded by" partner strip that sits under it on the GCA
+ * site is the existing LogoCloud widget — the footer slot takes a list of
+ * blocks, so the strip is composed in rather than duplicated here.
+ */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+
+export interface SiteFooterLink {
+  label: string;
+  href: string;
+}
+
+export interface SiteFooterWidgetProps {
+  logoUrl: string;
+  logoAlt: string;
+  homeHref: string;
+  links: SiteFooterLink[];
+  note: string;
+}
+
+export function SiteFooterRender({
+  logoUrl,
+  logoAlt,
+  homeHref,
+  links,
+  note,
+}: SiteFooterWidgetProps) {
+  return (
+    <div className="gca-display bg-primary-800 px-6 py-16 text-white lg:py-20">
+      <div className="mx-auto flex max-w-[1440px] flex-col items-center gap-10 lg:gap-16">
+        <a href={homeHref || '/'} aria-label={logoAlt || 'Home'}>
+          {logoUrl ? (
+            <img src={logoUrl} alt={logoAlt} className="h-16 w-auto lg:h-20" />
+          ) : (
+            <span className="text-lg font-bold uppercase tracking-wide">{logoAlt || 'Home'}</span>
+          )}
+        </a>
+
+        {links.length > 0 && (
+          <nav
+            aria-label="Footer"
+            className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3"
+          >
+            {links.map((link, index) => (
+              <a
+                // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+                key={index}
+                href={link.href || '#'}
+                // The hover tint is a design-pack detail, not the brand action
+                // colour — it has to read against the dark block, which the
+                // configured brand colour is not guaranteed to do.
+                className="text-[18px] font-semibold text-white/90 transition-colors hover:text-[color:var(--pb-footer-link-hover,#ffffff)]"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        )}
+
+        {note && <p className="max-w-3xl text-center text-sm text-white/70">{note}</p>}
+      </div>
+    </div>
+  );
+}
+
+export const SiteFooterWidget: ComponentConfig<SiteFooterWidgetProps> = {
+  label: 'Site footer (logo + links)',
+  fields: {
+    logoUrl: createImageField(mediaLibraryAdapter, 'Logo (reversed / light)'),
+    logoAlt: { type: 'text', label: 'Logo alt text' },
+    homeHref: { type: 'text', label: 'Logo link' },
+    links: {
+      type: 'array',
+      label: 'Links',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'Link' },
+      },
+      defaultItemProps: { label: 'Link', href: '#' },
+      getItemSummary: (item) => item.label || 'Link',
+      max: 12,
+    },
+    note: { type: 'textarea', label: 'Small print (optional)' },
+  },
+  defaultProps: {
+    logoUrl: '',
+    logoAlt: 'Home',
+    homeHref: '/',
+    links: [{ label: 'Contact us', href: '#' }],
+    note: '',
+  },
+  render: SiteFooterRender,
+};

pagebuilder/components/widgets/site-header-nav.tsx

@@ -0,0 +1,153 @@
+/** Desktop and mobile navigation for the SiteHeader widget. */
+
+import { ChevronDown } from 'lucide-react';
+
+export interface SiteNavChild {
+  label: string;
+  href: string;
+}
+
+export interface SiteNavItem extends SiteNavChild {
+  /**
+   * Sub-links. A non-empty list turns the entry into a dropdown and its own
+   * `href` becomes decorative — Puck's array editor has no "either/or" field,
+   * so the shape carries both and the render picks.
+   */
+  children?: SiteNavChild[];
+}
+
+export function isNavGroup(item: SiteNavItem): boolean {
+  return (item.children?.length ?? 0) > 0;
+}
+
+const LINK_CLASS =
+  'text-[length:var(--pb-nav-link-size,1.125rem)] font-semibold text-primary-800 underline-offset-[10px] hover:underline';
+
+function Dropdown({ item }: { item: SiteNavItem }) {
+  return (
+    <div className="group relative">
+      {/* A group entry is a disclosure, not a destination: rendering it as a
+          button keeps the dropdown reachable by keyboard without advertising a
+          link that goes nowhere. */}
+      <button
+        type="button"
+        aria-haspopup="true"
+        className={`flex items-center gap-1 ${LINK_CLASS}`}
+      >
+        {item.label}
+        <ChevronDown className="size-4 transition-transform group-focus-within:rotate-180 group-hover:rotate-180" />
+      </button>
+      {/* Opens on hover AND on keyboard focus, so the child links stay
+          reachable without a pointer. */}
+      <div className="invisible absolute left-0 top-full z-50 min-w-56 pt-3 opacity-0 transition-all group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+        <ul className="overflow-hidden rounded-lg bg-[var(--pb-surface,#fff)] py-2 shadow-lg ring-1 ring-black/5">
+          {item.children?.map((child) => (
+            <li key={child.href || child.label}>
+              <a
+                href={child.href || '#'}
+                // Blur on click: a click-focused link would otherwise hold
+                // :focus-within and pin the panel open over the destination.
+                onClick={(e) => e.currentTarget.blur()}
+                className="block px-5 py-2.5 text-base text-primary-800 transition-colors hover:bg-[var(--pb-surface-muted,#f3f3f4)]"
+              >
+                {child.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export function DesktopNav({ items }: { items: SiteNavItem[] }) {
+  return (
+    <nav aria-label="Main" className="hidden items-center gap-8 lg:flex">
+      {items.map((item, index) =>
+        isNavGroup(item) ? (
+          // Index keys: nav entries are author-ordered and an author may well
+          // create two blank rows before filling them in, so neither the label
+          // nor the href is unique while the row is being typed.
+          // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+          <Dropdown key={index} item={item} />
+        ) : (
+          // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+          <a key={index} href={item.href || '#'} className={LINK_CLASS}>
+            {item.label}
+          </a>
+        ),
+      )}
+    </nav>
+  );
+}
+
+export function MobileNav({
+  id,
+  items,
+  ctaLabel,
+  ctaHref,
+  onNavigate,
+}: {
+  id: string;
+  items: SiteNavItem[];
+  ctaLabel: string;
+  ctaHref: string;
+  onNavigate: () => void;
+}) {
+  return (
+    <nav
+      id={id}
+      aria-label="Main"
+      className="border-b border-[color:var(--border,#e4e6e7)] bg-[var(--pb-surface,#fff)] lg:hidden"
+    >
+      <ul className="mx-auto max-w-[1440px] divide-y divide-[color:var(--border,#e4e6e7)] px-4 sm:px-6">
+        {items.map((item, index) =>
+          isNavGroup(item) ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+            <li key={index} className="py-3">
+              <p className="px-1 py-1 text-[13px] font-semibold uppercase tracking-wide text-primary-800 opacity-80">
+                {item.label}
+              </p>
+              <ul className="mt-1">
+                {item.children?.map((child, childIndex) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+                  <li key={childIndex}>
+                    <a
+                      href={child.href || '#'}
+                      onClick={onNavigate}
+                      className="block rounded-md px-3 py-2.5 text-[15px] text-primary-800 transition-colors hover:bg-[var(--pb-surface-muted,#f3f3f4)]"
+                    >
+                      {child.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+            <li key={index} className="py-1">
+              <a
+                href={item.href || '#'}
+                onClick={onNavigate}
+                className="block rounded-md px-3 py-3 text-[15px] font-medium text-primary-800 transition-colors hover:bg-[var(--pb-surface-muted,#f3f3f4)]"
+              >
+                {item.label}
+              </a>
+            </li>
+          ),
+        )}
+        {ctaLabel && (
+          <li className="py-4">
+            <a
+              href={ctaHref || '#'}
+              onClick={onNavigate}
+              className="block rounded-[var(--pb-button-radius,9999px)] bg-primary-800 px-6 py-3 text-center text-[15px] font-semibold text-white transition-colors hover:bg-primary-900"
+            >
+              {ctaLabel}
+            </a>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+}