SportSTG Bluekit UI Framework (SCSS)

Please create PR (Pull Request) to this branch

├── 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