@majapisoftwares/ui 4.3.17 → 6.0.0

package/src/lib/i18n.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+export const locales = ["en", "pt-BR"] as const;
+export type Locale = (typeof locales)[number];
+export type Messages<T> = Record<Locale, T>;
+
+/** Declares a message catalog; every locale must provide every key. */
+export function defineMessages<T>(messages: Messages<T>) {
+  return messages;
+}
+
+const LocaleContext = createContext<Locale>("en");
+
+export function LocaleProvider({
+  locale,
+  children,
+}: {
+  locale: Locale;
+  children: ReactNode;
+}) {
+  return (
+    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
+  );
+}
+
+export function useLocale() {
+  return useContext(LocaleContext);
+}
+
+export function useMessages<T>(messages: Messages<T>): T {
+  return messages[useLocale()];
+}
+
+/** Picks the supported locale that best matches a list such as navigator.languages. */
+export function matchLocale(preferred: readonly string[]): Locale {
+  for (const tag of preferred) {
+    const lower = tag.toLowerCase();
+    if (lower.startsWith("pt")) return "pt-BR";
+    if (lower.startsWith("en")) return "en";
+  }
+  return "en";
+}
+
+export const uiMessages = defineMessages({
+  en: {
+    sidebar: "Sidebar",
+    toggleSidebar: "Toggle sidebar",
+    collapseSidebar: "Collapse sidebar",
+    expandSidebar: "Expand sidebar",
+    resizeSidebar: "Resize sidebar",
+    modeOpen: "Expanded",
+    modeCompact: "Compact",
+    modeClosed: "Hidden",
+    sidebarHint: (shortcut: string) =>
+      `Right-click for options · ${shortcut} hides`,
+    search: "Search",
+    noResults: "No results",
+    noData: "Nothing here yet",
+    clearSearch: "Clear search",
+    retry: "Retry",
+    loadFailed: "Couldn't load data",
+    staleData: "Showing data from the last successful load",
+    previous: "Previous",
+    next: "Next",
+    open: "Open",
+    page: (page: number, total: number) => `Page ${page} of ${total}`,
+    rows: (count: number) => `${count} ${count === 1 ? "row" : "rows"}`,
+    close: "Close",
+    language: "Language",
+    toggleTheme: "Toggle theme",
+    more: "More",
+    loading: "Loading",
+  },
+  "pt-BR": {
+    sidebar: "Barra lateral",
+    toggleSidebar: "Alternar barra lateral",
+    collapseSidebar: "Recolher barra lateral",
+    expandSidebar: "Expandir barra lateral",
+    resizeSidebar: "Redimensionar barra lateral",
+    modeOpen: "Expandida",
+    modeCompact: "Compacta",
+    modeClosed: "Escondida",
+    sidebarHint: (shortcut: string) =>
+      `Clique direito para opções · ${shortcut} esconde`,
+    search: "Buscar",
+    noResults: "Nenhum resultado",
+    noData: "Nada por aqui ainda",
+    clearSearch: "Limpar busca",
+    retry: "Tentar novamente",
+    loadFailed: "Não foi possível carregar os dados",
+    staleData: "Exibindo dados do último carregamento",
+    previous: "Anterior",
+    next: "Próxima",
+    open: "Abrir",
+    page: (page: number, total: number) => `Página ${page} de ${total}`,
+    rows: (count: number) => `${count} ${count === 1 ? "linha" : "linhas"}`,
+    close: "Fechar",
+    language: "Idioma",
+    toggleTheme: "Alternar tema",
+    more: "Mais",
+    loading: "Carregando",
+  },
+});
+
+export function useUiMessages() {
+  return useMessages(uiMessages);
+}

