BREAKING: 4.x, react 19, fiber v9 (#41)

* BREAKING: 4.x, react 19, fiber v9

* v4

* fix: node version CI

* CI github actions v3

* ...

* ...

* feat: update @react-three/fiber and @react-three/drei to non rc versions

* fix: cleanup readme example

---------

Co-authored-by: “Isaac <[email protected]>

Author: drcmda

.github/workflows/release.yml

@@ -14,12 +14,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js 16.x
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install Dependencies
         run: yarn

.storybook/common/Setup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Vector3 } from 'three'
-import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+import { Canvas, CanvasProps } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 
 type Props = React.PropsWithChildren<
@@ -21,7 +21,7 @@ export const Setup = ({
   ...restProps
 }: Props) => (
   <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
-    {children}
+    {children}    
     {lights && (
       <>
         <ambientLight intensity={0.8} />

.storybook/index.css

@@ -1,54 +1,14 @@
 html,
 body,
-#root {
-  width: 100%;
+#storybook-root {
   height: 100%;
-  margin: 0;
-  padding: 0;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: hidden;
-  background-color: #121212;
-}
-
-#root {
-  overflow: auto;
-}
-
-.html-story-block {
-  color: white;
-  width: 120px;
-  position: relative;
-  margin-left: 100px;
-}
-
-.html-story-block.margin300 {
-  margin-left: 300px;
 }
 
-.html-story-block:before {
-  content: '';
-  display: block;
-  position: absolute;
-
-  top: 50%;
-  left: -60px;
-
-  width: 60px;
-  height: 1px;
-  background-color: white;
+body,
+.sbdocs canvas {
+  background-color: #121212;
 }
 
-.html-story-label {
-  background-color: white;
-  color: black;
-  width: 100px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+.sbdocs canvas {
+  min-height: 20rem;
+}

.storybook/main.ts

@@ -1,22 +1,16 @@
-module.exports = {
-  stories: ['./stories/**/*.stories.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        docs: false,
-      },
-    },
-    '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-  ],
-  framework: '@storybook/react',
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  staticDirs: ['./public'],
+  stories: ['./stories/**/*.stories.{ts,tsx}'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-knobs'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
 }
+
+export default config

.storybook/manager.ts

@@ -2,6 +2,5 @@ import { addons } from '@storybook/addons'
 
 addons.setConfig({
   panelPosition: 'right',
-  selectedPanel: 'storybook/source-loader/panel',
   showPanel: true,
 })

.storybook/preview.ts

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

.storybook/preview.tsx

@@ -0,0 +1 @@
++

.storybook/public/_.txt

@@ -8,7 +8,7 @@ export default {
 
 export const MultipleMaterials = () => {
   return (
-    <Setup>
+    <Setup>      
       <mesh>
         <Geometry useGroups>
           <Base>
@@ -23,7 +23,7 @@ export const MultipleMaterials = () => {
             <sphereGeometry args={[1, 64, 64]} />
             <meshNormalMaterial />
           </Addition>
-        </Geometry>
+        </Geometry>                
       </mesh>
     </Setup>
   )