chore(reveal-react-components): add formatting and linting (#3422)

* chore: restructure folder layout

* asd

* asd

* feat: add RevealContainer

* fix: update transformation when updating prop

* fix: conflicts

* fix: update storybook setup

* fix: update reveal version

* chore: setup eslint linting and prettier formatting

* chore: run formatter

* chore: add prettier plugin to eslintconfig

* chore: replace deprecated prettier config param

* fix: add proper import

* fix: remove unused scripts and update tsconfig

* fix: set proper base URL for build

* fix: config and linting

* chore: use ReactElement

* chore: add copywrite header rule

* chore: remove unused patter

* fix: refactor out some functions

* chore: add eslint cache

* fix: add consistent type and eqeqeq lint rules

---------

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

react-components/.babelrc.json

@@ -13,4 +13,4 @@
     "@babel/preset-react"
   ],
   "plugins": []
-}
+}

react-components/.eslintignore

@@ -0,0 +1,5 @@
+dist/*
+node_modules/*
+.yarn/*
+.storybook/*
+yarn.lock

react-components/.eslintrc.cjs

@@ -0,0 +1,45 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'standard-with-typescript',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json']
+  },
+  plugins: ['react', 'prettier', 'header'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+    eqeqeq: ['error', 'always']
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  overrides: [
+    {
+      files: ['src/**/*.ts', 'src/**/*.tsx', 'stories/**/*.ts', 'stories/**/*.tsx'],
+      rules: {
+        'header/header': [
+          'error',
+          'block',
+          [
+            {
+              pattern: `(Copyright 20\\d{2}|istanbul ignore)`,
+              template: `!\n * Copyright ${new Date().getFullYear()} Cognite AS\n `
+            }
+          ]
+        ]
+      }
+    }
+  ]
+};

react-components/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSameLine": true
+}

react-components/.storybook/main.ts

@@ -1,17 +1,17 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
   ],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
+    name: '@storybook/react-webpack5',
+    options: {}
   },
   docs: {
-    autodocs: "tag",
-  },
+    autodocs: 'tag'
+  }
 };
 export default config;

react-components/.storybook/preview.ts

@@ -1,15 +1,15 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
+        date: /Date$/
+      }
+    }
+  }
 };
 
 export default preview;

react-components/package.json

@@ -13,7 +13,8 @@
     "build:watch": "yarn run build --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "lint": "eslint . --cache"
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9",
@@ -39,7 +40,18 @@
     "@types/react": "18.2.7",
     "@types/styled-components": "5.1.26",
     "@types/three": "0.152.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-with-typescript": "latest",
+    "eslint-plugin-header": "^3.1.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "latest",
     "moq.ts": "^10.0.6",
+    "prettier": "^2.8.8",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

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

