@scripso-homepad/ui 0.3.8 → 0.4.0

package/src/web/layout/Sidebar.tsx

@@ -0,0 +1,244 @@
+import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useMediaQuery } from '../hooks/useMediaQuery';
+import { cn } from '../utils/cn';
+import { SidebarNavItem } from './SidebarNavItem';
+import { SidebarUserCard } from './SidebarUserCard';
+import type { AdminNavItem, AdminSidebarBranding, AdminSidebarLabels, AdminSidebarUser } from './types';
+
+export type SidebarProps = {
+  navItems: AdminNavItem[];
+  footerNavItems: AdminNavItem[];
+  branding: AdminSidebarBranding;
+  labels: AdminSidebarLabels;
+  sidebarStorageKey: string;
+  user?: AdminSidebarUser;
+  onLogout?: () => void;
+  className?: string;
+  mobileOpen: boolean;
+  onMobileClose?: () => void;
+  onNavItemClick?: (item: AdminNavItem) => void;
+  collapseIcon?: ReactNode;
+  expandIcon?: ReactNode;
+  closeIcon?: ReactNode;
+  initialCollapsed?: boolean;
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+};
+
+function readInitialCollapsedState(storageKey: string, initialCollapsed?: boolean): boolean {
+  if (initialCollapsed !== undefined) {
+    return initialCollapsed;
+  }
+
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  const stored = window.localStorage.getItem(storageKey);
+  if (stored === null) {
+    return false;
+  }
+
+  return stored !== 'true';
+}
+
+export function Sidebar({
+  navItems,
+  footerNavItems,
+  branding,
+  labels,
+  sidebarStorageKey,
+  user,
+  onLogout,
+  className,
+  mobileOpen,
+  onMobileClose,
+  onNavItemClick,
+  collapseIcon,
+  expandIcon,
+  closeIcon,
+  initialCollapsed,
+  collapsed,
+  onCollapsedChange,
+}: SidebarProps) {
+  const location = useLocation();
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const [internalCollapsed, setInternalCollapsed] = useState(() =>
+    readInitialCollapsedState(sidebarStorageKey, initialCollapsed),
+  );
+
+  const isCollapsed = collapsed ?? internalCollapsed;
+  const isExpanded = isDesktop ? !isCollapsed : true;
+
+  const setCollapsed = useCallback(
+    (next: boolean) => {
+      if (collapsed === undefined) {
+        setInternalCollapsed(next);
+        window.localStorage.setItem(sidebarStorageKey, String(!next));
+      }
+
+      onCollapsedChange?.(next);
+    },
+    [collapsed, onCollapsedChange, sidebarStorageKey],
+  );
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed(!isCollapsed);
+  }, [isCollapsed, setCollapsed]);
+
+  const handleHeaderAction = useCallback(() => {
+    if (isDesktop) {
+      toggleCollapsed();
+
+      return;
+    }
+
+    onMobileClose?.();
+  }, [isDesktop, onMobileClose, toggleCollapsed]);
+
+  const handleNavItemNavigate = useCallback(
+    (item: AdminNavItem) => {
+      onNavItemClick?.(item);
+
+      if (!isDesktop) {
+        onMobileClose?.();
+      }
+    },
+    [isDesktop, onMobileClose, onNavItemClick],
+  );
+
+  const pathnameRef = useRef(location.pathname);
+
+  useEffect(() => {
+    if (pathnameRef.current === location.pathname) {
+      return;
+    }
+
+    pathnameRef.current = location.pathname;
+
+    if (!isDesktop) {
+      onMobileClose?.();
+    }
+  }, [location.pathname, isDesktop, onMobileClose]);
+
+  useEffect(() => {
+    if (!mobileOpen || isDesktop) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [mobileOpen, isDesktop]);
+
+  const visibleNavItems = navItems.filter((item) => !item.hidden);
+  const visibleFooterNavItems = footerNavItems.filter((item) => !item.hidden);
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={labels.closeMenu}
+        onClick={onMobileClose}
+        className={cn(
+          'fixed inset-0 z-40 bg-navy-800/60 backdrop-blur-[1px] transition-opacity duration-300 ease-in-out md:hidden',
+          mobileOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
+        )}
+      />
+
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl',
+          'transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]',
+          mobileOpen ? 'translate-x-0' : '-translate-x-full',
+          'md:relative md:z-auto md:w-[300px] md:translate-x-0 md:shadow-none',
+          isExpanded ? 'md:w-[300px]' : 'md:w-[52px] md:items-center md:gap-4 md:px-3 md:py-4',
+          className,
+        )}
+        aria-hidden={!isDesktop && !mobileOpen}
+      >
+        <div
+          className={cn(
+            'flex w-full items-center transition-[justify-content] duration-300 ease-in-out',
+            isExpanded ? 'justify-between' : 'justify-center',
+          )}
+        >
+          <div
+            className={cn(
+              'flex min-w-0 items-center gap-1.5 overflow-hidden transition-[max-width,opacity] duration-300 ease-in-out',
+              isExpanded ? 'max-w-[240px] opacity-100' : 'max-w-0 opacity-0',
+            )}
+          >
+            <img src={branding.logoIconSrc} alt="" className="h-5 w-[29px] shrink-0" />
+            <div className="flex min-w-0 flex-col leading-none">
+              <span className="text-[21px] font-bold tracking-tight whitespace-nowrap text-white">
+                {branding.logoTitle}
+              </span>
+              <span className="text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase">
+                {branding.logoTagline}
+              </span>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={handleHeaderAction}
+            className="shrink-0 cursor-pointer text-white transition-[opacity,transform] duration-200 hover:opacity-80 active:scale-95"
+            aria-label={
+              isDesktop
+                ? isExpanded
+                  ? labels.collapse
+                  : labels.expand
+                : labels.closeMenu
+            }
+          >
+            {isDesktop ? (
+              isExpanded ? (
+                collapseIcon ?? <PanelLeftClose size={20} strokeWidth={1.75} />
+              ) : (
+                expandIcon ?? <PanelLeftOpen size={20} strokeWidth={1.75} />
+              )
+            ) : (
+              closeIcon ?? <X size={20} strokeWidth={1.75} />
+            )}
+          </button>
+        </div>
+
+        <nav className="flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
+          {visibleNavItems.map((item) => (
+            <SidebarNavItem
+              key={item.to}
+              item={item}
+              isOpen={isExpanded}
+              onNavigate={handleNavItemNavigate}
+            />
+          ))}
+        </nav>
+
+        <div className="flex w-full flex-col gap-4">
+          {visibleFooterNavItems.map((item) => (
+            <SidebarNavItem
+              key={item.to}
+              item={item}
+              isOpen={isExpanded}
+              onNavigate={handleNavItemNavigate}
+            />
+          ))}
+          {user ? (
+            <SidebarUserCard
+              user={user}
+              isOpen={isExpanded}
+              logoutLabel={labels.logout}
+              onLogout={onLogout}
+            />
+          ) : null}
+        </div>
+      </aside>
+    </>
+  );
+}

package/src/web/layout/SidebarMobileHeader.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { WebLayoutCanvas } from './story-helpers';
+import { SidebarMobileHeader } from './SidebarMobileHeader';
+import { storyBranding, storyLabels, storyLogoIconDarkSrc } from './story-fixtures';
+
+const meta = {
+  title: 'Web Layout/SidebarMobileHeader',
+  component: SidebarMobileHeader,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    branding: {
+      logoIconSrc: storyLogoIconDarkSrc,
+      logoTitle: storyBranding.logoTitle,
+      logoTagline: storyBranding.logoTagline,
+    },
+    openMenuLabel: storyLabels.sidebar.openMenu,
+    onOpenMenu: fn(),
+    menuOpen: false,
+  },
+} satisfies Meta<typeof SidebarMobileHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <WebLayoutCanvas>
+      <SidebarMobileHeader {...args} />
+    </WebLayoutCanvas>
+  ),
+};
+
+export const MenuOpen: Story = {
+  args: {
+    menuOpen: true,
+  },
+  render: (args) => (
+    <WebLayoutCanvas>
+      <SidebarMobileHeader {...args} />
+    </WebLayoutCanvas>
+  ),
+};

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));
+}