feat(web): 整体迁移至 chakra-ui

ohbug-org · Jun 24, 2022 · 8a2ff2c · 8a2ff2c
1 parent 8c4bbbd
commit 8a2ff2c
Show file tree

Hide file tree

Showing 27 changed files with 1,998 additions and 774 deletions.
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -9,9 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/utils": "^2.0.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@next-auth/prisma-adapter": "^1.0.3",
     "clsx": "^1.1.1",
-    "daisyui": "^2.15.4",
+    "framer-motion": "^6.3.11",
     "highcharts": "^10.1.0",
     "highcharts-react-official": "^3.1.0",
     "jotai": "^1.7.2",
@@ -29,7 +33,6 @@
     "zustand": "4.0.0-rc.1"
   },
   "devDependencies": {
-    "@tailwindcss/line-clamp": "^0.4.0",
     "@types/node": "^18.0.0",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
@@ -38,7 +41,6 @@
     "autoprefixer": "^10.4.7",
     "babel-plugin-superjson-next": "^0.4.3",
     "postcss": "^8.4.14",
-    "superjson": "^1.9.1",
-    "tailwindcss": "^3.1.3"
+    "superjson": "^1.9.1"
   }
 }
diff --git a/packages/web/postcss.config.js b/packages/web/postcss.config.js
@@ -1,6 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = { plugins: { autoprefixer: {} } }
diff --git a/packages/web/src/components/breadcrumb.tsx b/packages/web/src/components/breadcrumb.tsx
@@ -1,22 +1,29 @@
 import Link from 'next/link'
 import type { FC } from 'react'
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
 import useBreadcrumb from '~/hooks/useBreadcrumb'
 
