@umituz/web-dashboard 4.7.1 → 5.0.0

package/src/domains/auth/components/shared/EmailInput.tsx

@@ -1,36 +1,18 @@
-/**
- * EmailInput
- *
- * Standardized email input used across all auth forms.
- * Renders label, input, error state, and disabled state consistently.
- */
-
 import { forwardRef } from "react";
-import { Input } from "../../../../primitives";
-import { cn } from "../../../../primitives";
+import { Input } from "@umituz/web-design-system/atoms";
+import { cn } from "@umituz/web-design-system/utils/cn";
 
 export interface EmailInputProps {
-  /** Input id (used to wire up the label) */
   id: string;
-  /** Label i18n key — resolved via `translate` */
   labelKey: string;
-  /** Placeholder i18n key */
   placeholderKey: string;
-  /** Current value */
   value: string;
-  /** Change handler */
   onChange: (value: string) => void;
-  /** Translation function */
   translate: (key: string) => string;
-  /** Auto-complete hint (default: "email") */
   autoComplete?: string;
-  /** Disable the input */
   disabled?: boolean;
-  /** Whether to mark the field as required (renders an asterisk) */
   required?: boolean;
-  /** Optional error message to display below the field */
   error?: string | null;
-  /** Custom className */
   className?: string;
 }
 

package/src/domains/auth/components/shared/PasswordInput.tsx

