@scripso-homepad/ui 0.4.8 → 0.4.10

package/src/web/components/Drawer.tsx

@@ -0,0 +1,169 @@
+import { X } from 'lucide-react';
+import { useEffect, useState, type ReactNode } from 'react';
+
+import { cn } from '../utils/cn';
+
+import './drawer-scroll.css';
+
+const DRAWER_TRANSITION_MS = 300;
+
+export type DrawerProps = {
+  open: boolean;
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  onClose: () => void;
+  closeAriaLabel?: string;
+  widthClassName?: string;
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  footerClassName?: string;
+};
+
+export function Drawer({
+  open,
+  title,
+  subtitle,
+  children,
+  footer,
+  onClose,
+  closeAriaLabel = 'Close',
+  widthClassName = 'w-full md:w-[464px]',
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+}: DrawerProps) {
+  const [isPresent, setIsPresent] = useState(open);
+  const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setIsPresent(true);
+
+      const frame = window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      });
+
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+
+    setIsAnimatedIn(false);
+
+    const timeout = window.setTimeout(() => {
+      setIsPresent(false);
+    }, DRAWER_TRANSITION_MS);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!isPresent) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isPresent, onClose]);
+
+  if (!isPresent) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex justify-end p-2 max-md:p-0"
+      role="presentation"
+    >
+      <button
+        type="button"
+        aria-label={closeAriaLabel}
+        className={cn(
+          'absolute inset-0 bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out',
+          isAnimatedIn ? 'opacity-100' : 'opacity-0',
+        )}
+        onClick={onClose}
+      />
+
+      <aside
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="homepad-drawer-title"
+        {...(subtitle ? { 'aria-describedby': 'homepad-drawer-subtitle' } : {})}
+        className={cn(
+          'relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none',
+          isAnimatedIn ? 'translate-x-0' : 'translate-x-full',
+          widthClassName,
+          className,
+        )}
+      >
+        <header
+          className={cn(
+            'flex h-[87px] shrink-0 items-start justify-between border-b border-storm-gray-50 pt-6 pr-6 pb-4 pl-6',
+            headerClassName,
+          )}
+        >
+          <div className="min-w-0 flex flex-col gap-1">
+            <h2
+              id="homepad-drawer-title"
+              className="font-sans text-[18px] font-bold leading-6 tracking-normal text-black"
+            >
+              {title}
+            </h2>
+            {subtitle ? (
+              <p
+                id="homepad-drawer-subtitle"
+                className="font-sans text-sm font-normal leading-[19px] tracking-normal text-storm-gray-400"
+              >
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+
+          <button
+            type="button"
+            aria-label={closeAriaLabel}
+            className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600"
+            onClick={onClose}
+          >
+            <X className="size-5" strokeWidth={1.75} />
+          </button>
+        </header>
+
+        <div
+          className={cn(
+            'drawer-scroll-area min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-0',
+            contentClassName,
+          )}
+        >
+          {children}
+        </div>
+
+        {footer ? (
+          <footer className={cn('shrink-0 px-6 py-5', footerClassName)}>{footer}</footer>
+        ) : null}
+      </aside>
+    </div>
+  );
+}

package/src/web/components/HistoryTimeline.tsx

