@builder.io/sdk-react-native 0.0.1-56 → 0.0.1-59

package/src/blocks/image/image.lite.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Image(props) {
-  return (
-    <View style={styles.view1}>
-      <View>
-        <View
-          loading="lazy"
-          alt={props.altText}
-          role={props.altText ? "presentation" : undefined}
-          style={styles.view2}
-          src={props.image}
-          srcSet={props.srcset}
-          sizes={props.sizes}
-        />
-
-        <View srcSet={props.srcset} />
-      </View>
-
-      {props.aspectRatio &&
-      !(props.fitContent && props.builderBlock?.children?.length) ? (
-        <View style={styles.view3}>
-          <Text> </Text>
-        </View>
-      ) : null}
-
-      {props.builderBlock?.children?.length && props.fitContent ? (
-        <>
-          <Text>{props.children}</Text>
-        </>
-      ) : null}
-
-      {!props.fitContent ? (
-        <>
-          <View style={styles.view4}>
-            <Text>{props.children}</Text>
-          </View>
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { position: "relative" },
-  view2: {
-    opacity: 1,
-    transition: "opacity 0.2s ease-in-out",
-    position: "absolute",
-    height: 100,
-    width: 100,
-    top: 0,
-    left: 0,
-  },
-  view3: { width: 100, pointerEvents: "none", fontSize: 0 },
-  view4: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 100,
-    height: 100,
-  },
-});

package/src/blocks/img/img.lite.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function ImgComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      style={{
-        objectFit: props.backgroundSize || "cover",
-        objectPosition: props.backgroundPosition || "center",
-      }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      src={props.imgSrc}
-    />
-  );
-}

package/src/blocks/input/input.lite.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function FormInputComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      placeholder={props.placeholder}
-      type={props.type}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      required={props.required}
-    />
-  );
-}

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function RawText(props) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
-}

package/src/blocks/section/section.lite.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function SectionComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      style={
-        props.maxWidth && typeof props.maxWidth === "number"
-          ? {
-              maxWidth: props.maxWidth,
-            }
-          : undefined
-      }
-    >
-      <Text>{props.children}</Text>
-    </View>
-  );
-}

package/src/blocks/select/select.lite.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function SelectComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      {props.options?.map((option) => (
-        <View value={option.value}>
-          <Text>{option.name || option.value}</Text>
-        </View>
-      ))}
-    </View>
-  );
-}

package/src/blocks/submit-button/submit-button.lite.tsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function SubmitButton(props) {
-  return (
-    <View {...props.attributes} type="submit">
-      <Text>{props.text}</Text>
-    </View>
-  );
-}

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.lite";
-import BuilderContext from "../../context/builder.context";
-import { getContent } from "../../functions/get-content/index.js";
-
-export default function Symbol(props) {
-  const [className, setClassName] = useState(() => "builder-symbol");
-
-  const [content, setContent] = useState(() => null);
-
-  const builderContext = useContext(BuilderContext);
-
-  useEffect(() => {
-    setContent(props.symbol?.content);
-  }, []);
-
-  useEffect(() => {
-    const symbolToUse = props.symbol;
-
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext.apiKey,
-        options: {
-          entry: symbolToUse.entry,
-        },
-      }).then((response) => {
-        setContent(response);
-      });
-    }
-  }, [
-    props.symbol?.content,
-    props.symbol?.model,
-    props.symbol?.entry,
-    content,
-  ]);
-
-  return (
-    <View
-      {...props.attributes}
-      dataSet={{
-        class: className,
-      }}
-    >
-      <RenderContent
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={content}
-      />
-    </View>
-  );
-}

package/src/blocks/text/text.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Text(props) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text }} />;
-}

package/src/blocks/textarea/textarea.lite.tsx

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

package/src/blocks/video/video.lite.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Video(props) {
-  return (
-    <View
-      {...props.attributes}
-      preload="none"
-      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,
-      }}
-      key={props.video || "no-src"}
-      poster={props.posterImage}
-      autoPlay={props.autoPlay}
-      muted={props.muted}
-      controls={props.controls}
-      loop={props.loop}
-    />
-  );
-}

package/src/components/error-boundary.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("Error rendering Builder.io block", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ React.createElement(Text, {
-        style: { color: "gray" }
-      }, "Error rendering Builder.io block");
-    }
-    return this.props.children;
-  }
-}
-export {
-  ErrorBoundary as default
-};

package/src/components/error-boundary.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function ErrorBoundary(props) {
-  return <></>;
-}

