refactor: change project to typescript support (X-lab2017#36)

Signed-off-by: frank-zsy <[email protected]>
Signed-off-by: Bruce-Jay <[email protected]>

docusaurus.config.js → docusaurus.config.ts

@@ -1,17 +1,12 @@
-// @ts-check
-// `@type` JSDoc annotations allow editor autocompletion and type checking
-// (when paired with `@ts-check`).
-// There are various equivalent ways to declare your Docusaurus config.
-// See: https://docusaurus.io/docs/api/docusaurus-config
-
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
 import { themes as prismThemes } from 'prism-react-renderer';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 
 const defaultLocale = 'zh';
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
   title: 'OpenDigger',
   tagline: 'Open Source Analysis Platform',
   favicon: 'img/favicon.ico',
@@ -49,7 +44,6 @@ const config = {
   presets: [
     [
       'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
           sidebarPath: './sidebars.js',
@@ -69,7 +63,7 @@ const config = {
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-      }),
+      }) satisfies Preset.Options,
     ],
   ],
 
@@ -99,7 +93,6 @@ const config = {
   },
 
   themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       image: 'img/logo/logo-black-blue-combination-vertical.png',
       navbar: {
@@ -161,7 +154,7 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
-    }),
+    }) satisfies Preset.ThemeConfig,
 };
 
 export default config;

package.json

@@ -36,9 +36,11 @@
     "stackedit-js": "^1.0.7"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/types": "3.4.0",
