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

pagebuilder/components/widgetCatalog.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * Smoke coverage for the whole block catalogue.
+ *
+ * The e2e suite proves a handful of widgets reach the DOM; it can't afford a
+ * page per block. This renders every entry with its own `defaultProps`, which
+ * is what an author gets the moment they drag one in — so a widget that throws
+ * on first paint fails here rather than as a blank section on someone's page.
+ */
+
+import type { ComponentType } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { catalogCategories, catalogComponents } from './widgetCatalog';
+
+type AnyConfig = {
+  label?: string;
+  fields?: Record<string, { type?: string }>;
+  defaultProps?: Record<string, unknown>;
+  render: ComponentType<Record<string, unknown>>;
+};
+
+const entries = Object.entries(catalogComponents) as [string, AnyConfig][];
+
+/** A slot arrives at `render` as a component; stored data holds an array. */
+const SlotStub = () => null;
+
+/**
+ * Swap every slot field's stored array for the component Puck would inject.
+ * Without this the layout blocks throw on `<Content />`, which would be this
+ * test failing on its own setup rather than on the widget.
+ */
+function withSlotsResolved(config: AnyConfig): Record<string, unknown> {
+  const props: Record<string, unknown> = { ...(config.defaultProps ?? {}) };
+  for (const [name, field] of Object.entries(config.fields ?? {})) {
+    if (field?.type === 'slot') props[name] = SlotStub;
+  }
+  // Slots nested in array items (Columns keeps one per column) need the same
+  // treatment a level down.
+  for (const [name, field] of Object.entries(config.fields ?? {})) {
+    const arrayFields = (field as { arrayFields?: Record<string, { type?: string }> }).arrayFields;
+    if (!arrayFields || !Array.isArray(props[name])) continue;
+    const slotKeys = Object.entries(arrayFields)
+      .filter(([, f]) => f?.type === 'slot')
+      .map(([k]) => k);
+    if (slotKeys.length === 0) continue;
+    props[name] = (props[name] as Record<string, unknown>[]).map((item) => ({
+      ...item,
+      ...Object.fromEntries(slotKeys.map((k) => [k, SlotStub])),
+    }));
+  }
+  return props;
+}
+
+describe('catalogue structure', () => {
+  it('files every block under exactly one category', () => {
+    const filed = Object.values(catalogCategories).flatMap((c) => c.components);
+    const duplicated = filed.filter((name, i) => filed.indexOf(name) !== i);
+    expect(duplicated).toEqual([]);
+    expect([...filed].sort()).toEqual(Object.keys(catalogComponents).sort());
+  });
+
+  it('gives every block a label', () => {
+    // Puck falls back to the raw key, so a missing label is not a crash — it
+    // just shows the author "ColoredActionList" instead of "Action list".
+    const unlabelled = entries.filter(([, c]) => !c.label).map(([name]) => name);
+    expect(unlabelled).toEqual([]);
+  });
+
+  it('gives every field a default', () => {
+    // A field with no default renders as `undefined` on first drop, which is
+    // how a widget ends up blank until the author touches every input.
+    const gaps = entries.flatMap(([name, c]) =>
+      Object.keys(c.fields ?? {})
+        .filter((f) => !(f in (c.defaultProps ?? {})))
+        .map((f) => `${name}.${f}`),
+    );
+    expect(gaps).toEqual([]);
+  });
+});
+
+describe('every block renders with its defaults', () => {
+  it.each(entries.map(([name, config]) => ({ name, config })))('$name', ({ config }) => {
+    const Render = config.render;
+    // The real assertion is that this line doesn't throw. `toBe('string')`
+    // could never fail — renderToStaticMarkup always returns one — so it said
+    // nothing about the widget. Requiring output also catches a block that
+    // renders to nothing at all with its own defaults.
+    const html = renderToStaticMarkup(<Render {...withSlotsResolved(config)} />);
+    expect(html).not.toBe('');
+  });
+});
+
+describe('blocks tolerate data stored before a field existed', () => {
+  // `defaultProps` only covers a block dropped *now*. A Button saved before
+  // `size` existed arrives without it, and `sizeClass[undefined]` yields
+  // `undefined` — which `cn()` silently drops, so the button renders with no
+  // size classes at all rather than crashing. Nothing in a normal suite
+  // notices, because every other fixture is built from the current defaults.
+  //
+  // So the assertion is that the *expected class* is present. Checking the
+  // output merely doesn't say "undefined" passes even with the default
+  // removed, which is how the first version of this test was useless.
+  const cases: { name: string; props: Record<string, unknown>; expected: string[] }[] = [
+    {
+      name: 'Button',
+      props: { label: 'Old', href: '/x', variant: 'primary', target: '_self' },
+      expected: ['px-5', 'bg-primary-700'],
+    },
+    // Every asserted class must come from a prop the case OMITS, otherwise the
+    // assertion is satisfied by the explicit prop and the default it is meant
+    // to guard can be deleted with the test still green.
+    { name: 'Text', props: { text: 'Old copy.' }, expected: ['text-base', 'text-left'] },
+    { name: 'Heading', props: { text: 'Old' }, expected: ['text-3xl', 'text-left'] },
+  ];
+
+  it.each(cases)('$name', ({ name, props, expected }) => {
+    const config = catalogComponents[name as keyof typeof catalogComponents] as AnyConfig;
+    const Render = config.render;
+    const html = renderToStaticMarkup(<Render {...props} />);
+    for (const cls of expected) expect(html).toContain(cls);
+  });
+});

