@scripso-homepad/ui 0.4.1 → 0.4.3

package/src/utils/calendarLocalization.ts

@@ -0,0 +1,187 @@
+export type CalendarLocale = "hy-AM" | "en-US" | "ru-RU";
+
+export type CalendarTranslationKey =
+  | "datePlaceholder"
+  | "rangePlaceholder"
+  | "previousMonth"
+  | "nextMonth"
+  | "previousYear"
+  | "nextYear"
+  | "previousYears"
+  | "nextYears"
+  | "selectMonth"
+  | "selectYear"
+  | "closeCalendar";
+
+export type CalendarTranslations = Record<CalendarTranslationKey, string> & {
+  /** Weekday labels in Monday-first order. */
+  weekdays: string[];
+  /** Short month labels used in compact calendar headers and month picker cells. */
+  monthsShort: string[];
+  /** Full month labels available for consumers that need long-form display. */
+  monthsLong: string[];
+};
+
+export const calendarTranslations: Record<CalendarLocale, CalendarTranslations> = {
+  "hy-AM": {
+    weekdays: ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"],
+    monthsShort: [
+      "Հնվ",
+      "Փտվ",
+      "Մրտ",
+      "Ապր",
+      "Մյս",
+      "Հուն",
+      "Հուլ",
+      "Օգս",
+      "Սեպ",
+      "Հոկ",
+      "Նոյ",
+      "Դեկ",
+    ],
+    monthsLong: [
+      "Հունվար",
+      "Փետրվար",
+      "Մարտ",
+      "Ապրիլ",
+      "Մայիս",
+      "Հունիս",
+      "Հուլիս",
+      "Օգոստոս",
+      "Սեպտեմբեր",
+      "Հոկտեմբեր",
+      "Նոյեմբեր",
+      "Դեկտեմբեր",
+    ],
+    datePlaceholder: "Ընտրել ամսաթիվ",
+    rangePlaceholder: "Ընտրել ժամանակահատված",
+    previousMonth: "Նախորդ ամիս",
+    nextMonth: "Հաջորդ ամիս",
+    previousYear: "Նախորդ տարի",
+    nextYear: "Հաջորդ տարի",
+    previousYears: "Նախորդ տարիներ",
+    nextYears: "Հաջորդ տարիներ",
+    selectMonth: "Ընտրել ամիս",
+    selectYear: "Ընտրել տարի",
+    closeCalendar: "Փակել օրացույցը",
+  },
+  "en-US": {
+    weekdays: ["MO", "TU", "WE", "TH", "FR", "SA", "SU"],
+    monthsShort: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    monthsLong: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+    datePlaceholder: "Select date",
+    rangePlaceholder: "Select date range",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    previousYear: "Previous year",
+    nextYear: "Next year",
+    previousYears: "Previous years",
+    nextYears: "Next years",
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    closeCalendar: "Close calendar",
+  },
+  "ru-RU": {
+    weekdays: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
+    monthsShort: [
+      "Янв",
+      "Фев",
+      "Мар",
+      "Апр",
+      "Май",
+      "Июн",
+      "Июл",
+      "Авг",
+      "Сен",
+      "Окт",
+      "Ноя",
+      "Дек",
+    ],
+    monthsLong: [
+      "Январь",
+      "Февраль",
+      "Март",
+      "Апрель",
+      "Май",
+      "Июнь",
+      "Июль",
+      "Август",
+      "Сентябрь",
+      "Октябрь",
+      "Ноябрь",
+      "Декабрь",
+    ],
+    datePlaceholder: "Выбрать дату",
+    rangePlaceholder: "Выбрать период",
+    previousMonth: "Предыдущий месяц",
+    nextMonth: "Следующий месяц",
+    previousYear: "Предыдущий год",
+    nextYear: "Следующий год",
+    previousYears: "Предыдущие годы",
+    nextYears: "Следующие годы",
+    selectMonth: "Выбрать месяц",
+    selectYear: "Выбрать год",
+    closeCalendar: "Закрыть календарь",
+  },
+};
+
+export function resolveCalendarLocale(locale: string): CalendarLocale {
+  const normalizedLocale = locale.toLowerCase();
+
+  if (normalizedLocale.startsWith("hy")) {
+    return "hy-AM";
+  }
+
+  if (normalizedLocale.startsWith("ru")) {
+    return "ru-RU";
+  }
+
+  return "en-US";
+}
+
+export function getCalendarTranslations(locale: string): CalendarTranslations {
+  return calendarTranslations[resolveCalendarLocale(locale)];
+}
+
+export function resolveWeekdayLabels(locale: string): string[] {
+  return getCalendarTranslations(locale).weekdays;
+}
+
+export function getCalendarMonthLabels(
+  locale: string,
+  width: "short" | "long" = "short",
+): string[] {
+  const translations = getCalendarTranslations(locale);
+
+  return width === "short" ? translations.monthsShort : translations.monthsLong;
+}
+
+export function formatLocalizedCalendarMonthYear(date: Date, locale: string): string {
+  return `${getCalendarMonthLabels(locale)[date.getMonth()]} ${date.getFullYear()}`;
+}

