feat: cli for installing components from a kit

pmndrs · Mar 1, 2024 · dc9c939 · dc9c939
1 parent 3e9574f
commit dc9c939
Show file tree

Hide file tree

Showing 12 changed files with 483 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,6 @@ TODO Release
 - feat: nesting inside non root/container components (e.g. image)
 - fix: scrollbar border radius to high (happens with very long panels)
 - feat: drag/click threshold
-- feat: cli for kits
 - feat: add apfel components
 - feat: input
 - fix: decrease clipping rect when scrollbar present

diff --git a/examples/card/.prettierrc b/examples/card/.prettierrc
diff --git a/examples/card/src/App.jsx b/examples/card/src/App.jsx
@@ -1,24 +1,28 @@
-import { Environment, MeshPortalMaterial, PerspectiveCamera } from "@react-three/drei"
-import { Canvas, extend, useFrame } from "@react-three/fiber"
-import { Root, Container, Text, setPreferredColorScheme, Content } from "@react-three/uikit"
-import { BellRing, Check } from "@react-three/uikit-lucide"
-import { DefaultColors, colors } from "@/theme"
-import { Avatar } from "@/avatar"
-import { Button } from "@/button"
-import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/card"
-import { Switch } from "@/switch"
-import { useMemo, useRef } from "react"
-import { signal } from "@preact/signals-core"
-import { geometry, easing } from "maath"
-import { Floating, Physical } from "./components/Simulation"
+import { Environment, MeshPortalMaterial, PerspectiveCamera } from '@react-three/drei'
+import { Canvas, extend, useFrame } from '@react-three/fiber'
+import { Root, Container, Text, setPreferredColorScheme, Content } from '@react-three/uikit'
+import { BellRing, Check } from '@react-three/uikit-lucide'
+import { DefaultColors, colors } from '@/theme'
+import { Avatar } from '@/avatar'
+import { Button } from '@/button'
+import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card'
+import { Switch } from '@/switch'
+import { useMemo, useRef } from 'react'
+import { signal } from '@preact/signals-core'
+import { geometry, easing } from 'maath'
+import { Floating, Physical } from './components/Simulation'
 
 extend(geometry)
