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

package/packages/react/src/index-helpers/blocks-exports.ts

@@ -1,10 +0,0 @@
-export { default as Button } from '../blocks/button/button';
-export { default as Columns } from '../blocks/columns/columns';
-export { default as Fragment } from '../blocks/fragment/fragment';
-export { default as Image } from '../blocks/image/image';
-export { default as RenderBlocks } from '../components/render-blocks';
-export { default as RenderContent } from '../components/render-content/render-content';
-export { default as Section } from '../blocks/section/section';
-export { default as Symbol } from '../blocks/symbol/symbol';
-export { default as Text } from '../blocks/text/text';
-export { default as Video } from '../blocks/video/video';

package/packages/react/src/index-helpers/top-of-file.ts

@@ -1,4 +0,0 @@
-// no-op
-// this file exists in case a target needs to add logic to the top of the index file in an
-// override.
-export default undefined;

package/packages/react/src/index.ts

@@ -1,14 +0,0 @@
-export * from './index-helpers/top-of-file.js';
-
-export * from './index-helpers/blocks-exports.js';
-
-export * from './functions/is-editing.js';
-export * from './functions/is-previewing.js';
-export * from './functions/register-component.js';
-export * from './functions/register.js';
-export * from './functions/set-editor-settings.js';
-export * from './functions/get-content/index.js';
-export * from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export type { RegisteredComponent } from './context/types';
-export type { ComponentInfo } from './types/components';

package/packages/react/src/scripts/init-editing.ts

@@ -1,123 +0,0 @@
-import { TARGET } from '../constants/target.js';
-import { isBrowser } from '../functions/is-browser.js';
-import { register } from '../functions/register.js';
-
-export const registerInsertMenu = () => {
-  register('insertMenu', {
-    name: '_default',
-    default: true,
-    items: [
-      { name: 'Box' },
-      { name: 'Text' },
-      { name: 'Image' },
-      { name: 'Columns' },
-      ...(TARGET === 'reactNative'
-        ? []
-        : [
-            { name: 'Core:Section' },
-            { name: 'Core:Button' },
-            { name: 'Embed' },
-            { name: 'Custom Code' },
-          ]),
-    ],
-  });
-};
-
-let isSetupForEditing = false;
-export const setupBrowserForEditing = (
-  options: {
-    includeRefs?: boolean;
-    locale?: string;
-  } = {}
-) => {
-  if (isSetupForEditing) {
-    return;
-  }
-  isSetupForEditing = true;
-  if (isBrowser()) {
-    window.parent?.postMessage(
-      {
-        type: 'builder.sdkInfo',
-        data: {
-          target: TARGET,
-          // TODO: compile these in
-          // type: process.env.SDK_TYPE,
-          // version: process.env.SDK_VERSION,
-          supportsPatchUpdates: false,
-          // Supports builder-model="..." attribute which is needed to
-          // scope our '+ add block' button styling
-          supportsAddBlockScoping: true,
-          supportsCustomBreakpoints: true,
-        },
-      },
-      '*'
-    );
-
-    window.parent?.postMessage(
-      {
-        type: 'builder.updateContent',
-        data: {
-          options,
-        },
-      },
-      '*'
-    );
-
-    window.addEventListener('message', ({ data }) => {
-      if (!data?.type) {
-        return;
-      }
-
-      switch (data.type) {
-        case 'builder.evaluate': {
-          const text = data.data.text;
-          const args = data.data.arguments || [];
-          const id = data.data.id;
-          // tslint:disable-next-line:no-function-constructor-with-string-args
-          const fn = new Function(text);
-          let result: any;
-          let error: Error | null = null;
-          try {
-            // eslint-disable-next-line prefer-spread
-            result = fn.apply(null, args);
-          } catch (err) {
-            error = err as Error;
-          }
-
-          if (error) {
-            window.parent?.postMessage(
-              {
-                type: 'builder.evaluateError',
-                data: { id, error: error.message },
-              },
-              '*'
-            );
-          } else {
-            if (result && typeof result.then === 'function') {
-              (result as Promise<any>)
-                .then((finalResult) => {
-                  window.parent?.postMessage(
-                    {
-                      type: 'builder.evaluateResult',
-                      data: { id, result: finalResult },
-                    },
-                    '*'
-                  );
-                })
-                .catch(console.error);
-            } else {
-              window.parent?.postMessage(
-                {
-                  type: 'builder.evaluateResult',
-                  data: { result, id },
-                },
-                '*'
-              );
-            }
-          }
-          break;
-        }
-      }
-    });
-  }
-};

package/packages/react/src/types/api-version.ts

