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

pagebuilder/components/widgets/story-cards-widget.tsx

@@ -0,0 +1,182 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { TextLink } from './_shared/text-link';
+
+// Hoisted heading style — constant tokens only. The fallback clamp reproduces
+// the prior `text-2xl sm:text-3xl lg:text-4xl` steps: 24px on phones, 30px at
+// the 640px breakpoint, 36px at 1024px.
+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-lg, clamp(1.5rem, 1.25rem + 1.5625vw, 2.25rem))',
+};
+
+export type StoryCardItem = {
+  imageUrl: string;
+  imageAlt: string;
+  eyebrow: string;
+  date: string;
+  title: string;
+  href: string;
+};
+
+export type StoryCardsWidgetProps = {
+  title: string;
+  subtitle: string;
+  viewAllLabel: string;
+  viewAllHref: string;
+  columns: '2' | '3' | '4';
+  items: StoryCardItem[];
+};
+
+const COLS_CLASS: Record<StoryCardsWidgetProps['columns'], string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export const StoryCardsWidget: ComponentConfig<StoryCardsWidgetProps> = {
+  label: 'Story cards (image with overlay text)',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    subtitle: { type: 'textarea', label: 'Subtitle' },
+    viewAllLabel: { type: 'text', label: 'View-all link label' },
+    viewAllHref: { type: 'text', label: 'View-all link URL' },
+    columns: {
+      type: 'select',
+      label: 'Columns (desktop)',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Stories',
+      arrayFields: {
+        imageUrl: createImageField(mediaLibraryAdapter, 'Image URL'),
+        imageAlt: { type: 'text', label: 'Image alt text' },
+        eyebrow: { type: 'text', label: 'Eyebrow / tag' },
+        date: { type: 'text', label: 'Date' },
+        title: { type: 'text', label: 'Title' },
+        href: { type: 'text', label: 'Link' },
+      },
+      defaultItemProps: {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Story',
+        date: '',
+        title: 'Story title',
+        href: '#',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    title: 'Get inspired',
+    subtitle: '',
+    viewAllLabel: '',
+    viewAllHref: '',
+    columns: '3',
+    items: [
+      {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Story',
+        date: '',
+        title: 'Hear first-hand from a Farmer Cluster',
+        href: '#',
+      },
+      {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Story',
+        date: '',
+        title: "Inside Europe's biggest cluster network",
+        href: '#',
+      },
+      {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Story',
+        date: '',
+        title: 'From farm to landscape: a journey',
+        href: '#',
+      },
+    ],
+  },
+  render: ({ title, subtitle, viewAllLabel, viewAllHref, columns, items }) => (
+    <section className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+      {(title || subtitle || (viewAllLabel && viewAllHref)) && (
+        <div className="mb-8 flex items-end justify-between gap-4">
+          <div>
+            {title && (
+              <h2 className="leading-[var(--pb-heading-leading,1.15)]" style={HEADING_STYLE}>
+                {renderRichText(title)}
+              </h2>
+            )}
+            {subtitle && (
+              <RichTextBlock
+                text={subtitle}
+                className="mt-3 max-w-3xl text-lg"
+                style={{ color: 'var(--pb-body-color)' }}
+              />
+            )}
+          </div>
+          {viewAllLabel && viewAllHref && <TextLink label={viewAllLabel} href={viewAllHref} />}
+        </div>
+      )}
+      <div className={cn('grid gap-4 grid-cols-1', COLS_CLASS[columns])}>
+        {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="group relative block aspect-[4/5] overflow-hidden rounded-xl"
+          >
+            {item.imageUrl ? (
+              <img
+                src={item.imageUrl}
+                alt={item.imageAlt || item.title}
+                loading="lazy"
+                className="absolute inset-0 size-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+            ) : (
+              <div className="absolute inset-0 bg-gradient-to-br from-primary-700 to-primary-900" />
+            )}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
+            {item.eyebrow && (
+              <span
+                data-pb-story-tag=""
+                className="absolute left-4 top-4 inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+                style={{
+                  backgroundColor: 'var(--pb-card-tag-bg, var(--pb-accent))',
+                  color: 'var(--pb-card-tag-color, var(--pb-accent-foreground))',
+                }}
+              >
+                {renderRichText(item.eyebrow, { allowLinks: false })}
+              </span>
+            )}
+            <div className="absolute inset-0 flex flex-col justify-end p-5 text-white">
+              {item.date && (
+                <span className="text-xs text-white/80">
+                  {renderRichText(item.date, { allowLinks: false })}
+                </span>
+              )}
+              <h3 className="mt-1 text-lg font-medium leading-snug">
+                {renderRichText(item.title, { allowLinks: false })}
+              </h3>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  ),
+};

