@scripso-homepad/ui 0.4.9 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -29,7 +29,9 @@
       "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",
+    "./web/typography.css": "./src/web/styles/typography.css"
   },
   "files": [
     "dist",
@@ -51,7 +53,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 +68,9 @@
     },
     "lucide-react": {
       "optional": true
+    },
+    "sonner": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -90,6 +96,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/Calendar.tsx

@@ -13,6 +13,7 @@ import {
   formatCalendarYear,
   getYearPageStart,
   isMonthDisabled,
+  isSameDay,
   isYearDisabled,
   selectRangeDate,
   type CalendarDayCell,
@@ -64,13 +65,13 @@ type CalendarBaseProps = {
 export type CalendarSingleProps = CalendarBaseProps & {
   mode?: "single";
   value?: Date;
-  onChange?: (date: Date) => void;
+  onChange?: (date: Date | undefined) => void;
 };
 
 export type CalendarRangeProps = CalendarBaseProps & {
   mode: "range";
   value?: DateRange;
-  onChange?: (range: DateRange) => void;
+  onChange?: (range: DateRange | undefined) => void;
 };
 
 export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
@@ -275,6 +276,13 @@ export function Calendar(props: CalendarProps) {
       return;
     }
 
+    const currentValue = singleProps?.value;
+
+    if (currentValue && isSameDay(date, currentValue)) {
+      singleProps?.onChange?.(undefined);
+      return;
+    }
+
     singleProps?.onChange?.(date);
   }
 

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,
@@ -203,7 +207,7 @@ export function DatePicker(props: DatePickerProps) {
     });
   }
 
