@builder.io/sdk-react 0.2.3-3 → 0.2.3

package/packages/react/src/scripts/init-editing.js

@@ -1,93 +0,0 @@
-import { TARGET } from "../constants/target.js";
-import { isBrowser } from "../functions/is-browser.js";
-import { register } from "../functions/register.js";
-const registerInsertMenu = () => {
-  register("insertMenu", {
-    name: "_default",
-    default: true,
-    items: [
-      { name: "Box" },
-      { name: "Text" },
-      { name: "Image" },
-      { name: "Columns" },
-      ...TARGET === "reactNative" ? [] : [
-        { name: "Core:Section" },
-        { name: "Core:Button" },
-        { name: "Embed" },
-        { name: "Custom Code" }
-      ]
-    ]
-  });
-};
-let isSetupForEditing = false;
-const setupBrowserForEditing = (options = {}) => {
-  var _a, _b;
-  if (isSetupForEditing) {
-    return;
-  }
-  isSetupForEditing = true;
-  if (isBrowser()) {
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.sdkInfo",
-      data: {
-        target: TARGET,
-        supportsPatchUpdates: false,
-        supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
-      }
-    }, "*");
-    (_b = window.parent) == null ? void 0 : _b.postMessage({
-      type: "builder.updateContent",
-      data: {
-        options
-      }
-    }, "*");
-    window.addEventListener("message", ({ data }) => {
-      var _a2, _b2;
-      if (!(data == null ? void 0 : data.type)) {
-        return;
-      }
-      switch (data.type) {
-        case "builder.evaluate": {
-          const text = data.data.text;
-          const args = data.data.arguments || [];
-          const id = data.data.id;
-          const fn = new Function(text);
-          let result;
-          let error = null;
-          try {
-            result = fn.apply(null, args);
-          } catch (err) {
-            error = err;
-          }
-          if (error) {
-            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-              type: "builder.evaluateError",
-              data: { id, error: error.message }
-            }, "*");
-          } else {
-            if (result && typeof result.then === "function") {
-              result.then((finalResult) => {
-                var _a3;
-                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                  type: "builder.evaluateResult",
-                  data: { id, result: finalResult }
-                }, "*");
-              }).catch(console.error);
-            } else {
-              (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
-                type: "builder.evaluateResult",
-                data: { result, id }
-              }, "*");
-            }
-          }
-          break;
-        }
-      }
-    });
-  }
-};
-export {
-  registerInsertMenu,
-  setupBrowserForEditing
-};

package/packages/react/src/types/api-version.js

@@ -1,4 +0,0 @@
-const DEFAULT_API_VERSION = "v3";
-export {
-  DEFAULT_API_VERSION
-};

package/packages/rsc/src/blocks/BaseText.jsx

@@ -1,12 +0,0 @@
-import * as React from "react";
-import BuilderContext from "../context/builder.context.js";
-
-function BaseText(props) {
-  const _context = { ...props["_context"] };
-
-  const builderContext = _context["BuilderContext"];
-
-  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
-}
-
-export default BaseText;

package/packages/rsc/src/blocks/button/button.jsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-
-function Button(props) {
-  const _context = { ...props["_context"] };
-
-  return (
-    <>
-      {props.link ? (
-        <>
-          <a
-            role="button"
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            {props.text}
-          </a>
-        </>
-      ) : (
-        <button
-          className={
-            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
-            props.attributes.class + " button-3083674c"
-          }
-          {...props.attributes}
-        >
-          {props.text}
-        </button>
-      )}
-      <style>{`.button-3083674c {
-all: unset;
-}`}</style>
-    </>
-  );
-}
-
-export default Button;

package/packages/rsc/src/blocks/button/component-info.js

@@ -1,40 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

package/packages/rsc/src/blocks/columns/columns.jsx

