AT&T IoT UI is a set of React components for AT&T IoT Projects. It's powered by CSS Modules and harmoniously integrates with your webpack workflow, although you can use any other module bundler.

Installation

AT&T IoT UI can be installed as an npm package:

$ npm install --save att-iot-ui

Prerequisites

AT&T IoT UI uses CSS Modules by default to import stylesheets written in SASS. In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.

Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

Of course this is a set of React components so you should be familiar with React. If want to customize your components via themes, you may want to take a look to react-css-themr which is used by AT&T IoT UI to make component easily themeable.

Basic usage

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'att-iot-ui/lib/button';

ReactDOM.render(
  <Button label="Hello World!" />,
  document.getElementById('app')
);

Take into account that any required style will be included in the final CSS so your final would include Button styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of AT&T IoT UI will be included, even if you don't use it.

Importing components

First let's take a look on how the components are structured in the project. The components folder contains a folder for each component or set of related components. For example, the avatar:

 |- /avatar
 |---- _config.scss
 |---- Avatar.js
 |---- index.js
 |---- readme.md
 |---- theme.scss

As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme SASS stylesheet and a configuration partial with configuration variables. Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways.

Bundled component

You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:

import { Button } from 'att-iot-ui/lib/button';

Raw component

You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will not include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:

import { Button } from 'att-iot-ui/lib/button/Button.js';

Customizing components

Every component accepts a theme property intended to provide a CSS Module import object that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented classname API so if you want to customize a component, you just need to provide a theme object with the appropriated classname mapping.

If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can add classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the AppBar to be purple:

import React from 'react';
import { AppBar } from 'att-iot-ui/lib/app_bar';
import theme from './PurpleAppBar.scss';

const PurpleAppBar = (props) => (
  <AppBar {...props} theme={theme} />
);

export default PurpleAppBar;

.appBar {
  background-color: #800080;
}

In this case we are adding styles to an AppBar component that already has some styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the original themes or just check the selectors you want to override in DevTools.

If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as we will see later.

Theming

You can afford theming in multiple ways. First of all, you have to understand that AT&T IoT UI stylesheets are written in SASS and configured using the config files we saw earlier. Also you may want to check colors and globals files to get an overview on the variables you have to override to get the results you want.

In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a _theme.scss SASS file:

@import "~att-iot-ui/lib/colors";

$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;

This file should be prepended to each stylesheet compilation which can be achieved in multiple ways.

Using SASS Loader

If you are using Webpack as module bundler, you are probably using sass-loader as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the data option. For example:

sassLoader: {
  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
}

In this case we are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.

Using SASS imports and props

Remember that you can import components without styles and provide those styles using the theme property. For example, a theme for a button customized with the previous theme file would be like:

@import "theme.scss";
@import "~att-iot-ui/lib/button/theme";

Then, when you use a button you can inject the appropriated theme:

import { Button } from 'att-iot-ui/lib/button/Button';
import buttonTheme from './theme/button.scss';

const ThemedButton = (props) => (
  <Button theme={buttonTheme}  {...props} />
);

export default ThemedButton;

With this technique you have to create wrappers for every component and this is not cool at all... but don't worry, we can provide the theme via context to avoid this.

Using SASS imports and context

This is a good moment to check out react-css-themr if you still didn't. Every component in AT&T IoT UI has a key assigned that can be used to provide a default CSS Module. You can create a theme like:

export default {
  ATTIOTButton: require('./button.scss')
}

Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here:

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from 'react-css-themr';
import theme from './theme/theme.js';
import App from './App.js';

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
, document.getElementById('app'))

A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself.

Server Side Rendering

The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like CSS Modules register hook or Webpack Isomorphic tools. Also, make sure you can import from node_modules.

Examples

For now we have an example demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository.

Authors and Contributors

The project started as a fork of the React Toolbox UI Kit.

To work in the project you'd need a node version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with node 6.9.1. Consider using nvm or n to handle different node versions!

To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:

$ git clone https://github.com/citrusbyte/att-iot-ui.git
$ npm install
$ cd docs/
$ npm install
$ npm start

Local documentation will then be available at http://localhost:8081/.