@majapisoftwares/ui 6.0.0 → 6.1.0

package/docs/STANDARDS.md

@@ -10,7 +10,7 @@ TypeScript em modo strict, React com componentes funcionais e composição. APIs
 
 `src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Preset base-luma do shadcn (o mesmo da home de ui.shadcn.com: cantos bem arredondados, campos com fundo suave, sombras leves) sobre o tema neutral, fonte Geist, foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
 
-Primitivos shadcn ficam em src/components/ui (Button, Badge, Card, Input, Table, Sheet, Sidebar, Tooltip, DropdownMenu, ContextMenu, Breadcrumb, Avatar, Checkbox, Collapsible, Alert, Empty, Select, Separator, Skeleton, Tabs, Field e Label). Padrões compostos: AppShell, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet, DetailList, Preferences, PreferenceControls e MajapiLogo. Templates React: AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
+Primitivos shadcn ficam em src/components/ui (Button, Badge, Card, Input, Table, Sheet, Sidebar, Tooltip, DropdownMenu, ContextMenu, Breadcrumb, Avatar, Checkbox, Collapsible, Alert, Empty, Select, Separator, Skeleton, Tabs, Field e Label). Padrões compostos: AppShell (slots `sidebarHeader` e `footer`), WorkspaceSwitcher, UserMenu, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet, DetailList, Preferences, PreferenceControls e MajapiLogo. Templates React: AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
 
 ## Comportamentos de UX
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majapisoftwares/ui",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Shared Workbench UI and UX standards based on shadcn/ui",
   "publishConfig": {
     "access": "public"

package/src/patterns/app-shell.tsx

@@ -46,7 +46,9 @@ export interface AppShellProps {
   header?: ReactNode;
   /** Rendered at the end of the header, e.g. locale or theme switchers. */
   actions?: ReactNode;
-  /** Sidebar footer, e.g. a user menu. */
+  /** Below the logo in the sidebar header, e.g. `WorkspaceSwitcher`. */
+  sidebarHeader?: ReactNode;
+  /** Sidebar footer, e.g. `UserMenu`. */
   footer?: ReactNode;
   defaultMode?: SidebarMode;
   defaultWidth?: number;
@@ -96,6 +98,7 @@ export function AppShell({
   header,
   actions,
   footer,
+  sidebarHeader,
   defaultMode,
   defaultWidth,
   fillHeight = false,
@@ -121,6 +124,7 @@ export function AppShell({
             <div className="hidden group-data-[collapsible=icon]:block">
               <SidebarCollapse />
             </div>
+            {sidebarHeader}
           </SidebarHeader>
           <SidebarContent>
             {navigation.map((group, index) => (

package/src/patterns/details-sheet.tsx

@@ -30,7 +30,8 @@ export function DetailsSheet({
             <SheetDescription>{description}</SheetDescription>
           ) : null}
         </SheetHeader>
-        <div className="px-4 pb-8">{children}</div>
+        {/* Same inset as SheetHeader (p-6). */}
+        <div className="px-6 pb-8">{children}</div>
       </SheetContent>
     </Sheet>
   );

package/src/patterns/user-menu.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  ChevronsUpDownIcon,
+  LanguagesIcon,
+  LogOutIcon,
+  MoonIcon,
+  SunIcon,
+} from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "../components/ui/sidebar";
+import { defineMessages, locales, useMessages, type Locale } from "../lib/i18n";
+import { usePreferences } from "./preferences";
+
+const messages = defineMessages({
+  en: {
+    account: "Account menu",
+    theme: "Theme",
+    light: "Light",
+    dark: "Dark",
+    language: "Language",
+    signOut: "Sign out",
+    signingOut: "Signing out…",
+  },
+  "pt-BR": {
+    account: "Menu da conta",
+    theme: "Tema",
+    light: "Claro",
+    dark: "Escuro",
+    language: "Idioma",
+    signOut: "Sair",
+    signingOut: "Saindo…",
+  },
+});
+
+const localeNames: Record<Locale, string> = {
+  en: "English",
+  "pt-BR": "Português",
+};
+
+function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join("");
+}
+
+function Identity({
+  name,
+  email,
+  avatarUrl,
+}: {
+  name: string;
+  email?: string;
+  avatarUrl?: string;
+}) {
+  return (
+    <>
+      <Avatar className="size-8">
+        {avatarUrl ? <AvatarImage src={avatarUrl} alt="" /> : null}
+        <AvatarFallback>{initials(name)}</AvatarFallback>
+      </Avatar>
+      <div className="grid flex-1 text-left text-sm leading-tight">
+        <span className="truncate font-medium">{name}</span>
+        {email ? (
+          <span className="truncate text-xs text-muted-foreground">
+            {email}
+          </span>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+/**
+ * Sidebar account menu (place it in `AppShell` `footer`). Theme and language
+ * come from `Preferences`; account actions are passed as `items`.
+ */
+export function UserMenu({
+  name,
+  email,
+  avatarUrl,
+  items,
+  onSignOut,
+  signingOut = false,
+}: {
+  name: string;
+  email?: string;
+  avatarUrl?: string;
+  /** App-specific entries, e.g. profile or settings links. */
+  items?: ReactNode;
+  onSignOut?: () => void;
+  signingOut?: boolean;
+}) {
+  const t = useMessages(messages);
+  const { isMobile } = useSidebar();
+  const { locale, setLocale, theme, setTheme } = usePreferences();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                aria-label={t.account}
+                className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <Identity name={name} email={email} avatarUrl={avatarUrl} />
+            <ChevronsUpDownIcon className="ml-auto size-4 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--anchor-width) min-w-60"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex items-center gap-2 font-normal text-foreground">
+                <Identity name={name} email={email} avatarUrl={avatarUrl} />
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            {items ? (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>{items}</DropdownMenuGroup>
+              </>
+            ) : null}
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  {theme === "dark" ? <MoonIcon /> : <SunIcon />}
+                  {t.theme}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup
+                    value={theme}
+                    onValueChange={(value) =>
+                      setTheme(value as "light" | "dark")
+                    }
+                  >
+                    <DropdownMenuRadioItem value="light">
+                      <SunIcon />
+                      {t.light}
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="dark">
+                      <MoonIcon />
+                      {t.dark}
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <LanguagesIcon />
+                  {t.language}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup
+                    value={locale}
+                    onValueChange={(value) => setLocale(value as Locale)}
+                  >
+                    {locales.map((value) => (
+                      <DropdownMenuRadioItem key={value} value={value}>
+                        {localeNames[value]}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            {onSignOut ? (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    variant="destructive"
+                    disabled={signingOut}
+                    onClick={onSignOut}
+                  >
+                    <LogOutIcon />
+                    {signingOut ? t.signingOut : t.signOut}
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/patterns/workspace-switcher.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "cn";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "../components/ui/sidebar";
+import { Skeleton } from "../components/ui/skeleton";
+import { defineMessages, useMessages } from "../lib/i18n";
+
+const messages = defineMessages({
+  en: { switchWorkspace: "Switch workspace", workspaces: "Workspaces" },
+  "pt-BR": { switchWorkspace: "Trocar workspace", workspaces: "Workspaces" },
+});
+
+export interface Workspace {
+  id: string;
+  name: string;
+  /** Second line, e.g. plan or owner. */
+  description?: string;
+  /** Square mark; defaults to the name's initial. */
+  icon?: ReactNode;
+  /** Workspaces sharing a group are listed together (e.g. by company). */
+  group?: string;
+}
+
+function WorkspaceMark({
+  workspace,
+  className,
+}: {
+  workspace: Workspace;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        // Forced: focused menu items recolor all descendants to the accent color.
+        "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground **:text-primary-foreground! [&_svg]:size-4",
+        className,
+      )}
+    >
+      {workspace.icon ?? (
+        <span className="text-sm font-semibold">
+          {workspace.name.charAt(0).toUpperCase()}
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * Sidebar workspace selector (place it in `AppShell` `sidebarHeader`).
+ * Selecting a workspace calls `onSelect`; routing and data stay in the app.
+ */
+export function WorkspaceSwitcher({
+  workspaces,
+  activeId,
+  onSelect,
+  actions,
+  loading = false,
+}: {
+  workspaces: Workspace[];
+  activeId: string;
+  onSelect: (workspace: Workspace) => void;
+  /** Extra menu items after the list, e.g. "Manage workspaces". */
+  actions?: ReactNode;
+  loading?: boolean;
+}) {
+  const t = useMessages(messages);
+  const { isMobile } = useSidebar();
+  const active = workspaces.find((workspace) => workspace.id === activeId);
+  const groups = workspaces.reduce<Map<string, Workspace[]>>(
+    (map, workspace) => {
+      const key = workspace.group ?? "";
+      map.set(key, [...(map.get(key) ?? []), workspace]);
+      return map;
+    },
+    new Map(),
+  );
+
+  if (loading || !active)
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <div className="flex h-14 items-center gap-2 px-3 group-data-[collapsible=icon]:px-0">
+            <Skeleton className="size-8 rounded-lg" />
+            <Skeleton className="h-4 flex-1 group-data-[collapsible=icon]:hidden" />
+          </div>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                aria-label={t.switchWorkspace}
+                // Card-like surface so the current workspace reads as a distinct control.
+                className="bg-card shadow-xs ring-1 ring-foreground/5 hover:bg-sidebar-accent data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground dark:ring-foreground/10"
+              />
+            }
+          >
+            <WorkspaceMark workspace={active} />
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{active.name}</span>
+              {active.description ? (
+                <span className="truncate text-xs text-muted-foreground">
+                  {active.description}
+                </span>
+              ) : null}
+            </div>
+            <ChevronsUpDownIcon className="ml-auto text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--anchor-width) min-w-60"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            {[...groups.entries()].map(([group, items], index) => (
+              <DropdownMenuGroup key={group || index}>
+                {index > 0 ? <DropdownMenuSeparator /> : null}
+                <DropdownMenuLabel>{group || t.workspaces}</DropdownMenuLabel>
+                {items.map((workspace) => (
+                  <DropdownMenuItem
+                    key={workspace.id}
+                    onClick={() => onSelect(workspace)}
+                  >
+                    <WorkspaceMark workspace={workspace} className="size-6" />
+                    <div className="grid flex-1 leading-tight">
+                      <span className="truncate">{workspace.name}</span>
+                      {workspace.description ? (
+                        <span className="truncate text-xs text-muted-foreground">
+                          {workspace.description}
+                        </span>
+                      ) : null}
+                    </div>
+                    {workspace.id === activeId ? (
+                      <CheckIcon className="ml-auto" />
+                    ) : null}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
+            ))}
+            {actions ? (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>{actions}</DropdownMenuGroup>
+              </>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}