[core] Add LocalizationProvider (#4620)

mui · Feb 12, 2025 · ea0e2c6 · ea0e2c6
1 parent cc00ace
commit ea0e2c6
Show file tree

Hide file tree

Showing 48 changed files with 914 additions and 376 deletions.
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.js b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { AppProvider } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
@@ -31,17 +31,15 @@ export default function AccountCustomLocaleText() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account
-          localeText={{
-            signInLabel: 'लॉग इन',
-            signOutLabel: 'लॉग आउट',
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account
+        localeText={{
+          accountSignInLabel: 'लॉग इन',
+          accountSignOutLabel: 'लॉग आउट',
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  AuthenticationContext,
-  Session,
-  SessionContext,
-} from '@toolpad/core/AppProvider';
+import { AppProvider, type Session } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
@@ -35,17 +31,15 @@ export default function AccountCustomLocaleText() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account
-          localeText={{
-            signInLabel: 'लॉग इन',
-            signOutLabel: 'लॉग आउट',
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account
+        localeText={{
+          accountSignInLabel: 'लॉग इन',
+          accountSignOutLabel: 'लॉग आउट',
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx.preview b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx.preview
@@ -1,6 +1,6 @@
 <Account
   localeText={{
-    signInLabel: 'लॉग इन',
-    signOutLabel: 'लॉग आउट',
+    accountSignInLabel: 'लॉग इन',
+    accountSignOutLabel: 'लॉग आउट',
   }}
 />
diff --git a/docs/data/toolpad/core/components/account/AccountCustomSlotProps.js b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Logout from '@mui/icons-material/Logout';
 import { Account } from '@toolpad/core/Account';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { AppProvider } from '@toolpad/core/AppProvider';
 
 const demoSession = {
   user: {
@@ -32,36 +32,34 @@ export default function AccountCustomSlotProps() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account
-          slotProps={{
-            signInButton: {
-              color: 'success',
-            },
-            signOutButton: {
-              color: 'success',
-              startIcon: <Logout />,
-            },
-            preview: {
-              variant: 'expanded',
-              slotProps: {
-                avatarIconButton: {
-                  sx: {
-                    width: 'fit-content',
-                    margin: 'auto',
-                  },
-                },
-                avatar: {
-                  variant: 'rounded',
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account
+        slotProps={{
+          signInButton: {
+            color: 'success',
+          },
+          signOutButton: {
+            color: 'success',
+            startIcon: <Logout />,
+          },
+          preview: {
+            variant: 'expanded',
+            slotProps: {
+              avatarIconButton: {
+                sx: {
+                  width: 'fit-content',
+                  margin: 'auto',
                 },
               },
+              avatar: {
+                variant: 'rounded',
+              },
             },
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+          },
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import Logout from '@mui/icons-material/Logout';
 import { Account } from '@toolpad/core/Account';
-import {
-  AuthenticationContext,
-  SessionContext,
-  Session,
-} from '@toolpad/core/AppProvider';
+import { AppProvider, Session } from '@toolpad/core/AppProvider';
 
 const demoSession = {
   user: {
@@ -36,36 +32,34 @@ export default function AccountCustomSlotProps() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account
-          slotProps={{
-            signInButton: {
-              color: 'success',
-            },
-            signOutButton: {
-              color: 'success',
-              startIcon: <Logout />,
-            },
-            preview: {
-              variant: 'expanded',
-              slotProps: {
-                avatarIconButton: {
-                  sx: {
-                    width: 'fit-content',
-                    margin: 'auto',
-                  },
-                },
-                avatar: {
-                  variant: 'rounded',
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account
+        slotProps={{
+          signInButton: {
+            color: 'success',
+          },
+          signOutButton: {
+            color: 'success',
+            startIcon: <Logout />,
+          },
+          preview: {
+            variant: 'expanded',
+            slotProps: {
+              avatarIconButton: {
+                sx: {
+                  width: 'fit-content',
+                  margin: 'auto',
                 },
               },
+              avatar: {
+                variant: 'rounded',
+              },
             },
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+          },
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountCustomUserDetails.js b/docs/data/toolpad/core/components/account/AccountCustomUserDetails.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Account } from '@toolpad/core/Account';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { AppProvider } from '@toolpad/core/AppProvider';
 import { UserOrg } from '../UserOrg';
 
 const demoSession = {
@@ -30,16 +30,14 @@ export default function AccountCustomUserDetails() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={customSession}>
-        {/* preview-start */}
-        <Account
-          slots={{
-            popoverContent: UserOrg,
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={customSession}>
+      {/* preview-start */}
+      <Account
+        slots={{
+          popoverContent: UserOrg,
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx b/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Account } from '@toolpad/core/Account';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { AppProvider } from '@toolpad/core/AppProvider';
 import { UserOrg, CustomSession } from '../UserOrg';
 
 const demoSession: CustomSession = {
@@ -32,16 +32,14 @@ export default function AccountCustomUserDetails() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={customSession}>
-        {/* preview-start */}
-        <Account
-          slots={{
-            popoverContent: UserOrg,
-          }}
-        />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={customSession}>
+      {/* preview-start */}
+      <Account
+        slots={{
+          popoverContent: UserOrg,
+        }}
+      />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { AppProvider } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
@@ -24,12 +24,10 @@ export default function AccountDemoSignedIn() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  AuthenticationContext,
-  SessionContext,
-  type Session,
-} from '@toolpad/core/AppProvider';
+import { AppProvider, type Session } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
@@ -28,12 +24,10 @@ export default function AccountDemoSignedIn() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        {/* preview-start */}
-        <Account />
-        {/* preview-end */}
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    <AppProvider authentication={authentication} session={session}>
+      {/* preview-start */}
+      <Account />
+      {/* preview-end */}
+    </AppProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedOut.js b/docs/data/toolpad/core/components/account/AccountDemoSignedOut.js
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import {
+  AuthenticationContext,
+  LocalizationProvider,
+  SessionContext,
+} from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
@@ -24,10 +28,14 @@ export default function AccountDemoSignedOut() {
   }, []);
 
   return (
-    <AuthenticationContext.Provider value={authentication}>
-      <SessionContext.Provider value={session}>
-        <Account />
-      </SessionContext.Provider>
-    </AuthenticationContext.Provider>
+    // preview-start
+    <LocalizationProvider>
+      <AuthenticationContext.Provider value={authentication}>
+        <SessionContext.Provider value={session}>
+          <Account />
+        </SessionContext.Provider>
+      </AuthenticationContext.Provider>
+    </LocalizationProvider>
+    // preview-end
   );
 }