This is a react component library starter kit for adding and using reusable react components. Built on React, Rollup, and Storybook.

To see demos and component documentation, view the storybook.

• Clone this project
• Make sure you rename your component library in package.json

Just import the react component t you with to use:

import React, { Component } from 'react';
import { MockComponent } from 'my-component-library';

class MyComponent extends Component {
  render() {
	  return (
		  <div>
			  <MockComponent />
		  </div>
	  );
  }
}

• Add your new components to the src/lib directory.
• Each component directory should contain, at minimum, these files:
  • The index.js that deals with exporting the component
  • The actual component file (MyComponent.js)
  • Your component’s .css file (in postcss)
  • Your components .story.js file for storybook demonstration
  • Your component’s .test.js file
  • Any other needed sub component files
  • The json file automatically generated by postcss (after a build)
• Import/export your component to src/lib/index.js

• Why use PostCSS?
  • More javascript-y
  • NO MOAR NODE-SASS
  • Faster to compile
  • Better exposes classes and animations to our javascript
  • Is extensible
  • Much like react, only uses the features you want to use
• Why use CSS modules?
  • Classnames and animation names are locally scoped (which is very useful for a component library that will be used in many projects)

• Write tests, y’all
• Make sure your component has PropTypes. These will be validated when the developer is in development environment and will also be used in storybook demos for documentation.
• Use default props when appropriate
• Write jsdocs for your component if you feel like it
• Write tests, y’all

As you develop, create a .story.js file for your component. You can view and test your component as you develop it by running npm run storybook and going to localhost:6006

Once finished, update the version of the package and npm publish