feat: image src can be texture

added: market example
pmndrs · Feb 26, 2024 · ba8e1f5 · ba8e1f5
1 parent 3137dd8
commit ba8e1f5
Show file tree

Hide file tree

Showing 25 changed files with 553 additions and 85 deletions.
diff --git a/examples/dashboard/vite.config.ts b/examples/dashboard/vite.config.ts
@@ -2,8 +2,6 @@ import { defineConfig } from 'vite'
 import path from 'path'
 import react from '@vitejs/plugin-react'
 
-console.log(path.resolve(__dirname, '../../packages/uikit'))
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],

diff --git a/examples/lucide/vite.config.ts b/examples/lucide/vite.config.ts
@@ -2,8 +2,6 @@ import { defineConfig } from 'vite'
 import path from 'path'
 import react from '@vitejs/plugin-react'
 
-console.log(path.resolve(__dirname, '../../packages/uikit'))
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],

diff --git a/examples/market/index.html b/examples/market/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/market/package.json b/examples/market/package.json
@@ -0,0 +1,18 @@
+{
+  "type": "module",
+  "dependencies": {
+    "@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/market/src/App.tsx b/examples/market/src/App.tsx
@@ -0,0 +1,122 @@
+import { Environment, OrbitControls } from '@react-three/drei'
+import { Canvas } from '@react-three/fiber'
+import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
+import { Root, Container, Image, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
+import { PlusCircle } from '@react-three/uikit-lucide'
+import { DefaultColors, colors } from '@/defaults.js'
+import { DialogAnchor } from '@/dialog.js'
+import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/tabs.js'
+import { Separator } from '@/separator.js'
+import { Button } from '@/button.js'
+import { AlbumArtwork } from './components/album-artwork'
+import { listenNowAlbums, madeForYouAlbums } from './data/albums'
+import { Sidebar } from './components/sidebar'
+import { playlists } from './data/playlists'
+import { Menu } from './components/menu'
+
+export default function App() {
+  return (
+    <Canvas
+      flat
+      camera={{ position: [0, 0, 18], fov: 35 }}
+      style={{ height: '100dvh', touchAction: 'none' }}
+      gl={{ localClippingEnabled: true }}
+    >
+      {/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
+        <DefaultColors>
+          <DialogAnchor>
+            <MarketPage />
+          </DialogAnchor>
+        </DefaultColors>
+      </Root>
+      <Environment background blur={1} preset="city" />
+      <EffectComposer>
+        <TiltShift2 blur={0.25} />
+      </EffectComposer>
+      <OrbitControls makeDefault />*/}
+      <Fullscreen>
+        <DefaultColors>
+          <DefaultProperties scrollbarWidth={8} scrollbarOpacity={0.1} scrollbarBorderRadius={4}>
+            <MarketPage />
+          </DefaultProperties>
+        </DefaultColors>
+      </Fullscreen>
+    </Canvas>
+  )
+}
+
+export function MarketPage() {
+  return (
+    <Container height="100%" flexDirection="column">
+      <Menu />
+      <Container flexBasis={0} flexGrow={1} borderTop={1} backgroundColor={colors.background} flexDirection="row">
+        <Sidebar marginTop={16} playlists={playlists} />
+        <Separator orientation="vertical" />
+        <Container
+          marginTop={16}
+          overflow="scroll"
+          flexGrow={1}
+          flexBasis={0}
+          paddingX={16}
+          paddingBottom={24}
+          paddingTop={8}
+          lg={{ paddingX: 32 }}
+        >
+          <Tabs defaultValue="music" height="100%" gap={24}>
+            <Container flexDirection="row" justifyContent="space-between" alignItems="center">
+              <TabsList>
+                <TabsTrigger value="music">
+                  <Text>Models</Text>
+                </TabsTrigger>
+                <TabsTrigger value="podcasts" disabled>
+                  <Text>HDRIS</Text>
+                </TabsTrigger>
+                <TabsTrigger value="live" disabled>
+                  <Text>Materials</Text>
+                </TabsTrigger>
+              </TabsList>
+              <Container marginLeft="auto" marginRight={16}>
+                <Button>
+                  <PlusCircle marginRight={8} height={16} width={16} />
+                  <Text>Request Model</Text>
+                </Button>
+              </Container>
+            </Container>
+            <TabsContent value="music" border={0} padding={0}>
+              <Container flexDirection="row" alignItems="center" justifyContent="space-between">
+                <Container gap={4}>
+                  <Text fontWeight="semi-bold" letterSpacing={-0.4} fontSize={18} lineHeight={1.55555}>
+                    Trending
+                  </Text>
+                  <Text color={colors.mutedForeground} fontSize={14} lineHeight={1.43333}>
+                    Top picks for you. Updated daily.
+                  </Text>
+                </Container>
+              </Container>
+              <Separator marginY={16} />
+              <Container flexDirection="row" overflow="scroll" gap={16} paddingBottom={16}>
+                {listenNowAlbums.map((album) => (
+                  <AlbumArtwork key={album.name} album={album} width={250} height={330} aspectRatio="portrait" />
+                ))}
+              </Container>
+              <Container marginTop={24} gap={4}>
+                <Text fontWeight="semi-bold" letterSpacing={-0.4} fontSize={18} lineHeight={1.55555}>
+                  Made By You
+                </Text>
+                <Text color={colors.mutedForeground} fontSize={14} lineHeight={1.43333}>
+                  Your personal models.
+                </Text>
+              </Container>
+              <Separator marginY={16} />
+              <Container flexShrink={1} flexDirection="row" overflow="scroll" gap={16} paddingBottom={16}>
+                {madeForYouAlbums.map((album) => (
+                  <AlbumArtwork key={album.name} album={album} aspectRatio="square" width={150} height={150} />
+                ))}
+              </Container>
+            </TabsContent>
+          </Tabs>
+        </Container>
+      </Container>
+    </Container>
+  )
+}
diff --git a/examples/market/src/components/album-artwork.tsx b/examples/market/src/components/album-artwork.tsx
@@ -0,0 +1,35 @@
+import { Container, Text, Image } from '@react-three/uikit'
+import { Album } from '../data/albums.js'
+import { ComponentPropsWithoutRef } from 'react'
+import { colors } from '@/defaults.js'
+
+export function AlbumArtwork({
+  album,
+  aspectRatio = 'portrait',
+  width,
+  height,
+  ...props
+}: {
+  album: Album
+  aspectRatio?: 'portrait' | 'square'
+} & Omit<ComponentPropsWithoutRef<typeof Container>, 'aspectRatio'>) {
+  return (
+    <Container gap={12} {...props}>
+      <Image
+        borderRadius={6}
+        src={album.cover}
+        width={width}
+        height={height}
+        aspectRatio={aspectRatio === 'portrait' ? 3 / 4 : 1}
+      />
+      <Container gap={4}>
+        <Text fontWeight="medium" fontSize={14} lineHeight={1}>
+          {album.name}
+        </Text>
+        <Text fontSize={12} lineHeight={1.3333} color={colors.mutedForeground}>
+          {album.artist}
+        </Text>
+      </Container>
+    </Container>
+  )
+}
diff --git a/examples/market/src/components/menu.tsx b/examples/market/src/components/menu.tsx
@@ -0,0 +1,39 @@
+import { Menubar, MenubarMenu, MenubarTrigger } from '@/menubar.js'
+import { SvgIconFromText, Text } from '@react-three/uikit'
+
+export function Menu() {
+  return (
+    <Menubar borderRadius={0} paddingX={8} lg={{ paddingX: 16 }}>
+      <MenubarMenu>
+        <MenubarTrigger>
+          <SvgIconFromText
+            text='<svg xmlns="http://www.w3.org/2000/svg" width="70" height="50" fill="none" viewBox="0 0 194 50"><path fill="black" d="M17.5 35h15v15h-15V35zm0-17.5h15v15h-15v-15zM0 17.5h15v15H0v-15z"></path><path fill="black" d="M35 0H17.5v15H35v17.5h15V0H35zM77.51 12.546V38h4.425V20.475h.236l7.035 17.45h3.306l7.035-17.413h.236V38h4.425V12.546h-5.643L91.01 30.99h-.299l-7.557-18.444h-5.642zm37.014 25.84c2.996 0 4.785-1.405 5.606-3.009h.149V38h4.325V25.223c0-5.046-4.114-6.563-7.756-6.563-4.014 0-7.097 1.79-8.091 5.27l4.201.597c.448-1.305 1.715-2.424 3.915-2.424 2.088 0 3.232 1.07 3.232 2.946v.075c0 1.292-1.355 1.354-4.723 1.715-3.704.398-7.246 1.504-7.246 5.804 0 3.754 2.746 5.742 6.388 5.742zm1.168-3.307c-1.876 0-3.219-.857-3.219-2.51 0-1.728 1.504-2.449 3.518-2.735 1.181-.161 3.542-.46 4.126-.932v2.25c0 2.125-1.715 3.927-4.425 3.927zM129.128 38h4.499V26.777c0-2.424 1.828-4.14 4.301-4.14.758 0 1.703.137 2.088.262v-4.14a10.817 10.817 0 00-1.616-.123c-2.187 0-4.014 1.243-4.71 3.455h-.199v-3.182h-4.363V38zm13.877 0h4.499v-6.413l1.641-1.753L154.987 38h5.381l-7.83-10.85 7.395-8.24h-5.257l-6.861 7.668h-.311V12.546h-4.499V38zm27.592.373c4.45 0 7.508-2.175 8.303-5.494l-4.201-.472c-.609 1.616-2.1 2.46-4.039 2.46-2.909 0-4.835-1.913-4.873-5.182h13.299v-1.38c0-6.699-4.027-9.645-8.725-9.645-5.468 0-9.036 4.015-9.036 9.906 0 5.991 3.518 9.807 9.272 9.807zm-4.797-11.72c.137-2.437 1.939-4.487 4.623-4.487 2.586 0 4.326 1.889 4.351 4.486H165.8zm26.626-7.744h-3.766v-4.574h-4.499v4.574h-2.71v3.48h2.71v10.615c-.025 3.592 2.585 5.356 5.966 5.257 1.28-.037 2.162-.286 2.647-.447l-.758-3.518a5.616 5.616 0 01-1.318.174c-1.131 0-2.038-.398-2.038-2.212v-9.869h3.766v-3.48z"></path></svg>'
+            svgWidth={194}
+            svgHeight={50}
+            width={70}
+          />
+        </MenubarTrigger>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>
+          <Text>File</Text>
+        </MenubarTrigger>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>
+          <Text>Edit</Text>
+        </MenubarTrigger>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>
+          <Text>View</Text>
+        </MenubarTrigger>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>
+          <Text>Account</Text>
+        </MenubarTrigger>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/examples/market/src/components/sidebar.tsx b/examples/market/src/components/sidebar.tsx
@@ -0,0 +1,92 @@
+import { Container, Text } from '@react-three/uikit'
+import { Button } from '@/button.js'
+import { Playlist } from '../data/playlists.js'
+import { ComponentPropsWithoutRef } from 'react'
+import { Eclipse, Package, Star, User, Image as ImageIcon } from '@react-three/uikit-lucide'
+
+export function Sidebar({
+  playlists,
+  ...props
+}: ComponentPropsWithoutRef<typeof Container> & {
+  playlists: Playlist[]
+}) {
+  return (
+    <Container overflow="scroll" paddingRight={20} paddingBottom={48} {...props}>
+      <Container paddingBottom={16} gap={16}>
+        <Container paddingX={12} paddingY={8}>
+          <Text
+            marginBottom={8}
+            paddingX={16}
+            fontWeight="semi-bold"
+            fontSize={18}
+            lineHeight={1.5555}
+            letterSpacing={-0.4}
+          >
+            Discover
+          </Text>
+          <Container gap={4}>
+            <Button variant="secondary" justifyContent="flex-start">
+              <Package marginRight={8} width={16} height={16} />
+              <Text>Models</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <Eclipse marginRight={8} width={16} height={16} />
+              <Text>Materials</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <ImageIcon marginRight={8} width={16} height={16} />
+              <Text>HDRIS</Text>
+            </Button>
+          </Container>
+        </Container>
+        <Container paddingX={12} paddingY={8}>
+          <Text
+            marginBottom={8}
+            paddingX={16}
+            fontWeight="semi-bold"
+            fontSize={18}
+            lineHeight={1.5555}
+            letterSpacing={-0.4}
+          >
+            Collections
+          </Text>
+          <Container gap={4}>
+            <Button variant="ghost" justifyContent="flex-start">
+              <Star marginRight={8} width={16} height={16} />
+              <Text>Favorits</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <Package marginRight={8} width={16} height={16} />
+              <Text>Models</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <Eclipse marginRight={8} width={16} height={16} />
+              <Text>Materials</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <ImageIcon marginRight={8} width={16} height={16} />
+              <Text>HDRIs</Text>
+            </Button>
+            <Button variant="ghost" justifyContent="flex-start">
+              <User marginRight={8} width={16} height={16} />
+              <Text>Creators</Text>
+            </Button>
+          </Container>
+        </Container>
+        <Container paddingY={8}>
+          <Text paddingX={28} fontSize={18} lineHeight={1.5555} fontWeight="semi-bold" letterSpacing={-0.4}>
+            Favorits
+          </Text>
+          <Container paddingX={4} flexDirection="column" gap={4} padding={8}>
+            {playlists?.map((playlist, i) => (
+              <Button key={`${playlist}-${i}`} variant="ghost" justifyContent="flex-start">
+                <Star marginRight={8} width={16} height={16} />
+                <Text fontWeight="normal">{playlist}</Text>
+              </Button>
+            ))}
+          </Container>
+        </Container>
+      </Container>
+    </Container>
+  )
+}