Skip to content

Commit 2187958

Browse files
author
Andrei Arkhipov
authored
Merge pull request #7 from awibox/develop
#6: README.md was updated
2 parents cf2c325 + 854a13d commit 2187958

File tree

4 files changed

+137
-64
lines changed

4 files changed

+137
-64
lines changed

‎.github/CONTRIBUTING.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Contributing to react-promise-loader
2+
:pray: Thank you for wanting to contribute to the development of the project!
3+
4+
5+
The following is a set of guidelines for contributing.
6+
7+
## Code of Conduct
8+
Please read our [Code of Conduct](/.github/CODE_OF_CONDUCT.md). By participating, you should uphold this Code of Conduct.
9+
10+
## Using the issue tracker
11+
If you want to solve a problem that is not described in issue tracker please create the necessary issue.
12+
When creating a new issue use the appropriate templates (Bug report or Feature request).
13+
14+
## Getting start
15+
Before you start run the ```yarn setup``` command which will install a git hook that checks the code before committing.
16+
17+
When writing code follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript). ESlint will help you by highlighting the code in your IDE.
18+
19+
## Commit name
20+
Name the commit as follows: ```#NUMBER_ISSUE: WHAT_WAS_DONE```. For example: ```#10: Problem with auth_token was fixed```.
21+
22+
## Pull request
23+
The name of pull request should contain the issue number and a description of the solved problem.
24+
After creating the pull request make sure that all automatic checks have been passed.
25+
26+
## License
27+
By contributing your code you agree to license your contribution under the our [License](/LICENSE).

‎.github/hooks/pre-commit

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
#!/usr/bin/env bash
2+
3+
4+
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$')
5+
BIN_PATH="$(git rev-parse --show-toplevel)/node_modules/.bin"
6+
7+
eslint() {
8+
ESLINT="$BIN_PATH/eslint"
9+
10+
# Check for eslint
11+
if [[ ! -x "$ESLINT" ]]; then
12+
printf "\t\033[41mPlease install ESLint\033[0m\n"
13+
exit 1
14+
fi
15+
16+
echo "Linting modified files"
17+
18+
echo $STAGED_FILES | xargs $ESLINT
19+
20+
if [[ $? == 0 ]]; then
21+
printf "\n\033[1;32mLint Passed\033[0m\n"
22+
else
23+
printf "\n\033[41mLint Failed:\033[0m Fix lint errors and try again!\n"
24+
exit 1
25+
fi
26+
}
27+
28+
jest() {
29+
JEST="$BIN_PATH/jest"
30+
31+
# Check for jest
32+
if [[ ! -x "$JEST" ]]; then
33+
printf "\t\033[41mPlease install Jest\033[0m\n"
34+
exit 1
35+
fi
36+
37+
echo "Testing related to modified files"
38+
39+
$JEST --bail --findRelatedTests $STAGED_FILES
40+
41+
if [[ $? == 0 ]]; then
42+
printf "\n\033[1;32mTest Passed\033[0m\n"
43+
else
44+
printf "\n\033[41mTest Failed:\033[0m Fix test errors and try again!\n"
45+
exit 1
46+
fi
47+
}
48+
49+
# Exit if no files modified
50+
if [[ "$STAGED_FILES" = "" ]]; then
51+
exit 0
52+
fi
53+
54+
eslint
55+
jest
56+
57+
exit $?

‎README.md

