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

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

@@ -1,61 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Form:Select',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
-  defaultStyles: {
-    alignSelf: 'flex-start',
-  },
-  inputs: [
-    {
-      name: 'options',
-      type: 'list',
-      required: true,
-      subFields: [
-        {
-          name: 'value',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'name',
-          type: 'text',
-        },
-      ],
-      defaultValue: [
-        {
-          value: 'option 1',
-        },
-        {
-          value: 'option 2',
-        },
-      ],
-    },
-    {
-      name: 'name',
-      type: 'string',
-      required: true,
-      helperText:
-        'Every select in a form needs a unique name describing what it gets, e.g. "email"',
-    },
-    {
-      name: 'defaultValue',
-      type: 'string',
-    },
-    {
-      name: 'value',
-      type: 'string',
-      advanced: true,
-    },
-
-    {
-      name: 'required',
-      type: 'boolean',
-      defaultValue: false,
-    },
-  ],
-  static: true,
-  noWrap: true,
-};

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

@@ -1,35 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
-import { isEditing } from "../../functions/is-editing.js";
-
-function SelectComponent(props: FormSelectProps) {
-  return (
-    <select
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      {props.options?.map((option) => (
-        <option value={option.value}>{option.name || option.value}</option>
-      ))}
-    </select>
-  );
-}
-
-export default SelectComponent;

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

@@ -1,32 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Form:SubmitButton',
-
-  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,
-  // TODO: optional children? maybe as optional form input
-  // that only shows if advanced setting is flipped
-  // TODO: defaultChildren
-  // canHaveChildren: true,
-};

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

@@ -1,17 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
-function SubmitButton(props: ButtonProps) {
-  return (
-    <button type="submit" {...props.attributes}>
-      {props.text}
-    </button>
-  );
-}
-
-export default SubmitButton;

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

@@ -1,43 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: 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',
-    },
-  ],
-};

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

@@ -1,111 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useContext, useEffect } from "react";
-
-export interface SymbolInfo {
-  model?: string;
-  entry?: string;
-  data?: any;
-  content?: BuilderContent;
-  inline?: boolean;
-  dynamic?: boolean;
-}
-export interface SymbolProps {
-  symbol?: SymbolInfo;
-  dataOnly?: boolean;
-  dynamic?: boolean;
-  builderBlock?: BuilderBlock;
-  attributes?: any;
-  inheritState?: boolean;
-}
-
-import RenderContent from "../../components/render-content/render-content";
-import BuilderContext from "../../context/builder.context.js";
-import { getContent } from "../../functions/get-content/index.js";
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import { TARGET } from "../../constants/target";
-import { logger } from "../../helpers/logger";
-
-function Symbol(props: SymbolProps) {
-  const [className, setClassName] = useState(() =>
-    [
-      ...(TARGET === "vue2" || TARGET === "vue3"
-        ? Object.keys(props.attributes.class)
-        : [props.attributes.class]),
-      "builder-symbol",
-      props.symbol?.inline ? "builder-inline-symbol" : undefined,
-      props.symbol?.dynamic || props.dynamic
-        ? "builder-dynamic-symbol"
-        : undefined,
-    ]
-      .filter(Boolean)
-      .join(" ")
-  );
-
-  const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
-
-  function fetchContent() {
-    /**
-     * If:
-     * - we have a symbol prop
-     * - yet it does not have any content
-     * - and we have not already stored content from before
-     * - and it has a model name
-     *
-     * then we want to re-fetch the symbol content.
-     */
-    if (
-      !contentToUse &&
-      props.symbol?.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
-      builderContext?.apiKey
-    ) {
-      getContent({
-        model: props.symbol.model,
-        apiKey: builderContext.apiKey,
-        apiVersion: builderContext.apiVersion,
-        query: {
-          id: props.symbol.entry,
-        },
-      })
-        .then((response) => {
-          if (response) {
-            setContentToUse(response);
-          }
-        })
-        .catch((err) => {
-          logger.error("Could not fetch symbol content: ", err);
-        });
-    }
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  useEffect(() => {
-    fetchContent();
-  }, []);
-
-  useEffect(() => {
-    fetchContent();
-  }, [props.symbol]);
-
-  return (
-    <div {...props.attributes} className={className}>
-      <RenderContent
-        apiVersion={builderContext.apiVersion}
-        apiKey={builderContext.apiKey!}
-        context={builderContext.context}
-        customComponents={Object.values(builderContext.registeredComponents)}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...contentToUse?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={contentToUse}
-      />
-    </div>
-  );
-}
-
-export default Symbol;

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

@@ -1,24 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Text',
-  static: 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',
-  },
-};

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

@@ -1,20 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface TextProps {
-  text: string;
-}
-
-function Text(props: TextProps) {
-  return (
-    <span
-      className="builder-text"
-      dangerouslySetInnerHTML={{ __html: props.text }}
-      style={{
-        outline: "none",
-      }}
-    />
-  );
-}
-
-export default Text;

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

@@ -1,48 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Form:TextArea',
-
-  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,
-};

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

@@ -1,24 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface TextareaProps {
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}
-
-function Textarea(props: TextareaProps) {
-  return (
-    <textarea
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    />
-  );
-}
-
-export default Textarea;

package/packages/react/src/blocks/util.ts

@@ -1,18 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const serializeFn = (fnValue: Function) => {
-  const fnStr = fnValue.toString().trim();
-
-  // we need to account for a few different fn syntaxes:
-  // 1. `function name(args) => {code}`
-  // 2. `name(args) => {code}`
-  // 3. `(args) => {}`
-  const appendFunction =
-    !fnStr.startsWith('function') && !fnStr.startsWith('(');
-
-  return `return (${
-    appendFunction ? 'function ' : ''
-  }${fnStr}).apply(this, arguments)`;
-};

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

@@ -1,109 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Video',
-  canHaveChildren: 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,
-    },
-  ],
-};

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

@@ -1,84 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface VideoProps {
-  attributes?: any;
-  video?: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: "contain" | "cover" | "fill";
-  position?:
-    | "center"
-    | "top"
-    | "left"
-    | "right"
-    | "bottom"
-    | "top left"
-    | "top right"
-    | "bottom left"
-    | "bottom right";
-  posterImage?: string;
-  lazyLoad?: boolean;
-}
-
-function Video(props: VideoProps) {
-  function videoProps() {
-    return {
-      ...(props.autoPlay === true
-        ? {
-            autoPlay: true,
-          }
-        : {}),
-      ...(props.muted === true
-        ? {
-            muted: true,
-          }
-        : {}),
-      ...(props.controls === true
-        ? {
-            controls: true,
-          }
-        : {}),
-      ...(props.loop === true
-        ? {
-            loop: true,
-          }
-        : {}),
-      ...(props.playsInline === true
-        ? {
-            playsInline: true,
-          }
-        : {}),
-    };
-  }
-
-  function spreadProps() {
-    return { ...props.attributes, ...videoProps() };
-  }
-
-  return (
-    <video
-      {...spreadProps()}
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        borderRadius: 1,
-      }}
-      src={props.video || "no-src"}
-      poster={props.posterImage}
-    />
-  );
-}
-
-export default Video;