@commercetools-demo/puck-components 0.8.0

package/dist/index.d.mts

@@ -0,0 +1,418 @@
+import React from 'react';
+import { ComponentConfig, Config } from '@measured/puck';
+
+/**
+ * Locale catalogs owned by this package, keyed by language. `en.json` is the
+ * source of truth; other locales are generated by `scripts/translate-messages.mjs`
+ * and may be empty until that script is run (missing keys fall back to the
+ * English `defaultMessage`).
+ */
+declare const catalogs: Record<string, Record<string, string>>;
+
+/**
+ * Sanitize rich-text HTML before it is injected via dangerouslySetInnerHTML.
+ *
+ * RichText/TextBlock/Card store author-controlled HTML produced by the TipTap
+ * editor, but content can also arrive from imports or older data, so we always
+ * sanitize at render time. isomorphic-dompurify works in both the browser and
+ * during SSR, so this is safe wherever the renderer runs.
+ *
+ * `style` and `class` are allowed because the editor emits inline styles
+ * (e.g. font-size from the typography control) and structural classes.
+ */
+declare const sanitizeHtml: (html: string | undefined | null) => string;
+
+interface RichTextContentProps {
+    /** Rich-text HTML string; sanitized here before injection. */
+    html: string | undefined | null;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const RichTextContent: React.FC<RichTextContentProps>;
+
+/**
+ * Datasource value types — Nimbus-free so both the render layer (this package)
+ * and the editor's `DatasourceField` widget can share them without the widget's
+ * Nimbus deps leaking into the render graph.
+ */
+type DatasourceType = 'product-by-sku' | 'products-by-sku';
+interface DatasourceValue {
+    type: DatasourceType;
+    skus: string[];
+    /** Pre-resolved by the server on published/preview endpoints — use directly in render. */
+    resolvedData?: unknown;
+}
+
+declare const getLocalizedText: (obj?: Record<string, string> | null) => string;
+declare const formatPrice: (centAmount: number, currencyCode?: string, fractionDigits?: number) => string;
+declare const getFirstPrice: (product: unknown) => {
+    centAmount: number;
+    currencyCode: string;
+    fractionDigits: number;
+} | null;
+declare const getProductImage: (product: unknown) => string | null;
+declare const getProductName: (product: unknown) => string;
+declare const getProductSlug: (product: unknown) => string;
+declare const getProductSku: (product: unknown) => string;
+/** How a product link is built — from the product slug or its SKU. */
+type ProductLinkWith = 'slug' | 'sku';
+/**
+ * Build a storefront link to a product.
+ *
+ * Joins a sanitised base URL with the product's slug or SKU. The base is
+ * trimmed, stripped of leading/trailing slashes and collapsed of any double
+ * slashes, then re-prefixed with a single "/", e.g.
+ *   resolveProductLink(p, 'sku',  '/product/') → '/product/123'   (sku 123)
+ *   resolveProductLink(p, 'slug', '/slug/p/')  → '/slug/p/test'   (slug "test")
+ */
+declare const resolveProductLink: (product: unknown, linkWith?: ProductLinkWith, baseUrl?: string) => string;
+/** Props every product-linking component shares. */
+interface ProductLinkProps {
+    linkWith: ProductLinkWith;
+    baseUrl: string;
+}
+/** Default values for the shared link props — spread into a component's defaultProps. */
+declare const productLinkDefaults: ProductLinkProps;
+declare const colors: {
+    primary: string;
+    primaryHover: string;
+    lightBg: string;
+    lightBorder: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    bg: string;
+};
+
+/**
+ * Page content-width scale. `X` is the base column unit; each step doubles up
+ * to a wide layout, and `full` removes the constraint (edge-to-edge).
+ */
+type ContentWidth = 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | 'full';
+declare const CONTENT_WIDTHS: Record<ContentWidth, string>;
+interface RootProps {
+    title?: string;
+    backgroundColor?: string;
+    contentWidth?: ContentWidth;
+}
+/**
+ * Root render — the page wrapper. Applies the background and centres the content
+ * column at the configured width. Nimbus-free (plain elements + inline styles).
+ */
+declare const renderRoot: ({ children, backgroundColor, contentWidth, }: RootProps & {
+    children?: React.ReactNode;
+}) => React.ReactElement;
+
+interface HeroProps {
+    heading: string;
+    headingFontSize?: string;
+    subheading?: string;
+    subheadingFontSize?: string;
+    backgroundImage?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    layout?: 'centered' | 'left-aligned';
+    minHeight?: string;
+}
+declare const renderHero: NonNullable<ComponentConfig<HeroProps>['render']>;
+
+interface RichTextProps {
+    content: string;
+    align?: 'left' | 'center' | 'right';
+    maxWidth?: string;
+    padding?: string;
+}
+declare const renderRichText: NonNullable<ComponentConfig<RichTextProps>['render']>;
+
+interface GridProps {
+    columnCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    rowCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: string;
+    padding?: string;
+}
+declare const renderGrid: NonNullable<ComponentConfig<GridProps>['render']>;
+
+interface ColumnsProps {
+    columnCount?: 2 | 3 | 4;
+    gap?: string;
+    padding?: string;
+}
+declare const renderColumns: NonNullable<ComponentConfig<ColumnsProps>['render']>;
+
+interface ImageProps {
+    src: string;
+    alt?: string;
+    caption?: string;
+    width?: string;
+    height?: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    borderRadius?: string;
+    align?: 'left' | 'center' | 'right';
+}
+declare const renderImage: NonNullable<ComponentConfig<ImageProps>['render']>;
+
+interface ButtonProps {
+    label: string;
+    href?: string;
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    fontSize?: string;
+    align?: 'left' | 'center' | 'right';
+    openInNewTab?: boolean;
+}
+declare const renderButton: NonNullable<ComponentConfig<ButtonProps>['render']>;
+
+interface CardProps {
+    title: string;
+    titleFontSize?: string;
+    body?: string;
+    imageUrl?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    shadow?: boolean;
+    borderRadius?: string;
+}
+declare const renderCard: NonNullable<ComponentConfig<CardProps>['render']>;
+
+interface SpacerProps {
+    height?: string;
+    showLine?: boolean;
+    lineColor?: string;
+}
+declare const renderSpacer: NonNullable<ComponentConfig<SpacerProps>['render']>;
+
+interface ProductTeaserProps extends ProductLinkProps {
+    datasource: DatasourceValue;
+    richText: string;
+}
+declare const renderProductTeaser: NonNullable<ComponentConfig<ProductTeaserProps>['render']>;
+
+interface HeroBannerProps {
+    title: string;
+    subtitle: string;
+    image: string;
+}
+declare const renderHeroBanner: NonNullable<ComponentConfig<HeroBannerProps>['render']>;
+
+interface TextBlockProps {
+    content: string;
+}
+declare const renderTextBlock: NonNullable<ComponentConfig<TextBlockProps>['render']>;
+
+interface CategoryGridProps {
+    category1Image: string;
+    category1Label: string;
+    category1Link: string;
+    category2Image: string;
+    category2Label: string;
+    category2Link: string;
+    category3Image: string;
+    category3Label: string;
+    category3Link: string;
+    category4Image: string;
+    category4Label: string;
+    category4Link: string;
+}
+declare const renderCategoryGrid: NonNullable<ComponentConfig<CategoryGridProps>['render']>;
+
+interface CategoryHeroProps {
+    title: string;
+    subtitle: string;
+    image: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const renderCategoryHero: NonNullable<ComponentConfig<CategoryHeroProps>['render']>;
+
+interface CheckoutPromoBannerProps {
+    title: string;
+    message: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const renderCheckoutPromoBanner: NonNullable<ComponentConfig<CheckoutPromoBannerProps>['render']>;
+
+interface CountdownBannerProps {
+    headline: string;
+    subline: string;
+    endDate: string;
+    ctaText: string;
+    ctaLink: string;
+    background: string;
+}
+declare const renderCountdownBanner: NonNullable<ComponentConfig<CountdownBannerProps>['render']>;
+
+interface CrossSellBlockProps extends ProductLinkProps {
+    title: string;
+    products: DatasourceValue;
+    ctaText: string;
+}
+declare const renderCrossSellBlock: NonNullable<ComponentConfig<CrossSellBlockProps>['render']>;
+
+interface DeliveryMessageProps {
+    message: string;
+    threshold: string;
+}
+declare const renderDeliveryMessage: NonNullable<ComponentConfig<DeliveryMessageProps>['render']>;
+
+interface DividerProps {
+    lineStyle: 'solid' | 'dashed' | 'dotted';
+    spacing: string;
+}
+declare const renderDivider: NonNullable<ComponentConfig<DividerProps>['render']>;
+
+interface EmptyStateProps {
+    image: string;
+    title: string;
+    description: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const renderEmptyState: NonNullable<ComponentConfig<EmptyStateProps>['render']>;
+
+interface FAQAccordionProps {
+    question1: string;
+    answer1: string;
+    question2: string;
+    answer2: string;
+    question3: string;
+    answer3: string;
+    question4: string;
+    answer4: string;
+}
+declare const renderFAQAccordion: NonNullable<ComponentConfig<FAQAccordionProps>['render']>;
+
+interface FooterBlockProps {
+    column1: string;
+    column2: string;
+    column3: string;
+    copyright: string;
+}
+declare const renderFooterBlock: NonNullable<ComponentConfig<FooterBlockProps>['render']>;
+
+interface ImageBlockProps {
+    image: string;
+    caption: string;
+    link: string;
+}
+declare const renderImageBlock: NonNullable<ComponentConfig<ImageBlockProps>['render']>;
+
+interface NewsletterSignupProps {
+    title: string;
+    subtitle: string;
+    ctaText: string;
+    placeholder: string;
+}
+declare const renderNewsletterSignup: NonNullable<ComponentConfig<NewsletterSignupProps>['render']>;
+
+interface ProductBannerProps extends ProductLinkProps {
+    title: string;
+    description: string;
+    ctaText: string;
+    ctaLink: string;
+    product: DatasourceValue;
+    productOnLeft: boolean;
+    background: string;
+}
+declare const renderProductBanner: NonNullable<ComponentConfig<ProductBannerProps>['render']>;
+
+interface ProductGridHeaderProps {
+    title: string;
+    description: string;
+}
+declare const renderProductGridHeader: NonNullable<ComponentConfig<ProductGridHeaderProps>['render']>;
+
+interface ProductSliderProps extends ProductLinkProps {
+    title: string;
+    subtitle: string;
+    products: DatasourceValue;
+}
+declare const renderProductSlider: NonNullable<ComponentConfig<ProductSliderProps>['render']>;
+
+interface PromotionalBannerProps {
+    image: string;
+    title: string;
+    subtitle: string;
+    ctaText: string;
+    ctaLink: string;
+    background: string;
+}
+declare const renderPromotionalBanner: NonNullable<ComponentConfig<PromotionalBannerProps>['render']>;
+
+interface RelatedProductsSliderProps extends ProductLinkProps {
+    title: string;
+    subtitle: string;
+    products: DatasourceValue;
+}
+declare const renderRelatedProductsSlider: NonNullable<ComponentConfig<RelatedProductsSliderProps>['render']>;
+
+interface SocialLinksProps {
+    link1Label: string;
+    link1Url: string;
+    link2Label: string;
+    link2Url: string;
+    link3Label: string;
+    link3Url: string;
+    link4Label: string;
+    link4Url: string;
+}
+declare const renderSocialLinks: NonNullable<ComponentConfig<SocialLinksProps>['render']>;
+
+interface TabContentProps {
+    tabLabel: string;
+    content: string;
+}
+declare const renderTabContent: NonNullable<ComponentConfig<TabContentProps>['render']>;
+
+interface TestimonialsSliderProps {
+    quote1: string;
+    author1: string;
+    role1: string;
+    quote2: string;
+    author2: string;
+    role2: string;
+    quote3: string;
+    author3: string;
+    role3: string;
+}
+declare const renderTestimonialsSlider: NonNullable<ComponentConfig<TestimonialsSliderProps>['render']>;
+
+interface ThankYouContentProps {
+    headline: string;
+    message: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const renderThankYouContent: NonNullable<ComponentConfig<ThankYouContentProps>['render']>;
+
+interface TrustBadgesProps {
+    badge1Icon: string;
+    badge1Label: string;
+    badge2Icon: string;
+    badge2Label: string;
+    badge3Icon: string;
+    badge3Label: string;
+    badge4Icon: string;
+    badge4Label: string;
+}
+declare const renderTrustBadges: NonNullable<ComponentConfig<TrustBadgesProps>['render']>;
+
+interface VideoBlockProps {
+    videoUrl: string;
+    posterImage: string;
+    title: string;
+    caption: string;
+}
+declare const renderVideoBlock: NonNullable<ComponentConfig<VideoBlockProps>['render']>;
+
+interface WebsiteLogoProps {
+    logo: string;
+    maxWidth: string;
+    maxHeight: string;
+}
+declare const renderWebsiteLogo: NonNullable<ComponentConfig<WebsiteLogoProps>['render']>;
+
+declare function createRenderConfig(): Config;
+declare const defaultRenderConfig: Config;
+
+export { type ButtonProps, CONTENT_WIDTHS, type CardProps, type CategoryGridProps, type CategoryHeroProps, type CheckoutPromoBannerProps, type ColumnsProps, type ContentWidth, type CountdownBannerProps, type CrossSellBlockProps, type DatasourceType, type DatasourceValue, type DeliveryMessageProps, type DividerProps, type EmptyStateProps, type FAQAccordionProps, type FooterBlockProps, type GridProps, type HeroBannerProps, type HeroProps, type ImageBlockProps, type ImageProps, type NewsletterSignupProps, type ProductBannerProps, type ProductGridHeaderProps, type ProductLinkProps, type ProductLinkWith, type ProductSliderProps, type ProductTeaserProps, type PromotionalBannerProps, type RelatedProductsSliderProps, RichTextContent, type RichTextContentProps, type RichTextProps, type RootProps, type SocialLinksProps, type SpacerProps, type TabContentProps, type TestimonialsSliderProps, type TextBlockProps, type ThankYouContentProps, type TrustBadgesProps, type VideoBlockProps, type WebsiteLogoProps, colors, createRenderConfig, defaultRenderConfig, formatPrice, getFirstPrice, getLocalizedText, getProductImage, getProductName, getProductSku, getProductSlug, catalogs as intlCatalogs, productLinkDefaults, renderButton, renderCard, renderCategoryGrid, renderCategoryHero, renderCheckoutPromoBanner, renderColumns, renderCountdownBanner, renderCrossSellBlock, renderDeliveryMessage, renderDivider, renderEmptyState, renderFAQAccordion, renderFooterBlock, renderGrid, renderHero, renderHeroBanner, renderImage, renderImageBlock, renderNewsletterSignup, renderProductBanner, renderProductGridHeader, renderProductSlider, renderProductTeaser, renderPromotionalBanner, renderRelatedProductsSlider, renderRichText, renderRoot, renderSocialLinks, renderSpacer, renderTabContent, renderTestimonialsSlider, renderTextBlock, renderThankYouContent, renderTrustBadges, renderVideoBlock, renderWebsiteLogo, resolveProductLink, sanitizeHtml };