From ceccc449c1d00e0d605a7f7bea83cabd16217bf9 Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Mon, 7 Aug 2023 16:35:40 +0200
Subject: [PATCH] chore(react-components): add typechecking for react
 components stories

---
 .github/workflows/react-components-ci.yml     |  7 +++++++
 .../stories/HighlightNode.stories.tsx         | 19 +++++++++++--------
 .../stories/ModelsStyling.stories.tsx         |  6 ++++--
 .../stories/Reveal3DResources.stories.tsx     |  2 --
 react-components/tsconfig.json                |  2 +-
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/react-components-ci.yml b/.github/workflows/react-components-ci.yml
index fb4cbe14021..72489808580 100644
--- a/.github/workflows/react-components-ci.yml
+++ b/.github/workflows/react-components-ci.yml
@@ -56,6 +56,13 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
 
+      - name: Check types
+        working-directory: react-components
+        continue-on-error: false
+        run: yarn run tsc --noEmit
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+
       - name: Build components
         working-directory: react-components
         continue-on-error: false
diff --git a/react-components/stories/HighlightNode.stories.tsx b/react-components/stories/HighlightNode.stories.tsx
index e91f3a51d8d..1cee63c3f01 100644
--- a/react-components/stories/HighlightNode.stories.tsx
+++ b/react-components/stories/HighlightNode.stories.tsx
@@ -54,20 +54,21 @@ const StoryContent = ({
   fdmAssetMappingConfig
 }: {
   resources: AddResourceOptions[];
-  fdmAssetMappingConfig: FdmAssetMappingsConfig;
+  fdmAssetMappingConfig?: FdmAssetMappingsConfig;
 }): ReactElement => {
   const [nodeData, setNodeData] = useState<any>(undefined);
 
   const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
 
-  const callback = (nodeData: NodeDataResult | undefined): void => {
-    setNodeData(nodeData);
-    setHighlightedId(nodeData?.nodeExternalId);
+  const callback = async (nodeData: Promise<NodeDataResult | undefined>): Promise<void> => {
+    const nodeDataResult = await nodeData;
+    setNodeData(nodeDataResult);
+    setHighlightedId(nodeDataResult?.nodeExternalId);
 
-    if (nodeData === undefined) return;
+    if (nodeDataResult === undefined) return;
 
-    nodeData.intersection.model.assignStyledNodeCollection(
-      new TreeIndexNodeCollection([nodeData.cadNode.treeIndex]),
+    nodeDataResult.intersection.model.assignStyledNodeCollection(
+      new TreeIndexNodeCollection([nodeDataResult.cadNode.treeIndex]),
       DefaultNodeAppearance.Highlighted
     );
   };
@@ -88,7 +89,9 @@ const StoryContent = ({
                 ]
         }}
         fdmAssetMappingConfig={fdmAssetMappingConfig}
-        onNodeClick={callback}
+        onNodeClick={(nodeData) => {
+          void callback(nodeData);
+        }}
       />
       <RevealToolbar />
       NodeData is: {JSON.stringify(nodeData)}
diff --git a/react-components/stories/ModelsStyling.stories.tsx b/react-components/stories/ModelsStyling.stories.tsx
index 3ded0012230..56882197b3a 100644
--- a/react-components/stories/ModelsStyling.stories.tsx
+++ b/react-components/stories/ModelsStyling.stories.tsx
@@ -12,7 +12,6 @@ import {
 import { Color, Matrix4 } from 'three';
 import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { DefaultFdmConfig } from './utilities/fdmConfig';
 import { type ReactElement, useMemo } from 'react';
 import { useMappedEquipmentBy3DModelsList } from '../src/hooks/useMappedEquipmentBy3DModelsList';
@@ -91,7 +90,6 @@ export const Main: Story = {
       <RevealContainer
         sdk={sdk}
         color={new Color(0x4a4a4a)}
-        uiElements={<ReactQueryDevtools initialIsOpen={false} />}
         viewerOptions={{
           loadingIndicatorStyle: {
             opacity: 1,
@@ -122,6 +120,10 @@ const StyledReveal3DResources = (props: Reveal3DResourcesProps): ReactElement =>
     (resource): resource is AddReveal3DModelOptions => is3DModelOptions(resource)
   );
 
+  if (props.fdmAssetMappingConfig === undefined) {
+    throw new Error('fdmAssetMappingConfig is undefined');
+  }
+
   const { data } = useMappedEquipmentBy3DModelsList(props.fdmAssetMappingConfig, filtered);
 
   const styling = useMemo(() => {
diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
index 793d1246974..3584c620829 100644
--- a/react-components/stories/Reveal3DResources.stories.tsx
+++ b/react-components/stories/Reveal3DResources.stories.tsx
@@ -6,7 +6,6 @@ import { Reveal3DResources, RevealContainer } from '../src';
 import { Color, Matrix4 } from 'three';
 import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { DefaultFdmConfig } from './utilities/fdmConfig';
 
 const meta = {
@@ -116,7 +115,6 @@ export const Main: Story = {
       <RevealContainer
         sdk={sdk}
         color={new Color(0x4a4a4a)}
-        uiElements={<ReactQueryDevtools initialIsOpen={false} />}
         viewerOptions={{
           loadingIndicatorStyle: {
             opacity: 1,
diff --git a/react-components/tsconfig.json b/react-components/tsconfig.json
index 0d27756306b..74cea2fd0b1 100644
--- a/react-components/tsconfig.json
+++ b/react-components/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES6",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "jsx": "react-jsx",
     "module": "ES2020",
     "declaration": true,