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

package/packages/react/src/blocks/symbol/symbol.tsx

@@ -0,0 +1,111 @@
+"use client";
+import * as React from "react";
+import { useState, useContext, useEffect } from "react";
+
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: BuilderContent;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export interface SymbolProps {
+  symbol?: SymbolInfo;
+  dataOnly?: boolean;
+  dynamic?: boolean;
+  builderBlock?: BuilderBlock;
+  attributes?: any;
+  inheritState?: boolean;
+}
+
+import RenderContent from "../../components/render-content/render-content";
+import BuilderContext from "../../context/builder.context.js";
+import { getContent } from "../../functions/get-content/index.js";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import { TARGET } from "../../constants/target";
+import { logger } from "../../helpers/logger";
+
+function Symbol(props: SymbolProps) {
+  const [className, setClassName] = useState(() =>
+    [
+      ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(props.attributes.class)
+        : [props.attributes.class]),
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : undefined,
+      props.symbol?.dynamic || props.dynamic
+        ? "builder-dynamic-symbol"
+        : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
+
+  function fetchContent() {
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+    if (
+      !contentToUse &&
+      props.symbol?.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
+      builderContext?.apiKey
+    ) {
+      getContent({
+        model: props.symbol.model,
+        apiKey: builderContext.apiKey,
+        apiVersion: builderContext.apiVersion,
+        query: {
+          id: props.symbol.entry,
+        },
+      })
+        .then((response) => {
+          if (response) {
+            setContentToUse(response);
+          }
+        })
+        .catch((err) => {
+          logger.error("Could not fetch symbol content: ", err);
+        });
+    }
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  useEffect(() => {
+    fetchContent();
+  }, []);
+
+  useEffect(() => {
+    fetchContent();
+  }, [props.symbol]);
+
+  return (
+    <div {...props.attributes} className={className}>
+      <RenderContent
+        apiVersion={builderContext.apiVersion}
+        apiKey={builderContext.apiKey!}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...contentToUse?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={contentToUse}
+      />
+    </div>
+  );
+}
+
+export default Symbol;

package/packages/react/src/blocks/text/component-info.ts

@@ -0,0 +1,24 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Text',
+  static: true,
+
+  image:
+    'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+  inputs: [
+    {
+      name: 'text',
+      type: 'html',
+      required: true,
+      autoFocus: true,
+      bubble: true,
+      defaultValue: 'Enter some text...',
+    },
+  ],
+  defaultStyles: {
+    lineHeight: 'normal',
+    height: 'auto',
+    textAlign: 'center',
+  },
+};

package/packages/react/src/blocks/text/text.tsx

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+
+export interface TextProps {
+  text: string;
+}
+
+function Text(props: TextProps) {
+  return (
+    <span
+      className="builder-text"
+      dangerouslySetInnerHTML={{ __html: props.text }}
+      style={{
+        outline: "none",
+      }}
+    />
+  );
+}
+
+export default Text;

package/packages/react/src/blocks/textarea/component-info.ts

@@ -0,0 +1,48 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:TextArea',
+
+  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,
+};

package/packages/react/src/blocks/textarea/textarea.tsx

@@ -0,0 +1,24 @@
+"use client";
+import * as React from "react";
+
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
+}
+
+export default Textarea;

package/packages/react/src/blocks/util.ts

@@ -0,0 +1,18 @@
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const serializeFn = (fnValue: Function) => {
+  const fnStr = fnValue.toString().trim();
+
+  // we need to account for a few different fn syntaxes:
+  // 1. `function name(args) => {code}`
+  // 2. `name(args) => {code}`
+  // 3. `(args) => {}`
+  const appendFunction =
+    !fnStr.startsWith('function') && !fnStr.startsWith('(');
+
+  return `return (${
+    appendFunction ? 'function ' : ''
+  }${fnStr}).apply(this, arguments)`;
+};

package/packages/react/src/blocks/video/component-info.ts

@@ -0,0 +1,109 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Video',
+  canHaveChildren: 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,
+    },
+  ],
+};

package/packages/react/src/blocks/video/video.tsx

@@ -0,0 +1,84 @@
+"use client";
+import * as React from "react";
+
+export interface VideoProps {
+  attributes?: any;
+  video?: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  aspectRatio?: number;
+  width?: number;
+  height?: number;
+  fit?: "contain" | "cover" | "fill";
+  position?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+  posterImage?: string;
+  lazyLoad?: boolean;
+}
+
+function Video(props: VideoProps) {
+  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}
+    />
+  );
+}
+
+export default Video;

package/packages/react/src/components/render-block/block-styles.tsx

@@ -0,0 +1,98 @@
+"use client";
+import * as React from "react";
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+};
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../constants/device-sizes.js";
+import { TARGET } from "../../constants/target.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { createCssClass } from "../../helpers/css.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import RenderInlinedStyles from "../render-inlined-styles";
+
+function BlockStyles(props: BlockStylesProps) {
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true,
+    });
+  }
+
+  function canShowBlock() {
+    // only render styles for blocks that are visible
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+
+    return 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;
+
+    if (!className) {
+      return "";
+    }
+
+    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() && canShowBlock() ? (
+        <>
+          <RenderInlinedStyles styles={css()} />
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default BlockStyles;

package/packages/react/src/components/render-block/render-block.helpers.ts

@@ -0,0 +1,138 @@
+import type {
+  BuilderContextInterface,
+  BuilderRenderState,
+} from '../../context/types';
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+export const isEmptyHtmlElement = (tagName: unknown) => {
+  return (
+    typeof tagName === 'string' &&
+    EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
+  );
+};
+
+export const getComponent = ({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  const componentName = getProcessedBlock({
+    block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false,
+  }).component?.name;
+
+  if (!componentName) {
+    return null;
+  }
+
+  const ref = 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;
+  }
+};
+
+export const getRepeatItemData = ({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): RepeatData[] | undefined => {
+  /**
+   * we don't use `state.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 } = block;
+
+  if (!repeat?.collection) {
+    return undefined;
+  }
+
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    context: 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<RepeatData>((item, index) => ({
+    context: {
+      ...context,
+      state: {
+        ...context.state,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index,
+      },
+    },
+    block: blockWithoutRepeat,
+  }));
+
+  return repeatArray;
+};
+
+export const getProxyState = (
+  context: BuilderContextInterface
+): BuilderContextInterface['state'] => {
+  if (typeof Proxy === 'undefined') {
+    console.error(
+      'no Proxy available in this environment, cannot proxy state.'
+    );
+    return context.state;
+  }
+
+  const useState = new Proxy(context.state, {
+    set: (obj, prop: keyof BuilderRenderState, value) => {
+      // set the value on the state object, so that the event handler instantly gets the update.
+      obj[prop] = value;
+
+      // set the value in the context, so that the rest of the app gets the update.
+      context.setState?.(obj);
+      return true;
+    },
+  });
+  return useState;
+};