@umituz/web-dashboard 3.2.2 → 4.0.0

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

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import { useTranslation } from "react-i18next";
+import { useT } from "../../../i18n";
 
-import { Button } from "@umituz/web-design-system/atoms";
+import { Button, cn } from "../../../primitives";
 import { BrandLogo } from "./BrandLogo";
 import { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from "lucide-react";
 import type { DashboardSidebarProps } from "../types/layout";
@@ -19,6 +19,8 @@ interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
   brandTagline?: string;
   /** Create post route */
   createPostRoute?: string;
+  /** Whether to show the primary create button (default: true) */
+  showCreatePost?: boolean;
   /** Auth user */
   user?: DashboardUser;
 }
@@ -28,6 +30,7 @@ interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
  *
  * 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
  */
@@ -38,10 +41,11 @@ export const DashboardSidebar = ({
   brandName = "App",
   brandTagline = "grow smarter",
   createPostRoute = "/dashboard/create",
+  showCreatePost = true,
   user,
 }: DashboardSidebarPropsExtended) => {
   const location = useLocation();
-  const { t } = useTranslation();
+  const t = useT();
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
 
   const toggleGroup = (title: string) => {
@@ -52,39 +56,37 @@ export const DashboardSidebar = ({
   };
 
   return (
-    <div className="flex h-full flex-col">
+    <div className={cn("udb-sidebar", collapsed && "udb-sidebar--collapsed")}>
       {/* Brand Section */}
-      <div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-4 transition-all duration-300">
+      <div className="udb-sidebar__brand">
         <BrandLogo size={32} />
         {!collapsed && (
-          <div className="flex flex-col -gap-1">
-            <span className="text-2xl font-black text-sidebar-foreground tracking-tighter leading-none">{brandName}</span>
-            <span className="text-[11px] font-bold text-primary/70 lowercase tracking-tight mt-2 ml-1 select-none underline decoration-primary/40 underline-offset-[6px] decoration-2">
-              {brandTagline}
-            </span>
+          <div className="udb-sidebar__brand-text">
+            <span className="udb-sidebar__brand-name">{brandName}</span>
+            <span className="udb-sidebar__brand-tagline">{brandTagline}</span>
           </div>
         )}
       </div>
 
       {/* Create Button */}
-      <div className="px-3 py-4 border-b border-sidebar-border/50">
-        <Link to={createPostRoute}>
-          <Button
-            variant="default"
-            className={`w-full gap-3 shadow-glow transition-all active:scale-95 group overflow-hidden rounded-xl ${
-              collapsed ? "px-0 justify-center h-10 w-10 mx-auto" : "justify-start px-4 h-11"
-            }`}
-            title={collapsed ? t('sidebar.createPost') : undefined}
-          >
-            <PenTool className={`shrink-0 transition-transform duration-300 ${collapsed ? "h-5 w-5" : "h-4 w-4 group-hover:scale-110"}`} />
-            {!collapsed && <span className="font-bold tracking-tight">{t('sidebar.createPost')}</span>}
-          </Button>
-        </Link>
-      </div>
+      {showCreatePost && createPostRoute && (
+        <div className="udb-sidebar__create">
+          <Link to={createPostRoute}>
+            <Button
+              variant="default"
+              className={cn("udb-sidebar__create-btn", collapsed && "udb-sidebar__create-btn--collapsed")}
+              title={collapsed ? t('sidebar.createPost') : undefined}
+            >
+              <PenTool className="udb-sidebar__create-icon" />
+              {!collapsed && <span className="udb-sidebar__create-label">{t('sidebar.createPost')}</span>}
+            </Button>
+          </Link>
+        </div>
+      )}
 
       {/* Navigation */}
-      <nav className="flex-1 overflow-y-auto px-2 py-3 scrollbar-hide">
-        <div className="space-y-6">
+      <nav className="udb-sidebar__nav">
+        <div className="udb-sidebar__groups">
           {sidebarGroups.map((group) => {
             const filteredItems = filterSidebarItems(group.items, user);
 
@@ -93,22 +95,23 @@ export const DashboardSidebar = ({
             const isGroupCollapsed = collapsedGroups[group.title];
 
             return (
-              <div key={group.title} className="space-y-1">
+              <div key={group.title} className="udb-sidebar__group">
                 {!collapsed && (
                   <button
+                    type="button"
                     onClick={() => toggleGroup(group.title)}
-                    className="w-full flex items-center justify-between px-3 py-2 mb-1 rounded-lg hover:bg-sidebar-accent/30 transition-all duration-200 group/header"
+                    className="udb-sidebar__group-toggle"
                   >
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/40 group-hover/header:text-sidebar-foreground/70 transition-colors">
-                      {group.title === "sidebar.ai" ? `${brandName} AI` : t(group.title)}
+                    <span className="udb-sidebar__group-title">
+                      {t(group.title, { brand: brandName })}
                     </span>
-                    <div className="flex-shrink-0">
+                    <span className="udb-sidebar__group-chevron">
                       {isGroupCollapsed ? (
-                        <ChevronRight className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
+                        <ChevronRight className="udb-sidebar__chevron-icon" />
                       ) : (
-                        <ChevronDown className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
+                        <ChevronDown className="udb-sidebar__chevron-icon" />
                       )}
-                    </div>
+                    </span>
                   </button>
                 )}
 
@@ -118,14 +121,10 @@ export const DashboardSidebar = ({
                     <Link
                       key={item.path}
                       to={item.path}
-                      className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 ${
-                        active
-                          ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
-                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground"
-                      } ${collapsed ? "justify-center" : ""}`}
+                      className={cn("udb-sidebar__item", active && "udb-sidebar__item--active")}
                       title={collapsed ? t(item.label) : undefined}
                     >
-                      <item.icon className={`h-4 w-4 shrink-0 transition-transform duration-200 ${active && "scale-110"}`} />
+                      <item.icon className="udb-sidebar__item-icon" />
                       {!collapsed && <span>{t(item.label)}</span>}
                     </Link>
                   );
@@ -137,17 +136,15 @@ export const DashboardSidebar = ({
       </nav>
 
       {/* Collapse Toggle */}
-      <div className="border-t border-sidebar-border p-3">
-        <div className={`flex items-center ${collapsed ? "justify-center" : "justify-between"}`}>
-          {!collapsed && (
-            <p className="text-[10px] uppercase tracking-wider text-sidebar-foreground/40 font-bold px-2">
-              {t('sidebar.system')}
-            </p>
-          )}
-          <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="text-sidebar-foreground/70">
-            {collapsed ? <Menu className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-          </Button>
-        </div>
+      <div className="udb-sidebar__footer">
+        {!collapsed && (
+          <p className="udb-sidebar__footer-label">
+            {t('sidebar.system')}
+          </p>
+        )}
+        <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="udb-sidebar__footer-btn">
+          {collapsed ? <Menu className="udb-sidebar__footer-icon" /> : <ChevronLeft className="udb-sidebar__footer-icon" />}
+        </Button>
       </div>
     </div>
   );

package/src/domains/layouts/types/layout.ts

@@ -16,6 +16,10 @@ export interface DashboardHeaderProps {
   setMobileOpen: (open: boolean) => void;
   /** Current page title */
   title: string;
+  /** Current resolved theme; defaults to "light" rendering when omitted */
+  theme?: "light" | "dark";
+  /** Theme toggle handler — the toggle button is hidden when omitted */
+  onToggleTheme?: () => void;
 }
 
 /**
@@ -34,8 +38,10 @@ export interface DashboardSidebarProps {
 export interface DashboardLayoutConfig {
   /** Sidebar groups */
   sidebarGroups: import('./sidebar').SidebarGroup[];
-  /** Extra title mappings for routes */
+  /** Extra title mappings for routes — values may be i18n keys or literal strings */
   extraTitleMap?: Record<string, string>;
+  /** Title used when no sidebar item or extra mapping matches the route (default: "Dashboard") */
+  defaultTitle?: string;
   /** Brand name */
   brandName?: string;
   /** Brand tagline */

package/src/domains/layouts/types/user.ts

@@ -4,6 +4,8 @@
  * Type definitions for user profile
  */
 
+import type { ComponentType } from "react";
+
 /**
  * User profile info for header
  */
@@ -29,7 +31,7 @@ export interface UserNavMenuItem {
   /** Display label */
   label: string;
   /** Icon component */
-  icon: React.ComponentType<{ className?: string }>;
+  icon: ComponentType<{ className?: string }>;
   /** Route path */
   path: string;
 }

package/src/domains/modules/build.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { Circle } from "lucide-react";
+import { buildNav, buildRoutes } from "./build";
+import type { DashboardModule } from "./types";
+
+const icon = Circle as unknown as DashboardModule["icon"];
+
+const MODULES: DashboardModule[] = [
+  {
+    path: "/dashboard",
+    labelKey: "nav.dashboard",
+    icon,
+    navGroup: "nav.overview",
+    order: 1,
+    permission: "dashboard.view",
+    element: <div>dashboard</div>,
+  },
+  {
+    path: "/sales",
+    labelKey: "nav.sales",
+    icon,
+    navGroup: "nav.commercial",
+    order: 2,
+    permission: "sales.view",
+    element: <div>sales</div>,
+  },
+  {
+    path: "/sales/:id",
+    labelKey: "nav.salesDetail",
+    icon,
+    navGroup: "nav.commercial",
+    inNav: false,
+    permission: "sales.view",
+    element: <div>sales detail</div>,
+  },
+  {
+    path: "/reports",
+    labelKey: "nav.reports",
+    icon,
+    navGroup: "nav.insight",
+    order: 1,
+    element: <div>reports</div>,
+  },
+];
+
+const allowAll = () => true;
+const denySales = (permission: string) => permission !== "sales.view";
+
+describe("buildRoutes", () => {
+  it("maps every module to a route config", () => {
+    const routes = buildRoutes(MODULES);
+    expect(routes.map((route) => route.path)).toEqual([
+      "/dashboard",
+      "/sales",
+      "/sales/:id",
+      "/reports",
+    ]);
+  });
+});
+
+describe("buildNav", () => {
+  it("groups by navGroup preserving first appearance and sorting by order", () => {
+    const nav = buildNav(MODULES, { can: allowAll });
+    expect(nav.map((group) => group.title)).toEqual([
+      "nav.overview",
+      "nav.commercial",
+      "nav.insight",
+    ]);
+    expect(nav[0].items.map((item) => item.label)).toEqual(["nav.dashboard"]);
+    expect(nav[2].items.map((item) => item.label)).toEqual(["nav.reports"]);
+  });
+
+  it("hides detail routes (inNav: false)", () => {
+    const nav = buildNav(MODULES, { can: allowAll });
+    const labels = nav.flatMap((group) => group.items.map((item) => item.path));
+    expect(labels).not.toContain("/sales/:id");
+  });
+
+  it("filters modules the role cannot see", () => {
+    const nav = buildNav(MODULES, { can: denySales });
+    const paths = nav.flatMap((group) => group.items.map((item) => item.path));
+    expect(paths).toEqual(["/dashboard", "/reports"]);
+  });
+
+  it("drops groups emptied by the permission filter", () => {
+    const nav = buildNav(MODULES, { can: denySales });
+    expect(nav.map((group) => group.title)).toEqual(["nav.overview", "nav.insight"]);
+  });
+
+  it("keeps permissionless modules always visible", () => {
+    const denyAll = () => false;
+    const nav = buildNav(MODULES, { can: denyAll });
+    expect(nav.flatMap((group) => group.items.map((item) => item.path))).toEqual([
+      "/reports",
+    ]);
+  });
+});

package/src/domains/modules/build.tsx

@@ -0,0 +1,71 @@
+/**
+ * buildRoutes / buildNav — derive route configs and sidebar groups
+ * from a single DashboardModule list.
+ *
+ * - buildRoutes wraps every permissioned module's element in
+ *   <RequirePermission>, so hosts only map the result to <Route>.
+ * - buildNav filters by the same permissions via `can`, hides
+ *   inNav:false detail routes, groups by navGroup (first-appearance
+ *   order) and sorts items by `order` (stable for ties).
+ */
+
+import type { ReactNode } from "react";
+import type { SidebarGroup } from "../layouts/types";
+import { RequirePermission } from "../permissions";
+import type { Permission } from "../permissions/types";
+import type { DashboardModule } from "./types";
+
+export interface RouteConfig {
+  path: string;
+  element: ReactNode;
+}
+
+export const buildRoutes = (modules: readonly DashboardModule[]): RouteConfig[] =>
+  modules.map((module) => ({
+    path: module.path,
+    element: module.permission ? (
+      <RequirePermission permission={module.permission}>
+        {module.element}
+      </RequirePermission>
+    ) : (
+      module.element
+    ),
+  }));
+
+export interface BuildNavOptions {
+  /** Permission check, e.g. usePermissions().can. */
+  can: (permission: Permission) => boolean;
+}
+
+export const buildNav = (
+  modules: readonly DashboardModule[],
+  { can }: BuildNavOptions,
+): SidebarGroup[] => {
+  const visible = modules
+    .filter((module) => module.inNav !== false)
+    .filter((module) => !module.permission || can(module.permission));
+
+  // Groups keep their first-appearance order in the module list;
+  // `order` sorts items within their group.
+  const grouped = new Map<string, DashboardModule[]>();
+  for (const module of visible) {
+    const items = grouped.get(module.navGroup) ?? [];
+    items.push(module);
+    grouped.set(module.navGroup, items);
+  }
+
+  return [...grouped.entries()].map(([title, items]) => ({
+    title,
+    items: items
+      .slice()
+      .sort(
+        (a, b) =>
+          (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER),
+      )
+      .map((module) => ({
+        label: module.labelKey,
+        icon: module.icon,
+        path: module.path,
+      })),
+  }));
+};

package/src/domains/modules/index.ts

@@ -0,0 +1,2 @@
+export { buildRoutes, buildNav, type RouteConfig, type BuildNavOptions } from "./build";
+export { type DashboardModule } from "./types";

package/src/domains/modules/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Dashboard module model — the single source of truth a host app
+ * registers once per module; routes and sidebar nav are both derived
+ * from it (see build.ts). Generalizes the texora/visora pattern
+ * where MODULE_ROUTES and NAV_GROUPS were hand-kept in sync.
+ */
+
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import type { Permission } from "../permissions/types";
+
+export interface DashboardModule {
+  /** Route path (may contain params, e.g. "/sales/:id"). */
+  path: string;
+  /** i18n key (or plain label) for nav + page headers. */
+  labelKey: string;
+  /** lucide-react icon for the nav item. */
+  icon: LucideIcon;
+  /** Nav group title key — modules with the same key land in one group. */
+  navGroup: string;
+  /** Page content; permission-guarded automatically when `permission` is set. */
+  element: ReactNode;
+  /** Permission required to see/use this module (optional). */
+  permission?: Permission;
+  /** Sort weight inside its nav group (lower first, default last). */
+  order?: number;
+  /** Include in the nav (default true — set false for detail routes). */
+  inNav?: boolean;
+}

package/src/domains/onboarding/components/AppFocusStep.tsx

@@ -1,109 +1,140 @@
-import { Check } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import type { OnboardingState } from "../types/onboarding";
+/**
+ * AppFocusStep
+ *
+ * Second step of onboarding: which platforms is the user building for.
+ * Icons are Lucide components (no emoji). State mapping is
+ * config-driven: each option declares which state field it toggles.
+ */
+
+import { Check, Smartphone, Monitor, Sparkles } from "lucide-react";
+import { useT } from "../../../i18n";
+import { cn } from "../../../primitives";
+import type {
+  OnboardingState,
+  AppTypeOption,
+} from "../types/onboarding";
+import { ONBOARDING_KEYS } from "../utils/i18nKeys";
 
-interface AppFocusStepProps {
-  /** Current onboarding state */
+export interface AppFocusStepProps {
   state: OnboardingState;
-  /** Update state function */
   updateState: (updates: Partial<OnboardingState>) => void;
-  /** Custom app type options */
-  appTypes?: Array<{
-    id: string;
-    label: string;
-    description: string;
-    icon: string;
-  }>;
+  appTypes?: AppTypeOption[];
 }
 
 /**
- * App Focus Selection Step
- *
- * Second step - select which app types to focus on (mobile/web)
+ * Each option toggles a `stateField` of OnboardingState. This keeps the
+ * wizard data-driven — adding a new platform doesn't require a code
+ * change in this file. Consumer-supplied options may omit `stateField`;
+ * it is then derived from the well-known ids below.
  */
+type AppFocusStateField = NonNullable<AppTypeOption["stateField"]>;
+
+const DEFAULT_STATE_FIELD_BY_ID: Record<string, AppFocusStateField> = {
+  mobile: "hasMobileApp",
+  web: "hasWebApp",
+};
+
+const DEFAULT_OPTIONS: AppTypeOption[] = [
+  {
+    id: "mobile",
+    name: "Mobile App",
+    description: "iOS or Android application",
+    icon: Smartphone,
+    stateField: "hasMobileApp",
+  },
+  {
+    id: "web",
+    name: "Web App",
+    description: "Web application or website",
+    icon: Monitor,
+    stateField: "hasWebApp",
+  },
+];
+
 export const AppFocusStep = ({
   state,
   updateState,
   appTypes,
 }: AppFocusStepProps) => {
-  // Default app types
-  const defaultAppTypes = [
-    {
-      id: "mobile",
-      label: "Mobile App",
-      description: "iOS or Android application",
-      icon: "📱",
-    },
-    {
-      id: "web",
-      label: "Web App",
-      description: "Web application or website",
-      icon: "💻",
-    },
-  ];
-
-  const types = appTypes || defaultAppTypes;
+  const t = useT();
+
+  const resolveStateField = (option: AppTypeOption): AppFocusStateField | undefined =>
+    option.stateField ?? DEFAULT_STATE_FIELD_BY_ID[option.id];
+
+  const types = (appTypes ?? DEFAULT_OPTIONS).map((option) => ({
+    ...option,
+    resolvedField: resolveStateField(option),
+  }));
+
+  const toggle = (option: AppTypeOption, field: AppFocusStateField) => {
+    const current = Boolean(state[field]);
+    updateState({ [field]: !current } as Partial<OnboardingState>);
+  };
+
+  const anySelected = types.some((type) =>
+    type.resolvedField ? Boolean(state[type.resolvedField]) : false,
+  );
 
   return (
-    <div className="w-full max-w-xl">
-      <div className="text-center mb-10">
-        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
-          What type of app are you building?
+    <div className="udb-step">
+      <div className="udb-step__header">
+        <h1 className="udb-step__title">
+          {t(ONBOARDING_KEYS.appFocus.title)}
         </h1>
-        <p className="text-muted-foreground">
-          Select all that apply - you can change this later
+        <p className="udb-step__description">
+          {t(ONBOARDING_KEYS.appFocus.description)}
         </p>
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
+      <div className="udb-step__options udb-step__options--list" role="group" aria-label={t(ONBOARDING_KEYS.appFocus.title)}>
         {types.map((type) => {
-          const isSelected = type.id === "mobile" ? state.hasMobileApp : state.hasWebApp;
-
+          const isSelected = type.resolvedField
+            ? Boolean(state[type.resolvedField])
+            : false;
+          const Icon = type.icon;
           return (
             <button
               key={type.id}
-              onClick={() => {
-                if (type.id === "mobile") {
-                  updateState({ hasMobileApp: !state.hasMobileApp });
-                } else {
-                  updateState({ hasWebApp: !state.hasWebApp });
-                }
-              }}
+              type="button"
+              aria-pressed={isSelected}
+              onClick={() => type.resolvedField && toggle(type, type.resolvedField)}
               className={cn(
-                "w-full flex items-center gap-4 p-6 rounded-2xl border bg-background text-left transition-all",
-                isSelected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
+                "udb-choice",
+                isSelected && "udb-choice--selected",
               )}
             >
-              <div
+              <span
                 className={cn(
-                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl shrink-0 transition-transform",
-                  isSelected && "scale-110"
+                  "udb-choice__icon-box udb-choice__icon-box--lg",
+                  isSelected && "udb-choice__icon-box--on",
                 )}
               >
-                {type.icon}
-              </div>
+                <Icon className="udb-choice__icon udb-choice__icon--lg" aria-hidden="true" />
+              </span>
 
-              <div className="flex-1">
-                <p className="font-bold text-foreground text-lg">{type.label}</p>
-                <p className="text-sm text-muted-foreground">{type.description}</p>
-              </div>
+              <span className="udb-choice__body">
+                <span className="udb-choice__label udb-choice__label--lg">{type.name}</span>
+                <span className="udb-choice__description">{type.description}</span>
+              </span>
 
-              <div
+              <span
                 className={cn(
-                  "w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-                  isSelected ? "border-primary bg-primary text-white" : "border-muted-foreground/30"
+                  "udb-choice__check",
+                  isSelected && "udb-choice__check--on",
                 )}
+                aria-hidden="true"
               >
-                {isSelected && <Check className="h-4 w-4" />}
-              </div>
+                {isSelected && <Check className="udb-choice__check-icon" />}
+              </span>
             </button>
           );
         })}
       </div>
 
-      {(state.hasMobileApp || state.hasWebApp) && (
-        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in slide-in-from-bottom-2 duration-500">
-          ✨ Great choice! We'll tailor your experience accordingly.
+      {anySelected && (
+        <p className="udb-step__hint" role="status" aria-live="polite">
+          <Sparkles className="udb-step__hint-icon" aria-hidden="true" />
+          {t(ONBOARDING_KEYS.appFocus.success)}
         </p>
       )}
     </div>