Merge remote-tracking branch 'upstream/master' into dashboard-layout-…

…docs-improvements

.eslintignore

@@ -16,3 +16,6 @@ build
 
 .generated
 .github
+
+.coverage
+.tsup

docs/data/toolpad/core/all-components/all-components.md

@@ -3,5 +3,7 @@
 <p class="description">This page contains an index to the components included in Toolpad Core.</p>
 
 - [App Provider](/toolpad/core/react-app-provider/)
+- [Account](/toolpad/core/react-account/)
 - [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
 - [Data Grid](/toolpad/core/react-data-grid/)
+- [Sign In Page](/toolpad/core/react-sign-in-page/)

docs/data/toolpad/core/components/account/AccountCustom.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+
+export default function AccountCustom() {
+ const [session, setSession] = React.useState(null);
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ // preview-start
+ <AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account
+ slotProps={{
+ signInButton: {
+ color: 'info',
+ variant: 'outlined',
+ sx: {
+ color: 'primaryDark',
+ fontFamily: 'Inter',
+ fontSize: '1em',
+ },
+ },
+ signOutButton: { color: 'primary', variant: 'outlined' },
+ }}
+ signInLabel="Login"
+ signOutLabel="Logout"
+ />
+ </SessionContext.Provider>
+ </AuthenticationContext.Provider>
+ // preview-end
+ );
+}

docs/data/toolpad/core/components/account/AccountCustom.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+ Account,
+ AuthenticationContext,
+ SessionContext,
+ Session,
+} from '@toolpad/core';
+
+export default function AccountCustom() {
+ const [session, setSession] = React.useState<Session | null>(null);
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ // preview-start
+ <AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account
+ slotProps={{
+ signInButton: {
+ color: 'info',
+ variant: 'outlined',
+ sx: {
+ color: 'primaryDark',
+ fontFamily: 'Inter',
+ fontSize: '1em',
+ },
+ },
+ signOutButton: { color: 'primary', variant: 'outlined' },
+ }}
+ signInLabel="Login"
+ signOutLabel="Logout"
+ />
+ </SessionContext.Provider>
+ </AuthenticationContext.Provider>
+ // preview-end
+ );
+}

docs/data/toolpad/core/components/account/AccountCustom.tsx.preview

@@ -0,0 +1,20 @@
+<AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account
+ slotProps={{
+ signInButton: {
+ color: 'info',
+ variant: 'outlined',
+ sx: {
+ color: 'primaryDark',
+ fontFamily: 'Inter',
+ fontSize: '1em',
+ },
+ },
+ signOutButton: { color: 'primary', variant: 'outlined' },
+ }}
+ signInLabel="Login"
+ signOutLabel="Logout"
+ />
+ </SessionContext.Provider>
+</AuthenticationContext.Provider>

docs/data/toolpad/core/components/account/AccountDemo.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+
+export default function AccountDemo() {
+ const [session, setSession] = React.useState(null);
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ <AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account />
+ </SessionContext.Provider>
+ </AuthenticationContext.Provider>
+ );
+}

docs/data/toolpad/core/components/account/AccountDemo.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+ Account,
+ AuthenticationContext,
+ SessionContext,
+ Session,
+} from '@toolpad/core';
+
+export default function AccountDemo() {
+ const [session, setSession] = React.useState<Session | null>(null);
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ <AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account />
+ </SessionContext.Provider>
+ </AuthenticationContext.Provider>
+ );
+}

docs/data/toolpad/core/components/account/AccountDemo.tsx.preview

@@ -0,0 +1,5 @@
+<AuthenticationContext.Provider value={authentication}>
+ <SessionContext.Provider value={session}>
+ <Account />
+ </SessionContext.Provider>
+</AuthenticationContext.Provider>

