Here are some settings we've used to import some open source code libraries, along with some quick points highlighting why the approach was taken in each case.
Where possible we have re-used existing preset files from the live repos to show you how to do that in different situations. In practice you may want to create a curated set of preset files containing the most useful configurations for your designers to use in their design tools.
Javascript library generating presets 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:
git clone <https://github.com/reactstrap/reactstrap
> to clone a local copy of the repoyarn
to install the package dependenciesyarn build
to run the existing reactstrap build - building src/index.js
into dist/reactstrap.js
docs/lib/examples/*.js
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:
src\\index.js
file to find all the component source files and parse them for propertiesdist\\reactstrap.js
file and deploy it to InterplayTypescript library with markdown example files
For our sample import we will use the CSS file that is output from the build.
git clone <https://github.com/ant-design/ant-design.git
> to clone a local copy of the repoyarn
to install the package dependenciesyarn build
to run the repo build. This outputs the build as dist/antd.js
and dist/antd.css
components/*/demo/*.md
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
]
};
};