@redbubble/babel-plugin-is-design-system

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