fix: CSF3 (#1974)

* chore: wip csf3

* chore: story not fn

Author: abernier

.storybook/main.ts

@@ -23,6 +23,14 @@ const config: StorybookConfig = {
 
   typescript: {
     reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop, component) => {
+        // Only include props that belong to the current component
+        const fileName = prop.declarations?.at(0)?.fileName // 'drei/src/core/AccumulativeShadows.tsx'
+        const componentName = fileName?.split('/').at(-1)?.split('.').at(0) // 'AccumulativeShadows'
+        return component.name === componentName
+      },
+    },
   },
 }
 

.storybook/public/images/tiger.svg

@@ -1,40 +1,45 @@
 import * as THREE from 'three'
 import * as React from 'react'
+import { ComponentProps } from 'react'
 import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture'
+import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
 import { useGLTF, AccumulativeShadows, RandomizedLight, OrbitControls, Environment } from '../../src'
 
 export default {
   title: 'Staging/AccumulativeShadows',
-  component: AccumulativeShadowScene,
-  decorators: [(storyFn) => <Setup> {storyFn()}</Setup>],
-}
+  component: AccumulativeShadows,
+  decorators: [
+    (Story) => (
+      <Setup>
+        <Story />
+      </Setup>
+    ),
+  ],
+} satisfies Meta<typeof AccumulativeShadows>
+
+type Story = StoryObj<typeof AccumulativeShadows>
 
