@scripso-homepad/ui 0.3.8 → 0.4.0

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { WebLayoutCanvas } from './story-helpers';
+import { BuildingSelect, type BuildingSelectProps } from './BuildingSelect';
+import { storyBuildingOptions, storyLabels } from './story-fixtures';
+
+const meta = {
+  title: 'Web Layout/BuildingSelect',
+  component: BuildingSelect,
+  parameters: {
+    layout: 'centered',
+    webLayout: true,
+  },
+  args: {
+    options: storyBuildingOptions,
+    value: storyBuildingOptions[0].value,
+    labels: storyLabels.header,
+    onChange: fn(),
+  },
+} satisfies Meta<typeof BuildingSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <WebLayoutCanvas>
+      <BuildingSelect {...args} />
+    </WebLayoutCanvas>
+  ),
+};
+
+function InteractiveBuildingSelectStory(args: BuildingSelectProps) {
+  const [value, setValue] = useState(args.value);
+
+  return (
+    <WebLayoutCanvas>
+      <div className="pb-64 pt-2">
+        <BuildingSelect {...args} value={value} onChange={setValue} />
+      </div>
+    </WebLayoutCanvas>
+  );
+}
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveBuildingSelectStory {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => (
+    <WebLayoutCanvas>
+      <BuildingSelect {...args} />
+    </WebLayoutCanvas>
+  ),
+};

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' },
+  },
+};