Merge pull request #7 from devrnt/chore/improve-example

devrnt · web-flow · commit b34250e7ce8d · 2021-01-02T13:09:13.000+01:00
chore: add animated example
diff --git a/example/components/animatedStep.tsx b/example/components/animatedStep.tsx
@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+import * as React from 'react';
+
+const variants = {
+  enter: {
+    x: -1000,
+    opacity: 0,
+  },
+  center: {
+    zIndex: 1,
+    x: 0,
+    opacity: 1,
+  },
+  exit: {
+    zIndex: 0,
+    x: 1000,
+    opacity: 0,
+  },
+};
+
+const AnimatedStep: React.FC = React.memo(({ children }) => {
+  return (
+    <motion.div
+      variants={variants}
+      initial="enter"
+      animate="center"
+      exit="exit"
+    >
+      {children}
+    </motion.div>
+  );
+});
+
+export default AnimatedStep;
diff --git a/example/components/asyncStep.tsx b/example/components/asyncStep.tsx
@@ -33,7 +33,17 @@ const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
   // });
 
   return (
-    <div>
+    <div
+      style={{
+        border: '1px solid grey',
+        minHeight: '20vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <code>Async</code>
       <p>Step {number}</p>
       {isLoading && <p>loading...</p>}
     </div>
diff --git a/example/components/step.tsx b/example/components/step.tsx
@@ -14,7 +14,17 @@ const Step: React.FC<Props> = React.memo(({ number }) => {
   });
 
   return (
-    <div>
+    <div
+      style={{
+        border: '1px solid grey',
+        minHeight: '20vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <code>Sync</code>
       <p>Step {number}</p>
       {isLoading && <p>loading...</p>}
     </div>
diff --git a/example/hooks/useMockMutation.tsx b/example/hooks/useMockMutation.tsx
@@ -8,28 +8,38 @@ type Options<T> = {
 
 /**
  * An ApolloClient clone of `useMutation`
+ *
  * @param result The result once the promise is fulfilled
  * @param options Some options
+ * @param options.makeError
+ * @param options.timeout
+ * @param options.onCompleted
+ * @param options.makeError
+ * @param options.timeout
+ * @param options.onCompleted
+ * @param options.makeError
+ * @param options.timeout
+ * @param options.onCompleted
  */
 const useMockMutation = <T extends object = any>(
   result: T,
-  { makeError = false, timeout = 3000, onCompleted }: Options<T> = {}
+  { makeError = false, timeout = 3000, onCompleted }: Options<T> = {},
 ) => {
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<{ message: string }>();
 
   const mutationCb = React.useRef(async () => {
-    const promise = new Promise<void>((res, rej) => {
+    const promise = new Promise<void>((resolve, reject) => {
       setLoading(true);
 
       setTimeout(() => {
         setLoading(false);
 
         if (makeError) {
           setError({ message: 'Something went wrong' });
-          rej({ message: 'Something went wrong' });
+          reject({ message: 'Something went wrong' });
         } else {
-          res(onCompleted?.(result));
+          resolve(onCompleted?.(result));
         }
       }, timeout);
     });
diff --git a/example/index.tsx b/example/index.tsx
@@ -6,15 +6,43 @@ import * as ReactDOM from 'react-dom';
 
 import { Wizard } from '../.';
 import { AsyncStep, Footer, Step } from './components';
+import AnimatedStep from './components/animatedStep';
 
 const App: React.FC = () => {
   return (
-    <Wizard footer={<Footer />} header={<p>header</p>}>
-      <AsyncStep number={1} />
-      <Step number={2} />
-      <AsyncStep number={3} />
-      <Step number={4} />
-    </Wizard>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateRows: '1fr 1fr',
+      }}
+    >
+      <section>
+        <h2>Vanila</h2>
+        <Wizard footer={<Footer />} header={<p>header</p>}>
+          <AsyncStep number={1} />
+          <Step number={2} />
+          <AsyncStep number={3} />
+          <Step number={4} />
+        </Wizard>
+      </section>
+      <section>
+        <h2>With animation</h2>
+        <Wizard footer={<Footer />} header={<p>header</p>}>
+          <AnimatedStep>
+            <AsyncStep number={1} />
+          </AnimatedStep>
+          <AnimatedStep>
+            <Step number={2} />
+          </AnimatedStep>
+          <AnimatedStep>
+            <AsyncStep number={3} />
+          </AnimatedStep>
+          <AnimatedStep>
+            <Step number={4} />
+          </AnimatedStep>
+        </Wizard>
+      </section>
+    </div>
   );
 };
 
diff --git a/example/package.json b/example/package.json
@@ -8,6 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
+    "framer-motion": "^3.1.1",
     "react-app-polyfill": "^1.0.0"
   },
   "alias": {
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -807,7 +807,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -847,6 +847,18 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@iarna/toml@^2.2.0":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
@@ -2386,6 +2398,24 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.1.1.tgz#a8a779501213b7ce02cc35beb27621d73cc2f1e7"
+  integrity sha512-Gm1QSb0xUxuhcPar5FIs5Ws+STrhLZ6XZf2Io8dVwFofe1OzwkL9asGFVu7z3y6WqC4Hvnxm7wsW5SBHlxZDYw==
+  dependencies:
+    framesync "^5.0.0"
+    hey-listen "^1.0.8"
+    popmotion "^9.0.2"
+    style-value-types "^3.2.0"
+    tslib "^1.10.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@5.0.0, framesync@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.0.0.tgz#7de8caedf53ac441118e79680f1beb7391c328b6"
+  integrity sha512-wd8t+JsQGisluSv1twiEeDv0aNGpavGb9q7xgIk9fGbcIWkNXF/KVtrjnOrCwBWJuiXxlJfNkcvGudsI32FxYA==
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -2578,6 +2608,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3159,6 +3194,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-sorter@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.1.0.tgz#7fec6808d94311a35fef7fd842a11634f2361bd7"
+  integrity sha512-sKPMf4kbF7Dm5Crx0bbfLpokK68PUJ/0STUIOPa1ZmTZEA3lCaPK3gapQR573oLmvdkTfGojzySkIwuq6Z6xRQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -3685,6 +3728,16 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+popmotion@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.2.tgz#477650c3b4af97161011809223d9ca6860f3a2b5"
+  integrity sha512-WfSg8IfoUwYIP9uqeqbgncIsMHLAKWqebT2IP1aGAI6gdSJqTPy/H8NvP4ZyDtDCUCx5Yh3Pth/7iUJjIwR7LA==
+  dependencies:
+    framesync "5.0.0"
+    hey-listen "^1.0.8"
+    style-value-types "3.2.0"
+    tslib "^1.10.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -4209,6 +4262,14 @@ react-app-polyfill@^1.0.0:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-query@^3.5.9:
+  version "3.5.9"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.5.9.tgz#2c001b5235e1afa11166a629c8645c9dd9464741"
+  integrity sha512-thlxrnl7cDg6qmk+N2ADjDVDJkoU3c7ZFJivYph0XoBDgkRIpb3A+tpqH7o6gu7JXZum9lfX1o294UfYfTiwvg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    match-sorter "^6.0.2"
+
 readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -4306,6 +4367,11 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -4763,6 +4829,14 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+style-value-types@3.2.0, style-value-types@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.2.0.tgz#eb89cab1340823fa7876f3e289d29d99c92111bb"
+  integrity sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^1.10.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -4925,6 +4999,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tslib@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
