include .storybook in tsconfig

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Preview } from '@storybook/react'
 
 import './index.css'

.storybook/stories/Adaptive.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense } from 'react'
 import { Vector3, type Material, type Mesh } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/ArcballControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, useRef, useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,7 +48,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
+  const virtualCamera = useRef<PerspectiveCameraType | null>(null)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {
@@ -73,7 +74,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
 
-          <ArcballControls camera={virtualCamera.current} {...props} />
+          <ArcballControls camera={virtualCamera.current ?? undefined} {...props} />
 
           <color attach="background" args={['hotpink']} />
         </>,

.storybook/stories/BBAnchor.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ComponentProps } from 'react'
+import { ComponentProps, ElementRef } from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -30,7 +30,7 @@ function BBAnchorScene({
   drawBoundingBox: boolean
   children?: React.ReactNode
 }) {
-  const ref = React.useRef(null)
+  const ref = React.useRef<ElementRef<typeof Icosahedron>>(null!)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 

.storybook/stories/CameraControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, ElementRef, useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -47,7 +48,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<CameraControls['camera']>()
+  const virtualCamera = useRef<ElementRef<typeof PerspectiveCamera>>(null)
   const [virtualScene] = useState(() => new Scene())
   const cameraControlRef = useRef<CameraControls>(null)
 
@@ -78,7 +79,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
           </Box>
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
-          <CameraControls ref={cameraControlRef} camera={virtualCamera.current} {...props} />
+          <CameraControls ref={cameraControlRef} camera={virtualCamera.current ?? undefined} {...props} />
 
           {/* @ts-ignore */}
           <color attach="background" args={['hotpink']} />

.storybook/stories/CurveModifier.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react'
+import * as React from 'react'
+import { ComponentProps } from 'react'
 import { BufferGeometry, CatmullRomCurve3, LineBasicMaterial, LineLoop, Vector3 } from 'three'
 import { FontLoader, TextGeometry, TextGeometryParameters } from 'three-stdlib'
 import { extend, useFrame, useLoader } from '@react-three/fiber'
@@ -38,7 +39,7 @@ export default {
 type Story = StoryObj<typeof CurveModifier>
 
 function CurvedText(props: ComponentProps<typeof CurveModifier>) {
-  const curveRef = React.useRef<CurveModifierRef>()
+  const curveRef = React.useRef<CurveModifierRef>(null)
   const geomRef = React.useRef<TextGeometry>(null!)
   const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json')
 

.storybook/stories/Float.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense, useRef } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense, useRef } from 'react'
 import * as THREE from 'three'
 
 import { Meta, StoryObj } from '@storybook/react'

.storybook/stories/Image.stories.tsx

@@ -20,7 +20,7 @@ export default {
 
 type Story = StoryObj<typeof Image>
 
-function ImageScene({ url, ...props }: React.ComponentProps<typeof Image>) {
+function ImageScene({ url, texture, ...props }: React.ComponentProps<typeof Image>) {
   const texture1 = useTexture('/images/living-room-1.jpg')
   const texture2 = useTexture('/images/living-room-3.jpg')
 

.storybook/stories/MapControls.stories.tsx

@@ -38,7 +38,7 @@ function Svg() {
   const shapes = React.useMemo(
     () =>
       paths.flatMap((p) =>
-        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData.style.fillOpacity }))
+        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData?.style.fillOpacity }))
       ),
     [paths]
   )

.storybook/stories/OrbitControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/Outlines.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/ScrollControls.stories.tsx