@@ -1,33 +1,27 @@
-import { useEffect, useRef } from "react";
-import { AddModelOptions, CogniteCadModel } from "@cognite/reveal";
-import { useReveal } from "../RevealContainer/RevealContext";
-import { Matrix4 } from "three";
+/*!
+ * Copyright 2023 Cognite AS
+ */
+import { type ReactElement, useEffect, useRef } from 'react';
+import { type AddModelOptions, type CogniteCadModel } from '@cognite/reveal';
+import { useReveal } from '../RevealContainer/RevealContext';
+import { type Matrix4 } from 'three';
 
 type Cognite3dModelProps = {
   addModelOptions: AddModelOptions;
-  transform?: THREE.Matrix4;
+  transform?: Matrix4;
 };
 
 export default function CogniteCadModelContainer({
   addModelOptions,
-  transform,
-}: Cognite3dModelProps) {
+  transform
+}: Cognite3dModelProps): ReactElement {
   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.models.includes(modelRef.current)
-      ) {
-        return;
-      }
-      viewer.removeModel(modelRef.current);
-      modelRef.current = undefined;
-    };
+    return removeModel;
   }, [addModelOptions]);
 
   useEffect(() => {
@@ -37,15 +31,17 @@ export default function CogniteCadModelContainer({
 
   return <></>;
 
-  async function addModel(
-    modelId: number,
-    revisionId: number,
-    transform?: Matrix4
-  ) {
+  async function addModel(modelId: number, revisionId: number, transform?: Matrix4): Promise<void> {
     const cadModel = await viewer.addCadModel({ modelId, revisionId });
     if (transform !== undefined) {
       cadModel.setModelTransformation(transform);
     }
     modelRef.current = cadModel;
   }
+
+  function removeModel(): void {
+    if (modelRef.current === undefined || !viewer.models.includes(modelRef.current)) return;
+    viewer.removeModel(modelRef.current);
+    modelRef.current = undefined;
+  }
 }

react-components/src/components/Image360HistoricalDetails/Image360HistoricalDetails.tsx

@@ -2,53 +2,55 @@
  * Copyright 2023 Cognite AS
  */
 
-import { Cognite3DViewer, Image360 } from '@cognite/reveal';
-import React, { useEffect, useRef, useState } from 'react';
+import { type Cognite3DViewer, type Image360 } from '@cognite/reveal';
+import { type ReactElement, useEffect, useRef, useState } from 'react';
 import { Image360HistoricalPanel } from './Panel/Image360HistoricalPanel';
 import { Image360HistoricalSummary } from './Toolbar/Image360HistoricalSummary';
 import { formatDate } from './utils/FormatDate';
 import styled from 'styled-components';
 import uniqueId from 'lodash/uniqueId';
 
-export interface Image360HistoricalDetailsProps {
+export type Image360HistoricalDetailsProps = {
   viewer: Cognite3DViewer;
   image360Entity?: Image360;
   onExpand?: (isExpanded: boolean) => void;
-}
+};
 
 export const Image360HistoricalDetails = ({
   viewer,
   image360Entity,
   onExpand
-}: Image360HistoricalDetailsProps) => {
+}: Image360HistoricalDetailsProps): ReactElement => {
   const [revisionDetailsExpanded, setRevisionDetailsExpanded] = useState<boolean>(false);
   const [activeRevision, setActiveRevision] = useState<number>(0);
   const [revisionCollection, setRevisionCollection] = useState<
-    {
+    Array<{
       date?: string;
       imageUrl?: string;
       index: number;
       image360Entity: Image360 | undefined;
-    }[]
+    }>
   >([]);
-  const [imageUrls, setImageUrls] = useState<(string | undefined)[]>([]);
+  const [imageUrls, setImageUrls] = useState<Array<string | undefined>>([]);
   const [minWidth, setMinWidth] = useState('100px');
   const newScrollPosition = useRef(0);
 
   useEffect(() => {
-    const fetchRevisionCollection = async () => {
-      if (image360Entity) {
+    const fetchRevisionCollection = async (): Promise<void> => {
+      if (image360Entity !== undefined) {
         const revisions = image360Entity.getRevisions();
         const revisionDates = revisions.map((revision) => revision.date);
-        const imageDatas = await Promise.all(revisions.map(async (revision) => await revision.getPreviewThumbnailUrl()));
+        const imageDatas = await Promise.all(
+          revisions.map(async (revision) => await revision.getPreviewThumbnailUrl())
+        );
         setImageUrls(imageDatas);
 
         const collection = revisionDates.map((date, index) => {
           return {
-            date: formatDate(date!),
-            imageUrl: imageDatas[index]!,
-            index: index,
-            image360Entity: image360Entity
+            date: formatDate(date),
+            imageUrl: imageDatas[index],
+            index,
+            image360Entity
           };
         });
 
@@ -58,12 +60,12 @@ export const Image360HistoricalDetails = ({
       }
     };
 
-    fetchRevisionCollection();
+    void fetchRevisionCollection();
 
     return () => {
       // Remove image URLs
       imageUrls.forEach((url) => {
-        if (url) {
+        if (url !== undefined) {
           URL.revokeObjectURL(url);
         }
       });
@@ -74,14 +76,14 @@ export const Image360HistoricalDetails = ({
   useEffect(() => {
     const newMinWidth = revisionDetailsExpanded ? '100%' : '100px';
     setMinWidth(newMinWidth);
-    if (onExpand) {
+    if (onExpand !== undefined) {
       onExpand(revisionDetailsExpanded);
     }
   }, [revisionDetailsExpanded]);
 
   return (
     <DetailsContainer style={{ minWidth }}>
-      {viewer && (
+      {
         <>
           <Image360HistoricalPanel
             key={uniqueId()}
@@ -102,7 +104,7 @@ export const Image360HistoricalDetails = ({
             />
           )}
         </>
-      )}
+      }
     </DetailsContainer>
   );
 };