@ciromaciel/auth-react 1.3.0 → 1.4.0

package/README.md

@@ -139,6 +139,31 @@ Building your own screen? `fetchRecentAccounts()`, `saveRecentAccount(method)` a
 `rememberAccount(email, method)`, `forgetAccount(email)` and `adoptRecentAccounts(list)` manage
 the local copy.
 
+### The account card
+
+`<UserInformation />` is what opens from the footer of a sidebar: who is signed in, in which
+organization and on which plan, then one list of actions with "Sair" last.
+
+```jsx
+<UserInformation
+    user={user}
+    signOut={signOut}
+    onAccountClick={openAccount}
+    onBillingClick={openBilling}
+    items={[{ id: 'docs', label: 'Documentação', icon: IconFileText, onClick: openDocs }]}
+    plan={{ name: 'Pro', used: 3, limit: 9, unit: 'projetos', onClick: openPlans }}
+    organization={{ name: 'Acme', role: 'owner' }}
+/>
+```
+
+- The title is the user's name, or the email when there is none — never both saying the same
+  thing.
+- `items` are your app's own rows, passed as data (`{ id, label, icon, onClick }`), shown in their
+  own group after billing. The component takes no JSX, so every app's card keeps the same shape.
+- `plan` and `organization` draw the context strip; leave them out and it is not drawn.
+  `limit: null` hides the usage bar.
+- `branded={false}` removes the "Protegido por Auth" line.
+
 ## API
 
 ### Components
@@ -147,7 +172,7 @@ the local copy.
 | ------------------------- | ------------------------------------------------------------ |
 | `<SignIn />`              | The whole way in: asks for the email, then takes the code     |
 | `<UserProfile />`         | User profile management modal                                 |
-| `<UserInformation />`     | User details and account menu                                 |
+| `<UserInformation />`     | The account card: who, where, which plan, then the actions    |
 | `<SocialButtons />`       | Sign-in buttons for the providers the application enabled     |
 | `<AuthCard />`            | The card shell the screens are built on                       |
 | `<Wordmark />`            | Application wordmark                                          |

package/dist/index.esm.js

