Ported core packages and examples to Typecript

facebookresearch · Dec 2, 2024 · 3aa9709 · 3aa9709
1 parent caf8021
commit 3aa9709
Show file tree

Hide file tree

Showing 169 changed files with 10,826 additions and 23,217 deletions.
diff --git a/examples/form_composer_demo/webapp/package-lock.json b/examples/form_composer_demo/webapp/package-lock.json
diff --git a/examples/form_composer_demo/webapp/package.json b/examples/form_composer_demo/webapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form_composer_demo",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "main": "webpack.config.js",
   "scripts": {
@@ -16,13 +16,18 @@
   "keywords": [],
   "author": "",
   "dependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/webpack-env": "^1.18.5",
     "bootstrap": "^4.6.2",
     "bootstrap-select": "^1.13.18",
     "jquery": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-overlay": "^6.0.11",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",

diff --git a/..._composer_demo/webapp/src/app_dynamic.jsx → ..._composer_demo/webapp/src/app_dynamic.tsx b/..._composer_demo/webapp/src/app_dynamic.jsx → ..._composer_demo/webapp/src/app_dynamic.tsx
@@ -4,13 +4,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
-import ReactDOM from "react-dom";
+import { ErrorBoundary, useMephistoTask } from "mephisto-core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
-} from "./components/core_components_dynamic.jsx";
-import { useMephistoTask, ErrorBoundary } from "mephisto-core";
+} from "./components/core_components_dynamic";
 
 /* ================= Application Components ================= */
 
@@ -20,6 +20,11 @@ function MainApp() {
     initialTaskData,
     handleSubmit,
     handleFatalError,
+  }: {
+    isLoading: boolean;
+    initialTaskData: ConfigTaskType;
+    handleSubmit: Function;
+    handleFatalError: Function;
   } = useMephistoTask();
 
   if (isLoading || !initialTaskData) {

diff --git a/...ation/webapp/src/app_remote_procedure.jsx → ...bapp/src/app_dynamic_remote_procedure.tsx b/...ation/webapp/src/app_remote_procedure.jsx → ...bapp/src/app_dynamic_remote_procedure.tsx
@@ -4,13 +4,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
-import ReactDOM from "react-dom";
+import { ErrorBoundary, useMephistoRemoteProcedureTask } from "mephisto-core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
-} from "./components/core_components_remote_procedure.jsx";
-import { useMephistoRemoteProcedureTask, ErrorBoundary } from "mephisto-core";
+} from "./components/core_components_dynamic_remote_procedure";
 
 /* ================= Application Components ================= */
 
@@ -21,14 +21,19 @@ function MainApp() {
     remoteProcedure,
     handleSubmit,
     handleFatalError,
-    setTaskSubmitData,
+  }: {
+    isLoading: boolean;
+    initialTaskData: ConfigTaskType;
+    remoteProcedure: RemoteProcedureCollectionType;
+    handleSubmit: Function;
+    handleFatalError: Function;
   } = useMephistoRemoteProcedureTask();
 
   if (isLoading || !initialTaskData) {
     return <LoadingScreen />;
   }
 
-  let _initialTaskData = initialTaskData;
+  let _initialTaskData: ConfigTaskType = initialTaskData;
   if (initialTaskData.hasOwnProperty("task_data")) {
     _initialTaskData = initialTaskData.task_data;
   }
@@ -41,7 +46,6 @@ function MainApp() {
           onSubmit={handleSubmit}
           onError={handleFatalError}
           remoteProcedure={remoteProcedure}
-          setTaskSubmitData={setTaskSubmitData}
         />
       </ErrorBoundary>
     </div>

diff --git a/...m_composer_demo/webapp/src/app_simple.jsx → ...m_composer_demo/webapp/src/app_simple.tsx b/...m_composer_demo/webapp/src/app_simple.jsx → ...m_composer_demo/webapp/src/app_simple.tsx
@@ -4,34 +4,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { WorkerOpinion } from "mephisto-addons";
-import { ErrorBoundary, useMephistoTask } from "mephisto-core";
-import React, { useEffect, useState } from "react";
-import ReactDOM from "react-dom";
+import { WelcomePage, WorkerOpinion } from "mephisto-addons";
+import {
+  ErrorBoundary,
+  isWorkerOpinionEnabled,
+  useMephistoTask,
+} from "mephisto-core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
   OnboardingComponent,
-} from "./components/core_components_simple.jsx";
-
-let WITH_WORKER_OPINION = false;
-try {
-  WITH_WORKER_OPINION = process.env.REACT_APP__WITH_WORKER_OPINION === "true";
-} catch {}
+} from "./components/core_components_simple";
 
-const STORAGE_USERNAME_KEY = "username";
+let WITH_WORKER_OPINION: boolean = isWorkerOpinionEnabled();
 
 /* ================= Application Components ================= */
 