+51-63
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,71 @@
1-
![react-npm-package-template](https://repository-images.githubusercontent.com/236028186/e0034e00-3ee4-11ea-8676-b3f80c86678a)
1+
![react-promise-loader](https://repository-images.githubusercontent.com/236146663/26a78580-3f83-11ea-9773-25da38f10104)
22

33
<p align="center">
4-
<a href="https://www.npmjs.com/package/react-npm-package-template">
5-
<img src="https://img.shields.io/npm/v/react-npm-package-template" alt="npm version">
4+
<a href="https://www.npmjs.com/package/react-promise-loader">
5+
<img src="https://img.shields.io/npm/v/react-promise-loader" alt="npm version">
66
</a>
7-
<a href="https://travis-ci.org/awibox/react-npm-package-template">
8-
<img src='https://travis-ci.org/awibox/react-npm-package-template.svg?branch=master' alt='Build' />
7+
<a href="https://travis-ci.org/awibox/react-promise-loader">
8+
<img src='https://travis-ci.org/awibox/react-promise-loader.svg?branch=master' alt='Build' />
99
</a>
10-
<a href='https://coveralls.io/github/awibox/react-npm-package-template?branch=master'>
11-
<img src='https://coveralls.io/repos/github/awibox/react-npm-package-template/badge.svg?branch=master' alt='Coverage Status' />
10+
<a href='https://coveralls.io/github/awibox/react-promise-loader?branch=master'>
11+
<img src='https://coveralls.io/repos/github/awibox/react-promise-loader/badge.svg?branch=master' alt='Coverage Status' />
1212
</a>
13-
<a href="https://www.npmjs.com/package/react-npm-package-template">
14-
<img src="https://img.shields.io/npm/dm/react-npm-package-template" alt="Downloads">
13+
<a href="https://www.npmjs.com/package/react-promise-loader">
14+
<img src="https://img.shields.io/npm/dm/react-promise-loader" alt="Downloads">
1515
</a>
16-
<img src="https://img.shields.io/github/license/awibox/react-npm-package-template" alt="license">
16+
<img src="https://img.shields.io/github/license/awibox/react-promise-loader" alt="license">
1717
</p>
1818

1919
## Table of contents
20-
* [How to install](#howtoinstall)
21-
* [Initializing the package](#initializing)
22-
* [Rename a component](#rename)
23-
* [Build of the package](#build)
24-
* [Publishing a package](#publish)
25-
* [Travis CI](#travis)
26-
* [Coveralls](#coveralls)
27-
* [Badges in the readme](#badges)
20+
* [Installation](#installation)
21+
* [Getting started](#gettingstarted)
22+
* [The settings of the component](#settings)
23+
* [Contributing](#contributing)
2824

29-
<a name="howtoinstall"></a>
30-
## How to install
31-
You can use this project like template.
32-
To do this, you need press button "**Use this template**".
33-
34-
Or clone repository and go to the project folder.
35-
```bash
36-
git clone https://github.com/awibox/react-redux-app-boilerplate.git ProjectName
37-
cd ProjectName
38-
```
39-
Then you should install required dependencies.
25+
<a name="installation"></a>
26+
## Installation
27+
You need to install promise loader and promise tracker packages:
4028
```bash
41-
yarn install
29+
npm install react-promise-loader react-promise-tracker
4230
```
43-
<a name="initializing"></a>
44-
## Initializing the package
45-
The first step is to initialize your package. You should execute following command:
31+
You can use yarn:
4632
```bash
47-
npm init
33+
yarn add react-promise-loader react-promise-tracker
4834
```
49-
And fill in the required fields (package name, version, license). You can correct the other fields manually in the **package.json**.
35+
<a name="gettingstarted"></a>
36+
## Getting started
37+
Wrap promises that you would like to track as in the following example:
38+
```diff
39+
+ import { trackPromise} from 'react-promise-tracker';
40+
//...
5041

51-
<a name="rename"></a>
52-
## Rename a component
53-
The next step is to replace the ```YourComponentName``` in the entire project with the one you need.
54-
55-
<a name="build"></a>
56-
## Build of the package
57-
After writing the code you need to build the package with the following command:
58-
```bash
59-
yarn build
42+
+ trackPromise(
43+
fetchUsers(); // You function that returns a promise
44+
+ );
6045
```
46+
Then you need to add the Loader component and send data from the react-promise-tracker:
47+
```diff
48+
+ import { usePromiseTracker } from 'react-promise-tracker';
49+
+ import Loader from 'react-promise-loader';
6150

62-
<a name="publish"></a>
63-
## Publishing a package
64-
To publish a package, run the command:
65-
```bash
66-
npm publish
67-
```
68-
If you are not logged in to npm you should run the command before publishing:
69-
```bash
70-
npm login
51+
const App = () => (
52+
<div className="app">
53+
...
54+
+ <Loader promiseTracker={usePromiseTracker} color={'#3d5e61'} background={'rgba(255,255,255,.5)'} />
55+
</div>
56+
);
57+
export default App;
7158
```
7259

73-
<a name="travis"></a>
74-
## Travis CI
75-
You need to register on the [Travis CI](https://travis-ci.org/) and connect the repository.
76-
77-
<a name="coveralls"></a>
78-
## Coveralls
79-
You need to register on the [Coveralls](https://coveralls.io/) and connect the repository.
60+
<a name="settings"></a>
61+
## The settings of the component
62+
|Parameter|Type|Description|Default|
63+
|--------------------|--------|-----------|-------|
64+
|**background**|string|Sets the color for the background in any format that supports css|``` rgba(255,255,255,.5) ```|
65+
|**color**|string|Sets the color of the spinner|``` #000 ```|
66+
|**promiseTracker**|boolean|You need to set ```usePromiseTracker``` function from the ```react-promise-tracker```||
67+
|**loading**|boolean|If you need to run the loader without tracking promises you should set ```true```|``` false ```|
8068

81-
<a name="badges"></a>
82-
## Badges in the README.md
83-
For **badges** to work you need to change the repository name in the link and image paths.
69+
<a name="contributing"></a>
70+
## Contributing
71+
Please read through our [CONTRIBUTING.md](/.github/CONTRIBUTING.md).

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"lint": "eslint --report-unused-disable-directives src",
99
"fix": "eslint --fix --report-unused-disable-directives src",
1010
"test": "jest",
11-
"coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
11+
"coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls",
12+
"setup": "cp ./.github/hooks/pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit"
1213
},
1314
"repository": {
1415
"type": "git",

0 commit comments

Comments
 (0)