[DYN-6868] migrate to typeScript

jest.config.js → jest.config.ts

@@ -2,17 +2,21 @@
  * For a detailed explanation regarding each configuration property, visit:
  * https://jestjs.io/docs/configuration
  */
+import type {Config} from 'jest';
 
-module.exports = {
+const config: Config = {
+  verbose: true,
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif)$': '<rootDir>/tests/__mocks__/fileMock.js',
-    '\\.(css|less)$': '<rootDir>/tests/__mocks__/styleMock.js',
-    '\\.(css|less)$': '<rootDir>/tests/__mocks__/chromeMock.js',
+    '\\.(jpg|jpeg|png|gif)$': '<rootDir>/tests/__mocks__/fileMock.ts',
+    '\\.(css|less)$': ['<rootDir>/tests/__mocks__/styleMock.ts', '<rootDir>/tests/__mocks__/chromeMock.ts'],
   },
   testEnvironment: 'jsdom',
+  preset: "ts-jest",
   collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx}'],
+  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
   coverageDirectory: '<rootDir>/coverage',
   coverageReporters: ['text', 'lcov'],
-  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],
 };
+
+export default config;

package.json

@@ -1,18 +1,18 @@
 {
   "name": "@dynamods/dynamo-home",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Dynamo Home",
   "author": "Autodesk Inc.",
-  "main": "index.js",
+  "main": "index.tsx",
   "scripts": {
     "lint:check": "eslint src/ tests/",
     "lint:fix": "eslint src/ tests/ --fix",
-    "test:unit": "NODE_ENV=test jest tests/App.test.js",
-    "test:e2e": "playwright test tests/e2e.test.js",
+    "test:unit": "NODE_ENV=test & jest tests/App.test.ts",
+    "test:e2e": "playwright test tests/e2e.test.ts",
     "test": "npm run test:unit && npm run test:e2e",
-    "start": "webpack serve --config webpack.config.js",
-    "build": "webpack --config webpack.config.js --mode=development",
-    "bundle": "webpack --config webpack.config.js --mode=production",
+    "start": "webpack serve --config webpack.config.ts",
+    "build": "webpack --config webpack.config.ts --mode=development",
+    "bundle": "webpack --config webpack.config.ts --mode=production",
     "production": "npm run bundle && cp -R package.json README.md license_output dist",
     "license:direct": "npx @adsk/adsk-npm-license-puller --path . --app-name 'dynamo-home' --verbose --about-box ./license_output/about-box_direct.html --about-box-type desktop --year $(date) --paos ./license_output/paos_direct.csv",
     "license:transitive": "npx @adsk/adsk-npm-license-puller --path . --app-name 'dynamo-home' --verbose --about-box ./license_output/about-box_transitive.html --about-box-type desktop --transitive --year $(date) --paos ./license_output/paos_transitive.csv",
@@ -38,6 +38,7 @@
     "url": "git+https://github.com/DynamoDS/DynamoHome.git"
   },
   "dependencies": {
+    "@types/node": "^20.14.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.1",
@@ -49,7 +50,11 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@playwright/test": "^1.27.1",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/react": "^15.0.6",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "eslint": "^8.57.0",
@@ -59,10 +64,14 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "style-loader": "^3.3.3",
-    "webpack": "^5.89.0",
+    "ts-jest": "^29.1.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
+    "webpack": "^5.92.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.2"
   },
   "bugs": {
     "url": "https://github.com/DynamoDS/DynamoHome/issues"

src/App.js → src/App.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
 import { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
-import { getMessagesForLocale } from './localization/localization.js';
-import { LayoutContainer } from './components/LayoutContainer.jsx';
-import { SettingsProvider } from './components/SettingsContext.jsx';
 
-function App() {
-  const [locale, setLocale] = useState('en');
+import { getMessagesForLocale } from './localization/localization';
+import { LayoutContainer } from './components/LayoutContainer';
+import { SettingsProvider } from './components/SettingsContext';
+
+const App = () => {
+  const [locale, setLocale] = useState<Locale>("en");
 
   // Function to get messages based on locale
   const messages = getMessagesForLocale(locale);
 
   useEffect(() => {
-    window.setLocale = (newLocale) => {
+    window.setLocale = (newLocale: Locale) => {
       setLocale(newLocale);
     };
 
     // Trigger the 'ApplicationLoaded()' command on the backend
-    if (chrome.webview !== undefined) {
-      chrome.webview.hostObjects.scriptObject.ApplicationLoaded();
+    if (window.chrome?.webview !== undefined) {
+      window.chrome.webview.hostObjects.scriptObject.ApplicationLoaded();
     }
   }, []);
 

src/assets/samples.js → src/assets/samples.ts

@@ -1,4 +1,4 @@
-import { img } from './home.js';
+import { img } from './home';
 
 export const samples = [
   {

src/components/Common/Arrow.jsx → src/components/Common/Arrow.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import styles from './Arrow.module.css';
 
-export const ClosedArrow = ({ isOpen, direction, color  }) => {
+export const ClosedArrow = ({ isOpen, direction, color }: Arrow) => {
     let arrowClasses = [styles.closedArrow]; // Start with an array of classes
     if (isOpen) arrowClasses.push(styles.open);
     if (direction === 'left') arrowClasses.push(styles.left);
@@ -25,7 +24,7 @@ export const ClosedArrow = ({ isOpen, direction, color  }) => {
     );
 };
 
-export const OpenArrow = ({ isOpen, direction, color }) => {
+export const OpenArrow = ({ isOpen, direction, color }: Arrow) => {
     let arrowClasses = [styles.openArrow]; // Start with an array of classes
     if (isOpen) arrowClasses.push(styles.open);
     if (direction === 'left') arrowClasses.push(styles.left);
@@ -35,16 +34,16 @@ export const OpenArrow = ({ isOpen, direction, color }) => {
     const arrowClassString = arrowClasses.join(' ');
 
     return (
-        <svg 
+        <svg
             className={arrowClassString}
-            width="24" 
-            height="24" 
+            width="24"
+            height="24"
             viewBox="0 0 24 24"
         >
-            <path 
-                d="M8 10l4 4 4-4" 
+            <path
+                d="M8 10l4 4 4-4"
                 stroke={color || "#949494"}
-                strokeWidth="2" 
+                strokeWidth="2"
                 fill="none"
             />
         </svg>

src/components/Common/CardItem.jsx → src/components/Common/CardItem.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Tooltip } from './Tooltip.jsx';
+import { Tooltip } from './Tooltip';
 import styles from './CardItems.module.css';
 
-export const CardItem = ({ imageSrc, onClick, tooltipContent, titleText, subtitleText }) => {
+export const CardItem = ({ imageSrc, onClick, tooltipContent, titleText, subtitleText }: CardItem) => {
     return (
         <div className={styles['graph-container']}>
             <a className={styles['graph-link']} onClick={onClick}>

src/components/Common/CustomIcons.jsx → src/components/Common/CustomIcons.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from '../Common/CustomIcons.module.css';
 
 export const GridViewIcon = () => (

src/components/Common/Portal.jsx → src/components/Common/Portal.tsx

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
-const Portal = ({ children }) => {
+const Portal = ({ children }: { children: ReactNode }) => {
   return ReactDOM.createPortal(
-    children, 
+    children,
     document.body
   );
 };

src/components/Common/Tooltip.jsx → src/components/Common/Tooltip.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, CSSProperties } from 'react';
 import Portal from './Portal'; // Import your Portal component
 
-export const Tooltip = ({ children, content, verticalOffset = 12 }) => {
-    const [show, setShow] = useState(false);
-    const [position, setPosition] = useState({});
+export const Tooltip = ({ children, content, verticalOffset = 12 }: Tooltip) => {
+    const [show, setShow] = useState<boolean>(false);
+    const [position, setPosition] = useState<CSSProperties>({});
     const tooltipRef = useRef(null);
     const contentRef = useRef(null); // Ref for the tooltip content
 

src/components/LayoutContainer.jsx → src/components/LayoutContainer.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import { MainContent } from './MainContent.jsx';
-import { Sidebar } from './Sidebar/Sidebar.jsx';
+import { useState } from 'react';
+import { MainContent } from './MainContent';
+import { Sidebar } from './Sidebar/Sidebar';
 import SplitPane from 'react-split-pane';
 
-export function LayoutContainer(){
+export const LayoutContainer = ({id}:{id?:string}) => {
     // State to track the selected sidebar item
     const sideBarWidth = 300;
-    const [selectedSidebarItem, setSelectedSidebarItem] = useState('Recent');
+    const [selectedSidebarItem, setSelectedSidebarItem] = useState<SidebarItem>('Recent');
 
     // Event handler for sidebar item click
-    const handleSidebarItemClick = (item) => {
+    const handleSidebarItemClick = (item: SidebarItem) => {
         setSelectedSidebarItem(item);
     }
 

src/components/Learning/Carousel.jsx → src/components/Learning/Carousel.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { OpenArrow } from '../Common/Arrow';
 import styles from './Carousel.module.css';
 
-export const Carousel = ({ children }) => {
+export const Carousel = ({ children }: {children: ReactNode}) => {
     const [currentIndex, setCurrentIndex] = useState(0);
     const itemsPerPage = 4;
     const totalItems = React.Children.count(children);

src/components/Learning/GuideGridItem.jsx → src/components/Learning/GuideGridItem.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { img } from '../../assets/home.js';
-import { startGuidedTour } from '../../functions/utility.js';
-import { CardItem } from '../Common/CardItem.jsx';
+import { img } from '../../assets/home';
+import { startGuidedTour } from '../../functions/utility';
+import { CardItem } from '../Common/CardItem';
 
-export function GuideGridItem({ id, Name, Description, Type, Thumbnail }) {
+export const GuideGridItem = ({ id, Name, Description, Type, Thumbnail }: Guide) => {
     const triggerStartGuidedTourCommand = () => {
         startGuidedTour(Type);
     };

src/components/Learning/ModalItem.jsx → src/components/Learning/ModalItem.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import styles from './ModalItem.module.css';
 
-const ModalItem = ({ isOpen, onClose, children }) => {
+const ModalItem = ({ isOpen, onClose, children }:  ModalItem) => {
     if (!isOpen) return null;
 
     return ReactDOM.createPortal(
@@ -17,7 +16,7 @@ const ModalItem = ({ isOpen, onClose, children }) => {
             </button>
             </div>
         </>,
-        document.getElementById('modal-root') // Ensure you have a div with this id in your index.html
+        document.getElementById('modal-root') as HTMLElement// Ensure you have a div with this id in your index.html
     );
 };
 

src/components/Learning/PageLearning.jsx → src/components/Learning/PageLearning.tsx

@@ -1,27 +1,25 @@
-import React from "react";
 import { useState, useEffect } from 'react';
-import { VideoCarouselItem } from './VideoCarouselItem.jsx';
-import { videos } from '../../assets/learning.js';
-import { Carousel } from "./Carousel.jsx";
-import { GuideGridItem } from "./GuideGridItem.jsx";
+import { VideoCarouselItem } from './VideoCarouselItem';
+import { Carousel } from "./Carousel";
+import { GuideGridItem } from "./GuideGridItem";
 import { FormattedMessage } from 'react-intl';
 
 export function LearningPage(){
     // Set a placeholder for the guides, and videos which will be used differently during dev and prod 
-    let initialGuides = [];
-    let initialVideos = [];
+    let initialGuides: Guide[] = [];
+    let initialVideos: VideoCarouselItem[] = [];
 
     // If we are under development, we will load the graphs from the local asset folder
     if (process.env.NODE_ENV === 'development') {
-        initialGuides = require('../../assets/learning.js').guides;
-        initialVideos = require('../../assets/learning.js').videos;
+        initialGuides = require('../../assets/learning').guides;
+        initialVideos = require('../../assets/learning').videos;
     }
 
-    const [guides, setGuides] = useState(initialGuides);    
-    const [videos, setVideos] = useState(initialVideos);    
+    const [guides, setGuides] = useState<Guide[]>(initialGuides);    
+    const [videos, setVideos] = useState<VideoCarouselItem[]>(initialVideos);    
 
     // A method exposed to the backend used to set the interactive guides data coming from Dynamo
-    const receiveInteractiveGuidesDataFromDotNet = (jsonData) => {
+    const receiveInteractiveGuidesDataFromDotNet = (jsonData: any) => {
         try {
             // jsonData is already an object, so no need to parse it
             const data = jsonData;

src/components/Learning/VideoCarouselItem.jsx → src/components/Learning/VideoCarouselItem.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ModalItem from './ModalItem'; // Import your Modal component
-import { Tooltip } from '../Common/Tooltip.jsx';
+import { Tooltip } from '../Common/Tooltip';
 import styles from './VideoCarouselItem.module.css';
 
-export function VideoCarouselItem({ id, title, videoId, description }) {
-    const [isModalOpen, setIsModalOpen] = useState(false);
+export function VideoCarouselItem({ id, title, videoId, description }: VideoCarouselItem) {
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
     const youtubeEmbedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1`; // Added autoplay query parameter
     const tooltip = <div>

src/components/MainContent.jsx → src/components/MainContent.tsx

@@ -1,27 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import { RecentPage } from './Recent/PageRecent.jsx';
-import { SamplesPage } from './Samples/PageSamples.jsx';
-import { LearningPage } from './Learning/PageLearning.jsx';
+import { useState, useEffect } from 'react';
+import { RecentPage } from './Recent/PageRecent';
+import { SamplesPage } from './Samples/PageSamples';
+import { LearningPage } from './Learning/PageLearning';
 import { FormattedMessage } from 'react-intl';
 
-export function MainContent({ selectedSidebarItem }){
-    const [isDisabled, setIsDisabled] = useState(false);
-    const [settings, setSettings] = useState(null);
+export const MainContent = ({ selectedSidebarItem }) => {
+    const [isDisabled, setIsDisabled] = useState<boolean>(false);
+    const [settings, setSettings] = useState<HomePageSetting | null>(null);
 
-    const setShowStartPageChanged = (showStartPage) => {
+    const setShowStartPageChanged = (showStartPage: boolean) => {
         setIsDisabled(!showStartPage);
     };
 
-    const setHomePageSettings = (settingsJson) => {
-        try{
+    const setHomePageSettings = (settingsJson: string) => {
+        try {
             if (settingsJson) {
                 const settingsObject = JSON.parse(settingsJson);
                 setSettings(settingsObject);
             } else {
                 console.log(`Received null or empty settings`);
             }
-        }catch(exeption){
-            console.log($`Failed to set the HomePage settings with the following error ${exception}`);
+        } catch (exception) {
+            console.log(`Failed to set the HomePage settings with the following error ${exception}`);
         }
     }
 
@@ -34,7 +34,7 @@ export function MainContent({ selectedSidebarItem }){
             delete window.setShowStartPageChanged;
             delete window.setHomePageSettings;
         };
-    }, [isDisabled, settings]); 
+    }, [isDisabled, settings]);
 
     return (
         <>
@@ -45,7 +45,7 @@ export function MainContent({ selectedSidebarItem }){
                         <div className="loading-text"><FormattedMessage id="main.page.loading.text" /></div>
                     </div>
                 )}
-                
+
                 <div className={`page-container ${selectedSidebarItem === 'Recent' ? '' : 'hidden'}`}>
                     <RecentPage setIsDisabled={setIsDisabled} recentPageViewMode={settings?.recentPageViewMode || "grid"} />
                 </div>