Carbon add-ons for Watson IoT
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
@latest from
master
-
# with npm
npm install carbon-addons-iot-react d3@">=5.0.0 <=5.14.2"
# with yarn
yarn add carbon-addons-iot-react d3@">=5.0.0 <=5.14.2"
@next pre-releases from
next
-
# with npm
npm install carbon-addons-iot-react@next d3@">=5.0.0 <=5.14.2"
# with yarn
yarn add carbon-addons-iot-react@next d3@">=5.0.0 <=5.14.2"
d3
is a peer dependency due to the usage of@carbon/charts
in various components. The required version range is specified in package.json
Subscribe to all pre-releases on next
Pre-release versions are available on
carbon-addons-iot-react@next
. The default version range that is automatically
added to your package.json
on install/add will only follow pre-releases on the
same major.minor.patch
version. The version range can be modifed to follow all
pre-releases:
"dependencies": {
- "carbon-addons-iot-react": "^2.139.0-next.4"
+ "carbon-addons-iot-react": "next"
}
🚀 Quick Start
To test drive everything here, use
create-iot-react-app
. It
will create a new project that is preconfigured with everything you need to
begin to build an application.
npx create-iot-react-app <app-name>
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.
🤲 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;