@webiny/website-builder-react 6.0.0-alpha.0

package/editorComponents/GridColumn.manifest.js

@@ -0,0 +1,25 @@
+"use client";
+
+import { StyleSettings } from "@webiny/app-website-builder/sdk";
+import { createComponent } from "../createComponent";
+import { GridColumnComponent } from "./GridColumn";
+export const GridColumn = createComponent(GridColumnComponent, {
+  name: "Webiny/GridColumn",
+  label: "Column",
+  image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z"/></svg>`,
+  canDrag: false,
+  canDelete: false,
+  acceptsChildren: true,
+  hideFromToolbar: true,
+  hideStyleSettings: [StyleSettings.Visibility],
+  defaults: {
+    styles: {
+      paddingTop: "10px",
+      paddingRight: "10px",
+      paddingBottom: "10px",
+      paddingLeft: "10px"
+    }
+  }
+});
+
+//# sourceMappingURL=GridColumn.manifest.js.map

package/editorComponents/GridColumn.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSettings","createComponent","GridColumnComponent","GridColumn","name","label","image","canDrag","canDelete","acceptsChildren","hideFromToolbar","hideStyleSettings","Visibility","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["GridColumn.manifest.ts"],"sourcesContent":["\"use client\";\nimport { StyleSettings } from \"@webiny/app-website-builder/sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { GridColumnComponent } from \"./GridColumn\";\n\nexport const GridColumn = createComponent(GridColumnComponent, {\n    name: \"Webiny/GridColumn\",\n    label: \"Column\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z\"/></svg>`,\n    canDrag: false,\n    canDelete: false,\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    hideStyleSettings: [StyleSettings.Visibility],\n    defaults: {\n        styles: {\n            paddingTop: \"10px\",\n            paddingRight: \"10px\",\n            paddingBottom: \"10px\",\n            paddingLeft: \"10px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAACC,mBAAmB,EAAE;EAC3DE,IAAI,EAAE,mBAAmB;EACzBC,KAAK,EAAE,QAAQ;EACfC,KAAK,EAAE,4bAA4b;EACncC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE,IAAI;EACrBC,iBAAiB,EAAE,CAACX,aAAa,CAACY,UAAU,CAAC;EAC7CC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,MAAM;MAClBC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Image.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentPropsWithChildren } from "../types";
+type ImageProps = ComponentPropsWithChildren<{
+    title: string;
+    altText: string;
+    image: {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        src: string;
+    };
+}>;
+export declare const ImageComponent: (props: ImageProps) => React.JSX.Element;
+export {};

package/editorComponents/Image.js

@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { contentSdk } from "@webiny/app-website-builder/sdk";
+const SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+export const ImageComponent = props => {
+  const image = useImage(props);
+  if (!image.src) {
+    return /*#__PURE__*/React.createElement(ImagePlaceholder, {
+      style: props.styles
+    });
+  }
+  if (image.tag === "object") {
+    return /*#__PURE__*/React.createElement("object", {
+      style: image.styles,
+      title: image.title,
+      data: image.src
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !image.isLoaded && /*#__PURE__*/React.createElement(ImagePlaceholder, {
+    style: image.styles
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: image.altText,
+    onLoad: image.onLoad,
+    title: image.title,
+    src: image.src,
+    srcSet: image.srcSet,
+    style: image.styles
+  }));
+};
+const ImagePlaceholder = ({
+  style
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      height: "200px",
+      backgroundColor: "#f4f4f4",
+      justifyContent: "center",
+      alignItems: "center",
+      fill: "#ffffff",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    style: {
+      width: "70px",
+      height: "70px",
+      filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"
+  })));
+};
+const getSrcSet = (src, srcSetWidths) => {
+  return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(", ");
+};
+const useImage = ({
+  inputs,
+  styles
+}) => {
+  const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);
+  const {
+    title = "",
+    altText,
+    image
+  } = inputs;
+  const src = image?.src;
+  const tag = src && src.endsWith(".svg") ? "object" : "img";
+  useEffect(() => {
+    if (!src) {
+      setIsLoaded(false);
+    }
+  }, [src]);
+
+  // If a fixed image width in pixels was set, let's filter out unneeded
+  // image resize widths. For example, if 155px was set as the fixed image
+  // width, then we want the `srcset` attribute to only contain 100w and 300w.
+  let srcSetWidths = [];
+  const width = styles.width?.toString();
+  if (width && width.endsWith("px")) {
+    const imageWidthInt = parseInt(width);
+    for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {
+      const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+      if (imageWidthInt > supportedResizeWidth) {
+        srcSetWidths.push(supportedResizeWidth);
+      } else {
+        srcSetWidths.push(supportedResizeWidth);
+        break;
+      }
+    }
+  } else {
+    // If a fixed image width was not provided, we
+    // rely on all the supported image resize widths.
+    srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;
+  }
+  const srcSet = src ? getSrcSet(src, srcSetWidths) : "";
+  const imageStyles = {
+    maxWidth: "100%",
+    opacity: isLoaded ? 1 : 0,
+    transition: "opacity 0.3s ease",
+    ...styles
+  };
+  const onLoad = useCallback(() => {
+    if (contentSdk.isEditing()) {
+      setTimeout(() => {
+        setIsLoaded(true);
+      }, 100);
+    } else {
+      setIsLoaded(true);
+    }
+  }, []);
+  return {
+    altText,
+    isLoaded,
+    onLoad,
+    src: inputs.image?.src,
+    srcSet,
+    styles: imageStyles,
+    tag,
+    title
+  };
+};
+
+//# sourceMappingURL=Image.js.map

