@builder.io/sdk-react 0.2.2 → 0.2.3-1

package/dist/react/cjs/blocks/BaseText.d.ts

@@ -0,0 +1,2 @@
+export default BaseText;
+declare function BaseText(props: any): JSX.Element;

package/dist/react/cjs/blocks/BaseText.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const builder_context_js_1 = require("../context/builder.context.js");
+function BaseText(props) {
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
+    return React.createElement("span", { style: builderContext.inheritedStyles }, props.text);
+}
+exports.default = BaseText;

package/dist/react/cjs/blocks/button/button.d.ts

@@ -0,0 +1,2 @@
+export default Button;
+declare function Button(props: any): JSX.Element;

package/dist/react/cjs/blocks/button/button.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+function Button(props) {
+    return (React.createElement(React.Fragment, null,
+        props.link ? (React.createElement(React.Fragment, null,
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: 
+            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+            props.attributes.class + " button-5050ef15", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-5050ef15 {
+all: unset;
+}`)));
+}
+exports.default = Button;

package/dist/react/cjs/blocks/button/component-info.d.ts

@@ -0,0 +1,38 @@
+export namespace componentInfo {
+    export const name: string;
+    export const image: string;
+    export namespace defaultStyles {
+        const appearance: string;
+        const paddingTop: string;
+        const paddingBottom: string;
+        const paddingLeft: string;
+        const paddingRight: string;
+        const backgroundColor: string;
+        const color: string;
+        const borderRadius: string;
+        const textAlign: string;
+        const cursor: string;
+    }
+    export const inputs: ({
+        name: string;
+        type: string;
+        defaultValue: string;
+        bubble: boolean;
+        friendlyName?: undefined;
+    } | {
+        name: string;
+        type: string;
+        bubble: boolean;
+        defaultValue?: undefined;
+        friendlyName?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: boolean;
+        friendlyName: string;
+        bubble?: undefined;
+    })[];
+    const _static: boolean;
+    export { _static as static };
+    export const noWrap: boolean;
+}

package/dist/react/cjs/blocks/button/component-info.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Core:Button",
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+    defaultStyles: {
+        appearance: "none",
+        paddingTop: "15px",
+        paddingBottom: "15px",
+        paddingLeft: "25px",
+        paddingRight: "25px",
+        backgroundColor: "#000000",
+        color: "white",
+        borderRadius: "4px",
+        textAlign: "center",
+        cursor: "pointer"
+    },
+    inputs: [
+        {
+            name: "text",
+            type: "text",
+            defaultValue: "Click me!",
+            bubble: true
+        },
+        {
+            name: "link",
+            type: "url",
+            bubble: true
+        },
+        {
+            name: "openLinkInNewTab",
+            type: "boolean",
+            defaultValue: false,
+            friendlyName: "Open link in new tab"
+        }
+    ],
+    static: true,
+    noWrap: true
+};
+exports.componentInfo = componentInfo;

package/dist/react/cjs/blocks/columns/columns.d.ts

@@ -0,0 +1,2 @@
+export default Columns;
+declare function Columns(props: any): JSX.Element;

package/dist/react/cjs/blocks/columns/columns.js

@@ -0,0 +1,133 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const render_blocks_1 = require("../../components/render-blocks");
+const device_sizes_1 = require("../../constants/device-sizes");
+const render_inlined_styles_1 = require("../../components/render-inlined-styles");
+const target_js_1 = require("../../constants/target.js");
+const builder_context_js_1 = require("../../context/builder.context.js");
+function Columns(props) {
+    const [gutterSize, setGutterSize] = (0, react_1.useState)(() => typeof props.space === "number" ? props.space || 0 : 20);
+    const [cols, setCols] = (0, react_1.useState)(() => props.columns || []);
+    const [stackAt, setStackAt] = (0, react_1.useState)(() => props.stackColumnsAt || "tablet");
+    function getWidth(index) {
+        return cols[index]?.width || 100 / cols.length;
+    }
+    function getColumnCssWidth(index) {
+        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+    }
+    function getTabletStyle({ stackedStyle, desktopStyle }) {
+        return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    }
+    function getMobileStyle({ stackedStyle, desktopStyle }) {
+        return stackAt === "never" ? desktopStyle : stackedStyle;
+    }
+    const [flexDir, setFlexDir] = (0, react_1.useState)(() => props.stackColumnsAt === "never"
+        ? "row"
+        : props.reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column");
+    function columnsCssVars() {
+        if (target_js_1.TARGET === "reactNative") {
+            return {
+                flexDirection: flexDir,
+            };
+        }
+        return {
+            "--flex-dir": flexDir,
+            "--flex-dir-tablet": getTabletStyle({
+                stackedStyle: flexDir,
+                desktopStyle: "row",
+            }),
+        };
+    }
+    function columnCssVars(index) {
+        const gutter = index === 0 ? 0 : gutterSize;
+        if (target_js_1.TARGET === "reactNative") {
+            return {
+                marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
+            };
+        }
+        const width = getColumnCssWidth(index);
+        const gutterPixels = `${gutterSize}px`;
+        const mobileWidth = "100%";
+        const mobileMarginLeft = 0;
+        return {
+            width,
+            "margin-left": gutterPixels,
+            "--column-width-mobile": getMobileStyle({
+                stackedStyle: mobileWidth,
+                desktopStyle: width,
+            }),
+            "--column-margin-left-mobile": getMobileStyle({
+                stackedStyle: mobileMarginLeft,
+                desktopStyle: gutterPixels,
+            }),
+            "--column-width-tablet": getTabletStyle({
+                stackedStyle: mobileWidth,
+                desktopStyle: width,
+            }),
+            "--column-margin-left-tablet": getTabletStyle({
+                stackedStyle: mobileMarginLeft,
+                desktopStyle: gutterPixels,
+            }),
+        };
+    }
+    function getWidthForBreakpointSize(size) {
+        const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(builderContext.content?.meta?.breakpoints || {});
+        return breakpointSizes[size].max;
+    }
+    function columnsStyles() {
+        return `
+    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        flex-direction: var(--flex-dir-tablet);
+        align-items: stretch;
+      }
+
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        width: var(--column-width-tablet) !important;
+        margin-left: var(--column-margin-left-tablet) !important;
+      }
+    }
+
+    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        flex-direction: var(--flex-dir);
+        align-items: stretch;
+      }
+
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        width: var(--column-width-mobile) !important;
+        margin-left: var(--column-margin-left-mobile) !important;
+      }
+    },
+  `;
+    }
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
+                " div-f0aded1c", style: columnsCssVars(), dataSet: {
+                "builder-block-name": "builder-columns",
+            } },
+            target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(render_inlined_styles_1.default, { styles: columnsStyles() }))) : null,
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-f0aded1c-2", style: columnCssVars(index), dataSet: {
+                    "builder-block-name": "builder-column",
+                }, key: index },
+                React.createElement(render_blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+                        flexGrow: "1",
+                    } }))))),
+        React.createElement("style", null, `.div-f0aded1c {
+display: flex;
+line-height: normal;
+}.div-f0aded1c-2 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`)));
+}
+exports.default = Columns;

package/dist/react/cjs/blocks/columns/component-info.d.ts

@@ -0,0 +1,176 @@
+export namespace componentInfo {
+    const name: string;
+    const inputs: ({
+        name: string;
+        type: string;
+        broadcast: boolean;
+        subFields: ({
+            name: string;
+            type: string;
+            hideFromUI: boolean;
+            defaultValue: ({
+                "@type": string;
+                responsiveStyles: {
+                    large: {
+                        display: string;
+                        flexDirection: string;
+                        alignItems: string;
+                        flexShrink: string;
+                        position: string;
+                        marginTop: string;
+                        textAlign: string;
+                        lineHeight: string;
+                        height: string;
+                        minHeight: string;
+                        minWidth: string;
+                        overflow: string;
+                    };
+                };
+                component: {
+                    name: string;
+                    options: {
+                        image: string;
+                        backgroundPosition: string;
+                        backgroundSize: string;
+                        aspectRatio: number;
+                        text?: undefined;
+                    };
+                };
+            } | {
+                "@type": string;
+                responsiveStyles: {
+                    large: {
+                        display: string;
+                        flexDirection: string;
+                        alignItems: string;
+                        flexShrink: string;
+                        position: string;
+                        marginTop: string;
+                        textAlign: string;
+                        lineHeight: string;
+                        height: string;
+                        minHeight?: undefined;
+                        minWidth?: undefined;
+                        overflow?: undefined;
+                    };
+                };
+                component: {
+                    name: string;
+                    options: {
+                        text: string;
+                        image?: undefined;
+                        backgroundPosition?: undefined;
+                        backgroundSize?: undefined;
+                        aspectRatio?: undefined;
+                    };
+                };
+            })[];
+            helperText?: undefined;
+        } | {
+            name: string;
+            type: string;
+            hideFromUI: boolean;
+            helperText: string;
+            defaultValue?: undefined;
+        } | {
+            name: string;
+            type: string;
+            helperText: string;
+            hideFromUI?: undefined;
+            defaultValue?: undefined;
+        })[];
+        defaultValue: {
+            blocks: ({
+                "@type": string;
+                responsiveStyles: {
+                    large: {
+                        display: string;
+                        flexDirection: string;
+                        alignItems: string;
+                        flexShrink: string;
+                        position: string;
+                        marginTop: string;
+                        textAlign: string;
+                        lineHeight: string;
+                        height: string;
+                        minHeight: string;
+                        minWidth: string;
+                        overflow: string;
+                    };
+                };
+                component: {
+                    name: string;
+                    options: {
+                        image: string;
+                        backgroundPosition: string;
+                        backgroundSize: string;
+                        aspectRatio: number;
+                        text?: undefined;
+                    };
+                };
+            } | {
+                "@type": string;
+                responsiveStyles: {
+                    large: {
+                        display: string;
+                        flexDirection: string;
+                        alignItems: string;
+                        flexShrink: string;
+                        position: string;
+                        marginTop: string;
+                        textAlign: string;
+                        lineHeight: string;
+                        height: string;
+                        minHeight?: undefined;
+                        minWidth?: undefined;
+                        overflow?: undefined;
+                    };
+                };
+                component: {
+                    name: string;
+                    options: {
+                        text: string;
+                        image?: undefined;
+                        backgroundPosition?: undefined;
+                        backgroundSize?: undefined;
+                        aspectRatio?: undefined;
+                    };
+                };
+            })[];
+        }[];
+        onChange: string;
+        helperText?: undefined;
+        advanced?: undefined;
+        enum?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: number;
+        helperText: string;
+        advanced: boolean;
+        broadcast?: undefined;
+        subFields?: undefined;
+        onChange?: undefined;
+        enum?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: string;
+        helperText: string;
+        enum: string[];
+        advanced: boolean;
+        broadcast?: undefined;
+        subFields?: undefined;
+        onChange?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: boolean;
+        helperText: string;
+        advanced: boolean;
+        broadcast?: undefined;
+        subFields?: undefined;
+        onChange?: undefined;
+        enum?: undefined;
+    })[];
+}

package/dist/react/cjs/blocks/columns/component-info.js

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const util_js_1 = require("../util.js");
+const componentInfo = {
+    name: "Columns",
+    inputs: [
+        {
+            name: "columns",
+            type: "array",
+            broadcast: true,
+            subFields: [
+                {
+                    name: "blocks",
+                    type: "array",
+                    hideFromUI: true,
+                    defaultValue: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    name: "width",
+                    type: "number",
+                    hideFromUI: true,
+                    helperText: "Width %, e.g. set to 50 to fill half of the space"
+                },
+                {
+                    name: "link",
+                    type: "url",
+                    helperText: "Optionally set a url that clicking this column will link to"
+                }
+            ],
+            defaultValue: [
+                {
+                    blocks: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    blocks: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                }
+            ],
+            onChange: (0, util_js_1.serializeFn)((options) => {
+                function clearWidths() {
+                    columns.forEach((col) => {
+                        col.delete("width");
+                    });
+                }
+                const columns = options.get("columns");
+                if (Array.isArray(columns)) {
+                    const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+                    if (containsColumnWithWidth) {
+                        const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+                        if (containsColumnWithoutWidth) {
+                            clearWidths();
+                        }
+                        else {
+                            const sumWidths = columns.reduce((memo, col) => {
+                                return memo + col.get("width");
+                            }, 0);
+                            const widthsDontAddUp = sumWidths !== 100;
+                            if (widthsDontAddUp) {
+                                clearWidths();
+                            }
+                        }
+                    }
+                }
+            })
+        },
+        {
+            name: "space",
+            type: "number",
+            defaultValue: 20,
+            helperText: "Size of gap between columns",
+            advanced: true
+        },
+        {
+            name: "stackColumnsAt",
+            type: "string",
+            defaultValue: "tablet",
+            helperText: "Convert horizontal columns to vertical at what device size",
+            enum: ["tablet", "mobile", "never"],
+            advanced: true
+        },
+        {
+            name: "reverseColumnsWhenStacked",
+            type: "boolean",
+            defaultValue: false,
+            helperText: "When stacking columns for mobile devices, reverse the ordering",
+            advanced: true
+        }
+    ]
+};
+exports.componentInfo = componentInfo;