@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/PhoneField/PhoneField.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useEffect, useRef } from 'react';
+import type { PhoneFieldProps, CountryCodeOption } from './PhoneField.types';
+import Selector from '../Selector/Selector';
+import { TextField } from '../TextField/TextField';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getPhoneFieldTokensFromResolved } from '../../tokens';
+import { DEFAULT_COUNTRY_OPTIONS } from './countryCodes';
+
+function getDialCode(option: CountryCodeOption): number | string | null {
+  const phonecode = option.phonecode;
+  if (phonecode != null) return phonecode;
+  const phoneCode = (option as CountryCodeOption & { phoneCode?: unknown }).phoneCode;
+  if (phoneCode != null && phoneCode !== '') return phoneCode as number | string;
+  return null;
+}
+
+function getCountryCodeDisplay(option: CountryCodeOption): string {
+  const code = getDialCode(option);
+  return code != null ? `+${code}` : '';
+}
+
+function getCountryOptionLabel(option: CountryCodeOption): string {
+  if (typeof option === 'string') return option;
+  const codeLabel = getCountryCodeDisplay(option);
+  const countryLabel = option.nicename ?? option.name ?? (option as { label?: string }).label ?? '';
+  return codeLabel || countryLabel;
+}
+
+export const PhoneField = ({
+  label = 'Phone',
+  required = false,
+  countryOptions = DEFAULT_COUNTRY_OPTIONS,
+  countryValue,
+  onCountryChange,
+  value,
+  onChange,
+  placeholder = '05x-xxx-xxxx',
+  disabled = false,
+  countryDisabled = false,
+  error = false,
+  helperText,
+  size = 'md',
+  color = 'grey',
+  id,
+  name,
+  fullWidth = true,
+  clearable = false,
+}: PhoneFieldProps) => {
+  const [internalCountry, setInternalCountry] = useState<CountryCodeOption | null>(
+    countryValue !== undefined ? countryValue : null
+  );
+  const [internalPhone, setInternalPhone] = useState(value ?? '');
+  const combinedFieldRef = useRef<HTMLDivElement>(null);
+  const [listboxMinWidth, setListboxMinWidth] = useState(0);
+  const resolvedTokens = useTokens();
+  const tokens = getPhoneFieldTokensFromResolved(resolvedTokens);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalPhone(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (countryValue !== undefined) {
+      setInternalCountry(countryValue);
+    }
+  }, [countryValue]);
+
+  useEffect(() => {
+    const updateListboxWidth = () => {
+      const width = combinedFieldRef.current?.getBoundingClientRect().width ?? 0;
+      setListboxMinWidth(width > 0 ? Math.ceil(width) : 0);
+    };
+
+    updateListboxWidth();
+
+    if (typeof ResizeObserver !== 'undefined' && combinedFieldRef.current) {
+      const observer = new ResizeObserver(() => {
+        updateListboxWidth();
+      });
+      observer.observe(combinedFieldRef.current);
+      return () => observer.disconnect();
+    }
+
+    window.addEventListener('resize', updateListboxWidth);
+    return () => window.removeEventListener('resize', updateListboxWidth);
+  }, []);
+
+  const currentCountry = countryValue !== undefined ? countryValue : internalCountry;
+
+  // Truncate phone when country changes and current value exceeds new msisdnLength
+  useEffect(() => {
+    if (!currentCountry || typeof currentCountry !== 'object') return;
+    const maxLen = currentCountry.msisdnLength ?? 15;
+    const current = value !== undefined ? value : internalPhone;
+    const digitsOnly = String(current).replace(/\D/g, '');
+    if (digitsOnly.length > maxLen) {
+      const truncated = digitsOnly.slice(0, maxLen);
+      if (value === undefined) {
+        setInternalPhone(truncated);
+      }
+      onChange?.({
+        target: { value: truncated },
+      } as React.ChangeEvent<HTMLInputElement>);
+    }
+  }, [currentCountry, value, internalPhone, onChange]);
+  const currentPhone = value !== undefined ? value : internalPhone;
+  const msisdnLength =
+    currentCountry && typeof currentCountry === 'object' ? (currentCountry.msisdnLength ?? 15) : 15;
+
+  const errorMessage = typeof error === 'string' ? error : undefined;
+  const hasError = !!error;
+  const displayHelperText = errorMessage ?? helperText;
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const raw = e.target.value;
+    const digitsOnly = raw.replace(/\D/g, '');
+    const truncated = digitsOnly.slice(0, msisdnLength);
+    const newValue = truncated;
+    if (value === undefined) setInternalPhone(newValue);
+    e.target.value = newValue;
+    onChange?.(e as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: parseInt(tokens.labelMarginBottom, 10),
+    fontSize: tokens.labelFontSize,
+    fontWeight: tokens.labelFontWeight,
+    color: tokens.labelColor,
+    fontFamily: tokens.fontFamily,
+    opacity: disabled ? parseFloat(tokens.disabledOpacity) : 1,
+  };
+
+  const borderRadius =
+    size === 'sm' ? tokens.borderRadiusSm
+    : size === 'lg' ? tokens.borderRadiusLg
+    : tokens.borderRadiusMd;
+  const selectorWidth =
+    size === 'sm' ? tokens.selectorWidthSm
+    : size === 'lg' ? tokens.selectorWidthLg
+    : tokens.selectorWidthMd;
+
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    width: fullWidth ? '100%' : undefined,
+    borderRadius,
+    border: hasError ? tokens.outlineError : tokens.outlineDefault,
+    boxSizing: 'border-box',
+  };
+
+  const selectorBackground =
+    color === 'white' ? tokens.selectorBackgroundWhite : tokens.selectorBackgroundWhite;
+  const selectorWrapperStyle: React.CSSProperties = {
+    flex: '0 0 auto',
+    width: parseInt(selectorWidth, 10),
+    minWidth: parseInt(selectorWidth, 10),
+    backgroundColor: selectorBackground,
+    borderRight: tokens.selectorBorderRight,
+    borderTopLeftRadius: borderRadius,
+    borderBottomLeftRadius: borderRadius,
+  };
+
+  const textFieldWrapperStyle: React.CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    borderTopRightRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+  };
+
+  const phoneInputId =
+    id ??
+    name ??
+    (label ? `phone-${String(label).replace(/\s+/g, '-').toLowerCase()}` : 'phone-field');
+
+  return (
+    <div className="phone-field-root" style={{ width: fullWidth ? '100%' : undefined }}>
+      <style>
+        {`.phone-field-root .phone-field-selector input {
+          border: 1px solid #c7ced6 !important;
+          border-radius: ${borderRadius} 0 0 ${borderRadius} !important;
+          box-shadow: none !important;
+          background-color: ${selectorBackground} !important;
+        }
+        .phone-field-root .phone-field-textfield input {
+          border: 1px solid #c7ced6 !important;
+          border-radius: 0 ${borderRadius} ${borderRadius} 0 !important;
+          box-shadow: none !important;
+        }`}
+      </style>
+      {label != null && label !== '' && (
+        <label htmlFor={phoneInputId} style={labelStyle}>
+          {label}
+          {required && <span style={{ color: tokens.labelRequiredColor, marginRight: 4 }}>*</span>}
+        </label>
+      )}
+      <div ref={combinedFieldRef} style={containerStyle}>
+        <div className="phone-field-selector" style={selectorWrapperStyle}>
+          <Selector<CountryCodeOption>
+            options={countryOptions}
+            value={currentCountry}
+            onChange={(v) => {
+              const nextCountry = (v as CountryCodeOption | null) ?? null;
+              if (countryValue === undefined) {
+                setInternalCountry(nextCountry);
+              }
+              onCountryChange?.(nextCountry);
+            }}
+            label=""
+            placeholder="Code"
+            required={false}
+            disabled={disabled || countryDisabled}
+            size={size}
+            color={color}
+            showFlag={true}
+            autoComplete="new-password"
+            getOptionLabel={getCountryOptionLabel}
+            renderOption={(opt) => {
+              if (typeof opt === 'string') return opt;
+              const code = getCountryCodeDisplay(opt);
+              const displayName = opt.nicename ?? opt.name ?? '';
+              return (
+                <span>
+                  <span>{code}</span>
+                  {displayName && (
+                    <span style={{ marginLeft: 6, opacity: 0.7 }}>{displayName}</span>
+                  )}
+                </span>
+              );
+            }}
+            filterOptions={(options, state) => {
+              const query = state.inputValue.toLowerCase();
+              return options.filter((opt) => {
+                const code = getCountryCodeDisplay(opt).toLowerCase();
+                const name = (opt.name || '').toLowerCase();
+                const nicename = (opt.nicename || '').toLowerCase();
+                return code.includes(query) || name.includes(query) || nicename.includes(query);
+              });
+            }}
+            clearable={clearable}
+            listboxMinWidth={listboxMinWidth}
+            id={`${phoneInputId}-country`}
+          />
+        </div>
+        <div className="phone-field-textfield" style={textFieldWrapperStyle}>
+          <TextField
+            id={phoneInputId}
+            name={name}
+            label=""
+            value={currentPhone}
+            onChange={handlePhoneChange}
+            placeholder={placeholder}
+            disabled={disabled || !currentCountry || Object.keys(currentCountry).length === 0}
+            error={hasError}
+            size={size}
+            color={color}
+            fullWidth
+            type="tel"
+            inputProps={{
+              inputMode: 'numeric',
+              pattern: '[0-9]*',
+              maxLength: msisdnLength,
+            }}
+          />
+        </div>
+      </div>
+      {displayHelperText != null && displayHelperText !== '' && (
+        <span
+          style={{
+            display: 'block',
+            marginTop: 4,
+            fontSize: 12,
+            color: hasError ? tokens.labelRequiredColor : tokens.labelColor,
+            fontFamily: tokens.fontFamily,
+          }}
+          role={hasError ? 'alert' : undefined}
+        >
+          {displayHelperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/PhoneField/PhoneField.types.ts

@@ -0,0 +1,89 @@
+export interface CountryCodeOption {
+  [key: string]: unknown;
+  id?: number;
+  iso?: string;
+  name?: string;
+  nicename?: string;
+  iso3?: string;
+  numcode?: number;
+  /** Country dial code (e.g. 971 for UAE). Displayed as +971 */
+  phonecode: number;
+  currency?: string;
+  /** Max length for the local phone number (digits only). Used to limit input. */
+  msisdnLength: number;
+}
+
+export interface PhoneFieldProps {
+  /**
+   * Field label (e.g. "Phone")
+   */
+  label?: string;
+  /**
+   * Whether the field is required (shows asterisk)
+   */
+  required?: boolean;
+  /**
+   * Country code options for the selector
+   */
+  countryOptions?: CountryCodeOption[];
+  /**
+   * Selected country code option
+   */
+  countryValue?: CountryCodeOption | null;
+  /**
+   * Callback when country selection changes
+   */
+  onCountryChange?: (value: CountryCodeOption | null) => void;
+  /**
+   * Phone number value
+   */
+  value?: string;
+  /**
+   * Callback when phone number changes
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Placeholder for the phone number input (e.g. "05x-xxx-xxxx")
+   */
+  placeholder?: string;
+  /**
+   * Disables the field
+   */
+  disabled?: boolean;
+  /**
+   * Disables only the country code selector
+   */
+  countryDisabled?: boolean;
+  /**
+   * Error message or state
+   */
+  error?: string | boolean;
+  /**
+   * Helper text below the field
+   */
+  helperText?: string;
+  /**
+   * Size of the inputs
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Background color variant
+   */
+  color?: 'grey' | 'white';
+  /**
+   * HTML id for the phone input
+   */
+  id?: string;
+  /**
+   * Input name for the phone number
+   */
+  name?: string;
+  /**
+   * Full width of the container
+   */
+  fullWidth?: boolean;
+  /**
+   * Whether the country selector is clearable
+   */
+  clearable?: boolean;
+}

package/src/components/PhoneField/countryCodes.ts

@@ -0,0 +1,236 @@
+import type { CountryCodeOption } from "./PhoneField.types";
+
+/** Default country code options for PhoneField (API format with msisdnLength for input validation) */
+export const DEFAULT_COUNTRY_OPTIONS: CountryCodeOption[] = [
+  {
+    id: 2,
+    iso: "AE",
+    name: "UAE",
+    nicename: "United Arab Emirates",
+    iso3: "ARE",
+    numcode: 784,
+    phonecode: 971,
+    currency: "AED",
+    msisdnLength: 9,
+  },
+  {
+    id: 1,
+    iso: "AF",
+    name: "AFGHANISTAN",
+    nicename: "Afghanistan",
+    iso3: "AFG",
+    numcode: 4,
+    phonecode: 93,
+    currency: "AFN",
+    msisdnLength: 9,
+  },
+  {
+    id: 3,
+    iso: "IN",
+    name: "INDIA",
+    nicename: "India",
+    iso3: "IND",
+    numcode: 356,
+    phonecode: 91,
+    currency: "INR",
+    msisdnLength: 10,
+  },
+  {
+    id: 4,
+    iso: "US",
+    name: "US",
+    nicename: "United States",
+    iso3: "USA",
+    numcode: 840,
+    phonecode: 1,
+    currency: "USD",
+    msisdnLength: 10,
+  },
+  {
+    id: 5,
+    iso: "GB",
+    name: "UK",
+    nicename: "United Kingdom",
+    iso3: "GBR",
+    numcode: 826,
+    phonecode: 44,
+    currency: "GBP",
+    msisdnLength: 10,
+  },
+  {
+    id: 6,
+    iso: "SA",
+    name: "SAUDI ARABIA",
+    nicename: "Saudi Arabia",
+    iso3: "SAU",
+    numcode: 682,
+    phonecode: 966,
+    currency: "SAR",
+    msisdnLength: 9,
+  },
+  {
+    id: 7,
+    iso: "BH",
+    name: "BAHRAIN",
+    nicename: "Bahrain",
+    iso3: "BHR",
+    numcode: 48,
+    phonecode: 973,
+    currency: "BHD",
+    msisdnLength: 8,
+  },
+  {
+    id: 8,
+    iso: "QA",
+    name: "QATAR",
+    nicename: "Qatar",
+    iso3: "QAT",
+    numcode: 634,
+    phonecode: 974,
+    currency: "QAR",
+    msisdnLength: 8,
+  },
+  {
+    id: 9,
+    iso: "OM",
+    name: "OMAN",
+    nicename: "Oman",
+    iso3: "OMN",
+    numcode: 512,
+    phonecode: 968,
+    currency: "OMR",
+    msisdnLength: 8,
+  },
+  {
+    id: 10,
+    iso: "KW",
+    name: "KUWAIT",
+    nicename: "Kuwait",
+    iso3: "KWT",
+    numcode: 414,
+    phonecode: 965,
+    currency: "KWD",
+    msisdnLength: 8,
+  },
+  {
+    id: 11,
+    iso: "EG",
+    name: "EGYPT",
+    nicename: "Egypt",
+    iso3: "EGY",
+    numcode: 818,
+    phonecode: 20,
+    currency: "EGP",
+    msisdnLength: 10,
+  },
+  {
+    id: 12,
+    iso: "PK",
+    name: "PAKISTAN",
+    nicename: "Pakistan",
+    iso3: "PAK",
+    numcode: 586,
+    phonecode: 92,
+    currency: "PKR",
+    msisdnLength: 10,
+  },
+  {
+    id: 13,
+    iso: "AU",
+    name: "AUSTRALIA",
+    nicename: "Australia",
+    iso3: "AUS",
+    numcode: 36,
+    phonecode: 61,
+    currency: "AUD",
+    msisdnLength: 9,
+  },
+  {
+    id: 14,
+    iso: "DE",
+    name: "GERMANY",
+    nicename: "Germany",
+    iso3: "DEU",
+    numcode: 276,
+    phonecode: 49,
+    currency: "EUR",
+    msisdnLength: 11,
+  },
+  {
+    id: 15,
+    iso: "FR",
+    name: "FRANCE",
+    nicename: "France",
+    iso3: "FRA",
+    numcode: 250,
+    phonecode: 33,
+    currency: "EUR",
+    msisdnLength: 9,
+  },
+  {
+    id: 16,
+    iso: "JP",
+    name: "JAPAN",
+    nicename: "Japan",
+    iso3: "JPN",
+    numcode: 392,
+    phonecode: 81,
+    currency: "JPY",
+    msisdnLength: 10,
+  },
+  {
+    id: 17,
+    iso: "CN",
+    name: "CHINA",
+    nicename: "China",
+    iso3: "CHN",
+    numcode: 156,
+    phonecode: 86,
+    currency: "CNY",
+    msisdnLength: 11,
+  },
+  {
+    id: 18,
+    iso: "RU",
+    name: "RUSSIA",
+    nicename: "Russia",
+    iso3: "RUS",
+    numcode: 643,
+    phonecode: 7,
+    currency: "RUB",
+    msisdnLength: 10,
+  },
+  {
+    id: 19,
+    iso: "ZA",
+    name: "SOUTH AFRICA",
+    nicename: "South Africa",
+    iso3: "ZAF",
+    numcode: 710,
+    phonecode: 27,
+    currency: "ZAR",
+    msisdnLength: 9,
+  },
+  {
+    id: 20,
+    iso: "BR",
+    name: "BRAZIL",
+    nicename: "Brazil",
+    iso3: "BRA",
+    numcode: 76,
+    phonecode: 55,
+    currency: "BRL",
+    msisdnLength: 11,
+  },
+  {
+    id: 21,
+    iso: "NG",
+    name: "NIGERIA",
+    nicename: "Nigeria",
+    iso3: "NGA",
+    numcode: 566,
+    phonecode: 234,
+    currency: "NGN",
+    msisdnLength: 10,
+  },
+];

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Progress } from "./Progress";
+
+const meta: Meta<typeof Progress> = {
+  title: "Design System/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", width: "420px", maxWidth: "100%" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    value: 50,
+    variant: "determinate",
+  },
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100 },
+      description: "Progress value (0-100) for determinate variant",
+    },
+    color: {
+      control: "color",
+      description: "Custom color for the progress bar filler",
+    },
+    variant: {
+      control: "radio",
+      options: ["determinate", "indeterminate"],
+      description: "Type of progress bar",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Progress>;
+
+export const Playground: Story = {
+  args: {
+    value: 50,
+    variant: "determinate",
+  },
+};
+
+const ShowcaseComponent = () => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+      {/* Determinate States */}
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>Determinate (0 to 100)</h4>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <Progress value={0} />
+          <Progress value={25} />
+          <Progress value={50} />
+          <Progress value={75} />
+          <Progress value={100} />
+        </div>
+      </div>
+
+      {/* Indeterminate State */}
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>Indeterminate</h4>
+        <Progress variant="indeterminate" />
+      </div>
+
+      {/* Custom Colors */}
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>Custom Colors</h4>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <Progress value={60} color="#E91E63" />
+          <Progress value={80} color="#9C27B0" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};