card example

pmndrs · Feb 28, 2024 · 70486da · 70486da
1 parent 6b96f03
commit 70486da
Show file tree

Hide file tree

Showing 22 changed files with 266 additions and 17 deletions.
diff --git a/examples/card/index.html b/examples/card/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="margin: 0; overscroll-behavior: none">
+    <script type="module" src="./src/index.tsx"></script>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/card/package.json b/examples/card/package.json
@@ -0,0 +1,19 @@
+{
+  "type": "module",
+  "dependencies": {
+    "@preact/signals-core": "^1.5.1",
+    "@react-three/drei": "^9.96.1",
+    "@react-three/fiber": "^8.15.13",
+    "@react-three/postprocessing": "^2.16.0",
+    "@react-three/uikit": "workspace:^",
+    "@react-three/uikit-lucide": "workspace:^",
+    "@types/three": "^0.160.0",
+    "r3f-perf": "^7.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.160.0"
+  },
+  "scripts": {
+    "dev": "vite --host"
+  }
+}
diff --git a/examples/card/src/App.tsx b/examples/card/src/App.tsx
@@ -0,0 +1,175 @@
+import { Environment, OrbitControls } from '@react-three/drei'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
+import { Root, Container, Text, Image, setPreferredColorScheme } from '@react-three/uikit'
+import { BellRing, Check, PlusCircle } from '@react-three/uikit-lucide'
+import { DefaultColors, colors } from '@/theme.js'
+import { Avatar } from '@/avatar.js'
+import { Button } from '@/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card'
+import { Switch } from '@/switch'
+import { useMemo, useRef } from 'react'
+import { signal } from '@preact/signals-core'
+import { damp } from 'three/src/math/MathUtils.js'
+
+setPreferredColorScheme('light')
+
+export default function App() {
+  return (
+    <Canvas
+      flat
+      camera={{ position: [0, 0, 18], fov: 35 }}
+      style={{ height: '100dvh', touchAction: 'none' }}
+      gl={{ localClippingEnabled: true }}
+    >
+      <Root pixelSize={0.01}>
+        <DefaultColors>
+          <CardPage />
+        </DefaultColors>
+      </Root>
+      <Environment background blur={1} preset="city" />
+      <OrbitControls makeDefault />
+    </Canvas>
+  )
+}
+
+const notifications = [
+  {
+    title: 'Your call has been confirmed.',
+    description: '1 hour ago',
+  },
+  {
+    title: 'You have a new message!',
+    description: '1 hour ago',
+  },
+  {
+    title: 'Your subscription is expiring soon!',
+    description: '2 hours ago',
+  },
+]
+
+export function CardPage() {
+  const openRef = useRef(false)
+  const translateY = useMemo(() => signal(-460), [])
+  const translateZ = useMemo(() => signal(0), [])
+  useFrame((_, delta) => {
+    const targetTranslateY = openRef.current ? 0 : -460
+    const targetTranslateZ = openRef.current ? 40 : 0
+    translateY.value = damp(translateY.value, targetTranslateY, 10, delta)
+    translateZ.value = damp(translateZ.value, targetTranslateZ, 10, delta)
+  })
+  return (
+    <Root pixelSize={0.01} sizeX={4.4}>
+      <DefaultColors>
+        <Container
+          onClick={(e) => {
+            e.stopPropagation()
+            openRef.current = !openRef.current
+          }}
+          cursor="pointer"
+          zIndexOffset={1}
+          transformTranslateZ={translateZ}
+        >
+          <Image borderRadiusTop={20} width="100%" src="https://picsum.photos/600/300" />
+          <Container
+            backgroundColor={0xffffff}
+            dark={{ backgroundColor: 0x0 }}
+            flexDirection="row"
+            padding={28}
+            paddingTop={28 + 4}
+            alignItems="center"
+            justifyContent="space-between"
+            borderRadiusBottom={20}
+          >
+            <Container gap={8}>
+              <Text fontWeight="normal" fontSize={24} lineHeight={1}>
+                VanArsdel Marketing
+              </Text>
+              <Text fontSize={20} fontWeight="medium" letterSpacing={-0.4} color={colors.primary}>
+                2 activities for you
+              </Text>
+            </Container>
+            <Container flexDirection="row" gap={-6}>
+              <Avatar width={40} src="https://avatar.iran.liara.run/public/boy?username=Scot" />
+              <Avatar width={40} src="https://avatar.iran.liara.run/public/boy?username=Theo" />
+              <Avatar width={40} src="https://avatar.iran.liara.run/public/boy?username=Paul" />
+            </Container>
+          </Container>
+        </Container>
+        <Container transformTranslateY={-40} overflow="hidden">
+          <Container
+            paddingTop={40}
+            transformTranslateY={translateY}
+            backgroundColor={colors.secondary}
+            borderRadius={20}
+          >
+            <CardHeader>
+              <CardTitle>
+                <Text>Notifications</Text>
+              </CardTitle>
+              <CardDescription>
+                <Text>You have 3 unread messages.</Text>
+              </CardDescription>
+            </CardHeader>
+            <CardContent flexDirection="column" gap={16}>
+              <Container flexDirection="row" alignItems="center" gap={16} borderRadius={6} border={1} padding={16}>
+                <BellRing />
+                <Container gap={4}>
+                  <Text fontSize={14} lineHeight={1}>
+                    Push Notifications
+                  </Text>
+                  <Text fontSize={14} lineHeight={1.43} color={colors.mutedForeground}>
+                    Send notifications to device.
+                  </Text>
+                </Container>
+                <Container flexGrow={1} />
+                <Switch />
+              </Container>
+              <Container>
+                {notifications.map((notification, index) => (
+                  <Container
+                    key={index}
+                    marginBottom={index === notifications.length - 1 ? 0 : 16}
+                    paddingBottom={index === notifications.length - 1 ? 0 : 16}
+                    alignItems="flex-start"
+                    flexDirection="row"
+                    gap={17}
+                  >
+                    <Container
+                      height={8}
+                      width={8}
+                      transformTranslateY={4}
+                      borderRadius={1000}
+                      backgroundColor={colors.primary}
+                    />
+                    <Container gap={4}>
+                      <Text fontSize={14} lineHeight={1}>
+                        {notification.title}
+                      </Text>
+                      <Text fontSize={14} lineHeight={1.43} color={colors.mutedForeground}>
+                        {notification.description}
+                      </Text>
+                    </Container>
+                  </Container>
+                ))}
+              </Container>
+            </CardContent>
+            <CardFooter>
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  openRef.current = !openRef.current
+                }}
+                flexDirection="row"
+                width="100%"
+              >
+                <Check marginRight={8} height={16} width={16} />
+                <Text>Mark all as read</Text>
+              </Button>
+            </CardFooter>
+          </Container>
+        </Container>
+      </DefaultColors>
+    </Root>
+  )
+}
diff --git a/examples/card/src/index.tsx b/examples/card/src/index.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/examples/card/tsconfig.json b/examples/card/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["../../packages/kits/default/*"]
+    }
+  }
+}
diff --git a/examples/card/vite.config.ts b/examples/card/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },
+      { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') },
+    ],
+  },
+})
diff --git a/examples/dashboard/package.json b/examples/dashboard/package.json
@@ -1,6 +1,8 @@
 {
   "type": "module",
   "dependencies": {
+    "@coconut-xr/koestlich": "^0.3.12",
+    "@coconut-xr/natuerlich": "^0.0.49",
     "@react-three/drei": "^9.96.1",
     "@react-three/fiber": "^8.15.13",
     "@react-three/postprocessing": "^2.16.0",
@@ -10,7 +12,9 @@
     "r3f-perf": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.160.0"
+    "three": "^0.160.0",
+    "vite-plugin-mkcert": "^1.17.4",
+    "zustand": "4"
   },
   "scripts": {
     "dev": "vite --host"

diff --git a/examples/dashboard/src/App.tsx b/examples/dashboard/src/App.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { Environment, OrbitControls } from '@react-three/drei'
 import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
-import { Container, Root, Text } from '@react-three/uikit'
+import { Container, Root, Text, setPreferredColorScheme } from '@react-three/uikit'
 import { Activity, CreditCard, DollarSign, Users } from '@react-three/uikit-lucide'
 
 import { DefaultColors, colors } from '@/theme'
@@ -18,6 +18,8 @@ import { RecentSales } from './components/RecentSales'
 import { TeamSwitcher } from './components/TeamSwitcher'
 import { UserNav } from './components/UserNav'
 
+setPreferredColorScheme('light')
+
 export default function App() {
   const [open, setOpen] = useState(false)
   return (
@@ -27,7 +29,7 @@ export default function App() {
       style={{ height: '100dvh', touchAction: 'none' }}
       gl={{ localClippingEnabled: true }}
     >
-      <Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
+      <Root backgroundColor={0xffffff} dark={{ backgroundColor: 0x0 }} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
         <DefaultColors>
           <DialogAnchor>
             <Container width="100%" height="100%" overflow="scroll">

diff --git a/examples/dashboard/src/index.tsx b/examples/dashboard/src/index.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

diff --git a/examples/dashboard/src/styles.css b/examples/dashboard/src/styles.css
diff --git a/examples/dashboard/vite.config.ts b/examples/dashboard/vite.config.ts
@@ -1,10 +1,12 @@
 import { defineConfig } from 'vite'
 import path from 'path'
 import react from '@vitejs/plugin-react'
+//@ts-ignore
+import mkcert from "vite-plugin-mkcert";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), mkcert()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
   },

diff --git a/examples/default/src/index.tsx b/examples/default/src/index.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

diff --git a/examples/default/src/styles.css b/examples/default/src/styles.css
diff --git a/examples/lucide/src/index.tsx b/examples/lucide/src/index.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

diff --git a/examples/lucide/src/styles.css b/examples/lucide/src/styles.css
diff --git a/examples/market/src/index.tsx b/examples/market/src/index.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

diff --git a/examples/market/src/styles.css b/examples/market/src/styles.css
diff --git a/examples/uikit/src/index.tsx b/examples/uikit/src/index.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(

diff --git a/examples/uikit/src/styles.css b/examples/uikit/src/styles.css
diff --git a/packages/kits/default/theme.tsx b/packages/kits/default/theme.tsx
@@ -14,7 +14,7 @@ export const colors = basedOnPreferredColorScheme({
     cardForeground: hsl(222.2, 84, 4.9),
     popover: hsl(0, 0, 100),
     popoverForeground: hsl(222.2, 84, 4.9),
-    primary: hsl(100.2, 0.774, 51.2),
+    primary: 0xc902e4,
     primaryForeground: hsl(210, 40, 98),
     secondary: hsl(210, 40, 96.1),
     secondaryForeground: hsl(222.2, 47.4, 11.2),

diff --git a/packages/uikit/src/text/react.tsx b/packages/uikit/src/text/react.tsx
@@ -192,7 +192,9 @@ export function useFont(collection: ManagerCollection) {
       fontFamily = Object.keys(fontFamilies)[0]
     }
     const url = getMatchingFontUrl(fontFamilies[fontFamily], fontWeight)
-    loadCachedFont(url, renderer, (font) => (result.value = font))
+    let canceled = false
+    loadCachedFont(url, renderer, (font) => (canceled ? undefined : (result.value = font)))
+    return () => (canceled = true)
   }, [fontFamilies, renderer])
   return result
 }

diff --git a/packages/uikit/src/utils.tsx b/packages/uikit/src/utils.tsx
@@ -34,14 +34,17 @@ export function useResourceWithParams<P, R, A extends Array<unknown>>(
   const result = useMemo(() => signal<R | undefined>(undefined), [])
   useEffect(() => {
     if (!(param instanceof Signal)) {
-      fn(param, ...additionals).then((value) => (result.value = value))
-      return
+      let canceled = false
+      fn(param, ...additionals).then((value) => (canceled ? undefined : (result.value = value)))
+      return () => (canceled = true)
     }
-    return effect(() =>
+    return effect(() => {
+      let canceled = false
       fn(param.value, ...additionals)
-        .then((value) => (result.value = value))
-        .catch(console.error),
-    )
+        .then((value) => (canceled ? undefined : (result.value = value)))
+        .catch(console.error)
+      return () => (canceled = true)
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [param, ...additionals])
   return result