# sportstg-react-ui

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

Latest version **1.10.1** (published 2017-12-28) · 0 weekly downloads

## Install

```sh
npm install sportstg-react-ui
pnpm add sportstg-react-ui
yarn add sportstg-react-ui
bun add sportstg-react-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.10.1 |
| Published | 2017-12-28 |
| First published | 2017-12-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ttawan |

## Links

- npm: https://www.npmjs.com/package/sportstg-react-ui
- npm.io page: https://npm.io/package/sportstg-react-ui

## Dependencies (18)

- [react](https://npm.io/package/react.md) ^16.1.1
- [moment](https://npm.io/package/moment.md) ^2.19.2
- [rimraf](https://npm.io/package/rimraf.md) ^2.6.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.1.1
- [valid-url](https://npm.io/package/valid-url.md) ^1.0.9
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [url-loader](https://npm.io/package/url-loader.md) ^0.6.2
- [react-share](https://npm.io/package/react-share.md) ^1.18.0
- [react-table](https://npm.io/package/react-table.md) ^6.7.4
- [react-toastr](https://npm.io/package/react-toastr.md) ^3.0.0
- [react-toggle](https://npm.io/package/react-toggle.md) ^4.0.2
- [react-bluekit](https://npm.io/package/react-bluekit.md) ^0.4.4
- [react-datetime](https://npm.io/package/react-datetime.md) ^2.11.0
- [react-interval](https://npm.io/package/react-interval.md) ^2.0.2
- [google-map-react](https://npm.io/package/google-map-react.md) ^0.25.0
- [react-fontawesome](https://npm.io/package/react-fontawesome.md) ^1.6.1
- [react-click-outside](https://npm.io/package/react-click-outside.md) ^2.3.1

## Recent versions

- 1.10.1 (latest) — 2017-12-28
- 1.10.0 — 2017-12-28
- 1.0.9 — 2017-12-28
- 1.0.7 — 2017-12-28
- 1.0.6 — 2017-12-28
- 1.0.5 — 2017-12-28
- 0.1.1 — 2017-12-28

## README

## 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 InputBox from 'sportstg-bluekit/lib/components/Common/InputBox'`
```
import 'sportstg-bluekit/dist/css/sportstg-bluekit.css'
import InputBox from 'sportstg-bluekit/lib/components/Common/InputBox'

<InputBox
 type="password"
 label="Password"
/>

```

## 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`

---
_Source: https://npm.io/package/sportstg-react-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._