@@ -1,2 +0,0 @@
-export type ApiVersion = 'v2' | 'v3';
-export const DEFAULT_API_VERSION: ApiVersion = 'v3';

package/packages/react/src/types/builder-block.ts

@@ -1,69 +0,0 @@
-type JSONValue = string | number | boolean | JSONObject | JSONArray;
-
-interface JSONObject {
-  [x: string]: JSONValue;
-}
-
-interface JSONArray extends Array<JSONValue> {}
-
-/** @todo typedoc this */
-export interface BuilderBlock {
-  '@type': '@builder.io/sdk:Element';
-  '@version'?: number;
-  id?: string;
-  tagName?: string;
-  layerName?: string;
-  groupLocked?: boolean;
-  layerLocked?: boolean;
-  /** @todo make alias for properties.class */
-  class?: string;
-  children?: BuilderBlock[];
-  responsiveStyles?: {
-    large?: Partial<CSSStyleDeclaration>;
-    medium?: Partial<CSSStyleDeclaration>;
-    small?: Partial<CSSStyleDeclaration>;
-    /** @deprecated */
-    xsmall?: Partial<CSSStyleDeclaration>;
-  };
-  component?: {
-    name: string;
-    options?: any;
-    tag?: string;
-  };
-  bindings?: {
-    [key: string]: string;
-  };
-  meta?: {
-    [key: string]: JSONValue;
-  };
-  actions?: {
-    [key: string]: string;
-  };
-  properties?: {
-    [key: string]: string;
-  };
-  code?: {
-    bindings?: {
-      [key: string]: string;
-    };
-    actions?: {
-      [key: string]: string;
-    };
-  };
-  repeat?: {
-    collection: string;
-    itemName?: string;
-  } | null;
-  animations?: any[]; // TODO: type the animation spec
-  style?: Partial<CSSStyleDeclaration>;
-
-  /**
-   * generated by the "Hide If" binding
-   */
-  hide?: boolean;
-
-  /**
-   * generated by the "Show If" binding
-   */
-  show?: boolean;
-}

package/packages/react/src/types/builder-content.ts

@@ -1,46 +0,0 @@
-import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './input.js';
-import type { Nullable } from './typescript.js';
-
-export interface Breakpoints {
-  small: number;
-  medium: number;
-}
-export interface BuilderContentVariation {
-  data?: {
-    title?: string;
-    blocks?: BuilderBlock[];
-    inputs?: Input[];
-    state?: { [key: string]: any };
-    jsCode?: string;
-    tsCode?: string;
-    httpRequests?: { [key: string]: string };
-    [key: string]: any;
-  };
-  name?: string;
-  testRatio?: number;
-  id?: string;
-  meta?: {
-    breakpoints?: Nullable<Breakpoints>;
-    [key: string]: any;
-  };
-}
-
-// TODO: separate full and partial versions
-export interface BuilderContent extends BuilderContentVariation {
-  // TODO: query
-  '@version'?: number;
-  id?: string;
-  name?: string;
-  published?: 'published' | 'draft' | 'archived';
-  modelId?: string;
-  priority?: number;
-  lastUpdated?: number;
-  startDate?: number;
-  endDate?: number;
-  variations?: {
-    [id: string]: BuilderContentVariation | undefined;
-  };
-  testVariationId?: string;
-  testVariationName?: string;
-}

package/packages/react/src/types/can-track.ts

@@ -1,3 +0,0 @@
-export type CanTrack = {
-  canTrack: boolean;
-};

package/packages/react/src/types/components.ts

