From 79c6efefca93cb1c0cc06b8210d4bad20795b951 Mon Sep 17 00:00:00 2001
From: Niladri Adhikary <rickyrickado14@gmail.com>
Date: Thu, 14 Mar 2024 19:20:51 +0530
Subject: [PATCH 1/2] refactor: typescript integration in tutorials.js file

---
 .../src/{tutorials.js => tutorials.ts}        | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)
 rename src/simulator/src/{tutorials.js => tutorials.ts} (84%)

diff --git a/src/simulator/src/tutorials.js b/src/simulator/src/tutorials.ts
similarity index 84%
rename from src/simulator/src/tutorials.js
rename to src/simulator/src/tutorials.ts
index 3741db63..a16b13a2 100644
--- a/src/simulator/src/tutorials.js
+++ b/src/simulator/src/tutorials.ts
@@ -1,6 +1,10 @@
 import Driver from 'driver.js'
 
-export const tour = [
+interface TourStep extends Driver.Step {
+    className?: string;
+}
+
+export const tour: TourStep[] = [
     {
         element: '#guide_1',
         className: 'guide_1',
@@ -98,11 +102,16 @@ export const tour = [
 ]
 
 // Not used currently
+
+interface HighlightStep extends Driver.Step {
+    showButtons?: boolean;
+}
+
 export const tutorialWrapper = () => {
     const panelHighlight = new Driver()
-    document.querySelector('.panelHeader').addEventListener('click', (e) => {
+    document.querySelector('.panelHeader')?.addEventListener('click', (e) => {
         if (localStorage.tutorials === 'next') {
-            panelHighlight.highlight({
+            const step: HighlightStep = {
                 element: '#guide_1',
                 showButtons: false,
                 popover: {
@@ -111,17 +120,18 @@ export const tutorialWrapper = () => {
                         'Select any element by clicking on it & then click anywhere on the grid to place the element.',
                     position: 'right',
                     offset:
-                        e.target.nextElementSibling.offsetHeight +
-                        e.target.offsetTop -
+                        ((e.target as HTMLElement).nextElementSibling as HTMLElement)?.offsetHeight +
+                        (e.target as HTMLElement).offsetTop -
                         45,
                 },
-            })
+            };
+            panelHighlight.highlight(step);
             localStorage.setItem('tutorials', 'done')
         }
     }, {
         once: true,
-      })
-    document.querySelector('.icon').addEventListener('click', () => {
+    })
+    document.querySelector('.icon')?.addEventListener('click', () => {
         panelHighlight.reset(true)
     })
 }
@@ -134,10 +144,10 @@ const animatedTourDriver = new Driver({
 })
 
 export function showTourGuide() {
-    document.querySelector('.draggable-panel .maximize').click();
+    (document.querySelector('.draggable-panel .maximize') as HTMLButtonElement)?.click();
     animatedTourDriver.defineSteps(tour)
     animatedTourDriver.start()
-    localStorage.setItem('tutorials_tour_done', true)
+    localStorage.setItem('tutorials_tour_done', 'true')
 }
 
 export default showTourGuide

From 8238385c8c80e798d4629b612ccf4306a686d29f Mon Sep 17 00:00:00 2001
From: Niladri Adhikary <rickyrickado14@gmail.com>
Date: Thu, 14 Mar 2024 19:27:38 +0530
Subject: [PATCH 2/2] fix: code climate style error

---
 src/simulator/src/tutorials.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/simulator/src/tutorials.ts b/src/simulator/src/tutorials.ts
index a16b13a2..d18508f0 100644
--- a/src/simulator/src/tutorials.ts
+++ b/src/simulator/src/tutorials.ts
@@ -128,9 +128,7 @@ export const tutorialWrapper = () => {
             panelHighlight.highlight(step);
             localStorage.setItem('tutorials', 'done')
         }
-    }, {
-        once: true,
-    })
+    }, {once: true,})
     document.querySelector('.icon')?.addEventListener('click', () => {
         panelHighlight.reset(true)
     })