@scripso-homepad/ui 0.4.2 → 0.4.3

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>
+  );
+}