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
+93
View File
@@ -0,0 +1,93 @@
/* Basic reset */
*
margin 0
padding 0
box-sizing border-box
.twake
font-family "Cal Sans"
font-weight 400
font-size 28.07px
line-height 100%
letter-spacing 0%
text-align center
vertical-align middle
padding 0.2rem
.calendar-text
font-family "Cal Sans"
padding 0.2rem
font-weight 400
font-size 28.07px
line-height 100%
letter-spacing 0%
text-align center
vertical-align middle
background linear-gradient(180deg, #ffb73d, #f26c32)
-webkit-background-clip text
-webkit-text-fill-color transparent
/* Optional for broader support */
background-clip text
color transparent
/* Menubar styles */
.menubar
display flex
justify-content space-between
align-items center
padding 0.5rem
width 100%
z-index 1000
height 80px
background-color #fff
.menubar-item
display flex
align-items center
width calc(330px - 0.5rem)
.logo
padding 0.5rem 1rem
font-size 1.5rem
.nav-month
padding-right 2px
padding-left 2px
gap 38px
.day-selector
font-weight 100
font-size small
.search-bar
width 600
height 43.88999938964844
top 18px
left 887px
.app-grid
display grid
grid-template-columns repeat(3, 1fr)
gap 16px
padding 16px
justify-items center
align-items center
.app-grid img
width 48px
height 48px
.app-grid p
margin-top 6px
font-size 14px
text-align center
.left-menu
display flex
align-items center
justify-content flex-start
.right-menu
display flex
justify-content flex-end
align-items center