# Plurall React Componetes

### How to run

Clone this repository and ```cd plurall-react-components```

The first time you need run
```shell
yarn && yarn build
```

To run project
```shell
yarn bootstrap && yarn start
```

if yout development components or new component you nedd run this in other terminal tab
```shell
yarn start:watch
```

to publish in npm
```
export NPM_TOKEN=token-do-plurall-dev
yarn deploy
```

open [localhost:6006/](http://localhost:6006/)

#### Using components locally

To test a component locally in an external application, uninstall the component
and reinstall it pointing to the location on your machine where the component
source code is located.

For exemple, if you cloned the repository inside a folder called `projects` and
want to test locally the `Header` component, run
```
npm uninstall plurall-header
npm install --save ~/projects/plurall-react-components/packages/plurall-component-header
```

Your `package.json` will be updated, and will now fetch the component from your
local disk, instead of a remote repository:
```
"plurall-header": "file:../plurall-react-components/packages/plurall-component-header"
```

### Create a new component

- Create a new folder in `/packages/` with this format `plurall-component-nomeComponent`
- run `npm init` for create a new component - `Follow the steps to create or look at the button, for example.`
- Create a `src` folder inside
- Crate a `index.js`
    - For example:
    ```js
        import YourComponetName from './YourComponetName';

        export {
            YourComponetName,
        };
    ```
- Create a `YourComponetName.js`
    - For Example
    ```jsx
    import React from 'react'
    import PropTypes from 'prop-types'

    class YourComponetName extends React.Component {
        render() {
        const { children } = this.props;
        return (
          <div>
            {children}
            <style jsx>{`
                div { color: red }
            `}</style>
          </div>
        );
      }
    }

    YourComponetName.propTypes = {
        children: PropTypes.node
    };
    
    export default YourComponetName
    ```
- Now goto `stories/index.js` and add new component, for example:
```js
import { MyComponent } from '../packages/plurall-component-YourComponetName/src'
storiesOf('MyComponent', module)
  .addWithInfo('Default', () => (
    <MyComponent />
  ))
```