Skip to content

Commit a9b80a4

Browse files
joshuaellisjoshuaellis
authored
feat: Add Sandbox CI (pmndrs#1358)
* chore: update prepare script * docs(demos): add sandbox ci * chore: bump node v
1 parent aec6881 commit a9b80a4

File tree

17 files changed

+414
-18
lines changed

17 files changed

+414
-18
lines changed

‎.codesandbox/ci.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"packages": ["packages/*", "targets/*"],
3+
"sandboxes": ["/demo/src/sandboxes/card", "/demo/src/sandboxes/gooBlobs"],
4+
"node": "14"
5+
}

‎.vscode/react-spring.code-workspace‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@
2121
"typescript.tsdk": "node_modules/typescript/lib",
2222
"files.exclude": {
2323
"**/.bic_cache": true,
24-
"**/.rpt2_cache": true,
25-
"**/node_modules": true
24+
"**/.rpt2_cache": true
2625
}
2726
}
2827
}

‎.vscode/settings.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"typescript.tsdk": "node_modules/typescript/lib",
33
"files.exclude": {
44
"**/.bic_cache": true,
5-
"**/.rpt2_cache": true,
6-
"**/node_modules": true
5+
"**/.rpt2_cache": true
76
}
87
}

‎demo/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-spring-sandbox",
2+
"name": "demo-react-spring-sandbox",
33
"version": "1.0.0",
44
"description": "a sandbox for react-spring (probably will be replaced with something in the future)",
55
"main": "null",
@@ -12,13 +12,15 @@
1212
},
1313
"dependencies": {
1414
"react": "^17.0.1",
15-
"react-dom": "^17.0.1"
15+
"react-dom": "^17.0.1",
16+
"wouter": "^2.7.4"
1617
},
1718
"devDependencies": {
1819
"@types/react": "^17.0.3",
1920
"@types/react-dom": "^17.0.2",
2021
"@vitejs/plugin-react-refresh": "^1.3.1",
2122
"typescript": "^4.2.3",
2223
"vite": "^2.1.2"
23-
}
24+
},
25+
"bic": false
2426
}

‎demo/src/App.tsx‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,43 @@
11
import * as React from 'react'
2-
import { useSpring, animated } from '@react-spring/web'
2+
import { Link, Route } from 'wouter'
33

4-
const App = () => {
5-
const [open, toggle] = React.useState(false)
6-
const props = useSpring({ width: open ? 100 : 0 })
4+
import GooBlobs from './sandboxes/gooBlobs/src/App'
5+
import Card from './sandboxes/card/src/App'
76

7+
const links: {
8+
[key: string]: () => JSX.Element
9+
} = {
10+
'goo-blobs': GooBlobs,
11+
card: Card,
12+
}
13+
14+
const Example = ({ link }: { link: string }) => {
15+
const Component = links[link]
816
return (
9-
<div className="main" onClick={() => toggle(!open)}>
10-
<animated.div className="fill" style={props} />
11-
<animated.div className="content">
12-
{props.width.interpolate(x => x.toFixed(0))}
13-
</animated.div>
17+
<div>
18+
<Link href="/">
19+
<a>← Back</a>
20+
</Link>
21+
<Component />
1422
</div>
1523
)
1624
}
1725

18-
export default App
26+
export default function App() {
27+
return (
28+
<>
29+
<Route path="/">
30+
<h1>Spring demos</h1>
31+
<h2>Sandboxes</h2>
32+
<div>
33+
{Object.keys(links).map(link => (
34+
<Link key={link} href={`/${link}`}>
35+
<a>{link}</a>
36+
</Link>
37+
))}
38+
</div>
39+
</Route>
40+
<Route path="/:link">{params => <Example link={params.link} />}</Route>
41+
</>
42+
)
43+
}

‎demo/src/sandboxes/card/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "spring-card",
3+
"version": "1.0.0",
4+
"main": "src/index.tsx",
5+
"dependencies": {
6+
"@react-spring/web": "*",
7+
"react": "^17.0.1",
8+
"react-dom": "^17.0.1",
9+
"react-scripts": "4.0.3"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"test": "react-scripts test --env=jsdom",
15+
"eject": "react-scripts eject"
16+
},
17+
"browserslist": [
18+
">0.2%",
19+
"not dead",
20+
"not ie <= 11",
21+
"not op_mini all"
22+
],
23+
"bic": false,
24+
"devDependencies": {}
25+
}

‎demo/src/sandboxes/card/public/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
11+
manifest.json provides metadata used when your web app is added to the
12+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13+
-->
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>React Spring Sandbox</title>
26+
</head>
27+
28+
<body>
29+
<noscript> You need to enable JavaScript to run this app. </noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
</html>

‎demo/src/sandboxes/card/src/App.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { useSpring, animated } from '@react-spring/web'
3+
4+
import './index.css'
5+
6+
const calc = (x: number, y: number) => [
7+
-(y - window.innerHeight / 2) / 20,
8+
(x - window.innerWidth / 2) / 20,
9+
1.1,
10+
]
11+
const trans = (x: number, y: number, s: number) =>
12+
`perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`
13+
14+
export default function App() {
15+
const [props, set] = useSpring(() => ({
16+
xys: [0, 0, 1],
17+
config: { mass: 5, tension: 350, friction: 40 },
18+
}))
19+
return (
20+
<animated.div
21+
className="card"
22+
onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
23+
onMouseLeave={() => set({ xys: [0, 0, 1] })}
24+
style={{ transform: props.xys.to(trans) }}
25+
/>
26+
)
27+
}

‎demo/src/sandboxes/card/src/index.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
html,
2+
body,
3+
#root {
4+
width: 100%;
5+
height: 100%;
6+
margin: 0;
7+
padding: 0;
8+
background-color: white;
9+
}
10+
11+
body {
12+
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
13+
helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
14+
background: transparent;
15+
-webkit-touch-callout: none;
16+
-webkit-user-select: none;
17+
-khtml-user-select: none;
18+
-moz-user-select: none;
19+
-ms-user-select: none;
20+
user-select: none;
21+
cursor: default;
22+
}
23+
24+
#root {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
overflow: hidden;
29+
background: #f0f0f0;
30+
}
31+
32+
.card {
33+
width: 45ch;
34+
height: 45ch;
35+
background: grey;
36+
border-radius: 5px;
37+
background-image: url(https://drscdn.500px.org/photo/435236/q%3D80_m%3D1500/v2?webp=true&sig=67031bdff6f582f3e027311e2074be452203ab637c0bd21d89128844becf8e40);
38+
background-size: cover;
39+
background-position: center center;
40+
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
41+
transition: box-shadow 0.5s;
42+
will-change: transform;
43+
border: 15px solid white;
44+
}
45+
46+
.card:hover {
47+
box-shadow: 0px 30px 100px -10px rgba(0, 0, 0, 0.4);
48+
}

‎demo/src/sandboxes/card/src/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import App from './App'
4+
5+
const rootElement = document.getElementById('root')
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
rootElement
11+
)

0 commit comments

Comments
 (0)