@spaced-out/ui-design-system/lib/components/Combobox/helper.js.flow

Sense UI components library

// @flow strict
import type {MenuOption} from '../Menu';


export const defaultOptions: MenuOption[] = [
  {
    key: '1',
    label: 'Option one',
    iconLeft: 'coffee',
  },
  {key: '2', label: 'Option two', iconLeft: 'user'},
  {
    key: '4',
    label: 'Option three',
    iconLeft: 'face-party',
  },
  {
    key: '5',
    label: 'Option five(disabled)',
    disabled: true,
    iconLeft: 'flag',
  },
  {
    key: '6',
    label: 'Option six(disabled) very long option that would truncate',
    disabled: true,
    iconLeft: 'camera',
  },
  {
    key: '7',
    label: 'Option seven',
    iconLeft: 'coffee',
  },
  {key: '8', label: 'Option eight', iconLeft: 'user'},
  {
    key: '9',
    label: 'Option nine',
    iconLeft: 'face-party',
  },
];

export const currencyOptions: MenuOption[] = [
  {
    key: 'USD',
    label: 'USD',
    iconLeft: 'dollar-sign',
  },
  {
    key: 'JPY',
    label: 'JPY',
    iconLeft: 'yen-sign',
  },
  {
    key: 'KRW',
    label: 'KRW',
    iconLeft: 'won-sign',
  },
  {
    key: 'KRW',
    label: 'KRW',
    iconLeft: 'won-sign',
  },
  {
    key: 'GBP',
    label: 'GBP',
    iconLeft: 'sterling-sign',
  },
  {
    key: 'INR',
    label: 'INR',
    iconLeft: 'indian-rupee-sign',
  },
  {
    key: 'EUR',
    label: 'EUR',
    iconLeft: 'euro-sign',
  },
  {
    key: 'CHF',
    label: 'CHF',
    iconLeft: 'franc-sign',
  },
];

export const phoneNumberOptions: MenuOption[] = [
  {
    key: 'US',
    label: '+1 (United States)',
  },
  {
    key: 'GB',
    label: '+44 (United Kingdom)',
  },
  {
    key: 'JP',
    label: '+81 (Japan)',
  },
  {
    key: 'KR',
    label: '+82 (South Korea)',
  },
  {
    key: 'IN',
    label: '+91 (India)',
  },
  {
    key: 'FR',
    label: '+33 (France)',
  },
  {
    key: 'DE',
    label: '+49 (Germany)',
  },
];

/**
 * Format phone numbers according to country-specific patterns
 * @param {string} phoneNumber - The phone number to format
 * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')
 * @returns {string} - Formatted phone number
 */
export const formatPhoneNumber = (
  phoneNumber: string,
  locale: string = 'US',
): string => {
  // Remove all non-numeric characters
  const cleaned = phoneNumber.replace(/\D/g, '');

  // Format patterns for different locales
  const patterns = {
    // North America
    US: {
      // United States
      pattern: /(\d{3})(\d{3})(\d{4})/,
      format: '($1) $2-$3',
      countryCode: '+1',
    },
    CA: {
      // Canada
      pattern: /(\d{3})(\d{3})(\d{4})/,
      format: '($1) $2-$3',
      countryCode: '+1',
    },
    // Europe
    GB: {
      // United Kingdom
      pattern: /(\d{2})(\d{4})(\d{4})/,
      format: '$1 $2 $3',
      countryCode: '+44',
    },
    DE: {
      // Germany
      pattern: /(\d{3})(\d{4})(\d{4})/,
      format: '$1 $2 $3',
      countryCode: '+49',
    },
    FR: {
      // France
      pattern: /(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/,
      format: '$1 $2 $3 $4 $5',
      countryCode: '+33',
    },
    // Asia
    JP: {
      // Japan
      pattern: /(\d{2})(\d{4})(\d{4})/,
      format: '$1-$2-$3',
      countryCode: '+81',
    },
    KR: {
      // South Korea
      pattern: /(\d{3})(\d{4})(\d{4})/,
      format: '$1-$2-$3',
      countryCode: '+82',
    },
    CN: {
      // China
      pattern: /(\d{3})(\d{4})(\d{4})/,
      format: '$1 $2 $3',
      countryCode: '+86',
    },
    IN: {
      // India
      pattern: /(\d{3})(\d{3})(\d{4})/,
      format: '$1 $2 $3',
      countryCode: '+91',
    },
  };

  // Get the formatting rule for the locale
  const rule = patterns[locale] || patterns.US; // Default to US formatting

  // If number starts with country code, remove it for formatting
  let numberToFormat = cleaned;
  const countryCode = rule.countryCode.replace('+', '');
  if (cleaned.startsWith(countryCode)) {
    numberToFormat = cleaned.slice(countryCode.length);
  }

  // Format the number according to the pattern
  const formatted = numberToFormat.replace(rule.pattern, rule.format);

  return formatted;
};