pagebuilder/components/widgetCatalog.ts

@@ -0,0 +1,208 @@
+/**
+ * Every block pagebuilder ships, and where it sits in the editor palette.
+ *
+ * Split out of `puckConfig.tsx` because the catalogue is the part that grows:
+ * the config file keeps the root definition and the registry merge, which are
+ * a fixed size, while this list gains an entry per widget.
+ */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { ButtonBlock } from './blocks/Button';
+import { ColumnsBlock } from './blocks/Columns';
+import { HeadingBlock } from './blocks/Heading';
+import { ImageBlock } from './blocks/Image';
+import { SpacerBlock } from './blocks/Spacer';
+import { TextBlock } from './blocks/Text';
+import { AccordionWidget } from './widgets/accordion-widget';
+import { AlertWidget } from './widgets/alert-widget';
+import { AppStoreBadgesWidget } from './widgets/app-store-badges-widget';
+import { ArticleCardsWidget } from './widgets/article-cards-widget';
+import { CallToActionWidget } from './widgets/call-to-action-widget';
+import { CarouselWidget } from './widgets/carousel-widget';
+import { CenteredHeroWidget } from './widgets/centered-hero-widget';
+import { ColoredActionListWidget } from './widgets/colored-action-list-widget';
+import { ColumnWidget } from './widgets/column-widget';
+import { ContactCardsWidget } from './widgets/contact-cards-widget';
+import { ContactFormWidget } from './widgets/contact-form-widget';
+import { ContainerWidget } from './widgets/container-widget';
+import { DefinitionListWidget } from './widgets/definition-list-widget';
+import { DividerWidget } from './widgets/divider-widget';
+import { EyebrowSectionWidget } from './widgets/eyebrow-section-widget';
+import { FaqWidget } from './widgets/faq-widget';
+import { FeatureCardWidget } from './widgets/feature-card-widget';
+import { FeatureCardsWidget } from './widgets/feature-cards-widget';
+import { FeatureGridWidget } from './widgets/feature-grid-widget';
+import { FeatureShowcaseWidget } from './widgets/feature-showcase-widget';
+import { GalleryWidget } from './widgets/gallery-widget';
+import { GridWidget } from './widgets/grid-widget';
+import { HeroWidget } from './widgets/hero-widget';
+import { HtmlWidget } from './widgets/html-widget';
+import { IframeWidget } from './widgets/iframe-widget';
+import { LeaderboardWidget } from './widgets/leaderboard-widget';
+import { ListWidget } from './widgets/list-widget';
+import { LogoCloudWidget } from './widgets/logo-cloud-widget';
+import { MarkdownWidget } from './widgets/markdown-widget';
+import { MediaObjectWidget } from './widgets/media-object-widget';
+import { NewsletterWidget } from './widgets/newsletter-widget';
+import { PageHeaderWidget } from './widgets/page-header-widget';
+import { ProseSectionWidget } from './widgets/prose-section-widget';
+import { QuoteWidget } from './widgets/quote-widget';
+import { RowWidget } from './widgets/row-widget';
+import { SectionIntroWidget } from './widgets/section-intro-widget';
+import { SignupBannerWidget } from './widgets/signup-banner-widget';
+import { SimpleActionListWidget } from './widgets/simple-action-list-widget';
+import { SocialBannerWidget } from './widgets/social-banner-widget';
+import { StatsWidget } from './widgets/stats-widget';
+import { StepsWidget } from './widgets/steps-widget';
+import { StoryCardsWidget } from './widgets/story-cards-widget';
+import { TableWidget } from './widgets/table-widget';
+import { TabsWidget } from './widgets/tabs-widget';
+import { TagsWidget } from './widgets/tags-widget';
+import { TestimonialWidget } from './widgets/testimonial-widget';
+import { TimelineWidget } from './widgets/timeline-widget';
+import { UnderConstructionWidget } from './widgets/under-construction-widget';
+import { VideoWidget } from './widgets/video-widget';
+import { WelcomeWidget } from './widgets/welcome-widget';
+
+export const catalogComponents = {
+  Accordion: AccordionWidget,
+  Alert: AlertWidget,
+  AppStoreBadges: AppStoreBadgesWidget,
+  ArticleCards: ArticleCardsWidget,
+  Button: ButtonBlock,
+  CallToAction: CallToActionWidget,
+  Carousel: CarouselWidget,
+  CenteredHero: CenteredHeroWidget,
+  ColoredActionList: ColoredActionListWidget,
+  Column: ColumnWidget,
+  Columns: ColumnsBlock,
+  ContactCards: ContactCardsWidget,
+  ContactForm: ContactFormWidget,
+  Container: ContainerWidget,
+  DefinitionList: DefinitionListWidget,
+  Divider: DividerWidget,
+  EyebrowSection: EyebrowSectionWidget,
+  Faq: FaqWidget,
+  FeatureCard: FeatureCardWidget,
+  FeatureCards: FeatureCardsWidget,
+  FeatureGrid: FeatureGridWidget,
+  FeatureShowcase: FeatureShowcaseWidget,
+  Gallery: GalleryWidget,
+  Grid: GridWidget,
+  Heading: HeadingBlock,
+  Hero: HeroWidget,
+  Html: HtmlWidget,
+  Iframe: IframeWidget,
+  Image: ImageBlock,
+  Leaderboard: LeaderboardWidget,
+  List: ListWidget,
+  LogoCloud: LogoCloudWidget,
+  Markdown: MarkdownWidget,
+  MediaObject: MediaObjectWidget,
+  Newsletter: NewsletterWidget,
+  PageHeader: PageHeaderWidget,
+  ProseSection: ProseSectionWidget,
+  Quote: QuoteWidget,
+  Row: RowWidget,
+  SectionIntro: SectionIntroWidget,
+  SignupBanner: SignupBannerWidget,
+  SimpleActionList: SimpleActionListWidget,
+  SocialBanner: SocialBannerWidget,
+  Spacer: SpacerBlock,
+  Stats: StatsWidget,
+  Steps: StepsWidget,
+  StoryCards: StoryCardsWidget,
+  Table: TableWidget,
+  Tabs: TabsWidget,
+  Tags: TagsWidget,
+  Testimonial: TestimonialWidget,
+  Text: TextBlock,
+  Timeline: TimelineWidget,
+  UnderConstruction: UnderConstructionWidget,
+  Video: VideoWidget,
+  Welcome: WelcomeWidget,
+};
+
+/**
+ * Each block's own props, recovered from its `ComponentConfig`.
+ *
+ * Derived rather than hand-listed: a parallel type map would be a second
+ * 56-entry list to keep in step, and `ComponentConfig<P>` already carries `P`
+ * in an inferable position. This also handles slot-bearing blocks correctly,
+ * which a map keyed off the *render* signature cannot — Puck rewrites `Slot`
+ * to `SlotComponent` on the way into `render`, and that mapping is one-way.
+ */
+type PropsOf<T> = T extends ComponentConfig<infer P> ? P : never;
+
+export type CatalogProps = {
+  [K in keyof typeof catalogComponents]: PropsOf<(typeof catalogComponents)[K]>;
+};
+
+/**
+ * Palette grouping. `_hidden` is Puck's convention for a block that stays
+ * usable in stored data but is not offered in the palette — `CenteredHero` is
+ * a Hero variant reached through Hero's own fields, so offering both would
+ * just be two doors to one room.
+ *
+ * Typed against the catalogue's own keys rather than `string`, so a category
+ * naming a block that doesn't exist — or a block renamed out from under a
+ * category — is a compile error instead of an entry that silently never
+ * appears in the palette.
+ */
+type CatalogCategory = {
+  title?: string;
+  visible?: boolean;
+  components: (keyof typeof catalogComponents)[];
+};
+
+export const catalogCategories: Record<string, CatalogCategory> = {
+  typography: {
+    components: ['Heading', 'Text', 'Markdown', 'ProseSection', 'Quote', 'List', 'DefinitionList'],
+  },
+  media: { components: ['Image', 'Gallery', 'Carousel', 'Video', 'Iframe'] },
+  actions: {
+    components: ['Button', 'SimpleActionList', 'ColoredActionList', 'AppStoreBadges'],
+  },
+  layout: {
+    components: ['Columns', 'Container', 'Row', 'Column', 'Grid', 'Spacer', 'Divider'],
+  },
+  sections: {
+    title: 'Sections',
+    components: [
+      'PageHeader',
+      'Hero',
+      'EyebrowSection',
+      'MediaObject',
+      'CallToAction',
+      'SectionIntro',
+      'FeatureShowcase',
+      'Steps',
+      'Timeline',
+    ],
+  },
+  collections: {
+    title: 'Collections',
+    components: [
+      'FeatureCards',
+      'FeatureCard',
+      'FeatureGrid',
+      'Faq',
+      'Stats',
+      'ArticleCards',
+      'ContactCards',
+      'LogoCloud',
+      'StoryCards',
+      'Testimonial',
+      'Leaderboard',
+      'Table',
+    ],
+  },
+  forms: { title: 'Forms', components: ['ContactForm', 'Tags', 'Newsletter', 'SignupBanner'] },
+  interactive: { title: 'Interactive', components: ['Accordion', 'Tabs'] },
+  utility: {
+    title: 'Utility',
+    components: ['Html', 'Alert', 'SocialBanner', 'UnderConstruction', 'Welcome'],
+  },
+  _hidden: { components: ['CenteredHero'], visible: false },
+};

