Skip to content

Commit fe263bc

Browse files
snikidevsnikidev
authored
feat/upgrade (#10)
* wip: Update packages * wip: Use React Hooks * wip: Fix typescript issues * wip: Refactor tests and introduce pre-commit hooks * wip: Add custom style Prop * wip: Removed console statement * wip: typos * wip: initial circleci config * wip: Change circleci config * wip: Update circleci config and Add coveralls config * wip: Take out coveralls config * wip: Include coveralls config in circleci * wip: Include coveralls config in circleci * wip: Update circleci config and Add coveralls config * wip: Update circleci config and Add coveralls config * wip: Update circleci config and Add coveralls config * wip: Update coveralls config * wip: Update circleci config * wip: Add codecov config * wip: Add jest coverage config * wip: Add Readme badges * Update npm version * wip: Fix webpack window issue and update Readme * Fix production webpack build
1 parent 893e632 commit fe263bc

32 files changed

+8138
-4745
lines changed

‎.babelrc.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
]
7+
}

‎.circleci/config.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
version: 2.1
2+
orbs:
3+
node: circleci/node@1.1.6
4+
codecov: codecov/codecov@1.0.2
5+
jobs:
6+
build:
7+
executor:
8+
name: node/default
9+
steps:
10+
- checkout
11+
- node/with-cache:
12+
steps:
13+
- run: yarn
14+
- run: yarn build
15+
unit-tests:
16+
executor:
17+
name: node/default
18+
steps:
19+
- checkout
20+
- node/with-cache:
21+
steps:
22+
- run: yarn
23+
- run: yarn test
24+
- codecov/upload:
25+
file: coverage/coverage-final.json
26+
workflows:
27+
tests:
28+
jobs:
29+
- unit-tests
30+
- build

‎.eslintrc.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
"rules": {
1515
"@typescript-eslint/explicit-function-return-type": "off",
1616
"react-hooks/rules-of-hooks": "warn",
17-
"react-hooks/exhaustive-deps": "warn",
17+
"react-hooks/exhaustive-deps": "off",
1818
"@typescript-eslint/explicit-member-accessibility": "off",
19-
"array-type": "off"
19+
"array-type": "off",
20+
"@typescript-eslint/ban-ts-comment": "warn"
2021
}
2122
}

‎.gitignore‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ bower_components
3131

3232
# Compiled binary addons (https://nodejs.org/api/addons.html)
3333
build/Release
34-
dist/
34+
dist
35+
styleguide
3536

3637
# Dependency directories
3738
node_modules/
@@ -63,15 +64,3 @@ typings/
6364

6465
# parcel-bundler cache (https://parceljs.org/)
6566
.cache
66-
67-
# next.js build output
68-
.next
69-
70-
# nuxt.js build output
71-
.nuxt
72-
73-
# vuepress build output
74-
.vuepress/dist
75-
76-
# Serverless directories
77-
.serverless

‎.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"semi": true,
2+
"semi": false,
33
"singleQuote": true,
44
"bracketSpacing": true,
55
"arrowParens": "avoid"

‎.storybook/main.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const custom = require('../webpack.config')
2+
3+
module.exports = {
4+
stories: ['../src/**/*.stories.[tj]sx'],
5+
webpackFinal: config => {
6+
config.module.rules.push(custom.module.rules[4])
7+
config.resolve.extensions.push(...custom.resolve.extensions)
8+
return config
9+
},
10+
addons: [
11+
'@storybook/addon-actions/register',
12+
'@storybook/addon-knobs/register',
13+
'@storybook/addon-notes/register',
14+
],
15+
}

‎README.md‎

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,95 @@
11
# React Multi Fields Input component
22

