feat(docs): add r3f doc guide (pmndrs#2002)

Co-authored-by: Kris <kjbaumgartner@gmail.com>

Author: joshuaellis

docs/app/components/Code/LivePreview.tsx

@@ -63,7 +63,11 @@ export const LivePreview = ({
     <PreviewContainer
       className={className}
       isDemo={template !== 'spring'}
-      largeSize={template === 'configPlayground' || template === 'imperative'}>
+      largeSize={
+        template === 'configPlayground' ||
+        template === 'imperative' ||
+        template === 'r3f'
+      }>
       <SandpackProvider
         template="react"
         files={{

docs/app/components/Code/LivePreviewDeps.ts

@@ -2,10 +2,16 @@ export const LIVE_PREVIEW_DEPS = {
   spring: {},
   imperative: {},
   dialog: {
-    '@stitches/react': '*',
-    '@radix-ui/react-dialog': '*',
+    '@stitches/react': '^1.2.8',
+    '@radix-ui/react-dialog': '^1.0.0',
   },
   configPlayground: {
-    leva: '*',
+    leva: '^0.9.31',
+  },
+  r3f: {
+    '@react-spring/three': '*',
+    '@react-three/drei': '^9.36.0',
+    '@react-three/fiber': '^8.8.10',
+    three: '0.145.0',
   },
 }

docs/app/components/Code/LivePreviewStyles.ts

@@ -123,4 +123,20 @@ export const LIVE_PREVIEW_STYLES = {
       will-change: transform;
     }
   `,
+
+  r3f: /* css */ `
+    html,
+    body {
+      height: 100%;
+      margin: 0
+    }
+
+    *, *:before, *:after {
+      box-sizing: border-box;
+    }
+
+    #root {
+      height: 100%;
+    }
+  `,
 }

docs/app/data/navigationSchema.generated.json

@@ -1 +1 @@
-[{"href":"/docs","id":"index","title":"Overview","sidebarPosition":1,"children":[]},{"href":"/docs/getting-started","id":"getting-started","title":"Getting started","sidebarPosition":2,"children":[]},{"href":"/docs/concepts","id":"concepts","noPage":true,"children":[{"id":"animated-elements","title":"Animated Elements","sidebarPosition":1,"children":[],"href":"/docs/concepts/animated-elements","noPage":false},{"id":"controllers-and-springs","title":"Controllers & Springs","sidebarPosition":2,"children":[],"href":"/docs/concepts/controllers-and-springs","noPage":false},{"id":"imperative-api","title":"Imperative API","sidebarPosition":3,"children":[],"href":"/docs/concepts/imperative-api","noPage":false},{"id":"targets","title":"Targets","sidebarPosition":4,"children":[],"href":"/docs/concepts/targets","noPage":false}],"sidebarPosition":3,"title":"Concepts"},{"href":"/docs/components","id":"components","noPage":false,"children":[{"id":"use-spring","title":"useSpring","sidebarPosition":1,"children":[],"href":"/docs/components/use-spring","noPage":false},{"id":"use-springs","title":"useSprings","sidebarPosition":2,"children":[],"href":"/docs/components/use-springs","noPage":false},{"id":"use-transition","title":"useTransition","sidebarPosition":3,"children":[],"href":"/docs/components/use-transition","noPage":false},{"id":"use-chain","title":"useChain","sidebarPosition":4,"children":[],"href":"/docs/components/use-chain","noPage":false},{"id":"use-trail","title":"useTrail","sidebarPosition":5,"children":[],"href":"/docs/components/use-trail","noPage":false},{"id":"parallax","title":"Parallax","sidebarPosition":6,"children":[],"href":"/docs/components/parallax","noPage":false},{"id":"parallax-layer","title":"Parallax Layer","sidebarPosition":7,"children":[],"href":"/docs/components/parallax-layer","noPage":false}],"sidebarPosition":4,"title":"Components"},{"href":"/docs/advanced","id":"advanced","noPage":true,"children":[{"id":"config","title":"Spring Configs","sidebarPosition":1,"children":[],"href":"/docs/advanced/config","noPage":false},{"id":"events","title":"Events","sidebarPosition":2,"children":[],"href":"/docs/advanced/events","noPage":false},{"id":"controller","title":"Controller","sidebarPosition":3,"children":[],"href":"/docs/advanced/controller","noPage":false},{"id":"spring-value","title":"SpringValue","sidebarPosition":4,"children":[],"href":"/docs/advanced/spring-value","noPage":false},{"id":"spring-ref","title":"SpringRef","sidebarPosition":5,"children":[],"href":"/docs/advanced/spring-ref","noPage":false},{"id":"interpolation","title":"Interpolation","sidebarPosition":6,"children":[],"href":"/docs/advanced/interpolation","noPage":false},{"id":"async-animations","title":"Async Animations","sidebarPosition":7,"children":[],"href":"/docs/advanced/async-animations","noPage":false}],"sidebarPosition":5,"title":"Advanced API"},{"href":"/docs/guides","id":"guides","noPage":true,"children":[{"id":"testing","title":"Testing","sidebarPosition":2,"children":[],"href":"/docs/guides/testing","noPage":false}],"sidebarPosition":6,"title":"Guides"},{"href":"/docs/utilities","id":"utilities","noPage":true,"children":[{"id":"use-isomorphic-layout-effect","title":"useIsomorphicLayout","sidebarPosition":1,"children":[],"href":"/docs/utilities/use-isomorphic-layout-effect","noPage":false},{"id":"use-reduced-motion","title":"useReducedMotion","sidebarPosition":2,"children":[],"href":"/docs/utilities/use-reduced-motion","noPage":false}],"sidebarPosition":7,"title":"Utilities"},{"href":"/docs/typescript","id":"typescript","title":"Typescript","sidebarPosition":8,"children":[]}]
+[{"href":"/docs","id":"index","title":"Overview","sidebarPosition":1,"children":[]},{"href":"/docs/getting-started","id":"getting-started","title":"Getting started","sidebarPosition":2,"children":[]},{"href":"/docs/concepts","id":"concepts","noPage":true,"children":[{"id":"animated-elements","title":"Animated Elements","sidebarPosition":1,"children":[],"href":"/docs/concepts/animated-elements","noPage":false},{"id":"controllers-and-springs","title":"Controllers & Springs","sidebarPosition":2,"children":[],"href":"/docs/concepts/controllers-and-springs","noPage":false},{"id":"imperative-api","title":"Imperative API","sidebarPosition":3,"children":[],"href":"/docs/concepts/imperative-api","noPage":false},{"id":"targets","title":"Targets","sidebarPosition":4,"children":[],"href":"/docs/concepts/targets","noPage":false}],"sidebarPosition":3,"title":"Concepts"},{"href":"/docs/components","id":"components","noPage":false,"children":[{"id":"use-spring","title":"useSpring","sidebarPosition":1,"children":[],"href":"/docs/components/use-spring","noPage":false},{"id":"use-springs","title":"useSprings","sidebarPosition":2,"children":[],"href":"/docs/components/use-springs","noPage":false},{"id":"use-transition","title":"useTransition","sidebarPosition":3,"children":[],"href":"/docs/components/use-transition","noPage":false},{"id":"use-chain","title":"useChain","sidebarPosition":4,"children":[],"href":"/docs/components/use-chain","noPage":false},{"id":"use-trail","title":"useTrail","sidebarPosition":5,"children":[],"href":"/docs/components/use-trail","noPage":false},{"id":"parallax","title":"Parallax","sidebarPosition":6,"children":[],"href":"/docs/components/parallax","noPage":false},{"id":"parallax-layer","title":"Parallax Layer","sidebarPosition":7,"children":[],"href":"/docs/components/parallax-layer","noPage":false}],"sidebarPosition":4,"title":"Components"},{"href":"/docs/advanced","id":"advanced","noPage":true,"children":[{"id":"config","title":"Spring Configs","sidebarPosition":1,"children":[],"href":"/docs/advanced/config","noPage":false},{"id":"events","title":"Events","sidebarPosition":2,"children":[],"href":"/docs/advanced/events","noPage":false},{"id":"controller","title":"Controller","sidebarPosition":3,"children":[],"href":"/docs/advanced/controller","noPage":false},{"id":"spring-value","title":"SpringValue","sidebarPosition":4,"children":[],"href":"/docs/advanced/spring-value","noPage":false},{"id":"spring-ref","title":"SpringRef","sidebarPosition":5,"children":[],"href":"/docs/advanced/spring-ref","noPage":false},{"id":"interpolation","title":"Interpolation","sidebarPosition":6,"children":[],"href":"/docs/advanced/interpolation","noPage":false},{"id":"async-animations","title":"Async Animations","sidebarPosition":7,"children":[],"href":"/docs/advanced/async-animations","noPage":false}],"sidebarPosition":5,"title":"Advanced API"},{"href":"/docs/guides","id":"guides","noPage":true,"children":[{"id":"react-three-fiber","title":"React Three Fiber","sidebarPosition":1,"children":[],"href":"/docs/guides/react-three-fiber","noPage":false},{"id":"testing","title":"Testing","sidebarPosition":2,"children":[],"href":"/docs/guides/testing","noPage":false}],"sidebarPosition":6,"title":"Guides"},{"href":"/docs/utilities","id":"utilities","noPage":true,"children":[{"id":"use-isomorphic-layout-effect","title":"useIsomorphicLayout","sidebarPosition":1,"children":[],"href":"/docs/utilities/use-isomorphic-layout-effect","noPage":false},{"id":"use-reduced-motion","title":"useReducedMotion","sidebarPosition":2,"children":[],"href":"/docs/utilities/use-reduced-motion","noPage":false}],"sidebarPosition":7,"title":"Utilities"},{"href":"/docs/typescript","id":"typescript","title":"Typescript","sidebarPosition":8,"children":[]}]