package/editorComponents/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","contentSdk","SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","Fragment","isLoaded","alt","altText","onLoad","srcSet","display","height","backgroundColor","justifyContent","alignItems","fill","width","filter","xmlns","viewBox","d","getSrcSet","srcSetWidths","map","item","join","inputs","setIsLoaded","isEditing","endsWith","toString","imageWidthInt","parseInt","i","length","supportedResizeWidth","push","imageStyles","maxWidth","opacity","transition","setTimeout"],"sources":["Image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { contentSdk, CssProperties } from \"@webiny/app-website-builder/sdk\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentPropsWithChildren<{\n    title: string;\n    altText: string;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n    };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n    const image = useImage(props);\n\n    if (!image.src) {\n        return <ImagePlaceholder style={props.styles} />;\n    }\n\n    if (image.tag === \"object\") {\n        return <object style={image.styles} title={image.title} data={image.src} />;\n    }\n\n    return (\n        <>\n            {!image.isLoaded && <ImagePlaceholder style={image.styles} />}\n            <img\n                alt={image.altText}\n                onLoad={image.onLoad}\n                title={image.title}\n                src={image.src}\n                srcSet={image.srcSet}\n                style={image.styles}\n            />\n        </>\n    );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"200px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\",\n                ...style\n            }}\n        >\n            <svg\n                style={{\n                    width: \"70px\",\n                    height: \"70px\",\n                    filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n                }}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"24px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"24px\"\n            >\n                <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n            </svg>\n        </div>\n    );\n};\n\nconst getSrcSet = (src: string, srcSetWidths: number[]) => {\n    return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(\", \");\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n    const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    useEffect(() => {\n        if (!src) {\n            setIsLoaded(false);\n        }\n    }, [src]);\n\n    // If a fixed image width in pixels was set, let's filter out unneeded\n    // image resize widths. For example, if 155px was set as the fixed image\n    // width, then we want the `srcset` attribute to only contain 100w and 300w.\n    let srcSetWidths: number[] = [];\n\n    const width = styles.width?.toString();\n\n    if (width && width.endsWith(\"px\")) {\n        const imageWidthInt = parseInt(width);\n        for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {\n            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            if (imageWidthInt > supportedResizeWidth) {\n                srcSetWidths.push(supportedResizeWidth);\n            } else {\n                srcSetWidths.push(supportedResizeWidth);\n                break;\n            }\n        }\n    } else {\n        // If a fixed image width was not provided, we\n        // rely on all the supported image resize widths.\n        srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;\n    }\n\n    const srcSet = src ? getSrcSet(src, srcSetWidths) : \"\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        opacity: isLoaded ? 1 : 0,\n        transition: \"opacity 0.3s ease\",\n        ...styles\n    };\n\n    const onLoad = useCallback(() => {\n        if (contentSdk.isEditing()) {\n            setTimeout(() => {\n                setIsLoaded(true);\n            }, 100);\n        } else {\n            setIsLoaded(true);\n        }\n    }, []);\n\n    return {\n        altText,\n        isLoaded,\n        onLoad,\n        src: inputs.image?.src,\n        srcSet,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/editorComponents/Image.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Image: import("@webiny/app-website-builder/sdk").Component;

package/editorComponents/Image.manifest.js

