@builder.io/sdk-solid 0.0.5 → 0.0.8-0

package/src/blocks/submit-button/component-info.js

@@ -0,0 +1,28 @@
+const componentInfo = {
+  name: "Form:SubmitButton",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#3898EC",
+    color: "white",
+    borderRadius: "4px",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/submit-button/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./submit-button";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/submit-button/submit-button.jsx

@@ -0,0 +1,7 @@
+function SubmitButton(props) {
+  return <button {...props.attributes} type="submit">
+      {props.text}
+    </button>;
+}
+
+export default SubmitButton;

package/src/blocks/{submit-button.lite.tsx → submit-button/submit-button.lite.tsx}

@@ -1,7 +1,9 @@
-export default function SubmitButton(props) {
+function SubmitButton(props) {
   return (
     <button {...props.attributes} type="submit">
       {props.text}
     </button>
   );
 }
+
+export default SubmitButton;

package/src/blocks/symbol/component-info.js

@@ -0,0 +1,42 @@
+const componentInfo = {
+  name: "Symbol",
+  noWrap: true,
+  static: true,
+  inputs: [
+    {
+      name: "symbol",
+      type: "uiSymbol"
+    },
+    {
+      name: "dataOnly",
+      helperText: "Make this a data symbol that doesn't display any UI",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "inheritState",
+      helperText: "Inherit the parent component state and data",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true
+    },
+    {
+      name: "renderToLiquid",
+      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "useChildren",
+      hideFromUI: true,
+      type: "boolean"
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/symbol/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./symbol";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/symbol/symbol.jsx

@@ -0,0 +1,24 @@
+import { createMutable } from "solid-js/store";
+import RenderContent from "../../components/render-content/render-content";
+import BuilderContext from "../../context/builder.context";
+
+function Symbol(props) {
+  const state = createMutable({
+    className: "builder-symbol",
+    content: null
+  });
+  const builderContext = useContext(BuilderContext);
+  onMount(() => {
+    state.content = props.symbol?.content;
+  });
+  return <div class={state.className} {...props.attributes} dataSet={{
+    class: state.className
+  }}>
+      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
+      ...builderContext.state,
+      ...props.symbol?.state.content?.data?.state
+    }} model={props.symbol?.model} content={state.content}></RenderContent>
+    </div>;
+}
+
+export default Symbol;

package/src/blocks/{symbol.lite.tsx → symbol/symbol.lite.tsx}

@@ -1,10 +1,10 @@
 import { createMutable } from "solid-js/store";
 
-import RenderContent from "../components/render-content/render-content.lite";
-import BuilderContext from "../context/builder.context";
-import { getContent } from "../functions/get-content";
+import RenderContent from "../../components/render-content/render-content.lite";
+import BuilderContext from "../../context/builder.context";
+import { getContent } from "../../functions/get-content/index.js";
 
-export default function Symbol(props) {
+function Symbol(props) {
   const state = createMutable({ className: "builder-symbol", content: null });
 
   const builderContext = useContext(BuilderContext);
@@ -35,3 +35,5 @@ export default function Symbol(props) {
     </div>
   );
 }
+
+export default Symbol;

package/src/blocks/text/component-info.js

@@ -0,0 +1,24 @@
+const componentInfo = {
+  name: "Text",
+  static: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  inputs: [
+    {
+      name: "text",
+      type: "html",
+      required: true,
+      autoFocus: true,
+      bubble: true,
+      defaultValue: "Enter some text..."
+    }
+  ],
+  defaultStyles: {
+    lineHeight: "normal",
+    height: "auto",
+    textAlign: "center"
+  }
+};
+export {
+  componentInfo
+};

package/src/blocks/text/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./text";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/{text.lite.tsx → text/text.jsx}

@@ -1,3 +1,5 @@
-export default function Text(props) {
+function Text(props) {
   return <div innerHTML={props.text}></div>;
 }
+
+export default Text;

package/src/blocks/text/text.lite.tsx

@@ -0,0 +1,5 @@
+function Text(props) {
+  return <div innerHTML={props.text}></div>;
+}
+
+export default Text;

package/src/blocks/textarea/component-info.js

@@ -0,0 +1,47 @@
+const componentInfo = {
+  name: "Form:TextArea",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+  inputs: [
+    {
+      advanced: true,
+      name: "value",
+      type: "string"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+    },
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there"
+    },
+    {
+      name: "required",
+      type: "boolean",
+      defaultValue: false
+    }
+  ],
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  },
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/textarea/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./textarea";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/textarea/textarea.jsx

@@ -0,0 +1,5 @@
+function Textarea(props) {
+  return <textarea {...props.attributes} placeholder={props.placeholder} name={props.name} value={props.value} defaultValue={props.defaultValue}></textarea>;
+}
+
+export default Textarea;

package/src/blocks/{textarea.lite.tsx → textarea/textarea.lite.tsx}

@@ -1,4 +1,4 @@
-export default function Textarea(props) {
+function Textarea(props) {
   return (
     <textarea
       {...props.attributes}
@@ -9,3 +9,5 @@ export default function Textarea(props) {
     ></textarea>
   );
 }
+
+export default Textarea;

package/src/blocks/video/component-info.js

@@ -0,0 +1,106 @@
+const componentInfo = {
+  name: "Video",
+  canHaveChildren: true,
+  builtIn: true,
+  defaultStyles: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+  inputs: [
+    {
+      name: "video",
+      type: "file",
+      allowedFileTypes: ["mp4"],
+      bubble: true,
+      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+      required: true
+    },
+    {
+      name: "posterImage",
+      type: "file",
+      allowedFileTypes: ["jpeg", "png"],
+      helperText: "Image to show before the video plays"
+    },
+    {
+      name: "autoPlay",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "controls",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "muted",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "loop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "fill", "auto"]
+    },
+    {
+      name: "fitContent",
+      type: "boolean",
+      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+      defaultValue: true,
+      advanced: true
+    },
+    {
+      name: "position",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "height",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "width",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    },
+    {
+      name: "lazyLoad",
+      type: "boolean",
+      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+      defaultValue: true,
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/video/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./video";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/video/video.jsx

@@ -0,0 +1,14 @@
+function Video(props) {
+  return <video {...props.attributes} preload="none" style={{
+    width: "100%",
+    height: "100%",
+    ...props.attributes?.style,
+    "object-fit": props.fit,
+    "object-position": props.position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    "border-radius": 1
+  }} key={props.video || "no-src"} poster={props.posterImage} autoPlay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}></video>;
+}
+
+export default Video;

package/src/blocks/{video.lite.tsx → video/video.lite.tsx}

@@ -1,4 +1,4 @@
-export default function Video(props) {
+function Video(props) {
   return (
     <video
       {...props.attributes}
@@ -22,3 +22,5 @@ export default function Video(props) {
     ></video>
   );
 }
+
+export default Video;

package/src/components/error-boundary.jsx

@@ -0,0 +1,5 @@
+function ErrorBoundary(props) {
+  return <></>;
+}
+
+export default ErrorBoundary;

package/src/components/error-boundary.lite.tsx

@@ -1,3 +1,5 @@
-export default function ErrorBoundary(props) {
+function ErrorBoundary(props) {
   return <></>;
 }
+
+export default ErrorBoundary;

package/src/components/render-block/block-styles.jsx

@@ -0,0 +1,36 @@
+import { createMutable } from "solid-js/store";
+import RenderInlinedStyles from "../render-inlined-styles";
+
+function BlockStyles(props) {
+  const state = createMutable({
+    camelToKebabCase(string) {
+      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+    },
+
+    get css() {
+      // TODO: media queries
+      const styleObject = props.block.responsiveStyles?.large;
+
+      if (!styleObject) {
+        return "";
+      }
+
+      let str = `.${props.block.id} {`;
+
+      for (const key in styleObject) {
+        const value = styleObject[key];
+
+        if (typeof value === "string") {
+          str += `${state.camelToKebabCase(key)}: ${value};`;
+        }
+      }
+
+      str += "}";
+      return str;
+    }
+
+  });
+  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+}
+
+export default BlockStyles;

package/src/components/render-block/block-styles.lite.tsx

@@ -0,0 +1,38 @@
+import { createMutable } from "solid-js/store";
+
+import RenderInlinedStyles from "../render-inlined-styles.lite";
+
+function BlockStyles(props) {
+  const state = createMutable({
+    camelToKebabCase(string: string) {
+      return string
+        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    },
+    get css() {
+      // TODO: media queries
+      const styleObject = props.block.responsiveStyles?.large;
+
+      if (!styleObject) {
+        return "";
+      }
+
+      let str = `.${props.block.id} {`;
+
+      for (const key in styleObject) {
+        const value = styleObject[key];
+
+        if (typeof value === "string") {
+          str += `${state.camelToKebabCase(key)}: ${value};`;
+        }
+      }
+
+      str += "}";
+      return str;
+    },
+  });
+
+  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+}
+
+export default BlockStyles;

package/src/components/render-block/render-block.jsx

@@ -0,0 +1,117 @@
+import { useContext, Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getBlockStyles } from "../../functions/get-block-styles.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { components } from "../../functions/register-component.js";
+import BlockStyles from "./block-styles";
+
+function RenderBlock(props) {
+  const state = createMutable({
+    get component() {
+      const componentName = state.useBlock.component?.name;
+
+      if (!componentName) {
+        return null;
+      }
+
+      const ref = components[componentName];
+
+      if (componentName && !ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+      }
+
+      return ref;
+    },
+
+    get componentInfo() {
+      return state.component?.info;
+    },
+
+    get componentRef() {
+      return state.component?.component;
+    },
+
+    get tagName() {
+      return getBlockTag(state.useBlock);
+    },
+
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context
+      });
+    },
+
+    get propertiesAndActions() {
+      return { ...getBlockProperties(state.useBlock),
+        ...getBlockActions({
+          block: state.useBlock,
+          state: builderContext.state,
+          context: builderContext.context
+        })
+      };
+    },
+
+    get css() {
+      return getBlockStyles(state.useBlock);
+    },
+
+    get componentOptions() {
+      return getBlockComponentOptions(state.useBlock);
+    },
+
+    get children() {
+      // TO-DO: When should `canHaveChildren` dictate rendering?
+      // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+      // but still receive and need to render children.
+      // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
+      return state.useBlock.children ?? [];
+    },
+
+    get noCompRefChildren() {
+      return state.componentRef ? [] : state.children;
+    }
+
+  });
+  const builderContext = useContext(BuilderContext);
+  return <>
+      <Show when={!state.componentInfo?.noWrap}>
+        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
+          <Show when={TARGET === "vue" || TARGET === "svelte"}>
+            <BlockStyles block={state.useBlock}></BlockStyles>
+          </Show>
+          <Show when={state.componentRef}>
+            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
+              <For each={state.children}>
+                {(child, _index) => {
+                const index = _index();
+
+                return <RenderBlock block={child}></RenderBlock>;
+              }}
+              </For>
+            </Dynamic>
+          </Show>
+          <For each={state.noCompRefChildren}>
+            {(child, _index) => {
+            const index = _index();
+
+            return <RenderBlock block={child}></RenderBlock>;
+          }}
+          </For>
+        </Dynamic>
+      </Show>
+    </>;
+}
+
+export default RenderBlock;