@builder.io/sdk-react-nextjs 0.4.5

package/README.md

@@ -0,0 +1,80 @@
+# Builder.io React NextJS SDK (BETA)
+
+This is the Builder NextJS SDK, `@builder.io/sdk-react-nextjs`. It is intended to be used _only_ with NextJS's app directory, and has hard dependencies on NextJS-specific functionality that only works in the app directory.
+
+If you are using NextJS's pages directory, use the [React gen2 SDK](../react/) in Beta, or the stable React gen1 SDK [here](../../../react/) (i.e. `builder.io/react`).
+
+## API Reference
+
+To use the SDK, you need to:
+
+- fetch the builder data using `getContent`: you can see how to use it here https://www.builder.io/c/docs/content-api, and how it differs from the React V1 SDK's `builder.get()` function.
+
+- pass that data to the `RenderContent` component, along with the following properties:
+
+```ts
+type RenderContentProps = {
+  content?: Nullable<BuilderContent>;
+  model?: string;
+  data?: { [key: string]: any };
+  context?: BuilderRenderContext;
+  apiKey: string;
+  apiVersion?: ApiVersion;
+  customComponents?: RegisteredComponent[];
+  canTrack?: boolean;
+  locale?: string;
+  includeRefs?: boolean;
+};
+```
+
+Here is a simplified example showing how you would use both. This needs to be created created with the name `app/[[...slug]]/page.tsx`, so it catches all routes:
+
+```tsx
+import {
+  RenderContent,
+  getBuilderSearchParams,
+  getContent,
+} from '@builder.io/sdk-react-nextjs';
+
+interface MyPageProps {
+  params: {
+    slug: string[];
+  };
+  searchParams: Record<string, string>;
+}
+
+const apiKey = 'YOUR_API_KEY_HERE';
+
+export default async function Page(props: MyPageProps) {
+  const urlPath = '/' + (props.params?.slug?.join('/') || '');
+
+  const content = await getContent({
+    model: 'page',
+    apiKey,
+    options: getBuilderSearchParams(props.searchParams),
+    userAttributes: { urlPath },
+  });
+
+  return <RenderContent content={content} model="page" apiKey={apiKey} />;
+}
+```
+
+Look at the [examples](#examples) for more information.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-react-nextjs
+```
+
+## Examples
+
+- [Next.js SDK](../../../../examples/next-js-sdk-gen-2-experimental-app-directory)

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

@@ -0,0 +1,11 @@
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+}
+declare function Button(props: ButtonProps): JSX.Element;
+export default Button;

package/dist/blocks/button/button.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "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(React.Fragment, null,
+            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-533f77e6" }, props.text))),
+        React.createElement("style", null, `.button-533f77e6 {
+  all: unset;
+}`)));
+}
+export default Button;

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

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

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

@@ -0,0 +1,34 @@
+export const componentInfo = {
+    name: 'Core:Button',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+    defaultStyles: {
+        // TODO: make min width more intuitive and set one
+        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
+};

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

@@ -0,0 +1,16 @@
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
+declare function Columns(props: PropsWithBuilderData<ColumnProps>): JSX.Element;
+export default Columns;

package/dist/blocks/columns/columns.js

@@ -0,0 +1,119 @@
+import * as React from "react";
+import Blocks from "../../components/blocks/blocks.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import InlinedStyles from "../../components/inlined-styles.js";
+import { TARGET } from "../../constants/target.js";
+function Columns(props) {
+    const gutterSize = typeof props.space === "number" ? props.space || 0 : 20;
+    const cols = props.columns || [];
+    const stackAt = props.stackColumnsAt || "tablet";
+    const getWidth = function getWidth(index) {
+        return cols[index]?.width || 100 / cols.length;
+    };
+    const getColumnCssWidth = function getColumnCssWidth(index) {
+        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+    };
+    const getTabletStyle = function getTabletStyle({ stackedStyle, desktopStyle, }) {
+        return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    };
+    const getMobileStyle = function getMobileStyle({ stackedStyle, desktopStyle, }) {
+        return stackAt === "never" ? desktopStyle : stackedStyle;
+    };
+    const flexDir = props.stackColumnsAt === "never"
+        ? "row"
+        : props.reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column";
+    const columnsCssVars = function columnsCssVars() {
+        return {
+            "--flex-dir": flexDir,
+            "--flex-dir-tablet": getTabletStyle({
+                stackedStyle: flexDir,
+                desktopStyle: "row",
+            }),
+        };
+    };
+    const columnCssVars = function columnCssVars(index) {
+        const gutter = index === 0 ? 0 : gutterSize;
+        if (TARGET === "reactNative") {
+            return {
+                marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
+            };
+        }
+        const width = getColumnCssWidth(index);
+        const gutterPixels = `${gutter}px`;
+        const mobileWidth = "100%";
+        const mobileMarginLeft = 0;
+        const marginLeftKey = "marginLeft";
+        return {
+            width,
+            [marginLeftKey]: 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,
+            }),
+        };
+    };
+    const getWidthForBreakpointSize = function getWidthForBreakpointSize(size) {
+        const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
+        return breakpointSizes[size].max;
+    };
+    const columnsStyles = 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;
+          }
+        },
+      `;
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
+                " div-71b923fc", style: columnsCssVars() },
+            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-71b923fc-2", style: columnCssVars(index), key: index },
+                React.createElement(Blocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+                        flexGrow: "1",
+                    }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
+        React.createElement("style", null, `.div-71b923fc {
+  display: flex;
+  line-height: normal;
+}.div-71b923fc-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`)));
+}
+export default Columns;

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

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

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

