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

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

@@ -0,0 +1,216 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+export type RenderBlockProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../context/types.js";
+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 { getProcessedBlock } from "../../functions/get-processed-block.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import BlockStyles from "./block-styles";
+import {
+  getComponent,
+  getProxyState,
+  getRepeatItemData,
+  isEmptyHtmlElement,
+} from "./render-block.helpers.js";
+import type { RenderComponentProps } from "./render-component";
+import RenderRepeatedBlock from "./render-repeated-block";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponent from "./render-component";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+
+function RenderBlock(props: RenderBlockProps) {
+  const [component, setComponent] = useState(() =>
+    getComponent({
+      block: props.block,
+      context: props.context,
+    })
+  );
+
+  const [repeatItemData, setRepeatItemData] = useState(() =>
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
+
+  function useBlock() {
+    return repeatItemData
+      ? props.block
+      : getProcessedBlock({
+          block: props.block,
+          state: props.context.state,
+          context: props.context.context,
+          shouldEvaluateBindings: true,
+        });
+  }
+
+  const [tag, setTag] = useState(() => props.block.tagName || "div");
+
+  function canShowBlock() {
+    if ("hide" in useBlock()) {
+      return !useBlock().hide;
+    }
+
+    if ("show" in useBlock()) {
+      return useBlock().show;
+    }
+
+    return true;
+  }
+
+  const [proxyState, setProxyState] = useState(() =>
+    getProxyState(props.context)
+  );
+
+  function actions() {
+    return getBlockActions({
+      block: useBlock(),
+      state: TARGET === "qwik" ? props.context.state : proxyState,
+      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 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 ? useBlock().children ?? [] : [];
+  }
+
+  function childrenContext() {
+    const getInheritedTextStyles = () => {
+      if (TARGET !== "reactNative") {
+        return {};
+      }
+
+      return extractTextStyles(
+        getReactNativeBlockStyles({
+          block: useBlock(),
+          context: props.context,
+          blockStyles: attributes().style,
+        })
+      );
+    };
+
+    return {
+      apiKey: props.context.apiKey,
+      apiVersion: props.context.apiVersion,
+      state: props.context.state,
+      content: props.context.content,
+      context: props.context.context,
+      setState: props.context.setState,
+      registeredComponents: props.context.registeredComponents,
+      inheritedStyles: getInheritedTextStyles(),
+    };
+  }
+
+  function renderComponentProps() {
+    return {
+      blockChildren: useBlock().children ?? [],
+      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.
+         */
+        ...(!component?.noWrap
+          ? {}
+          : {
+              attributes: { ...attributes(), ...actions() },
+            }),
+      },
+      context: childrenContext(),
+    };
+  }
+
+  const TagRef = tag;
+
+  return (
+    <>
+      {canShowBlock() ? (
+        <>
+          {!component?.noWrap ? (
+            <>
+              {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()}>
+                    <RenderComponent {...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}
+            </>
+          ) : (
+            <>
+              <RenderComponent {...renderComponentProps()} />
+            </>
+          )}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default RenderBlock;

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

@@ -0,0 +1,52 @@
+"use client";
+import * as React from "react";
+
+type ComponentOptions = {
+  [index: string]: any;
+  attributes?: {
+    [index: string]: any;
+  };
+};
+export interface RenderComponentProps {
+  componentRef: any;
+  componentOptions: ComponentOptions;
+  blockChildren: BuilderBlock[];
+  context: BuilderContextInterface;
+}
+
+import type { BuilderBlock } from "../../types/builder-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
+import type { BuilderContextInterface } from "../../context/types.js";
+
+function RenderComponent(props: RenderComponentProps) {
+  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}
+    </>
+  );
+}
+
+export default RenderComponent;

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

@@ -0,0 +1,43 @@
+"use client";
+import * as React from "react";
+import { useContext } from "react";
+
+type Props = {
+  block: BuilderBlock;
+  repeatContext: BuilderContextInterface;
+};
+/**
+ * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
+ *
+ * ```vue
+ * <template>
+ *  <slot></slot>
+ * </template>
+ * ```
+ */
+
+import BuilderContext from "../../context/builder.context.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block";
+import RenderBlock from "./render-block";
+
+function RenderRepeatedBlock(props: Props) {
+  return (
+    <BuilderContext.Provider
+      value={{
+        content: props.repeatContext.content,
+        state: props.repeatContext.state,
+        setState: props.repeatContext.setState,
+        context: props.repeatContext.context,
+        apiKey: props.repeatContext.apiKey,
+        registeredComponents: props.repeatContext.registeredComponents,
+        inheritedStyles: props.repeatContext.inheritedStyles,
+        apiVersion: props.repeatContext.apiVersion,
+      }}
+    >
+      <RenderBlock block={props.block} context={props.repeatContext} />
+    </BuilderContext.Provider>
+  );
+}
+
+export default RenderRepeatedBlock;

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

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+
+export interface RepeatData {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}

package/packages/react/src/components/render-blocks.tsx

@@ -0,0 +1,97 @@
+"use client";
+import * as React from "react";
+import { useContext } from "react";
+
+export type RenderBlockProps = {
+  blocks?: BuilderBlock[];
+  parent?: string;
+  path?: string;
+  styleProp?: Record<string, any>;
+};
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import type { BuilderBlock } from "../types/builder-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
+
+function RenderBlocks(props: RenderBlockProps) {
+  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,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <>
+      <div
+        className={className() + " div-251582f2"}
+        builder-path={props.path}
+        builder-parent-id={props.parent}
+        style={props.styleProp}
+        onClick={(event) => onClick()}
+        onMouseEnter={(event) => onMouseEnter()}
+      >
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+                context={builderContext}
+              />
+            ))}
+          </>
+        ) : null}
+
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={builderContext}
+              />
+            ))}
+          </>
+        ) : null}
+      </div>
+      <style>{`.div-251582f2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`}</style>
+    </>
+  );
+}
+
+export default RenderBlocks;

