Skip to content

Commit d5adc9e

Browse files
mstaicumstaicu
committed
feat(Incrementor): Add initial version
0 parents  commit d5adc9e

File tree

15 files changed

+666
-0
lines changed

15 files changed

+666
-0
lines changed

‎.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": ["env", "react"],
3+
"env": {
4+
"test": {
5+
"plugins": ["istanbul"],
6+
"sourceMaps": "inline"
7+
}
8+
},
9+
"plugins": ["transform-class-properties", "transform-object-rest-spread"]
10+
}

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
coverage/

‎.eslintrc‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"extends": "airbnb-base",
3+
"parser": "babel-eslint",
4+
"parserOptions": {
5+
"ecmaVersion": 6,
6+
"sourceType": "module",
7+
"ecmaFeatures": {
8+
"jsx": true,
9+
"modules": true,
10+
"experimentalObjectRestSpread": true
11+
}
12+
},
13+
"plugins": [
14+
"react"
15+
],
16+
"rules": {
17+
"no-param-reassign": 0,
18+
"camelcase": 0,
19+
"no-underscore-dangle": 0,
20+
"no-unused-vars": 0,
21+
"import/prefer-default-export": 0,
22+
"no-unused-expressions": 0
23+
}
24+
}

‎.gitignore‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
.DS_Store
61+
dist

‎.npmignore‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
.DS_Store

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
6

‎.nycrc‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"include": [
3+
"src"
4+
],
5+
"check-coverage": true,
6+
"branches": 100,
7+
"functions": 100,
8+
"lines": 100,
9+
"statements": 100,
10+
"reporter": [
11+
"text",
12+
"lcov"
13+
],
14+
"require": [
15+
"babel-register"
16+
],
17+
"all": true,
18+
"instrument": false,
19+
"sourceMap": false
20+
}

‎LICENSE‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright 2017 Mircea Staicu
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<div align="center">
2+
<h1>✨react-incrementor🎄</h1>
3+
</div>
4+
5+
<p align="center" style="font-size: 1.2rem;">Component to build simple, flexible, and accessible incrementor components</p>
6+
7+
[![Build Status][build-badge]][build]
8+
[![Code Coverage][coverage-badge]][coverage]
9+
[![downloads][downloads-badge]][npmcharts]
10+
[![version][version-badge]][package]
11+
[![MIT License][license-badge]][license]
12+
13+
[![PRs Welcome][prs-badge]][prs]
14+
15+
[![size][size-badge]][unpkg-dist]
16+
[![gzip size][gzip-badge]][unpkg-dist]
17+
18+
## The problem
19+
20+
You want an incrementor component that's simple and gives you complete control over
21+
rendering and state.
22+
23+
## This solution
24+
25+
This follows the `controlled prop pattern` and `render prop pattern` to expose an API that
26+
renders nothing and simply encapsulates the logic of a incrementor component.
27+
28+
## Table of Contents
29+
30+
* [Installation](#installation)
31+
* [Usage](#usage)
32+
* [Props:](#props)
33+
* [defaultValue](#defaultvalue)
34+
* [value](#value)
35+
* [onChange](#onchange)
36+
* [render](#render)
37+
* [Examples](#examples)
38+
* [Inspiration](#inspiration)
39+
* [LICENSE](#license)
40+
41+
## Installation
42+
43+
This module is distributed via [npm][npm] which is bundled with [node][node] and
44+
should be installed as one of your project's `dependencies`:
45+
46+
```
47+
npm install --save react-incrementor
48+
```
49+
50+
> This package also depends on `react` and `prop-types`. Please make sure you
51+
> have those installed as well.
52+
53+
## Usage
54+
55+
```jsx
56+
import React from 'react';
57+
import { render } from 'react-dom';
58+
59+
import Incrementor from 'react-incrementor';
60+
61+
function BasicIncrementor() {
62+
return (
63+
<Incrementor
64+
render={({ value, getDecrementerProps, getIncrementerProps }) => {
65+
return (
66+
<div>
67+
<div>
68+
<span>{value}</span>
69+
</div>
70+
71+
<div>
72+
<button {...getDecrementerProps()}>Minus 1</button>
73+
<button {...getIncrementerProps()}>Plus 1</button>
74+
</div>
75+
</div>
76+
);
77+
}}
78+
/>
79+
);
80+
}
81+
82+
render(<BasicIncrementor />, document.getElementById('root'));
83+
```
84+
85+
`react-incrementor` is the only component. It doesn't render anything itself, it just
86+
calls the `render` function and renders that.
87+
88+
## Props:
89+
90+
### defaultValue
91+
92+
> `number` | defaults to `0`
93+
94+
The default `value` state.
95+
96+
### onChange
97+
98+
> `function(value: number)` | optional
99+
100+
Called at interaction with the incrementor
101+
102+
* `value`: The new value after increment / decrement
103+
104+
### value
105+
106+
> `number` | **control prop**
107+
108+
react-incrementor manages its own state internally and calls your `onChange`
109+
handler whenever the `value` state changes. Pass the `value` state as a prop
110+
and that state becomes controlled. It is your responsibility to keep the `value` updated by re-rendering the component.
111+
112+
### render
113+
114+
> `function({})` | _required_
115+
116+
This is called with an object that exposes the public API of this component.
117+
118+
The function is passed as the render prop:
119+
`<Incrementor render={(value) => {/* awesome code */}} />`
120+
121+
<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
122+
123+
| property | category | type | description |
124+
| --------------------- | ----------- | ------------------------- | ------------------------------------------------------------------------------------------------------------ |
125+
| `value` | state | `boolean` | The current `value` state of the incrementor |
126+
| `getIncrementerProps` | prop getter | `function(props: object)` | returns the props you should apply to the incrementer button element you render. Includes `aria-` attributes |
127+
| `getDecrementerProps` | prop getter | `function(props: object)` | returns the props you should apply to the decrementer button element you render. Includes `aria-` attributes |
128+
129+
## Inspiration
130+
131+
This was build as a learning exercise for the `controlled prop pattern` and `render prop pattern`. It is heavily influenced by [Kent C. Dodds](https://github.com/kentcdodds)'s [react-toggled](https://github.com/kentcdodds/react-toggled) component
132+
133+
## LICENSE
134+
135+
MIT

‎jest.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
setupFiles: ['raf/polyfill', '<rootDir>/jest.init.js'],
3+
snapshotSerializers: ['enzyme-to-json/serializer'],
4+
};

0 commit comments

Comments
 (0)