pix8

React UI Components

Modular react.js common UI components for pix8.

Intro

UI react is... will be a modular UI component library based on react.js and use by front-end dev. It sorely needs a better name!

It's built in React + ES6, utilizing Styled-Components for the graceful encapsulation of either style or structure strictly at component level, and bundled using rollup.

Features

This is built on top of the excellent React-Modern-Library-BoilerPlate.

• Support all modern JS language features for component development out of the box
• Build process to convert source to umd and es module formats for publishing to npm
• Comes with an example app using a standard create-react-app, serving 2 purposes
• Use Rollup for build process and Babel for transpilation
  • See the blog post for an explanation of Rollup vs Webpack
• Allow the use of npm modules within your library, either as dependencies or peer-dependencies
• Supports Styled Components
• Testing available with Jest, using react-scripts from create-react-app

Development Workflow

Now you're ready to run a local version of rollup that will watch your src/ component and automatically recompile it into dist/ whenever you make changes.

Library Development

# run example to start developing your new component against
npm link # the link commands are important for local development
npm install # disregard any warnings about missing peer dependencies
npm start # runs rollup with watch flag

Local Development

We'll also be running our example/ create-react-app that's linked to the local version of your @pix8/ui-react module.

# (in another terminal window) launch local development environment
cd example
npm install
npm link @pix8/ui-react
npm start # runs create-react-app dev server

Deployment

Build and dispatch the module to NPM

# build deployables, increment version/tag and publish
cd example
npm install
npm link pix8/ui-react
npm run build
npm version v<version> | major | minor | patch OR git tag -a v<version> -m "<comment>"
npm pack
npm publish

Note: Please delete the generated archived module once finished

Testing

Initial pass did not have a large focus on testing. However, one thing to note ... if you get the following error:

Error: Error watching file for changes: EMFILE

You will need to install watchman via homebrew (brew install watchman) to have a watcher running on your tests. See this issue on the Jest repo.