package/packages/react/src/components/render-content/builder-editing.tsx

@@ -0,0 +1,8 @@
+"use client";
+import * as React from "react";
+
+function BuilderEditing(props: any) {
+  return <div />;
+}
+
+export default BuilderEditing;

package/packages/react/src/components/render-content/components/render-styles.helpers.ts

@@ -0,0 +1,79 @@
+export interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+
+const getCssFromFont = (font: CustomFont) => {
+  // 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;
+};
+
+export const getFontCss = ({ customFonts }: { customFonts?: CustomFont[] }) => {
+  // TODO: flag for this
+  // if (!this.builder.allowCustomFonts) {
+  //   return '';
+  // }
+  // TODO: separate internal data from external
+  return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+};
+
+export const getCss = ({
+  cssCode,
+  contentId,
+}: {
+  cssCode?: string;
+  contentId?: string;
+}) => {
+  if (!cssCode) {
+    return '';
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+
+  // Allow using `&` in custom CSS code like @emotion
+  // E.g. `& .foobar { ... }` to scope CSS
+  // TODO: handle if '&' is within a string like `content: "&"`
+  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

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

@@ -0,0 +1,45 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+interface Props {
+  cssCode?: string;
+  customFonts?: CustomFont[];
+  contentId?: string;
+}
+
+import RenderInlinedStyles from "../../render-inlined-styles";
+import type { CustomFont } from "./render-styles.helpers";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
+
+function RenderContentStyles(props: Props) {
+  const [injectedStyles, setInjectedStyles] = useState(
+    () => `
+${getCss({
+  cssCode: props.cssCode,
+  contentId: props.contentId,
+})}
+${getFontCss({
+  customFonts: props.customFonts,
+})}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`
+  );
+
+  return <RenderInlinedStyles styles={injectedStyles} />;
+}
+
+export default RenderContentStyles;

package/packages/react/src/components/render-content/index.ts

@@ -0,0 +1 @@
+export { default } from './render-content';

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

@@ -0,0 +1,48 @@
+import type { BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { RenderContentProps } from './render-content.types';
+
+export const getContextStateInitialValue = ({
+  content,
+  data,
+  locale,
+}: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
+  const defaultValues: BuilderRenderState = {};
+
+  // set default values for content state inputs
+  content?.data?.inputs?.forEach((input) => {
+    if (
+      input.name &&
+      input.defaultValue !== undefined &&
+      content?.data?.state &&
+      content.data.state[input.name] === undefined
+    ) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+
+  const stateToUse: BuilderRenderState = {
+    ...content?.data?.state,
+    ...data,
+    ...(locale ? { locale } : {}),
+  };
+
+  return { ...defaultValues, ...stateToUse };
+};
+
+export const getContentInitialValue = ({
+  content,
+  data,
+}: Pick<RenderContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  return !content
+    ? undefined
+    : {
+        ...content,
+        data: {
+          ...content?.data,
+          ...data,
+        },
+        meta: content?.meta,
+      };
+};