feat: prepare project for cozy-ui migration (#157)

* feat: prepare project for cozy-ui migration

Build Configuration
- Add Stylus support via @rsbuild/plugin-stylus
- Add SVGR support via @rsbuild/plugin-svgr
- Update rsbuild.config.ts with custom configuration
- Add historyApiFallback for SPA routing

ESLint Configuration
- Create .eslintrc.json with react-app configuration
- Remove eslintConfig from package.json

CSS to Stylus Migration
Convert all 5 CSS files to Stylus (.styl) format:
  - src/App.css to src/App.styl
  - src/index.css to src/index.styl
  - src/components/Calendar/Calendar.css to src/components/Calendar/Calendar.styl
  - src/components/Calendar/CustomCalendar.css to src/components/Calendar/CustomCalendar.styl
  - src/components/Menubar/Menubar.css to src/components/Menubar/Menubar.styl
- Update all imports from .css to .styl
- Preserve all styling rules and values

MUI Styling Cleanup
- Replace all MUI sx props with standard style props across 15+ components
- Convert MUI spacing units (mr: 2 to marginRight: 16px)
- Convert MUI shorthand props (p: 2 to padding: 16px, mb: 1 to marginBottom: 8px)
- Remove MUI-specific syntax (&.Mui-checked selectors)
- Maintain exact visual appearance

FullCalendar Fixes
- Comment out problematic CSS rule in CustomCalendar.styl
- Fix display issues with timegrid slot labels

Files Modified
- Config: rsbuild.config.ts, .eslintrc.json, package.json
- Styling: 5 CSS to Stylus conversions, 15+ component sx to style updates
- Components: All components using MUI sx props updated

Development Workflow
- Continue using existing development commands
- Stylus files are now the source of truth for styling
- MUI components work with standard style props
- ESLint uses familiar react-app rules

Dependencies Added
- @rsbuild/plugin-stylus
- @rsbuild/plugin-svgr
This commit is contained in:
lenhanphung
2025-10-01 22:31:18 +07:00
committed by GitHub
parent 17c6bf7bce
commit 3870bceb6d
25 changed files with 1682 additions and 661 deletions
+8 -5
View File
@@ -4,7 +4,7 @@ import AppsIcon from "@mui/icons-material/Apps";
import RefreshIcon from "@mui/icons-material/Refresh";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import "./Menubar.css";
import "./Menubar.styl";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { stringToColor } from "../../features/Events/EventDisplay";
import {
@@ -141,7 +141,10 @@ export function Menubar({
</IconButton>
</div>
<div className="menu-items">
<FormControl size="small" sx={{ minWidth: 120, mr: 2 }}>
<FormControl
size="small"
style={{ minWidth: 120, marginRight: 16 }}
>
<Select
value={currentView}
onChange={(e) => handleViewChange(e.target.value)}
@@ -155,15 +158,15 @@ export function Menubar({
</div>
<div className="menu-items">
{applist.length > 0 && (
<IconButton onClick={handleOpen} sx={{ mr: 1 }}>
<IconButton onClick={handleOpen} style={{ marginRight: 8 }}>
<AppsIcon />
</IconButton>
)}
</div>
<div className="menu-items">
<Avatar
sx={{
bgcolor: stringToColor(
style={{
backgroundColor: stringToColor(
user && user.family_name
? user.family_name
: user && user.email