@scripso-homepad/ui 0.4.7 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

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/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/icons/ArrowUpRightIcon.tsx

@@ -12,7 +12,7 @@ interface ArrowUpRightIconProps {
 /** Native — react-native-svg (peer dependency). */
 export function ArrowUpRightIcon({
   size = 20,
-  color = "#08275d",
+  color = "#082640",
   strokeWidth = 2,
 }: ArrowUpRightIconProps) {
   return (

package/src/icons/ArrowUpRightIcon.web.tsx

@@ -9,7 +9,7 @@ interface ArrowUpRightIconProps {
 /** Web / Storybook — plain SVG (no react-native-svg). */
 export function ArrowUpRightIcon({
   size = 20,
-  color = "#08275d",
+  color = "#082640",
   strokeWidth = 2,
 }: ArrowUpRightIconProps) {
   return (

package/src/theme/input.ts

@@ -53,8 +53,8 @@ function createOutlineStyle(ringColor: string): ViewStyle {
 }
 
 const defaultOutline: ViewStyle = {
-  borderRadius: radii.lg,
-  borderWidth: 0,
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+  borderWidth: INPUT_OUTLINE_WIDTH,
   borderColor: colors.transparent,
   padding: 0,
   backgroundColor: colors.transparent,

package/src/theme/select.ts

@@ -67,8 +67,8 @@ function createOutlineStyle(ringColor: string): ViewStyle {
 }
 
 const defaultOutline: ViewStyle = {
-  borderRadius: radii.lg,
-  borderWidth: 0,
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+  borderWidth: INPUT_OUTLINE_WIDTH,
   borderColor: colors.transparent,
   padding: 0,
   backgroundColor: colors.transparent,

package/src/theme/tokens.ts

@@ -23,18 +23,18 @@ export type StormGrayStep = keyof typeof stormGray;
 
 /** Navy scale — Figma steps 0 → 8.5 */
 export const navy = {
-  "0": "#f8f9fb",
-  "0.5": "#e5e9ef",
-  "1": "#cdd3df",
-  "1.5": "#b4bece",
-  "2": "#9ca8be",
-  "3": "#6a7d9e",
-  "4": "#39527d",
-  "5": "#08275d",
-  "6": "#061f4a",
-  "7": "#051738",
-  "8": "#031025",
-  "8.5": "#020c1c",
+  "0": "#f6fafe",
+  "0.5": "#dee5eb",
+  "1": "#c6d0d8",
+  "1.5": "#afbac5",
+  "2": "#97a5b2",
+  "3": "#677b8c",
+  "4": "#385066",
+  "5": "#082640",
+  "6": "#061e33",
+  "7": "#051726",
+  "8": "#030f1a",
+  "8.5": "#020b13",
 } as const;
 
 export type NavyStep = keyof typeof navy;

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/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',
+    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-none 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"
+              >
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+        </header>
+
+        <div className={cn('min-w-0', contentClassName)}>{children}</div>
+
+        <footer
+          className={cn(
+            'flex 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,7 +11,10 @@ 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 =
   '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';
@@ -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/TableActionsMenu.tsx

@@ -172,13 +172,13 @@ export function TableActionsMenu({
                 item.onSelect();
               }}
               className={cn(
-                'flex w-full cursor-pointer items-center gap-2.5 px-3 py-4 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 font-sans text-sm font-medium leading-none 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',
               )}
             >
               {icon ? (
-                <span className="inline-flex size-5 shrink-0 items-center justify-center">
+                <span className="inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200">
                   {icon}
                 </span>
               ) : null}

package/src/web/icons/TableMenuInfoIcon.tsx

@@ -16,8 +16,8 @@ export function TableMenuInfoIcon({ className }: TableMenuInfoIconProps) {
       className={cn('shrink-0', className)}
     >
       <path
-        d="M9.9974 13.3337V10.0003M9.9974 6.66699H10.0057M18.3307 10.0003C18.3307 14.6027 14.5998 18.3337 9.9974 18.3337C5.39502 18.3337 1.66406 14.6027 1.66406 10.0003C1.66406 5.39795 5.39502 1.66699 9.9974 1.66699C14.5998 1.66699 18.3307 5.39795 18.3307 10.0003Z"
-        stroke="#B5BCC1"
+        d="M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z"
+        stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/web/index.ts

@@ -96,6 +96,12 @@ export type { TableActionButtonProps, TableActionButtonVariant } from './compone
 export { TableIconText } from './components/TableIconText';
 export type { TableIconTextProps } from './components/TableIconText';
 
+export { Modal } from './components/Modal';
+export type { ModalFooterAlign, ModalFooterLayout, ModalProps } from './components/Modal';
+
+export { ConfirmModal } from './components/ConfirmModal';
+export type { ConfirmModalProps } from './components/ConfirmModal';
+
 export { useMediaQuery } from './hooks/useMediaQuery';
 export { useOnClickOutside } from './hooks/useOnClickOutside';
 export { cn } from './utils/cn';