Example CLI Settings

Example CLI settings for different code repos

Here are some settings we've used to import some open source code libraries covering different approaches. Where possible we have generated examples from existing files in the live repos to show you how to do that in different situations. In practice we recommend creating a curated set of example files containing the most useful configurations for your designers to use in their design tools.

Javascript libraries

Reactstrap

Javascript library generating examples from javascript files. Uses external css.

Reactstrap is a set of React components that act as a wrapper for the Bootstrap CSS library. The react components themselves don't contain the bootstrap CSS, but instead require it to be included on any web page using the reactstrap components.

The import steps we used for Reactstrap are:

  1. git clone https://github.com/reactstrap/reactstrapĀ to clone a local copy of the repo
  1. yarnĀ to install the package dependencies
  1. yarn buildĀ to run the existing reactstrap build - buildingĀ src/index.jsĀ intoĀ dist/reactstrap.js
  1. Inspect the repo to find where the files to use for examples are stored - in this case inĀ docs/lib/examples/*.js
  1. interplayĀ to run the CLI, entering enter the settings below:
module.exports = () => {

   return {
      framework: "react",
      presetPaths: [
         "docs/lib/examples/*.js"
      ],
      includePaths: [
         "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      ],
      deployPaths: [],
      packages: [
         {
            name: "reactstrap",
            packagePath: "./package.json",
            src: "src/index.js",
            build: "dist/reactstrap.js"
         }
      ],
      devBuild: true,
      presetRules: [
			{
				presetPath: ".*/{componentName}.",
				limit: 3
			},
			{
				presetPath: "{componentName}/",
				limit: 3
			},
		],
   }
}

In this case we enter the full URL to the css we want included on every page using the components, because it is not a local file. For other libraries we can enter a relative path here to deploy and include the local CSS that is produced in their build.

The CLI will:

  • Use theĀ src\index.jsĀ file to find all the component source files and parse them for properties
  • Use webpack to bundle theĀ dist\reactstrap.jsĀ file and deploy it to Interplay
  • Add config to ensure the CSS is included on every page with the components

Typescript libraries

Ant Design

Typescript library with markdown example files

For our sample import we will use the CSS file that is output from the build.

  1. git clone https://github.com/ant-design/ant-design.gitĀ to clone a local copy of the repo
  1. yarnĀ to install the package dependencies
  1. yarn buildĀ to run the repo build. This outputs the build asĀ dist/antd.jsĀ andĀ dist/antd.css
  1. Inspect the repo to find where the example files are - in this case they are in markdown files in demo folders alongside each component. So we use a wildcard for the component folder name and another wildcard for the filename:Ā components/*/demo/*.md
  1. interplayĀ to run the CLI, entering enter the settings below:
module.exports = () => {
    return {
      framework: "react",
      packages: [
        {
          name: "antd",
          packagePath: "./package.json",
          src: "components/index.tsx",
          build: "dist/antd.js"
        }
     ],
      includePaths: [
        "dist/antd.css"
      ],
      deployPaths: [],
      presetPaths: [
        "components/*/demo/*.md"
      ],
      peerDependencies: {},
      presetRules: [
        {
	        //match component instances whose name matches first part of filename
	        presetPath: ".*/{componentName}.",
	        limit: 5
        },
        {
	        //match component instances whose name matches folder in file path
	        presetPath: "{componentName}/",
	        limit: 5
	       }
        //add more preset rules here
      ]
    };
  };

Monorepos / Multi-package repos

Typescript library with multiple packages of components

We can import components from multiple packages in a repo by adding configuration for each package to our interplay.config.js. Each package needs its own index file. You can optionally provide a custom build for each package.

module.exports = () => {
    return {
      "framework": "react",
      "packages": [
         {
            "name": "@example/avatar",
            "packagePath": "modules/avatar/package.json",
            "src": "modules/avatar/index.ts",
            "build": "modules/avatar/dist/commonjs/index.js"
         },
         {
            "name": "@example/banner",
            "packagePath": "modules/banner/package.json",
            "src": "modules/banner/index.ts",
            "build": "modules/banner/dist/commonjs/index.js",
					   "ignoreExports":[
									"default",
									"DeprecatedBanner",
									"utils"
				    ]
		      },
	         {
	            "name": "@example/button",
	            "packagePath": "modules/button/package.json",
	            "src": "modules/button/index.ts",
	            "build": "modules/button/dist/commonjs/index.js"
	         },
	         {
	            "name": "@example/card",
	            "packagePath": "modules/card/package.json",
	            "src": "modules/card/index.ts",
	            "build": "modules/card/dist/commonjs/index.js"
	         },
	         {
	            "name": "@example/checkbox",
	            "packagePath": "modules/checkbox/package.json",
	            "src": "modules/checkbox/index.ts",
	            "build": "modules/checkbox/dist/commonjs/index.js"
	         }
		      ],

      "presetPaths": ["modules/**/stories/stories.tsx"],

	//other CLI settings here
   };
};
Did this answer your question?
šŸ˜ž
😐
🤩