Sharing Component Sets - bettyblocks/cli GitHub Wiki

You can include other Component Sets in your own Set. This lets you include the Components from another Set in your own Prefabs, and adds the Prefabs from the other Set to the Page Builder. Currently, only the Betty Blocks Component Set can be used. Soon you will also be able to publish your own Component Sets to be re-used by other developers in your own Organization.

Adding a Component Set to your own Component Set.

By adding another Component Set to your own Component Set, you:

• make the Components from the other Set available inside your own Prefabs;
• make the Prefabs from the other Set available inside the Page Builder (once built and published as part of your own Component Set).

Add a the latest version of a Component Set called "Blocks" from imaginary organization "Barry" by running the following command inside the root folder of your project:

$ bb components add @barry/blocks

To install a particular version, ie. 1.3.0:

$ bb components add @barry/blocks:1.3.0

Component Set names

Component Sets names consist of:

• An at-sign (@);
• The Organization identifier (consisting of lowercase alphabet, -, and _);
• A forward slash (/);
• The name of the Component Set (consisting of lowercase alphabet, -, and _);

And optionally:

• A colon (:);
• A semver version ("major.minor.patch", ie. 1.3.2).

Examples of valid Component Set names:

• @barry/blocks,
• @barry/blocks:1.3.2,
• @betty-blocks/layout.

Using added Components

The components add command downloads and installs a distribution of the desired Component Set into the betty-blocks folder of your project, and registers it as a dependency inside betty-blocks.yaml.

You can now reference the Components of the newly added Set inside your own Prefabs. References to these Components follow the convention outlined previously, omitting the version number. If @barry/blocks contains a Rhino Component, refer to it inside your Prefab as follows:

(function Prefab() {
  return {
    name: "Rhino",
    icon: "HEADING_ICON",
    category: "CONTENT",
    structure: [
      {
        name: "@barry/blocks/Rhino",
        options: [],
        descendants: []
      }
    ]
  };
})();