@@ -0,0 +1,40 @@
+"use client";
+
+import { createFileInput, createTextInput } from "@webiny/app-website-builder/sdk";
+import { createComponent } from "../createComponent";
+import { ImageComponent } from "./Image";
+export const Image = createComponent(ImageComponent, {
+  name: "Webiny/Image",
+  label: "Image",
+  group: "basic",
+  image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
+  autoApplyStyles: false,
+  inputs: [createFileInput({
+    name: "image",
+    label: "Image",
+    allowedFileTypes: ["image/*"],
+    onChange: ({
+      inputs
+    }) => {
+      if (inputs.image) {
+        inputs.title = inputs.image.name;
+        inputs.altText = inputs.image.name;
+      }
+    }
+  }), createTextInput({
+    name: "title",
+    label: "Title",
+    description: "Title of the image"
+  }), createTextInput({
+    name: "altText",
+    label: "Alternate Text",
+    description: "Shown when the user has disabled images"
+  })],
+  defaults: {
+    styles: {
+      width: "100%"
+    }
+  }
+});
+
+//# sourceMappingURL=Image.manifest.js.map

package/editorComponents/Image.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createFileInput, createTextInput } from \"@webiny/app-website-builder/sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { ImageComponent } from \"./Image\";\n\nexport const Image = createComponent(ImageComponent, {\n    name: \"Webiny/Image\",\n    label: \"Image\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n    autoApplyStyles: false,\n    inputs: [\n        createFileInput({\n            name: \"image\",\n            label: \"Image\",\n            allowedFileTypes: [\"image/*\"],\n            onChange: ({ inputs }) => {\n                if (inputs.image) {\n                    inputs.title = inputs.image.name;\n                    inputs.altText = inputs.image.name;\n                }\n            }\n        }),\n        createTextInput({\n            name: \"title\",\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        createTextInput({\n            name: \"altText\",\n            label: \"Alternate Text\",\n            description: \"Shown when the user has disabled images\"\n        })\n    ],\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,EAAEC,eAAe,QAAQ,iCAAiC;AAClF,SAASC,eAAe;AACxB,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJV,eAAe,CAAC;IACZK,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF;IAAO,CAAC,KAAK;MACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;QACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;QAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;MACtC;IACJ;EACJ,CAAC,CAAC,EACFJ,eAAe,CAAC;IACZI,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdS,WAAW,EAAE;EACjB,CAAC,CAAC,EACFd,eAAe,CAAC;IACZI,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,gBAAgB;IACvBS,WAAW,EAAE;EACjB,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Lexical.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ComponentProps } from "../types";
+export declare const createLexicalValue: (value: string) => {
+    state: string;
+};
+type LexicalProps = ComponentProps<{
+    content: {
+        state: string;
+        html?: string;
+    };
+}>;
+export declare const LexicalComponent: ({ inputs }: LexicalProps) => React.JSX.Element;
+export {};

package/editorComponents/Lexical.js

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { LexicalHtmlRenderer } from "@webiny/lexical-editor";
+export const createLexicalValue = value => {
+  return {
+    state: `{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"${value}\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph-element\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\",\"styles\":[{\"styleId\":\"paragraph1\",\"type\":\"typography\"}]}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`
+  };
+};
+export const LexicalComponent = ({
+  inputs
+}) => {
+  const {
+    state,
+    html
+  } = inputs.content;
+  if (html) {
+    return /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(LexicalHtmlRenderer, {
+    value: state,
+    theme: {}
+  });
+};
+
+//# sourceMappingURL=Lexical.js.map

package/editorComponents/Lexical.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","LexicalHtmlRenderer","createLexicalValue","value","state","LexicalComponent","inputs","html","content","createElement","dangerouslySetInnerHTML","__html","theme"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\nimport type { ComponentProps } from \"~/types\";\n\nexport const createLexicalValue = (value: string) => {\n    return {\n        state: `{\\\"root\\\":{\\\"children\\\":[{\\\"children\\\":[{\\\"detail\\\":0,\\\"format\\\":0,\\\"mode\\\":\\\"normal\\\",\\\"style\\\":\\\"\\\",\\\"text\\\":\\\"${value}\\\",\\\"type\\\":\\\"text\\\",\\\"version\\\":1}],\\\"direction\\\":\\\"ltr\\\",\\\"format\\\":\\\"\\\",\\\"indent\\\":0,\\\"type\\\":\\\"paragraph-element\\\",\\\"version\\\":1,\\\"textFormat\\\":0,\\\"textStyle\\\":\\\"\\\",\\\"styles\\\":[{\\\"styleId\\\":\\\"paragraph1\\\",\\\"type\\\":\\\"typography\\\"}]}],\\\"direction\\\":\\\"ltr\\\",\\\"format\\\":\\\"\\\",\\\"indent\\\":0,\\\"type\\\":\\\"root\\\",\\\"version\\\":1}}`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        state: string;\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { state, html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return <LexicalHtmlRenderer value={state} theme={{}} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,oHAAoHD,KAAK;EACpI,CAAC;AACL,CAAC;AASD,OAAO,MAAME,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF,KAAK;IAAEG;EAAK,CAAC,GAAGD,MAAM,CAACE,OAAO;EAEtC,IAAID,IAAI,EAAE;IACN,oBAAOP,KAAA,CAAAS,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEJ;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,mBAAmB;IAACE,KAAK,EAAEC,KAAM;IAACQ,KAAK,EAAE,CAAC;EAAE,CAAE,CAAC;AAC3D,CAAC","ignoreList":[]}

