fix: order problem - when parent has non-meshbasic material and child…

… has mesh basic material feat: control receive and cast shadow (on every component) fix: shadow does not respect clipping and border radius
pmndrs · Feb 28, 2024 · 097f864 · 097f864
1 parent 70486da
commit 097f864
Show file tree

Hide file tree

Showing 39 changed files with 1,038 additions and 519 deletions.
diff --git a/README.md b/README.md
@@ -14,27 +14,27 @@ Build performant 3D user interfaces for Three.js using @react-three/fiber and yo
 
 TODO Release
 
+- fix: changing font weight with hot reload (test if its the same for normal react state change)
+- fix: conditionally render children (see Discord)
+- feat: ref.current.setStyle({ ... })
 - feat: nesting inside non root/container components (e.g. image)
-- feat: support more characters for different languages
-- fix: always loading normal font
 - fix: scrollbar border radius to high (happens with very long panels)
 - feat: drag/click threshold
 - feat: cli for kits
 - feat: add apfel components
-- feat: Content "measureContent" flag => allow disabling content measuring and scaling
-- feat: support for visibility="hidden"
 - feat: input
 - fix: decrease clipping rect when scrollbar present
 
-TODO Later
+Roadmap
 
 - on demand rendering to save battery for UI only apps / rendering to render targets
 - upgrade to yoga2.0
 - virtual lists (support thousands of elements in a list by using fixed sizes and not using yoga)
 - option to render to seperate render targets depending on element type (e.g. render text to high quality quad layer for WebXR)
 - scrollIntoView
-- tailwind colors (with option to support dark mode)
 - Instancing for icons
+- Support more characters for different languages
+- Support for visibility="hidden" & display="none"
 
 Limitations
 
@@ -48,4 +48,4 @@ Limitations
 `pnpm -r generate`  
 `pnpm -r build`  
 
-go to `examples/dashboard` and run `pnpm dev` to view the example dashboard
+go to `examples/market` and run `pnpm dev` to view the example dashboard
diff --git a/examples/card/src/App.tsx b/examples/card/src/App.tsx
@@ -11,17 +11,21 @@ import { Switch } from '@/switch'
 import { useMemo, useRef } from 'react'
 import { signal } from '@preact/signals-core'
 import { damp } from 'three/src/math/MathUtils.js'
