Add branching examples to docs

andyrichardson · Feb 25, 2020 · 7b259ee · 7b259ee
1 parent f596f4a
commit 7b259ee
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 34 deletions.
diff --git a/docs/src/examples.mdx b/docs/src/examples.mdx
@@ -26,7 +26,22 @@ Managing state across multiple components can be tricky but we think we've solve
 Check out the example below
 
 <iframe
-  src="https://codesandbox.io/embed/github/andyrichardson/fielder/tree/master/examples/2-multi-step?fontsize=14&hidenavigation=1&theme=dark"
+  src="https://codesandbox.io/embed/github/andyrichardson/fielder/tree/master/examples/2-multi-step?fontsize=14&hidenavigation=1&theme=dark&module=%2Fsrc%2Fregister-form%2FForm.tsx"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+  title="vanilla-ts"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+
+## Branching logic
+
+Sometimes the direction of your form (and end submission), is conditional on the info the user enters.
+
+Here's an example of a form which branches across routes.
+
+<iframe
+  src="https://codesandbox.io/embed/github/andyrichardson/fielder/tree/master/examples/3-branching?fontsize=14&hidenavigation=1&theme=dark&module=%2Fsrc%2Fregister-form%2FForm.tsx"
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
   title="vanilla-ts"
   allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"

diff --git a/examples/3-branching/package.json b/examples/3-branching/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "fielder": "latest",
     "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0",
-    "react": ">= 16.8.0",
+    "react": "16.12.0",
     "react-dom": "16.12.0",
     "semantic-ui-css": "2.4.1",
     "semantic-ui-react": "0.88.2",

diff --git a/examples/3-branching/src/register-form/Form.tsx b/examples/3-branching/src/register-form/Form.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useMemo } from 'react';
+import { useForm, FielderProvider } from 'fielder';
+import { SignUp } from './SignUp';
+import { GettingStarted } from './GettingStarted';
+import { Login } from './Login';
+
+export const Form = () => {
+  const [continued, setContinued] = useState(false);
+  const formState = useForm();
+
+  const formPage = useMemo(() => {
+    if (!continued) {
+      return 'init';
+    }
+
+    if (formState.fields.email.value === 'user@mail.com') {
+      return 'login';
+    }
+
+    return 'signup';
+  }, [formState, continued]);
+
+  return (
+    <FielderProvider value={formState}>
+      {formPage === 'init' && (
+        <GettingStarted onNext={() => setContinued(true)} />
+      )}
+      {formPage === 'login' && <Login />}
+      {formPage === 'signup' && <SignUp />}
+    </FielderProvider>
+  );
+};
diff --git a/examples/3-branching/src/register-form/index.tsx b/examples/3-branching/src/register-form/index.tsx
@@ -1,32 +1 @@
-import React, { useState, useMemo } from 'react';
-import { useForm, FielderProvider } from 'fielder';
-import { SignUp } from './SignUp';
-import { GettingStarted } from './GettingStarted';
-import { Login } from './Login';
-
-export const Form = () => {
-  const [continued, setContinued] = useState(false);
-  const formState = useForm();
-
-  const formPage = useMemo(() => {
-    if (!continued) {
-      return 'init';
-    }
-
-    if (formState.fields.email.value === 'user@mail.com') {
-      return 'login';
-    }
-
-    return 'signup';
-  }, [formState, continued]);
-
-  return (
-    <FielderProvider value={formState}>
-      {formPage === 'init' && (
-        <GettingStarted onNext={() => setContinued(true)} />
-      )}
-      {formPage === 'login' && <Login />}
-      {formPage === 'signup' && <SignUp />}
-    </FielderProvider>
-  );
-};
+export * from './Form';