babel-plugin-is-design-system
Given a directory containing React components, this plugin will add a static property to them indicating that they are Design System components.
Overview
e.g.
// Input
const Button = ({ children }) => (
<span className="button">
{ children }
</span>
);
export default Button;
// Transformed Output
const Button = ({ children }) => (
<span className="button">
{ children }
</span>
);
Button.isDesignSystem = true;
export default Button;
You can choose which components you want to mark as "design system" using the plugin's configuration.
Installation
$ yarn add --dev @redbubble/babel-plugin-is-design-system
Usage
.babelrc
{
"plugins": ["@redbubble/babel-plugin-is-design-system"]
}
Options
include
Specify which directories to look for components in:
{
"plugins": ["@redbubble/babel-plugin-is-design-system", { "include": ["your-design-system/components"] }]
}
ignore
Specify which files to ignore:
{
"plugins": ["@redbubble/babel-plugin-is-design-system", { "ignore": ["someFile.js"] }]
}
License
MIT