@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,266 @@
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import type { PaginationProps as Props } from './Pagination.types';
+import { getPaginationTokensFromResolved, getTokens } from '../../tokens';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext';
+
+const MOBILE_MAX_WIDTH = 767;
+
+function useIsMobileScreen() {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth <= MOBILE_MAX_WIDTH
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`);
+    const update = () => setIsMobile(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener('change', update);
+    return () => mediaQuery.removeEventListener('change', update);
+  }, []);
+
+  return isMobile;
+}
+
+type RangeItem = number | 'ellipsis';
+
+function getCompactPaginationRange(page: number, count: number): RangeItem[] {
+  if (count <= 3) {
+    return Array.from({ length: count }, (_, i) => i + 1);
+  }
+
+  if (page <= 2) return [1, 2, 'ellipsis', count];
+  if (page >= count - 1) return [1, 'ellipsis', count - 1, count];
+
+  const out: RangeItem[] = [1, 'ellipsis', page];
+  if (page + 1 < count) out.push(page + 1);
+  if (page + 2 < count) out.push('ellipsis');
+  out.push(count);
+  return out;
+}
+
+function getPaginationRange(
+  page: number,
+  count: number,
+  siblingCount: number,
+  compact = false
+): RangeItem[] {
+  if (count <= 0) return [];
+
+  if (compact && count > 3) {
+    return getCompactPaginationRange(page, count);
+  }
+
+  const totalVisible = 2 * siblingCount + 3; // current + 2*sibling + first + last
+  if (count <= totalVisible) {
+    return Array.from({ length: count }, (_, i) => i + 1);
+  }
+  const left = Math.max(1, page - siblingCount);
+  const right = Math.min(count, page + siblingCount);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < count - 1;
+  const out: RangeItem[] = [];
+  out.push(1);
+  if (showLeftEllipsis) out.push('ellipsis');
+  for (let i = left; i <= right; i++) {
+    if (i !== 1 && i !== count) out.push(i);
+  }
+  if (showRightEllipsis) out.push('ellipsis');
+  if (count > 1) out.push(count);
+  return out;
+}
+
+export function Pagination({
+  page,
+  count,
+  onPageChange,
+  size = 'md',
+  showFirstLast = true,
+  siblingCount = 1,
+  disabled = false,
+  'aria-label': ariaLabel = 'Pagination',
+}: Props) {
+  const [hovered, setHovered] = useState<'first' | 'prev' | 'next' | 'last' | number | null>(null);
+  const { brand, mode } = useContext(ThemeContext);
+  const isMobileScreen = useIsMobileScreen();
+  const tokens = useMemo(
+    () =>
+      getPaginationTokensFromResolved(
+        getTokens({ brand, mode, screen: isMobileScreen ? 'mobile' : 'desktop' })
+      ),
+    [brand, mode, isMobileScreen]
+  );
+  const sizeToken =
+    size === 'xs' ? tokens.sizeXs
+    : size === 'sm' ? tokens.sizeSm
+    : size === 'lg' ? tokens.sizeLg
+    : tokens.sizeMd;
+  const range = getPaginationRange(page, count, siblingCount, isMobileScreen);
+
+  const handleFirst = useCallback(() => {
+    if (!disabled && page > 1) onPageChange(1);
+  }, [disabled, page, onPageChange]);
+
+  const handlePrev = useCallback(() => {
+    if (!disabled && page > 1) onPageChange(page - 1);
+  }, [disabled, page, onPageChange]);
+
+  const handleNext = useCallback(() => {
+    if (!disabled && page < count) onPageChange(page + 1);
+  }, [disabled, page, count, onPageChange]);
+
+  const handleLast = useCallback(() => {
+    if (!disabled && page < count) onPageChange(count);
+  }, [disabled, page, count, onPageChange]);
+
+  const canFirst = page > 1 && !disabled;
+  const canPrev = page > 1 && !disabled;
+  const canNext = page < count && !disabled;
+  const canLast = page < count && !disabled;
+
+  const fontSizeCss =
+    typeof sizeToken?.fontSize === 'number' ?
+      `${sizeToken.fontSize}px`
+    : (sizeToken?.fontSize ?? '14px');
+
+  const baseStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: isMobileScreen ? 0 : undefined,
+    height: sizeToken?.height ?? '36px',
+    minWidth: sizeToken?.minWidth ?? '36px',
+    padding: sizeToken?.padding ?? '6px 12px',
+    fontFamily: tokens.fontFamily,
+    fontWeight: tokens.fontWeight,
+    fontSize: fontSizeCss,
+    borderRadius: sizeToken?.borderRadius ?? '50px',
+    border: 'none',
+    background: 'transparent',
+    color: tokens.iconColor,
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? tokens.disabledOpacity : 1,
+    transition: 'background 0.15s, color 0.15s',
+  };
+
+  const iconHover = hovered !== null && !disabled;
+  const iconBg = iconHover ? tokens.hoverBackground : 'transparent';
+
+  return (
+    <nav
+      role="navigation"
+      aria-label={ariaLabel}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: isMobileScreen ? '2px' : tokens.gap,
+        flexWrap: isMobileScreen ? 'nowrap' : 'wrap',
+        maxWidth: isMobileScreen ? '100%' : undefined,
+        overflowX: isMobileScreen ? 'auto' : undefined,
+      }}
+    >
+      {showFirstLast && (
+        <button
+          type="button"
+          aria-label="Go to first page"
+          disabled={!canFirst}
+          style={{
+            ...baseStyle,
+            background: hovered === 'first' ? iconBg : 'transparent',
+            opacity: !canFirst ? tokens.disabledOpacity : baseStyle.opacity,
+          }}
+          onMouseEnter={() => setHovered('first')}
+          onMouseLeave={() => setHovered(null)}
+          onClick={handleFirst}
+        >
+          &#x00AB;
+        </button>
+      )}
+
+      <button
+        type="button"
+        aria-label="Go to previous page"
+        disabled={!canPrev}
+        style={{
+          ...baseStyle,
+          background: hovered === 'prev' ? iconBg : 'transparent',
+          opacity: !canPrev ? tokens.disabledOpacity : baseStyle.opacity,
+        }}
+        onMouseEnter={() => setHovered('prev')}
+        onMouseLeave={() => setHovered(null)}
+        onClick={handlePrev}
+      >
+        &#x2039;
+      </button>
+
+      {range.map((item, idx) =>
+        item === 'ellipsis' ?
+          <span
+            key={`ellipsis-${idx}`}
+            style={{
+              ...baseStyle,
+              cursor: 'default',
+              minWidth: isMobileScreen ? 'auto' : sizeToken?.minWidth,
+              padding: isMobileScreen ? '4px' : baseStyle.padding,
+              color: tokens.inactiveColor,
+            }}
+            aria-hidden
+          >
+            &#x2026;
+          </span>
+        : <button
+            key={item}
+            type="button"
+            aria-label={item === page ? `Current page, page ${item}` : `Go to page ${item}`}
+            aria-current={item === page ? 'page' : undefined}
+            style={{
+              ...baseStyle,
+              background:
+                item === page ? tokens.activeBackground
+                : hovered === item ? tokens.hoverBackground
+                : 'transparent',
+              color: item === page ? tokens.activeColor : tokens.inactiveColor,
+            }}
+            onMouseEnter={() => setHovered(item)}
+            onMouseLeave={() => setHovered(null)}
+            onClick={() => !disabled && onPageChange(item)}
+          >
+            {item}
+          </button>
+      )}
+
+      <button
+        type="button"
+        aria-label="Go to next page"
+        disabled={!canNext}
+        style={{
+          ...baseStyle,
+          background: hovered === 'next' ? iconBg : 'transparent',
+          opacity: !canNext ? tokens.disabledOpacity : baseStyle.opacity,
+        }}
+        onMouseEnter={() => setHovered('next')}
+        onMouseLeave={() => setHovered(null)}
+        onClick={handleNext}
+      >
+        &#x203A;
+      </button>
+
+      {showFirstLast && (
+        <button
+          type="button"
+          aria-label="Go to last page"
+          disabled={!canLast}
+          style={{
+            ...baseStyle,
+            background: hovered === 'last' ? iconBg : 'transparent',
+            opacity: !canLast ? tokens.disabledOpacity : baseStyle.opacity,
+          }}
+          onMouseEnter={() => setHovered('last')}
+          onMouseLeave={() => setHovered(null)}
+          onClick={handleLast}
+        >
+          &#x00BB;
+        </button>
+      )}
+    </nav>
+  );
+}

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,20 @@
+export type PaginationSize = "xs" | "sm" | "md" | "lg";
+
+export interface PaginationProps {
+  /** Current page (1-based). */
+  page: number;
+  /** Total number of pages. */
+  count: number;
+  /** Called when page changes (1-based). */
+  onPageChange: (page: number) => void;
+  /** Size of page buttons and icons. */
+  size?: PaginationSize;
+  /** Show first/last page buttons. Default true. */
+  showFirstLast?: boolean;
+  /** Number of sibling page numbers to show on each side of current. Default 1. */
+  siblingCount?: number;
+  /** Disable all buttons (e.g. while loading). */
+  disabled?: boolean;
+  /** Optional aria-label for the nav. */
+  "aria-label"?: string;
+}

package/src/components/PeriodSelector/PeriodSelector.stories.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PeriodSelector } from './PeriodSelector';
+import type { PeriodSelectorProps } from './PeriodSelector.types';
+
+const meta: Meta<typeof PeriodSelector> = {
+  title: 'Design System/PeriodSelector',
+  component: PeriodSelector,
+  tags: [],
+  decorators: [(Story) => <Story />],
+  args: {
+    period: '1m',
+    disabled: false,
+  },
+  argTypes: {
+    period: {
+      control: { type: 'select' },
+      options: ['1m', '3m', '6m', '1y', 'custom'],
+      description: 'The selected period',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable the period selector',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PeriodSelector>;
+
+export const Playground: Story = {
+  render: function PlaygroundRender(args: PeriodSelectorProps) {
+    const [period, setPeriod] = useState<string>(args.period || '1m');
+    const [startDate, setStartDate] = useState<Date | null>(null);
+    const [endDate, setEndDate] = useState<Date | null>(null);
+
+    return (
+      <PeriodSelector
+        {...args}
+        period={period}
+        onPeriodChange={setPeriod}
+        startDate={startDate}
+        endDate={endDate}
+        onStartDateChange={setStartDate}
+        onEndDateChange={setEndDate}
+      />
+    );
+  },
+};

package/src/components/PeriodSelector/PeriodSelector.tsx

@@ -0,0 +1,47 @@
+import { ToggleButton } from '../ToggleButton/ToggleButton';
+import { DateRangePicker } from '../DateRangePicker/DateRangePicker';
+import type { PeriodSelectorProps } from './PeriodSelector.types';
+
+const PERIOD_OPTIONS = [
+  { label: '1M', value: '1m' },
+  { label: '3M', value: '3m' },
+  { label: '6M', value: '6m' },
+  { label: '1Y', value: '1y' },
+  { label: 'Custom', value: 'custom' },
+];
+
+export const PeriodSelector = ({
+  period,
+  onPeriodChange,
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  disabled = false,
+  options = PERIOD_OPTIONS,
+}: PeriodSelectorProps) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+      <ToggleButton
+        options={options}
+        value={period}
+        onChange={onPeriodChange}
+        disabled={disabled}
+        size="sm"
+      />
+      {period === 'custom' && (
+        <DateRangePicker
+          startDate={startDate || null}
+          endDate={endDate || null}
+          onChange={({ startDate: newStart, endDate: newEnd }) => {
+            onStartDateChange?.(newStart);
+            onEndDateChange?.(newEnd);
+          }}
+          startLabel="From"
+          endLabel="To"
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/PeriodSelector/PeriodSelector.types.ts

@@ -0,0 +1,10 @@
+export interface PeriodSelectorProps {
+  period: string;
+  onPeriodChange: (period: string) => void;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  onStartDateChange?: (date: Date | null) => void;
+  onEndDateChange?: (date: Date | null) => void;
+  disabled?: boolean;
+  options?: { label: string; value: string }[];
+}

package/src/components/PhoneField/PhoneField.stories.tsx

@@ -0,0 +1,141 @@
+import { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PhoneField } from "./PhoneField";
+import type { PhoneFieldProps, CountryCodeOption } from "./PhoneField.types";
+import { DEFAULT_COUNTRY_OPTIONS } from "./countryCodes";
+
+const defaultCountry = DEFAULT_COUNTRY_OPTIONS.find((c) => c.phonecode === 971) ?? DEFAULT_COUNTRY_OPTIONS[0];
+
+/** Wrapper to manage value/onChange/country for controlled PhoneField in stories */
+const ControlledPhoneField = (props: PhoneFieldProps) => {
+  const [value, setValue] = useState(props.value ?? "");
+  const [country, setCountry] = useState<CountryCodeOption | null>(props.countryValue ?? defaultCountry);
+  useEffect(() => {
+    setValue(props.value ?? "");
+  }, [props.value]);
+  useEffect(() => {
+    setCountry(props.countryValue ?? defaultCountry);
+  }, [props.countryValue]);
+  return (
+    <PhoneField
+      {...props}
+      countryValue={country}
+      onCountryChange={(v) => {
+        setCountry(v);
+        props.onCountryChange?.(v);
+      }}
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value);
+        props.onChange?.(e);
+      }}
+    />
+  );
+};
+
+const meta: Meta<typeof PhoneField> = {
+  title: "Design System/PhoneField",
+  component: ControlledPhoneField,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: "Phone",
+    placeholder: "05x-xxx-xxxx",
+    required: true,
+    error: false,
+    helperText: "",
+    size: "md",
+    fullWidth: true,
+    color: "grey",
+  } as PhoneFieldProps,
+  argTypes: {
+    color: {
+      control: { type: "radio" },
+      options: ["grey", "white"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    value: {
+      control: { type: "text" },
+    },
+    helperText: {
+      control: { type: "text" },
+    },
+    error: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PhoneField>;
+
+export const Playground: Story = {
+  args: {
+    label: "Phone",
+    required: true,
+    placeholder: "05x-xxx-xxxx",
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* Default / Empty */}
+      <PhoneField
+        label="Phone"
+        required
+        placeholder="05x-xxx-xxxx"
+      />
+
+      {/* With Value */}
+      <PhoneField
+        label="Phone"
+        required
+        countryValue={defaultCountry}
+        value="501234567"
+        onChange={() => {}}
+        placeholder="05x-xxx-xxxx"
+      />
+
+      {/* Error State */}
+      <PhoneField
+        label="Phone"
+        required
+        value=""
+        onChange={() => {}}
+        placeholder="05x-xxx-xxxx"
+        error
+        helperText="Please enter a valid phone number"
+      />
+
+      {/* Disabled */}
+      <PhoneField
+        label="Phone"
+        required
+        countryValue={defaultCountry}
+        value="501234567"
+        onChange={() => {}}
+        placeholder="05x-xxx-xxxx"
+        disabled
+      />
+
+      {/* Color: white */}
+      <PhoneField
+        label="Phone (white)"
+        required
+        placeholder="05x-xxx-xxxx"
+        color="white"
+      />
+    </div>
+  ),
+};