use Sandpack in docs

pmndrs · Sep 1, 2024 · d243372 · d243372
1 parent 35b4863
commit d243372
Show file tree

Hide file tree

Showing 104 changed files with 2,791 additions and 2,188 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -14,6 +14,8 @@ jobs:
       base_path: '/uikit/docs'
       icon: '🎨'
       home_redirect: '/getting-started/introduction'
+      github: 'https://github.com/pmndrs/uikit'
+      discord: 'https://discord.gg/poimandres'
 
   fonts:
     env:

diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md
@@ -1,7 +1,7 @@
 ---
 title: Performance
 description: Important considerations for building performant user interfaces with uikit.
-nav: 15
+nav: 12
 ---
 
 ## Avoid React Re-renders
@@ -12,7 +12,7 @@ When frequently changing properties of uikit components and especially when anim
 
 This approach is similar to html/css. The following code shows how to animate the background opacity on every frame without interfering with react.
 
-```jsx
+```jsx showLineNumbers
 import { Container } from '@react-three/uikit'
 import { useMemo } from 'react'
 import { useFrame } from '@react-three/fiber'
@@ -34,7 +34,7 @@ Setting executing `setStyle(undefined, true)` resets all changes back to the ini
 
 This approach is similar to react-spring and allows to modify the properties of a uikit component without any property diffing. The following code shows how to animate the background opacity on every frame without interfering with react.
 
-```jsx
+```jsx showLineNumbers
 import { Container } from '@react-three/uikit'
 import { useMemo } from 'react'
 import { useFrame } from '@react-three/fiber'

diff --git a/docs/advanced/pitfalls.md b/docs/advanced/pitfalls.md
@@ -1,7 +1,7 @@
 ---
 title: Pitfalls
 description: Pitfalls to avoid when building userinterfaces with uikit
-nav: 14
+nav: 11
 ---
 
 ## Asynchronous Objects inside `Content`
@@ -13,7 +13,7 @@ The `Content` component measures its content when the component is created. If t
 <tr>
 <td>
 
-```jsx
+```jsx {2,4} showLineNumbers
 <Content>
     <Suspense>
         <Gltf src="...">
@@ -24,7 +24,7 @@ The `Content` component measures its content when the component is created. If t
 </td>
 <td>
 
-```jsx
+```jsx {1,5} showLineNumbers
 <Suspense>
     <Content>
         <Gltf src="...">

diff --git a/docs/kits/theming.md → docs/advanced/theming.mdx b/docs/kits/theming.md → docs/advanced/theming.mdx
@@ -1,7 +1,7 @@
 ---
 title: Theming
 description: How to customize the theme of the components from the kits.
-nav: 7
+nav: 13
 ---
 
 When installing components from any kit, the `uikit cli` always adds a `theme.tsx` file. The values inside this file can be freely adapted to create a custom theme.
