@commercetools-demo/puck-editor 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,389 @@
+import React, { ReactNode } from 'react';
+import { Config, ComponentConfig } from '@measured/puck';
+import { PuckData, PuckStateInfo } from '@commercetools-demo/puck-types';
+
+interface PuckEditorProps {
+    /** Service base URL, e.g. "http://localhost:8080" */
+    baseURL: string;
+    /** CommerceTools project key */
+    projectKey: string;
+    /** Business unit key */
+    businessUnitKey: string;
+    /** JWT bearer token — required for save/publish mutations */
+    jwtToken: string;
+    /** The key of the puck page to edit */
+    pageKey: string;
+    /**
+     * Puck component config.
+     * Defaults to `defaultPuckConfig` (all built-in components).
+     * Consumers can extend or replace.
+     */
+    config?: Config;
+    /** Called after a successful publish */
+    onPublish?: (puckData: PuckData) => void;
+    /** Called after each auto-save */
+    onSave?: (puckData: PuckData) => void;
+    /** Called when an error occurs */
+    onError?: (error: Error) => void;
+    /** Show the Publish button in the toolbar. Default: true */
+    showPublishButton?: boolean;
+    /** Debounce delay for auto-save in ms. Default: 1500 */
+    autoSaveDebounceMs?: number;
+}
+declare const PuckEditor: React.FC<PuckEditorProps>;
+
+/**
+ * Default Puck configuration with built-in components.
+ *
+ * Consumers can extend this:
+ * ```ts
+ * import { defaultPuckConfig } from '@commercetools-demo/puck-editor';
+ * const myConfig = {
+ *   ...defaultPuckConfig,
+ *   components: { ...defaultPuckConfig.components, MyComponent },
+ * };
+ * ```
+ */
+declare const defaultPuckConfig: Config;
+
+interface HeroProps {
+    heading: string;
+    subheading?: string;
+    backgroundImage?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    layout?: 'centered' | 'left-aligned';
+    minHeight?: string;
+}
+declare const Hero: ComponentConfig<HeroProps>;
+
+interface RichTextProps {
+    content: string;
+    align?: 'left' | 'center' | 'right';
+    maxWidth?: string;
+    padding?: string;
+}
+declare const RichText: ComponentConfig<RichTextProps>;
+
+interface ColumnsProps {
+    columnCount?: 2 | 3 | 4;
+    gap?: string;
+    padding?: string;
+}
+declare const Columns: ComponentConfig<ColumnsProps>;
+
+interface ImageProps {
+    src: string;
+    alt?: string;
+    caption?: string;
+    width?: string;
+    height?: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    borderRadius?: string;
+    align?: 'left' | 'center' | 'right';
+}
+declare const Image: ComponentConfig<ImageProps>;
+
+interface ButtonProps {
+    label: string;
+    href?: string;
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'left' | 'center' | 'right';
+    openInNewTab?: boolean;
+}
+declare const Button: ComponentConfig<ButtonProps>;
+
+interface CardProps {
+    title: string;
+    body?: string;
+    imageUrl?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    shadow?: boolean;
+    borderRadius?: string;
+}
+declare const Card: ComponentConfig<CardProps>;
+
+interface SpacerProps {
+    height?: string;
+    showLine?: boolean;
+    lineColor?: string;
+}
+declare const Spacer: ComponentConfig<SpacerProps>;
+
+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;
+}
+interface DatasourceFieldProps {
+    value: DatasourceValue | undefined;
+    onChange: (value: DatasourceValue) => void;
+}
+declare const DatasourceField: React.FC<DatasourceFieldProps>;
+
+interface ProductTeaserProps {
+    datasource: DatasourceValue;
+    richText: string;
+}
+declare const ProductTeaser: ComponentConfig<ProductTeaserProps>;
+
+interface HeroBannerProps {
+    title: string;
+    subtitle: string;
+    image: string;
+}
+declare const HeroBanner: ComponentConfig<HeroBannerProps>;
+
+interface TextBlockProps {
+    content: string;
+}
+declare const TextBlock: ComponentConfig<TextBlockProps>;
+
+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 CategoryGrid: ComponentConfig<CategoryGridProps>;
+
+interface CategoryHeroProps {
+    title: string;
+    subtitle: string;
+    image: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const CategoryHero: ComponentConfig<CategoryHeroProps>;
+
+interface CheckoutPromoBannerProps {
+    title: string;
+    message: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const CheckoutPromoBanner: ComponentConfig<CheckoutPromoBannerProps>;
+
+interface CountdownBannerProps {
+    headline: string;
+    subline: string;
+    endDate: string;
+    ctaText: string;
+    ctaLink: string;
+    background: string;
+}
+declare const CountdownBanner: ComponentConfig<CountdownBannerProps>;
+
+interface CrossSellBlockProps {
+    title: string;
+    products: DatasourceValue;
+    ctaText: string;
+}
+declare const CrossSellBlock: ComponentConfig<CrossSellBlockProps>;
+
+interface DeliveryMessageProps {
+    message: string;
+    threshold: string;
+}
+declare const DeliveryMessage: ComponentConfig<DeliveryMessageProps>;
+
+interface DividerProps {
+    lineStyle: 'solid' | 'dashed' | 'dotted';
+    spacing: string;
+}
+declare const Divider: ComponentConfig<DividerProps>;
+
+interface EmptyStateProps {
+    image: string;
+    title: string;
+    description: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const EmptyState: ComponentConfig<EmptyStateProps>;
+
+interface FAQAccordionProps {
+    question1: string;
+    answer1: string;
+    question2: string;
+    answer2: string;
+    question3: string;
+    answer3: string;
+    question4: string;
+    answer4: string;
+}
+declare const FAQAccordion: ComponentConfig<FAQAccordionProps>;
+
+interface FooterBlockProps {
+    column1: string;
+    column2: string;
+    column3: string;
+    copyright: string;
+}
+declare const FooterBlock: ComponentConfig<FooterBlockProps>;
+
+interface ImageBlockProps {
+    image: string;
+    caption: string;
+    link: string;
+}
+declare const ImageBlock: ComponentConfig<ImageBlockProps>;
+
+interface NewsletterSignupProps {
+    title: string;
+    subtitle: string;
+    ctaText: string;
+    placeholder: string;
+}
+declare const NewsletterSignup: ComponentConfig<NewsletterSignupProps>;
+
+interface ProductBannerProps {
+    title: string;
+    description: string;
+    ctaText: string;
+    ctaLink: string;
+    product: DatasourceValue;
+    productOnLeft: boolean;
+    background: string;
+}
+declare const ProductBanner: ComponentConfig<ProductBannerProps>;
+
+interface ProductGridHeaderProps {
+    title: string;
+    description: string;
+}
+declare const ProductGridHeader: ComponentConfig<ProductGridHeaderProps>;
+
+interface ProductSliderProps {
+    title: string;
+    subtitle: string;
+    products: DatasourceValue;
+}
+declare const ProductSlider: ComponentConfig<ProductSliderProps>;
+
+interface PromotionalBannerProps {
+    image: string;
+    title: string;
+    subtitle: string;
+    ctaText: string;
+    ctaLink: string;
+    background: string;
+}
+declare const PromotionalBanner: ComponentConfig<PromotionalBannerProps>;
+
+interface RelatedProductsSliderProps {
+    title: string;
+    subtitle: string;
+    products: DatasourceValue;
+}
+declare const RelatedProductsSlider: ComponentConfig<RelatedProductsSliderProps>;
+
+interface SocialLinksProps {
+    link1Label: string;
+    link1Url: string;
+    link2Label: string;
+    link2Url: string;
+    link3Label: string;
+    link3Url: string;
+    link4Label: string;
+    link4Url: string;
+}
+declare const SocialLinks: ComponentConfig<SocialLinksProps>;
+
+interface TabContentProps {
+    tabLabel: string;
+    content: string;
+}
+declare const TabContent: ComponentConfig<TabContentProps>;
+
+interface TestimonialsSliderProps {
+    quote1: string;
+    author1: string;
+    role1: string;
+    quote2: string;
+    author2: string;
+    role2: string;
+    quote3: string;
+    author3: string;
+    role3: string;
+}
+declare const TestimonialsSlider: ComponentConfig<TestimonialsSliderProps>;
+
+interface ThankYouContentProps {
+    headline: string;
+    message: string;
+    ctaText: string;
+    ctaLink: string;
+}
+declare const ThankYouContent: ComponentConfig<ThankYouContentProps>;
+
+interface TrustBadgesProps {
+    badge1Icon: string;
+    badge1Label: string;
+    badge2Icon: string;
+    badge2Label: string;
+    badge3Icon: string;
+    badge3Label: string;
+    badge4Icon: string;
+    badge4Label: string;
+}
+declare const TrustBadges: ComponentConfig<TrustBadgesProps>;
+
+interface VideoBlockProps {
+    videoUrl: string;
+    posterImage: string;
+    title: string;
+    caption: string;
+}
+declare const VideoBlock: ComponentConfig<VideoBlockProps>;
+
+interface WebsiteLogoProps {
+    logo: string;
+    maxWidth: string;
+    maxHeight: string;
+}
+declare const WebsiteLogo: ComponentConfig<WebsiteLogoProps>;
+
+interface ImagePickerFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Only show images (default: true) */
+    imagesOnly?: boolean;
+}
+declare const ImagePickerField: React.FC<ImagePickerFieldProps>;
+
+interface EditorToolbarProps {
+    saving: boolean;
+    isDirty: boolean;
+    states: PuckStateInfo;
+    onSave: () => void;
+    onPublish: () => void;
+    onRevert: () => void;
+    showPublishButton: boolean;
+}
+declare const EditorToolbar: React.FC<EditorToolbarProps>;
+
+declare const ComponentSearchProvider: React.FC<{
+    children: ReactNode;
+}>;
+declare const ComponentsPanel: React.FC<{
+    children: ReactNode;
+}>;
+declare const ComponentItemFilter: React.FC<{
+    children: ReactNode;
+    name: string;
+}>;
+
+export { Button, type ButtonProps, Card, type CardProps, CategoryGrid, type CategoryGridProps, CategoryHero, type CategoryHeroProps, CheckoutPromoBanner, type CheckoutPromoBannerProps, Columns, type ColumnsProps, ComponentItemFilter, ComponentSearchProvider, ComponentsPanel, CountdownBanner, type CountdownBannerProps, CrossSellBlock, type CrossSellBlockProps, DatasourceField, type DatasourceFieldProps, type DatasourceType, type DatasourceValue, DeliveryMessage, type DeliveryMessageProps, Divider, type DividerProps, EditorToolbar, type EditorToolbarProps, EmptyState, type EmptyStateProps, FAQAccordion, type FAQAccordionProps, FooterBlock, type FooterBlockProps, Hero, HeroBanner, type HeroBannerProps, type HeroProps, Image, ImageBlock, type ImageBlockProps, ImagePickerField, type ImagePickerFieldProps, type ImageProps, NewsletterSignup, type NewsletterSignupProps, ProductBanner, type ProductBannerProps, ProductGridHeader, type ProductGridHeaderProps, ProductSlider, type ProductSliderProps, ProductTeaser, type ProductTeaserProps, PromotionalBanner, type PromotionalBannerProps, PuckEditor, type PuckEditorProps, RelatedProductsSlider, type RelatedProductsSliderProps, RichText, type RichTextProps, SocialLinks, type SocialLinksProps, Spacer, type SpacerProps, TabContent, type TabContentProps, TestimonialsSlider, type TestimonialsSliderProps, TextBlock, type TextBlockProps, ThankYouContent, type ThankYouContentProps, TrustBadges, type TrustBadgesProps, VideoBlock, type VideoBlockProps, WebsiteLogo, type WebsiteLogoProps, defaultPuckConfig };