Merge pull request #3 from stianba/rc1

Rc1
stianba · Jan 11, 2018 · 51ff0ef · 51ff0ef
2 parents 36fa8f9 + 72336dc
commit 51ff0ef
Show file tree

Hide file tree

Showing 10 changed files with 396 additions and 167 deletions.
diff --git a/.babelrc b/.babelrc
@@ -2,6 +2,7 @@
   "presets": ["env", "react"],
   "plugins": [
     "transform-flow-strip-types",
-    "babel-plugin-transform-class-properties"
+    "babel-plugin-transform-class-properties",
+    "transform-object-rest-spread"
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
+storybook-static
 dist
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,8 @@ src
 example
 coverage
 docs
+stories
+storybook-static
 __tests__
 .babelrc
 .travis.yml

diff --git a/README.md b/README.md
@@ -8,19 +8,81 @@ $ yarn add react-formit
 
 ## Usage
 
+### Bare minimum
+
+```javascript
+import Formit from 'react-formit';
+
+const App = () => (
+  <Formit action="/">
+    {({ onSubmit, setValue, getValue }) => (
+      <form onSubmit={onSubmit}>
+        <label htmlFor="username">Username:</label>
+        <input
+          type="text"
+          id="username"
+          onChange={e => setValue('username', e.target.value)}
+          value={getValue('username')}
+          required
+        />
+        <label htmlFor="password">Password:</label>
+        <input
+          type="password"
+          id="password"
+          onChange={e => setValue('password', e.target.value)}
+          value={getValue('password')}
+          required
+        />
+        <button type="submit">Submit</button>
+      </form>
+    )}
+  </Formit>
+);
+
+render(<App />, document.getElementById('app'));
+```
+
+### Full package
+
 ```javascript
 import Formit from 'react-formit';
 
 const App = () => (
   <Formit
-    action="/post-that-form"
-    hiddenFields={[{ name: 'hiddenValue', value: 'Woo, secret' }]}
+    action="/"
+    defaultFields={[
+      { name: 'username', value: 'Stian' },
+      { name: 'password', value: 'mightyPassword' }
+    ]}
+    credentials="same-origin"
     headers={[
       {
         Authorization:
           'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'
       }
     ]}
+    onValueSet={field => console.log(field.name, field.value)}
+    onSuccessfulSubmit={data =>
+      console.log(
+        data.method,
+        data.action,
+        data.credentials,
+        data.headers,
+        data.fields,
+        data.response,
+        data.responseData
+      )
+    }
+    onFailedSubmit={data =>
+      console.log(
+        data.method,
+        data.action,
+        data.credentials,
+        data.headers,
+        data.fields,
+        data.error
+      )
+    }
     responseAsJSON
   >
     {({
@@ -30,25 +92,30 @@ const App = () => (
       clearValues,
       isPosting,
       postingError,
+      response,
       responseData
     }) => (
       <form onSubmit={onSubmit}>
-        <label for="username">Username:</label>
+        <label htmlFor="username">Username:</label>
         <input
           type="text"
           id="username"
           onChange={e => setValue('username', e.target.value)}
           value={getValue('username')}
+          required
         />
-        <label for="password">Password:</label>
+        <label htmlFor="password">Password:</label>
         <input
           type="password"
           id="password"
           onChange={e => setValue('password', e.target.value)}
           value={getValue('password')}
+          required
         />
-        <Button type="submit">Submit</Button>
-        <Button onClick={clearValues}>Cancel</Button>
+        <button type="submit" disabled={isPosting}>
+          {isPosting ? 'Submitting...' : 'Submit'}
+        </button>
+        <a onClick={clearValues}>Cancel</a>
         {responseData !== null && <p>{responseData.mySuccessMessage}</p>}
       </form>
     )}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-formit",
-  "version": "0.2.5",
+  "version": "1.0.0",
   "description": "Super simple and super flexible React form.",
   "main": "dist/formit.js",
   "scripts": {
@@ -9,25 +9,33 @@
     "build:clean": "rimraf dist",
     "build:dist": "babel -d dist src --ignore '**/__tests__/**'",
     "build:flow": "flow-copy-source -v -i '**/__tests__/**' src dist",
-    "storybook": "start-storybook -p 9001 -c .storybook"
+    "storybook": "start-storybook -p 9001 -c stories"
   },
   "repository": "git@github.com:stianba/react-formit.git",
+  "keywords": [
+    "react",
+    "form"
+  ],
   "author": "Stian Bakkane <stianba@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
-    "react": "^16.0.0"
+    "babel-polyfill": "^6.26.0"
   },
   "devDependencies": {
-    "@storybook/react": "^3.3.6",
+    "@storybook/react": "^3.4.0-alpha.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "flow-copy-source": "^1.2.1",
+    "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "rimraf": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": ">=16"
   }
 }