Feature add typescript support

.eslintrc.json

@@ -13,6 +13,11 @@
       "files": [".mdx", ".md"],
       "parser": "eslint-mdx",
       "extends": "plugin:mdx/recommended"
+    },
+    {
+      "files": [".tsx", ".ts"],
+      "parser": "eslint-mdx",
+      "extends": "plugin:@typescript-eslint/recommended"
     }
   ],
   "parserOptions": {
@@ -25,6 +30,6 @@
     },
     "mdx/code-blocks": true
   },
-  "plugins": [],
+  "plugins": ["@typescript-eslint", "react"],
   "rules": {}
 }

.github/workflows/yarn.yml

@@ -22,9 +22,9 @@ jobs:
         uses: wearerequired/lint-action@v1
         with:
           eslint: true
-          eslint_extensions: js,jsx,md,mdx
+          eslint_extensions: js,jsx,md,mdx,ts,tsx
           prettier: true
-          prettier_extensions: js,jsx,css,md,mdx
+          prettier_extensions: js,jsx,css,md,mdx,ts,tsx
           neutral_check_on_warning: true
       - name: Sync translations
         env:

package.json

@@ -13,7 +13,7 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download",
-    "test:lint": "eslint . --ext js,jsx,md,mdx",
+    "test:lint": "eslint . --ext js,jsx,md,mdx,ts,tsx",
     "test:style": "prettier --check .",
     "test": "yarn run test:lint && yarn run test:style"
   },
@@ -31,13 +31,22 @@
     "react-select": "^4.3.1"
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.3",
+    "@tsconfig/docusaurus": "^1.0.2",
     "@types/eslint": "7.28.0",
     "@types/eslint-config-prettier": "6.11.0",
     "@types/prettier": "2.3.2",
-    "eslint": "^7.30.0",
+    "@types/react": "^17.0.14",
+    "@types/react-helmet": "^6.1.2",
+    "@types/react-router-dom": "^5.1.8",
+    "@types/react-select": "^4.0.17",
+    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/parser": "^4.28.4",
+    "eslint": "^7.31.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-mdx": "^1.14.1",
     "eslint-plugin-react": "^7.24.0",
-    "prettier": "2.3.2"
+    "prettier": "2.3.2",
+    "typescript": "^4.3.5"
   }
 }

src/js/_dependencyDownload.jsx → src/js/_dependencyDownload.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import clsx from "clsx";
 import styles from "../css/styles.module.css";
-import ReactSelect from "react-select";
+import ReactSelect, { GroupTypeBase } from "react-select";
+import Select from "react-select/base";
+import StateManager from "react-select";
 
 function DependencyDownload() {
   const [dependencyName, setDependencyName] = React.useState(
@@ -18,21 +20,33 @@ function DependencyDownload() {
     );
     return getDownloadURL(defaultVersion);
   });
-  let versionsRef = React.createRef();
+  let versionsRef =
+    React.createRef<
+      StateManager<
+        { value: string; label: string },
+        false,
+        GroupTypeBase<{ value: string; label: string }>,
+        Select<
+          { value: string; label: string },
+          false,
+          GroupTypeBase<{ value: string; label: string }>
+        >
+      >
+    >();
 
-  function getVersions(dependency) {
+  function getVersions(dependency: Dependency) {
     return dependency.versions.map((version) => {
       return { value: version.version, label: version.version };
     });
   }
 
-  function getDownloadURL(version) {
+  function getDownloadURL(version: DependencyVersion): string {
     let templateURL = releaseTypes.find(
       (releaseType) => releaseType.name === version.releaseType
     ).url;
     if (!templateURL) {
       console.error(
-        `ReleaseType ${version.releaseType} of ${version.name}(${version.version}) does not exist!`
+        `ReleaseType ${version.releaseType} of ${version.artifactId}(${version.version}) does not exist!`
       );
       return "";
     }
@@ -42,7 +56,7 @@ function DependencyDownload() {
       .replace(/%version%/g, version.version);
   }
 
-  function updateDownloadURL(dependency, version) {
+  function updateDownloadURL(dependency: string, version: string) {
     let selectedDependency = dependencies.find(
       (localDependency) => localDependency.name === dependency
     );
@@ -59,10 +73,13 @@ function DependencyDownload() {
     setDependencyName(selectedDependency.name);
     setVersions(getVersions(selectedDependency));
     setVersionName(selectedDependency.currentVersion);
-    versionsRef.select.setValue({
-      value: selectedDependency.currentVersion,
-      label: selectedDependency.currentVersion,
-    });
+    versionsRef.current.select.setValue(
+      {
+        value: selectedDependency.currentVersion,
+        label: selectedDependency.currentVersion,
+      },
+      "select-option"
+    );
     updateDownloadURL(
       selectedDependency.name,
       selectedDependency.currentVersion
@@ -113,9 +130,7 @@ function DependencyDownload() {
       <div>
         <h4>Version</h4>
         <ReactSelect
-          ref={(ref) => {
-            versionsRef = ref;
-          }}
+          ref={versionsRef}
           options={versions}
           defaultValue={{ value: versionName, label: versionName }}
           onChange={handleVersionChange}
@@ -144,7 +159,27 @@ function DependencyDownload() {
 
 export default DependencyDownload;
 
-const dependencies = [
+type ReleaseTypeName = "snapshot" | "release";
+
+type ReleaseType = {
+  name: ReleaseTypeName;
+  url: string;
+};
+
+type DependencyVersion = {
+  version: string;
+  groupId: string;
+  artifactId: string;
+  releaseType: ReleaseTypeName;
+};
+
+type Dependency = {
+  name: string;
+  currentVersion: string;
+  versions: DependencyVersion[];
+};
+
+const dependencies: Dependency[] = [
   {
     name: "cloudnet-driver",
     currentVersion: "3.3.0-RELEASE",
@@ -338,7 +373,7 @@ const dependencies = [
     ],
   },
 ];
-const releaseTypes = [
+const releaseTypes: ReleaseType[] = [
   {
     name: "release",
     url: "https://repo.cloudnetservice.eu/repository/releases/%groupId%/%artifactId%/%version%/%artifactId%-%version%.jar",

src/pages/index.jsx → src/pages/index.tsx

@@ -8,7 +8,13 @@ import styles from "./styles.module.css";
 import Icon from "@material-ui/core/Icon";
 import Translate from "@docusaurus/Translate";
 
-const features = [
+type FeatureProps = {
+  title: any;
+  icon: string;
+  description: any;
+};
+
+const features: FeatureProps[] = [
   {
     title: (
       <Translate id="homepage.feature.openSource.title">
@@ -78,7 +84,7 @@ const features = [
   },
 ];
 
-function Feature({ icon, title, description }) {
+function Feature({ icon, title, description }: FeatureProps) {
   return (
     <div className={clsx("col col--4", styles.feature)}>
       <div className="text--center">
@@ -90,12 +96,6 @@ function Feature({ icon, title, description }) {
   );
 }
 
-Feature.propTypes = {
-  icon: undefined,
-  title: undefined,
-  description: undefined,
-};
-
 function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "include": ["src/"]
+}