@superdispatch/phones 0.21.8 → 0.21.13

package/src/phone-field/PhoneField.tsx

@@ -0,0 +1,200 @@
+import { BaseTextFieldProps, TextField } from '@material-ui/core';
+import { mergeRefs } from '@superdispatch/ui';
+import {
+  ChangeEvent,
+  forwardRef,
+  ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { CountryISO } from '../country-code-metadata/CountryCodeMetadata';
+import { usePhoneService } from '../phone-service/PhoneService';
+import { PhoneFieldMenu } from './PhoneFieldMenu';
+import { PhoneFieldStartAdornment } from './PhoneFieldStartAdornment';
+
+function normalizeValue(value: unknown): string {
+  return typeof value === 'string' ? value : '';
+}
+
+interface State {
+  value: string;
+  nationalNumber: string;
+  country: CountryISO;
+}
+
+export interface PhoneFieldProps
+  extends Pick<
+    BaseTextFieldProps,
+    | 'disabled'
+    | 'error'
+    | 'fullWidth'
+    | 'helperText'
+    | 'id'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+  > {
+  value?: null | string;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+  onChange?: (value: string) => void;
+}
+
+export const PhoneField = forwardRef<HTMLDivElement, PhoneFieldProps>(
+  ({ value: valueProp, onBlur, onFocus, onChange, ...props }, ref) => {
+    const rootRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [menuAnchor, setMenuAnchor] = useState<null | HTMLDivElement>(null);
+
+    const phoneService = usePhoneService();
+    const createState = useCallback(
+      (value: string): State => ({ value, ...phoneService.getInfo(value) }),
+      [phoneService],
+    );
+
+    const value = useMemo(() => normalizeValue(valueProp), [valueProp]);
+    const [{ country, nationalNumber }, setValue] = useState(() =>
+      createState(value),
+    );
+
+    const placeholder = useMemo(
+      () => phoneService.APN.getExample(country).getNumber('international'),
+      [country, phoneService.APN],
+    );
+
+    function handleChange(
+      fn: undefined | ((value: string) => void),
+      nextCountry: CountryISO,
+      nextNationalNumber: string,
+    ): void {
+      if (fn) {
+        const nextValue = phoneService.format(nextNationalNumber, {
+          country: nextCountry,
+        });
+
+        setValue({
+          value: nextValue,
+          country: nextCountry,
+          nationalNumber: nextNationalNumber,
+        });
+
+        fn(nextValue);
+      }
+    }
+
+    function handleChangeEvent(
+      fn: undefined | ((value: string) => void),
+      {
+        target: { value: nextValue },
+      }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ): void {
+      if (fn) {
+        handleChange(
+          fn,
+          country,
+          phoneService.format(nextValue, { country, format: 'national' }),
+        );
+      }
+    }
+
+    useEffect(() => {
+      setValue((prev) =>
+        // Ignore `props.value` changes when they were performed from inside.
+        prev.value === value ? prev : createState(value),
+      );
+    }, [value, createState]);
+
+    return (
+      <>
+        <PhoneFieldMenu
+          value={country}
+          anchorEl={menuAnchor}
+          onClose={() => {
+            setMenuAnchor(null);
+          }}
+          onChange={(nextRegion) => {
+            handleChange(onChange, nextRegion, nationalNumber);
+          }}
+        />
+
+        <TextField
+          {...props}
+          type="tel"
+          variant="outlined"
+          autoComplete="off"
+          value={nationalNumber}
+          placeholder={phoneService.deletePrefix(placeholder, country)}
+          ref={mergeRefs(ref, rootRef)}
+          inputRef={inputRef}
+          onBlur={(event) => {
+            handleChangeEvent(onBlur, event);
+          }}
+          onFocus={(event) => {
+            handleChangeEvent(onFocus, event);
+          }}
+          onChange={(event) => {
+            handleChangeEvent(onChange, event);
+          }}
+          InputProps={{
+            startAdornment: (
+              <PhoneFieldStartAdornment
+                country={country}
+                isExpanded={!!menuAnchor}
+                onClick={() => {
+                  // `FocusTrap` inside of `Menu` will restore focus to
+                  // the last focused element. We want to manually focus input
+                  // to trick the `FocusTrap`.
+                  inputRef.current?.focus();
+                  setMenuAnchor(rootRef.current);
+                }}
+              />
+            ),
+          }}
+        />
+      </>
+    );
+  },
+);
+
+export interface SuspendedPhoneFieldProps extends PhoneFieldProps {
+  suspenseFallback?: ReactNode;
+}
+
+export const SuspendedPhoneField = forwardRef<
+  HTMLDivElement,
+  SuspendedPhoneFieldProps
+>(
+  (
+    {
+      label,
+      fullWidth,
+      helperText,
+      suspenseFallback = (
+        <TextField
+          disabled={true}
+          label={label}
+          fullWidth={fullWidth}
+          helperText={helperText}
+          placeholder="Loading…"
+        />
+      ),
+      ...props
+    },
+    ref,
+  ) => (
+    <Suspense fallback={suspenseFallback}>
+      <PhoneField
+        {...props}
+        ref={ref}
+        label={label}
+        fullWidth={fullWidth}
+        helperText={helperText}
+      />
+    </Suspense>
+  ),
+);

package/src/phone-field/PhoneFieldFlag.tsx

@@ -0,0 +1,54 @@
+import { Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { SuperDispatchTheme } from '@superdispatch/ui';
+import clsx from 'clsx';
+import { forwardRef, ImgHTMLAttributes, Ref } from 'react';
+import { CountryISO } from '../country-code-metadata/CountryCodeMetadata';
+
+const useStyles = makeStyles(
+  (theme: SuperDispatchTheme) => ({
+    root: { minHeight: theme.spacing(2), minWidth: theme.spacing(2.75) },
+  }),
+  { name: 'SD-PhoneFieldFlag' },
+);
+
+export interface PhoneFieldFlagProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  country: CountryISO;
+}
+
+export const PhoneFieldFlag = forwardRef<HTMLElement, PhoneFieldFlagProps>(
+  ({ country, alt = country, className, ...props }, ref) => {
+    const styles = useStyles();
+
+    if (
+      country === 'AC' ||
+      country === 'BQ' ||
+      country === 'EH' ||
+      country === 'TA'
+    ) {
+      return (
+        <Typography
+          ref={ref}
+          variant="h6"
+          align="center"
+          component="span"
+          color="textSecondary"
+          className={clsx(styles.root, className)}
+        >
+          {country}
+        </Typography>
+      );
+    }
+
+    return (
+      <img
+        {...props}
+        alt={alt}
+        ref={ref as Ref<HTMLImageElement>}
+        className={clsx(styles.root, className)}
+        src={`https://cdn.jsdelivr.net/gh/madebybowtie/FlagKit@2.2/Assets/SVG/${country}.svg`}
+      />
+    );
+  },
+);

package/src/phone-field/PhoneFieldMenu.tsx

@@ -0,0 +1,53 @@
+import { Divider, Menu, MenuProps } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { SuperDispatchTheme } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import {
+  CountryISO,
+  listCountries,
+} from '../country-code-metadata/CountryCodeMetadata';
+import { PhoneFieldMenuItem } from './PhoneFieldMenuItem';
+
+const useStyles = makeStyles(
+  (theme: SuperDispatchTheme) => ({
+    paper: {
+      maxHeight: theme.spacing(30),
+    },
+  }),
+  { name: 'SD-PhoneFieldMenu' },
+);
+
+export interface PhoneFieldMenuProps extends Pick<MenuProps, 'anchorEl'> {
+  onClose: () => void;
+  value: CountryISO;
+  onChange: (country: CountryISO) => void;
+}
+
+export const PhoneFieldMenu = forwardRef<unknown, PhoneFieldMenuProps>(
+  ({ anchorEl, value, onClose, onChange }, ref) => {
+    const styles = useStyles();
+
+    return (
+      <Menu
+        ref={ref}
+        open={!!anchorEl}
+        onClose={onClose}
+        anchorEl={anchorEl}
+        classes={{ paper: styles.paper }}
+      >
+        {listCountries().map((country) => [
+          <PhoneFieldMenuItem
+            key={country}
+            country={country}
+            selected={country === value}
+            onClick={() => {
+              onChange(country);
+              onClose();
+            }}
+          />,
+          country === 'NZ' && <Divider key="divider" />,
+        ])}
+      </Menu>
+    );
+  },
+);

package/src/phone-field/PhoneFieldMenuItem.spec.tsx

@@ -0,0 +1,12 @@
+import { renderCSS } from '@superdispatch/ui-testutils';
+import { PhoneFieldMenuItem } from './PhoneFieldMenuItem';
+
+test('css', () => {
+  expect(
+    renderCSS(<PhoneFieldMenuItem country="US" />, ['SD-PhoneFieldMenuItem']),
+  ).toMatchInlineSnapshot(`
+    .SD-PhoneFieldMenuItem-flag {
+      margin-right: 8px;
+    }
+  `);
+});

package/src/phone-field/PhoneFieldMenuItem.tsx

@@ -0,0 +1,61 @@
+import {
+  MenuItem,
+  MenuItemClassKey,
+  MenuItemProps,
+  Theme,
+  Typography,
+} from '@material-ui/core';
+import { ClassNameMap, makeStyles } from '@material-ui/styles';
+import {
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+  useMemo,
+} from 'react';
+import {
+  CountryISO,
+  formatCountry,
+  getCountryCode,
+} from '../country-code-metadata/CountryCodeMetadata';
+import { PhoneFieldFlag } from './PhoneFieldFlag';
+
+export type PhoneFieldMenuItemClassKey = MenuItemClassKey | 'flag';
+
+const useStyles = makeStyles<
+  Theme,
+  { classes?: Partial<ClassNameMap<PhoneFieldMenuItemClassKey>> },
+  PhoneFieldMenuItemClassKey
+>(
+  (theme) => ({
+    dense: {},
+    gutters: {},
+    root: {},
+    selected: {},
+    flag: { marginRight: theme.spacing(1) },
+  }),
+  { name: 'SD-PhoneFieldMenuItem' },
+);
+
+export interface PhoneFieldMenuItemProps
+  extends RefAttributes<HTMLLIElement>,
+    Omit<MenuItemProps, 'classes' | 'children'> {
+  country: CountryISO;
+  classes?: Partial<ClassNameMap<PhoneFieldMenuItemClassKey>>;
+}
+
+export const PhoneFieldMenuItem: ForwardRefExoticComponent<PhoneFieldMenuItemProps> =
+  forwardRef<HTMLLIElement, PhoneFieldMenuItemProps>(
+    ({ country, classes, ...props }, ref) => {
+      const { flag: flagClassName, ...styles } = useStyles({ classes });
+      const countryCode = useMemo(() => getCountryCode(country), [country]);
+
+      return (
+        <MenuItem {...props} ref={ref} button={true} classes={styles}>
+          <PhoneFieldFlag country={country} className={flagClassName} />
+          {formatCountry(country)}
+          &nbsp;
+          <Typography color="textSecondary">{countryCode}</Typography>
+        </MenuItem>
+      );
+    },
+  );

package/src/phone-field/PhoneFieldStartAdornment.tsx

@@ -0,0 +1,68 @@
+import { ButtonBase, InputAdornment, Typography } from '@material-ui/core';
+import { ArrowDropDown, ArrowDropUp } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
+import { Color, SuperDispatchTheme } from '@superdispatch/ui';
+import { forwardRef, useMemo } from 'react';
+import {
+  CountryISO,
+  formatCountry,
+  getCountryCode,
+} from '../country-code-metadata/CountryCodeMetadata';
+import { PhoneFieldFlag } from './PhoneFieldFlag';
+
+const useStyles = makeStyles(
+  (theme: SuperDispatchTheme) => ({
+    root: {
+      marginLeft: theme.spacing(-1),
+      marginRight: 0,
+    },
+    button: {
+      color: Color.Blue300,
+      padding: theme.spacing(0.5, 0.5, 0.5, 1),
+      borderRadius: theme.spacing(0.5, 0, 0, 0.5),
+      '&:hover, &:focus': {
+        backgroundColor: Color.Blue50,
+      },
+    },
+  }),
+  { name: 'SD-PhoneFieldStartAdornment' },
+);
+
+export interface PhoneFieldProps {
+  onClick?: () => void;
+  isExpanded?: boolean;
+  country: CountryISO;
+}
+
+export const PhoneFieldStartAdornment = forwardRef<
+  HTMLDivElement,
+  PhoneFieldProps
+>(({ country, onClick, isExpanded }, ref) => {
+  const styles = useStyles();
+  const [title, countryCode] = useMemo(() => {
+    const code = `+${getCountryCode(country)}`;
+
+    return [`${formatCountry(country)}: ${code}`, code];
+  }, [country]);
+
+  return (
+    <InputAdornment ref={ref} position="start" className={styles.root}>
+      <ButtonBase
+        title={title}
+        onClick={onClick}
+        className={styles.button}
+        aria-expanded={isExpanded}
+      >
+        <PhoneFieldFlag country={country} />
+
+        {isExpanded ? (
+          <ArrowDropUp htmlColor={Color.Dark200} />
+        ) : (
+          <ArrowDropDown htmlColor={Color.Dark200} />
+        )}
+
+        <Typography color="textPrimary">{countryCode}</Typography>
+      </ButtonBase>
+    </InputAdornment>
+  );
+});

package/src/phone-link/PhoneLink.spec.tsx

@@ -0,0 +1,60 @@
+import { renderComponent } from '@superdispatch/ui-testutils';
+import { screen, waitFor } from '@testing-library/react';
+import { PhoneLink } from './PhoneLink';
+
+test('basic', async () => {
+  renderComponent(<PhoneLink phone="+12015550123" />);
+  const link = await screen.findByRole('link');
+
+  expect(link).toHaveTextContent('+1 201-555-0123');
+  expect(link).toHaveAttribute('href', 'tel:+1-201-555-0123');
+});
+
+test('format', async () => {
+  renderComponent(<PhoneLink phone="+12015550123" format="national" />);
+
+  const link = await screen.findByRole('link');
+
+  expect(link).toHaveTextContent('201-555-0123');
+  expect(link).toHaveAttribute('href', 'tel:+1-201-555-0123');
+});
+
+test('country', async () => {
+  renderComponent(<PhoneLink phone="2015550123" country="NZ" />);
+
+  const link = await screen.findByRole('link');
+
+  expect(link).toHaveTextContent('+64 20 1555 0123');
+  expect(link).toHaveAttribute('href', 'tel:+64-20-1555-0123');
+});
+
+test('invalid', async () => {
+  const view = renderComponent(
+    <PhoneLink phone="Phone: (585) 617-1234 (Home) | (585) 489-1234 (Cell)" />,
+  );
+
+  await waitFor(() => {
+    expect(screen.queryByText('Suspended…')).toBeNull();
+  });
+
+  expect(view.container).toMatchInlineSnapshot(`<div />`);
+});
+
+test('fallback', async () => {
+  const view = renderComponent(
+    <PhoneLink
+      phone="Phone: (585) 617-1234 (Home) | (585) 489-1234 (Cell)"
+      fallback="Phone: (585) 617-1234 (Home) | (585) 489-1234 (Cell)"
+    />,
+  );
+
+  await waitFor(() => {
+    expect(screen.queryByText('Suspended…')).toBeNull();
+  });
+
+  expect(view.container).toMatchInlineSnapshot(`
+    <div>
+      Phone: (585) 617-1234 (Home) | (585) 489-1234 (Cell)
+    </div>
+  `);
+});

package/src/phone-link/PhoneLink.stories.tsx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+import { PhoneLink } from './PhoneLink';
+
+export default { title: 'Phones/PhoneLink', component: PhoneLink } as Meta;
+
+export const basic = () => <PhoneLink phone="+12015550123" />;
+export const fallback = () => (
+  <PhoneLink phone="noop" fallback="Invalid Phone Number" />
+);

package/src/phone-link/PhoneLink.tsx

@@ -0,0 +1,59 @@
+import { Link, LinkProps } from '@material-ui/core';
+import { renderChildren } from '@superdispatch/ui';
+import {
+  forwardRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+  Suspense,
+  useMemo,
+} from 'react';
+import { CountryISO } from '../country-code-metadata/CountryCodeMetadata';
+import {
+  PhoneNumberFormat,
+  usePhoneService,
+} from '../phone-service/PhoneService';
+
+export interface PhoneLinkProps
+  extends RefAttributes<HTMLAnchorElement>,
+    Omit<LinkProps, 'ref' | 'href' | 'children'> {
+  phone: unknown;
+  country?: CountryISO;
+  format?: PhoneNumberFormat;
+  fallback?: ReactNode;
+}
+
+export const PhoneLink: ForwardRefExoticComponent<PhoneLinkProps> = forwardRef(
+  ({ phone, country, fallback, format = 'international', ...props }, ref) => {
+    const service = usePhoneService();
+    const [text, href] = useMemo(() => {
+      if (service.checkPossibility(phone) !== 'is-possible') {
+        return [undefined, undefined];
+      }
+
+      return [
+        service.format(phone, { country, format }),
+        service.format(phone, { country, format: 'rfc3966' }),
+      ];
+    }, [phone, country, format, service]);
+
+    return !href ? (
+      renderChildren(fallback)
+    ) : (
+      <Link {...props} ref={ref} href={href}>
+        {text}
+      </Link>
+    );
+  },
+);
+
+export interface SuspendedPhoneLinkProps extends PhoneLinkProps {
+  suspenseFallback?: ReactNode;
+}
+
+export const SuspendedPhoneLink: ForwardRefExoticComponent<SuspendedPhoneLinkProps> =
+  forwardRef(({ suspenseFallback = null, ...props }, ref) => (
+    <Suspense fallback={suspenseFallback}>
+      <PhoneLink {...props} ref={ref} />
+    </Suspense>
+  ));