docs/data/toolpad/core/components/account/AccountWithDashboard.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { AppProvider, DashboardLayout } from '@toolpad/core';
+
+export default function AccountWithDashboard() {
+ const [session, setSession] = React.useState({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ <AppProvider session={session} authentication={authentication}>
+ <DashboardLayout>
+ <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+ </DashboardLayout>
+ </AppProvider>
+ );
+}

docs/data/toolpad/core/components/account/AccountWithDashboard.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { Session, AppProvider, DashboardLayout } from '@toolpad/core';
+
+export default function AccountWithDashboard() {
+ const [session, setSession] = React.useState<Session | null>({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ const authentication = React.useMemo(() => {
+ return {
+ signIn: () => {
+ setSession({
+ user: {
+ name: 'Bharat Kashyap',
+ email: 'bharatkashyap@outlook.com',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ },
+ signOut: () => {
+ setSession(null);
+ },
+ };
+ }, []);
+
+ return (
+ <AppProvider session={session} authentication={authentication}>
+ <DashboardLayout>
+ <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+ </DashboardLayout>
+ </AppProvider>
+ );
+}

docs/data/toolpad/core/components/account/AccountWithDashboard.tsx.preview

@@ -0,0 +1,3 @@
+<DashboardLayout>
+ <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+</DashboardLayout>

docs/data/toolpad/core/components/account/account.md

@@ -0,0 +1,29 @@
+---
+productId: toolpad-core
+title: Account
+components: Account
+---
+
+# Account
+
+<p class="description">A component that renders an account management dropdown for your application.</p>
+
+The `Account` component is a quick and easy way to display an account management menu for authenticated users. It is deeply integrated with the `SignInPage` and `DashboardLayout` components, meaning that it automatically appears in the top navigation bar inside `DashboardLayout` once your users have signed in through the `SignInPage`.
+
+## States
+
+When signed out, the component renders as an inline sign in button within the dashboard layout. If a `session` object is present, the component is rendered as a dropdown containing the user's account details as well as an option to sign out.
+
+{{"demo": "AccountDemo.js", "bg": "gradient" }}
+
+## Customization
+
+### Components
+
+`Account` can take different labels for the sign in and sign out buttons through the `signInLabel` and `signOutLabel` props. Deeper changes can be made by passing in `slotProps` to the underlying components.
+
+{{"demo": "AccountCustom.js", "bg": "gradient" }}
+
+### 🚧 Composition
+
+The `Account` component allows adding your own menu options, including deeply nested options. This is in progress.

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Dashboard Layout
-components: AppProvider, DashboardLayout
+components: AppProvider, DashboardLayout, Account
 ---
 
 # Dashboard Layout
@@ -81,3 +81,13 @@ Nested navigation structures can be placed in the sidebar as items with the form
 Navigation links have an optional `action` prop that can be used to render any content on the right-side of the respective list item, such as badges with numbers, or buttons to toggle a popover menu.
 
 {{"demo": "DashboardLayoutNavigationActions.js", "height": 400, "iframe": true}}
+
+## Account
+
+The `DashboardLayout` comes integrated with the [`<Account />`](/toolpad/core/react-account/) component. It renders as an account management menu when a user is signed in – a `session` object is present – and a button when not.
+
+:::warning
+The use of an `iframe` may cause some spacing issues in the following demo.
+:::
+
+{{"demo": "../account/AccountWithDashboard.js", "iframe": true, "height": 320 }}

docs/data/toolpad/core/components/page-container/ActionsPageContainer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { useDemoRouter } from '@toolpad/core/internals';
 import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';

docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { useDemoRouter } from '@toolpad/core/internals';
 import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';

docs/data/toolpad/core/components/page-container/BasicPageContainer.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { useDemoRouter } from '@toolpad/core/internals';
 import { Paper, useTheme } from '@mui/material';
 
 const NAVIGATION = [

docs/data/toolpad/core/components/page-container/BasicPageContainer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { useDemoRouter } from '@toolpad/core/internals';
 import { Paper, useTheme } from '@mui/material';
 
 const NAVIGATION = [

docs/data/toolpad/core/components/page-container/PageContent.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function PageContent() {
  return (