feat: implement RouterProvider, add draft mode mechanisms, update storage keys, and refactor module transformation logic.

apps/showcase/src/App.tsx

@@ -1,5 +1,5 @@
-import { useState, Suspense } from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useState, Suspense, useMemo } from 'react';
+import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { ThemeProvider, DensityType } from '@repo/ui/provider';
 import { AgGridProvider } from '@repo/ui/components';
 import { useThemeStore } from './core/stores/theme.store';
@@ -21,28 +21,32 @@ export default function App() {
   const colorScheme = useThemeStore((s) => s.colorScheme);
   const [density, setDensity] = useState<DensityType>('compact');
 
+  const router = useMemo(() => createBrowserRouter([
+    {
+      path: "/",
+      element: <ShowcaseLayout density={density} setDensity={setDensity} />,
+      children: [
+        { index: true, element: <Navigate to="/ui-components" replace /> },
+        { path: "ui-components", element: <UiComponentsPage /> },
+        { path: "forms", element: <FormsPage /> },
+        { path: "storage", element: <StoragePage /> },
+        { path: "events", element: <EventsPage /> },
+        { path: "hardware", element: <HardwarePage /> },
+        { path: "rbac", element: <RbacPage /> },
+        { path: "auth", element: <AuthPage /> },
+        { path: "action-tools", element: <ActionToolsPage /> },
+        { path: "ag-grid", element: <AgGridPage /> },
+      ]
+    },
+    { path: "/shell-demo", element: <ShellDemoPage /> }
+  ]), [density]);
+
   return (
     <ThemeProvider colorScheme={colorScheme} density={density}>
       <AgGridProvider bypassLicense>
-        <BrowserRouter>
-          <Suspense fallback={<div>Loading...</div>}>
-            <Routes>
-              <Route path="/" element={<ShowcaseLayout density={density} setDensity={setDensity} />}>
-                <Route index element={<Navigate to="/ui-components" replace />} />
-                <Route path="ui-components" element={<UiComponentsPage />} />
-                <Route path="forms" element={<FormsPage />} />
-                <Route path="storage" element={<StoragePage />} />
-                <Route path="events" element={<EventsPage />} />
-                <Route path="hardware" element={<HardwarePage />} />
-                <Route path="rbac" element={<RbacPage />} />
-                <Route path="auth" element={<AuthPage />} />
-                <Route path="action-tools" element={<ActionToolsPage />} />
-                <Route path="ag-grid" element={<AgGridPage />} />
-              </Route>
-              <Route path="/shell-demo" element={<ShellDemoPage />} />
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
+        <Suspense fallback={<div>Loading...</div>}>
+          <RouterProvider router={router} />
+        </Suspense>
       </AgGridProvider>
     </ThemeProvider>
   );

apps/web/src/apps/index.tsx

@@ -1,14 +1,26 @@
 import { lazy, Suspense, useEffect } from 'react';
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { ThemeProvider } from '@repo/ui/provider';
 import { NotFound, Forbidden, Maintenance, ComingSoon, AgGridProvider } from '@repo/ui/components';
 import { LoadingScreen } from '../core/components/loading-screen';
 import { useThemeStore } from '../core/stores/theme.store';
 import { initializeAndPurgeHistoryBackground } from './modules/layouts/hooks/useHistoryTracker';
+import { appStorage, AppStorageKey } from '../core/storage/local';
 
 const AuthModule = lazy(() => import('./auth'));
 const AppModule = lazy(() => import('./modules'));
 
+const router = createBrowserRouter([
+  { path: '/auth/*', element: <AuthModule /> },
+  { path: '/app/*', element: <AppModule /> },
+  { path: '/404', element: <NotFound homeUrl="/app" /> },
+  { path: '/403', element: <Forbidden homeUrl="/app" /> },
+  { path: '/maintenance', element: <Maintenance /> },
+  { path: '/coming-soon', element: <ComingSoon /> },
+  { path: '/', element: <Navigate to="/app" /> },
+  { path: '*', element: <Navigate to="/404" /> },
+]);
+
 export default function App() {
   const colorScheme = useThemeStore((s) => s.colorScheme);
 
@@ -16,25 +28,15 @@ export default function App() {
     // Execution runs purely in the background (fire and forget)
     // Will not block the initial UI rendering process
     initializeAndPurgeHistoryBackground();
+    // appStorage.setItem(AppStorageKey.USER_ID, 'firman');
   }, []);
 
   return (
     <ThemeProvider colorScheme={colorScheme} density={'compact'}>
       <AgGridProvider bypassLicense>
-        <BrowserRouter>
-          <Suspense fallback={<LoadingScreen />}>
-            <Routes>
-              <Route path="/auth/*" element={<AuthModule />} />
-              <Route path="/app/*" element={<AppModule />} />
-              <Route path="/404" element={<NotFound homeUrl="/app" />} />
-              <Route path="/403" element={<Forbidden homeUrl="/app" />} />
-              <Route path="/maintenance" element={<Maintenance />} />
-              <Route path="/coming-soon" element={<ComingSoon />} />
-              <Route path="/" element={<Navigate to="/app" />} />
-              <Route path="*" element={<Navigate to="/404" />} />
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
+        <Suspense fallback={<LoadingScreen />}>
+          <RouterProvider router={router} />
+        </Suspense>
       </AgGridProvider>
     </ThemeProvider>
   );

apps/web/src/core/storage/local/index.ts

@@ -1,16 +1,17 @@
 import { createLocalStorage, createIndexedDB } from '@repo/core-storage';
 
 export const AppStorageKey = {
-  USER_PROFILE: 'user_profile',
   LANGUAGE: 'app_language',
   THEME: 'app_theme',
   ACCESS_TOKEN: 'access_token',
   REFRESH_TOKEN: 'refresh_token',
+  USER_ID: 'u_id',
 } as const;
 
 export type AppStorageKeyValue = (typeof AppStorageKey)[keyof typeof AppStorageKey];
 
 export const AppDatabaseKey = {
+  USER_PROFILE: 'user_profile',
   OFFLINE_DRAFT: 'offline_draft',
   SYSTEM_SETTINGS: 'system_settings',
   HISTORY_PAGE: 'history_page',
@@ -20,19 +21,17 @@ export const AppDatabaseKey = {
 export type AppDatabaseKeyValue = (typeof AppDatabaseKey)[keyof typeof AppDatabaseKey];
 
 export const APP_STORAGE_ENCRYPTED_KEYS = new Set<AppStorageKeyValue>([
-  AppStorageKey.USER_PROFILE,
+  AppStorageKey.USER_ID,
   AppStorageKey.ACCESS_TOKEN,
   AppStorageKey.REFRESH_TOKEN,
 ]);
 
-export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([
-  AppStorageKey.LANGUAGE,
-  AppStorageKey.THEME,
-]);
+export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([AppStorageKey.LANGUAGE, AppStorageKey.THEME]);
 
 export const APP_DATABASE_ENCRYPTED_KEYS = new Set<AppDatabaseKeyValue>([]);
 
 export const APP_DATABASE_PLAIN_KEYS = new Set<AppDatabaseKeyValue>([
+  AppDatabaseKey.USER_PROFILE,
   AppDatabaseKey.OFFLINE_DRAFT,
   AppDatabaseKey.SYSTEM_SETTINGS,
   AppDatabaseKey.HISTORY_PAGE,