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

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

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

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

@@ -1,11 +0,0 @@
-"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

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

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

@@ -1,15 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-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

@@ -1,41 +0,0 @@
-"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

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

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

@@ -1,133 +0,0 @@
-"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

@@ -1,176 +0,0 @@
-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

@@ -1,243 +0,0 @@
-"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;