@@ -27,7 +27,7 @@ function Suzanne(props: React.ComponentProps<'group'>) {
   useCursor(hovered)
 
   const visible = React.useRef(false)
-  const meshRef = useIntersect((isVisible) => (visible.current = isVisible))
+  const meshRef = useIntersect<THREE.Mesh>((isVisible) => (visible.current = isVisible))
 
   const { height } = useThree((state) => state.viewport)
   useFrame((_state, delta) => {

.storybook/stories/Texture.stories.tsx

@@ -51,7 +51,7 @@ function TextureScene2(props: React.ComponentProps<typeof Texture>) {
     <Texture {...props}>
       {(textures) => (
         <Icosahedron position={[0, 0, 0]}>
-          <meshStandardMaterial {...textures} metalness={1} />
+          <meshStandardMaterial {...(textures as any)} metalness={1} />
         </Icosahedron>
       )}
     </Texture>

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming'
 import dreiLogo from './drei.jpeg'
 
 export default create({

package.json

@@ -36,7 +36,8 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "yarn eslint:ci && yarn typecheck && yarn prettier && (cd test/e2e; ./e2e.sh)",
+    "lint": "yarn eslint:ci && yarn typecheck && yarn prettier",
+    "test": "yarn lint && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "storybook": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev -p 6006",

src/core/AccumulativeShadows.tsx

@@ -39,7 +39,7 @@ export type AccumulativeShadowsProps = {
   toneMapped?: boolean
 }
 
-interface AccumulativeContext {
+export interface AccumulativeShadowsContext {
   lights: Map<any, any>
   temporal: boolean
   frames: number
@@ -73,8 +73,8 @@ declare global {
   }
 }
 
-export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeContext>(
-  null as unknown as AccumulativeContext
+export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeShadowsContext>(
+  null as unknown as AccumulativeShadowsContext
 )
 
 const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
@@ -104,10 +104,10 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
    }`
 )
 
-export const AccumulativeShadows: ForwardRefComponent<
-  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-  AccumulativeContext
-> = /* @__PURE__ */ React.forwardRef(
+export const AccumulativeShadows = /* @__PURE__ */ React.forwardRef<
+  AccumulativeShadowsContext,
+  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps
+>(
   (
     {
       children,
@@ -123,8 +123,8 @@ export const AccumulativeShadows: ForwardRefComponent<
       resolution = 1024,
       toneMapped = true,
       ...props
-    }: JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-    forwardRef: React.ForwardedRef<AccumulativeContext>
+    },
+    forwardRef
   ) => {
     extend({ SoftShadowMaterial })
 
@@ -140,7 +140,7 @@ export const AccumulativeShadows: ForwardRefComponent<
       plm.configure(gPlane.current)
     }, [])
 
-    const api = React.useMemo<AccumulativeContext>(
+    const api = React.useMemo<AccumulativeShadowsContext>(
       () => ({
         lights: new Map(),
         temporal: !!temporal,

src/core/MeshDistortMaterial.tsx

@@ -11,7 +11,7 @@ type DistortMaterialType = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
   radius?: number
 }
 
-type Props = DistortMaterialType & {
+export type MeshDistortMaterialProps = DistortMaterialType & {
   speed?: number
   factor?: number
 }
@@ -28,7 +28,7 @@ interface Uniform<T> {
   value: T
 }
 
-class DistortMaterialImpl extends MeshPhysicalMaterial {
+export class MeshDistortMaterialImpl extends MeshPhysicalMaterial {
   _time: Uniform<number>
   _distort: Uniform<number>
   _radius: Uniform<number>
@@ -89,9 +89,9 @@ class DistortMaterialImpl extends MeshPhysicalMaterial {
   }
 }
 
-export const MeshDistortMaterial: ForwardRefComponent<Props, DistortMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new DistortMaterialImpl())
+export const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef<MeshDistortMaterialImpl, MeshDistortMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshDistortMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }

src/core/MeshWobbleMaterial.tsx

@@ -9,7 +9,7 @@ type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
   speed?: number
 }
 
-type Props = WobbleMaterialType & {
+export type MeshWobbleMaterialProps = WobbleMaterialType & {
   speed?: number
   factor?: number
 }
@@ -26,7 +26,7 @@ interface Uniform<T> {
   value: T
 }
 
-class WobbleMaterialImpl extends MeshStandardMaterial {
+export class MeshWobbleMaterialImpl extends MeshStandardMaterial {
   _time: Uniform<number>
   _factor: Uniform<number>
 
@@ -75,9 +75,9 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
   }
 }
 
-export const MeshWobbleMaterial: ForwardRefComponent<Props, WobbleMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new WobbleMaterialImpl())
+export const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef<MeshWobbleMaterialImpl, MeshWobbleMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshWobbleMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }

src/core/ShadowAlpha.tsx

@@ -12,7 +12,7 @@ import { useFrame } from '@react-three/fiber'
 import * as React from 'react'
 import * as THREE from 'three'
 
-interface ShadowAlphaProps {
+export interface ShadowAlphaProps {
   opacity?: number
   alphaMap?: THREE.Texture | boolean
 }

src/core/Sparkles.tsx

@@ -5,7 +5,7 @@ import { shaderMaterial } from './shaderMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 import { version } from '../helpers/constants'
 
-interface Props {
+export interface SparklesProps {
   /** Number of particles (default: 100) */
   count?: number
   /** Speed of particles (default: 1) */
@@ -101,47 +101,48 @@ function usePropAsIsOrAsAttribute<T extends any>(
   }, [prop])
 }
 
-export const Sparkles: ForwardRefComponent<Props & PointsProps, THREE.Points> = /* @__PURE__ */ React.forwardRef<
-  THREE.Points,
-  Props & PointsProps
->(({ noise = 1, count = 100, speed = 1, opacity = 1, scale = 1, size, color, children, ...props }, forwardRef) => {
-  React.useMemo(() => extend({ SparklesImplMaterial }), [])
-  const ref = React.useRef<THREE.Points>(null!)
-  const dpr = useThree((state) => state.viewport.dpr)
+export const Sparkles: ForwardRefComponent<SparklesProps & PointsProps, THREE.Points> =
+  /* @__PURE__ */ React.forwardRef<THREE.Points, SparklesProps & PointsProps>(
+    ({ noise = 1, count = 100, speed = 1, opacity = 1, scale = 1, size, color, children, ...props }, forwardRef) => {
+      React.useMemo(() => extend({ SparklesImplMaterial }), [])
+      const ref = React.useRef<THREE.Points>(null!)
+      const dpr = useThree((state) => state.viewport.dpr)
 
-  const _scale = normalizeVector(scale)
-  const positions = React.useMemo(
-    () => Float32Array.from(Array.from({ length: count }, () => _scale.map(THREE.MathUtils.randFloatSpread)).flat()),
-    [count, ..._scale]
-  )
+      const _scale = normalizeVector(scale)
+      const positions = React.useMemo(
+        () =>
+          Float32Array.from(Array.from({ length: count }, () => _scale.map(THREE.MathUtils.randFloatSpread)).flat()),
+        [count, ..._scale]
+      )
 
-  const sizes = usePropAsIsOrAsAttribute<number>(count, size, Math.random)
-  const opacities = usePropAsIsOrAsAttribute<number>(count, opacity)
-  const speeds = usePropAsIsOrAsAttribute<number>(count, speed)
-  const noises = usePropAsIsOrAsAttribute<typeof noise>(count * 3, noise)
-  const colors = usePropAsIsOrAsAttribute<THREE.ColorRepresentation>(
-    color === undefined ? count * 3 : count,
-    !isFloat32Array(color) ? new THREE.Color(color) : color,
-    () => 1
-  )
+      const sizes = usePropAsIsOrAsAttribute<number>(count, size, Math.random)
+      const opacities = usePropAsIsOrAsAttribute<number>(count, opacity)
+      const speeds = usePropAsIsOrAsAttribute<number>(count, speed)
+      const noises = usePropAsIsOrAsAttribute<typeof noise>(count * 3, noise)
+      const colors = usePropAsIsOrAsAttribute<THREE.ColorRepresentation>(
+        color === undefined ? count * 3 : count,
+        !isFloat32Array(color) ? new THREE.Color(color) : color,
+        () => 1
+      )
 
-  useFrame((state) => {
-    if (ref.current && ref.current.material) (ref.current.material as any).time = state.clock.elapsedTime
-  })
+      useFrame((state) => {
+        if (ref.current && ref.current.material) (ref.current.material as any).time = state.clock.elapsedTime
+      })
 
-  React.useImperativeHandle(forwardRef, () => ref.current, [])
+      React.useImperativeHandle(forwardRef, () => ref.current, [])
 
-  return (
-    <points key={`particle-${count}-${JSON.stringify(scale)}`} {...props} ref={ref}>
-      <bufferGeometry>
-        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-        <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
-        <bufferAttribute attach="attributes-opacity" args={[opacities, 1]} />
-        <bufferAttribute attach="attributes-speed" args={[speeds, 1]} />
-        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
-        <bufferAttribute attach="attributes-noise" args={[noises, 3]} />
-      </bufferGeometry>
-      {children ? children : <sparklesImplMaterial transparent pixelRatio={dpr} depthWrite={false} />}
-    </points>
+      return (
+        <points key={`particle-${count}-${JSON.stringify(scale)}`} {...props} ref={ref}>
+          <bufferGeometry>
+            <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+            <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
+            <bufferAttribute attach="attributes-opacity" args={[opacities, 1]} />
+            <bufferAttribute attach="attributes-speed" args={[speeds, 1]} />
+            <bufferAttribute attach="attributes-color" args={[colors, 3]} />
+            <bufferAttribute attach="attributes-noise" args={[noises, 3]} />
+          </bufferGeometry>
+          {children ? children : <sparklesImplMaterial transparent pixelRatio={dpr} depthWrite={false} />}
+        </points>
+      )
+    }
   )
-})

src/core/Wireframe.tsx

@@ -17,7 +17,7 @@ declare global {
   }
 }
 
-interface WireframeProps {
+export interface WireframeProps {
   geometry?: THREE.BufferGeometry | React.RefObject<THREE.BufferGeometry>
   simplify?: boolean
 }