@@ -0,0 +1,219 @@
+export const componentInfo = {
+    // TODO: ways to statically preprocess JSON for references, functions, etc
+    name: 'Columns',
+    isRSC: true,
+    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: (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
+        }]
+};

package/dist/blocks/custom-code/component-info.d.ts

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

package/dist/blocks/custom-code/component-info.js

@@ -0,0 +1,23 @@
+export const componentInfo = {
+    name: 'Custom Code',
+    static: true,
+    requiredPermissions: ['editCode'],
+    inputs: [{
+            name: 'code',
+            type: 'html',
+            required: true,
+            defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+            code: true
+        }, {
+            name: 'replaceNodes',
+            type: 'boolean',
+            helperText: 'Preserve server rendered dom nodes',
+            advanced: true
+        }, {
+            name: 'scriptsClientOnly',
+            type: 'boolean',
+            defaultValue: false,
+            helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+            advanced: true
+        }]
+};

package/dist/blocks/custom-code/custom-code.d.ts

@@ -0,0 +1,6 @@
+export interface CustomCodeProps {
+    code: string;
+    replaceNodes?: boolean;
+}
+declare function CustomCode(props: CustomCodeProps): JSX.Element;
+export default CustomCode;

package/dist/blocks/custom-code/custom-code.js

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+function CustomCode(props) {
+    const elem = useRef(null);
+    const [scriptsInserted, setScriptsInserted] = useState(() => []);
+    const [scriptsRun, setScriptsRun] = useState(() => []);
+    function findAndRunScripts() {
+        // TODO: Move this function to standalone one in '@builder.io/utils'
+        if (elem.current &&
+            elem.current.getElementsByTagName &&
+            typeof window !== "undefined") {
+            const scripts = elem.current.getElementsByTagName("script");
+            for (let i = 0; i < scripts.length; i++) {
+                const script = scripts[i];
+                if (script.src) {
+                    if (scriptsInserted.includes(script.src)) {
+                        continue;
+                    }
+                    scriptsInserted.push(script.src);
+                    const newScript = document.createElement("script");
+                    newScript.async = true;
+                    newScript.src = script.src;
+                    document.head.appendChild(newScript);
+                }
+                else if (!script.type ||
+                    [
+                        "text/javascript",
+                        "application/javascript",
+                        "application/ecmascript",
+                    ].includes(script.type)) {
+                    if (scriptsRun.includes(script.innerText)) {
+                        continue;
+                    }
+                    try {
+                        scriptsRun.push(script.innerText);
+                        new Function(script.innerText)();
+                    }
+                    catch (error) {
+                        console.warn("`CustomCode`: Error running script:", error);
+                    }
+                }
+            }
+        }
+    }
+    useEffect(() => {
+        findAndRunScripts();
+    }, []);
+    return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
+}
+export default CustomCode;

package/dist/blocks/embed/component-info.d.ts

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

package/dist/blocks/embed/component-info.js

@@ -0,0 +1,38 @@
+export const componentInfo = {
+    name: 'Embed',
+    static: true,
+    inputs: [{
+            name: 'url',
+            type: 'url',
+            required: true,
+            defaultValue: '',
+            helperText: 'e.g. enter a youtube url, google map, etc',
+            onChange: (options) => {
+                const url = options.get('url');
+                if (url) {
+                    options.set('content', 'Loading...'); // TODO: get this out of here!
+                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+                        if (options.get('url') === url) {
+                            if (data.html) {
+                                options.set('content', data.html);
+                            }
+                            else {
+                                options.set('content', 'Invalid url, please try another');
+                            }
+                        }
+                    }).catch(_err => {
+                        options.set('content', 'There was an error embedding this URL, please try again or another URL');
+                    });
+                }
+                else {
+                    options.delete('content');
+                }
+            }
+        }, {
+            name: 'content',
+            type: 'html',
+            defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+            hideFromUI: true
+        }]
+};

package/dist/blocks/embed/embed.d.ts

@@ -0,0 +1,5 @@
+export interface EmbedProps {
+    content: string;
+}
+declare function Embed(props: EmbedProps): JSX.Element;
+export default Embed;