@scripso-homepad/ui 0.4.8 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.8",
+  "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/Button.tsx

@@ -115,14 +115,21 @@ export function Button({
   const preset = variantConfig[variant];
   const metrics = sizeConfig[size];
 
-  useApplyWebClassName(containerRef, className);
-  useApplyWebClassName(textRef, textClassName);
-
   const label = typeof children !== "undefined" ? children : title;
   const hasCustomChildren = typeof children !== "undefined";
   const customIcon =
     icon != null && typeof icon !== "boolean" ? icon : undefined;
   const hasIcon = showIcon || icon === true || customIcon != null;
+  const resolvedContainerClassName = [
+    Platform.OS === "web" ? "max-md:px-4!" : "",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  useApplyWebClassName(containerRef, resolvedContainerClassName || undefined);
+  useApplyWebClassName(textRef, textClassName);
+
   const iconNode =
     customIcon ?? (
       <ArrowUpRightIcon size={metrics.iconSize} color={preset.iconColor} />

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/components/Select.tsx

@@ -176,7 +176,7 @@ export function Select({
     () =>
       resolveSelectDropdownContentHeight(options.length, optionHeight) >
       SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
-    [compact, optionHeight, options.length],
+    [optionHeight, options.length],
   );
 
   useApplyWebClassName(wrapperRef, className);

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+
+import { ConfirmModal } from './ConfirmModal';
+
+const meta = {
+  title: 'Web Components/ConfirmModal',
+  component: ConfirmModal,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    open: true,
+    title: 'Կասեցնե՞լ շենքի մուտքը',
+    description: (
+      <>
+        Դուք պատրաստվում եք կասեցնել «Կենտրոն» շենքի մուտքը։
+        <br />
+        Բոլոր օգտատերերը կկորցնեն հասանելիությունը համակարգին։
+      </>
+    ),
+    cancelText: 'Չեղարկել',
+    confirmText: 'Կասեցնել',
+    onCancel: fn(),
+    onConfirm: fn(),
+  },
+} satisfies Meta<typeof ConfirmModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <ConfirmModal {...args} />
+    </WebLayoutCanvas>
+  ),
+};
+
+export const RejectRequest: Story = {
+  args: {
+    title: 'Մերժե՞լ շենքի հայտը',
+    description:' Դուք պատրաստվում եք մերժել «Արաբկիր 12» հասցեի շենքի հայտը։ Կազմակերպությունը կտեղեկացվի մերժման մասին։',
+    cancelText: 'Չեղարկել',
+    confirmText: 'Մերժել',
+  },
+  render: (args) => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-50 p-6">
+      <ConfirmModal {...args} />
+    </WebLayoutCanvas>
+  ),
+};

package/src/web/components/ConfirmModal.tsx

@@ -0,0 +1,116 @@
+import { useEffect, type ReactNode } from 'react';
+
+import { Button } from '../../components/Button';
+import { cn } from '../utils/cn';
+
+export type ConfirmModalProps = {
+  open: boolean;
+  title: string;
+  description: ReactNode;
+  cancelText: string;
+  confirmText: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+  cancelDisabled?: boolean;
+  confirmDisabled?: boolean;
+  closeOnBackdrop?: boolean;
+  containerClassName?: string;
+  buttonClassName?: string;
+};
+
+export function ConfirmModal({
+  open,
+  title,
+  description,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm,
+  cancelDisabled = false,
+  confirmDisabled = false,
+  closeOnBackdrop = true,
+  containerClassName,
+  buttonClassName,
+}: ConfirmModalProps) {
+  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-10 min-w-0 flex-1 justify-center!', buttonClassName);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md bg-storm-gray-850/40"
+      onClick={closeOnBackdrop ? onCancel : undefined}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="homepad-confirm-modal-title"
+        aria-describedby="homepad-confirm-modal-description"
+        className={cn(
+          'flex w-full max-w-md flex-col gap-8 rounded-2xl bg-white p-4 opacity-100 md:p-6',
+          containerClassName,
+        )}
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        <header className="flex flex-col gap-3 text-center">
+          <h2
+            id="homepad-confirm-modal-title"
+            className="font-sans text-xl font-bold leading-6.75 tracking-normal text-black"
+          >
+            {title}
+          </h2>
+          <div
+            id="homepad-confirm-modal-description"
+            className="text-center font-sans text-sm font-normal leading-4.75 tracking-normal text-storm-gray-400"
+          >
+            {description}
+          </div>
+        </header>
+
+        <footer className="flex w-full gap-4">
+          <Button
+            title={cancelText}
+            onPress={onCancel}
+            variant="gray"
+            size='sm'
+            disabled={cancelDisabled}
+            className={sharedButtonClassName}
+            textClassName="text-center!"
+          />
+          <Button
+            title={confirmText}
+            onPress={onConfirm}
+            variant="primary"
+            size='sm'
+            disabled={confirmDisabled}
+            className={sharedButtonClassName}
+            textClassName="text-center!"
+          />
+        </footer>
+      </div>
+    </div>
+  );
+}

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