From da5b5180615e757484b79d295ce74fde3144c6c4 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Mon, 18 Nov 2024 11:51:21 +0100 Subject: [PATCH] include .storybook in tsconfig --- .storybook/preview.tsx | 1 - .storybook/stories/Adaptive.stories.tsx | 3 +- .../stories/ArcballControls.stories.tsx | 7 +- .storybook/stories/BBAnchor.stories.tsx | 4 +- .storybook/stories/CameraControls.stories.tsx | 7 +- .storybook/stories/CurveModifier.stories.tsx | 5 +- .storybook/stories/Float.stories.tsx | 3 +- .storybook/stories/Image.stories.tsx | 2 +- .storybook/stories/MapControls.stories.tsx | 2 +- .storybook/stories/OrbitControls.stories.tsx | 3 +- .storybook/stories/Outlines.stories.tsx | 2 +- .storybook/stories/ScrollControls.stories.tsx | 2 +- .storybook/stories/Texture.stories.tsx | 2 +- .storybook/theme.ts | 2 +- package.json | 3 +- src/core/AccumulativeShadows.tsx | 20 ++--- src/core/MeshDistortMaterial.tsx | 10 +-- src/core/MeshWobbleMaterial.tsx | 10 +-- src/core/ShadowAlpha.tsx | 2 +- src/core/Sparkles.tsx | 79 ++++++++++--------- src/core/Wireframe.tsx | 2 +- src/web/Loader.tsx | 6 +- tsconfig.json | 2 +- 23 files changed, 93 insertions(+), 86 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f6d7591ab..581ff8e7f 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,4 +1,3 @@ -import React from 'react' import type { Preview } from '@storybook/react' import './index.css' diff --git a/.storybook/stories/Adaptive.stories.tsx b/.storybook/stories/Adaptive.stories.tsx index 3b12db54f..dd1825878 100644 --- a/.storybook/stories/Adaptive.stories.tsx +++ b/.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' diff --git a/.storybook/stories/ArcballControls.stories.tsx b/.storybook/stories/ArcballControls.stories.tsx index 10b61c250..f7ea16410 100644 --- a/.storybook/stories/ArcballControls.stories.tsx +++ b/.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) => { * we will render our scene in a render target and use it as a map. */ const fbo = useFBO(400, 400) - const virtualCamera = useRef() + const virtualCamera = useRef(null) const [virtualScene] = useState(() => new Scene()) useFrame(({ gl }) => { @@ -73,7 +74,7 @@ const CustomCamera = ({ ...props }: ComponentProps) => { - + , diff --git a/.storybook/stories/BBAnchor.stories.tsx b/.storybook/stories/BBAnchor.stories.tsx index c2ceb5e01..6b4a95366 100644 --- a/.storybook/stories/BBAnchor.stories.tsx +++ b/.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>(null!) useHelper(drawBoundingBox && ref, BoxHelper, 'cyan') diff --git a/.storybook/stories/CameraControls.stories.tsx b/.storybook/stories/CameraControls.stories.tsx index c093e8c78..dcc4ef057 100644 --- a/.storybook/stories/CameraControls.stories.tsx +++ b/.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) => { * we will render our scene in a render target and use it as a map. */ const fbo = useFBO(400, 400) - const virtualCamera = useRef() + const virtualCamera = useRef>(null) const [virtualScene] = useState(() => new Scene()) const cameraControlRef = useRef(null) @@ -78,7 +79,7 @@ const CameraControlsScene2 = (props: ComponentProps) => { - + {/* @ts-ignore */} diff --git a/.storybook/stories/CurveModifier.stories.tsx b/.storybook/stories/CurveModifier.stories.tsx index 78bc8ec4b..333c06c32 100644 --- a/.storybook/stories/CurveModifier.stories.tsx +++ b/.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 function CurvedText(props: ComponentProps) { - const curveRef = React.useRef() + const curveRef = React.useRef(null) const geomRef = React.useRef(null!) const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json') diff --git a/.storybook/stories/Float.stories.tsx b/.storybook/stories/Float.stories.tsx index 0e5c54f77..b94eeec25 100644 --- a/.storybook/stories/Float.stories.tsx +++ b/.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' diff --git a/.storybook/stories/Image.stories.tsx b/.storybook/stories/Image.stories.tsx index 4704e3cc7..c92b6de9f 100644 --- a/.storybook/stories/Image.stories.tsx +++ b/.storybook/stories/Image.stories.tsx @@ -20,7 +20,7 @@ export default { type Story = StoryObj -function ImageScene({ url, ...props }: React.ComponentProps) { +function ImageScene({ url, texture, ...props }: React.ComponentProps) { const texture1 = useTexture('/images/living-room-1.jpg') const texture2 = useTexture('/images/living-room-3.jpg') diff --git a/.storybook/stories/MapControls.stories.tsx b/.storybook/stories/MapControls.stories.tsx index 88ff5153b..6f067c9cf 100644 --- a/.storybook/stories/MapControls.stories.tsx +++ b/.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] ) diff --git a/.storybook/stories/OrbitControls.stories.tsx b/.storybook/stories/OrbitControls.stories.tsx index 32158e07f..ac49fdb8c 100644 --- a/.storybook/stories/OrbitControls.stories.tsx +++ b/.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' diff --git a/.storybook/stories/Outlines.stories.tsx b/.storybook/stories/Outlines.stories.tsx index 9d8ae9414..39fb005b6 100644 --- a/.storybook/stories/Outlines.stories.tsx +++ b/.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' diff --git a/.storybook/stories/ScrollControls.stories.tsx b/.storybook/stories/ScrollControls.stories.tsx index 7ac869869..5caccbcf2 100644 --- a/.storybook/stories/ScrollControls.stories.tsx +++ b/.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((isVisible) => (visible.current = isVisible)) const { height } = useThree((state) => state.viewport) useFrame((_state, delta) => { diff --git a/.storybook/stories/Texture.stories.tsx b/.storybook/stories/Texture.stories.tsx index 62f6c4225..e06492bdd 100644 --- a/.storybook/stories/Texture.stories.tsx +++ b/.storybook/stories/Texture.stories.tsx @@ -51,7 +51,7 @@ function TextureScene2(props: React.ComponentProps) { {(textures) => ( - + )} diff --git a/.storybook/theme.ts b/.storybook/theme.ts index b382e3c5c..5f5277f5f 100644 --- a/.storybook/theme.ts +++ b/.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({ diff --git a/package.json b/package.json index b82cdf7d8..51cbe9aa1 100644 --- a/package.json +++ b/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", diff --git a/src/core/AccumulativeShadows.tsx b/src/core/AccumulativeShadows.tsx index 5d7786d37..f7c8ef15c 100644 --- a/src/core/AccumulativeShadows.tsx +++ b/src/core/AccumulativeShadows.tsx @@ -39,7 +39,7 @@ export type AccumulativeShadowsProps = { toneMapped?: boolean } -interface AccumulativeContext { +export interface AccumulativeShadowsContext { lights: Map temporal: boolean frames: number @@ -73,8 +73,8 @@ declare global { } } -export const accumulativeContext = /* @__PURE__ */ React.createContext( - null as unknown as AccumulativeContext +export const accumulativeContext = /* @__PURE__ */ React.createContext( + 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 + }, + forwardRef ) => { extend({ SoftShadowMaterial }) @@ -140,7 +140,7 @@ export const AccumulativeShadows: ForwardRefComponent< plm.configure(gPlane.current) }, []) - const api = React.useMemo( + const api = React.useMemo( () => ({ lights: new Map(), temporal: !!temporal, diff --git a/src/core/MeshDistortMaterial.tsx b/src/core/MeshDistortMaterial.tsx index 950b6508e..916afd739 100644 --- a/src/core/MeshDistortMaterial.tsx +++ b/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 { value: T } -class DistortMaterialImpl extends MeshPhysicalMaterial { +export class MeshDistortMaterialImpl extends MeshPhysicalMaterial { _time: Uniform _distort: Uniform _radius: Uniform @@ -89,9 +89,9 @@ class DistortMaterialImpl extends MeshPhysicalMaterial { } } -export const MeshDistortMaterial: ForwardRefComponent = /* @__PURE__ */ React.forwardRef( - ({ speed = 1, ...props }: Props, ref) => { - const [material] = React.useState(() => new DistortMaterialImpl()) +export const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef( + ({ speed = 1, ...props }, ref) => { + const [material] = React.useState(() => new MeshDistortMaterialImpl()) useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed)) return } diff --git a/src/core/MeshWobbleMaterial.tsx b/src/core/MeshWobbleMaterial.tsx index 09e17fde3..7c9f70704 100644 --- a/src/core/MeshWobbleMaterial.tsx +++ b/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 { value: T } -class WobbleMaterialImpl extends MeshStandardMaterial { +export class MeshWobbleMaterialImpl extends MeshStandardMaterial { _time: Uniform _factor: Uniform @@ -75,9 +75,9 @@ class WobbleMaterialImpl extends MeshStandardMaterial { } } -export const MeshWobbleMaterial: ForwardRefComponent = /* @__PURE__ */ React.forwardRef( - ({ speed = 1, ...props }: Props, ref) => { - const [material] = React.useState(() => new WobbleMaterialImpl()) +export const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef( + ({ speed = 1, ...props }, ref) => { + const [material] = React.useState(() => new MeshWobbleMaterialImpl()) useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed)) return } diff --git a/src/core/ShadowAlpha.tsx b/src/core/ShadowAlpha.tsx index 1c8365d8d..409c57fd8 100644 --- a/src/core/ShadowAlpha.tsx +++ b/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 } diff --git a/src/core/Sparkles.tsx b/src/core/Sparkles.tsx index 301d5fc8d..27039bae3 100644 --- a/src/core/Sparkles.tsx +++ b/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( }, [prop]) } -export const Sparkles: ForwardRefComponent = /* @__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(null!) - const dpr = useThree((state) => state.viewport.dpr) +export const Sparkles: ForwardRefComponent = + /* @__PURE__ */ React.forwardRef( + ({ noise = 1, count = 100, speed = 1, opacity = 1, scale = 1, size, color, children, ...props }, forwardRef) => { + React.useMemo(() => extend({ SparklesImplMaterial }), []) + const ref = React.useRef(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(count, size, Math.random) - const opacities = usePropAsIsOrAsAttribute(count, opacity) - const speeds = usePropAsIsOrAsAttribute(count, speed) - const noises = usePropAsIsOrAsAttribute(count * 3, noise) - const colors = usePropAsIsOrAsAttribute( - color === undefined ? count * 3 : count, - !isFloat32Array(color) ? new THREE.Color(color) : color, - () => 1 - ) + const sizes = usePropAsIsOrAsAttribute(count, size, Math.random) + const opacities = usePropAsIsOrAsAttribute(count, opacity) + const speeds = usePropAsIsOrAsAttribute(count, speed) + const noises = usePropAsIsOrAsAttribute(count * 3, noise) + const colors = usePropAsIsOrAsAttribute( + 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 ( - - - - - - - - - - {children ? children : } - + return ( + + + + + + + + + + {children ? children : } + + ) + } ) -}) diff --git a/src/core/Wireframe.tsx b/src/core/Wireframe.tsx index 30e011064..ecbcd08a4 100644 --- a/src/core/Wireframe.tsx +++ b/src/core/Wireframe.tsx @@ -17,7 +17,7 @@ declare global { } } -interface WireframeProps { +export interface WireframeProps { geometry?: THREE.BufferGeometry | React.RefObject simplify?: boolean } diff --git a/src/web/Loader.tsx b/src/web/Loader.tsx index 9f4bd158b..49fc72ca4 100644 --- a/src/web/Loader.tsx +++ b/src/web/Loader.tsx @@ -2,14 +2,14 @@ import * as React from 'react' import { useProgress } from '../core/Progress' import { CSSProperties } from 'react' -interface LoaderOptions { +export type LoaderProps = Partial<{ containerStyles: CSSProperties innerStyles: CSSProperties barStyles: CSSProperties dataStyles: CSSProperties dataInterpolation: (p: number) => string initialState: (active: boolean) => boolean -} +}> const defaultDataInterpolation = (p: number) => `Loading ${p.toFixed(2)}%` @@ -20,7 +20,7 @@ export function Loader({ dataStyles, dataInterpolation = defaultDataInterpolation, initialState = (active: boolean) => active, -}: Partial) { +}: LoaderProps) { const { active, progress } = useProgress() const progressRef = React.useRef(0) const rafRef = React.useRef(0) diff --git a/tsconfig.json b/tsconfig.json index dd968d842..f23f1b357 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,6 @@ "noImplicitAny": false, "noImplicitThis": false }, - "include": ["./src"], + "include": ["src/**/*", ".storybook/**/*"], "exclude": ["./node_modules/**/*"] }