-  function handleSingleSelect(date: Date) {
+  function handleSingleSelect(date: Date | undefined) {
     if (props.mode === "range") {
       return;
     }
@@ -212,34 +216,51 @@ export function DatePicker(props: DatePickerProps) {
     closePicker();
   }
 
-  function handleRangeSelect(range: DateRange) {
+  function handleRangeSelect(range: DateRange | undefined) {
     if (props.mode !== "range") {
       return;
     }
 
     props.onChange?.(range);
 
-    if (closeOnRangeComplete && range.end) {
+    if (closeOnRangeComplete && range?.end) {
       closePicker();
     }
   }
 
+  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

@@ -73,6 +73,112 @@ function renderSelectIcon(icon: ReactNode, color: string) {
   return icon;
 }
 
+function resolveWebTextNode(
+  ref: React.RefObject<ComponentRef<typeof Text> | null>,
+): HTMLElement | null {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+
+  const node = ref.current as unknown;
+  return node instanceof HTMLElement ? node : null;
+}
+
+function syncTruncatedNativeTitle(
+  ref: React.RefObject<ComponentRef<typeof Text> | null>,
+  label: string,
+): void {
+  const element = resolveWebTextNode(ref);
+  if (!element) {
+    return;
+  }
+
+  if (element.scrollWidth > element.clientWidth) {
+    element.setAttribute("title", label);
+    return;
+  }
+
+  element.removeAttribute("title");
+}
+
+function clearNativeTitle(ref: React.RefObject<ComponentRef<typeof Text> | null>): void {
+  resolveWebTextNode(ref)?.removeAttribute("title");
+}
+
+interface SelectOptionItemProps {
+  option: SelectOption;
+  compact: boolean;
+  optionHeight: number;
+  isSelected: boolean;
+  isHighlighted: boolean;
+  isLast: boolean;
+  selectableIndex: number;
+  onHighlight: (selectableIndex: number) => void;
+  onSelect: (value: string) => void;
+}
+
+function SelectOptionItem({
+  option,
+  compact,
+  optionHeight,
+  isSelected,
+  isHighlighted,
+  isLast,
+  selectableIndex,
+  onHighlight,
+  onSelect,
+}: SelectOptionItemProps) {
+  const labelRef = useRef<ComponentRef<typeof Text>>(null);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: option.disabled, selected: isSelected }}
+      disabled={option.disabled}
+      onPress={() => {
+        if (!option.disabled) {
+          onSelect(option.value);
+        }
+      }}
+      onHoverIn={() => {
+        if (!option.disabled && selectableIndex >= 0) {
+          onHighlight(selectableIndex);
+        }
+
+        syncTruncatedNativeTitle(labelRef, option.label);
+      }}
+      onHoverOut={() => {
+        clearNativeTitle(labelRef);
+      }}
+      style={[
+        selectDropdownMetrics.option,
+        compact && styles.optionCompact,
+        { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
+        isSelected && selectDropdownMetrics.optionSelected,
+        compact && isSelected && styles.optionSelectedCompact,
+        isHighlighted && !isSelected && !option.disabled
+          ? selectDropdownMetrics.optionHighlighted
+          : null,
+        !isLast && styles.optionSpacing,
+        option.disabled && styles.optionDisabled,
+      ]}
+    >
+      <Text
+        ref={labelRef}
+        style={[
+          selectDropdownMetrics.optionLabel,
+          styles.optionLabel,
+          isSelected && selectDropdownMetrics.optionLabelSelected,
+          option.disabled && styles.optionLabelDisabled,
+        ]}
+        numberOfLines={1}
+      >
+        {option.label}
+      </Text>
+    </Pressable>
+  );
+}
+
 export type SelectOption = {
   value: string;
   label: string;
@@ -282,6 +388,12 @@ export function Select({
       return;
     }
 
+    if (selectedValues.includes(nextValue)) {
+      (onValueChange as SingleSelectProps["onValueChange"] | undefined)?.("");
+      closeMenu();
+      return;
+    }
+
     (onValueChange as SingleSelectProps["onValueChange"] | undefined)?.(nextValue);
     closeMenu();
   }
@@ -293,45 +405,18 @@ export function Select({
     const isLast = index === options.length - 1;
 
     return (
-      <Pressable
+      <SelectOptionItem
         key={option.value}
-        accessibilityRole="button"
-        accessibilityState={{ disabled: option.disabled, selected: isSelected }}
-        disabled={option.disabled}
-        onPress={() => {
-          if (!option.disabled) {
-            handleSelect(option.value);
-          }
-        }}
-        onHoverIn={() => {
-          if (!option.disabled && selectableIndex >= 0) {
-            setHighlightedIndex(selectableIndex);
-          }
-        }}
-        style={[
-          selectDropdownMetrics.option,
-          compact && styles.optionCompact,
-          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
-          isSelected && selectDropdownMetrics.optionSelected,
-          compact && isSelected && styles.optionSelectedCompact,
-          isHighlighted && !isSelected && !option.disabled
-            ? selectDropdownMetrics.optionHighlighted
-            : null,
-          !isLast && styles.optionSpacing,
-          option.disabled && styles.optionDisabled,
-        ]}
-      >
-        <Text
-          style={[
-            selectDropdownMetrics.optionLabel,
-            isSelected && selectDropdownMetrics.optionLabelSelected,
-            option.disabled && styles.optionLabelDisabled,
-          ]}
-          numberOfLines={1}
-        >
-          {option.label}
-        </Text>
-      </Pressable>
+        option={option}
+        compact={compact}
+        optionHeight={optionHeight}
+        isSelected={isSelected}
+        isHighlighted={isHighlighted}
+        isLast={isLast}
+        selectableIndex={selectableIndex}
+        onHighlight={setHighlightedIndex}
+        onSelect={handleSelect}
+      />
     );
   });
 
@@ -479,6 +564,16 @@ const styles = StyleSheet.create({
   optionDisabled: {
     opacity: 0.5,
   },
+  optionLabel: {
+    minWidth: 0,
+    ...(Platform.OS === "web"
+      ? ({
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        } as const)
+      : null),
+  },
   optionLabelDisabled: {
     color: colors.stormGray300,
   },

package/src/theme/select.ts

@@ -29,7 +29,7 @@ export const selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue,
 } as const;

package/src/utils/calendarDays.ts

@@ -41,24 +41,33 @@ export function isInDateRange(date: Date, start?: Date, end?: Date): boolean {
   return !isBeforeDay(day, start) && !isAfterDay(day, end);
 }
 
-export function selectRangeDate(clicked: Date, current?: DateRange): DateRange {
+export function selectRangeDate(clicked: Date, current?: DateRange): DateRange | undefined {
   const clickedDate = stripTime(clicked);
 
-  if (!current?.start || current.end) {
+  if (!current?.start) {
     return { start: clickedDate };
   }
 
   const start = stripTime(current.start);
+  const end = current.end ? stripTime(current.end) : undefined;
+
+  if (!end) {
+    if (isSameDay(clickedDate, start)) {
+      return undefined;
+    }
+
+    if (isBeforeDay(clickedDate, start)) {
+      return { start: clickedDate };
+    }
 
-  if (isSameDay(clickedDate, start)) {
     return { start, end: clickedDate };
   }
 
-  if (isBeforeDay(clickedDate, start)) {
-    return { start: clickedDate };
+  if (isSameDay(clickedDate, end)) {
+    return undefined;
   }
 
-  return { start, end: clickedDate };
+  return { start: clickedDate };
 }
 
 export function isSameDay(left: Date, right: Date): boolean {

package/src/web/components/Badge.tsx

@@ -23,7 +23,7 @@ export function Badge({ children, variant = 'neutral', icon, className }: BadgeP
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 font-sans text-xs font-semibold leading-none whitespace-nowrap',
+        'inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 typography-12 font-semibold whitespace-nowrap',
         badgeVariantClasses[variant],
         className,
       )}

package/src/web/components/ConfirmModal.tsx

@@ -78,13 +78,13 @@ export function ConfirmModal({
         <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"
+            className="typography-title 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"
+            className="text-center typography-body tracking-normal text-storm-gray-400"
           >
             {description}
           </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 typography-14 font-medium tracking-normal text-storm-gray-500">
+        {label}
+      </span>
+      <span className="shrink-0 text-right typography-14 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="typography-12 font-semibold uppercase 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="typography-14 font-medium 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="typography-12 font-semibold uppercase 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="typography-14 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 typography-14 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 />,
+};