pagebuilder/components/widgets/table-widget.tsx

@@ -0,0 +1,86 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { renderRichText } from './_internal/rich-text';
+
+export type TableWidgetProps = {
+  caption: string;
+  headers: string;
+  rows: string;
+};
+
+function parseDelimited(value: string): string[] {
+  return value
+    .split('|')
+    .map((cell) => cell.trim())
+    .filter((cell) => cell.length > 0);
+}
+
+export const TableWidget: ComponentConfig<TableWidgetProps> = {
+  label: 'Table',
+  fields: {
+    caption: { type: 'text', label: 'Caption (accessibility)' },
+    headers: { type: 'text', label: 'Headers (pipe-separated)' },
+    rows: {
+      type: 'textarea',
+      label: 'Rows (one per line, columns pipe-separated)',
+    },
+  },
+  defaultProps: {
+    caption: '',
+    headers: 'Name | Role | Email',
+    rows: 'Jane Doe | Director | jane@example.com\nJohn Smith | Manager | john@example.com',
+  },
+  render: ({ caption, headers, rows }) => {
+    const headerList = parseDelimited(headers);
+    const rowList = rows
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .map(parseDelimited);
+
+    if (headerList.length === 0 && rowList.length === 0) {
+      return (
+        <div className="text-gray-500 text-center py-4">Add headers and rows in the editor.</div>
+      );
+    }
+
+    return (
+      <div className="container mx-auto py-6 overflow-x-auto">
+        <table className="w-full border-collapse text-sm">
+          {caption && (
+            <caption className="text-sm text-gray-600 dark:text-gray-400 pb-3">
+              {renderRichText(caption)}
+            </caption>
+          )}
+          {headerList.length > 0 && (
+            <thead>
+              <tr className="bg-gray-50 dark:bg-gray-800">
+                {headerList.map((header, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                  <th key={idx} scope="col" className="text-left font-semibold px-4 py-3 border-b">
+                    {renderRichText(header)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {rowList.map((row, ridx) => (
+              <tr
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={ridx}
+                className="border-b last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-900"
+              >
+                {row.map((cell, cidx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                  <td key={cidx} className="px-4 py-3">
+                    {renderRichText(cell)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  },
+};

pagebuilder/components/widgets/tabs-widget.tsx

@@ -0,0 +1,95 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { useId, useState } from 'react';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type TabItem = {
+  label: string;
+  content: string;
+};
+
+export type TabsWidgetProps = {
+  items: TabItem[];
+};
+
+function TabsRenderer({ items }: TabsWidgetProps) {
+  const [active, setActive] = useState(0);
+  const baseId = useId();
+  if (!items || items.length === 0) {
+    return (
+      <div className="text-gray-500 text-center py-4">
+        Add tabs in the editor to populate this section.
+      </div>
+    );
+  }
+  const safeIndex = Math.min(active, items.length - 1);
+  return (
+    <div className="container mx-auto max-w-3xl py-8">
+      <div className="border-b flex flex-wrap gap-2" role="tablist" aria-label="Tabs">
+        {items.map((item, idx) => {
+          const isActive = idx === safeIndex;
+          const tabId = `${baseId}-tab-${idx}`;
+          const panelId = `${baseId}-panel-${idx}`;
+          return (
+            <button
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              key={idx}
+              id={tabId}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={panelId}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => {
+                if (idx !== safeIndex) setActive(idx);
+              }}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                isActive
+                  ? 'border-primary-700 text-primary-700 dark:text-primary-400 dark:border-primary-300'
+                  : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+              }`}
+            >
+              {item.label ? renderRichText(item.label, { allowLinks: false }) : `Tab ${idx + 1}`}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        id={`${baseId}-panel-${safeIndex}`}
+        role="tabpanel"
+        aria-labelledby={`${baseId}-tab-${safeIndex}`}
+        className="pt-4"
+      >
+        {items[safeIndex]?.content && (
+          <RichTextBlock
+            text={items[safeIndex].content}
+            className="leading-relaxed whitespace-pre-line"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const TabsWidget: ComponentConfig<TabsWidgetProps> = {
+  label: 'Tabs',
+  fields: {
+    items: {
+      type: 'array',
+      label: 'Tabs',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        content: { type: 'textarea', label: 'Content' },
+      },
+      defaultItemProps: { label: 'Tab', content: 'Tab content...' },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    items: [
+      { label: 'Overview', content: 'Overview content...' },
+      { label: 'Details', content: 'Details content...' },
+    ],
+  },
+  render: ({ items }) => <TabsRenderer items={items || []} />,
+};

pagebuilder/components/widgets/tags-widget.tsx

@@ -0,0 +1,85 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+import { renderRichText } from './_internal/rich-text';
+
+export type TagItem = {
+  label: string;
+  href: string;
+  active: boolean;
+};
+
+export type TagsWidgetProps = {
+  label: string;
+  items: TagItem[];
+};
+
+export const TagsWidget: ComponentConfig<TagsWidgetProps> = {
+  label: 'Tags (pill row)',
+  fields: {
+    label: { type: 'text', label: 'Aria label' },
+    items: {
+      type: 'array',
+      label: 'Tags',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'Link' },
+        active: {
+          type: 'radio',
+          label: 'Active',
+          options: [
+            { label: 'No', value: false },
+            { label: 'Yes', value: true },
+          ],
+        },
+      },
+      defaultItemProps: { label: 'Tag', href: '#', active: false },
+      min: 1,
+      max: 50,
+    },
+  },
+  defaultProps: {
+    label: 'Filters',
+    items: [
+      { label: 'All', href: '#', active: true },
+      { label: 'English', href: '#', active: false },
+      { label: 'Français', href: '#', active: false },
+    ],
+  },
+  render: ({ label, items }) =>
+    !items || items.length === 0 ? (
+      <div className="text-gray-500 text-center py-4">Add tags in the editor.</div>
+    ) : (
+      <nav aria-label={label || 'Tags'} className="container mx-auto px-4 py-4 sm:px-6 lg:px-8">
+        <ul className="flex flex-wrap gap-2">
+          {items.map((tag, idx) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+            <li key={idx}>
+              <a
+                href={tag.href || '#'}
+                aria-current={tag.active ? 'page' : undefined}
+                className={cn(
+                  'inline-flex items-center gap-2 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors',
+                  tag.active
+                    ? 'border-primary-700 bg-primary-50 text-primary-800'
+                    : 'border-gray-200 text-gray-700 hover:border-primary-300 hover:bg-primary-50',
+                )}
+              >
+                {/* Radio-style indicator (filled when active) — matches the
+								    GCA filter pills. */}
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    'flex size-3.5 shrink-0 items-center justify-center rounded-full border',
+                    tag.active ? 'border-primary-700' : 'border-gray-300',
+                  )}
+                >
+                  {tag.active && <span className="size-1.5 rounded-full bg-primary-700" />}
+                </span>
+                {renderRichText(tag.label, { allowLinks: false })}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    ),
+};

pagebuilder/components/widgets/testimonial-widget.tsx

@@ -0,0 +1,102 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { renderRichText } from './_internal/rich-text';
+
+export type TestimonialItem = {
+  quote: string;
+  name: string;
+  role: string;
+  avatarUrl: string;
+};
+
+export type TestimonialWidgetProps = {
+  title: string;
+  items: TestimonialItem[];
+};
+
+export const TestimonialWidget: ComponentConfig<TestimonialWidgetProps> = {
+  label: 'Testimonials',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    items: {
+      type: 'array',
+      label: 'Testimonials',
+      arrayFields: {
+        quote: { type: 'textarea', label: 'Quote' },
+        name: { type: 'text', label: 'Name' },
+        role: { type: 'text', label: 'Role' },
+        avatarUrl: createImageField(mediaLibraryAdapter, 'Avatar URL'),
+      },
+      defaultItemProps: {
+        quote: 'Great product!',
+        name: 'Jane Doe',
+        role: 'CEO at Acme',
+        avatarUrl: '',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    title: 'What our customers say',
+    items: [
+      {
+        quote: 'This changed how we work.',
+        name: 'Jane Doe',
+        role: 'CEO at Acme',
+        avatarUrl: '',
+      },
+      {
+        quote: 'Highly recommended.',
+        name: 'John Smith',
+        role: 'Founder at Beta',
+        avatarUrl: '',
+      },
+    ],
+  },
+  render: ({ title, items }) => (
+    <div className="container mx-auto px-4 py-16">
+      {title && (
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-light text-center mb-12">
+          {renderRichText(title)}
+        </h2>
+      )}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {items?.map((item, idx) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+          <figure key={idx} className="rounded-2xl border bg-white dark:bg-gray-900 p-8 shadow-sm">
+            <svg
+              className="size-8 text-primary-400"
+              fill="currentColor"
+              viewBox="0 0 32 32"
+              aria-hidden="true"
+            >
+              <title>Quote</title>
+              <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
+            </svg>
+            <blockquote className="mt-4 text-lg leading-relaxed">
+              {renderRichText(item.quote)}
+            </blockquote>
+            <figcaption className="mt-6 flex items-center gap-4">
+              {item.avatarUrl ? (
+                <img
+                  src={item.avatarUrl}
+                  alt={item.name}
+                  className="size-12 rounded-full object-cover"
+                />
+              ) : (
+                <div className="size-12 rounded-full bg-gradient-to-br from-gray-200 to-gray-300" />
+              )}
+              <div>
+                <div className="font-semibold">{renderRichText(item.name)}</div>
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  {renderRichText(item.role)}
+                </div>
+              </div>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </div>
+  ),
+};

pagebuilder/components/widgets/timeline-layout.ts

@@ -0,0 +1,73 @@
+/** Timeline types and marker geometry. Split out so the widget's field
+ *  definitions and its render can import them without a cycle, and so all
+ *  three stay under the 300-line cap. */
+
+export type TimelineItem = {
+  marker: string;
+  title: string;
+  body: string;
+  /**
+   * Trailing emphasis line under the body (the design's bold-italic date, e.g.
+   * "September & Oktober 2026"). Kept separate from `body` so it can sit on its
+   * own line rather than running into the sentence before it.
+   */
+  meta?: string;
+  /** Blobs variant only: CSS color filling the organic blob. */
+  color?: string;
+  /**
+   * Blobs variant only: per-entry organic mask (SVG url), overriding the
+   * section-wide `blobMaskUrl`. The BioGarden Figma draws each milestone as a
+   * DIFFERENT shape, so one mask for the whole row was visibly wrong.
+   */
+  shapeMaskUrl?: string;
+  /**
+   * Supplied transparent artwork for the blob, used INSTEAD of
+   * `shapeMaskUrl` + `color`: the file carries the shape AND its fill, and the
+   * entry's copy is laid out over it. Preferred — a mask re-derives the
+   * silhouette from a hand-kept SVG and drifts from the design.
+   */
+  shapeImageUrl?: string;
+};
+export type TimelineWidgetProps = {
+  eyebrow: string;
+  title: string;
+  /** "muted" wraps the section in a soft rounded card (Mowing "Incentives"). */
+  surface?: 'default' | 'muted';
+  /**
+   * "rows" is the default vertical-list rendering. "blobs" lays the entries
+   * out as a row of organic coloured shapes (BioGarden "Projekt-Fahrplan").
+   */
+  variant?: 'rows' | 'blobs';
+  /** Blobs variant: organic mask (SVG url) clipped over each blob. */
+  blobMaskUrl?: string;
+  /**
+   * Blobs variant: organic mask for the marker tag. Set it and the marker
+   * renders as a tilted blob overhanging the shape's top-left (the BioGarden
+   * Figma); leave it blank and the marker stays the inline centered pill.
+   */
+  markerMaskUrl?: string;
+  /** Supplied transparent artwork for the marker tag (replaces mask + colour). */
+  markerImageUrl?: string;
+  /** Blobs variant: CSS color filling the marker blob (Figma: brand yellow). */
+  markerColor?: string;
+  items: TimelineItem[];
+};
+
+/**
+ * Marker-blob geometry, as fractions of the blob box, re-measured off the
+ * BioGarden Figma (blob 415x343 at 59,4097; marker AABB 133.26x117.6 at
+ * 48.88,**4094** — so the tag straddles the blob's upper-left edge, well clear
+ * of the copy). The previous 27.4% top came from a mis-read y and dropped the
+ * tag onto the entry title. The tag art is drawn tilted in the design and its
+ * label stays upright, so the mask and the text are separate layers over one
+ * shared centering box.
+ */
+export const MARKER_BLOB = {
+  /** Center of the marker, relative to the blob box. */
+  left: '13.6%',
+  top: '16.3%',
+  /** Unrotated width; the box keeps the tag vector's own aspect (no squash). */
+  width: '27%',
+  aspect: '159.547 / 116.348',
+  rotation: '-20.12deg',
+} as const;