[migrate] upgrade to Next.js 15, ESLint 9 & other latest Upstream packages

[add] Prettier CSS plugins

Signed-off-by: South Drifted <shiy2008@gmail.com>

Author: TechQuery

.eslintrc.json

@@ -20,7 +20,7 @@ Open-source [Hackathon][1] Platform with **Git-based Cloud Development Environme
 ## Technology stack
 
 - Language: [TypeScript v5][5]
-- Component engine: [Next.js v14][6]
+- Component engine: [Next.js v15][6]
 - Component suite: [Bootstrap v5][7]
 - State management: [MobX v6][8]
 - PWA framework: [Workbox v6][9]

README.md

@@ -68,7 +68,7 @@ export class ActivityEditor extends Component<ActivityEditorProps> {
         uri: bannerUrl,
       };
     });
-    // @ts-ignore
+    // @ts-expect-error Type compatibility issue
     await activityStore.updateOne(data, name);
 
     if (!name && confirm(t('create_work_success'))) {
@@ -199,25 +199,25 @@ export class ActivityEditor extends Component<ActivityEditorProps> {
         </Form.Group>
 
         <DateTimeInput
+          key="enrollment"
           label={t('enrollment')}
           name="enrollment"
-          key="enrollment"
           startAt={enrollmentStartedAt}
           endAt={enrollmentEndedAt}
           required
         />
         <DateTimeInput
+          key="event"
           label={t('activity_time')}
           name="event"
-          key="event"
           startAt={eventStartedAt}
           endAt={eventEndedAt}
           required
         />
         <DateTimeInput
+          key="judge"
           label={t('judge_time')}
           name="judge"
-          key="judge"
           startAt={judgeStartedAt}
           endAt={judgeEndedAt}
           required

components/Activity/ActivityEditor.tsx

@@ -94,7 +94,7 @@ export default class EnrollmentStatisticCharts extends Component<EnrollmentStati
           {Object.entries(answers).map(
             ([title, answers]) =>
               !isEmpty(answers) && (
-                <Col as="section" key={title}>
+                <Col key={title} as="section">
                   <SVGCharts>
                     <Title>{title}</Title>
                     <PieSeries

components/Activity/EnrollmentStatistic.tsx

@@ -13,23 +13,23 @@ export interface QuestionnaireFormProps {
 export class QuestionnaireForm extends Component<QuestionnaireFormProps> {
   renderField = ({ options, multiple, title, ...props }: Question) =>
     options ? (
-      <Form.Group as="li" className="mb-3" key={title}>
+      <Form.Group key={title} as="li" className="mb-3">
         {title}
         <Row xs={1} sm={3} lg={4} className="mt-2">
           {options.map(value => (
             <Form.Check
+              key={value}
               type={multiple ? 'checkbox' : 'radio'}
               label={value}
               name={title}
               value={value}
               id={value}
-              key={value}
             />
           ))}
         </Row>
       </Form.Group>
     ) : (
-      <Form.Group as="li" className="mb-3 mt-2" key={title} controlId={title}>
+      <Form.Group key={title} as="li" className="mb-3 mt-2" controlId={title}>
         {title}
         <Row>
           <Form.Label />

components/Activity/QuestionnairePreview.tsx

@@ -54,7 +54,7 @@ export const GitCard: FC<GitCardProps> = observer(
         <Row as="ul" className="list-unstyled g-4" xs={4}>
           {languages &&
             Object.keys(languages).map(language => (
-              <Col as="li" key={language}>
+              <Col key={language} as="li">
                 <GitLogo name={language} />
               </Col>
             ))}

components/Git/Card.tsx

@@ -22,7 +22,7 @@ export const CardList: FC<XScrollListProps<GitTemplate>> = ({
         description,
         name = html_url.replace('https://github.com/', ''),
       }) => (
-        <Col as="li" key={id}>
+        <Col key={id} as="li">
           <Card className="shadow-sm">
             <Card.Body className="d-flex flex-column gap-3">
               <Card.Title as="h3" className="h5">
@@ -48,7 +48,7 @@ export const CardList: FC<XScrollListProps<GitTemplate>> = ({
               <Row as="ul" className="list-unstyled g-4" xs={4}>
                 {languages &&
                   Object.keys(languages).map(language => (
-                    <Col as="li" key={language}>
+                    <Col key={language} as="li">
                       <GitLogo name={language} />
                     </Col>
                   ))}

components/Git/CardList.tsx

@@ -47,7 +47,7 @@ export const GitTeamCard: FC<GitTeamCardProps> = observer(
         </nav>
         <Row as="ul" className="list-unstyled g-4" xs={4}>
           {languages.map(language => (
-            <Col as="li" key={language}>
+            <Col key={language} as="li">
               <GitLogo name={language} />
             </Col>
           ))}

components/Git/GitTeamCard.tsx

@@ -17,7 +17,7 @@ export const GitListLayout: FC<GitListLayoutProps> = ({
 }) => (
   <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
     {defaultData?.map(item => (
-      <Col as="li" key={item.id}>
+      <Col key={item.id} as="li">
         <GitCard
           className="h-100 shadow-sm"
           {...item}

components/Git/List.tsx

@@ -17,7 +17,7 @@ export const TeamGitListLayout: FC<TeamGitListLayoutProps> = ({
 }) => (
   <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
     {defaultData?.map(item => (
-      <Col as="li" key={item.id}>
+      <Col key={item.id} as="li">
         <GitTeamCard
           className="h-100 shadow-sm"
           {...item}