pagebuilder/components/widgets/_internal/accent-text.tsx

@@ -0,0 +1,60 @@
+import { type CSSProperties, type ReactNode, useMemo } from 'react';
+import { renderRichText } from './rich-text';
+
+// Accent word styling is tenant-themeable: Recodo/GCA keep the italic semibold
+// default; tenants like Mowing render an upright bold word via these tokens.
+const ACCENT_WORD_STYLE: CSSProperties = {
+  fontStyle: 'var(--pb-accent-word-style, italic)',
+  fontWeight: 'var(--pb-accent-word-weight, 600)' as CSSProperties['fontWeight'],
+};
+
+// `<strong>`'s default `font-weight: bolder` is RELATIVE — inside a
+// `font-light` (300) display heading it computes to 400 and looks unchanged,
+// so heading bolds carry an explicit tenant-tunable weight.
+const STRONG_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-strong-weight, 600)' as CSSProperties['fontWeight'],
+};
+
+/**
+ * Renders a heading-style string as light markdown. `*word*` segments keep
+ * the signature accent treatment — italic semibold by default ("*Clusters*",
+ * "*Finder*", "*biodiversity*") — and `**bold**`, `` `code` `` and
+ * `[label](href)` render like every other rich-text site.
+ */
+export function AccentText({
+  text,
+  color,
+  allowLinks,
+}: {
+  text: string;
+  /**
+   * Colour for the emphasised segments. Omitted, they inherit — which is what
+   * headings want. A section can opt into a contrasting accent (BioGarden's
+   * "Offene Fragen" highlights phrases in the brand red) without turning every
+   * accent word on the page that colour.
+   */
+  color?: string;
+  /** Pass `false` when the accent text sits inside an `<a>`/`<button>`. */
+  allowLinks?: boolean;
+}): ReactNode {
+  return useMemo(() => {
+    if (!text) return null;
+    return renderRichText(text, {
+      allowLinks,
+      renderEm: (content, key) => (
+        <em
+          key={key}
+          className="font-semibold italic"
+          style={color ? { ...ACCENT_WORD_STYLE, color } : ACCENT_WORD_STYLE}
+        >
+          {content}
+        </em>
+      ),
+      renderStrong: (content, key) => (
+        <strong key={key} style={STRONG_STYLE}>
+          {content}
+        </strong>
+      ),
+    });
+  }, [text, color, allowLinks]);
+}