package/editorComponents/Lexical.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Lexical: import("@webiny/app-website-builder/sdk").Component;

package/editorComponents/Lexical.manifest.js

@@ -0,0 +1,22 @@
+"use client";
+
+import { createLexicalInput } from "@webiny/app-website-builder/sdk";
+import { createComponent } from "../createComponent";
+import { LexicalComponent, createLexicalValue } from "./Lexical";
+export const Lexical = createComponent(LexicalComponent, {
+  name: "Webiny/Lexical",
+  label: "Rich Text",
+  group: "basic",
+  image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"/></svg>`,
+  inputs: [createLexicalInput({
+    name: "content",
+    label: "Content"
+  })],
+  defaults: {
+    inputs: {
+      content: createLexicalValue("Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.")
+    }
+  }
+});
+
+//# sourceMappingURL=Lexical.manifest.js.map

package/editorComponents/Lexical.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","group","image","inputs","defaults","content"],"sources":["Lexical.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createLexicalInput } from \"@webiny/app-website-builder/sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { LexicalComponent, createLexicalValue } from \"./Lexical\";\n\nexport const Lexical = createComponent(LexicalComponent, {\n    name: \"Webiny/Lexical\",\n    label: \"Rich Text\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z\"/></svg>`,\n    inputs: [\n        createLexicalInput({\n            name: \"content\",\n            label: \"Content\"\n        })\n    ],\n    defaults: {\n        inputs: {\n            content: createLexicalValue(\n                \"Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.\"\n            )\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe;AACxB,SAASC,gBAAgB,EAAEC,kBAAkB;AAE7C,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAACC,gBAAgB,EAAE;EACrDG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJT,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDI,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAER,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Root.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ComponentPropsWithChildren } from "../types";
+export declare const RootComponent: ({ inputs }: ComponentPropsWithChildren) => React.JSX.Element;

package/editorComponents/Root.js

@@ -0,0 +1,8 @@
+import React from "react";
+export const RootComponent = ({
+  inputs
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, inputs.children);
+};
+
+//# sourceMappingURL=Root.js.map

package/editorComponents/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","RootComponent","inputs","createElement","Fragment","children"],"sources":["Root.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const RootComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACrE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/Root.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Root: import("@webiny/app-website-builder/sdk").Component;

package/editorComponents/Root.manifest.js

@@ -0,0 +1,12 @@
+"use client";
+
+import { createComponent } from "../createComponent";
+import { RootComponent } from "./Root";
+export const Root = createComponent(RootComponent, {
+  name: "Webiny/Root",
+  label: "Main Content",
+  acceptsChildren: true,
+  hideFromToolbar: true
+});
+
+//# sourceMappingURL=Root.manifest.js.map

package/editorComponents/Root.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar"],"sources":["Root.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent\";\nimport { RootComponent } from \"./Root\";\n\nexport const Root = createComponent(RootComponent, {\n    name: \"Webiny/Root\",\n    label: \"Main Content\",\n    acceptsChildren: true,\n    hideFromToolbar: true\n})\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,aAAa;AAEtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,cAAc;EACrBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE;AACrB,CAAC,CAAC","ignoreList":[]}

package/editorComponents/index.d.ts

@@ -0,0 +1 @@
+export declare const editorComponents: import("@webiny/app-website-builder/sdk/types.js").Component[];

package/editorComponents/index.js

@@ -0,0 +1,10 @@
+import { Box } from "./Box.manifest.js";
+import { Grid } from "./Grid.manifest.js";
+import { Image } from "./Image.manifest.js";
+import { Lexical } from "./Lexical.manifest.js";
+import { Root } from "./Root.manifest.js";
+import { GridColumn } from "./GridColumn.manifest";
+import { Fragment } from "./Fragment.manifest";
+export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
+
+//# sourceMappingURL=index.js.map

