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

package/packages/react/src/blocks/button/button.tsx

@@ -0,0 +1,45 @@
+"use client";
+import * as React from "react";
+
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+  return (
+    <>
+      {props.link ? (
+        <>
+          <a
+            role="button"
+            {...props.attributes}
+            href={props.link}
+            target={props.openLinkInNewTab ? "_blank" : undefined}
+          >
+            {props.text}
+          </a>
+        </>
+      ) : (
+        <>
+          <button
+            className={
+              /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+              props.attributes.class + " button-2b50f164"
+            }
+            {...props.attributes}
+          >
+            {props.text}
+          </button>
+        </>
+      )}
+      <style>{`.button-2b50f164 {
+  all: unset;
+}`}</style>
+    </>
+  );
+}
+
+export default Button;

package/packages/react/src/blocks/button/component-info.ts

@@ -0,0 +1,42 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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/packages/react/src/blocks/columns/columns.tsx

@@ -0,0 +1,211 @@
+"use client";
+import * as React from "react";
+import { useState, useContext } from "react";
+
+type Column = {
+  blocks: BuilderBlock[];
+  width?: number;
+};
+type CSSVal = string | number;
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps {
+  columns?: Column[];
+  builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
+
+  space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+  reverseColumnsWhenStacked?: boolean;
+}
+
+import RenderBlocks from "../../components/render-blocks";
+import type { BuilderBlock } from "../../types/builder-block";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import type { SizeName } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context.js";
+import type { Dictionary } from "../../types/typescript";
+
+function Columns(props: ColumnProps) {
+  const [gutterSize, setGutterSize] = useState(() =>
+    typeof props.space === "number" ? props.space || 0 : 20
+  );
+
+  const [cols, setCols] = useState(() => props.columns || []);
+
+  const [stackAt, setStackAt] = useState(
+    () => props.stackColumnsAt || "tablet"
+  );
+
+  function getWidth(index: number) {
+    return cols[index]?.width || 100 / cols.length;
+  }
+
+  function getColumnCssWidth(index: number) {
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  function getTabletStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+  }
+
+  function getMobileStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+  }
+
+  const [flexDir, setFlexDir] = useState(() =>
+    props.stackColumnsAt === "never"
+      ? "row"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column"
+  );
+
+  function columnsCssVars() {
+    if (TARGET === "reactNative") {
+      return {
+        flexDirection: flexDir,
+      } as Dictionary<string>;
+    }
+
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": getTabletStyle({
+        stackedStyle: flexDir,
+        desktopStyle: "row",
+      }),
+    } as Dictionary<string>;
+  }
+
+  function columnCssVars(index: number) {
+    const gutter = index === 0 ? 0 : gutterSize;
+
+    if (TARGET === "reactNative") {
+      return {
+        marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
+      } as any as Dictionary<string>;
+    }
+
+    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,
+      }),
+    } as any as Dictionary<string>;
+  }
+
+  function getWidthForBreakpointSize(size: SizeName) {
+    const breakpointSizes = 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 = useContext(BuilderContext);
+
+  return (
+    <>
+      <div
+        className={
+          `builder-columns ${props.builderBlock.id}-breakpoints` +
+          " div-66c71955"
+        }
+        style={columnsCssVars()}
+      >
+        {TARGET !== "reactNative" ? (
+          <>
+            <RenderInlinedStyles styles={columnsStyles()} />
+          </>
+        ) : null}
+
+        {props.columns?.map((column, index) => (
+          <div
+            className="builder-column div-66c71955-2"
+            style={columnCssVars(index)}
+            key={index}
+          >
+            <RenderBlocks
+              blocks={column.blocks}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+              styleProp={{
+                flexGrow: "1",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      <style>{`.div-66c71955 {
+  display: flex;
+  line-height: normal;
+}.div-66c71955-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`}</style>
+    </>
+  );
+}
+
+export default Columns;

package/packages/react/src/blocks/columns/component-info.ts

@@ -0,0 +1,254 @@
+import type { ComponentInfo } from '../../types/components';
+import { serializeFn } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  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: serializeFn((options: Map<string, any>) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete('width');
+          });
+        }
+
+        const columns: Array<Map<string, any>> = 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/packages/react/src/blocks/custom-code/component-info.ts

@@ -0,0 +1,31 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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/packages/react/src/blocks/custom-code/custom-code.tsx

@@ -0,0 +1,76 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+  const elem = useRef<HTMLDivElement>(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 (
+    <div
+      ref={elem}
+      className={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}
+
+export default CustomCode;