[refactor] replace React Bootstrap with MUI to optimize UX

.eslintrc.json

@@ -1,10 +1,47 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["simple-import-sort"],
+  "env": { "browser": true, "node": true, "es2020": true },
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "warnOnUnsupportedTypeScriptVersion": false,
+    "ecmaFeatures": { "jsx": true },
+    "project": "./tsconfig.json"
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["simple-import-sort", "@cspell", "@typescript-eslint", "react"],
   "rules": {
-    "react/jsx-no-target-blank": "warn",
-    "@next/next/no-sync-scripts": "warn",
+    "arrow-body-style": ["error", "as-needed"],
     "simple-import-sort/exports": "error",
-    "simple-import-sort/imports": "error"
+    "simple-import-sort/imports": "error",
+    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
+    "react/jsx-no-target-blank": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-sort-props": [
+      "error",
+      {
+        "reservedFirst": true,
+        "shorthandLast": true,
+        "callbacksLast": true,
+        "noSortAlphabetically": true
+      }
+    ],
+    "react/self-closing-comp": ["error", { "component": true, "html": true }],
+    "@typescript-eslint/no-empty-object-type": "off",
+    "@cspell/spellchecker": [
+      "warn",
+      {
+        "cspell": {
+          "language": "en",
+          "dictionaries": ["typescript", "node", "html", "css", "bash", "npm"]
+        }
+      }
+    ]
   }
 }

babel.config.js

@@ -1,13 +1,13 @@
-module.exports = {
+export default {
   presets: [
     // https://babeljs.io/docs/babel-preset-react
     [
       '@babel/preset-react',
       {
         runtime: 'automatic',
-        development: process.env.BABEL_ENV === 'development',
-      },
-    ],
+        development: process.env.BABEL_ENV === 'development'
+      }
+    ]
   ],
   plugins: [
     // https://github.com/babel/babel/issues/16262#issuecomment-1962832499
@@ -17,10 +17,10 @@ module.exports = {
         allowDeclareFields: true,
         allowNamespaces: true,
         allExtensions: true,
-        isTSX: true,
-      },
+        isTSX: true
+      }
     ],
     // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
-    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
-  ],
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }]
+  ]
 };

components/Client/Partner.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Image } from 'react-bootstrap';
+import { Tooltip } from '@mui/material';
+import { FC, ReactNode } from 'react';
 
 import { Client } from '../../models/Client';
 import { fileURLOf } from '../../pages/api/Lark/file/[id]';
@@ -8,33 +8,63 @@ export interface PartnerProps extends Client {
   className?: string;
 }
 
-export const Partner: FC<PartnerProps> = ({
-  className = '',
-  name,
-  image,
-  summary,
-  address,
-}) => (
-  <div
-    className={`d-flex flex-column align-items-center justify-content-center gap-3 position-relative ${className}`}
-  >
-    <Image
-      fluid
-      className="object-fit-contain"
-      style={{ height: '5rem' }}
+export interface PartnerOverviewProps extends Record<'name' | 'logo' | 'address', string> {
+  logoDark?: string;
+  className?: string;
+  tooltip?: ReactNode;
+}
+
+export const Partner: FC<PartnerProps> = ({ className = '', name, image, summary, address }) => (
+  <div className={`relative flex flex-col items-center justify-center gap-4 ${className}`}>
+    <img
+      className="h-20 object-fill"
       loading="lazy"
-      src={fileURLOf(image)}
+      src={fileURLOf(String(image))}
+      alt={String(name)}
     />
     <h3>
-      <a
-        className="stretched-link"
-        target="_blank"
-        href={address + ''}
-        rel="noreferrer"
-      >
-        {name + ''}
+      <a className="stretched-link" target="_blank" href={String(address)} rel="noreferrer">
+        {String(name)}
       </a>
     </h3>
-    <p className="text-muted">{summary + ''}</p>
+    <p className="text-muted">{String(summary)}</p>
   </div>
 );
+
+export const PartnerOverview: FC<PartnerOverviewProps> = ({ name, tooltip, ...rest }) =>
+  tooltip ? (
+    <Tooltip key={name} title={tooltip}>
+      <LogoWithLink name={name} {...rest} />
+    </Tooltip>
+  ) : (
+    <LogoWithLink key={name} name={name} {...rest} />
+  );
+
+export const LogoWithLink: FC<Omit<PartnerOverviewProps, 'tooltip'>> = ({
+  name,
+  address,
+  logo,
+  logoDark,
+  className
+}) => (
+  <a
+    key={name}
+    href={address}
+    className="flex items-center justify-center"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img
+      className={`max-h-24 min-h-2 dark:hidden ${className}`}
+      loading="lazy"
+      src={logoDark ?? logo}
+      alt={name}
+    />
+    <img
+      className={`hidden max-h-24 min-h-2 dark:block ${className}`}
+      loading="lazy"
+      src={logo}
+      alt={name}
+    />
+  </a>
+);

components/Git/Card.tsx

@@ -1,11 +1,10 @@
-import { text2color } from 'idea-react';
+import { Button, Chip } from '@mui/material';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
+import Link from 'next/link';
 import { FC } from 'react';
-import { Badge, Button, Card, Col, Row } from 'react-bootstrap';
 
 import { i18n } from '../../models/Translation';
-import { GitLogo } from './Logo';
 
 export interface GitCardProps
   extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
@@ -14,53 +13,39 @@ export interface GitCardProps
 }
 
 export const GitCard: FC<GitCardProps> = observer(
-  ({
-    className = 'shadow-sm',
-    full_name,
-    html_url,
-    languages = [],
-    topics = [],
-    description,
-    homepage,
-  }) => (
-    <Card className={className}>
-      <Card.Body className="d-flex flex-column gap-3">
-        <Card.Title as="h3" className="h5">
-          <a target="_blank" href={html_url} rel="noreferrer">
-            {full_name}
-          </a>
-        </Card.Title>
+  ({ className = '', full_name, html_url, topics = [], description, homepage }) => (
+    <li
+      className={`${className} grid grid-cols-1 grid-rows-10 gap-2 rounded-2xl border p-4 elevation-1 hover:elevation-8 dark:border-0`}
+    >
+      <h3 className="row-span-2 text-lg">
+        <a target="_blank" href={html_url} rel="noreferrer">
+          {full_name}
+        </a>
+      </h3>
 
-        <nav className="flex-fill">
-          {topics.map(topic => (
-            <Badge
-              key={topic}
-              className="me-1"
-              bg={text2color(topic, ['light'])}
-              as="a"
-              target="_blank"
-              href={`https://github.com/topics/${topic}`}
-            >
-              {topic}
-            </Badge>
-          ))}
-        </nav>
-        <Row as="ul" className="list-unstyled g-4" xs={4}>
-          {languages.map(language => (
-            <Col as="li" key={language}>
-              <GitLogo name={language} />
-            </Col>
-          ))}
-        </Row>
-        <Card.Text>{description}</Card.Text>
-      </Card.Body>
-      <Card.Footer className="d-flex justify-content-between align-items-center">
-        {homepage && (
-          <Button variant="success" target="_blank" href={homepage}>
-            {i18n.t('home_page')}
-          </Button>
-        )}
-      </Card.Footer>
-    </Card>
-  ),
+      <nav className="row-span-3 flex flex-row flex-wrap gap-2">
+        {topics.map(topic => (
+          <Chip
+            key={topic}
+            size="small"
+            component="a"
+            target="_blank"
+            href={`https://github.com/topics/${topic}`}
+            label={topic}
+          />
+        ))}
+      </nav>
+
+      <p className="row-span-3 text-sm">{description}</p>
+
+      <Button
+        className="row-span-2 place-self-center"
+        component={Link}
+        target="_blank"
+        href={homepage ?? html_url}
+      >
+        {i18n.t('home_page')}
+      </Button>
+    </li>
+  )
 );

