fix: update storybook setup

react-components/package.json

@@ -26,7 +26,7 @@
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
     "@cognite/cogs.js": "^9.17.0",
-    "@cognite/reveal": "^4.3.3",
+    "@cognite/reveal": "link:../viewer",
     "@cognite/sdk": "^8.2.0",
     "@storybook/addon-essentials": "7.0.22",
     "@storybook/addon-interactions": "7.0.22",

react-components/src/components/CogniteCadModelContainer/CogniteCadModelContainer.tsx

@@ -1,31 +1,31 @@
 import { useEffect, useRef, useState } from "react";
-import { Cognite3DViewer, CogniteCadModel } from '@cognite/reveal';
+import { AddModelOptions, Cognite3DViewer, CogniteCadModel } from '@cognite/reveal';
 import { useReveal } from "../RevealContainer/RevealContext";
 import { Matrix4 } from "three";
 
 type Cognite3dModelProps = {
-  modelId: number;
-  revisionId: number;
+  addModelOptions: AddModelOptions;
   transform?: THREE.Matrix4;
 }
 
-export default function CogniteCadModelContainer({ modelId, revisionId, transform }: Cognite3dModelProps) {
+export default function CogniteCadModelContainer({ addModelOptions, transform }: Cognite3dModelProps) {
   const modelRef = useRef<CogniteCadModel>();
   const viewer = useReveal();
+  const { modelId, revisionId } = addModelOptions;
 
   useEffect(() => {
     addModel(modelId, revisionId, transform)
       .catch(console.error);
     return () => {
       if (modelRef.current === undefined || (viewer as any).isDisposed) return;
       viewer.removeModel(modelRef.current);
+      modelRef.current = undefined;
     }
-  }, []);
+  }, [addModelOptions]);
 
   if (modelRef.current !== undefined && transform !== undefined) {
     modelRef.current.setModelTransformation(transform);
   }
-
   return <></>;
 
   async function addModel(modelId: number, revisionId: number, transform?: Matrix4) {

react-components/src/stories/CogniteCadModelContainer.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CogniteCadModelContainer, RevealContainer } from '..';
+import { CogniteClient } from '@cognite/sdk';
+import { Color, Matrix4 } from 'three';
+
+const meta = {
+  title: 'Example/CogniteCadModelContainer',
+  component: CogniteCadModelContainer,
+  tags: ['autodocs']
+} satisfies Meta<typeof CogniteCadModelContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const token = new URLSearchParams(window.location.search).get('token')!;
+const sdk = new CogniteClient({ appId: 'reveal.example', baseUrl: 'https://greenfield.cognitedata.com', project: '3d-test', getToken: () => Promise.resolve(token) });
+
+export const Main: Story = {
+  args: {
+    addModelOptions: {
+      modelId: 1791160622840317,
+      revisionId: 498427137020189
+    },
+    transform: new Matrix4().makeTranslation(0, 10, 0)
+  },
+  render: ({ addModelOptions, transform }) =>
+    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)} >
+      <CogniteCadModelContainer addModelOptions={addModelOptions} />
+      <CogniteCadModelContainer addModelOptions={addModelOptions} transform={transform} />
+    </RevealContainer>
+};