Convert multiple components from JavaScript to TypeScript

benchexec/tablegenerator/react-table/package.json

@@ -109,8 +109,11 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/deep-equal": "^1.0.4",
     "@types/node": "^18.19.130",
+    "@types/path-browserify": "^1.0.3",
     "@types/react": "^17.0.91",
     "@types/react-dom": "^17.0.26",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-table": "^7.7.20",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint-config-prettier": "^8.5.0",

benchexec/tablegenerator/react-table/scripts/dependencies.js

@@ -35,7 +35,7 @@ checker.init(
     // The following is the list of currently allowed licenses for bundled code.
     // We can add other free licenses, but must adjust the licences for
     // build/vendors.min* in ../../../.reuse/dep5, the linkification code in
-    // src/components/Info.js and pyproject.toml accordingly,
+    // src/components/Info.tsx and pyproject.toml accordingly,
     // and run "reuse download --all".
     onlyAllow: "BSD-3-Clause; CC-BY-4.0; ISC; MIT",
     customFormat: {

benchexec/tablegenerator/react-table/src/components/FilterInfoButton.js → benchexec/tablegenerator/react-table/src/components/FilterInfoButton.tsx

@@ -9,7 +9,19 @@ import React from "react";
 import { isNil } from "../utils/utils";
 import { faFilter } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-export default class FilterInfoButton extends React.Component {
+
+type FilterInfoButtonProps = {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  enabled?: boolean;
+  isFiltered: boolean;
+  filteredCount: number;
+  totalCount: number;
+  resetFilters: () => void;
+  showFilterText?: boolean;
+};
+
+export default class FilterInfoButton extends React.Component<FilterInfoButtonProps> {
   render = () => (
     <button
       className={this.props.className || "reset"}

benchexec/tablegenerator/react-table/src/components/Info.js → benchexec/tablegenerator/react-table/src/components/Info.tsx

@@ -7,11 +7,50 @@
 
 import React from "react";
 
-const dependencies = require("../data/dependencies.json");
+import dependenciesJson from "../data/dependencies.json";
 
-class Dependency extends React.Component {
+/* ============================================================
+ * Domain Types
+ * ============================================================
+ */
+
+/**
+ * A single third-party dependency entry as listed in dependencies.json.
+ */
+type ThirdPartyDependency = {
+  name: string;
+  version: string;
+  licenses: string;
+  licenseId?: number;
+  repository?: string;
+  copyright?: string;
+};
+
+/**
+ * Structure of the dependencies.json file used by this component.
+ */
+type DependenciesJson = {
+  dependencies: ThirdPartyDependency[];
+  licenses: string[];
+};
+
+const dependencies: DependenciesJson = dependenciesJson;
+
+/* ============================================================
+ * Component Types
+ * ============================================================
+ */
+
+type DependencyProps = ThirdPartyDependency;
+
+type InfoProps = {
+  version: string;
+  selectColumn: (ev: React.SyntheticEvent) => void;
+};
+
+class Dependency extends React.Component<DependencyProps> {
   knownLicenses = ["BSD-3-Clause", "CC-BY-4.0", "ISC", "MIT", "Zlib"];
-  linkifyLicense = (license) => (
+  linkifyLicense = (license: string): React.ReactNode => (
     <a
       key={license}
       href={"https://spdx.org/licenses/" + license}
@@ -21,14 +60,14 @@ class Dependency extends React.Component {
       {license}
     </a>
   );
-  linkifyLicenses = (licensesString) =>
+  linkifyLicenses = (licensesString: string): Array<string | React.ReactNode> =>
     licensesString
       .split(/([A-Za-z0-9.-]+)/)
       .map((s) =>
         this.knownLicenses.includes(s) ? this.linkifyLicense(s) : s,
       );
 
-  render = () => (
+  render = (): React.ReactNode => (
     <div>
       <h4>
         <a
@@ -77,7 +116,7 @@ class Dependency extends React.Component {
   );
 }
 
-const Info = (props) => (
+const Info = (props: InfoProps): React.ReactElement => (
   <div className="info">
     <div className="info-header">
       <h1>Info and Help</h1>