Refactor: Convert Explainer component & test to TypeScript

frontend/src/components/Explainer/Explainer.test.jsx → frontend/src/components/Explainer/Explainer.test.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { vi } from 'vitest';
+import { vi, describe, it, expect } from 'vitest';
 
 import Explainer from './Explainer';
 
@@ -18,9 +17,6 @@ describe('Explainer Component', () => {
         render(
             <Explainer {...props} />
         );
-        expect(screen.getByTestId('explainer')).to.exist;
+        expect(screen.getByTestId('explainer')).toBeTruthy();
     })
-
-
-
-});
+});

frontend/src/components/Explainer/Explainer.jsx → frontend/src/components/Explainer/Explainer.tsx

@@ -1,12 +1,25 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Button from "../Button/Button";
 
+interface ExplainerStep {
+    number: number;
+    description: string;
+}
+
+interface ExplainerProps {
+    instruction: string;
+    button_label: string;
+    steps?: Array<ExplainerStep>;
+    timer: number | null;
+    onNext: () => void;
+}
+
 /**
  * Explainer is an block view that shows a list of steps
  * If the button has not been clicked, onNext will be called automatically after the timer expires (in milliseconds).
  * If timer == null, onNext will only be called after the button is clicked.
  */
-const Explainer = ({ instruction, button_label, steps = [], timer = null, onNext }) => {
+const Explainer = ({ instruction, button_label, steps = [], timer = null, onNext }: ExplainerProps) => {
 
     useEffect(() => {
         if (timer != null) {
@@ -42,8 +55,14 @@ const Explainer = ({ instruction, button_label, steps = [], timer = null, onNext
     );
 };
 
-// ExplainerItems renders an item in the explainer list, with optional icon or number
-const ExplainerItem = ({ number = null, description, delay = 0 }) => (
+interface ExplainerItemProps {
+    number: number | null;
+    description: string;
+    delay?: number;
+}
+
+/** ExplainerItems renders an item in the explainer list, with optional icon or number */
+const ExplainerItem = ({ number = null, description, delay = 0 }: ExplainerItemProps) => (
     <li
         className="anim anim-fade-in-slide-left anim-speed-300"
         style={{ animationDelay: delay + "ms" }}