+type HomePagePropsType = {
+  isLoading?: boolean;
+  initialTaskData: ConfigTaskType;
+  handleSubmit: Function;
+  handleFatalError: Function;
+  isOnboarding: boolean;
+  resonseSubmitted: boolean;
+  setResonseSubmitted: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 function HomePage({
   handleFatalError,
   handleSubmit,
   initialTaskData,
   isOnboarding,
   resonseSubmitted,
   setResonseSubmitted,
-}) {
+}: HomePagePropsType) {
   // In case of visiting home page but without any GET-parameters
   if (!initialTaskData?.form) {
     return (
@@ -51,7 +60,7 @@ function HomePage({
       <FormComposerBaseFrontend
         taskData={initialTaskData}
         isOnboarding={isOnboarding}
-        onSubmit={(data) => {
+        onSubmit={(data: FormComposerResultsType) => {
           setResonseSubmitted(true);
           handleSubmit(data);
         }}
@@ -70,82 +79,30 @@ function HomePage({
   );
 }
 
-function WelcomePage() {
-  const storagedUsername = localStorage.getItem(STORAGE_USERNAME_KEY);
-
-  const [username, setUsername] = React.useState(storagedUsername || "");
-
-  function generateRandomString(len, chars) {
-    chars =
-      chars || "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    let randomString = "";
-    for (let i = 0; i < len; i++) {
-      let randomPoz = Math.floor(Math.random() * chars.length);
-      randomString += chars.substring(randomPoz, randomPoz + 1);
-    }
-    return randomString;
-  }
-
-  function openTaskPage(e) {
-    e.preventDefault();
-
-    if (username === "") {
-      alert("Username cannot be empty");
-    } else {
-      localStorage.setItem(STORAGE_USERNAME_KEY, username);
-      window.location.replace(
-        `/?worker_id=${username}&id=${generateRandomString(10)}`
-      );
-    }
-  }
-
-  return (
-    <>
-      <div className="card container mt-xl-5" style={{ width: "600px" }}>
-        <div className="card-body">
-          <h5 className="card-title text-center mb-xl-4">
-            Welcome to Mephisto
-          </h5>
-
-          <form onSubmit={(e) => openTaskPage(e)}>
-            <p className="card-text mb-xl-3">
-              Please provide your username to start your task
-            </p>
-
-            <div className="form-group">
-              <input
-                className="form-control"
-                id="id_username"
-                placeholder={"Username"}
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-            </div>
-
-            <button className={"btn btn-primary"} type={"submit"}>
-              Start task
-            </button>
-          </form>
-        </div>
-      </div>
-    </>
-  );
-}
-
 function MainApp() {
   const {
-    blockedExplanation,
-    blockedReason,
+    isLoading,
+    initialTaskData,
     handleFatalError,
     handleSubmit,
-    initialTaskData,
-    isLoading,
     isOnboarding,
+    blockedExplanation,
+    blockedReason,
+  }: {
+    isLoading: boolean;
+    initialTaskData: ConfigTaskType;
+    handleSubmit: Function;
+    handleFatalError: Function;
+    isOnboarding: boolean;
+    blockedExplanation: string;
+    blockedReason: string;
   } = useMephistoTask();
 
-  const [resonseSubmitted, setResonseSubmitted] = useState(false);
+  const [resonseSubmitted, setResonseSubmitted] = React.useState<boolean>(
+    false
+  );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (resonseSubmitted) {
       // Scroll to the bollom of the page to reveal Worker Opinion block
       window.scrollTo(0, document.body.scrollHeight);

diff --git a/...bapp/src/app_dynamic_remote_procedure.jsx → ...ebapp/src/app_simple_remote_procedure.tsx b/...bapp/src/app_dynamic_remote_procedure.jsx → ...ebapp/src/app_simple_remote_procedure.tsx
@@ -4,13 +4,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
-import ReactDOM from "react-dom";
+import { ErrorBoundary, useMephistoRemoteProcedureTask } from "mephisto-core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
-} from "./components/core_components_dynamic_remote_procedure.jsx";
-import { useMephistoRemoteProcedureTask, ErrorBoundary } from "mephisto-core";
+} from "./components/core_components_simple_remote_procedure";
 
 /* ================= Application Components ================= */
 
@@ -21,13 +21,19 @@ function MainApp() {
     remoteProcedure,
     handleSubmit,
     handleFatalError,
+  }: {
+    isLoading: boolean;
+    initialTaskData: ConfigTaskType;
+    remoteProcedure: RemoteProcedureCollectionType;
+    handleSubmit: Function;
+    handleFatalError: Function;
   } = useMephistoRemoteProcedureTask();
 
   if (isLoading || !initialTaskData) {
     return <LoadingScreen />;
   }
 
-  let _initialTaskData = initialTaskData;
+  let _initialTaskData: ConfigTaskType = initialTaskData;
   if (initialTaskData.hasOwnProperty("task_data")) {
     _initialTaskData = initialTaskData.task_data;
   }

diff --git a/...rc/components/core_components_dynamic.jsx → ...rc/components/core_components_dynamic.tsx b/...rc/components/core_components_dynamic.jsx → ...rc/components/core_components_dynamic.tsx
@@ -4,33 +4,44 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
+import * as React from "react";
 import { FormComposer } from "mephisto-addons";
 
 // Required import for custom validators
 import * as customValidators from "custom-validators";
 // Required import for custom triggers
 import * as customTriggers from "custom-triggers";
 
-function LoadingScreen() {
-  return <Directions>Loading...</Directions>;
-}
+type DirectionsPropsType = {
+  children: React.ReactNode;
+};
 
-function Directions({ children }) {
+function Directions({ children }: DirectionsPropsType) {
   return (
     <div className="card mb-4">
       <div className="card-body container">{children}</div>
     </div>
   );
 }
 
+function LoadingScreen() {
+  return <Directions>Loading...</Directions>;
+}
+
+type FormComposerBaseFrontendPropsType = {
+  taskData: ConfigTaskType;
+  onSubmit?: Function;
+  onError?: Function;
+  finalResults?: FormComposerResultsType;
+};
+
 function FormComposerBaseFrontend({
   taskData,
   onSubmit,
   onError,
   finalResults = null,
-}) {
-  let initialConfigFormData = taskData.form;
+}: FormComposerBaseFrontendPropsType) {
+  let initialConfigFormData: ConfigFormType = taskData.form;
 
   if (!initialConfigFormData) {
     return <div>Passed form data is invalid... Recheck your task config.</div>;