Refactor Animations

trurl-master · Jul 29, 2022 · d699db1 · d699db1
1 parent d4cbed6
commit d699db1
Show file tree

Hide file tree

Showing 49 changed files with 3,998 additions and 1,604 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^16.11.43",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "motion": "^10.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
@@ -40,5 +41,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "identity-obj-proxy": "^3.0.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
   }
 }
diff --git a/examples/public/favicon.ico b/examples/public/favicon.ico
diff --git a/examples/public/index.html b/examples/public/index.html
@@ -2,42 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>jsdom testing mocks</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/examples/public/logo192.png b/examples/public/logo192.png
diff --git a/examples/public/logo512.png b/examples/public/logo512.png
diff --git a/examples/public/manifest.json b/examples/public/manifest.json
diff --git a/examples/public/robots.txt b/examples/public/robots.txt
diff --git a/examples/src/App.tsx b/examples/src/App.tsx
@@ -7,6 +7,9 @@ import MeasureParent from './components/resize-observer/measure-parent/MeasurePa
 import PrintMySize from './components/resize-observer/print-my-size/PrintMySize';
 import CustomUseMedia from './components/viewport/custom-use-media/CustomUseMedia';
 import DeprecatedCustomUseMedia from './components/viewport/deprecated-use-media/DeprecatedUseMedia';
+import { Layout } from './components/animations/Layout';
+import AnimationsInView from './components/animations/examples/InView';
+import AnimationsIndex from './components/animations';
 
 function Index() {
   return <></>;
@@ -28,6 +31,10 @@ function App() {
           path="/resize-observer/print-my-size"
           element={<PrintMySize />}
         />
+        <Route path="/animations" element={<Layout />}>
+          <Route path="in-view" element={<AnimationsInView />} />
+          <Route index element={<AnimationsIndex />} />
+        </Route>
         <Route path="/" element={<Index />} />
       </Routes>
     </div>

diff --git a/examples/src/components/Nav.tsx b/examples/src/components/Nav.tsx
@@ -8,25 +8,29 @@ const Nav = (): React.ReactElement => (
         listStyleType: 'none',
         display: 'flex',
         justifyContent: 'center',
+        gap: '1rem',
       }}
     >
-      <li style={{ marginRight: '2em' }}>
+      <li>
         <Link to="/intersection-observer">Intersection Observer</Link>
       </li>
-      <li style={{ marginRight: '2em' }}>
+      <li>
         <Link to="/resize-observer/do-i-fit">Resize Observer: do I fit?</Link>
       </li>
-      <li style={{ marginRight: '2em' }}>
+      <li>
         <Link to="/resize-observer/print-my-size">
           Resize Observer: print my size
         </Link>
       </li>
-      <li style={{ marginRight: '2em' }}>
+      <li>
         <Link to="/viewport">Viewport</Link>
       </li>
       <li>
         <Link to="/viewport-deprecated">Viewport (old)</Link>
       </li>
+      <li>
+        <Link to="/animations">Animations</Link>
+      </li>
     </ul>
   </nav>
 );