# Develop and reuse front-end components rapidly

[![Build Status][travis-badge]][travis]

## Overview

- Real time React components' development using react-storybook
- Develop components in ES2015 and CSS in PostCSS processor
- Publish your complied components and stylesheets as individual Node.js module
- Separating test and business logic by writing component tests using Enzyme right in this repo

## Developing Components

1. Run `npm install`
2. Run `npm start` to start front-end development
3. Develop and Write tests
4. Define components to be exported: `src/index.js`
5. Update package version and run `npm publish`

## Available Components

Activate components by appending or toggling whether
to show the stories by modifying `stories.json`

- Playground: for quick testing
- Counter: for testing Redux data flow
- News: for getting data from json-server
- Dialog
- Gallery

## Using Components in any other projects

- Install latest version of this module

```sh
npm install --save web-components
```

- Simply destruct your components like this:

```js
import Hero from 'web-components/dist/hero';
```

- Inject styling for your component in your project:

```js
// Component Base Style
import 'web-components/dist/gallery.css';
```

Enjoy!

[travis]: https://travis-ci.org/yhjor1212/web-components
[travis-badge]: https://img.shields.io/travis/yhjor1212/web-components.svg