feat: add formatList & FormattedList

[longlho]

List Formatting APIs

This is currently stage 3 so polyfill would be required.

formatList

type ListFormatOptions = {
  type?: 'disjunction' | 'conjunction' | 'unit';
  style?: 'long' | 'short' | 'narrow';
};

function formatPlural(
  elements: (string | React.ReactNode)[],
  options?: Intl.ListFormatOptions
): string | React.ReactNode[];

This function allows you to join list of things together in an i18n-safe way. For example:

formatList(['Me', 'myself', 'I'], {type: 'conjunction'}); // Me, myself and I
formatList(['5 hours', '3 minues'], {type: 'unit'}); // 5 hours, 3 minutes

List Formatting Components

FormattedList

This component uses formatList API and Intl.ListFormat. Its props corresponds to Intl.ListFormatOptions.

Props:

props: ListFormatOptions &
  {
    children: (chunksOrString: string | React.ReactElement[]) => ReactElement,
  };

Example:

<FormattedList type="conjunction" value={['Me', 'myself', 'I']} />

Me, myself and I

<FormattedList type="conjunction" value={['Me', <b>myself</b>, 'I']} />

Me, <b>myself</b> and I

fix #1328

Things to do:

• FormattedList
• Unit tests
• Docs