@scripso-homepad/ui 0.4.9 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -29,7 +29,8 @@
       "import": "./src/web/index.ts",
       "require": "./dist/web/index.cjs",
       "default": "./src/web/index.ts"
-    }
+    },
+    "./web/table-scroll.css": "./src/web/components/table-scroll.css"
   },
   "files": [
     "dist",
@@ -51,7 +52,8 @@
     "react-native": ">=0.74",
     "react-native-svg": ">=13",
     "react-native-web": ">=0.19",
-    "react-router-dom": ">=6"
+    "react-router-dom": ">=6",
+    "sonner": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "react-native-svg": {
@@ -65,6 +67,9 @@
     },
     "lucide-react": {
       "optional": true
+    },
+    "sonner": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -90,6 +95,7 @@
     "react-native-svg": "^15.11.2",
     "react-native-web": "^0.19.13",
     "react-router-dom": "^7.9.1",
+    "sonner": "^2.0.7",
     "storybook": "^8.4.7",
     "tailwindcss": "^4.1.13",
     "tsup": "^8.3.5",

package/src/components/DatePicker.tsx

@@ -51,6 +51,8 @@ type DatePickerFieldProps = {
   containerStyle?: StyleProp<ViewStyle>;
   className?: string;
   fieldClassName?: string;
+  fieldStyle?: StyleProp<ViewStyle>;
+  fieldOutlineStyle?: StyleProp<ViewStyle>;
   panelClassName?: string;
   labelClassName?: string;
   errorClassName?: string;
@@ -95,6 +97,8 @@ export function DatePicker(props: DatePickerProps) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -224,22 +228,39 @@ export function DatePicker(props: DatePickerProps) {
     }
   }
 
+  const isFluidField = Boolean(fieldStyle) || Boolean(fieldOutlineStyle);
+
   return (
-    <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
+    <View
+      ref={wrapperRef}
+      style={[styles.wrapper, isFluidField && styles.wrapperFluid, containerStyle]}
+    >
       {label ? (
         <Label disabled={disabled} style={styles.label} className={labelClassName}>
           {label}
         </Label>
       ) : null}
 
-      <View style={[fieldStyles.outline, styles.fieldOutline]}>
+      <View
+        style={[
+          fieldStyles.outline,
+          styles.fieldOutline,
+          isFluidField && styles.fieldOutlineFluid,
+          fieldOutlineStyle,
+        ]}
+      >
         <Pressable
           ref={triggerRef}
           accessibilityRole="button"
           accessibilityState={{ disabled, expanded: open }}
           disabled={disabled}
           onPress={openPicker}
-          style={[calendarFieldMetrics.container, fieldStyles.container]}
+          style={[
+            calendarFieldMetrics.container,
+            isFluidField && styles.fieldContainerFluid,
+            fieldStyles.container,
+            fieldStyle,
+          ]}
         >
           <Text
             style={[calendarFieldMetrics.value, valueTextStyle]}
@@ -327,11 +348,24 @@ const styles = StyleSheet.create({
     maxWidth: "100%",
     gap: SELECT_LABEL_GAP,
   },
+  wrapperFluid: {
+    width: "100%",
+  },
   fieldOutline: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
     alignSelf: "flex-start",
   },
+  fieldOutlineFluid: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
+  fieldContainerFluid: {
+    width: "100%",
+    minWidth: 0,
+    maxWidth: "100%",
+    alignSelf: "stretch",
+  },
   label: {
     ...calendarLabelTypography,
   },

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

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { Button } from '../../components/Button';
+import { WebLayoutCanvas } from '../layout/story-helpers';
+
+import { Drawer } from './Drawer';
+import { HistoryTimeline } from './HistoryTimeline';
+import { StatusBadge } from './StatusBadge';
+
+const historyEvents = [
+  {
+    id: 'received',
+    title: 'Հայտը ստացվել է',
+    timestamp: '24.06.2026, 14:20',
+  },
+  {
+    id: 'approved',
+    title: 'Հայտը հաստատվել է, սպասում է վճարման',
+    timestamp: '24.06.2026, 15:05',
+  },
+];
+
+const meta = {
+  title: 'Web Components/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    open: true,
+    title: 'Հայտ #00042',
+    subtitle: 'Ստացվել է 24.06.2026, 14:20',
+    closeAriaLabel: 'Փակել',
+    onClose: fn(),
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DetailField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className="min-w-0 flex-1 font-sans text-sm font-medium leading-[19px] tracking-normal text-storm-gray-500">
+        {label}
+      </span>
+      <span className="shrink-0 text-right font-sans text-sm font-medium leading-[14px] tracking-normal text-storm-gray-900">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function DetailsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="flex flex-col gap-3">
+      <h3 className="font-sans text-xs font-semibold uppercase leading-4 tracking-normal text-storm-gray-200">
+        {title}
+      </h3>
+      <div className="flex flex-col gap-4">{children}</div>
+    </section>
+  );
+}
+
+function RequestDetailsBody() {
+  return (
+    <>
+      <div className="flex flex-col gap-8 pb-6">
+        <div className="flex items-center justify-between gap-4">
+          <span className="font-sans text-sm font-medium leading-[19px] tracking-normal text-storm-gray-500">
+            Կարգավիճակ
+          </span>
+          <StatusBadge tone="warning">Սպասում է վճարման</StatusBadge>
+        </div>
+
+        <DetailsSection title="Կազմակերպության տվյալներ">
+          <DetailField label="Հասցե" value="Արաբկիր 12" />
+          <DetailField label="Կազմակերպություն" value="Manuk's org" />
+          <DetailField label="Սակագնային պլան" value="150+ Apartments" />
+          <DetailField label="Անհատական գին" value="10 ֏" />
+          <DetailField label="Բնակարանների առավելագույն քանակ" value="120" />
+        </DetailsSection>
+
+        <DetailsSection title="Կոնտակտային անձ">
+          <DetailField label="Անուն / Ազգանուն" value="Manuk Grigoryan" />
+          <DetailField label="Էլ. փոստ" value="manuk@example.com" />
+          <DetailField label="Հեռախոսահամար" value="+374 99 000000" />
+        </DetailsSection>
+      </div>
+
+      <section className="-mx-6 flex flex-col justify-between border-t border-dashed border-storm-gray-50 px-6 pt-6 pb-0">
+        <div className="flex flex-col gap-3">
+          <h3 className="font-sans text-xs font-semibold uppercase leading-4 tracking-normal text-storm-gray-200">
+            Գործողությունների պատմություն
+          </h3>
+          <HistoryTimeline events={historyEvents} />
+        </div>
+      </section>
+    </>
+  );
+}
+
+const footerButton = (
+  <div className="w-full">
+    <Button
+      title="Կրկին ուղարկել վճարման հղումը"
+      onPress={fn()}
+      variant="primary"
+      className="btn shrink-0 justify-center!"
+      textClassName="text-center!"
+      style={{
+        width: '100%',
+        height: 52,
+        minHeight: 52,
+        maxHeight: 52,
+        paddingTop: 0,
+        paddingBottom: 0,
+      }}
+    />
+  </div>
+);
+
+function DrawerStoryShell({
+  open,
+  onClose,
+  footer,
+  title,
+  subtitle,
+}: {
+  open: boolean;
+  onClose: () => void;
+  footer?: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+}) {
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100">
+      <Drawer
+        open={open}
+        title={title ?? 'Հայտ #00042'}
+        subtitle={subtitle ?? 'Ստացվել է 24.06.2026, 14:20'}
+        closeAriaLabel="Փակել"
+        onClose={onClose}
+        footer={footer}
+      >
+        <RequestDetailsBody />
+      </Drawer>
+    </WebLayoutCanvas>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+  render: (args) => (
+    <DrawerStoryShell open={args.open} onClose={args.onClose} title={args.title} subtitle={args.subtitle} />
+  ),
+};
+
+export const WithFooter: Story = {
+  args: {
+    children: null,
+  },
+  render: (args) => (
+    <DrawerStoryShell
+      open={args.open}
+      onClose={args.onClose}
+      title={args.title}
+      subtitle={args.subtitle}
+      footer={footerButton}
+    />
+  ),
+};
+
+export const WithoutSubtitle: Story = {
+  args: {
+    children: null,
+    subtitle: undefined,
+    title: 'Կարգավորումներ',
+  },
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100">
+      <Drawer
+        open={args.open}
+        title={args.title}
+        closeAriaLabel="Փակել"
+        onClose={args.onClose}
+      >
+        <p className="font-sans text-sm leading-[19px] text-storm-gray-500">
+          Drawer content without a subtitle line in the header.
+        </p>
+      </Drawer>
+    </WebLayoutCanvas>
+  ),
+};
+
+function InteractiveDrawerStory() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <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={() => setOpen(true)}
+      >
+        Բացել drawer-ը
+      </button>
+
+      <Drawer
+        open={open}
+        title="Հայտ #00042"
+        subtitle="Ստացվել է 24.06.2026, 14:20"
+        closeAriaLabel="Փակել"
+        onClose={() => setOpen(false)}
+        footer={footerButton}
+      >
+        <RequestDetailsBody />
+      </Drawer>
+    </WebLayoutCanvas>
+  );
+}
+
+export const Interactive: Story = {
+  args: {
+    children: null,
+    open: false,
+  },
+  render: () => <InteractiveDrawerStory />,
+};

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.tsx

@@ -77,8 +77,8 @@ 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 (
@@ -116,14 +116,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="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-none tracking-normal text-storm-gray-400"
+                className="font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400"
               >
                 {subtitle}
               </p>
@@ -135,7 +135,7 @@ export function Modal({
 
         <footer
           className={cn(
-            'flex gap-4',
+            'flex shrink-0 gap-4',
             footerLayout === 'split' ? 'w-full' : footerAlignClasses[footerAlign],
           )}
         >

package/src/web/components/TableActionButton.tsx

@@ -16,12 +16,12 @@ export type TableActionButtonProps = {
   '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',
 };