package/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/src/patterns/app-shell.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "cn";
+import {
+  Sidebar,
+  SidebarCollapse,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  type SidebarMode,
+} from "../components/ui/sidebar";
+import { Separator } from "../components/ui/separator";
+import { TooltipProvider } from "../components/ui/tooltip";
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  count?: number;
+}
+export interface NavigationGroup {
+  label?: string;
+  items: NavigationItem[];
+}
+
+export interface AppShellProps {
+  /** Square logo; stays in place in every sidebar mode. */
+  logo: ReactNode;
+  /** App name next to the logo; fades out when the sidebar is compact. */
+  name: string;
+  navigation: NavigationGroup[];
+  activeId: string;
+  onNavigate: (id: string) => void;
+  /** Rendered in the header next to the sidebar trigger, e.g. breadcrumbs. */
+  header?: ReactNode;
+  /** Rendered at the end of the header, e.g. locale or theme switchers. */
+  actions?: ReactNode;
+  /** Sidebar footer, e.g. a user menu. */
+  footer?: ReactNode;
+  defaultMode?: SidebarMode;
+  defaultWidth?: number;
+  /**
+   * Locks the shell to the viewport height so content (e.g. a `DataTable
+   * fillHeight`) fills the remaining space and scrolls internally.
+   */
+  fillHeight?: boolean;
+  children: ReactNode;
+}
+
+// Items without an icon still need something to show in compact mode.
+function ItemIcon({ item }: { item: NavigationItem }) {
+  return (
+    item.icon ?? (
+      <span
+        aria-hidden="true"
+        className="flex size-4 items-center justify-center text-xs font-semibold"
+      >
+        {item.label.charAt(0).toUpperCase()}
+      </span>
+    )
+  );
+}
+
+// The collapse control lives inside the sidebar; reopening needs one outside.
+// Shown on mobile and, on desktop, only while the sidebar is hidden (CSS, so
+// it is right from the first paint).
+function HeaderTrigger() {
+  return (
+    <div className="flex items-center md:hidden md:group-has-data-[collapsible=offcanvas]/sidebar-wrapper:flex">
+      <SidebarTrigger className="-ml-1" />
+      <Separator
+        orientation="vertical"
+        className="mr-2 ml-2 h-4 self-center!"
+      />
+    </div>
+  );
+}
+
+export function AppShell({
+  logo,
+  name,
+  navigation,
+  activeId,
+  onNavigate,
+  header,
+  actions,
+  footer,
+  defaultMode,
+  defaultWidth,
+  fillHeight = false,
+  children,
+}: AppShellProps) {
+  return (
+    <TooltipProvider delay={600}>
+      <SidebarProvider defaultMode={defaultMode} defaultWidth={defaultWidth}>
+        <Sidebar>
+          {/* Same height as the page header so their controls line up. */}
+          <SidebarHeader className="min-h-14 justify-center">
+            {/* The logo keeps its position across modes; only the name fades,
+                and it is clipped (never squeezed) by the sidebar width. */}
+            <div className="flex h-8 items-center gap-2 overflow-hidden">
+              <div className="flex size-8 shrink-0 items-center justify-center [&>*]:shrink-0">
+                {logo}
+              </div>
+              <span className="flex-1 truncate font-semibold whitespace-nowrap transition-opacity duration-200 ease-linear group-data-[collapsible=icon]:opacity-0">
+                {name}
+              </span>
+              <SidebarCollapse className="group-data-[collapsible=icon]:hidden" />
+            </div>
+            <div className="hidden group-data-[collapsible=icon]:block">
+              <SidebarCollapse />
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            {navigation.map((group, index) => (
+              <SidebarGroup key={group.label ?? index}>
+                {group.label ? (
+                  <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+                ) : null}
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <SidebarMenuItem key={item.id}>
+                      <SidebarMenuButton
+                        isActive={item.id === activeId}
+                        tooltip={item.label}
+                        aria-current={item.id === activeId ? "page" : undefined}
+                        onClick={() => onNavigate(item.id)}
+                      >
+                        <ItemIcon item={item} />
+                        <span>{item.label}</span>
+                      </SidebarMenuButton>
+                      {item.count !== undefined ? (
+                        <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
+                      ) : null}
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroup>
+            ))}
+          </SidebarContent>
+          {footer ? <SidebarFooter>{footer}</SidebarFooter> : null}
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset className={fillHeight ? "h-svh min-h-0" : undefined}>
+          <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4 md:px-6">
+            <HeaderTrigger />
+            <div className="min-w-0 flex-1">{header}</div>
+            {actions ? (
+              <div className="flex items-center gap-2">{actions}</div>
+            ) : null}
+          </header>
+          <div
+            className={cn(
+              "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6",
+              fillHeight && "min-h-0 overflow-hidden",
+            )}
+          >
+            {children}
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+}