@@ -0,0 +1,46 @@
+import { TimelineCheckIcon } from '../icons/TimelineCheckIcon';
+
+export type HistoryTimelineItem = {
+  id: string;
+  title: string;
+  timestamp: string;
+};
+
+export type HistoryTimelineProps = {
+  events: HistoryTimelineItem[];
+};
+
+export function HistoryTimeline({ events }: HistoryTimelineProps) {
+  return (
+    <ol className="m-0 flex list-none flex-col gap-1 p-0">
+      {events.map((event, index) => {
+        const isLast = index === events.length - 1;
+
+        return (
+          <li key={event.id} className="flex items-start gap-3">
+            <div className="flex w-8 shrink-0 flex-col items-center">
+              <div className="flex size-8 shrink-0 items-center justify-center rounded-[28px] border border-storm-gray-50 bg-white">
+                <TimelineCheckIcon className="size-4 shrink-0" />
+              </div>
+              {!isLast ? (
+                <div
+                  aria-hidden
+                  className="mt-1 h-[31px] w-px shrink-0 border-l border-dashed border-storm-gray-100"
+                />
+              ) : null}
+            </div>
+
+            <div className="flex min-w-0 flex-1 flex-col gap-2 pt-1.5">
+              <p className="font-sans text-sm font-medium leading-[19px] tracking-normal text-slate-blue">
+                {event.title}
+              </p>
+              <p className="font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-300">
+                {event.timestamp}
+              </p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { Input } from '../../components/Input';
+import { TableMenuEditIcon } from '../icons/TableMenuEditIcon';
+import { WebLayoutCanvas } from '../layout/story-helpers';
+
+import { Modal, type ModalFooterAlign } from './Modal';
+
+const meta = {
+  title: 'Web Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    open: true,
+    title: 'Նոր շենքի ավելացում',
+    subtitle: 'Լրացրեք տվյալները՝ նոր շենք ավելացնելու համար',
+    cancelText: 'Չեղարկել',
+    confirmText: 'Ավելացնել շենքը',
+    onCancel: fn(),
+    onConfirm: fn(),
+    footerAlign: 'right' as ModalFooterAlign,
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function AddBuildingModalBody() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
+        <Input label="Կազմակերպություն" value="" onChangeText={() => undefined} className="w-full" />
+        <Input label="Հասցե" value="" onChangeText={() => undefined} className="w-full" />
+      </div>
+      <Input label="Կոնտակտային անձ" value="" onChangeText={() => undefined} className="w-full" />
+      <div className="grid gap-4 md:grid-cols-2">
+        <Input label="Էլ. փոստ" value="" onChangeText={() => undefined} className="w-full" />
+        <Input label="Հեռախոսահամար" value="" onChangeText={() => undefined} className="w-full" />
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <Modal {...args}>
+        <AddBuildingModalBody />
+      </Modal>
+    </WebLayoutCanvas>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: null,
+    title: 'Շենքի խմբագրում',
+    subtitle: 'Թարմացրեք շենքի տվյալները',
+    icon: <TableMenuEditIcon />,
+  },
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <Modal {...args}>
+        <AddBuildingModalBody />
+      </Modal>
+    </WebLayoutCanvas>
+  ),
+};
+
+export const SplitFooter: Story = {
+  args: {
+    children: null,
+    footerLayout: 'split',
+  },
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <Modal {...args}>
+        <AddBuildingModalBody />
+      </Modal>
+    </WebLayoutCanvas>
+  ),
+};
+
+export const FooterAlignments: Story = {
+  args: {
+    children: null,
+  },
+  render: () => <FooterAlignmentsStory />,
+};
+
+function FooterAlignmentsStory() {
+  const [align, setAlign] = useState<ModalFooterAlign>('right');
+
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <div className="mb-4 flex gap-2">
+        {(['left', 'center', 'right'] as const).map((value) => (
+          <button
+            key={value}
+            type="button"
+            className="rounded-lg border border-storm-gray-50 px-3 py-1 text-sm"
+            onClick={() => setAlign(value)}
+          >
+            {value}
+          </button>
+        ))}
+      </div>
+      <Modal
+        open
+        title="Նոր շենքի ավելացում"
+        subtitle="Լրացրեք տվյալները՝ նոր շենք ավելացնելու համար"
+        cancelText="Չեղարկել"
+        confirmText="Ավելացնել շենքը"
+        footerAlign={align}
+        onCancel={fn()}
+        onConfirm={fn()}
+      >
+        <AddBuildingModalBody />
+      </Modal>
+    </WebLayoutCanvas>
+  );
+}

package/src/web/components/Modal.tsx

@@ -0,0 +1,162 @@
+import { useEffect, type ReactNode } from 'react';
+
+import { Button } from '../../components/Button';
+import { cn } from '../utils/cn';
+
+export type ModalFooterAlign = 'left' | 'center' | 'right';
+export type ModalFooterLayout = 'inline' | 'split';
+
+export type ModalProps = {
+  open: boolean;
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  iconContainerClassName?: string;
+  children: ReactNode;
+  cancelText: string;
+  confirmText: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+  footerAlign?: ModalFooterAlign;
+  footerLayout?: ModalFooterLayout;
+  cancelDisabled?: boolean;
+  confirmDisabled?: boolean;
+  closeOnBackdrop?: boolean;
+  containerClassName?: string;
+  contentClassName?: string;
+  buttonClassName?: string;
+};
+
+const footerAlignClasses: Record<ModalFooterAlign, string> = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end',
+};
+
+export function Modal({
+  open,
+  title,
+  subtitle,
+  icon,
+  iconContainerClassName,
+  children,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm,
+  footerAlign = 'right',
+  footerLayout = 'inline',
+  cancelDisabled = false,
+  confirmDisabled = false,
+  closeOnBackdrop = true,
+  containerClassName,
+  contentClassName,
+  buttonClassName,
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onCancel();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onCancel]);
+
+  if (!open) {
+    return null;
+  }
+
+  const sharedButtonClassName = cn(
+    'btn h-13 justify-center!',
+    footerLayout === 'split' && 'min-w-0 flex-1 basis-0',
+    footerLayout !== 'split' && buttonClassName,
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
+      onClick={closeOnBackdrop ? onCancel : undefined}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="homepad-modal-title"
+        {...(subtitle ? { 'aria-describedby': 'homepad-modal-subtitle' } : {})}
+        className={cn(
+          'flex w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
+          containerClassName,
+        )}
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        <header className={cn('flex', icon ? 'items-center gap-2.5' : undefined)}>
+          {icon ? (
+            <div
+              className={cn(
+                'flex size-11 shrink-0 items-center justify-center rounded-lg bg-storm-gray-50 p-3 opacity-100',
+                iconContainerClassName,
+              )}
+            >
+              <div className="flex size-5 shrink-0 items-center justify-center [&>*]:size-5 [&_svg]:size-5">
+                {icon}
+              </div>
+            </div>
+          ) : null}
+          <div className="flex min-w-0 flex-col gap-2">
+            <h2
+              id="homepad-modal-title"
+              className="font-sans text-lg font-bold leading-6 tracking-normal text-black"
+            >
+              {title}
+            </h2>
+            {subtitle ? (
+              <p
+                id="homepad-modal-subtitle"
+                className="font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400"
+              >
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+        </header>
+
+        <div className={cn('min-w-0', contentClassName)}>{children}</div>
+
+        <footer
+          className={cn(
+            'flex shrink-0 gap-4',
+            footerLayout === 'split' ? 'w-full' : footerAlignClasses[footerAlign],
+          )}
+        >
+          <Button
+            title={cancelText}
+            onPress={onCancel}
+            variant="gray"
+            disabled={cancelDisabled}
+            className={sharedButtonClassName}
+            textClassName="text-center!"
+          />
+          <Button
+            title={confirmText}
+            onPress={onConfirm}
+            variant="primary"
+            disabled={confirmDisabled}
+            className={sharedButtonClassName}
+            textClassName="text-center!"
+          />
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/web/components/TableActionButton.tsx

@@ -11,14 +11,17 @@ export type TableActionButtonProps = {
   ariaLabel?: string;
   className?: string;
   disabled?: boolean;
-} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'>;
+} & Pick<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'onClick' | 'title' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'
+>;
 
-const actionButtonClassName =
+const inlineActionClassName =
   '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,
+  approve: inlineActionClassName,
+  reject: inlineActionClassName,
   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',
 };
 
@@ -40,6 +43,7 @@ export const TableActionButton = forwardRef<HTMLButtonElement, TableActionButton
     ref,
   ) {
     const isInlineAction = variant === 'approve' || variant === 'reject';
+    const hasLabel = Boolean(children);
 
     return (
       <button
@@ -50,6 +54,7 @@ export const TableActionButton = forwardRef<HTMLButtonElement, TableActionButton
         aria-label={ariaLabel}
         className={cn(
           variantClasses[variant],
+          isInlineAction && !hasLabel && 'px-2',
           disabled && 'cursor-not-allowed opacity-50',
           className,
         )}

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+import { toast } from '../toast';
+
+import { Toaster } from './Toaster';
+
+const toastCopy = {
+  title: 'Title',
+  description: 'Description',
+};
+
+const meta = {
+  title: 'Web Components/Toaster',
+  component: Toaster,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ToastTriggerPanel() {
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-3 rounded-2xl border border-storm-gray-50 bg-white p-6 shadow-sm">
+        <h2 className="font-sans text-lg font-bold text-slate-blue">Toast preview</h2>
+        <p className="font-sans text-sm text-storm-gray-400">
+          Click a button to show a toast in the bottom-right corner.
+        </p>
+        <div className="flex flex-col gap-2">
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.success(toastCopy.title, { description: toastCopy.description })}
+          >
+            Success
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.error(toastCopy.title, { description: toastCopy.description })}
+          >
+            Error
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.warning(toastCopy.title, { description: toastCopy.description })}
+          >
+            Warning
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.info(toastCopy.title, { description: toastCopy.description })}
+          >
+            Info
+          </button>
+        </div>
+      </div>
+      <Toaster />
+    </WebLayoutCanvas>
+  );
+}
+
+function AllTypesStory() {
+  useEffect(() => {
+    toast.success(toastCopy.title, { description: toastCopy.description });
+    toast.error(toastCopy.title, { description: toastCopy.description });
+    toast.warning(toastCopy.title, { description: toastCopy.description });
+    toast.info(toastCopy.title, { description: toastCopy.description });
+  }, []);
+
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100">
+      <Toaster />
+    </WebLayoutCanvas>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <ToastTriggerPanel />,
+};
+
+export const AllTypes: Story = {
+  render: () => <AllTypesStory />,
+};
+
+export const TitleOnly: Story = {
+  render: () => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
+      <button
+        type="button"
+        className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 text-sm font-medium text-slate-blue"
+        onClick={() => toast.success('Request approved.')}
+      >
+        Show title-only toast
+      </button>
+      <Toaster />
+    </WebLayoutCanvas>
+  ),
+};