Carbon add-ons for Watson IoT is an open-source react component library built by IBM Watson Internet Of Things. With the Carbon Design System and IBM Design Language as its foundation, the library consists of working code, resources, and a vibrant community of contributors.

Installation

Run the following command using npm:

npm install carbon-addons-iot-react d3@">=5.0.0 <=5.14.2"

If you prefer Yarn Classic, use the following command instead:

yarn add carbon-addons-iot-react d3@">=5.0.0 <=5.14.2"

Note d3 is a peer dependency due to the usage of @carbon/charts in various components. The required version range is specified in our package.json

You can then import any component that you need by doing the following in your project:

import { AddCard } from 'carbon-addons-iot-react';

🚀 Quick Start

If you'd like to test drive everything here, run the following command to create a new project preconfigured with everything you need to begin to build an application.

npx create-iot-react-app <app-name>

More info on create-iot-react-app here

Styling

What's included

carbon-addons-iot-react/
├── css
│   ├── carbon-addons-iot-react.css
│   └── carbon-addons-iot-react.css.map
├── scss
│   └── components
│       └── modal
│           └── _modal.scss
│       └── ...
│   └── globals
│       └── scss
│           └── _vars.scss
│           └── ...
│   └── styles.scss (sass entrypoint)

Compiled CSS files are provided for ease of use getting started.

A sass entrypoint is available at scss/styles.scss for use in your project.

Using sass files (instead of the compiled .css) infers usage of a SCSS pre-processor. All Sass files use the *.scss file extension. For transpiling Sass code, use node-sass based Sass compilers, for example, WebPack sass-loader or gulp-sass. Make sure your build process uses autoprefixer to ensure vendor prefixes are automatically added to your output CSS.

Feedback and improvement requests regarding this configuration would be appreciated, please open an issue.

Dependencies

Usage of this package does not require you to install additional Carbon packages; carbon-components, carbon-components-react, or @carbon packages (@carbon/grid, @carbon-layout, etc) as peer dependencies. You may still need these packages if you use them directly in your project.

📚 Docs

You can find more information about how to use each component by checking out the Storybook.

🤲 Contributing

Please check out our Contribution Guidelines for more info on how you can help out!

Testing

You can find our component test statement here

If you are using our project with Jest tests, due to it's dependency on d3, you may have to add some mock to your Jest setup script. See this issue for more details: https://github.com/facebook/jest/issues/5379

Here's an example setup script, update your jest config to point to a setup script: setupFiles: ['setupJest.js'],

setupJest.js contents:

class SVGPathElement extends HTMLElement {}

window.SVGPathElement = SVGPathElement;