pagebuilder/components/widgets/_internal/disclosure-chevron.tsx

@@ -0,0 +1,14 @@
+export function DisclosureChevron() {
+  return (
+    <svg
+      className="size-5 transition-transform group-open:rotate-180"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <title>Toggle</title>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}

pagebuilder/components/widgets/_internal/eyebrow-split-section.tsx

@@ -0,0 +1,71 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { cn } from '../../../utils/widgetUtils';
+import { eyebrowTextStyle } from '../_shared';
+import { AccentText } from './accent-text';
+import { renderRichText } from './rich-text';
+
+const HEADING_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  color: 'var(--pb-heading-color)',
+  fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 2.2vw, 3rem))',
+};
+
+export type EyebrowSplitSectionProps = {
+  eyebrow?: string;
+  heading?: string;
+  /** Wraps the grid in the Mowing muted rounded card. */
+  muted?: boolean;
+  children: ReactNode;
+};
+
+/**
+ * Eyebrow-in-left-margin + big heading + content, on the tenant-tunable
+ * `--pb-split-cols` grid (Mowing aligns content to the 4th page-grid column).
+ * Shared by ProseSection, DefinitionList, and the LogoCloud grid variant, and
+ * matches the existing Mowing FAQ 2-column layout so all Mowing sections align.
+ */
+export function EyebrowSplitSection({
+  eyebrow,
+  heading,
+  muted = false,
+  children,
+}: EyebrowSplitSectionProps) {
+  return (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      <div
+        className={cn(
+          'grid gap-8 lg:grid-cols-[var(--pb-split-cols,1fr_2fr)] lg:gap-[var(--pb-split-gap,3rem)]',
+          muted &&
+            'rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)] px-8 py-12 lg:px-0 lg:py-20',
+        )}
+      >
+        {eyebrow && (
+          <p
+            className={cn(muted && 'lg:pl-12')}
+            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="max-w-[var(--pb-split-content-max,none)]">
+          {/* 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. */}
+          {heading && (
+            <h2 className="mb-8 leading-tight" style={HEADING_STYLE}>
+              <AccentText text={heading} />
+            </h2>
+          )}
+          {children}
+        </div>
+      </div>
+    </section>
+  );
+}

pagebuilder/components/widgets/_internal/link-arrow.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../../../utils/widgetUtils';
+
+/**
+ * Right-arrow icon for inline text links ("Learn more", "View all", …).
+ * The fill reads `--pb-link-arrow-color` so a tenant can tint every link
+ * arrow (Mowing → orange #fa6e25); the `currentColor` fallback keeps the
+ * arrow matching the link text for tenants that don't set the token.
+ */
+export function LinkArrow({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('size-6 shrink-0 fill-[var(--pb-link-arrow-color,currentColor)]', className)}
+      aria-hidden="true"
+    >
+      {/* No <title>: the svg is aria-hidden (decorative) and a title pops a
+			    stray native "Arrow" tooltip on every link hover. */}
+      <path d="M21.7061 12.7083L14.707 19.7073C14.512 19.9023 14.256 20.0003 14 20.0003C13.744 20.0003 13.488 19.9023 13.293 19.7073C12.902 19.3163 12.902 18.6842 13.293 18.2933L18.5859 13.0003H3C2.447 13.0003 2 12.5523 2 12.0003C2 11.4483 2.447 11.0003 3 11.0003H18.5859L13.293 5.70731C12.902 5.31631 12.902 4.68425 13.293 4.29325C13.684 3.90225 14.316 3.90225 14.707 4.29325L21.7061 11.2923C21.7991 11.3853 21.8721 11.4952 21.9231 11.6182C22.0241 11.8622 22.0241 12.1384 21.9231 12.3824C21.8721 12.5054 21.7991 12.6153 21.7061 12.7083Z" />
+    </svg>
+  );
+}