Skip to content

feat(esx_garage): modernize NUI with React + TypeScript#86

Merged
Kr3mu merged 2 commits intoesx-framework:new-garagesfrom
simpleC0de:new-garages
Oct 20, 2025
Merged

feat(esx_garage): modernize NUI with React + TypeScript#86
Kr3mu merged 2 commits intoesx-framework:new-garagesfrom
simpleC0de:new-garages

Conversation

@simpleC0de
Copy link

Description

Complete modernization of the garage NUI from Vue 3 to React 19 with TypeScript. Implements ESX design guidelines including Roboto font, #FB9B04 brand color, standardized border-radius (8px/12px/16px), and cubic-bezier transitions. The UI is fully functional with Zustand
state management, pre-built dist files, and a Lua client skeleton ready for backend integration.


Motivation

The existing Vue 3 implementation needed to be replaced with a modern, type-safe React solution that fully complies with ESX design standards. This change provides better maintainability, type safety through TypeScript, and ensures visual consistency with other ESX addons.


Implementation Details

  • React 19 + TypeScript: Modern component architecture with strict type safety
  • Zustand: Lightweight state management for garage and vehicle data
  • Styled Components: CSS-in-JS with ESX theme integration
  • ESX Design Compliance:
    • Roboto font family (Light 300, Regular 400, Medium 500, Bold 700)
    • #FB9B04 brand color with ESX grayscale palette
    • Standard border-radius values (sm: 8px, md: 12px, lg: 16px)
    • Cubic-bezier transitions (160ms/260ms)
  • FiveM CEF Compatible: Removed backdrop-filter, using rgba() backgrounds
  • Pre-built: Includes /web/dist with compiled production build
  • Lua Skeleton: Client callbacks structure ready for implementation

Usage Example

-- Example NUI callback usage (to be implemented in client/main.lua)
RegisterNUICallback('garage:retrieveVehicle', function(data, cb)
    local vehicleId = data.vehicleId
    -- Implementation pending
    cb({ success = true })
end)

RegisterNUICallback('garage:storeVehicle', function(data, cb)
    local vehicleId = data.vehicleId
    -- Implementation pending
    cb({ success = true })
end)

---
PR Checklist

- My commit messages and PR title follow the https://www.conventionalcommits.org/en/v1.0.0/ standard.
- My changes have been tested locally and function as expected.
- My PR does not introduce any breaking changes.
- I have provided a clear explanation of what my PR does, including the reasoning behind the changes and any relevant context.

 - Replace Vue 3 UI with React 19 + TypeScript + Zustand
 - Implement ESX design guidelines (Roboto font, #FB9B04 brand)
 - Add NUI callback structure for kr3mu integration
 - Remove backdrop-filter for FiveM CEF compatibility
 - Use ESX standard shadows, border-radius, transitions
- Use root font-size approach for automatic rem scaling
- Remove deprecated react-query v3, keep @tanstack/react-query v5
- Scale Framer Motion animation offset for perfect centering
- All components use clean rem values without calc()

Technical implementation:
- ScaleProvider sets document.documentElement.fontSize
- All rem values scale automatically with viewport
-Animation offsets multiply by scale factor
- Industry-standard approach for maintainability"
@Kr3mu Kr3mu merged commit c418761 into esx-framework:new-garages Oct 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants