react-ui-lib-css-modules-minimal-config v0.0.1

React UI lib POC using CSS Modules + Webpack + Sass + PostCSS (minimal config)

• It is a POC UI library. Not production ready.
• The components are not fully formed.
• It's essentially a "scaffold" to test CSS Modules + Sass.

View UI library components in browser

• Comment out the following sections in "webpack.config.js"

libraryTarget: 'umd'

externals: {
    react: { ... },
    'react-dom': { ... },
}

• Start server npm start.
• Component changes (e.g. CSS) trigger a re-compilation but Hot Module Reloading has not been implemented, so restart server to see changes in browser.

How does this all work as an installable library / NPM package?

The library has been published to NPM.

"package.json" configuration

• Library has been exported with npm run lib.
• Package name has been defined - e.g. "name": "react-ui-lib-css-modules-minimal-config".
• Library entry point has been defined - e.g. "main": "lib/index.js".

Component configuration

• Each component in "src\lib\components" has an associated ".js", ".scss" and ".json" file.
• Each component is exported as a module in "src\lib\index.js" - e.g. export { default as Button } from './components/Button';.

So how do I use this library from another React application?

1. Install library in your consuming app

npm i react-ui-lib-css-modules-minimal-config

2. Install other Node packages if not already installed

• npm i --save-dev ...packages...
• Look at libraries "package.json" for dev dependencies.

3. Modify your app's "webpack.config.js"

1. Requires 'ExtractTextPlugin' to generate stylesheet, and 'autoprefixer' for PostCSS

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

2. Add this plugin to plugins array

plugins: [
  // ... other plugins ...
  new ExtractTextPlugin({
    filename: 'ui-lib.css', // Or whatever filepath/name you use in your app
    allChunks: true
  })
],

3. Sass / CSS loader config...

{
  test: /\.s|css$/,
  use: ExtractTextPlugin.extract({
    use: [
      {
        loader: 'css-loader',
        options: {
          minimize: true,
          sourceMap: true,
          modules: true,
          importLoaders: 2,
          localIdentName: '[name]___[local]___[hash:base64:5]'
        }
      },
      {
        loader: 'postcss-loader',
          options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        }
      },
      'sass-loader'
    ]
  })
},

4. Example <Button/> component usage

import React, { Component } from 'react';
import { Button } from 'react-ui-lib-css-modules-minimal-config';

export default class MyComponent extends Component {
  render() {
    return (
      <div className="App">
        <Button label="button" />

        <Button className="primary" disabled="disabled" label="disabled primary" />

        <Button className="secondary" label="secondary button" />

        <Button className="primary" size="small" label="small primary" />

        <Button className="icon" icon="info" label="with icon" />
      </div>
    );
  }
}