[migrate] replace MUI with Shadcn UI & MobX-RESTful-Shadcn

.github/workflows/deploy-production.yml

@@ -39,6 +39,8 @@ jobs:
         id: push
         with:
           context: .
+          secrets: |
+            gh_pat=${{ secrets.GH_PAT }}
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -46,3 +46,6 @@ yarn-error.log*
 
 # IDE
 .vscode/settings.json
+
+# Shadcn UI components
+components/ui/

Dockerfile

@@ -1,3 +1,5 @@
+# Reference: https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container
+
 FROM node:24-slim AS base
 RUN apt-get update && \
     apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
@@ -13,7 +15,9 @@ COPY . /app
 WORKDIR /app
 
 FROM base AS build
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm e i --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    --mount=type=secret,id=gh_pat \
+    sh -ec 'pnpm config set "//npm.pkg.github.com/:_authToken" "$(cat /run/secrets/gh_pat)";  pnpm e i --frozen-lockfile;  pnpm config delete "//npm.pkg.github.com/:_authToken";'
 RUN CI=true  pnpm build
 
 FROM base

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "registries": {
+    "@mobx-restful-shadcn": "https://mobx-restful-shadcn.idea2.app/r/{name}.json"
+  },
+  "iconLibrary": "lucide"
+}

components/Client/Partner.tsx

@@ -1,9 +1,9 @@
-import { Tooltip } from '@mui/material';
 import { FC, ReactNode } from 'react';
 
 import { fileURLOf } from '../../models/Base';
 import { Client } from '../../models/Client';
 import { LarkImage } from '../LarkImage';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
 export interface PartnerProps extends Client {
   className?: string;
@@ -29,8 +29,13 @@ export const Partner: FC<PartnerProps> = ({ className = '', name, image, summary
 
 export const PartnerOverview: FC<PartnerOverviewProps> = ({ name, tooltip, ...rest }) =>
   tooltip ? (
-    <Tooltip key={name} title={tooltip}>
-      <LogoWithLink name={name} {...rest} />
+    <Tooltip key={name}>
+      <TooltipTrigger asChild>
+        <span>
+          <LogoWithLink name={name} {...rest} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
     </Tooltip>
   ) : (
     <LogoWithLink key={name} name={name} {...rest} />

components/Git/Card.tsx

@@ -1,93 +1,82 @@
-import { Button, Chip, IconButton, Tooltip } from '@mui/material';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
 import { FC, useContext } from 'react';
 
 import { I18nContext } from '../../models/Translation';
-import { SymbolIcon } from '../Icon';
-import { GitpodIcon, OcticonIcon } from '../Layout/Svg';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../ui/card';
+import { GitLogo } from './Logo';
 
 export interface GitCardProps
-  extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
+  extends
+    Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
     Partial<Pick<GitRepository, 'topics' | 'description' | 'homepage'>> {
   className?: string;
 }
 
 export const GitCard: FC<GitCardProps> = observer(
-  ({ className = '', full_name, html_url, topics = [], description, homepage }) => {
+  ({
+    className = 'shadow-sm',
+    full_name,
+    html_url,
+    languages = [],
+    topics = [],
+    description,
+    homepage,
+  }) => {
     const { t } = useContext(I18nContext);
 
     return (
-      <li
-        className={`${className} elevation-1 hover:elevation-4 grid grid-cols-1 grid-rows-6 gap-2 rounded-2xl border border-gray-200 p-4 dark:border-0`}
-      >
-        <h3 className="row-span-1 text-lg">
-          <a target="_blank" href={html_url} rel="noreferrer">
-            {full_name}
-          </a>
-        </h3>
-
-        <nav className="scrollbar-none row-span-1 flex snap-x snap-mandatory flex-row flex-nowrap gap-2 overflow-x-scroll">
-          {topics.map(topic => (
-            <Chip
-              key={topic}
-              size="small"
-              color="info"
-              variant="outlined"
-              component={Link}
+      <Card className={`flex h-full flex-col ${className}`}>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg">
+            <a
+              className="underline-offset-4 hover:underline"
               target="_blank"
-              href={`https://github.com/topics/${topic}`}
-              label={topic}
-              clickable
-            />
-          ))}
-        </nav>
+              href={html_url}
+              rel="noreferrer"
+            >
+              {full_name}
+            </a>
+          </CardTitle>
+        </CardHeader>
 
-        <p className="row-span-3 text-sm text-neutral-500">{description}</p>
-        <div className="row-span-1 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Tooltip title="Codespaces">
-              <IconButton
-                component="a"
-                target="_blank"
-                href={`https://codespaces.new/${full_name}`}
-                rel="noreferrer"
-              >
-                <OcticonIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Gitpod">
-              <IconButton
-                component="a"
+        <CardContent className="flex flex-1 flex-col gap-3 pt-0">
+          <nav className="flex min-h-16 snap-x snap-mandatory scrollbar-none flex-row flex-nowrap gap-2 overflow-x-scroll">
+            {topics.map(topic => (
+              <a
+                key={topic}
                 target="_blank"
-                href={`https://gitpod.io/?autostart=true#${html_url}`}
                 rel="noreferrer"
+                href={`https://github.com/topics/${topic}`}
               >
-                <GitpodIcon className="h-6 w-6 font-extralight dark:fill-white" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Code">
-              <IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
-                <SymbolIcon name="code" />
-              </IconButton>
-            </Tooltip>
-          </div>
+                <Badge variant="secondary">{topic}</Badge>
+              </a>
+            ))}
+          </nav>
+
+          <ul className="grid list-none grid-cols-4 gap-4 p-0">
+            {languages.map(language => (
+              <li key={language}>
+                <GitLogo name={language} />
+              </li>
+            ))}
+          </ul>
+
+          {description && <p className="text-muted-foreground flex-1 text-sm">{description}</p>}
+        </CardContent>
 
-          <Button
-            component="a"
-            className="!rounded-full"
-            variant="contained"
-            color="info"
-            target="_blank"
-            href={homepage ?? html_url}
-            disabled={!(homepage ?? html_url)}
-            startIcon={<SymbolIcon name="visibility" />}
-          >
-            {t('preview')}
-          </Button>
-        </div>
-      </li>
+        <CardFooter className="justify-end">
+          {(homepage || html_url) && (
+            <Button variant="secondary" asChild>
+              <a target="_blank" rel="noreferrer" href={homepage || html_url}>
+                {t('preview') || t('home_page')}
+              </a>
+            </Button>
+          )}
+        </CardFooter>
+      </Card>
     );
   },
 );