Merge pull request #28 from pmndrs/feature/yoga3.0

update to yoga3.0, remove precision, switch to web defaults

docs/getting-started/components-and-properties.md

@@ -129,7 +129,7 @@ In addition to the flexbox properties, the container has properties for styling
 
 ## Root
 
-Every layout needs to start with a `Root` component. The `Root` component has all the properties of a `Container` component. It allows you to control the `precision` of the layout engine. A precision of `1` expresses that all values computed by the layout engines are integers, while the default precision of `0.1` allows the layout engine to measure layouts in sub-pixel values such as `10.2`. The `pixelSize` property of the `Root` component allows you to specify the relation of pixels inside the layout with the three.js units in the scene. The `anchorX` and `anchorY` properties allow you to specify where the `Root` component is anchored in relation to its position. The `sizeX` and `sizeY` properties can be used to give the layout a fixed size in three.js units.
+Every layout needs to start with a `Root` component. The `Root` component has all the properties of a `Container` component. The `pixelSize` property of the `Root` component allows you to specify the relation of pixels inside the layout with the three.js units in the scene. The `anchorX` and `anchorY` properties allow you to specify where the `Root` component is anchored in relation to its position. The `sizeX` and `sizeY` properties can be used to give the layout a fixed size in three.js units.
 
 ```jsx
 <Root sizeX={2} sizeY={1} flexDirection="row">
@@ -143,7 +143,6 @@ Every layout needs to start with a `Root` component. The `Root` component has al
 
 | Property  | Type                      |
 | --------- | ------------------------- |
-| precision | number                    |
 | anchorX   | "left", "center", "right" |
 | anchorY   | "top", "center", "bottom" |
 | sizeX     | number                    |
@@ -167,7 +166,6 @@ The `Fullscreen` component wraps the `Root` component and binds its content dire
 
 | Property     | Type    |
 | ------------ | ------- |
-| precision    | number  |
 | attachCamera | boolean |
 
 </details>

docs/migration/from-html-css.md

@@ -10,13 +10,3 @@ uikit is inspired by HTML/CSS. Therefore, many properties are similar with minor
 
 In uikit classes can be defined directly in the file. Styles should not be seperated from their usage.
 The use of inline styles is recommended and supported through the typescript type system.
-
-## Defaults
-
-The defaults of the yoga layout engine differs from the defaults on the web. Therefore, some properties turn unnecassary while others need to be added.
-
-- **flexDirection** defaults to `column` instead of `row`
-- **alignContent** defaults to `flex-start` instead of `stretch`
-- **flexShrink** defaults to `0` instead of `1`
-
-In most cases explicitly specifying the flexDirection is enough.

docs/migration/from-koestlich.md

@@ -55,6 +55,17 @@ This guide is intended for developers migrating their user interface from Koestl
     <Text fontFamily="robotoBold">
     ```
 
+
+## Defaults
+
+The defaults of the yoga layout engine have changed to match the web defaults. Therefore, some properties turn unnecassary while others need to be added.
+
+- **flexDirection** defaults to `row` instead of `column`
+- **alignContent** defaults to `stretch` instead of `flex-start`
+- **flexShrink** defaults to `1` instead of `0`
+
+In most cases explicitly specifying the flexDirection is enough.
+
 ## Migration Steps
 
 - Remove the index property from your UI elements. The order will be automatically managed.
@@ -72,5 +83,6 @@ This guide is intended for developers migrating their user interface from Koestl
 - Rname DefaultStyleProvider to DefaultProperties
 - Remove the depth property from all SVG components
 - Replace usages of the Box component with a Content component containing an Object3D with a BoxGeomtry.
+- Adapt the components to use to the new defaults, which most likely means explicitly setting `flexDirection` to `row` and `flexShrink` to `0`.
 
 By following these steps, you should be able to smoothly transition your user interface from Koestlich to uikit, taking advantage of the latter's streamlined properties and components.

docs/migration/from-tailwind.md

@@ -11,13 +11,3 @@ uikit is inspired by tailwind. Therefore, many properties are similar with minor
 In contrast to tailwind, uikit's core units are pixels. Therefore, sizes such as `p-3`, which translates to `padding: 0.75rem` or `padding: 16px` would be expressed as `padding={16}` in uikit. The rule for sizes is to multiply the tailwind value times 4.
 
 Other sizes such as border radii (e.g. `rounded-md`) must be converted by looking into the [Tailwind Documentation](https://tailwindcss.com/docs). In this case `rounded-md` translates to `borderRadius={6}`.
-
-## Defaults
-
-The defaults of the yoga layout engine differs from the defaults on the web. Therefore, some properties turn unnecassary while others need to be added.
-
-- **flexDirection** defaults to `column` instead of `row`
-- **alignContent** defaults to `flex-start` instead of `stretch`
-- **flexShrink** defaults to `0` instead of `1`
-
-In most cases explicitly specifying the flexDirection is enough.

docs/tutorials/sizing.md

@@ -1,6 +1,6 @@
 ---
 title: Sizing
-description: How to size elements and use pixelSize, sizeX, sizeY, and precision.
+description: How to size elements and use pixelSize, sizeX, and sizeY.
 nav: 10
 ---
 
@@ -17,6 +17,4 @@ The `pixelSize` should be set so that the default font height (`16px`) is reason
   The root element size is specified in three.js units using the optional `sizeX` and `sizeY` parameters.
 
   Declaring the size of elements inside the root element using parameters, such as the `width` of an image or the `fontSize` of a text element, is based on `pixel` units, which strongly relate to the `px` unit in CSS. The relation between three.js units and pixel units can be set using the `pixelSize` property. The property expresses the size of one pixel in three.js units and defaults to `0.002`. With this default, `500px` is equal to 1 three.js unit. To make interoperability between code bases and different component libraries easier, we encourage to use the intuition of pixel sizes from the web. For instance, the default text height relates to 16 pixels. If these pixel sizes appear too small or too high in the szene, the `pixelSize` should be increased or decreased respectively.
-
-  Another property exposed by the `Root` component is the `precision`, which expresses the resolution of the units. For instance, the default `precision` of `0.1` allows the layout engine to interpret the values `0.5` and `0.4 correctly` but will misinterpret `0.45`.
 </details>

examples/apfel/src/App.tsx

@@ -2,21 +2,21 @@ import { Canvas } from '@react-three/fiber'
 import { Fullscreen, Text, Container } from '@react-three/uikit'
 import { Copy } from '@react-three/uikit-lucide'
 import { XWebPointers, noEvents } from '@coconut-xr/xinteraction/react'
-import { Card } from '@/card'
-import { Button } from '@/button'
-import { Tabs, TabsButton } from '@/tabs'
-import { Defaults } from '@/theme'
+import { Card } from '@/card.js'
+import { Button } from '@/button.js'
+import { Tabs, TabsButton } from '@/tabs.js'
+import { Defaults } from '@/theme.js'
 import { useState } from 'react'
-import { TextOnCard } from './components/card'
-import { CheckboxOnCard } from './components/checkbox'
-import { ButtonsOnCard } from './components/button'
-import { ListsOnCard } from './components/list'
-import { SlidersOnCard } from './components/slider'
-import { TabsOnCard } from './components/tabs'
-import { TabBarWithText } from './components/tab-bar'
-import { ProgressBarsOnCard } from './components/progress'
-import { LoadingSpinnersOnCard } from './components/loading'
-import { InputsOnCard } from './components/input'
+import { TextOnCard } from './components/card.js'
+import { CheckboxOnCard } from './components/checkbox.js'
+import { ButtonsOnCard } from './components/button.js'
+import { ListsOnCard } from './components/list.js'
+import { SlidersOnCard } from './components/slider.js'
+import { TabsOnCard } from './components/tabs.js'
+import { TabBarWithText } from './components/tab-bar.js'
+import { ProgressBarsOnCard } from './components/progress.js'
+import { LoadingSpinnersOnCard } from './components/loading.js'
+import { InputsOnCard } from './components/input.js'
 
 const componentPages = {
   card: TextOnCard,
@@ -59,14 +59,15 @@ export default function App() {
           overflow="scroll"
           scrollbarColor="black"
           backgroundColor="white"
+          flexDirection="column"
           gap={32}
           paddingX={32}
           alignItems="center"
           padding={32}
         >
-          <Card borderRadius={32} gap={32} paddingX={16}>
+          <Card flexShrink={0} borderRadius={32} gap={32} paddingX={16}>
             <Container flexDirection="row" maxWidth="100%" overflow="scroll" paddingY={16}>
-              <Tabs value={component} onValueChange={setComponent}>
+              <Tabs flexShrink={0} value={component} onValueChange={setComponent}>
                 {Object.keys(componentPages).map((name) => (
                   <TabsButton value={name} key={name}>
                     <Text>
@@ -78,11 +79,11 @@ export default function App() {
               </Tabs>
             </Container>
           </Card>
-          <Container flexGrow={1} flexDirection="row" justifyContent="center" alignItems="center">
+          <Container flexShrink={0} flexGrow={1} flexDirection="row" justifyContent="center" alignItems="center">
             <ComponentPage />
           </Container>
 
-          <Card padding={8} flexDirection="row" gap={8} alignItems="center">
+          <Card flexShrink={0} padding={8} flexDirection="row" gap={8} alignItems="center">
             <Text backgroundColor="black" padding={8} borderRadius={16} marginLeft={8}>
               npx uikit component add apfel {component}
             </Text>

examples/apfel/src/components/button.tsx

@@ -1,6 +1,6 @@
 import { Container, Text } from '@react-three/uikit'
-import { Card } from '@/card'
-import { Button } from '@/button'
+import { Card } from '@/card.js'
+import { Button } from '@/button.js'
 import { BoxSelect } from '@react-three/uikit-lucide'
 
 export function ButtonsOnCard() {

examples/apfel/src/components/card.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@react-three/uikit'
-import { Card } from '@/card'
+import { Card } from '@/card.js'
 
 export function TextOnCard() {
   return (

examples/apfel/src/components/checkbox.tsx

@@ -1,5 +1,5 @@
-import { Card } from '@/card'
-import { Checkbox } from '@/checkbox'
+import { Card } from '@/card.js'
+import { Checkbox } from '@/checkbox.js'
 
 export function CheckboxOnCard() {
   return (

examples/apfel/src/components/input.tsx

@@ -1,13 +1,13 @@
-import { Card } from '@/card'
-import { Input } from '@/input'
+import { Card } from '@/card.js'
+import { Input } from '@/input.js'
 import { Container } from '@react-three/uikit'
 import { BoxSelect } from '@react-three/uikit-lucide'
 import { useState } from 'react'
 
 export function InputsOnCard() {
   const [text, setText] = useState('')
   return (
-    <Card borderRadius={32} padding={16}>
+    <Card flexDirection="column" borderRadius={32} padding={16}>
       <Container flexDirection="row" gapColumn={16}>
         <Container flexDirection="column" alignItems="stretch" gapRow={16} width={300}>
           <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" />

examples/apfel/src/components/list.tsx

@@ -1,14 +1,14 @@
 import { Text, Container } from '@react-three/uikit'
 import { BoxSelect, ChevronRight, Info } from '@react-three/uikit-lucide'
-import { Card } from '@/card'
-import { List, ListItem } from '@/list'
-import { Button } from '@/button'
+import { Card } from '@/card.js'
+import { List, ListItem } from '@/list.js'
+import { Button } from '@/button.js'
 
 export function ListsOnCard() {
   return (
     <Container flexDirection="column" gapRow={32} alignItems="center">
       <Container flexDirection="column" md={{ flexDirection: 'row' }} gap={32}>
-        <Card borderRadius={32} padding={16}>
+        <Card flexDirection="column" borderRadius={32} padding={16}>
           <List type="plain" width={400}>
             <ListItem
               subtitle={<Text>Subtitle</Text>}
@@ -28,7 +28,7 @@ export function ListsOnCard() {
             </ListItem>
           </List>
         </Card>
-        <Card borderRadius={32} padding={16}>
+        <Card flexDirection="column" borderRadius={32} padding={16}>
           <List type="plain" width={400}>
             <ListItem
               subtitle={<Text>Subtitle</Text>}
@@ -67,7 +67,7 @@ export function ListsOnCard() {
         </Card>
       </Container>
       <Container flexDirection="column" md={{ flexDirection: 'row' }} gap={32}>
-        <Card borderRadius={32} padding={16}>
+        <Card flexDirection="column" borderRadius={32} padding={16}>
           <List type="inset" width={400}>
             <ListItem
               isFirst
@@ -88,7 +88,7 @@ export function ListsOnCard() {
             </ListItem>
           </List>
         </Card>
-        <Card borderRadius={32} padding={16}>
+        <Card flexDirection="column" borderRadius={32} padding={16}>
           <List type="inset" width={400}>
             <ListItem
               isFirst

examples/apfel/src/components/loading.tsx

@@ -1,5 +1,5 @@
-import { Card } from '@/card'
-import { Loading } from '@/loading'
+import { Card } from '@/card.js'
+import { Loading } from '@/loading.js'
 
 export function LoadingSpinnersOnCard() {
   return (

examples/apfel/src/components/progress.tsx

@@ -1,5 +1,5 @@
-import { Card } from '@/card'
-import { Progress } from '@/progress'
+import { Card } from '@/card.js'
+import { Progress } from '@/progress.js'
 
 export function ProgressBarsOnCard() {
   return (

examples/apfel/src/components/slider.tsx

@@ -1,7 +1,7 @@
 import { Container } from '@react-three/uikit'
 import { BoxSelect } from '@react-three/uikit-lucide'
-import { Card } from '@/card'
-import { Slider } from '@/slider'
+import { Card } from '@/card.js'
+import { Slider } from '@/slider.js'
 
 export function SlidersOnCard() {
   return (

examples/apfel/src/components/tab-bar.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@react-three/uikit'
 import { BoxSelect } from '@react-three/uikit-lucide'
-import { TabBar, TabBarItem } from '@/tab-bar'
+import { TabBar, TabBarItem } from '@/tab-bar.js'
 
 export function TabBarWithText() {
   return (

examples/apfel/src/components/tabs.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@react-three/uikit'
 import { BoxSelect } from '@react-three/uikit-lucide'
-import { Card } from '@/card'
-import { Tabs, TabsButton } from '@/tabs'
+import { Card } from '@/card.js'
+import { Tabs, TabsButton } from '@/tabs.js'
 
 export function TabsOnCard() {
   return (

examples/apfel/vite.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
   plugins: [react(), basicSsl()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+    esbuildOptions: {
+      target: 'esnext',
+    },
   },
   base: '/uikit/examples/apfel/',
   resolve: {
@@ -16,4 +19,7 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') },
     ],
   },
+  build: {
+    target: 'esnext',
+  },
 })

examples/auth/src/App.tsx

@@ -10,7 +10,8 @@ import {
 } from '@react-three/uikit'
 import { Defaults, colors } from '@/theme.js'
 import { Button } from '@/button.js'
-import { UserAuthForm } from './components/user-auth-form'
+import { UserAuthForm } from './components/user-auth-form.js'
+import { Perf } from 'r3f-perf'
 
 setPreferredColorScheme('light')
 
@@ -23,6 +24,7 @@ export default function App() {
       gl={{ localClippingEnabled: true }}
       {...canvasInputProps}
     >
+      <Perf />
       {/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
         <Defaults>
           <DialogAnchor>
@@ -48,7 +50,7 @@ export default function App() {
 
 function AuthenticationPage() {
   return (
-    <Container height="100%" positionType="relative" flexDirection="row" alignItems="center">
+    <Container width="100%" height="100%" positionType="relative" flexDirection="row" alignItems="center">
       <Button
         variant="ghost"
         positionType="absolute"
@@ -97,8 +99,8 @@ function AuthenticationPage() {
               Acme Inc
             </Text>
           </Container>
-          <Container marginTop="auto">
-            <Container gap={8}>
+          <Container flexDirection="column" marginTop="auto">
+            <Container flexDirection="column" gap={8}>
               <Text fontSize={18} lineHeight={1.555}>
                 "Culpa eiusmod ut ipsum sunt velit labore minim eu. Occaecat magna mollit aliqua cupidatat."
               </Text>
@@ -109,9 +111,16 @@ function AuthenticationPage() {
           </Container>
         </DefaultProperties>
       </Container>
-      <Container flexBasis={0} flexGrow={1} padding={16} lg={{ padding: 32 }}>
-        <Container marginX="auto" width="100%" justifyContent="center" gap={24} sm={{ width: 350 }}>
-          <Container gap={8}>
+      <Container flexDirection="column" flexBasis={0} flexGrow={1} padding={16} lg={{ padding: 32 }}>
+        <Container
+          flexDirection="column"
+          marginX="auto"
+          width="100%"
+          justifyContent="center"
+          gap={24}
+          sm={{ width: 350 }}
+        >
+          <Container alignItems="center" flexDirection="column" gap={8}>
             <DefaultProperties horizontalAlign="center">
               <Text fontSize={24} lineHeight={1.3333} fontWeight="semi-bold" letterSpacing={-0.4}>
                 Create an account

examples/auth/src/components/user-auth-form.tsx

@@ -6,16 +6,16 @@ import { colors } from '@/theme'
 
 export function UserAuthForm(props: React.ComponentPropsWithoutRef<typeof Container>) {
   return (
-    <Container gap={24} {...props}>
-      <Container gap={8}>
-        <Container gap={4}>
+    <Container flexDirection="column" gap={24} {...props}>
+      <Container flexDirection="column" gap={8}>
+        <Container flexDirection="column" gap={4}>
           <Input placeholder="name@example.com" />
         </Container>
         <Button>
           <Text>Sign In with Email</Text>
         </Button>
       </Container>
-      <Container positionType="relative">
+      <Container flexDirection="column" positionType="relative">
         <Container positionType="absolute" inset={0} alignItems="center" flexDirection="row">
           <Container width="100%" borderTop={1} />
         </Container>