@@ -1,172 +0,0 @@
-import * as React from "react";
-import RenderBlocks from "../../components/render-blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
-
-function Columns(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
-    cols: props.columns || [],
-    stackAt: props.stackColumnsAt || "tablet",
-    getWidth(index) {
-      return state.cols[index]?.width || 100 / state.cols.length;
-    },
-    getColumnCssWidth(index) {
-      const subtractWidth =
-        (state.gutterSize * (state.cols.length - 1)) / state.cols.length;
-      return `calc(${state.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    getTabletStyle({ stackedStyle, desktopStyle }) {
-      return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
-    },
-    getMobileStyle({ stackedStyle, desktopStyle }) {
-      return state.stackAt === "never" ? desktopStyle : stackedStyle;
-    },
-    flexDir:
-      props.stackColumnsAt === "never"
-        ? "row"
-        : props.reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column",
-    get columnsCssVars() {
-      if (TARGET === "reactNative") {
-        return {
-          flexDirection: state.flexDir,
-        };
-      }
-      return {
-        "--flex-dir": state.flexDir,
-        "--flex-dir-tablet": state.getTabletStyle({
-          stackedStyle: state.flexDir,
-          desktopStyle: "row",
-        }),
-      };
-    },
-    columnCssVars(index) {
-      const gutter = index === 0 ? 0 : state.gutterSize;
-      if (TARGET === "reactNative") {
-        return {
-          marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-        };
-      }
-      const width = state.getColumnCssWidth(index);
-      const gutterPixels = `${state.gutterSize}px`;
-      const mobileWidth = "100%";
-      const mobileMarginLeft = 0;
-      return {
-        width,
-        "margin-left": gutterPixels,
-        "--column-width-mobile": state.getMobileStyle({
-          stackedStyle: mobileWidth,
-          desktopStyle: width,
-        }),
-        "--column-margin-left-mobile": state.getMobileStyle({
-          stackedStyle: mobileMarginLeft,
-          desktopStyle: gutterPixels,
-        }),
-        "--column-width-tablet": state.getTabletStyle({
-          stackedStyle: mobileWidth,
-          desktopStyle: width,
-        }),
-        "--column-margin-left-tablet": state.getTabletStyle({
-          stackedStyle: mobileMarginLeft,
-          desktopStyle: gutterPixels,
-        }),
-      };
-    },
-    getWidthForBreakpointSize(size) {
-      const breakpointSizes = getSizesForBreakpoints(
-        builderContext.content?.meta?.breakpoints || {}
-      );
-      return breakpointSizes[size].max;
-    },
-    get columnsStyles() {
-      return `
-    @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir-tablet);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-tablet) !important;
-        margin-left: var(--column-margin-left-tablet) !important;
-      }
-    }
-
-    @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-mobile) !important;
-        margin-left: var(--column-margin-left-mobile) !important;
-      }
-    },
-  `;
-    },
-  };
-
-  const builderContext = _context["BuilderContext"];
-
-  return (
-    <>
-      <div
-        className={
-          `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-38093a46"
-        }
-        style={state.columnsCssVars}
-        dataSet={{
-          "builder-block-name": "builder-columns",
-        }}
-      >
-        {TARGET !== "reactNative" ? (
-          <>
-            <RenderInlinedStyles
-              styles={state.columnsStyles}
-              _context={_context}
-            />
-          </>
-        ) : null}
-
-        {props.columns?.map((column, index) => (
-          <div
-            className="builder-column div-38093a46-2"
-            style={state.columnCssVars(index)}
-            dataSet={{
-              "builder-block-name": "builder-column",
-            }}
-            key={index}
-          >
-            <RenderBlocks
-              blocks={column.blocks}
-              path={`component.options.columns.${index}.blocks`}
-              parent={props.builderBlock.id}
-              styleProp={{
-                flexGrow: "1",
-              }}
-              _context={_context}
-            />
-          </div>
-        ))}
-      </div>
-      <style>{`.div-38093a46 {
-display: flex;
-line-height: normal;
-}.div-38093a46-2 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-}`}</style>
-    </>
-  );
-}
-
-export default Columns;

package/packages/rsc/src/blocks/columns/component-info.js

@@ -1,241 +0,0 @@
-import { serializeFn } from "../util.js";
-const componentInfo = {
-  name: "Columns",
-  inputs: [
-    {
-      name: "columns",
-      type: "array",
-      broadcast: true,
-      subFields: [
-        {
-          name: "blocks",
-          type: "array",
-          hideFromUI: true,
-          defaultValue: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        },
-        {
-          name: "width",
-          type: "number",
-          hideFromUI: true,
-          helperText: "Width %, e.g. set to 50 to fill half of the space"
-        },
-        {
-          name: "link",
-          type: "url",
-          helperText: "Optionally set a url that clicking this column will link to"
-        }
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        },
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        }
-      ],
-      onChange: serializeFn((options) => {
-        function clearWidths() {
-          columns.forEach((col) => {
-            col.delete("width");
-          });
-        }
-        const columns = options.get("columns");
-        if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
-          if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
-              clearWidths();
-            } else {
-              const sumWidths = columns.reduce((memo, col) => {
-                return memo + col.get("width");
-              }, 0);
-              const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
-                clearWidths();
-              }
-            }
-          }
-        }
-      })
-    },
-    {
-      name: "space",
-      type: "number",
-      defaultValue: 20,
-      helperText: "Size of gap between columns",
-      advanced: true
-    },
-    {
-      name: "stackColumnsAt",
-      type: "string",
-      defaultValue: "tablet",
-      helperText: "Convert horizontal columns to vertical at what device size",
-      enum: ["tablet", "mobile", "never"],
-      advanced: true
-    },
-    {
-      name: "reverseColumnsWhenStacked",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "When stacking columns for mobile devices, reverse the ordering",
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/packages/rsc/src/blocks/custom-code/component-info.js

@@ -1,30 +0,0 @@
-const componentInfo = {
-  name: "Custom Code",
-  static: true,
-  requiredPermissions: ["editCode"],
-  inputs: [
-    {
-      name: "code",
-      type: "html",
-      required: true,
-      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-      code: true
-    },
-    {
-      name: "replaceNodes",
-      type: "boolean",
-      helperText: "Preserve server rendered dom nodes",
-      advanced: true
-    },
-    {
-      name: "scriptsClientOnly",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};