updated docs

joepuzzo · Nov 19, 2020 · aa52fe8 · aa52fe8
1 parent 280ee13
commit aa52fe8
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 33 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.29905a682e2971d1d601.bundle.js"></script><script src="vendors~main.29905a682e2971d1d601.bundle.js"></script><script src="main.29905a682e2971d1d601.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.0fb3e2140882113bc1be.bundle.js"></script><script src="vendors~main.0fb3e2140882113bc1be.bundle.js"></script><script src="main.0fb3e2140882113bc1be.bundle.js"></script></body></html>
diff --git a/docs/main.0fb3e2140882113bc1be.bundle.js b/docs/main.0fb3e2140882113bc1be.bundle.js
diff --git a/...9905a682e2971d1d601.bundle.js.LICENSE.txt → ...fb3e2140882113bc1be.bundle.js.LICENSE.txt b/...9905a682e2971d1d601.bundle.js.LICENSE.txt → ...fb3e2140882113bc1be.bundle.js.LICENSE.txt
diff --git a/docs/main.0fb3e2140882113bc1be.bundle.js.map b/docs/main.0fb3e2140882113bc1be.bundle.js.map
diff --git a/docs/main.29905a682e2971d1d601.bundle.js b/docs/main.29905a682e2971d1d601.bundle.js
diff --git a/docs/main.29905a682e2971d1d601.bundle.js.map b/docs/main.29905a682e2971d1d601.bundle.js.map
diff --git a/...ntime~main.29905a682e2971d1d601.bundle.js → ...ntime~main.0fb3e2140882113bc1be.bundle.js b/...ntime~main.29905a682e2971d1d601.bundle.js → ...ntime~main.0fb3e2140882113bc1be.bundle.js
diff --git a/docs/runtime~main.0fb3e2140882113bc1be.bundle.js.map b/docs/runtime~main.0fb3e2140882113bc1be.bundle.js.map
diff --git a/docs/runtime~main.29905a682e2971d1d601.bundle.js.map b/docs/runtime~main.29905a682e2971d1d601.bundle.js.map
diff --git a/...ndors~main.29905a682e2971d1d601.bundle.js → ...ndors~main.0fb3e2140882113bc1be.bundle.js b/...ndors~main.29905a682e2971d1d601.bundle.js → ...ndors~main.0fb3e2140882113bc1be.bundle.js
diff --git a/...9905a682e2971d1d601.bundle.js.LICENSE.txt → ...fb3e2140882113bc1be.bundle.js.LICENSE.txt b/...9905a682e2971d1d601.bundle.js.LICENSE.txt → ...fb3e2140882113bc1be.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.0fb3e2140882113bc1be.bundle.js.map b/docs/vendors~main.0fb3e2140882113bc1be.bundle.js.map
diff --git a/docs/vendors~main.29905a682e2971d1d601.bundle.js.map b/docs/vendors~main.29905a682e2971d1d601.bundle.js.map
diff --git a/stories/CustomInputs/UseField/README.md b/stories/CustomInputs/UseField/README.md
@@ -1,9 +1,12 @@
-## What if I want more control!? 
+# Custom Inputs
 
-**I got you!** Check out the example below:
+Sometimes the inputs `informed` provides are not good enough. So we decided to
+help you out with that! Informed also gives you access to an useField Hook.
 
-Here we use the hook `useField` instead of the HOC `asField`. This allows us to do things like,
-set a default validation function!
+## Custom Text Input
+
+Lets say you like `informed`'s text input but you want to show an error and turn
+it red when there is an error. You could achieve this with the following code.
 
 <!-- STORY -->
 
@@ -12,16 +15,8 @@ set a default validation function!
 ```jsx
 import { Form, useField } from 'informed';
 
-const validate = value => {
-  return !value || value.length < 5
-    ? 'Field must be at least five characters'
-    : undefined;
-};
-
-const ErrorText = (props) => {
-
-  const { fieldState, fieldApi, render, ref, userProps } = useField( { ...props, validate });
-  // ^^^^^^^^ THIS IS THE BIG DIFFERENCE 
+const ErrorText = props => {
+  const { fieldState, fieldApi, render, ref, userProps } = useField(props);
 
   const { value } = fieldState;
   const { setValue, setTouched } = fieldApi;
@@ -53,14 +48,16 @@ const ErrorText = (props) => {
   );
 };
 
+const validate = value => {
+  return !value || value.length < 5
+    ? 'Field must be at least five characters'
+    : undefined;
+};
+
 <Form id="custom-form">
   <label>
     First name:
-    <ErrorText
-      field="name"
-      validateOnChange
-      validateOnBlur
-    />
+    <ErrorText field="name" validateOnChange validateOnBlur />
   </label>
   <button type="submit">Submit</button>
 </Form>;

diff --git a/stories/CustomInputs/index.js b/stories/CustomInputs/index.js
@@ -7,10 +7,10 @@ import UseFieldHooked from './UseFieldHooked';
 
 const CreatingCustomInputs = () => (
   <div>
-    <Intro />
-    <br />
-    <FromScratch />
-    <br />
+    {/* <Intro /> */}
+    {/* <br /> */}
+    {/* <FromScratch /> */}
+    {/* <br /> */}
     <UseField />
     <br />
     <UseFieldHooked />