+import { MeshPhongMaterial } from 'three'
 
 setPreferredColorScheme('light')
 
 export default function App() {
   return (
     <Canvas
       flat
+      shadows
       camera={{ position: [0, 0, 18], fov: 35 }}
       style={{ height: '100dvh', touchAction: 'none' }}
       gl={{ localClippingEnabled: true }}
     >
+      <ambientLight intensity={0.5} />
+      <directionalLight intensity={3} castShadow position={[1, 3, 5]} />
       <Root pixelSize={0.01}>
         <DefaultColors>
           <CardPage />
@@ -67,7 +71,7 @@ export function CardPage() {
             openRef.current = !openRef.current
           }}
           cursor="pointer"
-          zIndexOffset={1}
+          zIndexOffset={10}
           transformTranslateZ={translateZ}
         >
           <Image borderRadiusTop={20} width="100%" src="https://picsum.photos/600/300" />
@@ -80,6 +84,7 @@ export function CardPage() {
             alignItems="center"
             justifyContent="space-between"
             borderRadiusBottom={20}
+            castShadow
           >
             <Container gap={8}>
               <Text fontWeight="normal" fontSize={24} lineHeight={1}>
@@ -98,6 +103,8 @@ export function CardPage() {
         </Container>
         <Container transformTranslateY={-40} overflow="hidden">
           <Container
+            backgroundMaterialClass={MeshPhongMaterial}
+            receiveShadow
             paddingTop={40}
             transformTranslateY={translateY}
             backgroundColor={colors.secondary}

diff --git a/packages/kits/default/badge.tsx b/packages/kits/default/badge.tsx
@@ -2,16 +2,22 @@ import { AllOptionalProperties, Container, DefaultProperties } from '@react-thre
 import { ComponentPropsWithoutRef } from 'react'
 import { colors } from './theme.js'
 
-const badgeVariants = {
+const badgeVariants: {
+  [Key in string]: {
+    defaultProps?: AllOptionalProperties
+    containerProps?: Omit<ComponentPropsWithoutRef<typeof Container>, 'hover'>
+    containerHoverProps?: ComponentPropsWithoutRef<typeof Container>['hover']
+  }
+} = {
   default: {
     defaultProps: {
       color: colors.primaryForeground,
     },
     containerProps: {
       backgroundColor: colors.primary,
-      hover: {
-        backgroundOpacity: 0.8,
-      },
+    },
+    containerHoverProps: {
+      backgroundOpacity: 0.8,
     },
   },
   secondary: {
@@ -20,9 +26,9 @@ const badgeVariants = {
     },
     containerProps: {
       backgroundColor: colors.secondary,
-      hover: {
-        backgroundOpacity: 0.8,
-      },
+    },
+    containerHoverProps: {
+      backgroundOpacity: 0.8,
     },
   },
   destructive: {
@@ -31,30 +37,31 @@ const badgeVariants = {
     },
     containerProps: {
       backgroundColor: colors.destructive,
-      hover: {
-        backgroundOpacity: 0.8,
-      },
+    },
+    containerHoverProps: {
+      backgroundOpacity: 0.8,
     },
   },
-  outline: {
-    defaultProps: {},
-    containerProps: {},
-  },
-} satisfies {
-  [Key in string]: {
-    defaultProps: AllOptionalProperties
-    containerProps: ComponentPropsWithoutRef<typeof Container>
-  }
+  outline: {},
 }
 
 export function Badge({
   children,
   variant = 'default',
+  hover,
   ...props
 }: ComponentPropsWithoutRef<typeof Container> & { variant?: keyof typeof badgeVariants }) {
-  const { containerProps, defaultProps } = badgeVariants[variant]
+  const { containerProps, defaultProps, containerHoverProps } = badgeVariants[variant]
   return (
-    <Container borderRadius={1000} border={1} paddingX={10} paddingY={2} {...containerProps} {...props}>
+    <Container
+      borderRadius={1000}
+      border={1}
+      paddingX={10}
+      paddingY={2}
+      hover={{ ...containerHoverProps, ...hover }}
+      {...containerProps}
+      {...props}
+    >
       <DefaultProperties fontSize={12} lineHeight={1.3333} fontWeight="semi-bold" {...defaultProps}>
         {children}
       </DefaultProperties>

diff --git a/packages/kits/default/button.tsx b/packages/kits/default/button.tsx
@@ -2,72 +2,68 @@ import { AllOptionalProperties, Container, DefaultProperties } from '@react-thre
 import { ComponentPropsWithoutRef } from 'react'
 import { colors } from './theme.js'
 
-const buttonVariants = {
+const buttonVariants: {
+  [Key in string]: {
+    containerHoverProps?: ComponentPropsWithoutRef<typeof Container>['hover']
+    containerProps?: Omit<ComponentPropsWithoutRef<typeof Container>, 'hover'>
+    defaultProps?: AllOptionalProperties
+  }
+} = {
   default: {
+    containerHoverProps: {
+      backgroundOpacity: 0.9,
+    },
     containerProps: {
       backgroundColor: colors.primary,
-      hover: {
-        backgroundOpacity: 0.9,
-      },
     },
     defaultProps: {
       color: colors.primaryForeground,
     },
   },
   destructive: {
+    containerHoverProps: {
+      backgroundOpacity: 0.9,
+    },
     containerProps: {
       backgroundColor: colors.destructive,
-      hover: {
-        backgroundOpacity: 0.9,
-      },
     },
     defaultProps: {
       color: colors.destructiveForeground,
     },
   },
   outline: {
+    containerHoverProps: {
+      backgroundColor: colors.accent,
+    },
     containerProps: {
       border: 1,
       borderColor: colors.input,
       backgroundColor: colors.background,
-      hover: {
-        backgroundColor: colors.accent,
-      },
     },
-    defaultProps: {},
   }, //TODO: hover:text-accent-foreground",
   secondary: {
+    containerHoverProps: {
+      backgroundOpacity: 0.8,
+    },
     containerProps: {
       backgroundColor: colors.secondary,
-      hover: {
-        backgroundOpacity: 0.8,
-      },
     },
     defaultProps: {
       color: colors.secondaryForeground,
     },
   },
   ghost: {
-    containerProps: {
-      hover: {
-        backgroundColor: colors.accent,
-      },
-    },
-    defaultProps: {
-      hover: {},
+    containerHoverProps: {
+      backgroundColor: colors.accent,
     },
+    defaultProps: {},
   }, // TODO: hover:text-accent-foreground",
   link: {
     containerProps: {},
     defaultProps: {
       color: colors.primary,
     },
   }, //TODO: underline-offset-4 hover:underline",
-} satisfies {
-  [Key in string]: {
-    containerProps: ComponentPropsWithoutRef<typeof Container>
-    defaultProps: AllOptionalProperties
-  }
 }
 
 const buttonSizes = {
@@ -82,13 +78,14 @@ export function Button({
   variant = 'default',
   size = 'default',
   disabled = false,
+  hover,
   ...props
 }: ComponentPropsWithoutRef<typeof Container> & {
   variant?: keyof typeof buttonVariants
   size?: keyof typeof buttonSizes
   disabled?: boolean
 }) {
-  const { containerProps, defaultProps } = buttonVariants[variant]
+  const { containerProps, defaultProps, containerHoverProps } = buttonVariants[variant]
   const sizeProps = buttonSizes[size]
 
   return (
@@ -102,6 +99,10 @@ export function Button({
       backgroundOpacity={disabled ? 0.5 : undefined}
       cursor={disabled ? undefined : 'pointer'}
       flexDirection="row"
+      hover={{
+        ...containerHoverProps,
+        ...hover,
+      }}
       {...props}
     >
       <DefaultProperties

diff --git a/packages/kits/default/calendar.tsx b/packages/kits/default/calendar.tsx
@@ -1,6 +1,4 @@
-'use client'
-
-import * as React from 'react'
+/*import * as React from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { DayPicker } from 'react-day-picker'
 
@@ -50,4 +48,4 @@ function Calendar({}: { mode?: 'single' }) {
       {...props}
     />
   )
-}
+}*/
diff --git a/packages/kits/default/carousel.tsx b/packages/kits/default/carousel.tsx
@@ -1,6 +1,4 @@
-'use client'
-
-import * as React from 'react'
+/*import * as React from 'react'
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 
@@ -224,3 +222,4 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<ty
 CarouselNext.displayName = 'CarouselNext'
 
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
+*/
diff --git a/packages/kits/default/collapsible.tsx b/packages/kits/default/collapsible.tsx
@@ -1,5 +1,4 @@
-'use client'
-
+/*
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
 const Collapsible = CollapsiblePrimitive.Root
@@ -8,4 +7,4 @@ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }*/
diff --git a/packages/kits/default/command.tsx b/packages/kits/default/command.tsx
@@ -10,9 +10,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
       </DialogContent>
     </Dialog>
   )
-}*/
-
-
+}
 
 export function Command() {
   export function <CommandPrimitive
@@ -120,3 +118,4 @@ export {
   CommandShortcut,
   CommandSeparator,
 }
+*/
diff --git a/packages/kits/default/context-menu.tsx b/packages/kits/default/context-menu.tsx
@@ -1,5 +1,4 @@
-'use client'
-
+/*
 import * as React from 'react'
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
@@ -177,4 +176,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+}*/
diff --git a/packages/kits/default/dialog.tsx b/packages/kits/default/dialog.tsx
@@ -160,7 +160,7 @@ export function DialogContent({ children, sm, ...props }: ComponentPropsWithoutR
             borderRadius={2}
             opacity={0.7}
             backgroundOpacity={0.7}
-            hover={{ opacity: 0.7, backgroundOpacity: 0.7 }}
+            hover={{ opacity: 1, backgroundOpacity: 1 }}
             width={16}
             height={16}
           />

diff --git a/packages/kits/default/drawer.tsx b/packages/kits/default/drawer.tsx
@@ -1,6 +1,4 @@
-'use client'
-
-import * as React from 'react'
+/*import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
 import { cn } from '@/lib/utils'
@@ -86,4 +84,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+}*/