-const Breadcrumb: FC = () => {
+const Breadcrumbs: FC = () => {
   const [breadcrumbs] = useBreadcrumb()
 
   return (
-    <div className="text-sm breadcrumbs">
-      <ul>
-        {
-          breadcrumbs
-            .slice(0, breadcrumbs.length - 1)
-            .map(v => (<li key={v.path}><Link href={v.path}><a>{v.breadcrumb}</a></Link></li>))
-        }
-        <li>{breadcrumbs.at(-1)?.breadcrumb}</li>
-      </ul>
-    </div>
+    <Breadcrumb>
+      {
+        breadcrumbs
+          .slice(0, breadcrumbs.length - 1)
+          .map(v => (
+            <BreadcrumbItem key={v.path}>
+              <Link href={v.path}>
+                <BreadcrumbLink>
+                  {v.breadcrumb}
+                </BreadcrumbLink>
+              </Link>
+            </BreadcrumbItem>
+          ))
+      }
+      <BreadcrumbItem><BreadcrumbLink>{breadcrumbs.at(-1)?.breadcrumb}</BreadcrumbLink></BreadcrumbItem>
+    </Breadcrumb>
   )
 }
 
-export default Breadcrumb
+export default Breadcrumbs
diff --git a/packages/web/src/components/issueDetailAction.tsx b/packages/web/src/components/issueDetailAction.tsx
@@ -1,3 +1,4 @@
+import { Box, Center, Flex, Text, Tooltip } from '@chakra-ui/react'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import type { OhbugEventLike } from 'types'
@@ -9,56 +10,86 @@ interface Props {
 
 const IssueDetailActions: FC<Props> = ({ event }) => {
   return (
-    <div>
-      <ul className="steps steps-vertical max-h-96 overflow-y-auto">
-        {event?.actions?.map((action) => {
+    <Box>
+      {
+        event?.actions?.map((action) => {
           const { message, icon } = getMessageAndIconByActionType(action)
           return (
-            <li
-              className="step step-neutral"
-              data-content={icon}
+            <Flex
+              alignItems="center"
+              gap="2"
+              justifyContent="space-between"
               key={action.timestamp + action.data}
             >
-              <div className="w-full flex justify-between items-center">
-                <div className="font-bold w-24">
+              <Center>
+                <Box>{icon}</Box>
+                <Text
+                  fontWeight="bold"
+                  w="80px"
+                >
                   {action.type}
-                </div>
-                <div className="flex-1 text-secondary text-left">{message}</div>
-                <div
-                  className="tooltip"
-                  data-tip={dayjs(event.timestamp).format('YYYY-MM-DD HH:mm:ss')}
+                </Text>
+              </Center>
+
+              <Box flex="1">
+                <Text
+                  color="dimmed"
+                  size="sm"
+                >
+                  {message}
+                </Text>
+              </Box>
+
+              <Tooltip
+                label={dayjs(event.timestamp).format('YYYY-MM-DD HH:mm:ss')}
+              >
+                <Text
+                  color="dimmed"
+                  size="sm"
                 >
-                  <div className="w-20 text-secondary">
-                    {dayjs(event.timestamp).format('HH:mm:ss')}
-                  </div>
-                </div>
-              </div>
-            </li>
+                  {dayjs(event.timestamp).format('HH:mm:ss')}
+                </Text>
+              </Tooltip>
+            </Flex>
           )
-        })}
-        <li
-          className="step step-neutral step-error"
-          data-content="🐛"
+        })
+      }
+      <Flex
+        alignItems="center"
+        gap="2"
+        justifyContent="space-between"
+      >
+        <Center>
+          <Box>🐛</Box>
+          <Text
+            fontWeight="bold"
+            w="80px"
+          >
+            exception
+          </Text>
+        </Center>
+
+        <Box flex="1">
+          <Text
+            color="dimmed"
+            size="sm"
+          >
+            {renderStringOrJson(event.detail.message)}
+          </Text>
+        </Box>
+
+        <Tooltip
+          label={dayjs(event.timestamp).format('YYYY-MM-DD HH:mm:ss')}
         >
-          <div className="w-full flex justify-between items-center">
-            <div className="font-bold w-24">
-                exception
-            </div>
-            <div className="flex-1 text-secondary text-left">
-              {renderStringOrJson(event.detail.message)}
-            </div>
-            <div
-              className="tooltip"
-              data-tip={dayjs(event.timestamp).format('YYYY-MM-DD HH:mm:ss')}
-            >
-              <div className="w-20 text-secondary">
-                {dayjs(event.timestamp).format('HH:mm:ss')}
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
+          <Text
+            color="dimmed"
+            size="sm"
+          >
+            {dayjs(event.timestamp).format('HH:mm:ss')}
+          </Text>
+        </Tooltip>
+      </Flex>
+    </Box>
   )
 }
 

diff --git a/packages/web/src/components/issueDetailEventsList.tsx b/packages/web/src/components/issueDetailEventsList.tsx
@@ -1,3 +1,4 @@
+import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import type { FC } from 'react'
@@ -10,54 +11,54 @@ interface Props {
 
 const issueDetailEventsList: FC<Props> = ({ events }) => {
   return (
-    <div className="overflow-x-auto w-full">
-      <table className="table table-compact w-full">
-        <thead>
-          <tr>
-            <th>description</th>
-            <th>appType</th>
-            <th>appVersion</th>
-            <th>category</th>
-            <th>releaseStage</th>
-            <th>user</th>
-            <th>sdk</th>
-            <th>device</th>
-            <th>metadata</th>
-          </tr>
-        </thead>
-        <tbody>
+    <TableContainer>
+      <Table className="table table-compact w-full">
+        <Thead>
+          <Tr>
+            <Th>description</Th>
+            <Th>appType</Th>
+            <Th>appVersion</Th>
+            <Th>category</Th>
+            <Th>releaseStage</Th>
+            <Th>user</Th>
+            <Th>sdk</Th>
+            <Th>device</Th>
+            <Th>metadata</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
           {
             events?.map(event => (
-              <tr key={event.id}>
+              <Tr key={event.id}>
                 {/* description */}
-                <td>
+                <Td>
                   <Link href={`/issues/${event.issueId}/?eventId=${event.id}`}>
                     <a>{dayjs(event.createdAt).format('YYYY-MM-DD HH:mm:ss')}</a>
                   </Link>
                   <div>{event.type}: {renderStringOrJson(event.detail.message ?? event.detail)}</div>
-                </td>
+                </Td>
                 {/* appType */}
-                <td>{event.appType}</td>
+                <Td>{event.appType}</Td>
                 {/* appVersion */}
-                <td>{event.appVersion}</td>
+                <Td>{event.appVersion}</Td>
                 {/* category */}
-                <td>{event.category}</td>
+                <Td>{event.category}</Td>
                 {/* releaseStage */}
-                <td>{event.releaseStage}</td>
+                <Td>{event.releaseStage}</Td>
                 {/* user */}
-                <td>{renderStringOrJson(event.user)}</td>
+                <Td>{renderStringOrJson(event.user)}</Td>
                 {/* sdk */}
-                <td>{renderStringOrJson(event.sdk)}</td>
+                <Td>{renderStringOrJson(event.sdk)}</Td>
                 {/* device */}
-                <td>{renderStringOrJson(event.device)}</td>
+                <Td>{renderStringOrJson(event.device)}</Td>
                 {/* metadata */}
-                <td>{renderStringOrJson(event.metadata)}</td>
-              </tr>
+                <Td>{renderStringOrJson(event.metadata)}</Td>
+              </Tr>
             ))
           }
-        </tbody>
-      </table>
-    </div>
+        </Tbody>
+      </Table>
+    </TableContainer>
   )
 }