[Feature] move stories to TS (#223) (#231)

* feat: setup TS for stories

* fix: eslint was ignore .storybook

* feat: add TS to storybook

* refactor: move stories to TS (WIP)

* refactor: move more stories to TS (WIP)

* refactor: src changes for TS move over

I think these were TS problems that were missed.

* fix: ContactShadows story

* refactor: move more stories to TS

* refactor: add MapControls.tsx after raising issues in three

Two errors linked to three.js:
mrdoob/three.js#21058
mrdoob/three.js#21059

* fix: TS errors for passing refs & children

* refactor: add more stories (WIP)

* fix: useContextBridge TS to accept array of children

fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729

* refactor: convert more stories to TS

also useGLTF does not need to declare it's type

* chore: update storybook

* fix: revert useTexture

accidentally committed a WIP change

* refactor: move stories to TS (WIP)

* refactor: revert useGLTF story

* Minor type fixes

* chore: update react-three-fiber to latest

Required for Types

* refactor: move stories to TS

* fix: shaderMaterial on init returns void, not null

* refactor: remove unnecessary type in useFBX

* refactor: type Environment stronger

there was issues with useAsset not understanding it's types....

* Fixes CSB CI (#230)

Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com>

Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com>

.eslintignore

@@ -1,2 +1,3 @@
 # ignore base64 files because of Maximum call stack size exceeded error
 src/assets/**/*.base64.ts
+!.storybook

.eslintrc.json

@@ -65,7 +65,7 @@
     {
       "files": ["src"],
       "parserOptions": {
-        "project": "./tsconfig.json"
+        "project": ["./tsconfig.json", "./storybook/tsconfig.json"]
       }
     }
   ]

.storybook/Setup.tsx

@@ -4,9 +4,15 @@ import { Canvas } from 'react-three-fiber'
 
 import { OrbitControls } from '../src/OrbitControls'
 
-export function Setup({ children, cameraPosition = new THREE.Vector3(-5, 5, 5), controls = true }) {
+export function Setup({ children, cameraPosition = new THREE.Vector3(-5, 5, 5), controls = true, ...restProps }) {
   return (
-    <Canvas colorManagement shadowMap camera={{ position: cameraPosition }} pixelRatio={window.devicePixelRatio}>
+    <Canvas
+      colorManagement
+      shadowMap
+      camera={{ position: cameraPosition }}
+      pixelRatio={window.devicePixelRatio}
+      {...restProps}
+    >
       {children}
       <ambientLight intensity={0.8} />
       <pointLight intensity={1} position={[0, 6, 0]} />

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path')
 
 module.exports = {
-  stories: ['./stories/**/*.stories.js'],
+  stories: ['./stories/**/*.stories.{js,ts,tsx}'],
   addons: ['@storybook/addon-knobs/register', '@storybook/addon-actions', '@storybook/addon-storysource'],
   webpackFinal: (config) => {
     config.module.rules.push({

.storybook/stories/Billboard.stories.js → .storybook/stories/Billboard.stories.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
+import { Vector3 } from 'three'
+
 import { Setup } from '../Setup'
 
-import { Billboard } from '../../src/Billboard'
-import { OrbitControls } from '../../src/OrbitControls'
+import { Billboard, OrbitControls } from '../../src'
 
 export default {
   title: 'Abstractions/Billboard',
   component: Billboard,
   decorators: [
     (storyFn) => (
-      <Setup controls={false} cameraPosition={[0, 0, 10]}>
+      <Setup controls={false} cameraPosition={new Vector3(0, 0, 10)}>
         {storyFn()}
       </Setup>
     ),

.storybook/stories/Cloud.stories.js → .storybook/stories/Cloud.stories.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
 import { withKnobs } from '@storybook/addon-knobs'
+import { Vector3 } from 'three'
+
 import { Setup } from '../Setup'
 
-import { Cloud } from '../../src/Cloud'
-import { OrbitControls } from '../../src/OrbitControls'
+import { Cloud, OrbitControls } from '../../src'
 
 export default {
   title: 'Abstractions/Cloud',
   component: Cloud,
   decorators: [
     (storyFn) => (
-      <Setup controls={false} cameraPosition={[0, 0, 10]}>
+      <Setup controls={false} cameraPosition={new Vector3(0, 0, 10)}>
         {storyFn()}
       </Setup>
     ),

.storybook/stories/ContactShadows.stories.js → .storybook/stories/ContactShadows.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
+import { Mesh } from 'three'
 
 import { Setup } from '../Setup'
 
-import { ContactShadows } from '../../src/ContactShadows'
-import { Icosahedron, Plane } from '../../src/shapes'
+import { ContactShadows, Icosahedron, Plane } from '../../src'
 
 export default {
   title: 'Shaders/ContactShadows',
@@ -13,7 +13,7 @@ export default {
 }
 
 function ContactShadowScene() {
-  const mesh = React.useRef()
+  const mesh = React.useRef<Mesh>(null!)
   useFrame(({ clock }) => {
     mesh.current.position.y = Math.sin(clock.getElapsedTime()) + 2.5
   })
@@ -24,7 +24,7 @@ function ContactShadowScene() {
         <meshBasicMaterial attach="material" color="lightblue" />
       </Icosahedron>
 
-      <ContactShadows width={10} height={10} far={20} rotation={[-Math.PI / 2, 0, 0]} />
+      <ContactShadows width={10} height={10} far={20} rotation={[Math.PI / 2, 0, 0]} />
 
       <Plane args={[10, 10]} position={[0, -0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <meshBasicMaterial attach="material" color="white" />

.storybook/stories/CurveModifier.stories.js → .storybook/stories/CurveModifier.stories.tsx

@@ -4,7 +4,7 @@ import { useFrame, useLoader } from 'react-three-fiber'
 
 import { Setup } from '../Setup'
 
-import { CurveModifier } from '../../src/CurveModifier'
+import { CurveModifier, CurveModifierRef } from '../../src'
 
 export default {
   title: 'Modifiers/CurveModifier',
@@ -13,17 +13,19 @@ export default {
 }
 
 function CurveModifierScene() {
-  const curveRef = React.useRef()
-  const geomRef = React.useRef()
+  const curveRef = React.useRef<CurveModifierRef>()
+  const geomRef = React.useRef<THREE.TextGeometry>(null!)
   const font = useLoader(THREE.FontLoader, '/fonts/helvetiker_regular.typeface.json')
 
-  const handlePos = React.useMemo(() =>
-    [
-      { x: 10, y: 0, z: -10 },
-      { x: 10, y: 0, z: 10 },
-      { x: -10, y: 0, z: 10 },
-      { x: -10, y: 0, z: -10 },
-    ].map((hand) => new THREE.Vector3(...Object.values(hand)))
+  const handlePos = React.useMemo(
+    () =>
+      [
+        { x: 10, y: 0, z: -10 },
+        { x: 10, y: 0, z: 10 },
+        { x: -10, y: 0, z: 10 },
+        { x: -10, y: 0, z: -10 },
+      ].map((hand) => new THREE.Vector3(...Object.values(hand))),
+    []
   )
 
   const curve = React.useMemo(() => new THREE.CatmullRomCurve3(handlePos, true, 'centripetal'), [handlePos])

.storybook/stories/Detailed.stories.js → .storybook/stories/Detailed.stories.tsx

@@ -1,18 +1,16 @@
 import * as React from 'react'
+import { Vector3 } from 'three'
 
 import { Setup } from '../Setup'
 
-import { Detailed } from '../../src/Detailed'
-import { Icosahedron } from '../../src/shapes'
-import { OrbitControls } from '../../src/OrbitControls'
+import { Detailed, Icosahedron, OrbitControls } from '../../src'
 
 export default {
   title: 'Abstractions/Detailed',
   component: Detailed,
   decorators: [
     (storyFn) => (
-      <Setup controls={false} cameraPosition={[0, 0, 100]}>
-        {' '}
+      <Setup controls={false} cameraPosition={new Vector3(0, 0, 100)}>
         {storyFn()}
       </Setup>
     ),

.storybook/stories/DeviceOrientationControls.stories.js → .storybook/stories/DeviceOrientationControls.stories.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
+
 import { Setup } from '../Setup'
-import { DeviceOrientationControls } from '../../src/DeviceOrientationControls'
-import { Box } from '../../src/shapes'
+
+import { DeviceOrientationControls, Box } from '../../src'
 
 export function DeviceOrientationControlsStory() {
   return (

.storybook/stories/Environment.stories.js → .storybook/stories/Environment.stories.tsx

@@ -1,41 +1,37 @@
 import * as React from 'react'
+import { Vector3 } from 'three'
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
+
 import { Setup } from '../Setup'
 
-import { Environment } from '../../src/Environment'
-import { OrbitControls } from '../../src/OrbitControls'
+import { Environment, OrbitControls } from '../../src'
+
 import { presetsObj } from '../../src/helpers/environment-assets'
 
 export default {
   title: 'Abstractions/Environment',
   component: Environment,
   decorators: [
     (storyFn) => (
-      <Setup cameraPosition={[0, 0, 10]} controls={false}>
+      <Setup cameraPosition={new Vector3(0, 0, 10)} controls={false}>
         {storyFn()}
       </Setup>
     ),
     withKnobs,
   ],
 }
 
-function TorusKnot() {
-  return (
-    <mesh>
-      <torusKnotBufferGeometry args={[1, 0.5, 128, 32]} />
-      <meshStandardMaterial metalness={1} roughness={0} specular={1} />
-    </mesh>
-  )
-}
-
 function EnvironmentStory() {
   const presets = Object.keys(presetsObj)
   const preset = select('Preset', presets, presets[0])
   return (
     <>
       <React.Suspense fallback={null}>
         <Environment preset={preset} background={boolean('Background', true)} />
-        <TorusKnot />
+        <mesh>
+          <torusKnotBufferGeometry args={[1, 0.5, 128, 32]} />
+          <meshStandardMaterial metalness={1} roughness={0} />
+        </mesh>
       </React.Suspense>
       <OrbitControls autoRotate />
     </>

.storybook/stories/FlyControls.stories.js → .storybook/stories/FlyControls.stories.tsx

@@ -3,8 +3,7 @@ import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'
 
-import { FlyControls } from '../../src/FlyControls'
-import { Box } from '../../src/shapes'
+import { Box, FlyControls } from '../../src'
 
 export function FlyControlsStory() {
   return (

.storybook/stories/HTML.stories.js → .storybook/stories/HTML.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
+import * as THREE from 'three'
 
 import { Setup } from '../Setup'
-
-import { Icosahedron } from '../../src/shapes'
-import { Html } from '../../src/Html'
 import { useTurntable } from '../useTurntable'
 
+import { Icosahedron, Html } from '../../src'
+
 export default {
   title: 'Misc/Html',
   component: Html,
-  decorators: [(storyFn) => <Setup cameraPosition={[-20, 20, -20]}> {storyFn()}</Setup>],
+  decorators: [(storyFn) => <Setup cameraPosition={new THREE.Vector3(-20, 20, -20)}> {storyFn()}</Setup>],
 }
 
 function HTMLScene() {

.storybook/stories/Line.stories.js → .storybook/stories/Line.stories.tsx

@@ -1,26 +1,34 @@
 import * as React from 'react'
-import { GeometryUtils } from 'three/examples/jsm/utils/GeometryUtils'
 import { Vector3 } from 'three'
-
+import { GeometryUtils } from 'three/examples/jsm/utils/GeometryUtils'
 import { withKnobs, number, color, boolean } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'
 
-import { Line } from '../../src/Line'
-import { OrbitControls } from '../../src/OrbitControls'
+import { Line, OrbitControls } from '../../src'
 
 export default {
   title: 'Abstractions/Line',
   component: Line,
 }
 
-const points = GeometryUtils.hilbert3D(new Vector3(0), 5).map((p) => [p.x, p.y, p.z])
-const colors = new Array(points.length).fill().map(() => [Math.random(), Math.random(), Math.random()])
+const points = GeometryUtils.hilbert3D(new Vector3(0), 5).map((p) => [p.x, p.y, p.z]) as [number, number, number][]
+
+const colors = new Array(points.length).fill(0).map(() => [Math.random(), Math.random(), Math.random()]) as [
+  number,
+  number,
+  number
+][]
 
 export function BasicLine() {
   return (
     <>
-      <Line points={points} color={color('color', 'red')} lineWidth={number('lineWidth', 3)} dashed={boolean('dashed', false)} />
+      <Line
+        points={points}
+        color={color('color', 'red')}
+        lineWidth={number('lineWidth', 3)}
+        dashed={boolean('dashed', false)}
+      />
       <OrbitControls zoomSpeed={0.5} />
     </>
   )
@@ -30,7 +38,7 @@ BasicLine.storyName = 'Basic'
 BasicLine.decorators = [
   withKnobs,
   (storyFn) => (
-    <Setup controls={false} cameraPosition={[0, 0, 17]}>
+    <Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
       {storyFn()}
     </Setup>
   ),
@@ -39,7 +47,13 @@ BasicLine.decorators = [
 export function VertexColorsLine() {
   return (
     <>
-      <Line points={points} color={color('color', 'white')} vertexColors={colors} lineWidth={number('lineWidth', 3)} dashed={boolean('dashed', false)} />
+      <Line
+        points={points}
+        color={color('color', 'white')}
+        vertexColors={colors}
+        lineWidth={number('lineWidth', 3)}
+        dashed={boolean('dashed', false)}
+      />
       <OrbitControls zoomSpeed={0.5} />
     </>
   )
@@ -49,7 +63,7 @@ VertexColorsLine.storyName = 'VertexColors'
 VertexColorsLine.decorators = [
   withKnobs,
   (storyFn) => (
-    <Setup controls={false} cameraPosition={[0, 0, 17]}>
+    <Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
       {storyFn()}
     </Setup>
   ),