package/src/utils/countryDropdownScrollStyles.ts

@@ -2,51 +2,91 @@ import { Platform } from "react-native";
 import { colors } from "../theme/tokens";
 
 export const COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
+export const SELECT_DROPDOWN_SCROLL_CLASS = "hp-select-dropdown-scroll";
 
-const STYLE_ID = "hp-country-dropdown-scroll-styles";
+const STYLE_ID = "hp-dropdown-scroll-styles";
 
-export const countryDropdownScrollCss = `
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS} {
+function createDropdownScrollCss(className: string): string {
+  return `
+  .${className} {
     scrollbar-width: thin;
     scrollbar-color: ${colors.stormGray300} transparent;
     overflow-y: auto;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar {
+  .${className}::-webkit-scrollbar {
     width: 4px;
+    -webkit-appearance: none;
+    appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-corner {
+  .${className}::-webkit-scrollbar-corner {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:single-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:start:decrement,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:end:increment {
+  .${className}::-webkit-scrollbar-button,
+  .${className}::-webkit-scrollbar-button:single-button,
+  .${className}::-webkit-scrollbar-button:double-button,
+  .${className}::-webkit-scrollbar-button:horizontal:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:increment,
+  .${className}::-webkit-scrollbar-button:horizontal:start:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:end:increment,
+  .${className}::-webkit-scrollbar-button:vertical:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:increment,
+  .${className}::-webkit-scrollbar-button:vertical:start:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:end:increment,
+  .${className}::-webkit-scrollbar-button:start:decrement,
+  .${className}::-webkit-scrollbar-button:end:increment,
+  .${className}::-webkit-scrollbar-button:decrement,
+  .${className}::-webkit-scrollbar-button:increment {
     display: none;
     width: 0;
     height: 0;
+    max-width: 0;
+    max-height: 0;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
     -webkit-appearance: none;
     appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-track {
+  .${className}::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-thumb {
+  .${className}::-webkit-scrollbar-thumb {
     background-color: ${colors.stormGray300};
     border-radius: 9999px;
   }
 `;
+}
 
-export function ensureCountryDropdownScrollStyles(): void {
+export const dropdownScrollCss = [
+  createDropdownScrollCss(COUNTRY_DROPDOWN_SCROLL_CLASS),
+  createDropdownScrollCss(SELECT_DROPDOWN_SCROLL_CLASS),
+].join("\n");
+
+/** @deprecated Use `dropdownScrollCss` */
+export const countryDropdownScrollCss = dropdownScrollCss;
+
+export function ensureDropdownScrollStyles(): void {
   if (Platform.OS !== "web" || typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
 
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = countryDropdownScrollCss;
+  style.textContent = dropdownScrollCss;
   document.head.appendChild(style);
 }
+
+export function ensureCountryDropdownScrollStyles(): void {
+  ensureDropdownScrollStyles();
+}
+
+export function ensureSelectDropdownScrollStyles(): void {
+  ensureDropdownScrollStyles();
+}

package/src/utils/formatMultiSelectDisplay.ts

@@ -0,0 +1,56 @@
+import { fontSize } from "../theme/tokens";
+
+const MULTI_SELECT_SUFFIX = " ... + ";
+const MULTI_SELECT_SUFFIX_UNIT = " items";
+
+/** Rough width estimate for Noto Sans Armenian at 14px (single-select value text). */
+function estimateTextWidth(text: string, size = fontSize.md): number {
+  return text.length * size * 0.58;
+}
+
+export function formatMultiSelectDisplay(
+  labels: string[],
+  maxWidth: number,
+  textSize = fontSize.md,
+): string {
+  if (labels.length === 0) {
+    return "";
+  }
+
+  if (labels.length === 1) {
+    return labels[0];
+  }
+
+  const fits = (text: string) => estimateTextWidth(text, textSize) <= maxWidth;
+  const fullText = labels.join(", ");
+
+  if (fits(fullText)) {
+    return fullText;
+  }
+
+  for (let visibleCount = labels.length - 1; visibleCount >= 1; visibleCount -= 1) {
+    const hiddenCount = labels.length - visibleCount;
+    const truncatedText = `${labels.slice(0, visibleCount).join(", ")}${MULTI_SELECT_SUFFIX}${hiddenCount}${MULTI_SELECT_SUFFIX_UNIT}`;
+
+    if (fits(truncatedText)) {
+      return truncatedText;
+    }
+  }
+
+  return `... + ${labels.length}${MULTI_SELECT_SUFFIX_UNIT}`;
+}
+
+export function resolveSelectedLabels(
+  options: { value: string; label: string }[],
+  selectedValues: string[],
+): string[] {
+  if (selectedValues.length === 0) {
+    return [];
+  }
+
+  const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+
+  return selectedValues
+    .map((value) => labelByValue.get(value))
+    .filter((label): label is string => Boolean(label));
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Web Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'padded',
+    webLayout: true,
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllVariants: Story = {
+  args: {
+    children: 'Badge',
+  },
+  render: () => (
+    <WebLayoutCanvas>
+      <div className="flex w-full max-w-sm flex-col gap-0 divide-y divide-storm-gray-50 rounded-xl border border-storm-gray-50 bg-white">
+        <div className="px-4 py-4">
+          <Badge variant="info">Սպասում է հաստատման</Badge>
+        </div>
+        <div className="px-4 py-4">
+          <Badge variant="danger">Մերժված</Badge>
+        </div>
+        <div className="px-4 py-4">
+          <Badge variant="warning">Սպասում է վճարման</Badge>
+        </div>
+        <div className="px-4 py-4">
+          <Badge variant="success">Հաստատված</Badge>
+        </div>
+        <div className="px-4 py-4">
+          <Badge variant="neutral">Կասեցված</Badge>
+        </div>
+      </div>
+    </WebLayoutCanvas>
+  ),
+};

package/src/web/components/Badge.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../utils/cn';
+
+export type BadgeVariant = 'info' | 'danger' | 'warning' | 'success' | 'neutral';
+
+const badgeVariantClasses: Record<BadgeVariant, string> = {
+  info: 'bg-[#0F52C71A] text-[#0F52C7]',
+  danger: 'bg-[#FFF5F6] text-[#AE0011]',
+  warning: 'bg-[#F2A8001A] text-[#F2A800]',
+  success: 'bg-[#F0FBF5] text-[#279D54]',
+  neutral: 'bg-[#ECEEF0] text-[#455765]',
+};
+
+export type BadgeProps = {
+  children: ReactNode;
+  variant?: BadgeVariant;
+  icon?: ReactNode;
+  className?: string;
+};
+
+export function Badge({ children, variant = 'neutral', icon, className }: BadgeProps) {
+  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',
+        badgeVariantClasses[variant],
+        className,
+      )}
+    >
+      {icon ? <span className="inline-flex shrink-0 items-center justify-center">{icon}</span> : null}
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+import { Pagination, type PaginationProps } from './Pagination';
+
+const armenianLabels: PaginationProps['labels'] = {
+  previousPage: 'Նախորդ էջ',
+  nextPage: 'Հաջորդ էջ',
+  page: (pageNumber) => `Էջ ${pageNumber}`,
+  showing: ({ start, end, total }) => `Ցուցադրված է ${start}-${end}-ը ${total}-ից`,
+};
+
+const meta = {
+  title: 'Web Components/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+  args: {
+    page: 1,
+    pageSize: 4,
+    total: 4,
+    onPageChange: fn(),
+    labels: armenianLabels,
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <WebLayoutCanvas>
+      <div className="rounded-2xl border border-storm-gray-50 bg-white p-5">
+        <Pagination {...args} />
+      </div>
+    </WebLayoutCanvas>
+  ),
+};
+
+function InteractiveStory(args: PaginationProps) {
+  const [page, setPage] = useState(args.page);
+
+  return (
+    <WebLayoutCanvas>
+      <div className="rounded-2xl border border-storm-gray-50 bg-white p-5">
+        <Pagination
+          {...args}
+          page={page}
+          onPageChange={setPage}
+        />
+      </div>
+    </WebLayoutCanvas>
+  );
+}
+
+export const Interactive: Story = {
+  args: {
+    page: 1,
+    pageSize: 4,
+    total: 12,
+    labels: armenianLabels,
+  },
+  render: (args) => <InteractiveStory {...args} />,
+};
+
+export const SinglePage: Story = {
+  args: {
+    page: 1,
+    pageSize: 4,
+    total: 4,
+    labels: armenianLabels,
+  },
+  render: (args) => <InteractiveStory {...args} />,
+};

package/src/web/components/Pagination.tsx

@@ -0,0 +1,153 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+import { cn } from '../utils/cn';
+import { useDataTableClassNames } from './table/data-table-class-names';
+import {
+  getPaginationRange,
+  getTotalPages,
+  getVisiblePageNumbers,
+} from './pagination-utils';
+
+export type PaginationLabels = {
+  previousPage: string;
+  nextPage: string;
+  page: (pageNumber: number) => string;
+  showing: (range: { start: number; end: number; total: number }) => string;
+};
+
+const defaultLabels: PaginationLabels = {
+  previousPage: 'Previous page',
+  nextPage: 'Next page',
+  page: (pageNumber) => `Page ${pageNumber}`,
+  showing: ({ start, end, total }) => `Showing ${start}-${end} of ${total}`,
+};
+
+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';
+
+const paginationHoverClassName = 'cursor-pointer hover:bg-storm-gray-0';
+
+export type PaginationVariant = 'standalone' | 'attached';
+
+export type PaginationProps = {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  labels?: Partial<PaginationLabels>;
+  maxPageButtons?: number;
+  /**
+   * `attached` — below a table; no top radius (footer shell handles bottom radius).
+   * `standalone` — full `rounded-xl` shell.
+   */
+  variant?: PaginationVariant;
+  className?: string;
+  hideOnSinglePage?: boolean;
+};
+
+export function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  labels,
+  maxPageButtons = 3,
+  variant = 'standalone',
+  className,
+  hideOnSinglePage = false,
+}: PaginationProps) {
+  const mergedLabels = { ...defaultLabels, ...labels };
+  const dataTableClassNames = useDataTableClassNames();
+  const totalPages = getTotalPages(total, pageSize);
+  const safePage = Math.min(Math.max(page, 1), totalPages);
+  const { start, end } = getPaginationRange(safePage, pageSize, total);
+  const visiblePages = getVisiblePageNumbers(safePage, totalPages, maxPageButtons);
+  const canGoPrevious = safePage > 1;
+  const canGoNext = safePage < totalPages;
+
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-4 px-4 pb-4 pt-4 font-[family-name:var(--font-sans)] sm:flex-row sm:items-center sm:justify-between',
+        variant === 'standalone' && cn('rounded-xl border bg-storm-gray-0', 'border-storm-gray-50'),
+        dataTableClassNames.pagination,
+        className,
+      )}
+    >
+      <p className="text-xs font-medium leading-none text-storm-gray-200">
+        {mergedLabels.showing({ start, end, total })}
+      </p>
+
+      <nav
+        aria-label="Pagination"
+        className="flex items-center gap-2.5"
+      >
+        <button
+          type="button"
+          onClick={() => onPageChange(safePage - 1)}
+          disabled={!canGoPrevious}
+          aria-label={mergedLabels.previousPage}
+          className={cn(
+            paginationControlClassName,
+            canGoPrevious ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
+          )}
+        >
+          <ChevronLeft
+            className="size-3.5 text-storm-gray-500"
+            strokeWidth={1.75}
+            aria-hidden
+          />
+        </button>
+
+        {visiblePages.map((pageNumber) => {
+          const isActive = pageNumber === safePage;
+
+          return (
+            <button
+              key={pageNumber}
+              type="button"
+              onClick={() => onPageChange(pageNumber)}
+              aria-label={mergedLabels.page(pageNumber)}
+              aria-current={isActive ? 'page' : undefined}
+              className={cn(
+                paginationControlClassName,
+                isActive
+                  ? 'border-storm-gray-50 font-bold text-storm-gray-900'
+                  : paginationHoverClassName,
+              )}
+            >
+              {pageNumber}
+            </button>
+          );
+        })}
+
+        <button
+          type="button"
+          onClick={() => onPageChange(safePage + 1)}
+          disabled={!canGoNext}
+          aria-label={mergedLabels.nextPage}
+          className={cn(
+            paginationControlClassName,
+            canGoNext ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
+          )}
+        >
+          <ChevronRight
+            className="size-3.5 text-storm-gray-500"
+            strokeWidth={1.75}
+            aria-hidden
+          />
+        </button>
+      </nav>
+    </div>
+  );
+}
+
+export {
+  getPaginationRange,
+  getTotalPages,
+  getVisiblePageNumbers,
+} from './pagination-utils';

package/src/web/components/StatusBadge.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { Badge, type BadgeVariant } from './Badge';
+
+export type StatusBadgeTone = BadgeVariant;
+
+export type StatusBadgeProps = {
+  children: ReactNode;
+  tone?: StatusBadgeTone;
+  icon?: ReactNode;
+  className?: string;
+};
+
+export function StatusBadge({ children, tone = 'neutral', icon, className }: StatusBadgeProps) {
+  return (
+    <Badge variant={tone} icon={icon} className={className}>
+      {children}
+    </Badge>
+  );
+}