@builder.io/sdk-react 0.2.0 → 0.2.2

package/src/blocks/text/text.jsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-
-export default function Text(props) {
-  return (
-    <span
-      className="builder-text"
-      dangerouslySetInnerHTML={{ __html: props.text }}
-    />
-  );
-}

package/src/blocks/textarea/component-info.js

@@ -1,47 +0,0 @@
-const componentInfo = {
-  name: "Form:TextArea",
-  builtIn: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
-  inputs: [
-    {
-      advanced: true,
-      name: "value",
-      type: "string"
-    },
-    {
-      name: "name",
-      type: "string",
-      required: true,
-      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
-    },
-    {
-      name: "defaultValue",
-      type: "string"
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      defaultValue: "Hello there"
-    },
-    {
-      name: "required",
-      type: "boolean",
-      defaultValue: false
-    }
-  ],
-  defaultStyles: {
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    borderRadius: "3px",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "#ccc"
-  },
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

package/src/blocks/textarea/textarea.jsx

@@ -1,13 +0,0 @@
-import * as React from "react";
-
-export default function Textarea(props) {
-  return (
-    <textarea
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    />
-  );
-}

package/src/blocks/util.js

@@ -1,8 +0,0 @@
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
-export {
-  serializeFn
-};

package/src/blocks/video/component-info.js

@@ -1,106 +0,0 @@
-const componentInfo = {
-  name: "Video",
-  canHaveChildren: true,
-  builtIn: true,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [
-    {
-      name: "video",
-      type: "file",
-      allowedFileTypes: ["mp4"],
-      bubble: true,
-      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-      required: true
-    },
-    {
-      name: "posterImage",
-      type: "file",
-      allowedFileTypes: ["jpeg", "png"],
-      helperText: "Image to show before the video plays"
-    },
-    {
-      name: "autoPlay",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "controls",
-      type: "boolean",
-      defaultValue: false
-    },
-    {
-      name: "muted",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "loop",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "playsInline",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "fit",
-      type: "text",
-      defaultValue: "cover",
-      enum: ["contain", "cover", "fill", "auto"]
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "position",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "height",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "width",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      advanced: true,
-      defaultValue: 0.7004048582995948
-    },
-    {
-      name: "lazyLoad",
-      type: "boolean",
-      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/src/blocks/video/video.jsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-
-export default function Video(props) {
-  function videoProps() {
-    return {
-      ...(props.autoPlay === true
-        ? {
-            autoPlay: true,
-          }
-        : {}),
-      ...(props.muted === true
-        ? {
-            muted: true,
-          }
-        : {}),
-      ...(props.controls === true
-        ? {
-            controls: true,
-          }
-        : {}),
-      ...(props.loop === true
-        ? {
-            loop: true,
-          }
-        : {}),
-      ...(props.playsInline === true
-        ? {
-            playsInline: true,
-          }
-        : {}),
-    };
-  }
-
-  function spreadProps() {
-    return {
-      ...props.attributes,
-      ...videoProps(),
-    };
-  }
-
-  return (
-    <video
-      {...spreadProps()}
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        borderRadius: 1,
-      }}
-      src={props.video || "no-src"}
-      poster={props.posterImage}
-    />
-  );
-}

package/src/components/render-block/block-styles.jsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints,
-} from "../../constants/device-sizes.js";
-import { TARGET } from "../../constants/target.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
-
-export default function BlockStyles(props) {
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: props.context.state,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
-  }
-
-  function css() {
-    const styles = useBlock().responsiveStyles;
-    const content = props.context.content;
-    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
-      content?.meta?.breakpoints || {}
-    );
-    const largeStyles = styles?.large;
-    const mediumStyles = styles?.medium;
-    const smallStyles = styles?.small;
-    const className = useBlock().id;
-    const largeStylesClass = largeStyles
-      ? createCssClass({
-          className,
-          styles: largeStyles,
-        })
-      : "";
-    const mediumStylesClass = mediumStyles
-      ? createCssClass({
-          className,
-          styles: mediumStyles,
-          mediaQuery: getMaxWidthQueryForSize(
-            "medium",
-            sizesWithUpdatedBreakpoints
-          ),
-        })
-      : "";
-    const smallStylesClass = smallStyles
-      ? createCssClass({
-          className,
-          styles: smallStyles,
-          mediaQuery: getMaxWidthQueryForSize(
-            "small",
-            sizesWithUpdatedBreakpoints
-          ),
-        })
-      : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
-
-  return (
-    <>
-      {TARGET !== "reactNative" && css() ? (
-        <>
-          <RenderInlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-block/render-block.helpers.js

@@ -1,23 +0,0 @@
-const EMPTY_HTML_ELEMENTS = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-const isEmptyHtmlElement = (tagName) => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
-export {
-  isEmptyHtmlElement
-};

package/src/components/render-block/render-block.jsx

@@ -1,252 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { evaluate } from "../../functions/evaluate.js";
-import BlockStyles from "./block-styles.js";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
-import { TARGET } from "../../constants/target.js";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponentWithContext from "./render-component-with-context.js";
-import RenderComponent from "./render-component.js";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-
-export default function RenderBlock(props) {
-  function component() {
-    const componentName = getProcessedBlock({
-      block: props.block,
-      state: props.context.state,
-      context: props.context.context,
-      shouldEvaluateBindings: false,
-    }).component?.name;
-    if (!componentName) {
-      return null;
-    }
-    const ref = props.context.registeredComponents[componentName];
-    if (!ref) {
-      // TODO: Public doc page with more info about this message
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-      return undefined;
-    } else {
-      return ref;
-    }
-  }
-
-  function tag() {
-    return getBlockTag(useBlock());
-  }
-
-  function useBlock() {
-    return repeatItemData()
-      ? props.block
-      : getProcessedBlock({
-          block: props.block,
-          state: props.context.state,
-          context: props.context.context,
-          shouldEvaluateBindings: true,
-        });
-  }
-
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      state: props.context.state,
-      context: props.context.context,
-    });
-  }
-
-  function attributes() {
-    const blockProperties = getBlockProperties(useBlock());
-    return {
-      ...blockProperties,
-      ...(TARGET === "reactNative"
-        ? {
-            style: getReactNativeBlockStyles({
-              block: useBlock(),
-              context: props.context,
-              blockStyles: blockProperties.style,
-            }),
-          }
-        : {}),
-    };
-  }
-
-  function shouldWrap() {
-    return !component?.()?.noWrap;
-  }
-
-  function renderComponentProps() {
-    return {
-      blockChildren: useChildren(),
-      componentRef: component?.()?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(shouldWrap()
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
-      },
-      context: childrenContext(),
-    };
-  }
-
-  function useChildren() {
-    // TO-DO: When should `canHaveChildren` dictate rendering?
-    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-    // but still receive and need to render children.
-    // return state.componentInfo?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  }
-
-  function childrenWithoutParentComponent() {
-    /**
-     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-     * we render them outside of `componentRef`.
-     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
-     * blocks, and the children will be repeated within those blocks.
-     */
-    const shouldRenderChildrenOutsideRef =
-      !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? useChildren() : [];
-  }
-
-  function repeatItemData() {
-    /**
-     * we don't use `useBlock()` here because the processing done within its logic includes evaluating the block's bindings,
-     * which will not work if there is a repeat.
-     */
-    const { repeat, ...blockWithoutRepeat } = props.block;
-    if (!repeat?.collection) {
-      return undefined;
-    }
-    const itemsArray = evaluate({
-      code: repeat.collection,
-      state: props.context.state,
-      context: props.context.context,
-    });
-    if (!Array.isArray(itemsArray)) {
-      return undefined;
-    }
-    const collectionName = repeat.collection.split(".").pop();
-    const itemNameToUse =
-      repeat.itemName || (collectionName ? collectionName + "Item" : "item");
-    const repeatArray = itemsArray.map((item, index) => ({
-      context: {
-        ...props.context,
-        state: {
-          ...props.context.state,
-          $index: index,
-          $item: item,
-          [itemNameToUse]: item,
-          [`$${itemNameToUse}Index`]: index,
-        },
-      },
-      block: blockWithoutRepeat,
-    }));
-    return repeatArray;
-  }
-
-  function inheritedTextStyles() {
-    if (TARGET !== "reactNative") {
-      return {};
-    }
-    const styles = getReactNativeBlockStyles({
-      block: useBlock(),
-      context: props.context,
-      blockStyles: attributes().style,
-    });
-    return extractTextStyles(styles);
-  }
-
-  function childrenContext() {
-    return {
-      apiKey: props.context.apiKey,
-      state: props.context.state,
-      content: props.context.content,
-      context: props.context.context,
-      registeredComponents: props.context.registeredComponents,
-      inheritedStyles: inheritedTextStyles(),
-    };
-  }
-
-  function renderComponentTag() {
-    if (TARGET === "reactNative") {
-      return RenderComponentWithContext;
-    } else if (TARGET === "vue3") {
-      // vue3 expects a string for the component tag
-      return "RenderComponent";
-    } else {
-      return RenderComponent;
-    }
-  }
-
-  const [componentInfo, setComponentInfo] = useState(() => null);
-
-  const RenderComponentTagRef = renderComponentTag();
-  const TagRef = tag();
-
-  return (
-    <>
-      {shouldWrap() ? (
-        <>
-          {isEmptyHtmlElement(tag()) ? (
-            <>
-              <TagRef {...attributes()} {...actions()} />
-            </>
-          ) : null}
-          {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-            <>
-              {repeatItemData()?.map((data, index) => (
-                <RenderRepeatedBlock
-                  key={index}
-                  repeatContext={data.context}
-                  block={data.block}
-                />
-              ))}
-            </>
-          ) : null}
-          {!isEmptyHtmlElement(tag()) && !repeatItemData() ? (
-            <>
-              <TagRef {...attributes()} {...actions()}>
-                <RenderComponentTagRef {...renderComponentProps()} />
-
-                {childrenWithoutParentComponent()?.map((child) => (
-                  <RenderBlock
-                    key={"render-block-" + child.id}
-                    block={child}
-                    context={childrenContext()}
-                  />
-                ))}
-
-                {childrenWithoutParentComponent()?.map((child) => (
-                  <BlockStyles
-                    key={"block-style-" + child.id}
-                    block={child}
-                    context={childrenContext()}
-                  />
-                ))}
-              </TagRef>
-            </>
-          ) : null}
-        </>
-      ) : (
-        <RenderComponentTagRef {...renderComponentProps()} />
-      )}
-    </>
-  );
-}

package/src/components/render-block/render-component-with-context.jsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderComponent from "./render-component.js";
-
-export default function RenderComponentWithContext(props) {
-  return (
-    <BuilderContext.Provider
-      value={{
-        get content() {
-          return props.context.content;
-        },
-        get state() {
-          return props.context.state;
-        },
-        get context() {
-          return props.context.context;
-        },
-        get apiKey() {
-          return props.context.apiKey;
-        },
-        get registeredComponents() {
-          return props.context.registeredComponents;
-        },
-        get inheritedStyles() {
-          return props.context.inheritedStyles;
-        },
-      }}
-    >
-      <RenderComponent
-        componentRef={props.componentRef}
-        componentOptions={props.componentOptions}
-        blockChildren={props.blockChildren}
-        context={props.context}
-      />
-    </BuilderContext.Provider>
-  );
-}

package/src/components/render-block/render-component.jsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
-
-export default function RenderComponent(props) {
-  const ComponentRefRef = props.componentRef;
-
-  return (
-    <>
-      {props.componentRef ? (
-        <>
-          <ComponentRefRef {...props.componentOptions}>
-            {props.blockChildren?.map((child) => (
-              <RenderBlock
-                key={"render-block-" + child.id}
-                block={child}
-                context={props.context}
-              />
-            ))}
-
-            {props.blockChildren?.map((child) => (
-              <BlockStyles
-                key={"block-style-" + child.id}
-                block={child}
-                context={props.context}
-              />
-            ))}
-          </ComponentRefRef>
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-block/render-repeated-block.jsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
-
-export default function RenderRepeatedBlock(props) {
-  return (
-    <BuilderContext.Provider
-      value={{
-        get content() {
-          return props.repeatContext.content;
-        },
-        get state() {
-          return props.repeatContext.state;
-        },
-        get context() {
-          return props.repeatContext.context;
-        },
-        get apiKey() {
-          return props.repeatContext.apiKey;
-        },
-        get registeredComponents() {
-          return props.repeatContext.registeredComponents;
-        },
-        get inheritedStyles() {
-          return props.repeatContext.inheritedStyles;
-        },
-      }}
-    >
-      <RenderBlock block={props.block} context={props.repeatContext} />
-    </BuilderContext.Provider>
-  );
-}