react-bricks 4.1.3 → 4.2.0-beta.1

package/rsc/client/react-bricks-rsc-client.d.ts

@@ -0,0 +1,849 @@
+import * as React from 'react';
+import React__default from 'react';
+import { Descendant, Editor } from 'slate';
+import { RenderElementProps, RenderLeafProps } from 'slate-react';
+
+declare namespace types {
+    export const EmbedProp = "RB_PAGE_EMBED";
+    export const EmbedContent = "RB_PAGE_EMBED_CONTENT";
+    /**
+     * Type of Sidebar control
+     */
+    export enum SideEditPropType {
+        Text = "TEXT",
+        Textarea = "TEXTAREA",
+        Number = "NUMBER",
+        Date = "DATE",
+        Range = "RANGE",
+        Boolean = "BOOLEAN",
+        Select = "SELECT",
+        Image = "IMAGE",
+        Custom = "CUSTOM",
+        Relationship = "RELATIONSHIP"
+    }
+    /**
+     * How to display the options
+     */
+    export enum OptionsDisplay {
+        Select = "SELECT",
+        Radio = "RADIO",
+        Color = "COLOR"
+    }
+    /**
+     * Features for RichText: see also the new RichTextExt
+     */
+    export enum RichTextFeatures {
+        Bold = "BOLD",
+        Italic = "ITALIC",
+        Code = "CODE",
+        Highlight = "HIGHLIGHT",
+        Link = "LINK",
+        UnorderedList = "UL",
+        OrderedList = "OL",
+        Heading1 = "H1",
+        Heading2 = "H2",
+        Heading3 = "H3",
+        Heading4 = "H4",
+        Heading5 = "H5",
+        Heading6 = "H6",
+        Quote = "QUOTE"
+    }
+    /**
+     * Page status
+     */
+    export enum PageStatus {
+        Draft = "DRAFT",
+        Published = "PUBLISHED"
+    }
+    /**
+     * Approval status
+     */
+    export enum EditStatus {
+        Merged = "MERGED",
+        Working = "WORKING",
+        MergeRequested = "MERGE_REQUESTED"
+    }
+    /**
+     * Device type for responsive preview (for the icon)
+     */
+    export enum DeviceType {
+        Desktop = "DESKTOP",
+        Tablet = "TABLET",
+        Phone = "PHONE"
+    }
+    /**
+     * Corner for the click-to-edit button
+     */
+    export enum ClickToEditSide {
+        BottomRight = "BOTTOM-RIGHT",
+        BottomLeft = "BOTTOM-LEFT",
+        TopRight = "TOP-RIGHT",
+        TopLeft = "TOP-LEFT",
+        None = "NONE"
+    }
+    export enum BlockIconsPosition {
+        InsideBlock = "INSIDE-BLOCK",
+        OutsideBlock = "OUTSIDE-BLOCK"
+    }
+    /**
+     * A Brick is a type of content block
+     */
+    export type Brick<T = {}> = React__default.FC<T> & {
+        schema: IBlockType<T>;
+    };
+    /**
+     * Bricks are types of content block
+     */
+    export type Bricks = {
+        [key: string]: Brick<any>;
+    };
+    /**
+     * A Category contains bricks
+     */
+    export type Category = {
+        categoryName: string;
+        bricks: Brick<any>[];
+    };
+    /**
+     * A Theme contains categories and bricks
+     */
+    export type Theme = {
+        themeName: string;
+        categories: Category[];
+    };
+    /**
+     * Custom role type
+     */
+    export type CustomRole = {
+        id: string;
+        name: string;
+    };
+    /**
+     * The type of the user passed to permission functions
+     */
+    export type PermissionUser = {
+        firstName: string;
+        lastName: string;
+        email: string;
+        isAdmin: boolean;
+        role: string;
+        customRole?: CustomRole;
+    };
+    /**
+     * The type of the page passed to permission functions
+     */
+    export type PermissionPage = {
+        slug: string;
+        pageType: string;
+        language: string;
+    };
+    /**
+     * The type of the brick passed to permission functions
+     */
+    export type PermissionBrick = {
+        name: string;
+        category: string;
+        theme: string;
+        tags: string[];
+    };
+    /**
+     * The permission functions
+     */
+    export type Permissions = {
+        canAddPage?: (user: PermissionUser, pageType: string) => boolean;
+        canAddTranslation?: (user: PermissionUser, pageType: string, language: string) => boolean;
+        canSeePageType?: (user: PermissionUser, pageType: string) => boolean;
+        canSeePage?: (user: PermissionUser, page: Omit<PermissionPage, 'language'>) => boolean;
+        canEditPage?: (user: PermissionUser, page: PermissionPage) => boolean;
+        canDeletePage?: (user: PermissionUser, page: Omit<PermissionPage, 'language'>) => boolean;
+        canDeleteTranslation?: (user: PermissionUser, page: PermissionPage) => boolean;
+        canUseBrick?: (user: PermissionUser, brick: PermissionBrick) => boolean;
+    };
+    /**
+     * The logged-in User
+     */
+    export type User = {
+        id: string;
+        email: string;
+        firstName: string;
+        lastName: string;
+        company: string;
+        avatarUrl?: string;
+        isAdmin: boolean;
+        token: string;
+        appName: string;
+        appId: string;
+        appEnv: string;
+        deployHookUrl?: string;
+        deployHookMethod?: string;
+        deployHookTriggerOnScheduledPublishing: boolean;
+        deployHookStagingUrl?: string;
+        deployHookStagingMethod?: string;
+        deployHookStagingTriggerOnScheduledPublishing: boolean;
+        deployHookDevUrl?: string;
+        deployHookDevMethod?: string;
+        deployHookDevTriggerOnScheduledPublishing: boolean;
+        eventsHookUrl?: string;
+        eventsHookAuthToken?: string;
+        canCreatePage: boolean;
+        canDeletePage: boolean;
+        canDeploy: boolean;
+        canDeployStaging: boolean;
+        canDeployDev: boolean;
+        canEditPageAttributes: boolean;
+        canEditSeo: boolean;
+        canApprove: boolean;
+        role: string;
+        customRole?: CustomRole;
+        plan: string;
+        isVerified: boolean;
+        languages: Language[];
+        defaultLanguage: string;
+        hostname: string;
+        useWorkingCopy: boolean;
+        useApprovalWorkflow: boolean;
+        subscription: {
+            maxStories: number;
+            collaboration: boolean;
+            deployHookStaging: boolean;
+            deployHookDev: boolean;
+            scheduledPublishing: boolean;
+            embedPages: boolean;
+            lockBlocks: boolean;
+            flexibleRoles: boolean;
+            advancedSeo: boolean;
+            eventsLog: boolean;
+            maxFileSize: number;
+            maxImageSize: number;
+            maxFilesBatch: number;
+            maxFilesConcurrency: number;
+            diskSpace: number;
+            advancedDam: boolean;
+            workingCopy: boolean;
+            approvalWorkflow: boolean;
+        };
+    } | null;
+    /**
+     * Translation for a Page
+     */
+    export type Translation = {
+        language: string;
+        slug: string;
+        name: string;
+        status: PageStatus;
+        editStatus: EditStatus;
+        isLocked: boolean;
+        scheduledForPublishingOn: string;
+    };
+    /**
+     * The page editing User
+     */
+    export type EditingUser = {
+        id: string;
+        email: string;
+        firstName: string;
+        lastName: string;
+        company: string;
+        avatarUrl?: string;
+    };
+    /**
+     * Date and User of last edit
+     */
+    export type LastEditedBy = {
+        date: string;
+        user: EditingUser;
+    };
+    /**
+     * A React Bricks Page
+     */
+    export type Page = {
+        id: string;
+        type: string;
+        name: string;
+        slug: string;
+        meta: IMeta;
+        customValues?: Props;
+        externalData?: Props;
+        content: IContentBlock[];
+        workingContent?: IContentBlock[];
+        committedContent?: IContentBlock[];
+        authorId?: string;
+        author: Author;
+        invalidBlocksTypes?: string[];
+        status: PageStatus;
+        editStatus: EditStatus;
+        isLocked: boolean;
+        tags: string[];
+        category?: string;
+        createdAt: string;
+        publishedAt?: string;
+        scheduledForPublishingOn?: string;
+        language: string;
+        translations: Translation[];
+        lastEditedBy: LastEditedBy;
+    };
+    /**
+     * Page fields (without content)
+     */
+    export type PageValues = Omit<Page, 'content'>;
+    /**
+     * A Page with all optional fields, used for the patch
+     */
+    export type PartialPage = Partial<Page>;
+    /**
+     * Page from a list (no content)
+     */
+    export type PageFromList = Omit<Page, 'content'>;
+    /**
+     * Page from a list with pagination
+     */
+    export type PagesFromListWithPagination = {
+        items: PageFromList[];
+        pagination: {
+            page: number;
+            pageSize: number;
+            totalItems: number;
+            totalPages: number;
+        };
+    };
+    /**
+     * The Author of a Page
+     */
+    export type Author = {
+        id: string;
+        email: string;
+        firstName: string;
+        lastName: string;
+        avatarUrl?: string;
+        company?: string;
+    };
+    export type BrickStory<T = Props> = {
+        id: string;
+        name: string;
+        showAsBrick?: boolean;
+        previewImageUrl?: string;
+        props: T;
+    };
+    export type RepeaterItems = IContentBlock[] | Omit<IContentBlock, 'id'>[] | Props[];
+    /**
+     * A Language for i18n
+     */
+    export type Language = {
+        code: string;
+        name: string;
+    };
+    /**
+     * Render function for local links (should use the app's Router)
+     */
+    interface LocalLinkProps {
+        href: string;
+        target?: string;
+        className?: string;
+        activeClassName?: string;
+        isAdmin?: boolean;
+    }
+    type LocalLinkPropsReal = React__default.PropsWithChildren<Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LocalLinkProps> & LocalLinkProps>;
+    export type RenderLocalLink = ({ href, target, className, activeClassName, isAdmin, children, }: LocalLinkPropsReal) => React__default.ReactElement;
+    /**-
+     * The type of Text and RichText value
+     */
+    export type TextValue = Descendant[] | string;
+    /**
+     * Props of a content block
+     */
+    export type Props = {
+        [key: string]: any;
+    };
+    /**
+     * Interface for the Schema of a Brick
+     */
+    export interface IBlockType<T = Props> {
+        name: string;
+        label: string;
+        getDefaultProps?: () => Partial<T>;
+        hideFromAddMenu?: boolean;
+        sideEditProps?: Array<ISideEditProp<T> | ISideGroup<T>>;
+        repeaterItems?: IRepeaterItem[];
+        newItemMenuOpen?: boolean;
+        groupByRepeater?: boolean;
+        mapExternalDataToProps?: (externalData: Props, brickProps?: T) => Partial<T>;
+        playgroundLinkUrl?: string;
+        playgroundLinkLabel?: string;
+        theme?: string;
+        category?: string;
+        tags?: string[];
+        previewImageUrl?: string;
+        previewIcon?: React__default.ReactElement;
+        stories?: BrickStory<Partial<T>>[];
+    }
+    /**
+     * Item of a Repeater
+     */
+    export interface IRepeaterItem {
+        name: string;
+        itemType?: string;
+        itemLabel?: string;
+        min?: number;
+        max?: number;
+        positionLabel?: string;
+        getDefaultProps?: () => Props;
+        items?: {
+            type: string;
+            label?: string;
+            min?: number;
+            max?: number;
+            getDefaultProps?: () => Props;
+        }[];
+    }
+    /**
+     * The content of a block (instance of a Brick)
+     */
+    export interface IContentBlock {
+        id: string;
+        type: string;
+        props: Props;
+        locked?: boolean;
+        canAddAfter?: boolean;
+        canAddBefore?: boolean;
+        canEditContent?: boolean;
+    }
+    /**
+     * Option of a select sidebar prop
+     */
+    export interface IOption {
+        value: any;
+        label: string;
+    }
+    /**
+     * Interface for Props of a Custom sidebar component
+     */
+    export interface ICustomKnobProps {
+        id: string;
+        value: any;
+        onChange: any;
+        isValid: boolean;
+        errorMessage?: string;
+    }
+    /**
+     * Sidebar edit Props for a Page
+     */
+    export interface ISideEditPropPage<T = Props> {
+        name: string;
+        label: string;
+        type: SideEditPropType;
+        component?: React__default.FC<ICustomKnobProps>;
+        validate?: (value: any, props?: T) => boolean | string;
+        show?: (props: T, page?: Page, user?: User) => boolean;
+        helperText?: string;
+        textareaOptions?: {
+            height?: number;
+        };
+        imageOptions?: {
+            maxWidth?: number;
+            aspectRatio?: number;
+        };
+        rangeOptions?: {
+            min?: number;
+            max?: number;
+            step?: number;
+        };
+        selectOptions?: {
+            options?: IOption[];
+            getOptions?: (props: Props) => IOption[] | Promise<IOption[]>;
+            display: OptionsDisplay;
+        };
+        relationshipOptions?: {
+            label?: string;
+            references: string;
+            multiple: boolean;
+            embedValues?: boolean;
+        };
+    }
+    /**
+     * Sidebar Edit Props
+     */
+    export interface ISideEditProp<T = Props> extends ISideEditPropPage<T> {
+        shouldRefreshText?: boolean;
+        shouldRefreshStyles?: boolean;
+    }
+    /**
+     * A collapsible Group of sidebar Props
+     */
+    export interface ISideGroup<T = Props> {
+        groupName: string;
+        defaultOpen?: boolean;
+        show?: (props: T, page?: Page, user?: User) => boolean;
+        props: ISideEditProp<T>[] | ISideEditPropPage<T>[];
+    }
+    /**
+     * Image Crop interface
+     */
+    export interface ICrop {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }
+    /**
+     * Image Transform interface
+     */
+    export interface ITransform {
+        rotate?: number;
+        flip?: {
+            horizontal: boolean;
+            vertical: boolean;
+        };
+    }
+    /**
+     * Image value interface
+     */
+    export interface IImageSource {
+        src: string;
+        srcSet?: string;
+        type?: string;
+        fallbackSrc?: string;
+        fallbackSrcSet?: string;
+        fallbackType?: string;
+        placeholderSrc?: string;
+        alt?: string;
+        seoName?: string;
+        width?: number;
+        height?: number;
+        highPriority?: boolean;
+        hashId?: string;
+        crop?: ICrop;
+        transform?: ITransform;
+    }
+    /**
+     * File value interface
+     */
+    export interface IFileSource {
+        name: string;
+        url: string;
+        size: number;
+        extension: string;
+        pagesNum: number;
+        title?: string | undefined;
+        alt?: string | undefined;
+        copyright?: string | undefined;
+        source?: string | undefined;
+    }
+    /**
+     * A Color for a Select sidebar prop
+     */
+    export interface IColor {
+        color: string;
+        [propName: string]: any;
+    }
+    export interface IBrickStory {
+        brickName: string;
+        storyName: string;
+        locked?: boolean;
+        canAddAfter?: boolean;
+        canAddBefore?: boolean;
+    }
+    /**
+     * Page type
+     */
+    export interface IPageType {
+        name: string;
+        pluralName: string;
+        isEntity?: boolean;
+        allowedBlockTypes?: string[];
+        excludedBlockTypes?: string[];
+        defaultLocked?: boolean;
+        defaultStatus?: PageStatus;
+        defaultLanguage?: string;
+        defaultFeaturedImage?: string;
+        getDefaultContent?: () => (string | IBrickStory | IContentBlock)[];
+        customFields?: Array<ISideEditPropPage | ISideGroup>;
+        getExternalData?: (page: Page, args?: any) => Promise<Props>;
+        metaImageAspectRatio?: number;
+        categories?: ICategory[];
+        slugPrefix?: ISlugPrefix;
+    }
+    /**
+     * Structure returned by the cleanBlocks function
+     */
+    export interface ICleanBlocks {
+        blocks: IContentBlock[];
+        invalidBlocksTypes: string[];
+    }
+    /**
+     * Responsive breakpoint for preview
+     */
+    export interface ResponsiveBreakpoint {
+        type: DeviceType;
+        width: number | string;
+        label: string;
+    }
+    /**
+     * Login UI customization
+     */
+    export interface LoginUI {
+        sideImage?: string;
+        logo?: string;
+        logoWidth?: number;
+        logoHeight?: number;
+        welcomeText?: string;
+        welcomeTextStyle?: React__default.CSSProperties;
+    }
+    /**
+     * MenuItem interface
+     */
+    export interface IMenuItem {
+        label: string;
+        path?: string;
+    }
+    /**
+     * The ReactBricks configuration
+     */
+    export interface ReactBricksConfig {
+        appId: string;
+        apiKey: string;
+        environment?: string;
+        bricks?: types.Brick<any>[] | types.Theme[];
+        pageTypes?: types.IPageType[];
+        logo?: string;
+        loginUI?: LoginUI;
+        contentClassName?: string;
+        defaultTheme?: string;
+        renderLocalLink: types.RenderLocalLink;
+        navigate: (path: string) => void;
+        loginPath?: string;
+        editorPath?: string;
+        mediaLibraryPath?: string;
+        playgroundPath?: string;
+        appSettingsPath?: string;
+        previewPath?: string;
+        getAdminMenu?: (args: {
+            isAdmin: boolean;
+        }) => IMenuItem[];
+        isDarkColorMode?: boolean;
+        toggleColorMode?: () => void;
+        useCssInJs?: boolean;
+        appRootElement: string | HTMLElement;
+        clickToEditSide?: ClickToEditSide;
+        customFields?: Array<ISideEditPropPage | ISideGroup>;
+        responsiveBreakpoints?: ResponsiveBreakpoint[];
+        enableAutoSave?: boolean;
+        disableSaveIfInvalidProps?: boolean;
+        enablePreview?: boolean;
+        blockIconsPosition?: BlockIconsPosition;
+        enablePreviewImage?: boolean;
+        enablePreviewIcon?: boolean;
+        enableUnsplash?: boolean;
+        unsplashApiKey?: string;
+        enableDefaultEmbedBrick?: boolean;
+        permissions?: Permissions;
+        allowAccentsInSlugs?: boolean;
+    }
+    /**
+     * The ReactBricks context
+     */
+    export interface IReactBricksContext {
+        version: string;
+        appId: string;
+        apiKey: string;
+        environment?: string;
+        bricks: Bricks;
+        themes: types.Theme[];
+        pageTypes: IPageType[];
+        logo: string;
+        loginUI: LoginUI;
+        contentClassName: string;
+        defaultTheme: string;
+        renderLocalLink: RenderLocalLink;
+        navigate: (path: string) => void;
+        loginPath: string;
+        editorPath: string;
+        mediaLibraryPath: string;
+        playgroundPath: string;
+        appSettingsPath: string;
+        previewPath: string;
+        getAdminMenu?: (args: {
+            isAdmin: boolean;
+        }) => IMenuItem[];
+        isDarkColorMode?: boolean;
+        toggleColorMode?: () => void;
+        useCssInJs?: boolean;
+        appRootElement: string | HTMLElement;
+        clickToEditSide?: ClickToEditSide;
+        customFields?: Array<ISideEditPropPage | ISideGroup>;
+        responsiveBreakpoints: ResponsiveBreakpoint[];
+        enableAutoSave: boolean;
+        disableSaveIfInvalidProps: boolean;
+        enablePreview: boolean;
+        browserSupport: {
+            webP: boolean;
+            lazyLoading: boolean;
+        };
+        blockIconsPosition: BlockIconsPosition;
+        enablePreviewImage: boolean;
+        enablePreviewIcon: boolean;
+        enableUnsplash: boolean;
+        unsplashApiKey?: string;
+        enableDefaultEmbedBrick: boolean;
+        permissions?: Permissions;
+        allowAccentsInSlugs: boolean;
+    }
+    /**
+     * The current page in Admin
+     */
+    export interface ICurrentPage {
+        pageId: string;
+        language?: string;
+    }
+    /**
+     * The Admin context returned from useAdminContext
+     */
+    export interface IReadAdminContext {
+        isAdmin: boolean;
+        previewMode: boolean;
+        currentPage: ICurrentPage;
+    }
+    /**
+     * Opengraph type
+     */
+    export type OpenGraphType = 'article' | 'website' | 'profile' | 'book' | 'video' | 'music';
+    /**
+     * OpenGraph data
+     */
+    export type OpenGraphData = {
+        url?: string;
+        type?: OpenGraphType;
+        title?: string;
+        description?: string;
+        image?: types.IImageSource;
+    };
+    /**
+     * Twitter card type
+     */
+    export type TwitterCardType = 'summary' | 'summary_large_image' | 'app' | 'player';
+    /**
+     * Data for Twitter card
+     */
+    export type TwitterCardData = {
+        card?: TwitterCardType;
+        site?: string;
+        creator?: string;
+        title?: string;
+        description?: string;
+        image?: types.IImageSource;
+    };
+    /**
+     * Meta Fields type
+     * */
+    export type MetaData = {
+        title?: string;
+        description?: string;
+        keywords?: string;
+        featuredImage?: string;
+        image?: IImageSource;
+    };
+    /**
+     * Meta fields on Page
+     */
+    export interface IMeta extends MetaData {
+        language?: string;
+        openGraph?: OpenGraphData;
+        twitterCard?: TwitterCardData;
+        schemaOrg?: SchemaOrgData;
+    }
+    /**
+     * Category on categories (pageTypes)
+     */
+    export interface ICategory {
+        category?: string;
+    }
+    /**
+     * A RichTextExt Plugin
+     */
+    export interface RichTextPlugin {
+        type: 'Mark' | 'Block' | 'List';
+        name: string;
+        isInline?: boolean;
+        itemName?: string;
+        label: string;
+        hotKey?: string;
+        renderElement?: (props: RenderElementProps) => JSX.Element;
+        renderItemElement?: (props: RenderElementProps) => JSX.Element;
+        renderLeaf?: (props: RenderLeafProps) => JSX.Element;
+        toggle: (editor: Editor, plugins: RichTextPlugin[]) => void;
+        button?: {
+            icon: React__default.ReactElement;
+            isActive: (editor: Editor) => boolean;
+        };
+        enhanceEditor?: (editor: Editor) => Editor;
+    }
+    /**
+     * Definition for a Mark plugin
+     */
+    export interface MarkPlugin {
+        name: string;
+        label?: string;
+        hotKey?: string;
+        render: (props: RenderLeafProps) => JSX.Element;
+        icon?: React__default.ReactElement;
+    }
+    /**
+     * Constructor for a Mark plugin
+     */
+    export type MarkPluginConstructor = (markPlugin: MarkPlugin) => RichTextPlugin;
+    /**
+     * Definition for a Block plugin
+     */
+    export interface BlockPlugin {
+        name: string;
+        isInline?: boolean;
+        itemName?: string;
+        label?: string;
+        hotKey?: string;
+        render: (props: RenderElementProps) => JSX.Element;
+        renderItem?: (props: RenderElementProps) => JSX.Element;
+        icon?: React__default.ReactElement;
+    }
+    /**
+     * Constructor for a Block plugin
+     */
+    export type BlockPluginConstructor = (blockPlugin: BlockPlugin) => RichTextPlugin;
+    export {};
+}
+
+interface IReactBricksClientProvider {
+    bricks?: any;
+    setBricks?: any;
+}
+declare const ReactBricksClientContext: React__default.Context<IReactBricksClientProvider>;
+declare function ReactBricksClientProvider({ children, bricks: bricksArray, pageTypes, enableDefaultEmbedBrick, }: {
+    children: any;
+    bricks?: types.Brick<any>[] | types.Theme[] | undefined;
+    pageTypes?: types.IPageType[] | undefined;
+    enableDefaultEmbedBrick?: boolean;
+}): React__default.JSX.Element;
+
+/**
+ * Props for ClickToEdit
+ */
+interface ClickToEditProps {
+    pageId: string;
+    language?: string;
+    editorPath: string;
+    clickToEditSide?: types.ClickToEditSide;
+}
+declare const ClickToEdit: React__default.FC<ClickToEditProps>;
+
+/**
+ * Props for Text component
+ */
+declare type RegisterComponentProps = {
+    page: types.Page;
+    block: types.IContentBlock;
+};
+declare const RegisterComponent: React.FC<RegisterComponentProps>;
+
+declare const usePageValues: () => [types.PageValues, (pageData: types.PartialPage) => void];
+
+declare const useVisualEdit: (propName: string) => [any, (value: any) => void, boolean];
+
+export { ClickToEdit, ReactBricksClientContext, ReactBricksClientProvider, RegisterComponent, types, usePageValues, useVisualEdit };