From 22910e7a6ca4297bc2a1c21bd3c7853ae51e6b03 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Sat, 7 Nov 2026 06:43:07 +0800 Subject: [PATCH] feat: migrate Bootstrap ecosystem to Idea React 3 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .github/copilot-instructions.md | 24 +- README.md | 4 +- components/Activity/Card.tsx | 27 +- components/Activity/Hackathon/ActionHub.tsx | 26 +- components/Activity/Hackathon/Awards.tsx | 20 +- components/Activity/Hackathon/FAQ.tsx | 6 +- components/Activity/Hackathon/Hero.tsx | 42 +- components/Activity/Hackathon/Overview.tsx | 12 +- .../Activity/Hackathon/Participants.tsx | 10 +- components/Activity/Hackathon/Resources.tsx | 30 +- components/Activity/Hackathon/Schedule.tsx | 34 +- components/Activity/Hackathon/TeamMember.tsx | 7 +- components/Activity/HeroCarousel.tsx | 70 +- components/Activity/ProductCard.tsx | 29 +- components/Finance/FundCard.tsx | 38 +- components/Footer.tsx | 63 +- components/Git/Card.tsx | 37 +- components/Git/Issue/Card.tsx | 38 +- components/Git/Issue/IssueModule.tsx | 38 +- components/Git/Logo.tsx | 2 +- components/LarkImage.tsx | 2 +- components/Layout/CardPage.tsx | 55 +- components/Layout/ContentTree.tsx | 6 +- components/Layout/MDXLayout.tsx | 6 +- components/Layout/SectionTitle.tsx | 6 +- components/Navigator/MainNavigator.tsx | 158 +- components/Navigator/SearchBar.tsx | 14 +- components/Organization/Card.tsx | 49 +- components/Organization/Landscape.tsx | 29 +- components/PageContent/index.tsx | 6 +- components/PersonCard.tsx | 20 +- components/open-library/BookCard.tsx | 49 +- components/open-library/Borrow.tsx | 10 +- components/open-library/FeaturedBooks.tsx | 29 +- components/open-library/HeroSection.tsx | 27 +- components/open-library/HowItWorks.tsx | 39 +- components/open-library/Navbar.tsx | 91 +- components/open-library/Review.tsx | 23 +- package.json | 29 +- pages/NGO/[year]/index.tsx | 10 +- pages/NGO/[year]/landscape.tsx | 6 +- pages/NGO/index.tsx | 7 +- pages/_app.tsx | 6 +- pages/_document.tsx | 10 +- pages/bounty.tsx | 20 +- pages/finance/index.tsx | 75 +- pages/hackathon/[id]/team/[tid].tsx | 96 +- pages/index.tsx | 47 +- pages/issue.tsx | 20 +- pages/license-filter.tsx | 35 +- pages/open-library/book/[id].tsx | 60 +- pages/open-library/books/index.tsx | 14 +- pages/open-library/how-to-borrow.tsx | 71 +- pages/open-library/index.tsx | 48 +- pages/project.tsx | 7 +- pages/search/[model]/index.tsx | 20 +- pages/signature.tsx | 8 +- pages/volunteer.tsx | 8 +- .../{next@16.4.3.patch => next@16.4.5.patch} | 0 pnpm-lock.yaml | 1492 +++++++---------- pnpm-workspace.yaml | 6 +- styles/HackathonTeam.module.less | 6 +- translation/en-US.ts | 2 + translation/zh-CN.ts | 2 + translation/zh-TW.ts | 2 + 65 files changed, 1640 insertions(+), 1643 deletions(-) rename patches/{next@16.4.3.patch => next@16.4.5.patch} (100%) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 165e2cc..db662df 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,6 +1,6 @@ # Open Source Bazaar - GitHub Copilot Instructions -Open Source Bazaar is an open-source project showcase platform built with Next.js 15, TypeScript, React Bootstrap, and MobX. It includes license filters, Wiki knowledge base, volunteer showcase, Lark integration, and other features. +Open Source Bazaar is an open-source project showcase platform built with Next.js, TypeScript, Idea React 3 (Bootstrap 6), and MobX. It includes license filters, Wiki knowledge base, volunteer showcase, Lark integration, and other features. Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. @@ -48,7 +48,7 @@ After making ANY changes, ALWAYS validate by running through these scenarios: - Volunteer page: http://localhost:3000/volunteer (contributor showcase) - Projects: http://localhost:3000/project (GitHub repository listings) 4. **Test API endpoints**: Verify GitHub API integrations work -5. **Check responsive design**: Test mobile/desktop layouts with React Bootstrap components +5. **Check responsive design**: Test mobile/desktop layouts with Idea React components 6. **Verify i18n functionality**: Check Chinese/English language switching works ### Pre-commit Validation @@ -81,7 +81,7 @@ npm test # Runs linting + staged file checks ### Key Dependencies - **Next.js 15** - React framework -- **React Bootstrap 2.10** - UI component library +- **Idea React 3 / Bootstrap 6** - UI component library and CSS framework - **MobX 6.13** - State management - **MobX-GitHub 0.4** - GitHub API integration - **MobX-i18n 0.7** - Internationalization @@ -96,7 +96,7 @@ Based on comprehensive PR review analysis, follow these critical development sta #### Component and Import Standards -- **ALWAYS use React Bootstrap components** instead of custom HTML elements +- **Prefer Idea React components** for Bootstrap UI patterns instead of recreating them with custom elements - Use utilities from established libraries: 'web-utility' - Import `'./Base'` in model files for proper configuration @@ -110,14 +110,20 @@ Based on comprehensive PR review analysis, follow these critical development sta #### Component Usage Patterns ```typescript -// ✅ Correct - use React Bootstrap components -import { Button, Badge, Breadcrumb, Card, Container } from 'react-bootstrap'; +// ✅ Correct - use Idea React components +import { Badge, Button, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Container } from 'idea-react'; - -{label} +{label} + + + + {t('open_source_bazaar')} + + // ❌ Wrong - custom HTML elements Edit @@ -242,7 +248,7 @@ pnpm test # Run tests (lint-staged + lint, 15s) #### Component and Styling Issues -- **Custom HTML not working**: Replace with React Bootstrap components +- **Bootstrap UI not working**: Prefer Idea React components and Bootstrap 6 utilities - **Translation not showing**: Ensure all text uses `t()` function and keys exist in all language files - **GitHub API errors**: Verify you're using configured `githubClient` from `models/Base.ts` diff --git a/README.md b/README.md index 2060f7a..c802806 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@ ## 技术栈 -- Language: [TypeScript v5][2] +- Language: [TypeScript v6][2] - Component engine: [Nextjs v16][3] -- Component suite: [Bootstrap v5][4] +- Component suite: [Bootstrap v6][4] - CI / CD: GitHub [Actions][10] + [Vercel][11] ## 开始 diff --git a/components/Activity/Card.tsx b/components/Activity/Card.tsx index ee6b122..d5925e2 100644 --- a/components/Activity/Card.tsx +++ b/components/Activity/Card.tsx @@ -1,12 +1,11 @@ -import { TimeDistance } from 'idea-react'; +import { Card, CardBody, CardText, CardTitle, Col, Row, TimeDistance } from 'idea-react'; import { TableCellLocation } from 'mobx-lark'; +import { BadgeBar } from 'mobx-restful-table'; import type { FC } from 'react'; -import { Card, Col, Row } from 'react-bootstrap'; import { type Activity, ActivityModel } from '../../models/Activity'; -import { LarkImage } from '../LarkImage'; import { TimeOption } from '../data'; -import { BadgeBar } from 'mobx-restful-table'; +import { LarkImage } from '../LarkImage'; export interface ActivityCardProps extends Activity { className?: string; @@ -36,30 +35,30 @@ export const ActivityCard: FC = ({ /> - - + + {name as string} - + - + - {city as string} {(location as TableCellLocation)?.full_address} - + - + ({ text, @@ -67,10 +66,10 @@ export const ActivityCard: FC = ({ }))} /> - + - + ); diff --git a/components/Activity/Hackathon/ActionHub.tsx b/components/Activity/Hackathon/ActionHub.tsx index 2e1e5a1..ee71fe4 100644 --- a/components/Activity/Hackathon/ActionHub.tsx +++ b/components/Activity/Hackathon/ActionHub.tsx @@ -1,8 +1,8 @@ +import { Col, Container, Row } from 'idea-react'; import type { FC, PropsWithChildren, ReactNode } from 'react'; -import { Col, Container, Row } from 'react-bootstrap'; -import { HackathonHeroAction } from './Hero'; import styles from './ActionHub.module.less'; +import { HackathonHeroAction } from './Hero'; export interface HackathonActionHubEntry { count: number; @@ -40,17 +40,17 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ {step} · {entry.eyebrow} -

{entry.title}

+

{entry.title}

{entry.description}

-
+
{entry.count} {entry.eyebrow}
-