fix(scene composer): implemented react-hooks linter & converted useSt…

…ore to accessStore
awslabs · May 8, 2024 · d95f684 · d95f684
1 parent dbc396b
commit d95f684
Show file tree

Hide file tree

Showing 203 changed files with 11,406 additions and 10,523 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scene-composer/.eslintrc.js b/packages/scene-composer/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
-  extends: ['iot-app-kit'],
-  plugins: ['formatjs'],
+  extends: ['iot-app-kit', 'plugin:react-hooks/recommended'],
+  plugins: ['formatjs', 'react-hooks'],
   rules: {
     'import/order': [
       'error',

diff --git a/packages/scene-composer/jest.config.ts b/packages/scene-composer/jest.config.ts
@@ -30,6 +30,25 @@ export default merge.recursive(tsPreset, awsuiPreset, {
   transform: {
     '^.+\\.(js|jsx)$': 'babel-jest',
     '\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        //the content you'd placed at "global"
+        isolatedModules: true,
+        astTransformers: {
+          before: [
+            {
+              path: '@formatjs/ts-transformer/ts-jest-integration',
+              options: {
+                // options
+                overrideIdFn: '[sha512:contenthash:base64:6]',
+                ast: true,
+              },
+            },
+          ],
+        },
+      },
+    ],
   },
   transformIgnorePatterns: ['<rootDir>/build', '<rootDir>/coverage', '<rootDir>/dist'],
   testPathIgnorePatterns: ['node_modules', 'dist', 'storybook-static'],
@@ -41,21 +60,4 @@ export default merge.recursive(tsPreset, awsuiPreset, {
     '\\.(css|less|scss)$': 'identity-obj-proxy',
   },
   testEnvironment: 'jsdom',
-  globals: {
-    'ts-jest': {
-      isolatedModules: true,
-      astTransformers: {
-        before: [
-          {
-            path: '@formatjs/ts-transformer/ts-jest-integration',
-            options: {
-              // options
-              overrideIdFn: '[sha512:contenthash:base64:6]',
-              ast: true,
-            },
-          },
-        ],
-      },
-    },
-  },
 });
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -46,7 +46,7 @@
     "convert-svg": "npx @svgr/cli --out-dir src/assets/auto-gen/icons/ --typescript --index-template tools/index-template.js -- src/assets/icons/",
     "release": "run-s compile copy-assets",
     "copy-assets": "copyfiles -e \"**/*.tsx\" -e \"**/*.ts\" -e \"**/*.snap\" -e \"**/*.js\" -e \"**/*.jsx\" -e \"**/*.json\" \"src/**/*\" dist/",
-    "lint": "eslint . --max-warnings=485",
+    "lint": "eslint . --max-warnings=712",
     "fix": "eslint --fix .",
     "test": "jest --config jest.config.ts --coverage --silent",
     "test:reliability": "npm run test:ui:reliability",
@@ -122,8 +122,9 @@
     "copyfiles": "^2.4.1",
     "eslint-config-iot-app-kit": "10.2.0",
     "husky": "8.0.3",
-    "jest": "^27.0.6",
+    "jest": "^29.7.0",
     "jest-coverage-ratchet": "^0.2.3",
+    "jest-environment-jsdom": "29.7.0",
     "jest-simple-dot-reporter": "^1.0.5",
     "jest-styled-components": "^7.0.0",
     "lodash": "^4.17.21",
@@ -140,7 +141,7 @@
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
     "svglint": "^2.4.0",
-    "ts-jest": "^27.0.4",
+    "ts-jest": "^29.1.1",
     "ts-patch": "^2.1.0",
     "ts-transform-react-intl": "^0.4.1",
     "webpack": "^5.88.2"

diff --git a/packages/scene-composer/src/__snapshots__/SceneViewer.spec.tsx.snap b/packages/scene-composer/src/__snapshots__/SceneViewer.spec.tsx.snap
@@ -1,25 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SceneViewer should render correctly 1`] = `
-.c0 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.c0 canvas {
-  outline: none;
-  -webkit-tap-highlight-color: rgba(255,255,255,0);
-}
-
 <div
-  className="c0 sceneViewer"
+  className="sc-cWSHoV icqfWN sceneViewer"
   data-testid="webgl-root"
 >
   <div
-    config="{\\"mode\\":\\"Viewing\\",\\"featureConfig\\":{\\"Matterport\\":true,\\"SceneAppearance\\":true,\\"DynamicScene\\":true}}"
+    config="{"mode":"Viewing","featureConfig":{"Matterport":true,"SceneAppearance":true,"DynamicScene":true}}"
     data-mocked="SceneComposerInternal"
     onSceneLoaded={[Function]}
     sceneComposerId="123"

diff --git a/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx b/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx
@@ -26,7 +26,7 @@ import {
   SelectedAnchor,
 } from '../../../../interfaces';
 import { IIconLookup } from '../../../../models/SceneModels';
-import { IAnchorComponentInternal, ISceneNodeInternal, useStore, useViewOptionState } from '../../../../store';
+import { IAnchorComponentInternal, ISceneNodeInternal, accessStore, useViewOptionState } from '../../../../store';
 import { applyDataBindingTemplate } from '../../../../utils/dataBindingTemplateUtils';
 import { findComponentByType } from '../../../../utils/nodeUtils';
 import { getSceneResourceInfo } from '../../../../utils/sceneResourceUtils';
@@ -64,8 +64,8 @@ export function AsyncLoadedAnchorWidget({
     setHighlightedSceneNodeRef,
     getSceneNodeByRef,
     dataBindingTemplate,
-  } = useStore(sceneComposerId)((state) => state);
-  const isViewing = useStore(sceneComposerId)((state) => state.isViewing());
+  } = accessStore(sceneComposerId)((state) => state);
+  const isViewing = accessStore(sceneComposerId)((state) => state.isViewing());
   const tagSettings: ITagSettings = useTagSettings();
   const autoRescale = useMemo(() => {
     return tagSettings.autoRescale;
@@ -78,8 +78,8 @@ export function AsyncLoadedAnchorWidget({
 
   const tagVisible = useViewOptionState(sceneComposerId).componentVisibilities[KnownComponentType.Tag];
 
-  const onWidgetClick = useStore(sceneComposerId)((state) => state.getEditorConfig().onWidgetClick);
-  const getObject3DFromSceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
+  const onWidgetClick = accessStore(sceneComposerId)((state) => state.getEditorConfig().onWidgetClick);
+  const getObject3DFromSceneNodeRef = accessStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
 
   const isSelected = useMemo(() => highlightedSceneNodeRef === node.ref, [highlightedSceneNodeRef, node.ref]);
 

diff --git a/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx b/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx
@@ -11,7 +11,7 @@ import {
   KnownComponentType,
 } from '../../../../..';
 import useTagSettings from '../../../../../hooks/useTagSettings';
-import { ISceneNodeInternal, useStore } from '../../../../../store/Store';
+import { ISceneNodeInternal, accessStore } from '../../../../../store/Store';
 import { AnchorWidget, AsyncLoadedAnchorWidget } from '../AnchorWidget';
 
 jest.mock('../../common/SvgIconToWidgetSprite', () =>
@@ -60,13 +60,14 @@ describe('AnchorWidget', () => {
   };
 
   const getSceneRuleMapByIdMock = jest.fn();
+  const states = accessStore('default').getState().noHistoryStates;
   const setStore = (
     selectedSceneNodeRef: string,
     highlightedSceneNodeRef: string,
     isViewing = true,
     tagVisible = true,
   ) => {
-    useStore('default').setState({
+    accessStore('default').setState({
       getSceneRuleMapById: getSceneRuleMapByIdMock,
       selectedSceneNodeRef,
       setSelectedSceneNodeRef,
@@ -77,7 +78,7 @@ describe('AnchorWidget', () => {
       dataInput: { dataFrames: [], timeRange: { from: 0, to: 1 } },
       getObject3DBySceneNodeRef,
       noHistoryStates: {
-        ...useStore('default').getState().noHistoryStates,
+        ...states,
         componentVisibilities: { [KnownComponentType.Tag]: tagVisible },
       },
     });
@@ -249,7 +250,7 @@ describe('AnchorWidget onWidgetClick', () => {
     isViewing = true,
     tagVisible = true,
   ) => {
-    useStore('default').setState({
+    accessStore('default').setState({
       selectedSceneNodeRef,
       setSelectedSceneNodeRef,
       highlightedSceneNodeRef,
@@ -259,7 +260,7 @@ describe('AnchorWidget onWidgetClick', () => {
       dataInput: { dataFrames: [], timeRange: { from: 0, to: 1 } },
       getObject3DBySceneNodeRef,
       noHistoryStates: {
-        ...useStore('default').getState().noHistoryStates,
+        ...accessStore('default').getState().noHistoryStates,
         componentVisibilities: { [KnownComponentType.Tag]: tagVisible },
       },
     });

diff --git a/...ntations/components/three-fiber/anchor/__tests__/__snapshots__/AnchorWidget.spec.tsx.snap b/...ntations/components/three-fiber/anchor/__tests__/__snapshots__/AnchorWidget.spec.tsx.snap
@@ -27,14 +27,14 @@ exports[`AnchorWidget should render correctly 1`] = `
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,
@@ -92,14 +92,14 @@ exports[`AnchorWidget should render correctly when not visible 1`] = `
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,
@@ -157,14 +157,14 @@ exports[`AnchorWidget should render correctly with an offset 1`] = `
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           1,
           0,
           1,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,
@@ -222,14 +222,14 @@ exports[`AnchorWidget should render correctly with data binding custom rule 1`]
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,
@@ -287,14 +287,14 @@ exports[`AnchorWidget should render correctly with data binding rule 1`] = `
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,
@@ -352,14 +352,14 @@ exports[`AnchorWidget should render correctly with non default tag settings 1`]
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.15000000000000002,
           0.15000000000000002,
           3,
@@ -417,14 +417,14 @@ exports[`AnchorWidget should render with a countered size when parent is scaled
       isSelected={true}
       onClick={[Function]}
       position={
-        Array [
+        [
           0,
           0,
           0,
         ]
       }
       scale={
-        Array [
+        [
           0.5,
           0.5,
           1,

diff --git a/packages/scene-composer/src/components/SceneComposerInternal.spec.tsx b/packages/scene-composer/src/components/SceneComposerInternal.spec.tsx
@@ -8,7 +8,7 @@ import { TwinMakerSceneMetadataModule } from '@iot-app-kit/source-iottwinmaker';
 
 import { useSceneComposerApi, SceneComposerApi } from '..';
 import { testScenes } from '../../tests/testData';
-import { useStore } from '../store';
+import { accessStore } from '../store';
 
 import { SceneComposerInternal } from './SceneComposerInternal';
 
@@ -105,7 +105,7 @@ describe('SceneComposerInternal', () => {
 
       //mocking after the scene loads so this doesn't get overwritten
       act(() => {
-        useStore(sceneComposerId).setState({
+        accessStore(sceneComposerId).setState({
           getObject3DBySceneNodeRef: () => object3D,
         });
       });

diff --git a/packages/scene-composer/src/components/SceneComposerInternal.tsx b/packages/scene-composer/src/components/SceneComposerInternal.tsx
@@ -11,7 +11,7 @@ import { GlobalStyles } from '../GlobalStyles';
 import useAwsLightDarkModes from '../hooks/useAwsLightDarkModes';
 import { KnownComponentType, StyleTarget } from '../interfaces';
 import { materialReducer, initialMaterialMaps, addMaterial, removeMaterial, backUpOriginalMaterial } from '../reducers';
-import { useStore } from '../store';
+import { accessStore } from '../store';
 import { IDataBoundSceneComponentInternal, ISceneComponentInternal } from '../store/internalInterfaces';
 import { darkTheme, lightTheme } from '../theme';
 import { containsMatchingEntityComponent } from '../utils/dataBindingUtils';
@@ -72,13 +72,13 @@ export const SceneComposerInternal: React.FC<SceneComposerInternalProps> = ({
 };
 
 export function useSceneComposerApi(sceneComposerId: string) {
-  const document = useStore(sceneComposerId)((state) => state.document);
-  const findSceneNodeRefBy = useStore(sceneComposerId)((state) => state.findSceneNodeRefBy);
-  const setCameraTarget = useStore(sceneComposerId)((state) => state.setCameraTarget);
-  const getSceneNodeByRef = useStore(sceneComposerId)((state) => state.getSceneNodeByRef);
-  const selectedSceneNodeRef = useStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
-  const setSelectedSceneNodeRef = useStore(sceneComposerId)((state) => state.setSelectedSceneNodeRef);
-  const getObject3DBySceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
+  const document = accessStore(sceneComposerId)((state) => state.document);
+  const findSceneNodeRefBy = accessStore(sceneComposerId)((state) => state.findSceneNodeRefBy);
+  const setCameraTarget = accessStore(sceneComposerId)((state) => state.setCameraTarget);
+  const getSceneNodeByRef = accessStore(sceneComposerId)((state) => state.getSceneNodeByRef);
+  const selectedSceneNodeRef = accessStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
+  const setSelectedSceneNodeRef = accessStore(sceneComposerId)((state) => state.setSelectedSceneNodeRef);
+  const getObject3DBySceneNodeRef = accessStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
   const [materialMaps, dispatch] = useReducer(materialReducer, initialMaterialMaps);
 
   const findBindingComponent = (components: ISceneComponentInternal[], dataBindingContext: unknown) => {