chore(react-components): add typechecking for react components stories

cognitedata · Aug 7, 2023 · ceccc44 · ceccc44
1 parent a03296a
commit ceccc44
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,7 +3,7 @@
     "target": "ES6",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "jsx": "react-jsx",
     "module": "ES2020",
     "declaration": true,