@scripso-homepad/ui 0.4.2 → 0.4.3

package/src/web/components/Table.stories.tsx

@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Mail, Phone } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+import { TableMenuCheckIcon } from '../icons/TableMenuCheckIcon';
+import { TableMenuCloseIcon } from '../icons/TableMenuCloseIcon';
+import { TableMenuInfoIcon } from '../icons/TableMenuInfoIcon';
+import { TableMenuRefreshIcon } from '../icons/TableMenuRefreshIcon';
+import { TableMenuTrashIcon } from '../icons/TableMenuTrashIcon';
+import { Pagination } from './Pagination';
+import { StatusBadge } from './StatusBadge';
+import {
+  DataTable,
+  Table,
+  TableActionsCell,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type TableSortDirection,
+} from './Table';
+import { TableActionButton } from './TableActionButton';
+import { TableActionsMenu } from './TableActionsMenu';
+import { TableIconText } from './TableIconText';
+
+const PAGE_SIZE = 4;
+
+const armenianPaginationLabels = {
+  previousPage: 'Նախորդ էջ',
+  nextPage: 'Հաջորդ էջ',
+  page: (pageNumber: number) => `Էջ ${pageNumber}`,
+  showing: ({ start, end, total }: { start: number; end: number; total: number }) =>
+    `Ցուցադրված է ${start}-${end}-ը ${total}-ից`,
+};
+
+const statusKeys = ['pending', 'rejected', 'payment', 'approved'] as const;
+type RequestStatus = (typeof statusKeys)[number];
+
+const statusConfig: Record<
+  RequestStatus,
+  { label: string; tone: 'info' | 'danger' | 'warning' | 'success' }
+> = {
+  pending: { label: 'Սպասում է հաստատման', tone: 'info' },
+  rejected: { label: 'Մերժված', tone: 'danger' },
+  payment: { label: 'Սպասում է վճարման', tone: 'warning' },
+  approved: { label: 'Հաստատված', tone: 'success' },
+};
+
+const requestTemplates = [
+  {
+    organization: '«Էլիտ Հոլդինգ»',
+    contact: 'Արմեն Գրիգորյան',
+    email: 'a.grigoryan@mail.am',
+    phone: '+374 (91) 44-55-66',
+    date: '24.06.2026',
+    status: 'pending' as const,
+  },
+  {
+    organization: '«Անի-1» Կառավարչություն',
+    contact: 'Աննա Հովհաննիսյան',
+    email: 'info@maqurtun.am',
+    phone: '+374 (77) 11-22-33',
+    date: '23.06.2026',
+    status: 'rejected' as const,
+  },
+  {
+    organization: '«Արագած» Համատիրություն',
+    contact: 'Կարեն Դավթյան',
+    email: 'k.davtyan@elite.am',
+    phone: '+374 (55) 88-99-00',
+    date: '21.06.2026',
+    status: 'payment' as const,
+  },
+  {
+    organization: '«Մաքուր տուն» ՍՊԸ',
+    contact: 'Սուրեն Մնացականյան',
+    email: 'suren.m@gmail.com',
+    phone: '+374 (94) 77-55-11',
+    date: '19.06.2026',
+    status: 'approved' as const,
+  },
+];
+
+const allRequests = Array.from({ length: 12 }, (_, index) => {
+  const template = requestTemplates[index % requestTemplates.length];
+
+  return {
+    id: String(index + 1),
+    ...template,
+    organization: index < requestTemplates.length
+      ? template.organization
+      : `${template.organization} ${Math.floor(index / requestTemplates.length) + 1}`,
+    status: statusKeys[index % statusKeys.length],
+  };
+});
+
+function getStoryMenuItems(status: RequestStatus) {
+  switch (status) {
+    case 'pending':
+      return [];
+    case 'payment':
+      return [
+        {
+          id: 'details',
+          label: 'Դիտել մանրամասները',
+          icon: <TableMenuInfoIcon />,
+          onSelect: fn(),
+        },
+        {
+          id: 'resend',
+          label: 'Կրկին ուղարկել հղումը',
+          icon: <TableMenuRefreshIcon />,
+          onSelect: fn(),
+        },
+      ];
+    case 'rejected':
+      return [
+        {
+          id: 'remove',
+          label: 'Հեռացնել',
+          icon: <TableMenuTrashIcon />,
+          onSelect: fn(),
+        },
+      ];
+    case 'approved':
+      return [
+        {
+          id: 'details',
+          label: 'Դիտել մանրամասները',
+          icon: <TableMenuInfoIcon />,
+          onSelect: fn(),
+        },
+      ];
+    default:
+      return [];
+  }
+}
+
+const meta = {
+  title: 'Web Components/Table',
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function RequestsTableStory() {
+  const [page, setPage] = useState(1);
+
+  const pageRequests = useMemo(() => {
+    const start = (page - 1) * PAGE_SIZE;
+
+    return allRequests.slice(start, start + PAGE_SIZE);
+  }, [page]);
+
+  return (
+    <WebLayoutCanvas className="flex h-screen flex-col">
+      <div className="mx-auto flex min-h-0 w-[90%] flex-1 flex-col py-8">
+        <DataTable
+          fillHeight
+          minBodyHeight={0}
+          className="min-h-0 flex-1"
+          minWidth={980}
+          footer={
+            <Pagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              total={allRequests.length}
+              onPageChange={setPage}
+              labels={armenianPaginationLabels}
+              variant="attached"
+            />
+          }
+        >
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead>Կազմակերպություն</TableHead>
+                <TableHead>Կոնտակտային Անձ</TableHead>
+                <TableHead>Էլ. Փոստ</TableHead>
+                <TableHead>Հեռախոսահամար</TableHead>
+                <TableHead>Հայտի Ամսաթիվ</TableHead>
+                <TableHead>Կարգավիճակ</TableHead>
+                <TableHead stickyRight className="w-px p-0" aria-hidden />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pageRequests.map((request) => {
+                const status = statusConfig[request.status];
+                const isPending = request.status === 'pending';
+                const menuItems = getStoryMenuItems(request.status);
+
+                return (
+                  <TableRow key={request.id}>
+                    <TableCell variant="emphasis">{request.organization}</TableCell>
+                    <TableCell>{request.contact}</TableCell>
+                    <TableCell variant="strong">
+                      <TableIconText icon={<Mail className="size-3.5" />}>{request.email}</TableIconText>
+                    </TableCell>
+                    <TableCell variant="strong">
+                      <TableIconText icon={<Phone className="size-3.5" />}>{request.phone}</TableIconText>
+                    </TableCell>
+                    <TableCell variant="muted">{request.date}</TableCell>
+                    <TableCell>
+                      <StatusBadge tone={status.tone}>{status.label}</StatusBadge>
+                    </TableCell>
+                    <TableActionsCell>
+                      {isPending ? (
+                        <>
+                          <TableActionButton
+                            variant="approve"
+                            icon={<TableMenuCheckIcon />}
+                            onClick={fn()}
+                          >
+                            Հաստատել
+                          </TableActionButton>
+                          <TableActionButton
+                            variant="reject"
+                            icon={<TableMenuCloseIcon />}
+                            onClick={fn()}
+                          >
+                            Մերժել
+                          </TableActionButton>
+                        </>
+                      ) : (
+                        <TableActionsMenu
+                          triggerAriaLabel="Գործողություններ"
+                          items={menuItems}
+                        />
+                      )}
+                    </TableActionsCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </DataTable>
+      </div>
+    </WebLayoutCanvas>
+  );
+}
+
+export const WithPagination: Story = {
+  render: () => <RequestsTableStory />,
+};
+
+export const RequestsOverview: Story = {
+  ...WithPagination,
+};
+
+const buildingTemplates = [
+  {
+    name: '«Էլիտ Հոլդինգ»',
+    address: 'ք. Երևան, Աբովյան 12, շենք 3',
+    apartments: 48,
+    plan: 'Premium',
+    monthlyPrice: '119,900',
+    discount: '5%',
+    totalMonthly: '113,905',
+    paymentStatus: { label: 'Վճարված', tone: 'success' as const },
+    status: { label: 'Ակտիվ', tone: 'success' as const },
+  },
+  {
+    name: '«Անի-1» Կառավարչություն',
+    address: 'ք. Երևան, Մաշտոցի պող. 45, բն. 1-120',
+    apartments: 120,
+    plan: 'Standard',
+    monthlyPrice: '71,910',
+    discount: '—',
+    totalMonthly: '71,910',
+    paymentStatus: { label: 'Հետաձգված', tone: 'danger' as const },
+    status: { label: 'Կասեցված', tone: 'neutral' as const },
+  },
+  {
+    name: '«Արագած» Համատիրություն',
+    address: 'ք. Գյումրի, Անկախության 8',
+    apartments: 32,
+    plan: 'Basic',
+    monthlyPrice: '42,415',
+    discount: '10%',
+    totalMonthly: '38,174',
+    paymentStatus: { label: 'Սպասում է', tone: 'warning' as const },
+    status: { label: 'Ակտիվ', tone: 'success' as const },
+  },
+  {
+    name: '«Մաքուր տուն» ՍՊԸ',
+    address: 'ք. Երևան, Կոմիտասի պող. 28, շենք 7, մուտք 2',
+    apartments: 64,
+    plan: 'Premium',
+    monthlyPrice: '95,200',
+    discount: '—',
+    totalMonthly: '95,200',
+    paymentStatus: { label: 'Վճարված', tone: 'success' as const },
+    status: { label: 'Ակտիվ', tone: 'success' as const },
+  },
+];
+
+const largeTableRows = Array.from({ length: 48 }, (_, index) => {
+  const template = buildingTemplates[index % buildingTemplates.length];
+
+  return {
+    id: String(index + 1),
+    ...template,
+    name:
+      index < buildingTemplates.length
+        ? template.name
+        : `${template.name} ${Math.floor(index / buildingTemplates.length) + 1}`,
+  };
+});
+
+const largeTableMenuItems = [
+  {
+    id: 'edit',
+    label: 'Խմբագրել',
+    icon: <TableMenuInfoIcon />,
+    onSelect: fn(),
+  },
+];
+
+function LargeScrollableTableStory() {
+  const [apartmentsSort, setApartmentsSort] = useState<TableSortDirection | null>(null);
+
+  const sortedRows = useMemo(() => {
+    if (!apartmentsSort) {
+      return largeTableRows;
+    }
+
+    return [...largeTableRows].sort((left, right) => {
+      const difference = left.apartments - right.apartments;
+
+      return apartmentsSort === 'asc' ? difference : -difference;
+    });
+  }, [apartmentsSort]);
+
+  const handleApartmentsSort = () => {
+    setApartmentsSort((current) => {
+      if (current === null) {
+        return 'asc';
+      }
+
+      if (current === 'asc') {
+        return 'desc';
+      }
+
+      return null;
+    });
+  };
+
+  return (
+    <WebLayoutCanvas className="flex h-screen flex-col">
+      <div className="mx-auto flex min-h-0 w-[90%] flex-1 flex-col py-8">
+        <DataTable fillHeight minBodyHeight={0} className="min-h-0 flex-1" minWidth={1480}>
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="min-w-48">Կազմակերպություն</TableHead>
+                <TableHead className="min-w-64">Հասցե</TableHead>
+                <TableHead
+                  className="min-w-28"
+                  sortable
+                  sortDirection={apartmentsSort}
+                  onSort={handleApartmentsSort}
+                >
+                  Բնակարանների քանակ
+                </TableHead>
+                <TableHead className="min-w-32">Պլան</TableHead>
+                <TableHead className="min-w-36">Ամսական գին</TableHead>
+                <TableHead className="min-w-28">Զեղչ</TableHead>
+                <TableHead className="min-w-40">Ընդամենը ամսական</TableHead>
+                <TableHead className="min-w-40">Վճարման կարգավիճակ</TableHead>
+                <TableHead className="min-w-32">Կարգավիճակ</TableHead>
+                <TableHead stickyRight className="w-px p-0" aria-hidden />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {sortedRows.map((row, index) => (
+                <TableRow key={row.id} disabled={index % 5 === 1}>
+                  <TableCell variant="emphasis">{row.name}</TableCell>
+                  <TableCell variant="default">{row.address}</TableCell>
+                  <TableCell>{row.apartments}</TableCell>
+                  <TableCell>{row.plan}</TableCell>
+                  <TableCell>{row.monthlyPrice} ֏</TableCell>
+                  <TableCell variant="muted">{row.discount}</TableCell>
+                  <TableCell variant="strong">{row.totalMonthly} ֏</TableCell>
+                  <TableCell>
+                    <StatusBadge tone={row.paymentStatus.tone}>{row.paymentStatus.label}</StatusBadge>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge tone={row.status.tone}>{row.status.label}</StatusBadge>
+                  </TableCell>
+                  <TableActionsCell>
+                    <TableActionsMenu
+                      triggerAriaLabel="Գործողություններ"
+                      items={largeTableMenuItems}
+                    />
+                  </TableActionsCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </DataTable>
+      </div>
+    </WebLayoutCanvas>
+  );
+}
+
+export const LargeScrollableTable: Story = {
+  render: () => <LargeScrollableTableStory />,
+};

package/src/web/components/Table.tsx

@@ -0,0 +1,3 @@
+import './table-scroll.css';
+
+export * from './table/index';

package/src/web/components/TableActionButton.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+
+import { cn } from '../utils/cn';
+
+export type TableActionButtonVariant = 'approve' | 'reject' | 'menu';
+
+export type TableActionButtonProps = {
+  variant: TableActionButtonVariant;
+  children?: ReactNode;
+  icon?: ReactNode;
+  ariaLabel?: string;
+  className?: string;
+  disabled?: boolean;
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'>;
+
+const actionButtonClassName =
+  'inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0';
+
+const variantClasses: Record<TableActionButtonVariant, string> = {
+  approve: actionButtonClassName,
+  reject: actionButtonClassName,
+  menu: 'inline-flex size-7 cursor-pointer items-center justify-center rounded-lg text-storm-gray-500 transition-colors hover:bg-storm-gray-0 hover:text-storm-gray-900',
+};
+
+const inlineActionIconClassName =
+  'inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4';
+
+export const TableActionButton = forwardRef<HTMLButtonElement, TableActionButtonProps>(
+  function TableActionButton(
+    {
+      variant,
+      children,
+      icon,
+      onClick,
+      ariaLabel,
+      className,
+      disabled = false,
+      ...props
+    },
+    ref,
+  ) {
+    const isInlineAction = variant === 'approve' || variant === 'reject';
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        className={cn(
+          variantClasses[variant],
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <span className={isInlineAction ? inlineActionIconClassName : 'inline-flex shrink-0'}>
+            {icon}
+          </span>
+        ) : null}
+        {children}
+      </button>
+    );
+  },
+);

package/src/web/components/TableActionsMenu.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { TableMenuCheckIcon } from '../icons/TableMenuCheckIcon';
+import { TableMenuCloseIcon } from '../icons/TableMenuCloseIcon';
+import { TableMoreIcon } from '../icons/TableMoreIcon';
+import { cn } from '../utils/cn';
+import { TableActionButton } from './TableActionButton';
+
+const MENU_WIDTH_PX = 231;
+const MENU_OFFSET_PX = 4;
+const MENU_VIEWPORT_MARGIN_PX = 8;
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+export type TableActionsMenuItemTone = 'default' | 'success' | 'danger';
+
+export type TableActionsMenuItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  onSelect: () => void;
+  tone?: TableActionsMenuItemTone;
+  disabled?: boolean;
+};
+
+export type TableActionsMenuProps = {
+  items: TableActionsMenuItem[];
+  triggerAriaLabel: string;
+  className?: string;
+  menuClassName?: string;
+};
+
+type MenuPosition = {
+  top: number;
+  left: number;
+};
+
+function clampMenuLeft(left: number): number {
+  if (typeof window === 'undefined') {
+    return left;
+  }
+
+  const minLeft = MENU_VIEWPORT_MARGIN_PX;
+  const maxLeft = Math.max(minLeft, window.innerWidth - MENU_WIDTH_PX - MENU_VIEWPORT_MARGIN_PX);
+
+  return Math.min(Math.max(left, minLeft), maxLeft);
+}
+
+function resolveMenuItemIcon(item: TableActionsMenuItem): ReactNode | null {
+  if (item.icon) {
+    return item.icon;
+  }
+
+  switch (item.tone) {
+    case 'success':
+      return <TableMenuCheckIcon />;
+    case 'danger':
+      return <TableMenuCloseIcon />;
+    default:
+      return null;
+  }
+}
+
+export function TableActionsMenu({
+  items,
+  triggerAriaLabel,
+  className,
+  menuClassName,
+}: TableActionsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
+
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const updateMenuPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) {
+      return;
+    }
+
+    const rect = trigger.getBoundingClientRect();
+    setMenuPosition({
+      top: rect.bottom + MENU_OFFSET_PX,
+      left: clampMenuLeft(rect.right - MENU_WIDTH_PX),
+    });
+  }, []);
+
+  useOnClickOutside([rootRef, menuRef], closeMenu, open);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      setMenuPosition(null);
+      return;
+    }
+
+    updateMenuPosition();
+  }, [open, updateMenuPosition]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const closeOnScroll = () => {
+      closeMenu();
+    };
+
+    window.addEventListener('resize', updateMenuPosition);
+    window.addEventListener('scroll', closeOnScroll, true);
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMenu();
+        triggerRef.current?.focus();
+      }
+    };
+
+    document.addEventListener('keydown', closeOnEscape);
+
+    return () => {
+      window.removeEventListener('resize', updateMenuPosition);
+      window.removeEventListener('scroll', closeOnScroll, true);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [closeMenu, open, updateMenuPosition]);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  const menu =
+    open && menuPosition != null ? (
+      <div
+        ref={menuRef}
+        id={menuId}
+        role="menu"
+        style={{
+          position: 'fixed',
+          top: menuPosition.top,
+          left: menuPosition.left,
+          width: MENU_WIDTH_PX,
+        }}
+        className={cn(
+          'z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]',
+          menuClassName,
+        )}
+      >
+        {items.map((item, index) => {
+          const icon = resolveMenuItemIcon(item);
+
+          return (
+            <button
+              key={item.id}
+              type="button"
+              role="menuitem"
+              disabled={item.disabled}
+              onClick={() => {
+                if (item.disabled) {
+                  return;
+                }
+
+                closeMenu();
+                item.onSelect();
+              }}
+              className={cn(
+                'flex w-full cursor-pointer items-center gap-2.5 px-3 py-4 text-left font-sans text-sm font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
+                index > 0 && 'border-t border-storm-gray-50',
+                item.disabled && 'cursor-not-allowed opacity-50',
+              )}
+            >
+              {icon ? (
+                <span className="inline-flex size-5 shrink-0 items-center justify-center">
+                  {icon}
+                </span>
+              ) : null}
+              <span>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    ) : null;
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <TableActionButton
+        ref={triggerRef}
+        variant="menu"
+        icon={<TableMoreIcon className="size-6" />}
+        ariaLabel={triggerAriaLabel}
+        onClick={() => setOpen((current) => !current)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-controls={menuId}
+      />
+
+      {typeof document !== 'undefined' && menu != null ? createPortal(menu, document.body) : null}
+    </div>
+  );
+}