3-
React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
4-
5-
Example:
6-
7-
![react-multi-fields-input component no styles](https://github.com/kakuevn/react-multi-fields-input/raw/master/assets/rmfi-example-base.png)
8-
9-
Example with styles:
10-
11-
![react-multi-fields-input component](https://github.com/kakuevn/react-multi-fields-input/raw/master/assets/rmfi-example.png)
12-
3+
[![codecov](https://codecov.io/gh/snikidev/react-multi-fields-input/branch/master/graph/badge.svg)](https://codecov.io/gh/snikidev/react-multi-fields-input) ![npm](https://img.shields.io/npm/v/react-multi-fields-input) [![CircleCI](https://circleci.com/gh/circleci/circleci-docs/tree/teesloane-patch-5.svg?style=svg)](https://circleci.com/gh/snikidev/react-multi-fields-input/tree/master)
134

5+
React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
146

157
```js
16-
const inputs = [
17-
{
18-
type: 'number',
19-
maxLength: 2,
20-
placeholder: '00'
21-
},
22-
{
23-
type: 'number',
24-
maxLength: 2,
25-
placeholder: '00'
26-
},
27-
{
28-
type: 'number',
29-
maxLength: 2,
30-
placeholder: '00'
31-
}
32-
];
33-
348
<MultiFieldsInput
359
label="Sort Code"
3610
name="codeSort"
37-
inputs={inputs}
11+
inputs={[
12+
{
13+
maxLength: 2,
14+
placeholder: '00',
15+
},
16+
{
17+
maxLength: 2,
18+
placeholder: '00',
19+
},
20+
{
21+
maxLength: 2,
22+
placeholder: '00',
23+
},
24+
]}
3825
value="202020"
39-
isValid={false}
26+
error={`Invalid input`}
4027
onBlur={() => {}}
4128
onChange={() => {}}
42-
/>;
29+
/>
4330
```
4431

45-
See more live examples on the [website](https://react-multi-fields-input.netlify.com/).
32+
See more live examples on the [website](https://react-multi-fields-input.sniki.dev/).
4633

47-
## Props
34+
### Props
4835

49-
MultiFieldsInput component accepts the following props:
36+
| prop | required | type | default |
37+
| --------- | :------: | :--------: | ----------- |
38+
| inputs | yes | `Input[]` | |
39+
| name | yes | `string` | |
40+
| onBlur | yes | `function` | |
41+
| onChange | no | `function` | `undefined` |
42+
| error | no | `string` | ` '' ` |
43+
| value | no | `string` | ` '' ` |
44+
| autoFocus | no | `boolean` | `true` |
45+
| styles | no | `object` | `{}` |
5046

51-
```js static
52-
{
53-
inputs: Inputs[];
54-
name: string;
55-
onBlur(target: Target): void;
56-
onChange(target: Target): void;
57-
isValid?: boolean;
58-
value?: string;
59-
autoFocus?: boolean;
60-
}
61-
```
47+
`Input[]` is an array of objects with following properties
6248

63-
`inputs` is an array of objects that are constructed of
49+
| prop | required | type | default |
50+
| ----------- | :------: | :------: | ------- |
51+
| maxLength | yes | `number` | |
52+
| placeholder | no | `string` | `''` |
6453

65-
```js static
66-
{
67-
type: 'number' | 'text';
68-
maxLength: number;
69-
placeholder: string;
70-
min?: number;
71-
max?: number;
54+
`styles` prop is an object with properties to style each part of the component. You could then give it custom styles as you normally would for inline, e.g.
55+
56+
```js
57+
const styles = {
58+
container: {
59+
width: 'auto',
60+
},
61+
label: {
62+
width: '100%',
63+
color: '#4A5568',
64+
fontWeight: 'bold',
65+
marginBottom: '0.3em',
66+
fontSize: '15px',
67+
display: 'block',
68+
},
69+
inputContainer: {
70+
display: 'flex',
71+
justifyContent: 'space-between',
72+
width: '100%',
73+
},
74+
input: {
75+
borderRadius: '5px',
76+
padding: '0.75em 1em',
77+
border: '1px solid #A0AEC0',
78+
color: '#2D3748',
79+
maxWidth: '7em',
80+
},
81+
error: {
82+
boxSizing: 'border-box',
83+
marginTop: '0.7em',
84+
padding: '0.75em 1em',
85+
backgroundColor: '#FED7D7',
86+
display: 'block',
87+
borderRadius: '5px',
88+
fontWeight: 'bold',
89+
color: '#C53030',
90+
fontSize: '13px',
91+
width: '100%',
92+
},
7293
}
7394
```
7495

@@ -85,10 +106,12 @@ yarn
85106
yarn start
86107
```
87108

88-
Optional: To enable styles in styleguidist, uncomment `.scss` styles import on line 5 in `src/components/index.tsx`.
109+
Storybook starts on `localhost:3001`.
89110

90-
When done
111+
## Build
91112

92113
```
93114
yarn build
94-
```
115+
```
116+
117+
Build script builds component only. Storybook is built with `storybook:build` by [Netlify](https://www.netlify.com/).

‎assets/rmfi-example-base.png‎

-1.57 KB
Binary file not shown.

‎assets/rmfi-example.png‎

-2.8 KB
Binary file not shown.

‎jest.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
testURL: 'http://localhost/',
3+
moduleFileExtensions: ['ts', 'tsx', 'js'],
4+
moduleNameMapper: {
5+
'\\.(css|less|sass|scss)$': '<rootDir>src/__mocks__/styleMock.ts',
6+
},
7+
transform: {
8+
'^.+\\.[t|j]sx?$': 'babel-jest',
9+
},
10+
modulePathIgnorePatterns: ['<rootDir>/dist/'],
11+
setupFilesAfterEnv: ['./setupTests.ts'],
12+
collectCoverage: true,
13+
}

0 commit comments

Comments
 (0)