Develop

.eslintrc.json

@@ -1,14 +1,21 @@
 {
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"jsx": true,
-		"useJSXTextNode": true
-	},
-	"extends": [ "plugin:@typescript-eslint/recommended", "prettier", "prettier/@typescript-eslint" ],
-	"plugins": [ "@typescript-eslint" ],
-	"rules": {
-		"@typescript-eslint/explicit-function-return-type": "off",
-		"react-hooks/rules-of-hooks": "error",
-		"react-hooks/exhaustive-deps": "warn"
-	}
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "jsx": true,
+    "useJSXTextNode": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "plugins": ["@typescript-eslint", "react-hooks"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "array-type": "off"
+  }
 }

.gitignore

@@ -44,6 +44,7 @@ typings/
 # Optional npm cache directory
 .npm
 .vs
+.netlify
 
 # Optional eslint cache
 .eslintcache

README.md

@@ -1,35 +1,88 @@
-# React npm package starter
+# React Multi Fields Input component
 
-This is a starter project for custom React components
+React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
 
-## Start
+Example:
 
-To start the development run 
+![react-multi-fields-input component](/assets/rmfi-example.png)
 
+```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}
+  value="202020"
+  isValid={false}
+  onBlur={() => {}}
+  onChange={() => {}}
+/>;
 ```
-yarn install
-npm i -g @storybook/cli
-getstorybook
-``` 
 
-and then `yarn start`. In a separate terminal run `yarn run storybook` to test the component.
+See more live examples on the [website](https://react-multi-fields-input.netlify.com/).
 
-## Build
+## Props
 
-To build the project run
+MultiFieldsInput component accepts the following props:
 
+```js static
+{
+  inputs: Inputs[];
+  name: string;
+  onBlur(target: Target): void;
+  onChange(target: Target): void;
+  isValid?: boolean;
+  value?: string;
+  autoFocus?: boolean;
+}
 ```
-yarn run build 
-yarn link
+
+`inputs` is an array of objects that are constructed of
+
+```js static
+{
+  type: 'number' | 'text';
+  maxLength: number;
+  placeholder: string;
+  min?: number;
+  max?: number;
+}
 ```
 
-`yarn link` will be used to dev-test the component in any project while developing it
+The object that is being returned `onBlur` and `onChange`:
 
-## Deploy to npm
+```js static
+{ name: '', value: ''}
+```
 
-To deploy the ready React components run 
+## Develop
 
+``
+yarn
+yarn start
 ```
-yarn login
-yarn publish
+
+Optional: To enable styles in styleguidist, uncomment `.scss` styles import on line 5 in `src/components/index.tsx`.
+
+When done
+
 ```
+yarn build
+```

package.json

@@ -1,58 +1,92 @@
 {
-	"name": "react-multi-fields-input",
-	"version": "0.1.0",
-	"main": "dist/index.js",
-	"author": "kakuevn <n.kakuev@gmail.com>",
-	"license": "MIT",
-	"scripts": {
-		"dev": "webpack --colors --progress --watch",
-		"build": "webpack --colors --progress -p",
-		"eslint": "eslint './src/**/*.{ts,tsx}'",
-		"eslint:fix": "eslint src --fix",
-		"start": "npm-run-all --parallel dev test:watch",
-		"test": "jest",
-		"test:watch": "jest --watch"
-	},
-	"jest": {
-		"testURL": "http://localhost/",
-		"moduleDirectories": [
-			"node_modules",
-			"shared"
-		],
-		"transformIgnorePatterns": [
-			"/node_modules/(?!(our-react-components-.*?\\.js$))"
-		],
-		"moduleNameMapper": {
-			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
-		},
-		"transform": {
-			"^.+\\.(js|jsx)$": "babel-jest"
-		}
-	},
-	"dependencies": {
-		"@types/react": "^16.8.14",
-		"@types/react-dom": "^16.8.4",
-		"react": "^16.8.6",
-		"react-dom": "^16.8.6",
-		"webpack": "^4.30.0"
-	},
-	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^1.7.0",
-		"@typescript-eslint/parser": "^1.7.0",
-		"awesome-typescript-loader": "^5.2.1",
-		"babel-jest": "^24.7.1",
-		"eslint": "^5.16.0",
-		"eslint-config-prettier": "^4.2.0",
-		"eslint-formatter-friendly": "^6.0.0",
-		"eslint-loader": "^2.1.2",
-		"eslint-plugin-react-hooks": "^1.6.0",
-		"file-loader": "^3.0.1",
-		"jest": "^24.7.1",
-		"npm-run-all": "^4.1.5",
-		"prettier": "^1.17.0",
-		"source-map-loader": "^0.2.4",
-		"typescript": "^3.4.5",
-		"uglifyjs-webpack-plugin": "^2.1.2",
-		"webpack-cli": "^3.3.1"
-	}
+  "name": "react-multi-fields-input",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "author": "kakuevn <n.kakuev@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --colors --progress --watch",
+    "build": "cross-env NODE_ENV=production webpack -p",
+    "eslint": "eslint ./src/**/*",
+    "eslint:fix": "eslint src --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "sg:serve": "styleguidist server",
+    "sg:build": "styleguidist build",
+    "deploy": "netlify deploy",
+    "deploy:prod": "netlify deploy --prod",
+    "start": "npm-run-all --parallel dev sg:serve test:watch"
+  },
+  "jest": {
+    "testURL": "http://localhost/",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|sass|scss)$": "<rootDir>src/__mocks__/styleMock.js"
+    },
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "globals": {
+      "ts-jest": {
+        "tsConfigFile": "tsconfig.json",
+        "diagnostics": false
+      }
+    },
+    "testMatch": [
+      "**/__tests__/*.+(ts|tsx|js)"
+    ],
+    "setupFiles": [
+      "./src/setupTests.ts"
+    ]
+  },
+  "dependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/react": "^16.8.14",
+    "@types/react-dom": "^16.8.4",
+    "@types/styled-components": "4.1.8",
+    "classnames": "^2.2.6",
+    "cross-env": "^5.2.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "styled-components": "^4.2.0",
+    "webpack": "^4.30.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@types/enzyme": "^3.9.1",
+    "@types/jest": "^24.0.12",
+    "@types/sinon": "^7.0.11",
+    "@typescript-eslint/eslint-plugin": "^1.7.0",
+    "@typescript-eslint/parser": "^1.7.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "css-loader": "^2.1.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.2.0",
+    "eslint-formatter-friendly": "^6.0.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
+    "file-loader": "^3.0.1",
+    "jest": "^24.7.1",
+    "node-sass": "^4.12.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.17.0",
+    "react-docgen-typescript": "^1.12.4",
+    "react-styleguidist": "^9.0.9",
+    "sass-loader": "^7.1.0",
+    "sinon": "^7.3.2",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "ts-jest": "^24.0.2",
+    "typescript": "^3.4.5",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "webpack-cli": "^3.3.1"
+  }
 }

src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiFieldsInput Renders correctly 1`] = `ShallowWrapper {}`;