@@ -1,117 +0,0 @@
-import type { BuilderElement } from './element';
-import type { Input } from './input';
-
-export interface ComponentInfo {
-  /**
-   * Name your component something unique, e.g. 'MyButton'. You can override built-in components
-   * by registering a component with the same name, e.g. 'Text', to replace the built-in text component
-   */
-  name: string;
-  description?: string;
-  /**
-   * Link to a documentation page for this component
-   */
-  docsLink?: string;
-  image?: string;
-  /**
-   * Input schema for your component for users to fill in the options
-   */
-  inputs?: Input[];
-  class?: any;
-  type?: 'angular' | 'webcomponent' | 'react' | 'vue';
-  defaultStyles?: { [key: string]: string };
-  /**
-   * Turn on if your component can accept children. Be sure to use in combination with
-   * withChildren(YourComponent) like here
-   * github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/components/HeroWithChildren/HeroWithChildren.builder.js#L5
-   */
-  canHaveChildren?: boolean;
-  fragment?: boolean;
-  /**
-   * Do not wrap a component in a dom element. Be sure to use {...props.attributes} with this option
-   * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
-   */
-  noWrap?: boolean;
-  /**
-   * Default children
-   */
-  defaultChildren?: BuilderElement[];
-  defaults?: Partial<BuilderElement>;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  hooks?: { [key: string]: string | Function };
-  /**
-   * Hide your component in editor, useful for gradually deprecating components
-   */
-  hideFromInsertMenu?: boolean;
-  // For webcomponents
-  tag?: string;
-  static?: boolean;
-  /**
-   * Passing a list of model names will restrict using the component to only the models listed here, otherwise it'll be available for all models
-   */
-  models?: string[];
-
-  /**
-   * Specify restrictions direct children must match
-   */
-  childRequirements?: {
-    /** Message to show when this doesn't match, e.g. "Children of 'Columns' must be a 'Column'" */
-    message: string;
-    /** Simple way to say children must be a specific component name */
-    component?: string;
-    /**
-     * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
-     * of what the children objects should match, e.g.
-     *
-     * @example
-     *  query: {
-     *    // Child of this element must be a 'Button' or 'Text' component
-     *    'component.name': { $in: ['Button', 'Text'] }
-     *  }
-     */
-    query?: any;
-  };
-
-  /**
-   * Specify restrictions any parent must match
-   */
-  requiresParent?: {
-    /** Message to show when this doesn't match, e.g. "'Add to cart' buttons must be within a 'Product box'" */
-    message: string;
-    /** Simple way to say a parent must be a specific component name, e.g. 'Product box' */
-    component?: string;
-
-    /**
-     * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
-     * of what at least one parent in the parents hierarchy should match, e.g.
-     *
-     * @example
-     *  query: {
-     *    // Thils element must be somewhere inside either a 'Product box' or 'Collection' component
-     *    'component.name': { $in: ['Product Box', 'Collection'] }
-     *  }
-     */
-    query?: any;
-  };
-
-  /** not yet implemented */
-  friendlyName?: string;
-
-  /**
-   * Use to restrict access to your component based on a the current user permissions
-   * By default components will show to all users
-   * for more information on permissions in builder check https://www.builder.io/c/docs/guides/roles-and-permissions
-   */
-  requiredPermissions?: Array<Permission>;
-
-  // TO-DO: is this used?
-  hidden?: boolean;
-}
-
-type Permission =
-  | 'read'
-  | 'publish'
-  | 'editCode'
-  | 'editDesigns'
-  | 'admin'
-  | 'create';

package/packages/react/src/types/deep-partial.ts

@@ -1,7 +0,0 @@
-export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends Array<infer U>
-    ? Array<DeepPartial<U>>
-    : T[P] extends ReadonlyArray<infer U>
-    ? ReadonlyArray<DeepPartial<U>>
-    : DeepPartial<T[P]>;
-};

package/packages/react/src/types/element.ts

@@ -1,60 +0,0 @@
-type JSONValue = string | number | boolean | JSONObject | JSONArray;
-
-interface JSONObject {
-  [x: string]: JSONValue;
-}
-
-interface JSONArray extends Array<JSONValue> {}
-
-/** @todo typedoc this */
-export interface BuilderElement {
-  '@type': '@builder.io/sdk:Element';
-  '@version'?: number;
-  id?: string;
-  tagName?: string;
-  layerName?: string;
-  groupLocked?: boolean;
-  layerLocked?: boolean;
-  /** @todo make alias for properties.class */
-  class?: string;
-  children?: BuilderElement[];
-  responsiveStyles?: {
-    large?: Partial<CSSStyleDeclaration>;
-    medium?: Partial<CSSStyleDeclaration>;
-    small?: Partial<CSSStyleDeclaration>;
-    /** @deprecated */
-    xsmall?: Partial<CSSStyleDeclaration>;
-  };
-  component?: {
-    name: string;
-    options?: any;
-    tag?: string;
-  };
-  bindings?: {
-    [key: string]: string;
-  };
-  meta?: {
-    [key: string]: JSONValue;
-  };
-  actions?: {
-    [key: string]: string;
-  };
-  properties?: {
-    [key: string]: string;
-  };
-  code?: {
-    bindings?: {
-      [key: string]: string;
-    };
-    actions?: {
-      [key: string]: string;
-    };
-  };
-  repeat?: {
-    collection: string;
-    itemName?: string;
-  } | null;
-  animations?: Animation[]; // TODO: type the animation spec
-}
-
-interface Animation {}

package/packages/react/src/types/input.ts

