[account] [docs] Add custom user details example (#4227)

mui · Oct 30, 2024 · de4ac6c · de4ac6c
1 parent 0520057
commit de4ac6c
Show file tree

Hide file tree

Showing 20 changed files with 677 additions and 0 deletions.
diff --git a/docs/data/toolpad/core/components/UserOrg.js b/docs/data/toolpad/core/components/UserOrg.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Box, Stack, Typography, Avatar, Link, Divider } from '@mui/material';
+import {
+  AccountPreview,
+  AccountPopoverFooter,
+  SignOutButton,
+} from '@toolpad/core/Account';
+
+import { useSession } from '@toolpad/core/useSession';
+
+export function UserOrg() {
+  const session = useSession();
+  if (!session?.user) {
+    return <Typography>No user session available</Typography>;
+  }
+
+  const { logo: orgLogo, name: orgName, url: orgUrl } = session.org;
+
+  return (
+    <Stack>
+      <AccountPreview variant="expanded" />
+      {session.org && (
+        <Stack mb={1}>
+          <Typography textAlign="center" fontSize="0.625rem" gutterBottom>
+            This account is managed by
+          </Typography>
+          <Box display="flex" justifyContent="center" alignItems="center" gap={2}>
+            <Avatar
+              variant="square"
+              src={orgLogo}
+              alt={orgName}
+              sx={{ width: 27, height: 24 }}
+            />
+            <Stack>
+              <Typography variant="caption" fontWeight="bolder">
+                {orgName}
+              </Typography>
+              <Link
+                variant="caption"
+                href={orgUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {orgUrl}
+              </Link>
+            </Stack>
+          </Box>
+        </Stack>
+      )}
+      <Divider />
+      <AccountPopoverFooter>
+        <SignOutButton />
+      </AccountPopoverFooter>
+    </Stack>
+  );
+}
diff --git a/docs/data/toolpad/core/components/UserOrg.tsx b/docs/data/toolpad/core/components/UserOrg.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Box, Stack, Typography, Avatar, Link, Divider } from '@mui/material';
+import {
+  AccountPreview,
+  AccountPopoverFooter,
+  SignOutButton,
+} from '@toolpad/core/Account';
+import { Session } from '@toolpad/core/AppProvider';
+import { useSession } from '@toolpad/core/useSession';
+
+export interface CustomSession extends Session {
+  org: {
+    name: string;
+    url: string;
+    logo: string;
+  };
+}
+
+export function UserOrg() {
+  const session = useSession<CustomSession>();
+  if (!session?.user) {
+    return <Typography>No user session available</Typography>;
+  }
+
+  const { logo: orgLogo, name: orgName, url: orgUrl } = session.org;
+
+  return (
+    <Stack>
+      <AccountPreview variant="expanded" />
+      {session.org && (
+        <Stack mb={1}>
+          <Typography textAlign="center" fontSize="0.625rem" gutterBottom>
+            This account is managed by
+          </Typography>
+          <Box display="flex" justifyContent="center" alignItems="center" gap={2}>
+            <Avatar
+              variant="square"
+              src={orgLogo}
+              alt={orgName}
+              sx={{ width: 27, height: 24 }}
+            />
+            <Stack>
+              <Typography variant="caption" fontWeight="bolder">
+                {orgName}
+              </Typography>
+              <Link
+                variant="caption"
+                href={orgUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {orgUrl}
+              </Link>
+            </Stack>
+          </Box>
+        </Stack>
+      )}
+      <Divider />
+      <AccountPopoverFooter>
+        <SignOutButton />
+      </AccountPopoverFooter>
+    </Stack>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomUserDetails.js b/docs/data/toolpad/core/components/account/AccountCustomUserDetails.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Account } from '@toolpad/core/Account';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { UserOrg } from '../UserOrg';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: '[email protected]',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+  org: {
+    name: 'MUI Inc.',
+    url: 'https://mui.com',
+    logo: 'https://mui.com/static/logo.svg',
+  },
+};
+
+export default function AccountCustomUserDetails() {
+  const [customSession, setCustomSession] = React.useState(demoSession);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setCustomSession(demoSession);
+      },
+      signOut: () => {
+        setCustomSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={customSession}>
+        {/* preview-start */}
+        <Account
+          slots={{
+            popoverContent: UserOrg,
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx b/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Account } from '@toolpad/core/Account';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { UserOrg, CustomSession } from '../UserOrg';
+
+const demoSession: CustomSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: '[email protected]',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+  org: {
+    name: 'MUI Inc.',
+    url: 'https://mui.com',
+    logo: 'https://mui.com/static/logo.svg',
+  },
+};
+
+export default function AccountCustomUserDetails() {
+  const [customSession, setCustomSession] = React.useState<CustomSession | null>(
+    demoSession,
+  );
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setCustomSession(demoSession);
+      },
+      signOut: () => {
+        setCustomSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={customSession}>
+        {/* preview-start */}
+        <Account
+          slots={{
+            popoverContent: UserOrg,
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx.preview b/docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx.preview
@@ -0,0 +1,5 @@
+<Account
+  slots={{
+    popoverContent: UserOrg,
+  }}
+/>
diff --git a/docs/data/toolpad/core/components/account/AccountLocale.tsx.preview b/docs/data/toolpad/core/components/account/AccountLocale.tsx.preview
@@ -0,0 +1,6 @@
+<Account
+  localeText={{
+    signInLabel: 'Login',
+    signOutLabel: 'Logout',
+  }}
+/>
diff --git a/docs/data/toolpad/core/components/account/AccountSlotsWallet.js b/docs/data/toolpad/core/components/account/AccountSlotsWallet.js
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import {
+  Avatar,
+  Button,
+  Divider,
+  Typography,
+  Stack,
+  IconButton,
+} from '@mui/material';
+import WalletIcon from '@mui/icons-material/AccountBalance';
+import SendIcon from '@mui/icons-material/Send';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
+import CopyIcon from '@mui/icons-material/ContentCopy';
+
+import {
+  Account,
+  AccountPreview,
+  AccountPopoverFooter,
+  SignOutButton,
+} from '@toolpad/core/Account';
+
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: '[email protected]',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+};
+
+const mockData = {
+  address: '0xb794f5ea0ba39494ce839613fffba74279579268',
+  balance: '1,234.56 ETH',
+  usdBalance: '$2,345,678.90 USD',
+};
+
+function CryptoWalletInfo() {
+  return (
+    <Stack direction="column">
+      <AccountPreview variant="expanded" />
+      <Divider />
+      <Stack spacing={2} sx={{ width: 320, p: 2 }}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Avatar sx={{ bgcolor: 'primary.main' }}>
+            <WalletIcon />
+          </Avatar>
+          <Stack sx={{ flexGrow: 1, minWidth: 0 }}>
+            <Typography
+              variant="subtitle1"
+              fontWeight="bold"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {mockData.address}
+              </span>
+              <IconButton size="small" sx={{ ml: 1 }}>
+                <CopyIcon fontSize="small" />
+              </IconButton>
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Main Account
+            </Typography>
+          </Stack>
+        </Stack>
+        <Divider />
+        <Stack>
+          <Typography variant="h6" fontWeight="bold">
+            {mockData.balance}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {mockData.usdBalance}
+          </Typography>
+        </Stack>
+      </Stack>
+      <Divider />
+      <AccountPopoverFooter sx={{ gap: 2, px: 2, justifyContent: 'center' }}>
+        <Button
+          variant="contained"
+          disableElevation
+          size="small"
+          color="primary"
+          startIcon={<SendIcon />}
+        >
+          Send
+        </Button>
+        <Button variant="outlined" disableElevation startIcon={<ShoppingCart />}>
+          Buy
+        </Button>
+        <SignOutButton color="info" sx={{ textTransform: 'uppercase' }} />
+      </AccountPopoverFooter>
+    </Stack>
+  );
+}
+
+export default function AccountSlotsWallet() {
+  const [session, setSession] = React.useState(demoSession);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession(demoSession);
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        <Account
+          slots={{
+            popoverContent: CryptoWalletInfo,
+          }}
+        />
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}