@scripso-homepad/ui 0.3.9 → 0.4.1

package/src/web/layout/BuildingSelect.tsx

@@ -0,0 +1,208 @@
+import { ChevronsUpDown } from 'lucide-react';
+import { useCallback, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+import { BuildingIcon } from '../icons/BuildingIcon';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { cn } from '../utils/cn';
+import type { AdminBuildingOption, AdminHeaderLabels } from './types';
+
+export type BuildingSelectProps = {
+  options: AdminBuildingOption[];
+  value: string;
+  labels: Pick<AdminHeaderLabels, 'selectBuilding'>;
+  onChange?: (buildingId: string) => void;
+  disabled?: boolean;
+  className?: string;
+  menuClassName?: string;
+  buildingIcon?: ReactNode;
+  chevronIcon?: ReactNode;
+};
+
+export function BuildingSelect({
+  options,
+  value,
+  labels,
+  onChange,
+  disabled = false,
+  className,
+  menuClassName,
+  buildingIcon,
+  chevronIcon,
+}: BuildingSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const listboxId = useId();
+
+  const selectedOption = options.find((option) => option.value === value);
+  const displayLabel = selectedOption?.label ?? labels.selectBuilding;
+  const selectableOptions = options.filter((option) => !option.disabled);
+
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, []);
+
+  const openMenu = useCallback(() => {
+    if (disabled || selectableOptions.length === 0) {
+      return;
+    }
+
+    const selectedIndex = selectableOptions.findIndex((option) => option.value === value);
+    setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    setOpen(true);
+  }, [disabled, selectableOptions, value]);
+
+  const selectOption = useCallback(
+    (option: AdminBuildingOption) => {
+      if (option.disabled) {
+        return;
+      }
+
+      onChange?.(option.value);
+      closeMenu();
+    },
+    [closeMenu, onChange],
+  );
+
+  useOnClickOutside(rootRef, closeMenu, open);
+
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        openMenu();
+        break;
+      case 'Escape':
+        closeMenu();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleListKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
+    if (!open || selectableOptions.length === 0) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setHighlightedIndex((current) => (current + 1) % selectableOptions.length);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setHighlightedIndex(
+          (current) => (current - 1 + selectableOptions.length) % selectableOptions.length,
+        );
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (highlightedIndex >= 0) {
+          selectOption(selectableOptions[highlightedIndex]);
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        closeMenu();
+        break;
+      case 'Tab':
+        closeMenu();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div ref={rootRef} className={cn('relative w-57.5', className)}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listboxId}
+        aria-label={labels.selectBuilding}
+        onClick={() => (open ? closeMenu() : openMenu())}
+        onKeyDown={handleTriggerKeyDown}
+        className={cn(
+          'flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white p-3 text-left transition-colors',
+          !disabled && 'cursor-pointer hover:bg-storm-gray-50/60',
+          open && 'bg-storm-gray-50/60',
+          disabled && 'cursor-not-allowed opacity-60',
+        )}
+      >
+        {buildingIcon ?? <BuildingIcon className="shrink-0 text-navy" />}
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-slate-blue">
+          {displayLabel}
+        </span>
+        {chevronIcon ?? (
+          <ChevronsUpDown
+            size={16}
+            strokeWidth={1.75}
+            className={cn(
+              'shrink-0 text-storm-gray-100 transition-transform duration-200',
+              open && 'rotate-180',
+            )}
+            aria-hidden
+          />
+        )}
+      </button>
+
+      {open ? (
+        <ul
+          id={listboxId}
+          role="listbox"
+          aria-label={labels.selectBuilding}
+          tabIndex={-1}
+          onKeyDown={handleListKeyDown}
+          className={cn(
+            'absolute top-[calc(100%+4px)] left-0 z-50 flex w-full flex-col gap-1 overflow-hidden rounded-xl border border-storm-gray-50 bg-white p-2 shadow-[0_8px_24px_rgba(21,26,30,0.08)]',
+            menuClassName,
+          )}
+        >
+          {options.map((option) => {
+            const selectableIndex = selectableOptions.findIndex(
+              (selectable) => selectable.value === option.value,
+            );
+            const isSelected = option.value === value;
+            const isHighlighted = selectableIndex === highlightedIndex;
+
+            return (
+              <li key={option.value} role="presentation">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  disabled={option.disabled}
+                  onMouseEnter={() => {
+                    if (!option.disabled && selectableIndex >= 0) {
+                      setHighlightedIndex(selectableIndex);
+                    }
+                  }}
+                  onClick={() => selectOption(option)}
+                  className={cn(
+                    'flex w-full rounded-lg px-3 py-2.5 text-left text-sm font-medium text-slate-blue transition-colors',
+                    !option.disabled && 'cursor-pointer hover:bg-storm-gray-50',
+                    (isSelected || isHighlighted) && !option.disabled && 'bg-storm-gray-50',
+                    option.disabled && 'cursor-not-allowed opacity-50',
+                  )}
+                >
+                  <span className="truncate">{option.label}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { WebLayoutCanvas } from './story-helpers';
+import { DashboardLayout } from './DashboardLayout';
+import {
+  storyBranding,
+  storyBuildingOptions,
+  storyFooterNavItems,
+  storyLabels,
+  storyLogoIconDarkSrc,
+  storyNavItems,
+  storyUser,
+} from './story-fixtures';
+
+const meta = {
+  title: 'Web Layout/DashboardLayout',
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DashboardLayoutDemo() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedBuildingId, setSelectedBuildingId] = useState(storyBuildingOptions[0].value);
+
+  return (
+    <WebLayoutCanvas>
+      <DashboardLayout
+        sidebar={{
+          navItems: storyNavItems,
+          footerNavItems: storyFooterNavItems,
+          branding: storyBranding,
+          labels: storyLabels.sidebar,
+          sidebarStorageKey: 'homepad.storybook.sidebar.open',
+          user: storyUser,
+          mobileOpen: mobileMenuOpen,
+          onMobileClose: () => setMobileMenuOpen(false),
+          onLogout: fn(),
+          onNavItemClick: () => setMobileMenuOpen(false),
+        }}
+        mobileHeader={{
+          branding: {
+            logoIconSrc: storyLogoIconDarkSrc,
+            logoTitle: storyBranding.logoTitle,
+            logoTagline: storyBranding.logoTagline,
+          },
+          openMenuLabel: storyLabels.sidebar.openMenu,
+          onOpenMenu: () => setMobileMenuOpen(true),
+          menuOpen: mobileMenuOpen,
+        }}
+        header={{
+          title: 'Dashboard',
+          labels: storyLabels.header,
+          buildingOptions: storyBuildingOptions,
+          selectedBuildingId,
+          onBuildingChange: setSelectedBuildingId,
+          className: 'hidden md:flex',
+          searchValue: searchQuery,
+          onSearchChange: setSearchQuery,
+          onNotificationsClick: fn(),
+        }}
+      >
+        <div className="rounded-xl border border-storm-gray-50 bg-white p-6">
+          <p className="text-sm text-storm-gray-500">Page content goes here.</p>
+        </div>
+      </DashboardLayout>
+    </WebLayoutCanvas>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DashboardLayoutDemo />,
+};
+
+export const Mobile: Story = {
+  render: () => <DashboardLayoutDemo />,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+};

package/src/web/layout/DashboardLayout.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { AppHeader } from './AppHeader';
+import type { AppHeaderProps } from './AppHeader';
+import { Sidebar } from './Sidebar';
+import type { SidebarProps } from './Sidebar';
+import { SidebarMobileHeader } from './SidebarMobileHeader';
+import type { SidebarMobileHeaderProps } from './SidebarMobileHeader';
+
+export type DashboardLayoutProps = {
+  sidebar: SidebarProps;
+  header: AppHeaderProps;
+  mobileHeader: SidebarMobileHeaderProps;
+  children: ReactNode;
+  className?: string;
+  mainClassName?: string;
+};
+
+export function DashboardLayout({
+  sidebar,
+  header,
+  mobileHeader,
+  children,
+  className,
+  mainClassName,
+}: DashboardLayoutProps) {
+  return (
+    <div className={className ?? 'flex min-h-screen bg-storm-gray-0'}>
+      <Sidebar {...sidebar} />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <SidebarMobileHeader {...mobileHeader} />
+        <AppHeader {...header} />
+        <main className={mainClassName ?? 'flex-1 overflow-auto p-4 md:p-6'}>{children}</main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { WebLayoutCanvas } from './story-helpers';
+import { Sidebar, type SidebarProps } from './Sidebar';
+import {
+  storyBranding,
+  storyFooterNavItems,
+  storyLabels,
+  storyNavItems,
+  storyUser,
+} from './story-fixtures';
+
+const meta = {
+  title: 'Web Layout/Sidebar',
+  component: Sidebar,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    navItems: storyNavItems,
+    footerNavItems: storyFooterNavItems,
+    branding: storyBranding,
+    labels: storyLabels.sidebar,
+    sidebarStorageKey: 'homepad.storybook.sidebar.open',
+    user: storyUser,
+    mobileOpen: true,
+    onLogout: fn(),
+    onMobileClose: fn(),
+    onNavItemClick: fn(),
+  },
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Expanded: Story = {
+  render: (args) => (
+    <WebLayoutCanvas>
+      <div className="flex min-h-screen bg-storm-gray-0">
+        <Sidebar {...args} mobileOpen={false} initialCollapsed={false} />
+      </div>
+    </WebLayoutCanvas>
+  ),
+};
+
+export const Collapsed: Story = {
+  render: (args) => (
+    <WebLayoutCanvas>
+      <div className="flex min-h-screen bg-storm-gray-0">
+        <Sidebar {...args} mobileOpen={false} initialCollapsed />
+      </div>
+    </WebLayoutCanvas>
+  ),
+};
+
+function MobileDrawerStory(args: SidebarProps) {
+  const [mobileOpen, setMobileOpen] = useState(true);
+
+  return (
+    <WebLayoutCanvas>
+      <div className="relative min-h-screen bg-storm-gray-0">
+        <Sidebar
+          {...args}
+          mobileOpen={mobileOpen}
+          onMobileClose={() => setMobileOpen(false)}
+        />
+      </div>
+    </WebLayoutCanvas>
+  );
+}
+
+export const MobileDrawer: Story = {
+  render: (args) => <MobileDrawerStory {...args} />,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+};

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-[76px] md:items-center md:gap-2 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>
+  ),
+};