@scripso-homepad/ui 0.4.9 → 0.4.11

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="typography-title-sm tracking-normal text-black"
+            >
+              {title}
+            </h2>
+            {subtitle ? (
+              <p
+                id="homepad-drawer-subtitle"
+                className="typography-body 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="typography-14 font-medium tracking-normal text-slate-blue">
+                {event.title}
+              </p>
+              <p className="typography-caption tracking-normal text-storm-gray-300">
+                {event.timestamp}
+              </p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

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

@@ -106,7 +106,7 @@ function FooterAlignmentsStory() {
           <button
             key={value}
             type="button"
-            className="rounded-lg border border-storm-gray-50 px-3 py-1 text-sm"
+            className="rounded-lg border border-storm-gray-50 px-3 py-1 typography-14"
             onClick={() => setAlign(value)}
           >
             {value}

package/src/web/components/Modal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import { Button } from '../../components/Button';
 import { cn } from '../utils/cn';
@@ -22,6 +23,7 @@ export type ModalProps = {
   cancelDisabled?: boolean;
   confirmDisabled?: boolean;
   closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
   containerClassName?: string;
   contentClassName?: string;
   buttonClassName?: string;
@@ -49,6 +51,7 @@ export function Modal({
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
+  closeOnEscape = true,
   containerClassName,
   contentClassName,
   buttonClassName,
@@ -58,8 +61,11 @@ export function Modal({
       return;
     }
 
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === 'Escape' && closeOnEscape) {
         onCancel();
       }
     };
@@ -67,9 +73,10 @@ export function Modal({
     window.addEventListener('keydown', handleKeyDown);
 
     return () => {
+      document.body.style.overflow = previousOverflow;
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [open, onCancel]);
+  }, [open, onCancel, closeOnEscape]);
 
   if (!open) {
     return null;
@@ -77,14 +84,22 @@ export function Modal({
 
   const sharedButtonClassName = cn(
     'btn h-13 justify-center!',
-    footerLayout === 'split' && 'min-w-0 flex-1',
-    buttonClassName,
+    footerLayout === 'split' && 'min-w-0 flex-1 basis-0',
+    footerLayout !== 'split' && buttonClassName,
   );
 
-  return (
+  const modal = (
     <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}
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
+      onClick={
+        closeOnBackdrop
+          ? (event) => {
+              if (event.target === event.currentTarget) {
+                onCancel();
+              }
+            }
+          : undefined
+      }
       role="presentation"
     >
       <div
@@ -93,14 +108,14 @@ export function Modal({
         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',
+          'flex max-h-[min(90dvh,calc(100dvh-2rem))] 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)}>
+        <header className={cn('flex shrink-0', icon ? 'items-center gap-2.5' : undefined)}>
           {icon ? (
             <div
               className={cn(
@@ -116,14 +131,14 @@ export function Modal({
           <div className="flex min-w-0 flex-col gap-2">
             <h2
               id="homepad-modal-title"
-              className="font-sans text-lg font-bold leading-none tracking-normal text-black"
+              className="typography-title-sm tracking-normal text-black"
             >
               {title}
             </h2>
             {subtitle ? (
               <p
                 id="homepad-modal-subtitle"
-                className="font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400"
+                className="typography-caption tracking-normal text-storm-gray-400"
               >
                 {subtitle}
               </p>
@@ -131,11 +146,11 @@ export function Modal({
           </div>
         </header>
 
-        <div className={cn('min-w-0', contentClassName)}>{children}</div>
+        <div className={cn('min-h-0 min-w-0 flex-1 overflow-y-auto', contentClassName)}>{children}</div>
 
         <footer
           className={cn(
-            'flex gap-4',
+            'flex shrink-0 gap-4',
             footerLayout === 'split' ? 'w-full' : footerAlignClasses[footerAlign],
           )}
         >
@@ -159,4 +174,6 @@ export function Modal({
       </div>
     </div>
   );
+
+  return typeof document !== 'undefined' ? createPortal(modal, document.body) : modal;
 }

package/src/web/components/Pagination.tsx

@@ -23,7 +23,7 @@ const defaultLabels: PaginationLabels = {
 };
 
 const paginationControlClassName =
-  'inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 text-xs font-medium leading-none text-storm-gray-500 transition-colors';
+  'inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 typography-12 font-medium text-storm-gray-500 transition-colors';
 
 const paginationHoverClassName = 'cursor-pointer hover:bg-storm-gray-0';
 
@@ -78,7 +78,7 @@ export function Pagination({
         className,
       )}
     >
-      <p className="text-xs font-medium leading-none text-storm-gray-200">
+      <p className="typography-12 font-medium text-storm-gray-200">
         {mergedLabels.showing({ start, end, total })}
       </p>
 

package/src/web/components/TableActionButton.tsx

@@ -16,12 +16,12 @@ export type TableActionButtonProps = {
   'onClick' | 'title' | '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 inlineActionClassName =
+  'inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 typography-12 font-medium 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',
 };
 

package/src/web/components/TableActionsMenu.tsx

@@ -172,7 +172,7 @@ export function TableActionsMenu({
                 item.onSelect();
               }}
               className={cn(
-                'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left font-sans text-sm font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
+                'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium 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',
               )}

package/src/web/components/TableIconText.tsx

@@ -12,7 +12,7 @@ export function TableIconText({ icon, children, className }: TableIconTextProps)
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-2 font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900',
+        'inline-flex items-center gap-2 typography-14 font-medium tracking-normal text-storm-gray-900',
         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="typography-title-sm text-slate-blue">Toast preview</h2>
+        <p className="typography-body 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 typography-14 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 typography-14 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 typography-14 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 typography-14 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 typography-14 font-medium text-slate-blue"
+        onClick={() => toast.success('Request approved.')}
+      >
+        Show title-only toast
+      </button>
+      <Toaster />
+    </WebLayoutCanvas>
+  ),
+};

package/src/web/components/Toaster.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import { Toaster as SonnerToaster, type ToasterProps } from 'sonner';
+
+import {
+  ToastCloseIcon,
+  ToastErrorIcon,
+  ToastInfoIcon,
+  ToastSuccessIcon,
+  ToastWarningIcon,
+} from '../icons/ToastIcons';
+
+import 'sonner/dist/styles.css';
+import './sonner-toast.css';
+
+function ToastIconBadge({
+  tone,
+  children,
+}: {
+  tone: 'success' | 'error' | 'warning' | 'info' | 'default';
+  children: ReactNode;
+}) {
+  return (
+    <div className={`homepad-toast__icon-badge homepad-toast__icon-badge--${tone}`}>
+      {children}
+    </div>
+  );
+}
+
+const homepadToastIcons = {
+  success: (
+    <ToastIconBadge tone="success">
+      <ToastSuccessIcon />
+    </ToastIconBadge>
+  ),
+  error: (
+    <ToastIconBadge tone="error">
+      <ToastErrorIcon />
+    </ToastIconBadge>
+  ),
+  warning: (
+    <ToastIconBadge tone="warning">
+      <ToastWarningIcon />
+    </ToastIconBadge>
+  ),
+  info: (
+    <ToastIconBadge tone="info">
+      <ToastInfoIcon />
+    </ToastIconBadge>
+  ),
+  close: <ToastCloseIcon />,
+};
+
+export type HomepadToasterProps = Omit<ToasterProps, 'richColors'>;
+
+export function Toaster({
+  className,
+  position = 'bottom-right',
+  theme = 'light',
+  closeButton = true,
+  gap = 12,
+  offset = 20,
+  toastOptions,
+  icons,
+  ...props
+}: HomepadToasterProps) {
+  return (
+    <SonnerToaster
+      className={['homepad-toaster', className].filter(Boolean).join(' ')}
+      theme={theme}
+      position={position}
+      closeButton={closeButton}
+      gap={gap}
+      offset={offset}
+      mobileOffset={8}
+      icons={{ ...homepadToastIcons, ...icons }}
+      toastOptions={{
+        duration: 4000,
+        classNames: {
+          toast: 'homepad-toast',
+          title: 'homepad-toast__title',
+          description: 'homepad-toast__description',
+          content: 'homepad-toast__content',
+          icon: 'homepad-toast__icon',
+          closeButton: 'homepad-toast__close',
+          ...toastOptions?.classNames,
+        },
+        ...toastOptions,
+      }}
+      {...props}
+    />
+  );
+}

package/src/web/components/ToasterProvider.tsx

@@ -0,0 +1,6 @@
+import { Toaster } from './Toaster';
+
+/** Global toast outlet styled to match the HomePad design system. */
+export function ToasterProvider() {
+  return <Toaster />;
+}

package/src/web/components/drawer-scroll.css

@@ -0,0 +1,41 @@
+.drawer-scroll-area {
+  scrollbar-color: var(--color-storm-gray-200, #d5d9dd) transparent;
+  scrollbar-width: thin;
+}
+
+.drawer-scroll-area::-webkit-scrollbar {
+  width: 8px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-button,
+.drawer-scroll-area::-webkit-scrollbar-button:single-button,
+.drawer-scroll-area::-webkit-scrollbar-button:double-button,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:start:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:end:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:start:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:end:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:increment {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-thumb {
+  background-color: var(--color-storm-gray-200, #d5d9dd);
+  border-radius: 9999px;
+}
+
+@media (max-width: 767px) {
+  .drawer-scroll-area::-webkit-scrollbar {
+    width: 4px;
+  }
+}