-setPreferredColorScheme("light")
-const notifications = [{ title: "Your call has been confirmed.", description: "1 hour ago" }]
+setPreferredColorScheme('light')
+const notifications = [{ title: 'Your call has been confirmed.', description: '1 hour ago' }]
 
 export default function App() {
   return (
-    <Canvas camera={{ position: [0, 0, 18], fov: 32.5 }} style={{ height: "100dvh", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
+    <Canvas
+      camera={{ position: [0, 0, 18], fov: 32.5 }}
+      style={{ height: '100dvh', touchAction: 'none' }}
+      gl={{ localClippingEnabled: true }}
+    >
       <ambientLight intensity={Math.PI} />
       <spotLight decay={0} position={[0, 5, 10]} angle={0.25} penumbra={1} intensity={2} castShadow />
       <Root pixelSize={0.01}>
@@ -45,8 +49,8 @@ export function CardPage() {
   const translateY = useMemo(() => signal(-460), [])
   const translateZ = useMemo(() => signal(0), [])
   useFrame((_, delta) => {
-    easing.damp(translateY, "value", openRef.current ? 0 : -460, 0.2, delta)
-    easing.damp(translateZ, "value", openRef.current ? 200 : 0, 0.2, delta)
+    easing.damp(translateY, 'value', openRef.current ? 0 : -460, 0.2, delta)
+    easing.damp(translateZ, 'value', openRef.current ? 200 : 0, 0.2, delta)
   })
   return (
     <Root pixelSize={0.01} sizeX={4.4}>
@@ -58,12 +62,13 @@ export function CardPage() {
           onClick={(e) => (e.stopPropagation(), (openRef.current = !openRef.current))}
           cursor="pointer"
           zIndexOffset={10}
-          transformTranslateZ={translateZ}>
+          transformTranslateZ={translateZ}
+        >
           <Content transformTranslateZ={1} padding={14} keepAspectRatio={false} width="100%" height={400}>
             <mesh>
               <roundedPlaneGeometry args={[1, 1, 0.025]} />
               <MeshPortalMaterial>
-                <color attach="background" args={["white"]} />
+                <color attach="background" args={['white']} />
                 <ambientLight intensity={Math.PI} />
                 <Environment preset="city" />
                 <Physical />
@@ -80,7 +85,8 @@ export function CardPage() {
             alignItems="center"
             justifyContent="space-between"
             borderRadiusBottom={20}
-            castShadow>
+            castShadow
+          >
             <Container gap={8}>
               <Text fontWeight="normal" fontSize={24} lineHeight={1}>
                 VanArsdel Marketing
@@ -97,7 +103,12 @@ export function CardPage() {
           </Container>
         </Container>
         <Container transformTranslateY={-40} overflow="hidden">
-          <Container paddingTop={40} transformTranslateY={translateY} backgroundColor={colors.secondary} borderRadius={20}>
+          <Container
+            paddingTop={40}
+            transformTranslateY={translateY}
+            backgroundColor={colors.secondary}
+            borderRadius={20}
+          >
             <CardHeader>
               <CardTitle>
                 <Text>Notifications</Text>
@@ -128,8 +139,15 @@ export function CardPage() {
                     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} />
+                    gap={17}
+                  >
+                    <Container
+                      height={8}
+                      width={8}
+                      transformTranslateY={4}
+                      borderRadius={1000}
+                      backgroundColor={colors.primary}
+                    />
                     <Container gap={4}>
                       <Text fontSize={14} lineHeight={1}>
                         {notification.title}
@@ -143,7 +161,11 @@ export function CardPage() {
               </Container>
             </CardContent>
             <CardFooter>
-              <Button onClick={(e) => (e.stopPropagation(), (openRef.current = !openRef.current))} flexDirection="row" width="100%">
+              <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>

diff --git a/examples/card/src/components/Simulation.jsx b/examples/card/src/components/Simulation.jsx
@@ -1,35 +1,60 @@
-import * as THREE from "three"
-import { useGLTF, Float } from "@react-three/drei"
-import { useFrame } from "@react-three/fiber"
-import { Physics, RigidBody, BallCollider } from "@react-three/rapier"
-import { useMemo, useRef } from "react"
+import * as THREE from 'three'
+import { useGLTF, Float } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { Physics, RigidBody, BallCollider } from '@react-three/rapier'
+import { useMemo, useRef } from 'react'
 
 // Shapes by https://app.spline.design/library/a4eeaee4-be03-4df8-ab05-5a073eda2eb4
 export function Floating(props) {
-    const { nodes, materials } = useGLTF("/smileys-transformed.glb")
-    return (
-      <group {...props} dispose={null}>
-        <Float>
-          <mesh geometry={nodes.hash.geometry} material={materials.PaletteMaterial001} position={[-4.095, 1.891, -2.58]} scale={0.216} />
-        </Float>
-        <Float>
-          <mesh geometry={nodes.star001.geometry} material={materials.PaletteMaterial001} position={[2.932, -2.747, -2.807]} scale={0.278} />
-        </Float>
-        <Float>
-          <mesh geometry={nodes.play.geometry} material={materials.PaletteMaterial001} position={[3.722, 0.284, -1.553]} scale={0.245} />
-        </Float>
-        <Float>
-          <mesh geometry={nodes.points.geometry} material={materials.PaletteMaterial001} position={[3, 2.621, -1.858]} scale={0.239} />
-        </Float>
-        <Float>
-          <mesh geometry={nodes.Ellipse.geometry} material={materials.PaletteMaterial001} position={[-3.275, -1, -3.389]} scale={0.317} />
-        </Float>
-      </group>
-    )
-  }
+  const { nodes, materials } = useGLTF('/smileys-transformed.glb')
+  return (
+    <group {...props} dispose={null}>
+      <Float>
+        <mesh
+          geometry={nodes.hash.geometry}
+          material={materials.PaletteMaterial001}
+          position={[-4.095, 1.891, -2.58]}
+          scale={0.216}
+        />
+      </Float>
+      <Float>
+        <mesh
+          geometry={nodes.star001.geometry}
+          material={materials.PaletteMaterial001}
+          position={[2.932, -2.747, -2.807]}
+          scale={0.278}
+        />
+      </Float>
+      <Float>
+        <mesh
+          geometry={nodes.play.geometry}
+          material={materials.PaletteMaterial001}
+          position={[3.722, 0.284, -1.553]}
+          scale={0.245}
+        />
+      </Float>
+      <Float>
+        <mesh
+          geometry={nodes.points.geometry}
+          material={materials.PaletteMaterial001}
+          position={[3, 2.621, -1.858]}
+          scale={0.239}
+        />
+      </Float>
+      <Float>
+        <mesh
+          geometry={nodes.Ellipse.geometry}
+          material={materials.PaletteMaterial001}
+          position={[-3.275, -1, -3.389]}
+          scale={0.317}
+        />
+      </Float>
+    </group>
+  )
+}
 
 export function Physical() {
-  const { nodes, materials } = useGLTF("/smileys-transformed.glb")
+  const { nodes, materials } = useGLTF('/smileys-transformed.glb')
   const meshes = useMemo(() => Object.values(nodes).filter((node) => node.isMesh), [nodes])
   return (
     <Physics gravity={[0, 0, 0]}>
@@ -45,17 +70,24 @@ function RigidShape({ mesh, vec = new THREE.Vector3() }) {
   const api = useRef()
   useFrame((state, delta) => {
     delta = Math.min(0.1, delta)
-    api.current?.applyImpulse(vec.copy(api.current.translation()).negate().add({ x: 0, y: 2, z: 0 }).multiplyScalar(0.2))
+    api.current?.applyImpulse(
+      vec.copy(api.current.translation()).negate().add({ x: 0, y: 2, z: 0 }).multiplyScalar(0.2),
+    )
   })
   return (
     <RigidBody
       ref={api}
       scale={0.2}
-      position={[THREE.MathUtils.randFloatSpread(10), THREE.MathUtils.randFloatSpread(10), THREE.MathUtils.randFloatSpread(10)]}
+      position={[
+        THREE.MathUtils.randFloatSpread(10),
+        THREE.MathUtils.randFloatSpread(10),
+        THREE.MathUtils.randFloatSpread(10),
+      ]}
       linearDamping={4}
       angularDamping={1}
       friction={0.1}
-      colliders="ball">
+      colliders="ball"
+    >
       <mesh geometry={mesh.geometry} material={mesh.material} />
     </RigidBody>
   )
@@ -64,11 +96,13 @@ function RigidShape({ mesh, vec = new THREE.Vector3() }) {
 function Pointer({ vec = new THREE.Vector3() }) {
   const ref = useRef()
   useFrame(({ mouse, viewport }) => {
-    ref.current?.setNextKinematicTranslation(vec.set((mouse.x * viewport.width) / 2, (mouse.y * viewport.height) / 2, 0))
+    ref.current?.setNextKinematicTranslation(
+      vec.set((mouse.x * viewport.width) / 2, (mouse.y * viewport.height) / 2, 0),
+    )
   })
   return (
     <RigidBody position={[0, 0, 0]} type="kinematicPosition" colliders={false} ref={ref}>
       <BallCollider args={[2]} />
     </RigidBody>
   )
-}
+}
diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
@@ -40,6 +40,14 @@ export default function App() {
         borderRight={0}
         borderColor="red"
       >
+        <Container backgroundColor="blue" width={100} positionType="relative">
+          <Container>
+            <Text>Escribe algo...</Text>
+          </Container>
+          <Container backgroundColor="red" positionType="absolute" positionTop="100%" positionRight="100%">
+            <Text>Escribe algo...</Text>
+          </Container>
+        </Container>
         <DefaultProperties opacity={0.5} border={s}>
           <Image width={300} height={300} src={texture ?? undefined} />
           <Text

diff --git a/packages/kits/default/package.json b/packages/kits/default/package.json
@@ -1,5 +1,10 @@
 {
-  "scripts": {},
+  "scripts": {
+    "check:prettier": "prettier --check .",
+    "check:eslint": "eslint '**/*.{tsx,ts}'",
+    "fix:prettier": "prettier --write .",
+    "fix:eslint": "eslint '**/*.{tsx,ts}' --fix"
+  },
   "devDependencies": {
     "@preact/signals-core": "^1.5.1",
     "@react-three/fiber": "^8.15.13",

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: "black",
+    primary: hsl(222.2, 47.4, 11.2),
     primaryForeground: hsl(210, 40, 98),
     secondary: hsl(210, 40, 96.1),
     secondaryForeground: hsl(222.2, 47.4, 11.2),

diff --git a/packages/uikit/package.json b/packages/uikit/package.json
@@ -23,6 +23,9 @@
     "dist"
   ],
   "main": "dist/index.js",
+  "bin": {
+    "uikit": "./dist/cli/index.js"
+  },
   "scripts": {
     "test": "mocha ./tests/allocation.spec.ts",
     "build": "tsc",
@@ -42,12 +45,18 @@
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
     "base64-js": "^1.5.1",
-    "yoga-wasm-web": "^0.3.3"
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2",
+    "yoga-wasm-web": "^0.3.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@react-three/drei": "^9.96.1",
     "@react-three/fiber": "^8.15.13",
     "@types/node": "^20.11.0",
+    "@types/prompts": "^2.4.9",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@types/three": "^0.160.0",