@scripso-homepad/ui 0.3.9 → 0.4.0

package/src/web/layout/SidebarMobileHeader.tsx

@@ -0,0 +1,48 @@
+import { Menu } from 'lucide-react';
+
+import { cn } from '../utils/cn';
+import type { AdminSidebarBranding } from './types';
+
+export type SidebarMobileHeaderProps = {
+  branding: Pick<AdminSidebarBranding, 'logoIconSrc' | 'logoTitle' | 'logoTagline'>;
+  openMenuLabel: string;
+  onOpenMenu: () => void;
+  menuOpen?: boolean;
+  className?: string;
+};
+
+export function SidebarMobileHeader({
+  branding,
+  openMenuLabel,
+  onOpenMenu,
+  menuOpen = false,
+  className,
+}: SidebarMobileHeaderProps) {
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-storm-gray-50 bg-storm-gray-0 px-4 md:hidden',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={onOpenMenu}
+        className="flex size-10 items-center justify-center rounded-xl text-navy transition-colors hover:bg-storm-gray-50"
+        aria-label={openMenuLabel}
+        aria-expanded={menuOpen}
+      >
+        <Menu size={22} strokeWidth={1.75} />
+      </button>
+      <div className="flex min-w-0 items-center gap-2">
+        <img src={branding.logoIconSrc} alt="" className="h-[30px] w-[42px] shrink-0" />
+        <div className="min-w-0 leading-none">
+          <p className="truncate text-base font-bold tracking-tight text-navy">{branding.logoTitle}</p>
+          <p className="truncate text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase">
+            {branding.logoTagline}
+          </p>
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/web/layout/SidebarNavItem.tsx

@@ -0,0 +1,60 @@
+import { NavLink } from 'react-router-dom';
+
+import { cn } from '../utils/cn';
+import type { AdminNavItem } from './types';
+
+export type SidebarNavItemProps = {
+  item: AdminNavItem;
+  isOpen: boolean;
+  onNavigate?: (item: AdminNavItem) => void;
+};
+
+export function SidebarNavItem({ item, isOpen, onNavigate }: SidebarNavItemProps) {
+  if (item.hidden) {
+    return null;
+  }
+
+  const handleClick = () => {
+    item.onClick?.();
+    onNavigate?.(item);
+  };
+
+  return (
+    <NavLink
+      to={item.to}
+      end={item.end}
+      onClick={handleClick}
+      aria-disabled={item.disabled}
+      tabIndex={item.disabled ? -1 : undefined}
+      className={({ isActive }) =>
+        cn(
+          'relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out',
+          isOpen ? 'w-full gap-4' : 'justify-center gap-0 px-3',
+          item.disabled && 'pointer-events-none opacity-50',
+          isActive ? 'bg-black/12 text-white' : 'text-navy-100 hover:bg-white/5',
+        )
+      }
+    >
+      {({ isActive }) => (
+        <>
+          <span
+            aria-hidden
+            className={cn(
+              'absolute top-1.5 -left-1 h-8 w-2 rounded-full bg-white transition-[opacity,transform] duration-300 ease-in-out',
+              isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-0',
+            )}
+          />
+          <span className="flex size-5 shrink-0 items-center justify-center">{item.icon}</span>
+          <span
+            className={cn(
+              'overflow-hidden text-sm font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out',
+              isOpen ? 'max-w-[180px] opacity-100' : 'max-w-0 opacity-0',
+            )}
+          >
+            {item.label}
+          </span>
+        </>
+      )}
+    </NavLink>
+  );
+}

package/src/web/layout/SidebarUserCard.tsx

@@ -0,0 +1,79 @@
+import { LogOut } from 'lucide-react';
+
+import { cn } from '../utils/cn';
+import type { AdminSidebarUser } from './types';
+
+export type SidebarUserCardProps = {
+  user: AdminSidebarUser;
+  isOpen: boolean;
+  logoutLabel: string;
+  onLogout?: () => void;
+  className?: string;
+};
+
+function getInitials(fullName: string, email: string): string {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length > 0) {
+    return parts
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+
+  return email.slice(0, 2).toUpperCase();
+}
+
+export function SidebarUserCard({
+  user,
+  isOpen,
+  logoutLabel,
+  onLogout,
+  className,
+}: SidebarUserCardProps) {
+  const initials = user.initials ?? getInitials(user.fullName, user.email);
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center rounded-xl p-3 transition-[background-color,justify-content,gap] duration-300 ease-in-out',
+        isOpen ? 'justify-between gap-3 bg-black/12' : 'justify-center',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'flex min-w-0 items-center transition-[gap,flex] duration-300 ease-in-out',
+          isOpen ? 'flex-1 gap-3' : 'gap-0',
+        )}
+      >
+        <div
+          className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white"
+          aria-hidden
+        >
+          {initials}
+        </div>
+        <div
+          className={cn(
+            'min-w-0 overflow-hidden transition-[max-width,opacity] duration-300 ease-in-out',
+            isOpen ? 'max-w-[160px] opacity-100' : 'max-w-0 opacity-0',
+          )}
+        >
+          <p className="truncate text-sm font-bold text-white">{user.fullName}</p>
+          <p className="truncate text-xs text-storm-gray-100">{user.email}</p>
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={() => onLogout?.()}
+        className={cn(
+          'shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform,max-width] duration-300 ease-in-out hover:opacity-80 active:scale-95',
+          isOpen ? 'max-w-8 scale-100 opacity-100' : 'pointer-events-none max-w-0 scale-90 opacity-0',
+        )}
+        aria-label={logoutLabel}
+        tabIndex={isOpen ? 0 : -1}
+      >
+        <LogOut size={20} strokeWidth={1.75} />
+      </button>
+    </div>
+  );
+}