package/editorComponents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box","Grid","Image","Lexical","Root","GridColumn","Fragment","editorComponents"],"sources":["index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest\";\nimport { Fragment } from \"./Fragment.manifest\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n"],"mappings":"AAAA,SAASA,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,gBAAgB,GAAG,CAACH,IAAI,EAAEJ,GAAG,EAAEC,IAAI,EAAEI,UAAU,EAAEH,KAAK,EAAEC,OAAO,EAAEG,QAAQ,CAAC","ignoreList":[]}

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/index.js";
+export * from "./createComponent.js";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, StyleSettings } from "@webiny/app-website-builder/sdk";
+export type { ComponentProps, ComponentPropsWithChildren } from "./types.js";

package/index.js

@@ -0,0 +1,5 @@
+export * from "./components/index.js";
+export * from "./createComponent.js";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, StyleSettings } from "@webiny/app-website-builder/sdk";
+
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createTextInput","createLongTextInput","createNumberInput","createBooleanInput","createColorInput","createFileInput","createDateInput","createLexicalInput","createSelectInput","createRadioInput","createObjectInput","createTagsInput","createSlotInput","createInput","createElement","contentSdk","environment","setHeadersProvider","getHeadersProvider","registerComponentGroup","StyleSettings"],"sources":["index.ts"],"sourcesContent":["export * from \"./components/index.js\";\nexport * from \"./createComponent.js\";\n\nexport {\n    createTextInput,\n    createLongTextInput,\n    createNumberInput,\n    createBooleanInput,\n    createColorInput,\n    createFileInput,\n    createDateInput,\n    createLexicalInput,\n    createSelectInput,\n    createRadioInput,\n    createObjectInput,\n    createTagsInput,\n    createSlotInput,\n    createInput,\n    createElement,\n    contentSdk,\n    environment,\n    setHeadersProvider,\n    getHeadersProvider,\n    registerComponentGroup,\n    type Document,\n    type DocumentElement,\n    type Breakpoint,\n    type CreateElementParams,\n    type ContentSDKConfig,\n    type ComponentManifest,\n    type ComponentInput,\n    StyleSettings\n} from \"@webiny/app-website-builder/sdk\";\n\nexport type { ComponentProps, ComponentPropsWithChildren } from \"./types.js\";\n"],"mappings":"AAAA;AACA;AAEA,SACIA,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,UAAU,EACVC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,EAClBC,sBAAsB,EAQtBC,aAAa,QACV,iCAAiC","ignoreList":[]}

package/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@webiny/website-builder-react",
+	"version": "6.0.0-alpha.0",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"exports": {
+		".": "./index.js"
+	},
+	"description": "A React frontend integration SDK for Webiny Website Builder.",
+	"contributors": [
+		"Pavel Denisjuk <pavel@webiny.com>",
+		"Sven Al Hamad <sven@webiny.com>",
+		"Adrian Smijulj <adrian@webiny.com>"
+	],
+	"license": "MIT",
+	"dependencies": {
+		"@webiny/app-website-builder": "6.0.0-alpha.0",
+		"@webiny/lexical-editor": "6.0.0-alpha.0",
+		"deep-equal": "2.2.3",
+		"mobx": "6.9.0",
+		"mobx-react-lite": "3.4.3",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"devDependencies": {
+		"@types/react": "18.2.79",
+		"@webiny/project-utils": "6.0.0-alpha.0",
+		"typescript": "5.3.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "node ../cli/bin.js run build",
+		"watch": "node ../cli/bin.js run watch"
+	},
+	"gitHead": "a5b28fed7a242d8f56712197a8ea83aa6d2ed101"
+}

package/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CssProperties, DocumentElement } from "@webiny/app-website-builder/sdk";
+export type ComponentProps<TInputs = unknown> = {
+    inputs: TInputs;
+    styles: CssProperties;
+    element: DocumentElement;
+    breakpoint: string;
+};
+export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
+    children: React.ReactNode;
+}>;

package/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CssProperties, DocumentElement } from \"@webiny/app-website-builder/sdk\";\n\nexport type ComponentProps<TInputs = unknown> = {\n    inputs: TInputs;\n    styles: CssProperties;\n    element: DocumentElement;\n    breakpoint: string;\n};\n\nexport type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<\n    TInputs & { children: React.ReactNode }\n>;\n"],"mappings":"","ignoreList":[]}