@@ -3,9 +3,9 @@ import { useState, useCallback, useEffect, useMemo, createContext, useRef } from
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Navigate, Outlet, useNavigate } from 'react-router-dom';
-import { Modal, Stack, Text, Group, Image, Title, Paper, Anchor, NavLink, ActionIcon, Loader, Avatar, Button, Divider, TextInput, Alert, Center, Box, Collapse, FileButton, Tooltip, ThemeIcon, Badge, rem } from '@mantine/core';
+import { Modal, Stack, Text, Group, Image, Title, Paper, Anchor, NavLink, ActionIcon, Loader, Avatar, Button, Divider, TextInput, Alert, Center, Box, Collapse, FileButton, Tooltip, ThemeIcon, Badge, UnstyledButton } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconX, IconArrowRight, IconBrandGoogle, IconArrowLeft, IconRefresh, IconAlertCircle, IconUser, IconPhoto, IconTrash, IconCheck, IconPencil, IconMail, IconShield, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle, IconSettings, IconCreditCard, IconShieldCheck } from '@tabler/icons-react';
+import { IconX, IconArrowRight, IconBrandGoogle, IconArrowLeft, IconRefresh, IconAlertCircle, IconUser, IconPhoto, IconTrash, IconCheck, IconPencil, IconMail, IconShield, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle, IconBuilding, IconCreditCard } from '@tabler/icons-react';
 
 /**
  * The accounts that already signed in on this browser.
@@ -3982,151 +3982,358 @@ function UserProfile({
   });
 }
 
+const ROLE_LABELS = {
+  owner: 'Dono',
+  admin: 'Administrador',
+  member: 'Membro'
+};
+
+/**
+ * @typedef {Object} UserInformationItem
+ * @property {string} [id] - Stable key
+ * @property {string} label - The row's text
+ * @property {Function} [icon] - A Tabler icon component
+ * @property {Function} onClick
+ *
+ * @typedef {Object} UserInformationPlan
+ * @property {string} [name] - "Pro", "Starter"… Shown as the badge
+ * @property {number} [used] - How many of the plan's resources are in use
+ * @property {number|null} [limit] - The plan's ceiling; `null` hides the meter
+ * @property {string} [unit] - What is counted, in the plural: "projetos"
+ * @property {string} [actionLabel='Ver planos']
+ * @property {Function} [onClick] - Opens the plans
+ *
+ * @typedef {Object} UserInformationOrganization
+ * @property {string} name
+ * @property {string} [role] - `owner`, `admin`, `member`, or already a label
+ */
+
+/**
+ * @param {Object} props
+ * @param {Object} props.user - The signed-in user (`name`, `email`, `image`)
+ * @param {Function} props.signOut
+ * @param {Function} [props.onAccountClick]
+ * @param {Function} [props.onBillingClick]
+ * @param {UserInformationItem[]} [props.items] - The panel's own rows, shown in their own group
+ * @param {UserInformationPlan} [props.plan] - The plan strip; omitted, the strip is not drawn
+ * @param {UserInformationOrganization} [props.organization] - Where the person is acting
+ * @param {boolean} [props.branded=true] - The "Protegido por Auth" line
+ * @param {string} [props.accountLabel='Conta']
+ * @param {string} [props.billingLabel='Assinatura']
+ * @param {string} [props.signOutLabel='Sair']
+ */
 function UserInformation({
   user,
   signOut,
   onAccountClick,
   onBillingClick,
+  items = [],
+  plan,
+  organization,
+  branded = true,
   accountLabel = 'Conta',
   billingLabel = 'Assinatura',
+  signOutLabel = 'Sair',
+  // Kept so existing calls keep working. The card has one density now: the
+  // popover's. `padded={false}` still removes the outer padding.
   padded = true,
-  size = 'sm',
+  size,
+  // eslint-disable-line no-unused-vars -- accepted and ignored, see above
   style,
   ...others
 }) {
   if (!user) return null;
+  const name = (user.fullName || user.name || '').trim();
+  const email = (user.primaryEmailAddress || user.email || '').trim();
 
-  // Size mappings
-  const avatarSizeMap = {
-    sm: 32,
-    md: 40,
-    lg: 48
-  };
-  const fontSizeTitleMap = {
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg'
-  };
-  const fontSizeEmailMap = {
-    sm: '10px',
-    md: 'xs',
-    lg: 'sm'
-  };
-  const btnSizeMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md'
-  };
-  const gapMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md'
-  };
-  const widthMap = {
-    sm: 280,
-    md: 320,
-    lg: 400
-  };
-  const name = user.fullName || user.name || 'User';
-  const email = user.primaryEmailAddress || user.email || '';
-  const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-  return /*#__PURE__*/jsx(Box, {
-    p: padded ? gapMap[size] : 0,
-    w: widthMap[size],
+  /*
+   * A name equal to the email's local part is not a name: it is what an
+   * account born from a code gets by default, and showing it on top of the
+   * email repeats the same fact. It counts as "no name".
+   */
+  const hasRealName = Boolean(name) && name.toLowerCase() !== email.split('@')[0].toLowerCase() && name.toLowerCase() !== email.toLowerCase();
+  const title = hasRealName ? name : email || name;
+  const initials = hasRealName ? name.split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() : (email || name).charAt(0).toUpperCase();
+  const baseRows = [onAccountClick && {
+    id: 'account',
+    label: accountLabel,
+    icon: IconUser,
+    onClick: onAccountClick
+  }, onBillingClick && {
+    id: 'billing',
+    label: billingLabel,
+    icon: IconCreditCard,
+    onClick: onBillingClick
+  }].filter(Boolean);
+  const panelRows = items.filter(item => item && item.label && typeof item.onClick === 'function');
+  return /*#__PURE__*/jsxs(Box, {
+    w: 288,
+    maw: "100%",
     style: style,
     ...others,
-    children: /*#__PURE__*/jsxs(Stack, {
-      gap: gapMap[size],
-      children: [/*#__PURE__*/jsxs(Group, {
-        wrap: "nowrap",
-        gap: "xs",
-        children: [/*#__PURE__*/jsx(Avatar, {
-          src: user.imageUrl || user.image,
-          size: avatarSizeMap[size],
-          radius: "xl",
-          bg: "gray.1",
-          c: "gray.6",
-          styles: {
-            placeholder: {
-              fontSize: rem(avatarSizeMap[size] / 2.2),
-              fontWeight: 600
-            }
+    children: [/*#__PURE__*/jsxs(Group, {
+      wrap: "nowrap",
+      gap: 10,
+      px: padded ? 16 : 0,
+      py: 14,
+      children: [/*#__PURE__*/jsx(Avatar, {
+        src: user.imageUrl || user.image,
+        alt: "",
+        size: 32,
+        radius: 0,
+        color: "gray.9",
+        variant: "filled",
+        styles: {
+          root: {
+            borderRadius: 0
           },
-          children: initials || 'CC'
-        }), /*#__PURE__*/jsxs(Box, {
+          placeholder: {
+            fontSize: 12,
+            fontWeight: 800
+          }
+        },
+        children: initials
+      }), /*#__PURE__*/jsxs(Box, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [/*#__PURE__*/jsx(Text, {
+          fz: 13,
+          fw: 800,
+          c: "gray.9",
+          lh: 1.3,
+          truncate: "end",
+          children: title
+        }), hasRealName && email && /*#__PURE__*/jsx(Text, {
+          fz: 12,
+          fw: 500,
+          c: "gray.5",
+          lh: 1.4,
+          truncate: "end",
+          children: email
+        })]
+      })]
+    }), (organization?.name || plan) && /*#__PURE__*/jsx(ContextStrip, {
+      organization: organization,
+      plan: plan,
+      padded: padded
+    }), /*#__PURE__*/jsxs(Box, {
+      role: "menu",
+      "aria-label": "Conta",
+      onKeyDown: moveFocus,
+      children: [baseRows.length > 0 && /*#__PURE__*/jsx(RowGroup, {
+        rows: baseRows,
+        hasDivider: !organization?.name && !plan
+      }), panelRows.length > 0 && /*#__PURE__*/jsx(RowGroup, {
+        rows: panelRows,
+        hasDivider: true
+      }), signOut && /*#__PURE__*/jsx(RowGroup, {
+        rows: [{
+          id: 'sign-out',
+          label: signOutLabel,
+          icon: IconLogout,
+          onClick: signOut
+        }],
+        hasDivider: true
+      })]
+    }), branded && /*#__PURE__*/jsxs(Group, {
+      justify: "center",
+      gap: 4,
+      py: 8,
+      bg: "gray.1",
+      style: {
+        borderTop: '1px solid var(--mantine-color-gray-2)'
+      },
+      children: [/*#__PURE__*/jsx(Text, {
+        fz: 11,
+        fw: 500,
+        c: "gray.5",
+        children: "Protegido por"
+      }), /*#__PURE__*/jsx(Text, {
+        fz: 11,
+        fw: 800,
+        c: "gray.7",
+        children: "Auth"
+      })]
+    })]
+  });
+}
+
+/** The organization, the role and the plan's usage, on the alternate surface. */
+function ContextStrip({
+  organization,
+  plan,
+  padded
+}) {
+  const role = organization?.role ? ROLE_LABELS[organization.role] || organization.role : null;
+  const hasMeter = plan && Number.isFinite(plan.used) && Number.isFinite(plan.limit) && plan.limit > 0;
+  const ratio = hasMeter ? Math.min(1, Math.max(0, plan.used / plan.limit)) : 0;
+  return /*#__PURE__*/jsxs(Stack, {
+    gap: 8,
+    px: padded ? 16 : 0,
+    py: 12,
+    bg: "gray.1",
+    style: {
+      borderTop: '1px solid var(--mantine-color-gray-2)',
+      borderBottom: '1px solid var(--mantine-color-gray-2)'
+    },
+    children: [(organization?.name || plan?.name) && /*#__PURE__*/jsxs(Group, {
+      gap: 8,
+      wrap: "nowrap",
+      children: [organization?.name && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(IconBuilding, {
+          size: 14,
+          stroke: 1.5,
           style: {
-            flex: 1,
-            overflow: 'hidden'
+            flex: 'none',
+            color: 'var(--mantine-color-gray-5)'
+          }
+        }), /*#__PURE__*/jsx(Text, {
+          fz: 12,
+          fw: 800,
+          c: "gray.9",
+          truncate: "end",
+          style: {
+            minWidth: 0
           },
-          children: [/*#__PURE__*/jsx(Text, {
-            size: fontSizeTitleMap[size],
-            fw: 700,
-            truncate: "end",
-            c: "dark.9",
-            lh: 1.1,
-            children: name
-          }), /*#__PURE__*/jsx(Text, {
-            size: fontSizeEmailMap[size],
-            c: "gray.5",
-            truncate: "end",
-            lh: 1.1,
-            children: email
-          })]
-        }), /*#__PURE__*/jsx(ActionIcon, {
-          size: btnSizeMap[size],
-          onClick: signOut,
-          children: /*#__PURE__*/jsx(IconLogout, {
-            size: 16,
-            stroke: 1.5
-          })
-        })]
-      }), /*#__PURE__*/jsxs(Group, {
-        grow: true,
-        children: [/*#__PURE__*/jsx(Button, {
-          variant: "default",
-          size: btnSizeMap[size],
-          leftSection: /*#__PURE__*/jsx(IconSettings, {
-            size: 16,
-            stroke: 1.5
-          }),
-          onClick: onAccountClick,
-          children: accountLabel
-        }), /*#__PURE__*/jsx(Button, {
-          variant: "default",
-          size: btnSizeMap[size],
-          leftSection: /*#__PURE__*/jsx(IconCreditCard, {
-            size: 16,
-            stroke: 1.5
-          }),
-          onClick: onBillingClick,
-          children: billingLabel
+          children: organization.name
+        }), role && /*#__PURE__*/jsxs(Text, {
+          fz: 12,
+          fw: 500,
+          c: "gray.5",
+          style: {
+            flex: 'none'
+          },
+          children: ["\xB7 ", role]
         })]
+      }), plan?.name && /*#__PURE__*/jsx(Text, {
+        component: "span",
+        fz: 10,
+        fw: 800,
+        tt: "uppercase",
+        lts: "1.5px",
+        c: "white",
+        bg: "gray.9",
+        px: 6,
+        lh: 1.6,
+        ml: "auto",
+        style: {
+          flex: 'none'
+        },
+        children: plan.name
+      })]
+    }), hasMeter && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Box, {
+        h: 4,
+        bg: "gray.2",
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": plan.limit,
+        "aria-valuenow": plan.used,
+        "aria-label": plan.unit ? `${plan.unit} em uso` : 'Uso do plano',
+        children: /*#__PURE__*/jsx(Box, {
+          h: "100%",
+          w: `${ratio * 100}%`,
+          bg: "gray.9"
+        })
       }), /*#__PURE__*/jsxs(Group, {
-        justify: "center",
-        gap: 4,
-        opacity: 0.3,
+        justify: "space-between",
+        gap: 8,
+        wrap: "nowrap",
         children: [/*#__PURE__*/jsx(Text, {
-          size: "10px",
+          fz: 12,
+          fw: 500,
           c: "gray.6",
-          fw: 600,
-          children: "Secured by"
-        }), /*#__PURE__*/jsxs(Group, {
-          gap: 2,
-          children: [/*#__PURE__*/jsx(IconShieldCheck, {
-            size: 10,
-            stroke: 2
-          }), /*#__PURE__*/jsx(Text, {
-            size: "10px",
-            fw: 800,
-            c: "dark.9",
-            children: "Auth"
-          })]
+          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}`
+        }), plan.onClick && /*#__PURE__*/jsx(Anchor, {
+          component: "button",
+          type: "button",
+          fz: 12,
+          fw: 700,
+          c: "gray.9",
+          underline: "always",
+          onClick: plan.onClick,
+          children: plan.actionLabel || 'Ver planos'
         })]
       })]
-    })
+    })]
+  });
+}
+function RowGroup({
+  rows,
+  hasDivider
+}) {
+  return /*#__PURE__*/jsx(Stack, {
+    gap: 0,
+    p: 6,
+    style: hasDivider ? {
+      borderTop: '1px solid var(--mantine-color-gray-2)'
+    } : undefined,
+    children: rows.map(row => /*#__PURE__*/jsx(Row, {
+      ...row
+    }, row.id || row.label))
+  });
+}
+function Row({
+  label,
+  icon: Icon,
+  onClick
+}) {
+  return /*#__PURE__*/jsxs(UnstyledButton, {
+    role: "menuitem",
+    onClick: onClick,
+    px: 10,
+    py: 7,
+    w: "100%",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      borderRadius: 0
+    }
+    /*
+     * Hover and keyboard focus share the same surface: a row reached
+     * with the arrows must look exactly like the one under the mouse.
+     */,
+    onMouseEnter: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onMouseLeave: event => event.currentTarget.style.background = 'transparent',
+    onFocus: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onBlur: event => event.currentTarget.style.background = 'transparent',
+    children: [Icon && /*#__PURE__*/jsx(Icon, {
+      size: 16,
+      stroke: 1.5,
+      style: {
+        flex: 'none',
+        color: 'var(--mantine-color-gray-5)'
+      }
+    }), /*#__PURE__*/jsx(Text, {
+      fz: 12,
+      fw: 500,
+      c: "gray.9",
+      truncate: "end",
+      children: label
+    })]
   });
 }
 
+/*
+ * Arrow keys walk the rows, Home and End jump to the ends — the WAI-ARIA menu
+ * pattern. Tab still leaves the card, so it never traps focus inside a popover
+ * the panel owns.
+ */
+function moveFocus(event) {
+  const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+  if (!keys.includes(event.key)) return;
+  const rows = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]'));
+  if (rows.length === 0) return;
+  event.preventDefault();
+  const current = rows.indexOf(document.activeElement);
+  const last = rows.length - 1;
+  const next = event.key === 'Home' ? 0 : event.key === 'End' ? last : event.key === 'ArrowDown' ? current < last ? current + 1 : 0 : current > 0 ? current - 1 : last;
+  rows[next].focus();
+}
+
 /**
  * Renderiza children apenas quando o usuário está autenticado
  * Equivalente ao <SignedIn> do Clerk