-    "@simbathesailor/use-what-changed": "^2.0.0"
+    "@docusaurus/module-type-aliases": "^3.4.0",
+    "@docusaurus/tsconfig": "^3.5.2",
+    "@docusaurus/types": "^3.4.0",
+    "@simbathesailor/use-what-changed": "^2.0.0",
+    "typescript": "^5.5.4"
   },
   "browserslist": {
     "production": [

src/components/HomepageFeatures/index.js → src/components/HomepageFeatures/index.tsx

@@ -1,9 +1,17 @@
+import React from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import { translate } from '@docusaurus/Translate';
 
-const FeatureList = [
+type FeatureItem = {
+  title: string;
+  url: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: string;
+};
+
+const FeatureList: FeatureItem[] = [
   {
     title: 'features.richMetrics.title',
     url: 'features.richMetrics.url',
@@ -24,7 +32,7 @@ const FeatureList = [
   },
 ];
 
-function Feature({ Svg, title, description, url }) {
+function Feature({ Svg, title, description, url }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -40,7 +48,7 @@ function Feature({ Svg, title, description, url }) {
   );
 }
 
-export default () => {
+export default (): JSX.Element => {
   return (
     <section className={styles.features}>
       <div className="container">

src/components/Leaderboard/BaseBoard.js → src/components/Leaderboard/BaseBoard.tsx

@@ -1,7 +1,7 @@
 import { flexRender } from '@tanstack/react-table';
 import styles from './styles.module.css';
 
-export function BaseBoard({ table }) {
+export function BaseBoard({ table }): JSX.Element {
   return (
     <div>
       <table className={styles.table}>

src/components/Leaderboard/BoardContainer.js → src/components/Leaderboard/BoardContainer.tsx

@@ -1,6 +1,6 @@
 import styles from './styles.module.css';
 
-export const BoardContainer = ({ children, title }) => {
+export const BoardContainer = ({ children, title }): JSX.Element => {
   return (
     <div className={`${styles.boardContainer}`}>
       <div className={styles.boardTitle}>

src/components/Leaderboard/InputArea.js → src/components/Leaderboard/InputArea.tsx

@@ -4,7 +4,7 @@ import { translate } from '@docusaurus/Translate';
 import { InputColHeaderItem } from './InputColHeaderItem';
 import styles from './styles.module.css';
 
-export function InputArea() {
+export function InputArea(): JSX.Element {
   const { leaderboardConfig, dispatch } = useContext(LeaderboardContext);
   const colCount = leaderboardConfig.columnOptions.length;
 

src/components/Leaderboard/InputColHeaderItem.js → src/components/Leaderboard/InputColHeaderItem.tsx

@@ -14,7 +14,7 @@ function Select({ options, value, onChange }) {
   );
 }
 
-export function InputColHeaderItem({ index }) {
+export function InputColHeaderItem({ index }): JSX.Element {
   const { leaderboardConfig, dispatch } = useContext(LeaderboardContext);
   const { inputData, columnOptions } = leaderboardConfig;
   const fields = inputData[0] ? Object.keys(inputData[0]) : [];

src/components/Leaderboard/NameWithIcon.js → src/components/Leaderboard/NameWithIcon.tsx

@@ -1,6 +1,12 @@
 import styles from './styles.module.css';
 
-export const NameWithIcon = ({ icon, name, rounded }) => {
+interface NameWithIconProps {
+  icon: string;
+  name: string;
+  rounded?: boolean;
+}
+
+export const NameWithIcon = ({ icon, name, rounded }: NameWithIconProps) => {
   return (
     <div className={styles.nameContainer}>
       <img src={icon} alt="" className={`${styles.icon} ${rounded ? styles.iconRounded : ''}`} />

src/components/Leaderboard/NumberWithDelta.js → src/components/Leaderboard/NumberWithDelta.tsx

@@ -1,10 +1,10 @@
 import styles from './styles.module.css';
 
-const formatNumber = num => {
+const formatNumber = (num: number) => {
   return Math.round(num);
 }
 
-export const NumberWithDelta = ({ number, delta }) => {
+export const NumberWithDelta = ({ number, delta }): JSX.Element => {
   if (delta === '-') {
     return (
       <div className={styles.numberContainer}>

src/components/Leaderboard/context.ts

@@ -71,4 +71,5 @@ export function leaderboardConfigReducer(config, action) {
   }
 }
 
-export const LeaderboardContext = createContext({});
+export const LeaderboardContext: React.Context<{ leaderboardConfig, dispatch }> =
+  createContext({ leaderboardConfig: intialLeaderboardConfig, dispatch: leaderboardConfigReducer });

src/components/Leaderboard/index.js → src/components/Leaderboard/index.tsx

@@ -8,27 +8,31 @@ import { NameWithIcon } from './NameWithIcon';
 import { useReducer } from 'react';
 import { useReactTable, createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 
-export const COLUMN_TYPE_RULES = [
-  {
-    name: 'String',
-    fieldsNeeded: 1,
-    renderer: (text) => <span>{text}</span>,
-  },
-  {
-    name: 'StringWithIcon',
-    fieldsNeeded: 2,
-    renderer: (text, icon) => <NameWithIcon size={20} icon={icon} name={text} />,
-  },
-  {
-    name: 'NumberWithDelta',
-    fieldsNeeded: 2,
-    renderer: (num, delta) => <NumberWithDelta number={num} delta={delta} />,
-  },
-]
+export const COLUMN_TYPE_RULES: {
+  name: string;
+  fieldsNeeded: number;
+  renderer: (...args: any[]) => JSX.Element;
+}[] = [
+    {
+      name: 'String',
+      fieldsNeeded: 1,
+      renderer: (text) => <span>{text}</span>,
+    },
+    {
+      name: 'StringWithIcon',
+      fieldsNeeded: 2,
+      renderer: (text, icon) => <NameWithIcon icon={icon} name={text} />,
+    },
+    {
+      name: 'NumberWithDelta',
+      fieldsNeeded: 2,
+      renderer: (num, delta) => <NumberWithDelta number={num} delta={delta} />,
+    },
+  ];
 
-const helper = createColumnHelper();
+const helper = createColumnHelper<{ __index__: number }>();
 
-export default () => {
+export default (): JSX.Element => {
   const [leaderboardConfig, dispatch] = useReducer(leaderboardConfigReducer, intialLeaderboardConfig);
   const { inputData, title, columnOptions } = leaderboardConfig;
 

src/components/OpenDiggerMetricCharts/index.js → src/components/OpenDiggerMetricCharts/index.tsx

@@ -1,21 +1,21 @@
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import axios from 'axios';
 import ReactECharts from 'echarts-for-react';
 import { translate } from '@docusaurus/Translate';
 import SearchInput, { repoMetricOptionMap, userMetricOptionMap } from '../SearchInput';
 import styles from './styles.module.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-export default () => {
+export default (): JSX.Element => {
 
   const echartsRef = useRef(null);
 
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
 
-  const defaultRepoName = 'X-lab2017/open-digger';
+  const defaultRepoName: string = 'X-lab2017/open-digger';
 
-  const optionGeneratorMap = new Map();
+  const optionGeneratorMap = new Map<string, (data: any) => object>();
   let repoName = '';
 
   ['OpenRank', 'Activity', 'Bus Factor'].forEach(m => optionGeneratorMap.set(m, data => ({
@@ -323,7 +323,7 @@ export default () => {
 
   const [options, setOptions] = useState({});
 
-  const fetchData = (platform, type, name, metric) => {
+  const fetchData = (platform: string, type: string, name: string, metric: string) => {
     if (!platform || !type || !name || !metric) {
       alert(translate({ id: 'metricCharts.invalidInput' }));
       return;