sportstg-bluekit/README.md


## SportSTG Bluekit UI Framework (SCSS)
### Please create PR (Pull Request) to this branch

![Bluekit](https://github.com/imgstg/neptune-react-bluekit/blob/develop/demo.png?raw=true)

```
├── gulpfile.js
├── public
|  └── index.html
├── server.js
├── src
|  ├── App.js
|  ├── components
|  |  ├── Calendar
|  |  |  └── EventWrapper
|  |  |     ├── EventWrapper.js
|  |  |     └── EventWrapper.scss
|  |  └── Global
|  |     └── InputBox
|  |        ├── InputBox.js
|  |        └── InputBox.scss
|  ├── componentsIndex.js
|  └── index.js
└── webpack.config.js
```
## How to use

- npm install sportstg-bluekit@latest --save
- import CSS `import 'sportstg-bluekit/dist/css/sportstg-bluekit.css'`
- Example for `InputBox` `import PasswordField from 'sportstg-bluekit/lib/components/Common/InputBox'`

## Development
## Things to know before start
`To keep these files nice and clean, please follow ESlint and JavaScript Style Guide Rules`
- Airbnb JavaScript Style Guide
- ESlint

## How to contribute

### 1. Gulp config & directory structure creation
Open `gulp.js`
```
createBlueKit({
	...
  paths: [
    ....
    './components/Button', // << Add your component directory
  ],
})
```

#### Create JS file
- Create new `folder` and name it following your project name/component name under `components`
- Create new `folder` and name it following by your `Component` name
  Example: `Button`
- Create new `file` and name it following by your `Component` name
  Example: `Button.js`

Then you'll have `/components/Button/Button.js`

#### Create Styles file
- Create new `file.scss` and name it following by your `Component` name inside your `Component`  folder
  Example: `Button.scss`
Then you'll have `/components/Button/Button.scss`

### Eventually, you'll have something like this
```
|  ├── components
|  |  ├── Global	// Your Project folder
|  |  |  └── Button	// Your Component folder
|  |  |     ├── Button.js	// Your Component file
|  |  |     └── Button.scss	// Your Style file (SCSS)
```

### 2. Get it running

	Before run production make sure you've installed `npm install -g serve`

- `npm run start` // Run Production environment
- `npm run dev` // Run Development environment
- `npm run build` // Build package components files