package/src/components/render-block/block-styles.lite.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import RenderInlinedStyles from "../render-inlined-styles.lite";
-
-export default function BlockStyles(props) {
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function camelToKebabCase(string) {
-    return string
-      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-      .toLowerCase();
-  }
-
-  function css() {
-    // TODO: media queries
-    const styleObject = useBlock().responsiveStyles?.large;
-
-    if (!styleObject) {
-      return "";
-    }
-
-    let str = `.${useBlock().id} {`;
-
-    for (const key in styleObject) {
-      const value = styleObject[key];
-
-      if (typeof value === "string") {
-        str += `${camelToKebabCase(key)}: ${value};`;
-      }
-    }
-
-    str += "}";
-    return str;
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      {TARGET === "vue" || TARGET === "svelte" ? (
-        <>
-          <RenderInlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-block/render-block.lite.tsx

@@ -1,148 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context";
-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 { getBlockStyles } from "../../functions/get-block-styles.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.lite";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.lite";
-
-export default function RenderBlock(props) {
-  function component() {
-    const componentName = useBlock().component?.name;
-
-    if (!componentName) {
-      return null;
-    }
-
-    const ref = builderContext.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 componentInfo() {
-    if (component()) {
-      const { component: _, ...info } = component();
-      return info;
-    } else {
-      return undefined;
-    }
-  }
-
-  function componentRef() {
-    return component?.()?.component;
-  }
-
-  function tagName() {
-    return getBlockTag(useBlock());
-  }
-
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function attributes() {
-    return {
-      ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: builderContext.state,
-        context: builderContext.context,
-      }),
-      style: getBlockStyles(useBlock()),
-    };
-  }
-
-  function shouldWrap() {
-    return !componentInfo?.()?.noWrap;
-  }
-
-  function componentOptions() {
-    return {
-      ...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(),
-          }),
-    };
-  }
-
-  function children() {
-    // 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 componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  }
-
-  function noCompRefChildren() {
-    /**
-     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-     * we render them outside of `componentRef`
-     */
-    return componentRef() ? [] : children();
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  const TagNameRef = tagName();
-
-  return (
-    <>
-      {shouldWrap() ? (
-        <>
-          {!isEmptyHtmlElement(tagName()) ? (
-            <>
-              <TagNameRef {...attributes()}>
-                <RenderComponent
-                  blockChildren={children()}
-                  componentRef={componentRef()}
-                  componentOptions={componentOptions()}
-                />
-
-                {noCompRefChildren()?.map((child) => (
-                  <RenderBlock key={"render-block-" + child.id} block={child} />
-                ))}
-
-                {noCompRefChildren()?.map((child) => (
-                  <BlockStyles key={"block-style-" + child.id} block={child} />
-                ))}
-              </TagNameRef>
-            </>
-          ) : (
-            <TagNameRef {...attributes()} />
-          )}
-        </>
-      ) : (
-        <RenderComponent
-          blockChildren={children()}
-          componentRef={componentRef()}
-          componentOptions={componentOptions()}
-        />
-      )}
-    </>
-  );
-}

package/src/components/render-block/render-component.lite.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import BlockStyles from "./block-styles.lite";
-import RenderBlock from "./render-block.lite";
-
-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} />
-            ))}
-
-            {props.blockChildren?.map((child) => (
-              <BlockStyles key={"block-style-" + child.id} block={child} />
-            ))}
-          </ComponentRefRef>
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-blocks.lite.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.lite";
-import RenderBlock from "./render-block/render-block.lite";
-
-export default function RenderBlocks(props) {
-  function className() {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-  }
-
-  function onClick() {
-    if (isEditing() && !props.blocks?.length) {
-      window.parent?.postMessage(
-        {
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  function onMouseEnter() {
-    if (isEditing() && !props.blocks?.length) {
-      window.parent?.postMessage(
-        {
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  return (
-    <View
-      builder-path={props.path}
-      builder-parent-id={props.parent}
-      dataSet={{
-        class: className(),
-      }}
-      onClick={(event) => onClick()}
-      onMouseEnter={(event) => onMouseEnter()}
-      style={styles.view1}
-    >
-      {props.blocks ? (
-        <>
-          {props.blocks?.map((block) => (
-            <RenderBlock key={"render-block-" + block.id} block={block} />
-          ))}
-        </>
-      ) : null}
-
-      {props.blocks ? (
-        <>
-          {props.blocks?.map((block) => (
-            <BlockStyles key={"block-style-" + block.id} block={block} />
-          ))}
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
-});

package/src/components/render-content/components/render-styles.lite.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import RenderInlinedStyles from "../../render-inlined-styles.lite";
-
-export default function RenderContentStyles(props) {
-  function getCssFromFont(font) {
-    // TODO: compute what font sizes are used and only load those.......
-    const family =
-      font.family +
-      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = "";
-
-    if (url && family && name) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-
-    if (font.files) {
-      for (const weight in font.files) {
-        const isNumber = String(Number(weight)) === weight;
-
-        if (!isNumber) {
-          continue;
-        } // TODO: maybe limit number loaded
-
-        const weightUrl = font.files[weight];
-
-        if (weightUrl && weightUrl !== url) {
-          str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-        }
-      }
-    }
-
-    return str;
-  }
-
-  function getFontCss({ customFonts }) {
-    // TODO: flag for this
-    // if (!builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
-  }
-
-  function injectedStyles() {
-    return `
-${props.cssCode || ""}
-${getFontCss({
-  customFonts: props.customFonts,
-})}`;
-  }
-
-  return <RenderInlinedStyles styles={injectedStyles()} />;
-}