Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wayou/react-lib-starter
A react component boilerplate with tech stack of react, typescript, sass, jest, storybook, rollup, closure
https://github.com/wayou/react-lib-starter
closure jest react rollup sass storybook stylelint tslint typesctipt
Last synced: 20 days ago
JSON representation
A react component boilerplate with tech stack of react, typescript, sass, jest, storybook, rollup, closure
- Host: GitHub
- URL: https://github.com/wayou/react-lib-starter
- Owner: wayou
- License: mit
- Created: 2018-09-09T15:50:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-10T03:01:28.000Z (over 6 years ago)
- Last Synced: 2024-11-22T16:51:43.171Z (3 months ago)
- Topics: closure, jest, react, rollup, sass, storybook, stylelint, tslint, typesctipt
- Language: JavaScript
- Size: 510 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lib-starter
[](https://circleci.com/gh/wayou/react-lib-starter)
[](./LICENSE)
[](https://www.npmjs.com/package/react-lib-starter)
[](https://www.npmjs.com/package/react-lib-starter)
A react component boilerplate with tech stack of
- react: UI framework
- typescript: for type checking
- sass: for css processing
- jest: for tests
- tslint & stylelint: for lint
- storybook: for demo
- rollup: for bundling
- closure: for code comporession
### Setup
- clone repo
- remove `.git` directory
- alter README, rollup config files and others to meet your requirments
- `yarn install`
- `yarn start` to start development. this will start a local server and open http://localhost:3000 to see demo with live reload.
other available scripts:
- `yarn build` to generate dist output
- `yarn test` to run tests
- `yarn storybook` to start local storybook
- `yarn storybook:deploy` to deploy storybook to github pages
#### Circle CI configuration
Here we use a CI service to
- generate `dist` files
- run tests and lint
- deploy stories to github pages
Either Travis or Circle CI will do, in this boilerplate we use the latter.
To intergrate Circle CI and make it work
- update the username and email in [.circleci/config.yml](./.circleci/config.yml)
- setup `GH_TOKEN` environment variables in Circle CI for the project
- generate a github personal access tokens from `https://github.com/settings/tokens`
- add an environment variable called `GH_TOKEN` in Circle CI project setting page `https://circleci.com/gh///edit#env-vars` and it's value is the github personal access token above.
- give Circle CI write access for the repo by adding suer key at `https://circleci.com/gh///edit#checkout`
**BELOW IS A TEMPLATE README FOR THE COMPONENT**
---
### Features
**List features as list.**
- feature one
- feature two
- ...
### Installing
Using command line:
```bash
$ yarn add
# or
$ npm i -S
```
Using cdn:
```html
```
### Usage
**A simple usage demonstration with code goes here.**
```js
import YourComponent from '';
class Example extends React.Component{
public render(){
return
}
}
```
### Options
**List and describe available options for your component.**
- `optoin`: description goes here
- type: `string`
- default: `the default value`
- `callback`: description goes here
- type: `(event: Event) => void`
### Examples
**Publish stories to github pages for online demo.**
See the [examples](https://.github.io//index.html).
#### Run the example at local
clone this repo then:
```bash
$ yarn install && yarn start
```
navigate to http://localhost:3000
### Development
**Describe how others can run the project local and contribute.**
For development, clone this repo then
```bash
$ yarn install && yarn start
```
this will start a local server then open browser and go to http://localhost:3000 to see examples in action.
available scripts:
- `build`: generate budnles that are ready to publish
- `dev`: start local server for local development
- `lint`: run tslint & stylelint
- `test`: test the component
### Acknowledgement
**Other infomation that may help**