components/Git/Logo.tsx

@@ -1,30 +1,36 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import Image from 'next/image';
 import { PureComponent } from 'react';
-import { Image } from 'react-bootstrap';
 
-export interface GitLogoProps {
+export interface GitLogoProps extends Partial<Record<'width' | 'height', number>> {
   name: string;
+  className?: string;
 }
 
 @observer
 export class GitLogo extends PureComponent<GitLogoProps> {
   @observable
   accessor path = '';
 
-  async componentDidMount() {
+  componentDidMount() {
+    void this.init();
+  }
+
+  async init() {
     const { name } = this.props;
     const topic = name.toLowerCase();
 
     try {
       const { src } = await this.loadImage(
-        `https://raw.githubusercontent.com/github/explore/master/topics/${topic}/${topic}.png`,
+        `https://raw.githubusercontent.com/github/explore/master/topics/${topic}/${topic}.png`
       );
+
       this.path = src;
     } catch {
       const { src } = await this.loadImage(`https://github.com/${name}.png`);
 
-      this.path = src;
+      return (this.path = src);
     }
   }
 
@@ -41,8 +47,18 @@ export class GitLogo extends PureComponent<GitLogoProps> {
 
   render() {
     const { path } = this;
-    const { name } = this.props;
+    const { name, width = 24, height = 24, className = '' } = this.props;
 
-    return path && <Image fluid loading="lazy" src={path} alt={name} />;
+    return (
+      path && (
+        <Image
+          className={`${className} object-fill`}
+          width={width}
+          height={height}
+          src={path}
+          alt={name}
+        />
+      )
+    );
   }
 }

components/Git/index.tsx

@@ -1,17 +1,12 @@
 import { GitRepository } from 'mobx-github';
 import { FC } from 'react';
-import { Col, Row } from 'react-bootstrap';
 
 import { GitCard } from './Card';
 
-export const GitListLayout: FC<{ defaultData: GitRepository[] }> = ({
-  defaultData,
-}) => (
-  <Row as="ul" className="list-unstyled g-4" xs={1} md={2} xl={3}>
+export const GitListLayout: FC<{ defaultData: GitRepository[] }> = ({ defaultData }) => (
+  <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
     {defaultData.map(item => (
-      <Col as="li" key={item.id}>
-        <GitCard className="h-100 shadow-sm" {...item} />
-      </Col>
+      <GitCard key={item.id} className="h-full" {...item} />
     ))}
-  </Row>
+  </ul>
 );

components/Icon.tsx

@@ -0,0 +1,21 @@
+import { FC, HTMLAttributes, PropsWithRef } from 'react';
+
+export type IconProps = PropsWithRef<
+  HTMLAttributes<HTMLSpanElement> & {
+    name: string;
+    variant?: 'outlined' | 'rounded' | 'sharp';
+  }
+>;
+
+export const SymbolIcon: FC<IconProps> = ({ className, name, variant = 'outlined', ...props }) => (
+  <span
+    aria-hidden="false"
+    aria-label={`${name} icon`}
+    className={`material-symbols-${variant} ${className}`}
+    {...props}
+  >
+    {name}
+  </span>
+);
+
+SymbolIcon.displayName = 'SymbolIcon';