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

package/dist/sdk/blocks/textarea/component-info.js

@@ -0,0 +1,43 @@
+export const 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/dist/sdk/blocks/textarea/textarea.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+}
+declare function Textarea(props: TextareaProps): JSX.Element;
+export default Textarea;

package/dist/sdk/blocks/util.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+export declare const serializeFn: (fnValue: Function) => string;

package/dist/sdk/blocks/util.js

@@ -0,0 +1,13 @@
+/**
+ * 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) => {
+    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/dist/sdk/blocks/video/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/dist/sdk/blocks/video/component-info.js

@@ -0,0 +1,102 @@
+export const 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/dist/sdk/blocks/video/video.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="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;
+}
+declare function Video(props: VideoProps): JSX.Element;
+export default Video;

package/dist/sdk/components/render-block/block-styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+declare function BlockStyles(props: BlockStylesProps): JSX.Element;
+export default BlockStyles;

package/dist/sdk/components/render-block/render-block.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type RenderBlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+declare function RenderBlock(props: RenderBlockProps): JSX.Element;
+export default RenderBlock;

package/dist/sdk/components/render-block/render-block.helpers.d.ts

@@ -0,0 +1,13 @@
+import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
+export declare const getComponent: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => import("../../context/types").RegisteredComponent;
+export declare const getRepeatItemData: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => RepeatData[] | undefined;
+export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

package/dist/sdk/components/render-block/render-block.helpers.js

@@ -0,0 +1,98 @@
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+/**
+ * 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) => {
+    return (typeof tagName === 'string' &&
+        EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase()));
+};
+export const getComponent = ({ block, context, }) => {
+    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, }) => {
+    /**
+     * 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((item, index) => ({
+        context: {
+            ...context,
+            state: {
+                ...context.state,
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index,
+            },
+        },
+        block: blockWithoutRepeat,
+    }));
+    return repeatArray;
+};
+export const getProxyState = (context) => {
+    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, 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;
+};

package/dist/sdk/components/render-block/render-block.js

@@ -0,0 +1,133 @@
+"use client";
+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 { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles";
+import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+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) {
+    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 (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
+        !isEmptyHtmlElement(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !isEmptyHtmlElement(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...attributes(), ...actions() },
+                React.createElement(RenderComponent, { ...renderComponentProps() }),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(RenderComponent, { ...renderComponentProps() }))))) : null));
+}
+export default RenderBlock;

package/dist/sdk/components/render-block/render-component.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="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 type { BuilderContextInterface } from "../../context/types.js";
+declare function RenderComponent(props: RenderComponentProps): JSX.Element;
+export default RenderComponent;

package/dist/sdk/components/render-block/render-repeated-block.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block";
+declare function RenderRepeatedBlock(props: Props): JSX.Element;
+export default RenderRepeatedBlock;

package/dist/sdk/components/render-block/render-repeated-block.js

@@ -0,0 +1,27 @@
+"use client";
+import * as React from "react";
+/**
+ * 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 RenderBlock from "./render-block";
+function RenderRepeatedBlock(props) {
+    return (React.createElement(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,
+        } },
+        React.createElement(RenderBlock, { block: props.block, context: props.repeatContext })));
+}
+export default RenderRepeatedBlock;

package/dist/sdk/components/render-block/types.d.ts

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

package/dist/sdk/components/render-blocks.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type RenderBlockProps = {
+    blocks?: BuilderBlock[];
+    parent?: string;
+    path?: string;
+    styleProp?: Record<string, any>;
+};
+import type { BuilderBlock } from "../types/builder-block.js";
+declare function RenderBlocks(props: RenderBlockProps): JSX.Element;
+export default RenderBlocks;

package/dist/sdk/components/render-blocks.js

@@ -0,0 +1,45 @@
+"use client";
+import * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
+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,
+                },
+            }, "*");
+        }
+    }
+    const builderContext = useContext(BuilderContext);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("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 ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
+            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
+        React.createElement("style", null, `.div-251582f2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`)));
+}
+export default RenderBlocks;

package/dist/sdk/components/render-content/builder-editing.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function BuilderEditing(props: any): JSX.Element;
+export default BuilderEditing;

package/dist/sdk/components/render-content/components/render-styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+    contentId?: string;
+}
+import type { CustomFont } from "./render-styles.helpers";
+declare function RenderContentStyles(props: Props): JSX.Element;
+export default RenderContentStyles;

package/dist/sdk/components/render-content/components/render-styles.helpers.d.ts

@@ -0,0 +1,15 @@
+export interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+        [key: string]: string;
+    };
+}
+export declare const getFontCss: ({ customFonts }: {
+    customFonts?: CustomFont[];
+}) => string;
+export declare const getCss: ({ cssCode, contentId, }: {
+    cssCode?: string;
+    contentId?: string;
+}) => string;