docs(demos): add sandbox ci

pmndrs · joshuaellis · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021
commit 85436cd71463bdfb2cffb9b4401d3c204f94de0b
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -0,0 +1,4 @@
+{
+  "packages": ["packages/*", "targets/*"],
+  "sandboxes": ["/demo/src/sandboxes/card", "/demo/src/sandboxes/gooBlobs"]
+}
diff --git a/.vscode/react-spring.code-workspace b/.vscode/react-spring.code-workspace
@@ -21,8 +21,7 @@
     "typescript.tsdk": "node_modules/typescript/lib",
     "files.exclude": {
       "**/.bic_cache": true,
-      "**/.rpt2_cache": true,
-      "**/node_modules": true
+      "**/.rpt2_cache": true
     }
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
     "**/.bic_cache": true,
-    "**/.rpt2_cache": true,
-    "**/node_modules": true
+    "**/.rpt2_cache": true
   }
 }
diff --git a/demo/package.json b/demo/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-spring-sandbox",
+  "name": "demo-react-spring-sandbox",
   "version": "1.0.0",
   "description": "a sandbox for react-spring (probably will be replaced with something in the future)",
   "main": "null",
@@ -12,13 +12,15 @@
   },
   "dependencies": {
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "wouter": "^2.7.4"
   },
   "devDependencies": {
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "typescript": "^4.2.3",
     "vite": "^2.1.2"
-  }
+  },
+  "bic": false
 }
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -1,18 +1,43 @@
 import * as React from 'react'
-import { useSpring, animated } from '@react-spring/web'
+import { Link, Route } from 'wouter'
 
-const App = () => {
-  const [open, toggle] = React.useState(false)
-  const props = useSpring({ width: open ? 100 : 0 })
+import GooBlobs from './sandboxes/gooBlobs/src/App'
+import Card from './sandboxes/card/src/App'
 
+const links: {
+  [key: string]: () => JSX.Element
+} = {
+  'goo-blobs': GooBlobs,
+  card: Card,
+}
+
+const Example = ({ link }: { link: string }) => {
+  const Component = links[link]
   return (
-    <div className="main" onClick={() => toggle(!open)}>
-      <animated.div className="fill" style={props} />
-      <animated.div className="content">
-        {props.width.interpolate(x => x.toFixed(0))}
-      </animated.div>
+    <div>
+      <Link href="/">
+        <a>← Back</a>
+      </Link>
+      <Component />
     </div>
   )
 }
 
-export default App
+export default function App() {
+  return (
+    <>
+      <Route path="/">
+        <h1>Spring demos</h1>
+        <h2>Sandboxes</h2>
+        <div>
+          {Object.keys(links).map(link => (
+            <Link key={link} href={`/${link}`}>
+              <a>{link}</a>
+            </Link>
+          ))}
+        </div>
+      </Route>
+      <Route path="/:link">{params => <Example link={params.link} />}</Route>
+    </>
+  )
+}
diff --git a/demo/src/sandboxes/card/package.json b/demo/src/sandboxes/card/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "spring-card",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@react-spring/web": "*",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "bic": false,
+  "devDependencies": {}
+}
diff --git a/demo/src/sandboxes/card/public/index.html b/demo/src/sandboxes/card/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      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 Spring Sandbox</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/demo/src/sandboxes/card/src/App.tsx b/demo/src/sandboxes/card/src/App.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useSpring, animated } from '@react-spring/web'
+
+import './index.css'
+
+const calc = (x: number, y: number) => [
+  -(y - window.innerHeight / 2) / 20,
+  (x - window.innerWidth / 2) / 20,
+  1.1,
+]
+const trans = (x: number, y: number, s: number) =>
+  `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`
+
+export default function App() {
+  const [props, set] = useSpring(() => ({
+    xys: [0, 0, 1],
+    config: { mass: 5, tension: 350, friction: 40 },
+  }))
+  return (
+    <animated.div
+      className="card"
+      onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
+      onMouseLeave={() => set({ xys: [0, 0, 1] })}
+      style={{ transform: props.xys.to(trans) }}
+    />
+  )
+}
diff --git a/demo/src/sandboxes/card/src/index.css b/demo/src/sandboxes/card/src/index.css
@@ -0,0 +1,48 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: white;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+  background: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #f0f0f0;
+}
+
+.card {
+  width: 45ch;
+  height: 45ch;
+  background: grey;
+  border-radius: 5px;
+  background-image: url(https://drscdn.500px.org/photo/435236/q%3D80_m%3D1500/v2?webp=true&sig=67031bdff6f582f3e027311e2074be452203ab637c0bd21d89128844becf8e40);
+  background-size: cover;
+  background-position: center center;
+  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 0.5s;
+  will-change: transform;
+  border: 15px solid white;
+}
+
+.card:hover {
+  box-shadow: 0px 30px 100px -10px rgba(0, 0, 0, 0.4);
+}
diff --git a/demo/src/sandboxes/card/src/index.tsx b/demo/src/sandboxes/card/src/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  rootElement
+)
diff --git a/demo/src/sandboxes/gooBlobs/package.json b/demo/src/sandboxes/gooBlobs/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "spring-goo-blobs",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@react-spring/web": "*",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "bic": false,
+  "devDependencies": {}
+}
diff --git a/demo/src/sandboxes/gooBlobs/public/index.html b/demo/src/sandboxes/gooBlobs/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      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 Spring Sandbox</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/demo/src/sandboxes/gooBlobs/src/App.tsx b/demo/src/sandboxes/gooBlobs/src/App.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { useTrail, animated } from '@react-spring/web'
+
+import './index.css'
+
+const fast = { tension: 1200, friction: 40 }
+const slow = { mass: 10, tension: 200, friction: 50 }
+const trans = (x: number, y: number) =>
+  `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`
+
+export default function App() {
+  const [trail, set] = useTrail(3, () => ({
+    xy: [0, 0],
+    config: i => (i === 0 ? fast : slow),
+  }))
+  return (
+    <>
+      <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+        <filter id="goo">
+          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="30" />
+          <feColorMatrix
+            in="blur"
+            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"
+          />
+        </filter>
+      </svg>
+      <div
+        className="hooks-main"
+        onMouseMove={e => set({ xy: [e.clientX, e.clientY] })}>
+        {trail.map((props, index) => (
+          <animated.div key={index} style={{ transform: props.xy.to(trans) }} />
+        ))}
+      </div>
+    </>
+  )
+}