Skip to content

Commit d699db1

Browse files
trurl-mastertrurl-master
committed
Refactor Animations
1 parent d4cbed6 commit d699db1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+3998
-1604
lines changed

‎examples/package-lock.json‎

Lines changed: 192 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@types/node": "^16.11.43",
1111
"@types/react": "^18.0.14",
1212
"@types/react-dom": "^18.0.5",
13+
"motion": "^10.13.1",
1314
"react": "^18.2.0",
1415
"react-dom": "^18.2.0",
1516
"react-router-dom": "^6.3.0",
@@ -40,5 +41,13 @@
4041
"last 1 firefox version",
4142
"last 1 safari version"
4243
]
44+
},
45+
"devDependencies": {
46+
"identity-obj-proxy": "^3.0.0"
47+
},
48+
"jest": {
49+
"moduleNameMapper": {
50+
"\\.(css|less)$": "identity-obj-proxy"
51+
}
4352
}
4453
}

‎examples/public/favicon.ico‎

-3.78 KB
Binary file not shown.

‎examples/public/index.html‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,11 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
6+
<title>jsdom testing mocks</title>
287
</head>
298
<body>
309
<noscript>You need to enable JavaScript to run this app.</noscript>
3110
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4211
</body>
4312
</html>

‎examples/public/logo192.png‎

-5.22 KB
Binary file not shown.

‎examples/public/logo512.png‎

-9.44 KB
Binary file not shown.

‎examples/public/manifest.json‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎examples/public/robots.txt‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎examples/src/App.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import MeasureParent from './components/resize-observer/measure-parent/MeasurePa
77
import PrintMySize from './components/resize-observer/print-my-size/PrintMySize';
88
import CustomUseMedia from './components/viewport/custom-use-media/CustomUseMedia';
99
import DeprecatedCustomUseMedia from './components/viewport/deprecated-use-media/DeprecatedUseMedia';
10+
import { Layout } from './components/animations/Layout';
11+
import AnimationsInView from './components/animations/examples/InView';
12+
import AnimationsIndex from './components/animations';
1013

1114
function Index() {
1215
return <></>;
@@ -28,6 +31,10 @@ function App() {
2831
path="/resize-observer/print-my-size"
2932
element={<PrintMySize />}
3033
/>
34+
<Route path="/animations" element={<Layout />}>
35+
<Route path="in-view" element={<AnimationsInView />} />
36+
<Route index element={<AnimationsIndex />} />
37+
</Route>
3138
<Route path="/" element={<Index />} />
3239
</Routes>
3340
</div>

‎examples/src/components/Nav.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,29 @@ const Nav = (): React.ReactElement => (
88
listStyleType: 'none',
99
display: 'flex',
1010
justifyContent: 'center',
11+
gap: '1rem',
1112
}}
1213
>
13-
<li style={{ marginRight: '2em' }}>
14+
<li>
1415
<Link to="/intersection-observer">Intersection Observer</Link>
1516
</li>
16-
<li style={{ marginRight: '2em' }}>
17+
<li>
1718
<Link to="/resize-observer/do-i-fit">Resize Observer: do I fit?</Link>
1819
</li>
19-
<li style={{ marginRight: '2em' }}>
20+
<li>
2021
<Link to="/resize-observer/print-my-size">
2122
Resize Observer: print my size
2223
</Link>
2324
</li>
24-
<li style={{ marginRight: '2em' }}>
25+
<li>
2526
<Link to="/viewport">Viewport</Link>
2627
</li>
2728
<li>
2829
<Link to="/viewport-deprecated">Viewport (old)</Link>
2930
</li>
31+
<li>
32+
<Link to="/animations">Animations</Link>
33+
</li>
3034
</ul>
3135
</nav>
3236
);

0 commit comments

Comments
 (0)