feat/upgrade

.babelrc.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

.circleci/config.yml

@@ -0,0 +1,30 @@
+version: 2.1
+orbs:
+  node: circleci/[email protected]
+  codecov: codecov/[email protected]
+jobs:
+  build:
+    executor:
+      name: node/default
+    steps:
+      - checkout
+      - node/with-cache:
+          steps:
+            - run: yarn
+            - run: yarn build
+  unit-tests:
+    executor:
+      name: node/default
+    steps:
+      - checkout
+      - node/with-cache:
+          steps:
+            - run: yarn
+            - run: yarn test
+            - codecov/upload:
+                file: coverage/coverage-final.json
+workflows:
+    tests:
+      jobs:
+        - unit-tests
+        - build

.eslintrc.json

@@ -14,8 +14,9 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react-hooks/rules-of-hooks": "warn",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
-    "array-type": "off"
+    "array-type": "off",
+    "@typescript-eslint/ban-ts-comment": "warn"
   }
 }

.gitignore

@@ -31,7 +31,8 @@ bower_components
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
-dist/
+dist
+styleguide
 
 # Dependency directories
 node_modules/
@@ -63,15 +64,3 @@ typings/
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "semi": true,
+  "semi": false,
   "singleQuote": true,
   "bracketSpacing": true,
   "arrowParens": "avoid"

.storybook/main.js

@@ -0,0 +1,15 @@
+const custom = require('../webpack.config')
+
+module.exports = {
+  stories: ['../src/**/*.stories.[tj]sx'],
+  webpackFinal: config => {
+    config.module.rules.push(custom.module.rules[4])
+    config.resolve.extensions.push(...custom.resolve.extensions)
+    return config
+  },
+  addons: [
+    '@storybook/addon-actions/register',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-notes/register',
+  ],
+}

README.md

@@ -1,74 +1,95 @@
 # React Multi Fields Input component
 
-React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
-
-Example:
-
-![react-multi-fields-input component no styles](https://github.com/kakuevn/react-multi-fields-input/raw/master/assets/rmfi-example-base.png)
-
-Example with styles:
-
-![react-multi-fields-input component](https://github.com/kakuevn/react-multi-fields-input/raw/master/assets/rmfi-example.png)
-
+[![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)
 
+React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
 
 ```js
-const inputs = [
-  {
-    type: 'number',
-    maxLength: 2,
-    placeholder: '00'
-  },
-  {
-    type: 'number',
-    maxLength: 2,
-    placeholder: '00'
-  },
-  {
-    type: 'number',
-    maxLength: 2,
-    placeholder: '00'
-  }
-];
-
 <MultiFieldsInput
   label="Sort Code"
   name="codeSort"
-  inputs={inputs}
+  inputs={[
+    {
+      maxLength: 2,
+      placeholder: '00',
+    },
+    {
+      maxLength: 2,
+      placeholder: '00',
+    },
+    {
+      maxLength: 2,
+      placeholder: '00',
+    },
+  ]}
   value="202020"
-  isValid={false}
+  error={`Invalid input`}
   onBlur={() => {}}
   onChange={() => {}}
-/>;
+/>
 ```
 
-See more live examples on the [website](https://react-multi-fields-input.netlify.com/).
+See more live examples on the [website](https://react-multi-fields-input.sniki.dev/).
 
-## Props
+### Props
 
-MultiFieldsInput component accepts the following props:
+| prop      | required |    type    | default     |
+| --------- | :------: | :--------: | ----------- |
+| inputs    |   yes    | `Input[]`  |             |
+| name      |   yes    |  `string`  |             |
+| onBlur    |   yes    | `function` |             |
+| onChange  |   no     | `function` | `undefined` |
+| error     |   no     | `string`   | ` '' `      |
+| value     |   no     |  `string`  | ` '' `      |
+| autoFocus |   no     | `boolean`  | `true`      |
+| styles    |   no     |  `object`  | `{}`        |
 
-```js static
-{
-  inputs: Inputs[];
-  name: string;
-  onBlur(target: Target): void;
-  onChange(target: Target): void;
-  isValid?: boolean;
-  value?: string;
-  autoFocus?: boolean;
-}
-```
+`Input[]` is an array of objects with following properties
 
-`inputs` is an array of objects that are constructed of
+| prop        | required |   type   | default |
+| ----------- | :------: | :------: | ------- |
+| maxLength   |   yes    | `number` |         |
+| placeholder |    no    | `string` | `''`    |
 
-```js static
-{
-  type: 'number' | 'text';
-  maxLength: number;
-  placeholder: string;
-  min?: number;
-  max?: number;
+`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.
+
+```js
+const styles = {
+  container: {
+    width: 'auto',
+  },
+  label: {
+    width: '100%',
+    color: '#4A5568',
+    fontWeight: 'bold',
+    marginBottom: '0.3em',
+    fontSize: '15px',
+    display: 'block',
+  },
+  inputContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  input: {
+    borderRadius: '5px',
+    padding: '0.75em 1em',
+    border: '1px solid #A0AEC0',
+    color: '#2D3748',
+    maxWidth: '7em',
+  },
+  error: {
+    boxSizing: 'border-box',
+    marginTop: '0.7em',
+    padding: '0.75em 1em',
+    backgroundColor: '#FED7D7',
+    display: 'block',
+    borderRadius: '5px',
+    fontWeight: 'bold',
+    color: '#C53030',
+    fontSize: '13px',
+    width: '100%',
+  },
 }
 ```
 
@@ -85,10 +106,12 @@ yarn
 yarn start
 ```
 
-Optional: To enable styles in styleguidist, uncomment `.scss` styles import on line 5 in `src/components/index.tsx`.
+Storybook starts on `localhost:3001`.
 
-When done
+## Build
 
 ```
 yarn build
-```
+```
+
+Build script builds component only. Storybook is built with `storybook:build` by [Netlify](https://www.netlify.com/).

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  testURL: 'http://localhost/',
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': '<rootDir>src/__mocks__/styleMock.ts',
+  },
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  collectCoverage: true,
+}