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

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,46 @@
+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

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

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,7 @@
+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/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    // "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "declaration": true,
+  },
+  "include": [
+    "./packages/react/src/**/*"
+  ],
+  "exclude": [
+    "./packages/react/src/blocks/form/form.tsx"
+  ]
+}

package/tsconfig.sdk.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/sdk",
+    "module": "ESNext"
+  },
+  "include": [
+    "./packages/react/src/**/*"
+  ]
+}

package/tsconfig.server.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/server",
+    "module": "ESNext"
+  },
+  "include": [
+    "./packages/react/src/functions/get-content/**/*"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,91 @@
+/**
+ * This Vite Config is unused at the moment because we want each component to be its own file with `use client;` at
+ * the top, but we're not able to get it working.
+ *
+ * Vite strips them out, and `rollup-plugin-preserve-directives` is not working for us
+ */
+
+import { defineConfig, PluginOption } from 'vite';
+import react from '@vitejs/plugin-react';
+import preserveDirectives from 'rollup-plugin-preserve-directives';
+import * as preserveDirectives2 from 'rollup-plugin-preserve-directives';
+import MagicString from 'magic-string';
+
+// https://github.com/Ephem/rollup-plugin-preserve-directives/issues/1
+const fix: typeof preserveDirectives = (preserveDirectives as any).default;
+
+/**
+ * attempt at reimplementing `rollup-plugin-preserve-directives`
+ */
+const prependUseClientVitePlugin = (): PluginOption => ({
+  name: 'prepend-use-client',
+  renderChunk: {
+    order: 'post',
+    handler(code, chunk, options) {
+      if (!options.preserveModules) {
+        // if (!supressPreserveModulesWarning) {
+        this.warn(
+          'This plugin only works with the option preserveModules: true, if you want to add directives to the top of a bundled build, add it in a banner.'
+        );
+        // }
+
+        return undefined;
+      }
+
+      let chunkHasDirectives: false | string[] = false;
+
+      // Only do this for OutputChunks, not OutputAssets
+      if ('modules' in chunk) {
+        for (const moduleId of Object.keys(chunk.modules)) {
+          const directives =
+            this.getModuleInfo(moduleId)?.meta?.preserveDirectives;
+          console.log('directives', directives);
+          if (directives) {
+            chunkHasDirectives = directives;
+          }
+        }
+
+        if (chunkHasDirectives) {
+          const directiveStrings = chunkHasDirectives
+            .map((directive) => `'${directive}'`)
+            .join(';\n');
+
+          const s = new MagicString(code);
+          s.prepend(`${directiveStrings};\n`);
+          const srcMap = s.generateMap({ includeContent: true });
+
+          return { code: s.toString(), map: srcMap };
+        }
+      }
+
+      return null;
+    },
+  },
+});
+
+export default defineConfig(() => {
+  return {
+    build: {
+      target: 'es2020',
+      rollupOptions: {
+        output: {
+          preserveModules: true,
+        },
+        // plugins: [prependUseClientVitePlugin()],
+      },
+      lib: {
+        entry: {
+          sdk: './packages/react/src/index.ts',
+          // For react v18, we need to use the new entry point that does not include any client components
+          // This currently only includes the new `getContent` function which is used to fetch content on the server.
+          server: './packages/react/src/functions/get-content/index.ts',
+        },
+        formats: ['es', 'cjs'],
+        fileName: (format, entryName) =>
+          `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
+      },
+      minify: false,
+    },
+    plugins: [react(), prependUseClientVitePlugin()],
+  };
+});

package/dist/react/cjs/blocks/BaseText.d.ts

@@ -1,2 +0,0 @@
-export default BaseText;
-declare function BaseText(props: any): JSX.Element;

package/dist/react/cjs/blocks/BaseText.js

@@ -1,11 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_1 = require("react");
-const builder_context_js_1 = require("../context/builder.context.js");
-function BaseText(props) {
-    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
-    return React.createElement("span", { style: builderContext.inheritedStyles }, props.text);
-}
-exports.default = BaseText;

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

@@ -1,2 +0,0 @@
-export default Button;
-declare function Button(props: any): JSX.Element;

package/dist/react/cjs/blocks/button/button.js

@@ -1,15 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("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("button", { className: 
-            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
-            props.attributes.class + " button-5050ef15", ...props.attributes }, props.text)),
-        React.createElement("style", null, `.button-5050ef15 {
-all: unset;
-}`)));
-}
-exports.default = Button;

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

@@ -1,38 +0,0 @@
-export namespace componentInfo {
-    export const name: string;
-    export const image: string;
-    export namespace defaultStyles {
-        const appearance: string;
-        const paddingTop: string;
-        const paddingBottom: string;
-        const paddingLeft: string;
-        const paddingRight: string;
-        const backgroundColor: string;
-        const color: string;
-        const borderRadius: string;
-        const textAlign: string;
-        const cursor: string;
-    }
-    export const inputs: ({
-        name: string;
-        type: string;
-        defaultValue: string;
-        bubble: boolean;
-        friendlyName?: undefined;
-    } | {
-        name: string;
-        type: string;
-        bubble: boolean;
-        defaultValue?: undefined;
-        friendlyName?: undefined;
-    } | {
-        name: string;
-        type: string;
-        defaultValue: boolean;
-        friendlyName: string;
-        bubble?: undefined;
-    })[];
-    const _static: boolean;
-    export { _static as static };
-    export const noWrap: boolean;
-}