package/src/web/layout/story-fixtures.tsx

@@ -0,0 +1,93 @@
+import {
+  FilePenLine,
+  LayoutGrid,
+  Megaphone,
+  Settings,
+  UserRoundCog,
+  Wallet,
+} from 'lucide-react';
+
+import type {
+  AdminLayoutLabels,
+  AdminNavItem,
+  AdminSidebarBranding,
+  AdminSidebarUser,
+} from './types';
+
+const iconSize = { size: 20, strokeWidth: 1.75 } as const;
+
+export const storyLogoIconSrc = '/logo-icon.svg';
+export const storyLogoIconDarkSrc = '/logo-icon-dark.svg';
+
+export const storyBranding: AdminSidebarBranding = {
+  logoIconSrc: storyLogoIconSrc,
+  logoTitle: 'HomePad',
+  logoTagline: 'Building Management Platform',
+};
+
+export const storyLabels: AdminLayoutLabels = {
+  sidebar: {
+    collapse: 'Collapse sidebar',
+    expand: 'Expand sidebar',
+    openMenu: 'Open menu',
+    closeMenu: 'Close menu',
+    logout: 'Log out',
+  },
+  header: {
+    searchPlaceholder: 'Search...',
+    selectBuilding: 'Select building',
+    notifications: 'Notifications',
+  },
+};
+
+export const storyBuildingOptions = [
+  { value: 'komitas-15-3', label: 'Komitas 15/3' },
+  { value: 'abovyan-12', label: 'Abovyan 12' },
+  { value: 'saryan-8', label: 'Saryan 8' },
+  { value: 'tumanyan-4', label: 'Tumanyan 4' },
+  { value: 'mashtots-21', label: 'Mashtots 21' },
+  { value: 'baghramyan-9', label: 'Baghramyan 9' },
+  { value: 'pushkin-2', label: 'Pushkin 2' },
+];
+
+export const storyUser: AdminSidebarUser = {
+  fullName: 'Anna Grigoryan',
+  email: 'anna466@gmail.com',
+};
+
+export const storyNavItems: AdminNavItem[] = [
+  {
+    to: '/',
+    label: 'Dashboard',
+    icon: <LayoutGrid {...iconSize} />,
+    end: true,
+  },
+  {
+    to: '/residents',
+    label: 'Residents',
+    icon: <UserRoundCog {...iconSize} />,
+  },
+  {
+    to: '/requests',
+    label: 'Requests',
+    icon: <FilePenLine {...iconSize} />,
+  },
+  {
+    to: '/payments',
+    label: 'Payments',
+    icon: <Wallet {...iconSize} />,
+  },
+  {
+    to: '/announcements',
+    label: 'Announcements',
+    icon: <Megaphone {...iconSize} />,
+  },
+];
+
+export const storyFooterNavItems: AdminNavItem[] = [
+  {
+    to: '/settings',
+    label: 'Settings',
+    icon: <Settings {...iconSize} />,
+  },
+];

package/src/web/layout/story-helpers.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+export function WebLayoutCanvas({ children }: { children: ReactNode }) {
+  return <div className="w-full min-w-0">{children}</div>;
+}

package/src/web/layout/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+
+export type AdminNavItem = {
+  to: string;
+  label: string;
+  icon: ReactNode;
+  end?: boolean;
+  hidden?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export type AdminSidebarUser = {
+  fullName: string;
+  email: string;
+  initials?: string;
+};
+
+export type AdminSidebarBranding = {
+  logoIconSrc: string;
+  logoTitle: string;
+  logoTagline: string;
+};
+
+export type AdminSidebarLabels = {
+  collapse: string;
+  expand: string;
+  openMenu: string;
+  closeMenu: string;
+  logout: string;
+};
+
+export type AdminHeaderLabels = {
+  searchPlaceholder: string;
+  selectBuilding: string;
+  notifications: string;
+};
+
+export type AdminBuildingOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type AdminLayoutLabels = {
+  sidebar: AdminSidebarLabels;
+  header: AdminHeaderLabels;
+};

package/src/web/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}