@@ -47,4 +47,37 @@ createRoot(document.getElementById("root")).render(
 
 this result is achieved.
 
-![themed button in red](./theming.png)
+
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/uikit': 'latest',
+      '@react-three/drei': 'latest',
+    },
+  }}
+  files={{
+    '/App.tsx': `import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { Root, Container, setPreferredColorScheme } from "@react-three/uikit";
+import { Defaults, Button } from "@react-three/uikit-default";
+
+setPreferredColorScheme("light");
+
+export default function App() {
+  return (
+    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }} camera={{ position: [0, 0, 0.5] }}>
+      <OrbitControls />
+      <Root>
+      <Defaults>
+        <Button>
+          <Text>I am red.</Text>
+        </Button>
+      </Defaults>
+    </Root>
+    </Canvas>
+  )
+}`}}
+/>
diff --git a/docs/apfel-kit/button.mdx b/docs/apfel-kit/button.mdx
@@ -0,0 +1,74 @@
+---
+title: Button
+description: How to use the Button component from the Apfel kit.
+nav: 40
+---
+
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/uikit': 'latest',
+      '@react-three/uikit-apfel': 'latest',
+      '@react-three/drei': 'latest',
+    },
+  }}
+  files={{
+    '/App.tsx': `import { Canvas } from "@react-three/fiber";
+import { Fullscreen } from "@react-three/uikit";
+import { Defaults } from "@react-three/uikit-apfel";
+import { Container, Text } from '@react-three/uikit'
+import { Card } from "@react-three/uikit-apfel"
+import { Button } from "@react-three/uikit-apfel"
+import { BoxSelect } from '@react-three/uikit-lucide'
+
+function ButtonsOnCard() {
+  return (
+    <Container flexDirection="column" md={{ flexDirection: 'row' }} alignItems="center" gap={32}>
+      <Card borderRadius={32} padding={16}>
+        <Container flexDirection="column" justifyContent="space-between" alignItems="center" gapRow={16}>
+          <Button variant="icon" size="xs">
+            <BoxSelect />
+          </Button>
+          <Button variant="rect" size="sm" platter>
+            <Text>Label</Text>
+          </Button>
+          <Button variant="rect" size="lg" disabled>
+            <Text>Label</Text>
+          </Button>
+        </Container>
+      </Card>
+    </Container>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight intensity={1} position={[-5, 5, 10]} />
+      <Defaults>
+        <Fullscreen
+          overflow="scroll"
+          scrollbarColor="black"
+          backgroundColor="white"
+          dark={{ backgroundColor: "black" }}
+          flexDirection="column"
+          gap={32}
+          paddingX={32}
+          alignItems="center"
+          padding={32}
+        >
+          <ButtonsOnCard />
+        </Fullscreen>
+      </Defaults>
+    </Canvas>
+  )
+}`}}
+/>
+
+```bash
+npx uikit component add apfel button
+```
diff --git a/docs/apfel-kit/card.mdx b/docs/apfel-kit/card.mdx
@@ -0,0 +1,63 @@
+---
+title: Card
+description: How to use the Card component from the Apfel kit.
+nav: 41
+---
+
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/uikit': 'latest',
+      '@react-three/uikit-apfel': 'latest',
+      '@react-three/drei': 'latest',
+    },
+  }}
+  files={{
+    '/App.tsx': `import { Canvas } from "@react-three/fiber";
+import { Fullscreen } from "@react-three/uikit";
+import { Defaults } from "@react-three/uikit-apfel";
+import { Text } from '@react-three/uikit'
+import { Card } from "@react-three/uikit-apfel"
+
+function TextOnCard() {
+  return (
+    <Card borderRadius={32} padding={32} gap={8} flexDirection="column">
+      <Text fontSize={32}>Hello World!</Text>
+      <Text fontSize={24} opacity={0.7}>
+        This is the apfel kit.
+      </Text>
+    </Card>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight intensity={1} position={[-5, 5, 10]} />
+      <Defaults>
+        <Fullscreen
+          overflow="scroll"
+          scrollbarColor="black"
+          backgroundColor="white"
+          dark={{ backgroundColor: "black" }}
+          flexDirection="column"
+          gap={32}
+          paddingX={32}
+          alignItems="center"
+          padding={32}
+        >
+          <TextOnCard />
+        </Fullscreen>
+      </Defaults>
+    </Canvas>
+  )
+}`}}
+/>
+
+```bash
+npx uikit component add apfel card
+```
diff --git a/docs/apfel-kit/checkbox.mdx b/docs/apfel-kit/checkbox.mdx
@@ -0,0 +1,61 @@
+---
+title: Checkbox
+description: How to use the Checkbox component from the Apfel kit.
+nav: 42
+---
+
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/uikit': 'latest',
+      '@react-three/uikit-apfel': 'latest',
+      '@react-three/drei': 'latest',
+    },
+  }}
+  files={{
+    '/App.tsx': `import { Canvas } from "@react-three/fiber";
+import { Fullscreen } from "@react-three/uikit";
+import { Defaults } from "@react-three/uikit-apfel";
+import { Card } from "@react-three/uikit-apfel"
+import { Checkbox } from "@react-three/uikit-apfel"
+
+function CheckboxOnCard() {
+  return (
+    <Card borderRadius={32} padding={16} flexDirection="column" gapRow={16}>
+      <Checkbox disabled defaultSelected={false} />
+      <Checkbox defaultSelected={true} />
+    </Card>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight intensity={1} position={[-5, 5, 10]} />
+      <Defaults>
+        <Fullscreen
+          overflow="scroll"
+          scrollbarColor="black"
+          backgroundColor="white"
+          dark={{ backgroundColor: "black" }}
+          flexDirection="column"
+          gap={32}
+          paddingX={32}
+          alignItems="center"
+          padding={32}
+        >
+          <CheckboxOnCard />
+        </Fullscreen>
+      </Defaults>
+    </Canvas>
+  )
+}`}}
+/>
+
+```bash
+npx uikit component add apfel checkbox
+```
diff --git a/docs/apfel-kit/input.mdx b/docs/apfel-kit/input.mdx
@@ -0,0 +1,62 @@
+---
+title: Input
+description: How to use the Input component from the Apfel kit.
+nav: 49
+---
+
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/uikit': 'latest',
+      '@react-three/uikit-apfel': 'latest',
+      '@react-three/drei': 'latest',
+    },
+  }}
+  files={{
+    '/App.tsx': `import { Canvas } from "@react-three/fiber";
+import { Fullscreen } from "@react-three/uikit";
+import { Defaults } from "@react-three/uikit-apfel";
+import { Card } from "@react-three/uikit-apfel"
+import { Input } from "@react-three/uikit-apfel"
+import { useState } from 'react'
+
+function InputsOnCard() {
+  const [text, setText] = useState('')
+  return (
+    <Card flexDirection="column" borderRadius={32} padding={16}>
+      <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" />
+    </Card>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight intensity={1} position={[-5, 5, 10]} />
+      <Defaults>
+        <Fullscreen
+          overflow="scroll"
+          scrollbarColor="black"
+          backgroundColor="white"
+          dark={{ backgroundColor: "black" }}
+          flexDirection="column"
+          gap={32}
+          paddingX={32}
+          alignItems="center"
+          padding={32}
+        >
+          <InputsOnCard />
+        </Fullscreen>
+      </Defaults>
+    </Canvas>
+  )
+}`}}
+/>
+
+```bash
+npx uikit component add apfel input
+```