fix: multiple stories because of Storybook bug (#1269)

.storybook/preview.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import './index.css'
+
+export const parameters = {
+  layout: 'fullscreen',
+}
+
+export const decorators = [
+  (Story) => (
+    <React.Suspense fallback={null}>
+      <Story />
+    </React.Suspense>
+  ),
+]

.storybook/stories/Billboard.stories.tsx

@@ -49,7 +49,7 @@ BillboardStory.args = {
 BillboardStory.storyName = 'Planes'
 
 export const BillboardTextStory = ({ follow, lockX, lockY, lockZ }) => (
-  <React.Suspense fallback={null}>
+  <>
     <Billboard follow={follow} lockX={lockX} lockY={lockY} lockZ={lockZ} position={[0.5, 2.05, 0.5]}>
       <Text fontSize={1} outlineWidth={'5%'} outlineColor="#000000" outlineOpacity={1}>
         box
@@ -76,7 +76,7 @@ export const BillboardTextStory = ({ follow, lockX, lockY, lockZ }) => (
     </Billboard>
 
     <OrbitControls enablePan={true} zoomSpeed={0.5} />
-  </React.Suspense>
+  </>
 )
 
 BillboardTextStory.args = {

.storybook/stories/CameraShake.stories.tsx

@@ -80,10 +80,8 @@ function Scene() {
 
 export const CameraShakeStory = ({ ...args }) => (
   <>
-    <React.Suspense fallback={null}>
-      <CameraShake {...args} />
-      <Scene />
-    </React.Suspense>
+    <CameraShake {...args} />
+    <Scene />
   </>
 )
 
@@ -95,11 +93,9 @@ export const CameraShakeWithOrbitControlsStory = ({ ...args }) => {
   const controlsRef = React.useRef<OrbitControlsImpl>(null)
   return (
     <>
-      <React.Suspense fallback={null}>
-        <OrbitControls ref={controlsRef} />
-        <CameraShake {...args} controls={controlsRef} />
-        <Scene />
-      </React.Suspense>
+      <OrbitControls ref={controlsRef} />
+      <CameraShake {...args} controls={controlsRef} />
+      <Scene />
     </>
   )
 }

.storybook/stories/Environment.stories.tsx

@@ -21,13 +21,11 @@ export default {
 
 export const EnvironmentStory = ({ background, preset, blur }) => (
   <>
-    <React.Suspense fallback={null}>
-      <Environment preset={preset} background={background} blur={blur} />
-      <mesh>
-        <torusKnotGeometry args={[1, 0.5, 128, 32]} />
-        <meshStandardMaterial metalness={1} roughness={0} />
-      </mesh>
-    </React.Suspense>
+    <Environment preset={preset} background={background} blur={blur} />
+    <mesh>
+      <torusKnotGeometry args={[1, 0.5, 128, 32]} />
+      <meshStandardMaterial metalness={1} roughness={0} />
+    </mesh>
     <OrbitControls autoRotate />
   </>
 )
@@ -54,17 +52,15 @@ EnvironmentStory.storyName = 'Default'
 
 export const EnvironmentFilesStory = ({ background }) => (
   <>
-    <React.Suspense fallback={null}>
-      <Environment
-        background={background}
-        path={`cube/`}
-        files={[`px.png`, `nx.png`, `py.png`, `ny.png`, `pz.png`, `nz.png`]}
-      />
-      <mesh>
-        <torusKnotGeometry args={[1, 0.5, 128, 32]} />
-        <meshStandardMaterial metalness={1} roughness={0} />
-      </mesh>
-    </React.Suspense>
+    <Environment
+      background={background}
+      path={`cube/`}
+      files={[`px.png`, `nx.png`, `py.png`, `ny.png`, `pz.png`, `nz.png`]}
+    />
+    <mesh>
+      <torusKnotGeometry args={[1, 0.5, 128, 32]} />
+      <meshStandardMaterial metalness={1} roughness={0} />
+    </mesh>
     <OrbitControls autoRotate />
   </>
 )
@@ -77,14 +73,12 @@ EnvironmentFilesStory.storyName = 'Files'
 
 export const EnvironmentGroundStory = ({ preset, height, radius }) => (
   <>
-    <React.Suspense fallback={null}>
-      <Environment ground={{ height, radius }} preset={preset} />
-      <mesh position={[0, 5, 0]}>
-        <boxGeometry args={[10, 10, 10]} />
-        <meshStandardMaterial metalness={1} roughness={0} />
-      </mesh>
-      <ContactShadows resolution={1024} position={[0, 0, 0]} scale={100} blur={2} opacity={1} far={10} />
-    </React.Suspense>
+    <Environment ground={{ height, radius }} preset={preset} />
+    <mesh position={[0, 5, 0]}>
+      <boxGeometry args={[10, 10, 10]} />
+      <meshStandardMaterial metalness={1} roughness={0} />
+    </mesh>
+    <ContactShadows resolution={1024} position={[0, 0, 0]} scale={100} blur={2} opacity={1} far={10} />
     <OrbitControls autoRotate />
     <PerspectiveCamera position={[40, 40, 40]} makeDefault />
   </>

.storybook/stories/GizmoHelper.stories.tsx

@@ -136,11 +136,7 @@ const GizmoHelperStoryImpl = ({
   )
 }
 
-export const GizmoHelperStory = (props) => (
-  <React.Suspense fallback={null}>
-    <GizmoHelperStoryImpl {...props} />
-  </React.Suspense>
-)
+export const GizmoHelperStory = (props) => <GizmoHelperStoryImpl {...props} />
 
 GizmoHelperStory.args = args
 GizmoHelperStory.argTypes = argTypes

.storybook/stories/Image.stories.tsx

@@ -31,10 +31,10 @@ function TextureWrapper({ ...args }) {
 
 export const ImageStory = ({ url, ...args }) => {
   return (
-    <React.Suspense fallback={null}>
+    <>
       <TextureWrapper {...args} />
       <Image url={url?.[0] || '/images/living-room-2.jpg'} scale={[6, 4, 1]} position={[0, 0, 0]} {...args} />
-    </React.Suspense>
+    </>
   )
 }
 

.storybook/stories/Svg.stories.tsx

@@ -85,7 +85,7 @@ export const SvgSt: FC<SvgStoryProps> = ({ svg, fillWireframe, strokesWireframe,
     updateArgs({ src: `${url}/${svg || svgRecord.Tiger}` })
   }, [svg])
   return (
-    <Suspense fallback={null}>
+    <>
       <Svg
         {...props}
         position={[-70, 70, 0]}
@@ -94,6 +94,6 @@ export const SvgSt: FC<SvgStoryProps> = ({ svg, fillWireframe, strokesWireframe,
         strokeMaterial={{ wireframe: strokesWireframe }}
       />
       <gridHelper args={[160, 10]} rotation={[MathUtils.DEG2RAD * 90, 0, 0]} />
-    </Suspense>
+    </>
   )
 }