@@ -1,125 +0,0 @@
-export interface Input {
-  /** This is the name of the component prop this input represents */
-  name: string;
-  /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
-  friendlyName?: string;
-  /** @hidden @deprecated */
-  description?: string;
-  /** A default value to use */
-  defaultValue?: any;
-  /**
-   * The type of input to use, such as 'text'
-   *
-   * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
-   * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
-   */
-  type: string;
-  /** Is this input mandatory or not */
-  required?: boolean;
-  /** @hidden */
-  autoFocus?: boolean;
-  subFields?: Input[];
-  /**
-   * Additional text to render in the UI to give guidance on how to use this
-   *
-   * @example
-   * ```js
-   * helperText: 'Be sure to use a proper URL, starting with "https://"'
-   * 111
-   */
-  helperText?: string;
-  /** @hidden */
-  allowedFileTypes?: string[];
-  /** @hidden */
-  imageHeight?: number;
-  /** @hidden */
-  imageWidth?: number;
-  /** @hidden */
-  mediaHeight?: number;
-  /** @hidden */
-  mediaWidth?: number;
-  /** @hidden */
-  hideFromUI?: boolean;
-  /** @hidden */
-  modelId?: string;
-  /**
-   * Number field type validation maximum accepted input
-   */
-  max?: number;
-  /**
-   * Number field type validation minimum accepted input
-   */
-  min?: number;
-  /**
-   * Number field type step size when using arrows
-   */
-  step?: number;
-  /**
-   * Set this to `true` to show the editor for this input when
-   * children of this component are selected. This is useful for things
-   * like Tabs, such that users may not always select the Tabs component
-   * directly but will still be looking for how to add additional tabs
-   */
-  broadcast?: boolean;
-  /**
-   * Set this to `true` to show the editor for this input when
-   * group locked parents of this component are selected. This is useful
-   * to bubble up important inputs for locked groups, like text and images
-   */
-  bubble?: boolean;
-  /**
-   * Set this to `true` if you want this component to be translatable
-   */
-  localized?: boolean;
-  /** @hidden */
-  options?: {
-    [key: string]: any;
-  };
-  /**
-   * For "text" input type, specifying an enum will show a dropdown of options instead
-   */
-  enum?:
-    | string[]
-    | {
-        label: string;
-        value: any;
-        helperText?: string;
-      }[];
-  /** Regex field validation for all string types (text, longText, html, url, etc) */
-  regex?: {
-    /** pattern to test, like "^\/[a-z]$" */
-    pattern: string;
-    /** flags for the RegExp constructor, e.g. "gi"  */
-    options?: string;
-    /**
-     * Friendly message to display to end-users if the regex fails, e.g.
-     * "You must use a relative url starting with '/...' "
-     */
-    message: string;
-  };
-  /**
-   * Set this to `true` to put this under the "show more" section of
-   * the options editor. Useful for things that are more advanced
-   * or more rarely used and don't need to be too prominent
-   */
-  advanced?: boolean;
-  /** @hidden */
-  // onChange?: Function | string;
-  /** @hidden */
-  code?: boolean;
-  /** @hidden */
-  richText?: boolean;
-  /** @hidden */
-  showIf?: ((options: Map<string, any>) => boolean) | string;
-  /** @hidden */
-  copyOnAdd?: boolean;
-  /**
-   * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
-   */
-  model?: string;
-
-  valueType?: {
-    type?: string;
-  };
-  onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
-}

package/packages/react/src/types/targets.ts

@@ -1,6 +0,0 @@
-type MitosisTargets = import('@builder.io/mitosis').Target;
-
-export type Target = Extract<
-  MitosisTargets,
-  'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid'
->;

package/packages/react/src/types/typescript.ts

@@ -1,7 +0,0 @@
-export type Nullable<T> = T | null | undefined;
-
-export type Dictionary<T> = { [key: string]: T };
-
-export type Overwrite<T, U> = keyof U extends keyof T
-  ? Pick<T, Exclude<keyof T, keyof U>> & U
-  : never;

package/packages/rsc/src/blocks/BaseText.jsx

@@ -1,12 +0,0 @@
-import * as React from "react";
-import BuilderContext from "../context/builder.context.js";
-
-function BaseText(props) {
-  const _context = { ...props["_context"] };
-
-  const builderContext = _context["BuilderContext"];
-
-  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
-}
-
-export default BaseText;

package/packages/rsc/src/blocks/button/button.jsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-
-function Button(props) {
-  const _context = { ...props["_context"] };
-
-  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-3083674c"
-          }
-          {...props.attributes}
-        >
-          {props.text}
-        </button>
-      )}
-      <style>{`.button-3083674c {
-all: unset;
-}`}</style>
-    </>
-  );
-}
-
-export default Button;