@majapisoftwares/ui 6.0.0 → 6.1.2

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,176 @@
+"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}
+              className="transition-opacity group-data-[collapsible=icon]:group-hover/menu-button:opacity-70 group-data-[collapsible=icon]:group-data-popup-open/menu-button:opacity-70"
+            />
+            <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>
+  );
+}