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

src/components/Calendar/CalendarSearch.tsx

@@ -44,18 +44,18 @@ function CalendarItem({
       display="flex"
       alignItems="center"
       justifyContent="space-between"
-      sx={{
-        borderRadius: 2,
+      style={{
+        borderRadius: 8,
         border: "1px solid #e5e7eb",
-        p: 1,
-        mb: 1,
+        padding: 8,
+        marginBottom: 8,
       }}
     >
       <Box display="flex" alignItems="center" gap={2}>
         <Avatar
           src={cal.owner.avatarUrl}
           alt={cal.owner.email}
-          sx={{
+          style={{
             border: `2px solid ${cal.cal["apple:color"] ?? "transparent"}`,
             boxShadow: cal.cal["apple:color"]
               ? `0 0 0 2px ${cal.cal["apple:color"]}`
@@ -228,7 +228,7 @@ export default function CalendarSearch({
       }}
     >
       <Box
-        sx={{
+        style={{
           position: "absolute",
           left: "50%",
           top: "20%",
@@ -238,16 +238,16 @@ export default function CalendarSearch({
         }}
       >
         <Card
-          sx={{
-            p: 2,
-            borderRadius: 3,
-            boxShadow: 6,
+          style={{
+            padding: 16,
+            borderRadius: 12,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
             display: "flex",
             flexDirection: "column",
             maxHeight: "80vh",
           }}
         >
-          <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+          <Box style={{ position: "absolute", top: 8, right: 8 }}>
             <IconButton
               size="small"
               onClick={() => onClose({}, "backdropClick")}
@@ -256,8 +256,11 @@ export default function CalendarSearch({
             </IconButton>
           </Box>
 
-          <CardHeader title="Browse other calendars" sx={{ pb: 0 }} />
-          <CardContent sx={{ flex: 1, overflow: "auto" }}>
+          <CardHeader
+            title="Browse other calendars"
+            style={{ paddingBottom: 0 }}
+          />
+          <CardContent style={{ flex: 1, overflow: "auto" }}>
             <PeopleSearch
               objectTypes={["user"]}
               selectedUsers={selectedUsers}
@@ -319,7 +322,7 @@ export default function CalendarSearch({
             />
           </CardContent>
 
-          <CardActions sx={{ justifyContent: "flex-end", gap: 1 }}>
+          <CardActions style={{ justifyContent: "flex-end", gap: 8 }}>
             <Button
               variant="outlined"
               onClick={() => onClose({}, "backdropClick")}