[migrate] replace built-in Count Down & Zodiac Bar components with Idea-React 2.2

Author: TechQuery

components/Activity/Hackathon/AgendaCountdown.module.less

@@ -20,7 +20,7 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.8rem;
 
-  li {
+  .item {
     gap: 0.7rem;
     box-shadow:
       inset 0 0 0 1px rgba(255, 255, 255, 0.03),

components/Activity/Hackathon/AgendaCountdown.tsx

@@ -1,10 +1,10 @@
 import { TableCellValue } from 'mobx-lark';
 import { observer } from 'mobx-react';
 import { FC, useContext, useState } from 'react';
+import { Countdown, TimeUnit } from 'idea-react';
 
 import { Agenda } from '../../../models/Hackathon';
 import { I18nContext } from '../../../models/Translation';
-import { Countdown, TimeUnit } from '../../Base/Countdown';
 import styles from './AgendaCountdown.module.less';
 import { agendaTypeLabelOf, resolveCountdownState } from './utility';
 
@@ -15,7 +15,7 @@ export interface AgendaCountdownProps {
   units: TimeUnit[];
 }
 
-export const AgendaCountdown: FC<AgendaCountdownProps> = observer(
+const AgendaCountdown: FC<AgendaCountdownProps> = observer(
   ({ agendaItems, endTime, startTime, units }) => {
     const { t } = useContext(I18nContext);
     const [referenceTime, setReferenceTime] = useState(Date.now());
@@ -38,6 +38,7 @@ export const AgendaCountdown: FC<AgendaCountdownProps> = observer(
 
         <Countdown
           className={styles.grid}
+          itemClassName={`${styles.item} d-flex flex-column align-items-center justify-content-center`}
           endTime={countdownTo}
           onEnd={() => setReferenceTime(Date.now())}
           units={units}
@@ -46,3 +47,4 @@ export const AgendaCountdown: FC<AgendaCountdownProps> = observer(
     );
   },
 );
+export default AgendaCountdown;

components/Activity/Hackathon/Hero.tsx

@@ -1,13 +1,15 @@
 import { TableCellValue } from 'mobx-lark';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
+import { TimeUnit } from 'idea-react';
 
 import { Agenda } from '../../../models/Hackathon';
 import { LarkImage } from '../../LarkImage';
-import { AgendaCountdown } from './AgendaCountdown';
-import { TimeUnit } from '../../Base/Countdown';
 import styles from './Hero.module.less';
 
+const AgendaCountdown = dynamic(() => import('./AgendaCountdown'), { ssr: false });
+
 export type HackathonHeroNavItem = Record<'label' | 'href', string>;
 
 export interface HackathonHeroAction extends HackathonHeroNavItem {

components/Base/Countdown.tsx

@@ -21,13 +21,13 @@
     "core-js": "^3.49.0",
     "echarts-jsx": "^0.6.0",
     "file-type": "^22.0.1",
-    "idea-react": "^2.0.0-rc.13",
+    "idea-react": "^2.2.0",
     "jsonwebtoken": "^9.0.3",
     "koa": "^3.2.0",
     "koa-jwt": "^4.0.4",
     "koajax": "^3.3.0",
     "license-filter": "^0.2.5",
-    "marked": "^18.0.2",
+    "marked": "^18.0.3",
     "mime": "^4.1.0",
     "mobx": "^6.15.0",
     "mobx-github": "^0.6.2",
@@ -49,7 +49,7 @@
     "react-typed-component": "^1.0.6",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
-    "web-utility": "^4.6.5",
+    "web-utility": "^4.6.6",
     "yaml": "^2.8.3"
   },
   "devDependencies": {
@@ -69,7 +69,7 @@
     "@types/nodemailer": "^8.0.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.2.1",
+    "eslint": "^10.3.0",
     "eslint-config-next": "^16.2.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",

components/Base/ZodiacBar.tsx

@@ -3,8 +3,8 @@ import { InferGetServerSidePropsType } from 'next';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Container } from 'react-bootstrap';
+import { ZodiacBar } from 'idea-react';
 
-import { ZodiacBar } from '../../components/Base/ZodiacBar';
 import { PageHead } from '../../components/Layout/PageHead';
 import { OrganizationModel } from '../../models/Organization';
 import { I18nContext } from '../../models/Translation';

package.json

@@ -2,6 +2,7 @@ import { TableCellLocation, TableFormView } from 'mobx-lark';
 import { observer } from 'mobx-react';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
+import { TimeUnit } from 'idea-react';
 
 import {
   HackathonActionHub,
@@ -25,7 +26,6 @@ import {
   heroNavigation,
   RequiredTableKeys,
 } from '../../components/Activity/Hackathon/constant';
-import { TimeUnit } from '../../components/Base/Countdown';
 import { HackathonFAQ } from '../../components/Activity/Hackathon/FAQ';
 import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
 import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';