-function AccumulativeShadowScene() {
+function AccumulativeShadowScene(props: ComponentProps<typeof AccumulativeShadows>) {
   return (
-    <React.Suspense fallback={null}>
+    <>
       <color attach="background" args={['goldenrod']} />
+
       <Suzi rotation={[-0.63, 0, 0]} scale={2} position={[0, -1.175, 0]} />
-      <AccumulativeShadows
-        temporal
-        frames={100}
-        color="goldenrod"
-        alphaTest={0.65}
-        opacity={2}
-        scale={14}
-        position={[0, -0.5, 0]}
-      >
+
+      <AccumulativeShadows {...props} position={[0, -0.5, 0]}>
         <RandomizedLight amount={8} radius={4} ambient={0.5} bias={0.001} position={[5, 5, -10]} />
       </AccumulativeShadows>
+
       <OrbitControls autoRotate={true} />
       <Environment preset="city" />
-    </React.Suspense>
+    </>
   )
 }
 
-function Suzi(props) {
+function Suzi(props: ComponentProps<'group'>) {
   const { scene, materials } = useGLTF('/suzanne-high-poly.gltf')
   React.useLayoutEffect(() => {
     scene.traverse((obj) => (obj as any).isMesh && (obj.receiveShadow = obj.castShadow = true))
@@ -55,5 +60,18 @@ function Suzi(props) {
   return <primitive object={scene} {...props} />
 }
 
-export const AccumulativeShadowSt = () => <AccumulativeShadowScene />
-AccumulativeShadowSt.storyName = 'Default'
+export const AccumulativeShadowSt = {
+  name: 'Default',
+  render: (args) => <AccumulativeShadowScene {...args} />,
+  args: {
+    temporal: true,
+    frames: 100,
+    color: 'goldenrod',
+    alphaTest: 0.65,
+    opacity: 2,
+    scale: 14,
+  },
+  argTypes: {
+    color: { control: 'color' },
+  },
+} satisfies Story

.storybook/stories/AccumulativeShadows.stories.tsx

@@ -1,5 +1,6 @@
-import React, { Suspense } from 'react'
+import React, { ComponentProps, Suspense } from 'react'
 import { Vector3 } from 'three'
+import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
@@ -10,9 +11,9 @@ import type { GLTF } from 'three-stdlib'
 
 export default {
   title: 'Performance/Adaptive',
-  component: useGLTF,
+  component: AdaptiveDpr,
   decorators: [
-    (storyFn) => (
+    (Story) => (
       <Setup
         cameraPosition={new Vector3(0, 0, 30)}
         cameraFov={50}
@@ -21,11 +22,13 @@ export default {
         lights={false}
         performance={{ min: 0.2 }}
       >
-        {storyFn()}
+        <Story />
       </Setup>
     ),
   ],
-}
+} satisfies Meta<typeof AdaptiveDpr>
+
+type Story = StoryObj<typeof AdaptiveDpr>
 
 interface ArcherGLTF extends GLTF {
   materials: { material_0: Material }
@@ -51,7 +54,7 @@ function Archer() {
   )
 }
 
-function AdaptiveScene() {
+function AdaptiveScene(props: ComponentProps<typeof AdaptiveDpr>) {
   return (
     <>
       <Suspense fallback={null}>
@@ -65,14 +68,20 @@ function AdaptiveScene() {
         castShadow
         shadow-bias={-0.001}
       />
-      <AdaptiveDpr pixelated />
+      <AdaptiveDpr {...props} />
       <AdaptiveEvents />
       <OrbitControls regress />
     </>
   )
 }
 
-export const AdaptiveSceneSt = () => <AdaptiveScene />
-AdaptiveSceneSt.story = {
+export const AdaptiveSceneSt = {
   name: 'Default',
-}
+  render: (args) => <AdaptiveScene {...args} />,
+  args: {
+    pixelated: true,
+  },
+  argTypes: {
+    pixelated: { control: 'boolean' },
+  },
+} satisfies Story

.storybook/stories/Adaptive.stories.tsx

@@ -1,38 +1,49 @@
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import React, { ComponentProps, useRef, useState } from 'react'
 import { Scene } from 'three'
+import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 import { ArcballControls, Box, PerspectiveCamera, Plane, useFBO } from '../../src'
 
 import type { OrthographicCamera, PerspectiveCamera as PerspectiveCameraType } from 'three'
-import type { ArcballControlsProps } from '../../src'
-
-const args = {
-  enablePan: true,
-  enableRotate: true,
-  enableZoom: true,
-}
-
-export const ArcballControlsStory = (props: ArcballControlsProps) => (
-  <>
-    <ArcballControls {...props} />
-    <Box>
-      <meshBasicMaterial wireframe />
-    </Box>
-  </>
-)
-
-ArcballControlsStory.args = args
-ArcballControlsStory.storyName = 'Default'
 
 export default {
   title: 'Controls/ArcballControls',
   component: ArcballControls,
-  decorators: [(storyFn) => <Setup controls={false}>{storyFn()}</Setup>],
+  decorators: [
+    (Story) => (
+      <Setup controls={false}>
+        <Story />
+      </Setup>
+    ),
+  ],
+  args: {
+    enablePan: true,
+    enableRotate: true,
+    enableZoom: true,
+  },
+} satisfies Meta<typeof ArcballControls>
+
+type Story = StoryObj<typeof ArcballControls>
+
+function DefaultScene(props: ComponentProps<typeof ArcballControls>) {
+  return (
+    <>
+      <ArcballControls {...props} />
+      <Box>
+        <meshBasicMaterial wireframe />
+      </Box>
+    </>
+  )
 }
 
-const CustomCamera = (props: ArcballControlsProps) => {
+export const ArcballControlsSt1 = {
+  render: (args) => <DefaultScene {...args} />,
+  name: 'Default',
+} satisfies Story
+
+const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
   /**
    * we will render our scene in a render target and use it as a map.
    */
@@ -73,7 +84,7 @@ const CustomCamera = (props: ArcballControlsProps) => {
   )
 }
 
-export const CustomCameraStory = (props: ArcballControlsProps) => <CustomCamera {...props} />
-
-CustomCameraStory.args = args
-CustomCameraStory.storyName = 'Custom Camera'
+export const ArcballControlsSt2 = {
+  render: (args) => <CustomCamera {...args} />,
+  name: 'Custom Camera',
+} satisfies Story

.storybook/stories/ArcballControls.stories.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+import { ComponentProps } from 'react'
 import * as THREE from 'three'
+import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
@@ -10,34 +12,25 @@ export default {
   title: 'Staging/BBAnchor',
   component: BBAnchor,
   decorators: [
-    (storyFn) => (
+    (Story) => (
       <Setup cameraPosition={new THREE.Vector3(2, 2, 2)} controls={false}>
-        {' '}
-        {storyFn()}
+        <Story />
       </Setup>
     ),
   ],
-  argTypes: {
-    drawBoundingBox: { control: 'boolean' },
-    anchorX: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
-    anchorY: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
-    anchorZ: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
-    children: { table: { disable: true } },
-  },
-}
+} satisfies Meta<typeof BBAnchor>
 
-type Anchor = THREE.Vector3 | [number, number, number]
+type Story = StoryObj<typeof BBAnchor>
 
 function BBAnchorScene({
-  anchor,
   drawBoundingBox,
   children,
-}: {
-  anchor: Anchor
+  ...props
+}: ComponentProps<typeof BBAnchor> & {
   drawBoundingBox: boolean
-  children?: React.ReactChild
+  children?: React.ReactNode
 }) {
-  const ref = React.useRef()
+  const ref = React.useRef(null)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 
@@ -46,16 +39,12 @@ function BBAnchorScene({
       <OrbitControls autoRotate />
       <Icosahedron ref={ref}>
         <meshBasicMaterial color="hotpink" wireframe />
-        <BBAnchor anchor={anchor}>{children}</BBAnchor>
+        <BBAnchor {...props}>{children}</BBAnchor>
       </Icosahedron>
     </>
   )
 }
 
-const Template = ({ drawBoundingBox, anchorX, anchorY, anchorZ, ...args }) => (
-  <BBAnchorScene drawBoundingBox={drawBoundingBox} anchor={[anchorX, anchorY, anchorZ]} {...args} />
-)
-
 function HtmlComp() {
   return (
     <Html
@@ -70,15 +59,17 @@ function HtmlComp() {
   )
 }
 
-export const BBAnchorWithHtml = Template.bind({})
-BBAnchorWithHtml.args = {
-  drawBoundingBox: true,
-  anchorX: 1,
-  anchorY: 1,
-  anchorZ: 1,
-  children: <HtmlComp />,
-}
-BBAnchorWithHtml.storyName = 'With Html component'
+export const BBAnchorWithHtml = {
+  render: (args) => (
+    <BBAnchorScene {...args} drawBoundingBox={true}>
+      <HtmlComp />
+    </BBAnchorScene>
+  ),
+  args: {
+    anchor: [1, 1, 1],
+  },
+  name: 'With Html component',
+} satisfies Story
 
 function MeshComp() {
   return (
@@ -88,12 +79,14 @@ function MeshComp() {
   )
 }
 
-export const BBAnchorWithMesh = Template.bind({})
-BBAnchorWithMesh.args = {
-  drawBoundingBox: true,
-  anchorX: 1,
-  anchorY: 1,
-  anchorZ: 1,
-  children: <MeshComp />,
-}
-BBAnchorWithMesh.storyName = 'With other mesh'
+export const BBAnchorWithMesh = {
+  render: (args) => (
+    <BBAnchorScene {...args} drawBoundingBox={true}>
+      <MeshComp />
+    </BBAnchorScene>
+  ),
+  args: {
+    anchor: [1, 1, 1],
+  },
+  name: 'With other mesh',
+} satisfies Story