chore: sb 8.4 (pmndrs#2173)

* sb 8.4

* eslint9

* fixing storybook eslint issues

.storybook/stories/Adaptive.stories.tsx

@@ -1,12 +1,11 @@
 import React, { ComponentProps, Suspense } from 'react'
-import { Vector3 } from 'three'
+import { Vector3, type Material, type Mesh } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
 import { useGLTF, AdaptiveDpr, AdaptiveEvents, OrbitControls } from '../../src'
 
-import type { Material, Mesh } from 'three'
 import type { GLTF } from 'three-stdlib'
 
 export default {

.storybook/stories/ArcballControls.stories.tsx

@@ -1,12 +1,11 @@
 import { createPortal, useFrame } from '@react-three/fiber'
 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 { Scene, type OrthographicCamera, type PerspectiveCamera as PerspectiveCameraType } from 'three'
 
 export default {
   title: 'Controls/ArcballControls',

.storybook/stories/CameraControls.stories.tsx

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

.storybook/stories/CurveModifier.stories.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ComponentProps } from 'react'
+import React, { 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'

.storybook/stories/Decal.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 import { Sampler, Decal, useTexture, useSurfaceSampler, PerspectiveCamera, OrbitControls } from '../../src'
-import { Euler, InstancedBufferAttribute, Matrix4, Mesh, Quaternion, Vector3 } from 'three'
+import { Euler, InstancedBufferAttribute, Matrix4, Quaternion, Vector3 } from 'three'
 import { ComponentProps } from 'react'
 
 function LoopOverInstancedBufferAttribute({ children, buffer }: { buffer?: InstancedBufferAttribute; children: any }) {
@@ -39,7 +39,7 @@ export default {
 
 type Story = StoryObj<typeof Sampler>
 
-function DecalScene(props: ComponentProps<typeof Sampler>) {
+function DecalScene(_props: ComponentProps<typeof Sampler>) {
   const ref = React.useRef<any>()
 
   const [reactMap, threeMap] = useTexture(['/decals/react.png', '/decals/three.png'])

.storybook/stories/Example.stories.tsx

@@ -1,11 +1,10 @@
-import * as THREE from 'three'
 import * as React from 'react'
 import { Vector3 } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
-import { Example, ExampleApi, Sparkles } from '../../src'
+import { Example, ExampleApi } from '../../src'
 
 export default {
   title: 'Misc/Example',

.storybook/stories/FaceControls.stories.tsx

@@ -1,5 +1,4 @@
 /* eslint react-hooks/exhaustive-deps: 1 */
-import * as THREE from 'three'
 import * as React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/Float.stories.tsx

@@ -1,12 +1,11 @@
-import React, { ComponentProps, forwardRef, Suspense, useRef } from 'react'
+import React, { ComponentProps, Suspense, useRef } from 'react'
 import * as THREE from 'three'
-import { useFrame } from '@react-three/fiber'
+
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
 import { Float } from '../../src'
-import { float } from 'three/examples/jsm/nodes/Nodes.js'
 
 export default {
   title: 'Staging/Float',

.storybook/stories/GizmoHelper.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Vector3 } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { GizmoHelper, OrbitControls, useGLTF, GizmoViewcube, TrackballControls, GizmoViewport } from '../../src'
+import { GizmoHelper, OrbitControls, useGLTF, GizmoViewcube, GizmoViewport } from '../../src'
 import { Setup } from '../Setup'
 import { ComponentProps } from 'react'
 

.storybook/stories/Gltf.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Mesh, Vector3 } from 'three'
+import { Vector3 } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'

.storybook/stories/Helper.stories.tsx

@@ -23,7 +23,7 @@ export default {
 
 type Story = StoryObj<typeof Helper>
 
-const HelperScene1 = (props: ComponentProps<typeof Helper>) => {
+const HelperScene1 = (_props: ComponentProps<typeof Helper>) => {
   return (
     <Sphere>
       <meshBasicMaterial />
@@ -39,7 +39,7 @@ export const HelperSt1 = {
   name: 'Default',
 } satisfies Story
 
-const HelperScene2 = (props: ComponentProps<typeof Helper>) => {
+const HelperScene2 = (_props: ComponentProps<typeof Helper>) => {
   const camera = React.useRef<THREE.PerspectiveCamera>(null)
 
   useFrame(({ clock }) => {

.storybook/stories/Image.stories.tsx

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

.storybook/stories/Instances.stories.tsx

@@ -1,18 +1,9 @@
 import * as React from 'react'
-import { Euler, MathUtils, Mesh, Quaternion, ShaderMaterial, Vector3 } from 'three'
-import { Meta, StoryObj } from '@storybook/react'
+import { Euler, MathUtils, Mesh, ShaderMaterial, Vector3 } from 'three'
+// import { StoryObj } from '@storybook/react'
 import { Setup } from '../Setup'
 
-import {
-  Html,
-  useGLTF,
-  Loader,
-  Instances,
-  Instance,
-  createInstances,
-  InstancedAttribute,
-  PositionMesh,
-} from '../../src'
+import { useGLTF, Instances, Instance, createInstances, InstancedAttribute } from '../../src'
 import { useFrame } from '@react-three/fiber'
 import { clamp } from 'maath/misc'
 
@@ -28,7 +19,7 @@ export default {
   ],
 }
 
-type Story = StoryObj
+// type Story = StoryObj
 
 // function Helmet() {
 
@@ -61,7 +52,7 @@ const [SuzaneInstances, SuzaneInstnace] = createInstances<SuzaneInstnaceProps>()
 
 const Suzanne = () => {
   const randomShift = React.useMemo(() => Math.random() * Math.PI, [])
-  const [_isPending, startTransition] = React.useTransition()
+  const [_isPending] = React.useTransition()
 
   const instancePosition = React.useMemo(
     () => [MathUtils.randFloatSpread(100), MathUtils.randFloatSpread(100), MathUtils.randFloatSpread(100)] as const,

.storybook/stories/KeyboardControls.stories.tsx

@@ -1,6 +1,6 @@
 import { useFrame } from '@react-three/fiber'
 import * as React from 'react'
-import { useMemo, useRef } from 'react'
+import { useRef } from 'react'
 import { MathUtils, Mesh, Vector3 } from 'three'
 import { Cone, KeyboardControls, useKeyboardControls } from '../../src'
 import { Setup } from '../Setup'

.storybook/stories/Loader.stories.tsx

@@ -28,7 +28,7 @@ function Helmet() {
 
 //
 
-function LoaderScene(props: React.ComponentProps<typeof Loader>) {
+function LoaderScene(_props: React.ComponentProps<typeof Loader>) {
   return (
     <React.Suspense
       fallback={

.storybook/stories/MarchingCubes.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Color, Group, Vector3 } from 'three'
+import { Color, Vector3 } from 'three'
 
 import { Setup } from '../Setup'
 

.storybook/stories/OrbitControls.stories.tsx

@@ -1,13 +1,10 @@
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ElementRef, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
-import { Box, OrbitControls, PerspectiveCamera, Plane, useFBO } from '../../src'
-
-import type { Camera } from 'three'
-import type { OrbitControlsProps } from '../../src'
+import { Box, OrbitControls, PerspectiveCamera, Plane, useFBO, type OrbitControlsProps } from '../../src'
 
 export default {
   title: 'Controls/OrbitControls',

.storybook/stories/OrthographicCamera.stories.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-import { Canvas } from '@react-three/fiber'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Icosahedron, OrthographicCamera, OrbitControls } from '../../src'
+import { Icosahedron, OrthographicCamera } from '../../src'
 import { Setup } from '../Setup'
 
 export default {

.storybook/stories/PerspectiveCamera.stories.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-import { Canvas } from '@react-three/fiber'
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Icosahedron, PerspectiveCamera, OrbitControls } from '../../src'
+import { Icosahedron, PerspectiveCamera } from '../../src'
 import { Setup } from '../Setup'
 
 export default {

.storybook/stories/PointerLockControls.stories.tsx

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

.storybook/stories/Points.stories.tsx

@@ -107,7 +107,7 @@ function PointEvent({ color, ...props }) {
       {...props}
       color={clicked ? 'hotpink' : hovered ? 'red' : color}
       onPointerOver={(e) => (e.stopPropagation(), setHover(true))}
-      onPointerOut={(e) => setHover(false)}
+      onPointerOut={() => setHover(false)}
       onClick={(e) => (e.stopPropagation(), setClick((state) => !state))}
     />
   )
@@ -156,7 +156,7 @@ export const BasicPointsInstances = {
 
 function BasicPointsInstancesSelectionScene(props: React.ComponentProps<typeof Points>) {
   const [points] = React.useState(() =>
-    Array.from({ length: 100 }, (i) => [
+    Array.from({ length: 100 }, () => [
       MathUtils.randFloatSpread(10),
       MathUtils.randFloatSpread(10),
       MathUtils.randFloatSpread(10),

.storybook/stories/Progress.stories.tsx

@@ -36,7 +36,7 @@ function CustomLoader() {
   )
 }
 
-function ProgressScene(props: React.ComponentProps<typeof Progress>) {
+function ProgressScene(_props: React.ComponentProps<typeof Progress>) {
   return (
     <React.Suspense fallback={<CustomLoader />}>
       <Shoe />

.storybook/stories/Resize.stories.tsx

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

.storybook/stories/Sky.stories.tsx

@@ -85,7 +85,7 @@ export const SkySt2 = {
 
 function SkyScene3(props: React.ComponentProps<typeof Sky>) {
   // NOT the right way to do it...
-  const [inclination, setInclination] = React.useState(0)
+  const [, setInclination] = React.useState(0)
   useFrame(() => {
     setInclination((a) => a + 0.002)
   })

.storybook/stories/SpriteAnimator.stories.tsx

@@ -2,8 +2,7 @@ import * as React from 'react'
 import { Vector3 } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 import { Setup } from '../Setup'
-import { SpriteAnimator } from '../../src'
-import { useSpriteLoader } from '../../src'
+import { SpriteAnimator, useSpriteLoader } from '../../src'
 
 const SPRITE_IMAGE = 'story.png'
 const SPRITE_DATA = 'story.json'

.storybook/stories/Trail.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
-import { Sphere, Trail, useTrail, Html, Stats, Float, PerspectiveCamera } from '../../src'
+import { Sphere, Trail, useTrail, Float, PerspectiveCamera } from '../../src'
 import { useFrame } from '@react-three/fiber'
 import { Group, InstancedMesh, Mesh, Object3D, Vector3 } from 'three'
 
@@ -129,7 +129,7 @@ function UseTrailScene() {
 }
 
 export const UseTrailSt = {
-  render: (args) => <UseTrailScene />,
+  render: () => <UseTrailScene />,
   name: 'useTrail with Instances',
 } satisfies StoryObj<React.ComponentProps<typeof UseTrailScene>>
 

.storybook/stories/Tube.stories.tsx

@@ -21,7 +21,7 @@ export default {
 
 type Story = StoryObj<typeof Tube>
 
-function TubeScene({ args, ...props }: React.ComponentProps<typeof Tube>) {
+function TubeScene(props: React.ComponentProps<typeof Tube>) {
   // curve example from https://threejs.org/docs/#api/en/geometries/TubeGeometry
   const path = React.useMemo(() => {
     class CustomSinCurve extends THREE.Curve<THREE.Vector3> {