@@ -1,39 +1,20 @@
-/**
- * PasswordInput
- *
- * Password field with show/hide toggle, used across all auth forms.
- * Centralizes the visibility toggle, autoComplete, and label structure
- * so individual forms can stay focused on their unique concerns.
- */
-
 import { forwardRef, useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
-import { Input } from "../../../../primitives";
-import { Button } from "../../../../primitives";
-import { cn } from "../../../../primitives";
+import { Input } from "@umituz/web-design-system/atoms";
+import { Button } from "@umituz/web-design-system/atoms";
+import { cn } from "@umituz/web-design-system/utils/cn";
 
 export interface PasswordInputProps {
-  /** Input id (used to wire up the label) */
   id: string;
-  /** Label i18n key */
   labelKey: string;
-  /** Placeholder i18n key */
   placeholderKey: string;
-  /** Current value */
   value: string;
-  /** Change handler */
   onChange: (value: string) => void;
-  /** Translation function */
   translate: (key: string) => string;
-  /** Auto-complete hint (e.g., "current-password", "new-password") */
   autoComplete?: string;
-  /** Disable the input */
   disabled?: boolean;
-  /** Whether to mark the field as required (renders an asterisk) */
   required?: boolean;
-  /** Optional error message to display below the field */
   error?: string | null;
-  /** Custom className */
   className?: string;
 }
 

package/src/domains/auth/components/shared/PasswordStrengthIndicator.tsx

@@ -1,16 +1,6 @@
-/**
- * PasswordStrengthIndicator
- *
- * Renders a 4-segment strength bar plus a localized label band.
- * The label i18n key is computed from the strength band so the
- * component stays free of hardcoded strings. Bar/label colors come
- * from `--u-*` tones (weak/danger, fair/warning-2, good/warning,
- * strong/success).
- */
-
 import { useMemo } from "react";
 import { calculatePasswordStrength } from "../../utils/auth";
-import { cn } from "../../../../primitives";
+import { cn } from "@umituz/web-design-system/utils/cn";
 
 const STRENGTH_KEYS = {
   weak: 'auth.passwordStrength.weak',
@@ -29,9 +19,7 @@ const scoreToBand = (score: number): StrengthBand => {
 };
 
 export interface PasswordStrengthIndicatorProps {
-  /** Password to evaluate */
   password: string;
-  /** Translation function */
   translate: (key: string) => string;
 }
 

package/src/domains/auth/components/shared/SocialLoginButtons.tsx

@@ -1,28 +1,14 @@
-/**
- * SocialLoginButtons
- *
- * Renders a list of social auth providers as a row of icon buttons.
- * Generic over the provider id so adding a new provider is a config change,
- * not a code change.
- */
-
-import { Button } from "../../../../primitives";
+import { Button } from "@umituz/web-design-system/atoms";
 import { GoogleIcon, AppleIcon } from "./SocialProviderIcons";
 
 export type SocialProviderId = 'google' | 'apple';
 
 export interface SocialLoginButtonsProps {
-  /** Provider handlers keyed by provider id */
   onProvider: (id: SocialProviderId) => void;
-  /** Translation function */
   translate: (key: string) => string;
-  /** Disable all buttons (e.g., during form submission) */
   disabled?: boolean;
 }
 
-/**
- * Centralized provider config. Add new providers here and the UI follows.
- */
 const SOCIAL_PROVIDERS: ReadonlyArray<{
   id: SocialProviderId;
   labelKey: string;

package/src/domains/auth/utils/i18nKeys.ts

@@ -1,13 +1,4 @@
-/**
- * Auth Domain i18n Keys
- *
- * Centralized catalog of i18n keys used across auth components.
- * Components stay free of hardcoded strings and consume these
- * constants — the consumer app provides the actual translations.
- */
-
 export const AUTH_KEYS = {
-  // Login screen
   login: {
     welcomeBack: 'auth.login.welcomeBack',
     signInTo: 'auth.login.signInTo',
@@ -20,7 +11,6 @@ export const AUTH_KEYS = {
     orContinueWith: 'auth.login.orContinueWith',
   },
 
-  // Register screen
   register: {
     createAccount: 'auth.register.createAccount',
     join: 'auth.register.join',
@@ -39,7 +29,6 @@ export const AUTH_KEYS = {
     passwordsDoNotMatch: 'auth.register.passwordsDoNotMatch',
   },
 
-  // Forgot password
   forgotPassword: {
     title: 'auth.forgotPassword.title',
     description: 'auth.forgotPassword.description',
@@ -55,7 +44,6 @@ export const AUTH_KEYS = {
     step3: 'auth.forgotPassword.steps.step3',
   },
 
-  // Reset password
   resetPassword: {
     title: 'auth.resetPassword.title',
     description: 'auth.resetPassword.description',
@@ -68,7 +56,6 @@ export const AUTH_KEYS = {
     goToSignIn: 'auth.resetPassword.goToSignIn',
   },
 
-  // Shared fields
   fields: {
     email: 'auth.fields.email',
     password: 'auth.fields.password',
@@ -81,7 +68,6 @@ export const AUTH_KEYS = {
     fullName: 'auth.placeholders.fullName',
   },
 
-  // Errors
   errors: {
     invalidCredentials: 'auth.errors.invalidCredentials',
     loginFailed: 'auth.errors.loginFailed',
@@ -96,7 +82,6 @@ export const AUTH_KEYS = {
     resetFailed: 'auth.errors.resetFailed',
   },
 
-  // Password strength
   passwordStrength: {
     weak: 'auth.passwordStrength.weak',
     fair: 'auth.passwordStrength.fair',
@@ -104,20 +89,17 @@ export const AUTH_KEYS = {
     strong: 'auth.passwordStrength.strong',
   },
 
-  // Social
   social: {
     continueWithGoogle: 'auth.social.continueWithGoogle',
     continueWithApple: 'auth.social.continueWithApple',
   },
 
-  // Layout shell
   layout: {
     backToHome: 'auth.layout.backToHome',
     orContinueWith: 'auth.layout.orContinueWith',
     allRightsReserved: 'auth.layout.allRightsReserved',
   },
 
-  // Accessibility
   a11y: {
     showPassword: 'auth.a11y.showPassword',
     hidePassword: 'auth.a11y.hidePassword',

package/src/domains/charts/components.tsx

@@ -244,7 +244,7 @@ export function Donut({
             cy={size / 2}
             r={radius}
             fill="none"
-            stroke="var(--u-color-surface-muted)"
+            stroke="var(--color-muted)"
             strokeWidth={thickness}
           />
           {segments.map((seg, i) => {
@@ -454,7 +454,7 @@ export function LineChart({
                   cx={xAt(i)}
                   cy={yFn(v)}
                   r={hover === i ? 3.4 : 0}
-                  fill="var(--u-color-surface)"
+                  fill="var(--color-card)"
                   stroke={toneOf(s, si)}
                   strokeWidth={2}
                 />

package/src/domains/layouts/components/BrandLogo.tsx

@@ -1,21 +1,10 @@
-import { cn } from "../../../primitives";
+import { cn } from "@umituz/web-design-system/utils/cn";
 
 interface BrandLogoProps {
   className?: string;
   size?: number;
 }
 
-/**
- * BrandLogo Component
- *
- * Displays the application brand logo as an SVG.
- * Colors come from the package tokens (`--u-color-primary`,
- * `--u-color-secondary`) so hosts restyle it by overriding CSS
- * custom properties — no host theme variables required.
- *
- * @param className - Optional CSS classes for styling
- * @param size - Width and height in pixels (default: 32)
- */
 export const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {
   return (
     <svg
@@ -27,24 +16,22 @@ export const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {
       className={cn("udb-brand-logo", className)}
       aria-hidden="true"
     >
-      {/* Solid Foundation / Platform */}
       <rect
         x="15"
         y="65"
         width="70"
         height="15"
         rx="4"
-        fill="var(--u-color-primary)"
+        fill="var(--color-primary)"
       />
 
-      {/* Assembly Paths / Structure */}
       <rect
         x="25"
         y="25"
         width="12"
         height="40"
         rx="2"
-        fill="var(--u-color-primary)"
+        fill="var(--color-primary)"
       />
       <rect
         x="44"
@@ -52,7 +39,7 @@ export const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {
         width="12"
         height="30"
         rx="2"
-        fill="var(--u-color-primary)"
+        fill="var(--color-primary)"
       />
       <rect
         x="63"
@@ -60,25 +47,23 @@ export const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {
         width="12"
         height="45"
         rx="2"
-        fill="var(--u-color-primary)"
+        fill="var(--color-primary)"
       />
 
-      {/* Modern Accent - The 'Assembly' Bridge */}
       <rect
         x="20"
         y="45"
         width="60"
         height="10"
         rx="2"
-        fill="var(--u-color-secondary)"
+        fill="var(--color-secondary)"
       />
 
-      {/* Connection Point / Beacon */}
       <circle
         cx="50"
         cy="20"
         r="5"
-        fill="var(--u-color-secondary)"
+        fill="var(--color-secondary)"
       />
     </svg>
   );

package/src/domains/layouts/components/DashboardHeader.tsx

@@ -3,43 +3,25 @@ import {
   Bell, X, Sun, Moon, Menu, User, Settings, LogOut,
   ChevronDown
 } from "lucide-react";
-import { Button } from "../../../primitives";
+import { Button } from "@umituz/web-design-system/atoms";
 import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import type { DashboardHeaderProps, HeaderProfileItem } from "../types/layout";
 import type { DashboardNotification } from "../types/notification";
 import type { DashboardUser } from "../types/user";
 import { formatNotificationTime } from "../utils/dashboard";
 
 interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
-  /** Auth user */
   user?: DashboardUser;
-  /** Notifications */
   notifications?: DashboardNotification[];
-  /** Logout function */
   onLogout?: () => Promise<void>;
-  /** Mark all as read function */
   onMarkAllRead?: () => void;
-  /** Dismiss notification function */
   onDismissNotification?: (id: string) => void;
-  /** Settings route */
   settingsRoute?: string;
-  /** Profile route */
   profileRoute?: string;
-  /** Host-injected profile-menu entries — billing and friends live here,
-    *  not in the skeleton. */
   extraProfileItems?: HeaderProfileItem[];
 }
 
-/**
- * Dashboard Header Component
- *
- * Displays top navigation bar with theme toggle, notifications,
- * user menu, and organisation selector. Styling is entirely
- * `udb-header*` / `udb-menu*` classes from the package stylesheet.
- *
- * @param props - Dashboard header props
- */
 export const DashboardHeader = ({
   collapsed,
   setCollapsed,
@@ -72,7 +54,6 @@ export const DashboardHeader = ({
       await onLogout?.();
       navigate("/login");
     } catch {
-      // Error handling can be added by parent component
     }
   };
 
@@ -93,7 +74,6 @@ export const DashboardHeader = ({
       </div>
 
       <div className="udb-header__actions">
-        {/* Theme Toggle — rendered only when the host app wires it up */}
         {onToggleTheme && (
           <Button
             variant="ghost"
@@ -107,7 +87,6 @@ export const DashboardHeader = ({
           </Button>
         )}
 
-        {/* Notifications */}
         <div className="udb-header__anchor">
           <Button
             variant="ghost"

package/src/domains/layouts/components/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useLocation, Outlet, Navigate } from "react-router-dom";
-import { useT } from "../../../i18n";
-import { Skeleton } from "../../../primitives";
+import { useT } from "@umituz/web-localization/react";
+import { Skeleton } from "@umituz/web-design-system/atoms";
 import { DashboardSidebar } from "./DashboardSidebar";
 import { DashboardHeader } from "./DashboardHeader";
 import type { DashboardLayoutConfig } from "../types/layout";
@@ -9,54 +9,20 @@ import type { DashboardNotification } from "../types/notification";
 import type { DashboardUser } from "../types/user";
 
 interface DashboardLayoutProps {
-  /** Layout configuration */
   config: DashboardLayoutConfig;
-  /** Auth user */
   user?: DashboardUser;
-  /** Auth loading state */
   authLoading?: boolean;
-  /** Authenticated state */
   isAuthenticated?: boolean;
-  /** Notifications */
   notifications?: DashboardNotification[];
-  /** Logout function */
   onLogout?: () => Promise<void>;
-  /** Mark all as read function */
   onMarkAllRead?: () => void;
-  /** Dismiss notification function */
   onDismissNotification?: (id: string) => void;
-  /** Login route for redirect */
   loginRoute?: string;
-  /** Current theme, forwarded to the header toggle (default: "light") */
   theme?: "light" | "dark";
-  /** Theme toggle handler — header toggle is hidden when omitted */
   onToggleTheme?: () => void;
-  /**
-   * Artificial route-transition skeleton duration in ms (default: 0 = off).
-   * Content renders immediately by default; set > 0 only if you want
-   * a skeleton to mask route swaps.
-   */
   routeTransitionMs?: number;
 }
 
-/**
- * Dashboard Layout Component
- *
- * Main layout wrapper for dashboard pages.
- * Provides sidebar, header, and content area with responsive design.
- *
- * Features:
- * - Collapsible sidebar
- * - Mobile menu overlay
- * - Breadcrumb page titles
- * - Loading skeletons (opt-in via routeTransitionMs)
- * - Auth protection
- *
- * All styling comes from `udb-*` classes in the package stylesheet
- * (`@umituz/web-dashboard/styles.css`) — no utility framework required.
- *
- * @param props - Dashboard layout props
- */
 export const DashboardLayout = ({
   config,
   user,
@@ -109,7 +75,6 @@ export const DashboardLayout = ({
 
   return (
     <div className="udb-root udb-layout">
-      {/* Desktop Sidebar */}
       <aside
         className={`udb-layout__sidebar ${collapsed ? "udb-layout__sidebar--collapsed" : ""}`}
       >
@@ -123,7 +88,6 @@ export const DashboardLayout = ({
         />
       </aside>
 
-      {/* Mobile Menu Overlay */}
       {mobileOpen && (
         <div className="udb-layout__mobile">
           <div className="udb-layout__backdrop" onClick={() => setMobileOpen(false)} />
@@ -140,7 +104,6 @@ export const DashboardLayout = ({
         </div>
       )}
 
-      {/* Main Content Area */}
       <div className="udb-layout__main">
         <DashboardHeader
           collapsed={collapsed}

package/src/domains/layouts/components/DashboardSidebar.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 
-import { Button, cn } from "../../../primitives";
+import { Button } from "@umituz/web-design-system/atoms";
+import { cn } from "@umituz/web-design-system/utils/cn";
 import { BrandLogo } from "./BrandLogo";
 import { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from "lucide-react";
 import type { DashboardSidebarProps } from "../types/layout";
@@ -11,29 +12,14 @@ import type { SidebarGroup } from "../types/sidebar";
 import { filterSidebarItems } from "../utils/dashboard";
 
 interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
-  /** Sidebar groups configuration */
   sidebarGroups: SidebarGroup[];
-  /** Brand name */
   brandName?: string;
-  /** Brand tagline */
   brandTagline?: string;
-  /** Create post route */
   createPostRoute?: string;
-  /** Whether to show the primary create button (default: true) */
   showCreatePost?: boolean;
-  /** Auth user */
   user?: DashboardUser;
 }
 
-/**
- * Dashboard Sidebar Component
- *
- * Displays collapsible sidebar with navigation menu items.
- * Supports app-based filtering (mobile/web) and collapsible groups.
- * Styling is entirely `udb-sidebar*` classes from the package stylesheet.
- *
- * @param props - Dashboard sidebar props
- */
 export const DashboardSidebar = ({
   collapsed,
   setCollapsed,
@@ -57,7 +43,6 @@ export const DashboardSidebar = ({
 
   return (
     <div className={cn("udb-sidebar", collapsed && "udb-sidebar--collapsed")}>
-      {/* Brand Section */}
       <div className="udb-sidebar__brand">
         <BrandLogo size={32} />
         {!collapsed && (
@@ -68,7 +53,6 @@ export const DashboardSidebar = ({
         )}
       </div>
 
-      {/* Create Button */}
       {showCreatePost && createPostRoute && (
         <div className="udb-sidebar__create">
           <Link to={createPostRoute}>
@@ -84,7 +68,6 @@ export const DashboardSidebar = ({
         </div>
       )}
 
-      {/* Navigation */}
       <nav className="udb-sidebar__nav">
         <div className="udb-sidebar__groups">
           {sidebarGroups.map((group) => {
@@ -135,7 +118,6 @@ export const DashboardSidebar = ({
         </div>
       </nav>
 
-      {/* Collapse Toggle */}
       <div className="udb-sidebar__footer">
         {!collapsed && (
           <p className="udb-sidebar__footer-label">

package/src/domains/permissions/PermissionsContext.tsx

@@ -1,20 +1,12 @@
-/**
- * Permissions context — provides the matrix + active role and a
- * `can(permission)` helper bound to them. Guard components
- * (<RequirePermission>, <Can>) consume this context.
- */
-
 import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react";
 import { Lock } from "lucide-react";
-import { useT } from "../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import { hasPermission } from "./hasPermission";
 import { PERMISSIONS_KEYS } from "./utils/i18nKeys";
 import type { Permission, PermissionMatrix, RoleKey } from "./types";
 
 export interface PermissionsProviderProps {
-  /** Role x permission matrix. */
   matrix: PermissionMatrix;
-  /** Active user's role. */
   role: RoleKey | null | undefined;
   children: ReactNode;
 }
@@ -57,7 +49,6 @@ export const usePermissions = (): PermissionsContextValue => {
   return context;
 };
 
-/** Default lock screen rendered by RequirePermission when denied. */
 const ForbiddenFallback = () => {
   const t = useT();
   return (
@@ -72,17 +63,11 @@ const ForbiddenFallback = () => {
 };
 
 export interface RequirePermissionProps {
-  /** Permission required to render the children. */
   permission: Permission;
   children: ReactNode;
-  /** Rendered instead of the default lock screen when denied. */
   fallback?: ReactNode;
 }
 
-/**
- * Page-level permission gate — renders the fallback (lock screen by
- * default) instead of the children when `can(permission)` is false.
- */
 export const RequirePermission = ({
   permission,
   children,
@@ -95,7 +80,6 @@ export const RequirePermission = ({
 
 export interface CanProps extends RequirePermissionProps {}
 
-/** Declarative twin of RequirePermission for inline use. */
 export const Can = ({ permission, children, fallback }: CanProps) => (
   <RequirePermission permission={permission} fallback={fallback}>
     {children}

package/src/domains/permissions/utils/i18nKeys.ts

@@ -1,8 +1,3 @@
-/**
- * Permission domain i18n keys — the documented string contract.
- * Hosts translate these via <DashboardI18nProvider t={...}>.
- */
-
 export const PERMISSIONS_KEYS = {
   forbidden: {
     title: "permissions.forbidden.title",

package/src/domains/session/DemoLogin.tsx

@@ -1,18 +1,10 @@
-/**
- * DemoLogin — one-click demo entry (fleet pattern: log in as a demo
- * persona without a password). Controlled: the click delegates to
- * `onDemo` (typically `session.demoLogin`); the label defaults to
- * the i18n catalog.
- */
-
 import { UserRound } from "lucide-react";
-import { Button } from "../../primitives";
-import { useT } from "../../i18n";
+import { Button } from "@umituz/web-design-system/atoms";
+import { useT } from "@umituz/web-localization/react";
 import { SESSION_KEYS } from "./utils/i18nKeys";
 
 export interface DemoLoginProps {
   onDemo: (userId: string) => void | Promise<void>;
-  /** Demo user id to log in as. */
   userId: string;
   label?: string;
   variant?: "default" | "outline" | "ghost";

package/src/domains/session/OrgSwitcher.tsx

@@ -1,15 +1,7 @@
-/**
- * OrgSwitcher — tenant switcher trigger + dropdown.
- *
- * Controlled component: tenants and the active id come in as props,
- * switches are delegated via onSwitch. Styled entirely with existing
- * udb-* classes (profile button, avatar, menu).
- */
-
 import { useState } from "react";
 import { Building2, Check, ChevronDown } from "lucide-react";
-import { cn } from "../../primitives";
-import { useT } from "../../i18n";
+import { cn } from "@umituz/web-design-system/utils/cn";
+import { useT } from "@umituz/web-localization/react";
 import { SESSION_KEYS } from "./utils/i18nKeys";
 import type { Tenant } from "./types";