react-bricks 3.0.0-beta.4 → 3.1.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bricks",
-  "version": "3.0.0-beta.4",
+  "version": "3.1.1-beta.0",
   "description": "React Bricks is a CMS with visual editing based on React components.",
   "keywords": [
     "react bricks",
@@ -16,7 +16,7 @@
   "license": "UNLICENSED",
   "author": "Matteo Frana @ F2 .net engineering s.r.l. <f2@f2.net>",
   "main": "index.js",
-  "module": "react-bricks.esm.production.min.js",
+  "module": "react-bricks.esm.js",
   "typings": "react-bricks.d.ts",
   "peerDependencies": {
     "react": ">=17",

package/react-bricks.d.ts

@@ -1,11 +1,9 @@
-import * as React from 'react';
-import React__default from 'react';
+import React, { FC, ReactElement, Context } from 'react';
 import { BaseEditor, Editor as Editor$1, Node, Descendant } from 'slate';
-import { ReactEditor, RenderElementProps, RenderLeafProps } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-import * as react_query from 'react-query';
+import { ReactEditor, RenderElementProps, RenderLeafProps } from 'slate-react';
 import { UseQueryResult } from 'react-query';
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
 export { v4 as uuid } from 'uuid';
 
 declare module 'slate' {
@@ -25,9 +23,9 @@ interface TextProps {
         children: any;
     }) => JSX.Element;
     propName: string;
-    multiline: boolean;
+    multiline?: boolean;
 }
-declare const Text: React.FC<TextProps>;
+declare const Text: FC<TextProps>;
 
 declare namespace types {
     /**
@@ -98,7 +96,7 @@ declare namespace types {
     /**
      * A Brick is a type of content block
      */
-    type Brick<T = {}> = React__default.FC<T> & {
+    type Brick<T = {}> = React.FC<T> & {
         schema: IBlockType;
     };
     /**
@@ -154,6 +152,7 @@ declare namespace types {
         slug: string;
         meta: IMeta;
         customValues?: Props;
+        externalData?: Props;
         content: IContentBlock[];
         authorId?: string;
         author: Author;
@@ -235,8 +234,8 @@ declare namespace types {
         className?: string;
         activeClassName?: string;
         isAdmin?: boolean;
-        children: React__default.ReactNode;
-    }) => React__default.ReactElement;
+        children: React.ReactNode;
+    }) => React.ReactElement;
     /**
      * Props of a content block
      */
@@ -253,6 +252,7 @@ declare namespace types {
         hideFromAddMenu?: boolean;
         sideEditProps?: Array<ISideEditProp | ISideGroup>;
         repeaterItems?: IRepeaterItem[];
+        mapExternalDataToProps?: (externalData: Props, brickProps?: Props) => Props;
         playgroundLinkUrl?: string;
         playgroundLinkLabel?: string;
         category?: string;
@@ -300,7 +300,7 @@ declare namespace types {
         name: string;
         label: string;
         type: SideEditPropType;
-        component?: React__default.FC<ICustomKnobProps>;
+        component?: React.FC<ICustomKnobProps>;
         validate?: (value: any, props?: Props) => boolean | string;
         show?: (props: Props) => boolean;
         textareaOptions?: {
@@ -368,6 +368,7 @@ declare namespace types {
         defaultFeaturedImage?: string;
         getDefaultContent?: () => string[];
         customFields?: Array<ISideEditPropPage | ISideGroup>;
+        getExternalData?: (page: Page) => Promise<Props>;
     }
     /**
      * Structure returned by the cleanBlocks function
@@ -429,6 +430,7 @@ declare namespace types {
         isDarkColorMode?: boolean;
         toggleColorMode?: () => void;
         useCssInJs?: boolean;
+        appRootElement: string | HTMLElement;
         clickToEditSide?: ClickToEditSide;
         customFields?: Array<ISideEditPropPage | ISideGroup>;
         responsiveBreakpoints: ResponsiveBreakpoint[];
@@ -467,7 +469,7 @@ declare namespace types {
         renderLeaf?: (props: RenderLeafProps) => JSX.Element;
         toggle: (editor: Editor$1, plugins: RichTextPlugin[]) => void;
         button?: {
-            icon: React__default.ReactElement;
+            icon: React.ReactElement;
             isActive: (editor: Editor$1) => boolean;
         };
         enhanceEditor?: (editor: Editor$1) => Editor$1;
@@ -480,7 +482,7 @@ declare namespace types {
         label?: string;
         hotKey?: string;
         render: (props: RenderLeafProps) => JSX.Element;
-        icon: React__default.ReactElement;
+        icon: React.ReactElement;
     }
     /**
      * Constructor for a Mark plugin
@@ -497,7 +499,7 @@ declare namespace types {
         hotKey?: string;
         render: (props: RenderElementProps) => JSX.Element;
         renderItem?: (props: RenderElementProps) => JSX.Element;
-        icon: React__default.ReactElement;
+        icon: React.ReactElement;
     }
     /**
      * Constructor for a Block plugin
@@ -518,7 +520,7 @@ interface RichTextProps {
     plugins?: types.RichTextPlugin[];
     multiline?: boolean;
 }
-declare const RichText: React.FC<RichTextProps>;
+declare const RichText: FC<RichTextProps>;
 
 /**
  * Props for renderLink render function
@@ -533,6 +535,7 @@ interface CompatibleRichTextProps {
     renderBlock: (props: RenderElementProps) => JSX.Element;
     placeholder: string;
     propName: string;
+    multiline?: boolean;
     allowedFeatures?: types.RichTextFeatures[];
     renderBold?: (props: RenderLeafProps) => JSX.Element;
     renderItalic?: (props: RenderLeafProps) => JSX.Element;
@@ -550,7 +553,7 @@ interface CompatibleRichTextProps {
     renderH6?: (props: RenderElementProps) => JSX.Element;
     renderQuote?: (props: RenderElementProps) => JSX.Element;
 }
-declare const CompatibleRichText: React__default.FC<CompatibleRichTextProps>;
+declare const CompatibleRichText: React.FC<CompatibleRichTextProps>;
 
 /**
  * Props for Image
@@ -566,7 +569,7 @@ interface ImageProps {
     imageClassName?: string;
     imageStyle?: object;
 }
-declare const Image: React.FC<ImageProps>;
+declare const Image: FC<ImageProps>;
 
 /**
  * Props for Repeater
@@ -574,29 +577,16 @@ declare const Image: React.FC<ImageProps>;
 interface RepeaterProps {
     propName: string;
     itemProps?: types.Props;
-    renderWrapper?: (items: React.ReactElement) => React.ReactElement;
-    renderItemWrapper?: (item: React.ReactElement, index: number, itemsCount: number) => React.ReactElement;
+    renderWrapper?: (items: ReactElement) => ReactElement;
+    renderItemWrapper?: (item: ReactElement, index: number, itemsCount: number) => ReactElement;
 }
-declare const Repeater: React.FC<RepeaterProps>;
-
-declare const Link: React.FC<LinkProps>;
-
-declare const ReactBricks: React.FC<types.ReactBricksConfig>;
-
-declare const ReactBricksContext: React.Context<types.IReactBricksContext>;
-
-var css_248z = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:\"\";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}";
-styleInject(css_248z);
+declare const Repeater: FC<RepeaterProps>;
 
-declare const Admin: React.FC<AdminProps>;
+declare const Link: FC<LinkProps>;
 
-declare const AdminContext: React.Context<types.IAdminContext>;
+declare const ReactBricks: FC<types.ReactBricksConfig>;
 
-declare const Header: React.FC<HeaderProps>;
-
-declare const Login: React.FC;
-
-declare const Editor: React.FC;
+declare const ReactBricksContext: Context<types.IReactBricksContext>;
 
 /**
  * Props for PageViewer
@@ -604,48 +594,17 @@ declare const Editor: React.FC;
 interface PageViewerProps {
     page: types.Page | null | undefined;
 }
-declare const PageViewer: React.FC<PageViewerProps>;
+declare const PageViewer: FC<PageViewerProps>;
 
-declare const Playground: () => JSX.Element;
+declare const Editor: FC;
 
-declare const AppSettings: React.FC;
+declare const Playground: () => JSX.Element;
 
-declare const useAuth: () => {
-    loginUser: (email: string, password: string) => Promise<({
-        id: string;
-        email: string;
-        firstName: string;
-        lastName: string;
-        company: string;
-        avatarUrl?: string | undefined;
-        isAdmin: boolean;
-        token: string;
-        appName: string;
-        deployHookUrl?: string | undefined;
-        deployHookMethod?: string | undefined;
-        deployHookTriggerOnScheduledPublishing: boolean;
-        deployHookStagingUrl?: string | undefined;
-        deployHookStagingMethod?: string | undefined;
-        deployHookStagingTriggerOnScheduledPublishing: boolean;
-        eventsHookUrl?: string | undefined;
-        eventsHookAuthToken?: string | undefined;
-        canCreatePage: boolean;
-        canDeletePage: boolean;
-        canDeploy: boolean;
-        canDeployStaging: boolean;
-        role: string;
-        plan: string;
-        languages: types.Language[];
-        defaultLanguage: string;
-    } & {
-        authToken: string;
-    }) | null>;
-    logoutUser: () => void;
-};
+declare const AppSettings: FC;
 
-declare const usePage$1: (pageId: string, language?: string | undefined) => react_query.UseQueryResult<types.Page, unknown>;
+declare const usePage: (pageId: string, language?: string | undefined) => UseQueryResult<types.Page, unknown>;
 
-declare const usePage: (slug: string, language?: string | undefined) => react_query.UseQueryResult<types.Page, unknown>;
+declare const usePage$1: (slug: string, language?: string | undefined) => UseQueryResult<types.Page, unknown>;
 
 /**
  * Values returned from usePages
@@ -707,9 +666,7 @@ declare const usePageValues: () => [types.PageValues, (pageData: types.PartialPa
 
 declare const useReactBricksContext: () => types.IReactBricksContext;
 
-declare const useAdminContext: () => types.IReadAdminContext;
-
-declare const fetchPage: (slug: string, apiKey: string, language?: string | undefined) => Promise<types.Page>;
+declare const fetchPage: (slug: string, apiKey: string, language?: string | undefined, pageTypes?: types.IPageType[] | undefined) => Promise<types.Page>;
 
 /**
  * Values returned from fetchPages
@@ -742,7 +699,7 @@ declare const cleanPage: (page: types.Page, pageTypes: types.IPageType[], bricks
 
 declare const getPagePlainText: (blocks: types.IContentBlock[]) => string[];
 
-declare const _default$1: {
+declare const _default: {
     bold: types.RichTextPlugin;
     italic: types.RichTextPlugin;
     code: types.RichTextPlugin;
@@ -759,9 +716,56 @@ declare const _default$1: {
     unorderedList: types.RichTextPlugin;
 };
 
-declare const _default: {
+declare const _default$1: {
     serialize: (nodes: Node[]) => string;
     deserialize: (input: string) => Descendant[];
+    isText: (value: any) => boolean;
+};
+
+var css_248z = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:\"\";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}";
+styleInject(css_248z);
+
+declare const Admin: FC<AdminProps>;
+
+declare const AdminContext: Context<types.IAdminContext>;
+
+declare const Header: FC<HeaderProps>;
+
+declare const Login: FC;
+
+declare const useAuth: () => {
+    loginUser: (email: string, password: string) => Promise<({
+        id: string;
+        email: string;
+        firstName: string;
+        lastName: string;
+        company: string;
+        avatarUrl?: string | undefined;
+        isAdmin: boolean;
+        token: string;
+        appName: string;
+        deployHookUrl?: string | undefined;
+        deployHookMethod?: string | undefined;
+        deployHookTriggerOnScheduledPublishing: boolean;
+        deployHookStagingUrl?: string | undefined;
+        deployHookStagingMethod?: string | undefined;
+        deployHookStagingTriggerOnScheduledPublishing: boolean;
+        eventsHookUrl?: string | undefined;
+        eventsHookAuthToken?: string | undefined;
+        canCreatePage: boolean;
+        canDeletePage: boolean;
+        canDeploy: boolean;
+        canDeployStaging: boolean;
+        role: string;
+        plan: string;
+        languages: types.Language[];
+        defaultLanguage: string;
+    } & {
+        authToken: string;
+    }) | null>;
+    logoutUser: () => void;
 };
 
-export { Admin, AdminContext, AppSettings, Editor, Header, Image, Link, Login, PageViewer, _default as Plain, Playground, ReactBricks, ReactBricksContext, Repeater, CompatibleRichText as RichText, RichText as RichTextExt, Text, cleanPage, fetchPage, fetchPages, getPagePlainText, _default$1 as plugins, types, useAdminContext, useAuth, usePage$1 as usePage, usePage as usePagePublic, usePageValues, usePages, usePagesPublic, useReactBricksContext, useVisualEdit };
+declare const useAdminContext: () => types.IReadAdminContext;
+
+export { Admin, AdminContext, AppSettings, Editor, Header, Image, Link, Login, PageViewer, _default$1 as Plain, Playground, ReactBricks, ReactBricksContext, Repeater, CompatibleRichText as RichText, RichText as RichTextExt, Text, cleanPage, fetchPage, fetchPages, getPagePlainText, _default as plugins, types, useAdminContext, useAuth, usePage, usePage$1 as usePagePublic, usePageValues, usePages, usePagesPublic, useReactBricksContext, useVisualEdit };