[refactor] replace React Bootstrap with MUI to optimize UX (#70)

Co-authored-by: South Drifted <[email protected]>

Author: Soecka

.env

@@ -1,16 +1,15 @@
 NEXT_PUBLIC_SITE_NAME = idea2app
 NEXT_PUBLIC_SITE_SUMMARY = 全行业信息化转型专家
-NEXT_PUBLIC_LOGO = https://github.com/idea2app.png
+NEXT_PUBLIC_LOGO = /idea2app.svg
 
 NEXT_PUBLIC_CACHE_HOST = https://cache.idea2.app
 
 NEXT_PUBLIC_SENTRY_DSN = https://03e5d951172f411a04c1bab44022e22b@o4506471366852608.ingest.sentry.io/4506484563705856
 SENTRY_ORG = idea2app
 SENTRY_PROJECT = ows
 
-LARK_API_HOST = https://open.larksuite.com/open-apis/
-NEXT_PUBLIC_LARK_BASE = McGRbzEInauTTOsWX1blxbN1grh
-NEXT_PUBLIC_CLIENT_TABLE = tblRNMvpJ1UZwJW2
-NEXT_PUBLIC_PROJECT_TABLE = tblwaxbQ35uX2lUS
-NEXT_PUBLIC_MEMBER_TABLE = tblD7p7XAcrinGqO
-NEXT_PUBLIC_MEMBER_VIEW = vewLspr5VK
+NEXT_PUBLIC_LARK_BASE = bascnFeH8Q37XWX0LLlBB9ojQzf
+NEXT_PUBLIC_CLIENT_TABLE = tblsb0vx4fqjSrGL
+NEXT_PUBLIC_PROJECT_TABLE = tblCxasoUUub3buB
+NEXT_PUBLIC_MEMBER_TABLE = tblJ98JHGEX0o6ij
+NEXT_PUBLIC_MEMBER_VIEW = vewLf4M0P8

.eslintrc.json

@@ -28,7 +28,7 @@ jobs:
           vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
           working-directory: ./
-          vercel-args: --prod
+          vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}
 
       - name: Lark notification
         uses: foxundermoon/feishu-action@v2

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:22-slim AS base
 RUN apt-get update && \
     apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
     rm -rf /var/lib/apt/lists/*

.github/workflows/pull-request.yml

@@ -5,9 +5,9 @@ module.exports = {
       '@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' }]
+  ]
 };

Dockerfile

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

babel.config.js

@@ -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 key={language} as="li">
-              <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/Client/Partner.tsx

@@ -1,30 +1,36 @@
 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}
+        />
+      )
+    );
   }
 }