final pre-work

snikidev · snikidev · commit 820940d1fb16 · 2019-05-06T22:33:20.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -44,6 +44,7 @@ typings/
 # Optional npm cache directory
 .npm
 .vs
+.netlify
 
 # Optional eslint cache
 .eslintcache
diff --git a/README.md b/README.md
@@ -1,18 +1,46 @@
-- prepare Readme
-- disable style
-- run tests & update snapshots
-- build package
-- deploy package
-- build static site
-- website deploy script
-
 # 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](/assets/rmfi-example.png)
 
-Props that MultiFieldsInput component accepts:
+```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={() => {}}
+/>;
+```
+
+See more live examples on the [website](https://react-multi-fields-input.netlify.com/).
+
+## Props
+
+MultiFieldsInput component accepts the following props:
 
 ```js static
 {
@@ -38,8 +66,23 @@ Props that MultiFieldsInput component accepts:
 }
 ```
 
-The values that are being returned `onBlur` and `onChange` (i.e. `Target` interface):
+The object that is being returned `onBlur` and `onChange`:
 
 ```js static
 { name: '', value: ''}
 ```
+
+## Develop
+
+``
+yarn
+yarn start
+```
+
+Optional: To enable styles in styleguidist, uncomment `.scss` styles import on line 5 in `src/components/index.tsx`.
+
+When done
+
+```
+yarn build
+```
diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "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": {
diff --git a/src/components/index.md b/src/components/index.md
@@ -26,7 +26,7 @@ Props that MultiFieldsInput component accepts:
 }
 ```
 
-The values that are being returned `onBlur` and `onChange` (i.e. `Target` interface):
+The object that is being returned `onBlur` and `onChange`:
 
 ```js static
 { name: '', value: ''}
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { Component } from 'react';
 import * as classNames from 'classnames';
 import { Props, Target, DefaultProps } from './interfaces';
-
-import './index.scss';
+// import './index.scss';
 
 class MultiFieldsInput extends Component<Props> {
   constructor(props: Props) {
diff --git a/styleguide/build/bundle.3ad2d2ba.js b/styleguide/build/bundle.3ad2d2ba.js
diff --git a/styleguide/index.html b/styleguide/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>React Multi Fields Input</title></head><body><div id="rsg-root"></div><script src="build/bundle.3ad2d2ba.js"></script></body></html>

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ Props that MultiFieldsInput component accepts:`
`26`	`26`	`}`
`27`	`27`	```
`28`	`28`
`29`		-The values that are being returned `onBlur` and `onChange` (i.e. `Target` interface):
	`29`	+The object that is being returned `onBlur` and `onChange`:
`30`	`30`
`31`	`31`	```js static
`32`	`32`	`{ name: '', value: ''}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>React Multi Fields Input</title></head><body><div id="rsg-root"></div><script src="build/bundle.3ad2d2ba.js"></script></body></html>`