@transferwise/components 46.51.0 → 46.52.1

package/src/typeahead/Typeahead.story.tsx

@@ -1,125 +1,122 @@
-import { select, boolean } from '@storybook/addon-knobs';
-import { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react';
 import { Search as SearchIcon } from '@transferwise/icons';
-import { useState } from 'react';
+import { userEvent, within, fn } from '@storybook/test';
 
-import { Sentiment } from '../common';
+import Typeahead, { type TypeaheadOption } from './Typeahead';
+import { Size } from '../common';
+import { useState } from 'react';
 import { Input } from '../inputs/Input';
 
-import Typeahead, { type TypeaheadOption } from './Typeahead';
+type Story = StoryObj<typeof Typeahead>;
+
+/**
+ * Checks if provided TypeaheadOption contains an HTML5-compliant email address
+ * @see https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
+ */
+const validateOptionAsEmail = (option: TypeaheadOption) => {
+  return /^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i.test(
+    option.label,
+  );
+};
 
 export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
+  args: {
+    allowNew: false,
+    autoFillOnBlur: true,
+    autoFocus: false,
+    chipSeparators: [',', ' '],
+    clearable: true,
+    inputAutoComplete: 'new-password',
+    minQueryLength: 3,
+    multiple: false,
+    searchDelay: 200,
+    showSuggestions: true,
+    showNewEntry: true,
+    size: Size.MEDIUM,
+    initialValue: [],
+    id: 'myTypeahead',
+    name: 'typeahead-input-name',
+    placeholder: 'placeholder',
+    onChange: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    onInputChange: fn(),
+    onSearch: fn(),
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: [Size.MEDIUM, Size.LARGE],
+    },
+  },
+} satisfies Meta<typeof Typeahead>;
+
+export const Basic: Story = {
+  render: function Render(args) {
+    const [options, setOptions] = useState([
+      {
+        label: 'A thing',
+        note: 'with a note',
+      },
+      {
+        label: 'Another thing',
+        secondary: 'with secondary text this time',
+      },
+      {
+        label: 'Profile',
+      },
+      {
+        label: 'Globe',
+      },
+      {
+        label: 'British pound',
+      },
+      {
+        label: 'Euro',
+      },
+      {
+        label: 'Something else',
+      },
+    ]);
+
+    const validateChipWhenMultiple = () =>
+      args.multiple && args.allowNew
+        ? (option: TypeaheadOption) => validateOptionAsEmail(option)
+        : undefined;
+
+    return (
+      <Typeahead
+        {...args}
+        initialValue={[]}
+        validateChip={validateChipWhenMultiple()}
+        addon={<SearchIcon size={24} />}
+        options={options}
+        onSearch={() => {
+          setTimeout(() => setOptions(options), 1500);
+        }}
+      />
+    );
+  },
 };
 
-const validateChip = (option: TypeaheadOption) => {
-  // eslint-disable-next-line unicorn/no-unsafe-regex
-  return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-    option.label,
-  );
-};
-
-export const createable = () => {
-  return (
+export const Creatable: Story = {
+  render: (args) => (
     <Typeahead
-      id="typeahead"
-      name="typeahead-input-name"
-      size="md"
-      maxHeight={100}
-      footer={<div>Want a footer? Style it!</div>}
-      multiple
-      clearable
+      {...args}
       allowNew
-      showSuggestions={false}
-      showNewEntry={false}
-      placeholder="placeholder"
-      chipSeparators={[',', ' ']}
-      validateChip={validateChip}
+      multiple
+      initialValue={[]}
+      validateChip={validateOptionAsEmail}
       addon={<SearchIcon size={24} />}
       options={[]}
-      onChange={() => {}}
-      onBlur={() => {}}
     />
-  );
-};
-
-createable.play = async ({ canvasElement }: StoryContext) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}chip2{Enter}');
-};
-
-export const Basic = () => {
-  const [options, setOptions] = useState([
-    {
-      label: 'A thing',
-      note: 'with a note',
-    },
-    {
-      label: 'Another thing',
-      secondary: 'with secondary text this time',
-    },
-    {
-      label: 'Profile',
-    },
-    {
-      label: 'Globe',
-    },
-    {
-      label: 'British pound',
-    },
-    {
-      label: 'Euro',
-    },
-    {
-      label: 'Something else',
-    },
-  ]);
-
-  const validateChipWhenMultiple = () => {
-    return multiple && allowNew ? (option: TypeaheadOption) => validateChip(option) : undefined;
-  };
-
-  const multiple = boolean('multiple', false);
-  const clearable = boolean('clearable', false);
-  const allowNew = boolean('allowNew', false);
-  const showSuggestions = boolean('showSuggestions', true);
-  const showNewEntry = boolean('showNewEntry', true);
-  const showAlert = boolean('alert', false);
-  const alertType = select('alert type', [Sentiment.ERROR, Sentiment.WARNING], Sentiment.ERROR);
-
-  return (
-    <Typeahead
-      id="typeahead"
-      name="typeahead-input-name"
-      size="md"
-      maxHeight={100}
-      footer={<div>Want a footer? Style it!</div>}
-      multiple={multiple}
-      clearable={clearable}
-      allowNew={allowNew}
-      showSuggestions={showSuggestions}
-      showNewEntry={showNewEntry}
-      placeholder="placeholder"
-      chipSeparators={[',', ' ']}
-      validateChip={validateChipWhenMultiple()}
-      alert={showAlert ? { message: `Couldn't add item`, type: alertType } : undefined}
-      addon={<SearchIcon size={24} />}
-      options={options}
-      inputAutoComplete="off"
-      onSearch={() => {
-        setTimeout(() => setOptions(options), 1500);
-      }}
-      onChange={() => {}}
-      onBlur={() => {}}
-    />
-  );
-};
-
-Basic.play = async ({ canvasElement }: StoryContext) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}hello@wise.com{Enter}');
+  },
 };
 
 type Result =
@@ -134,98 +131,100 @@ type Result =
 
 type SearchState = 'success' | 'idle' | 'error' | 'loading';
 
-export const Search = () => {
-  const [results, setResults] = useState<Result[]>([]);
-  const [state, setState] = useState<SearchState>('idle');
-  const [filledValue, setFilledValue] = useState<string | null>(null);
+/**
+ * @FIXME This story feels incomplete. It ignores bunch of props
+ *        and seems very opinionated. Surely we can do better?
+ */
+export const Search: Story = {
+  render: function Render(args) {
+    const [results, setResults] = useState<Result[]>([]);
+    const [state, setState] = useState<SearchState>('idle');
+    const [filledValue, setFilledValue] = useState<string | null>(null);
+
+    const handleInputChange = (query: string) => {
+      args?.onInputChange?.(query);
+
+      if (query === 'loading' || query === 'error' || query === 'nothing') {
+        setState(query === 'nothing' ? 'success' : query);
+        setResults([]);
+        return;
+      }
 
-  const onChange = (query: string) => {
-    if (query === 'loading') {
-      setState('loading');
-      setResults([]);
-      return;
-    }
-    if (query === 'error') {
-      setState('error');
-      setResults([]);
-      return;
-    }
-    if (query === 'nothing') {
       setState('success');
-      setResults([]);
-      return;
-    }
+      setResults(getResults(query));
+    };
 
-    setState('success');
-    setResults(getResults(query));
-  };
-
-  const onResultSelected = (option: Result) => {
-    if (option.type === 'search') {
-      setResults([
-        { type: 'action', value: `${option.value} Result #1` },
-        { type: 'action', value: `${option.value} Result #2` },
-        { type: 'action', value: `${option.value} Result #3` },
-      ]);
-    }
-    if (option.type === 'action') {
-      setFilledValue(option.value);
-    }
-  };
-
-  const getResults = (query: string): Result[] => {
-    return [
-      { type: 'action', value: `${query} Result #1` },
-      { type: 'action', value: `${query} Result #2` },
-      { type: 'action', value: `${query} Result #3` },
-      { type: 'search', value: `Search for more: '${query}'` },
-    ];
-  };
-
-  return (
-    <>
-      <Typeahead<Result>
-        id="typeahead-input-id"
-        name="typeahead-input-name"
-        size="md"
-        maxHeight={100}
-        footer={<SearchFooter options={results} state={state} />}
-        multiple={false}
-        clearable={false}
-        addon={<SearchIcon />}
-        options={results.map((option) => ({
-          value: option,
-          label: option.value,
-          keepFocusOnSelect: option.type === 'search',
-          clearQueryOnSelect: option.type === 'action',
-        }))}
-        onChange={(values) => {
-          if (values.length > 0) {
-            const [updatedValue] = values;
-            if (updatedValue.value) {
-              onResultSelected(updatedValue.value);
-            }
-          }
-        }}
-        onInputChange={onChange}
-      />
-      {filledValue != null ? <Input value={filledValue} /> : null}
-    </>
-  );
-};
+    const handleResultSelected = (option: Result) => {
+      if (option.type === 'search') {
+        setResults([
+          { type: 'action', value: `${option.value} Result #1` },
+          { type: 'action', value: `${option.value} Result #2` },
+          { type: 'action', value: `${option.value} Result #3` },
+        ]);
+      }
+      if (option.type === 'action') {
+        setFilledValue(option.value);
+      }
+    };
+
+    const handleChange = (values: TypeaheadOption<Result>[]) => {
+      args?.onChange?.(values);
+
+      if (values.length > 0) {
+        const [updatedValue] = values;
+
+        if (updatedValue.value) {
+          handleResultSelected(updatedValue.value);
+        }
+      }
+    };
+
+    const getResults = (query: string): Result[] => {
+      return [
+        { type: 'action', value: `${query} Result #1` },
+        { type: 'action', value: `${query} Result #2` },
+        { type: 'action', value: `${query} Result #3` },
+        { type: 'search', value: `Search for more: '${query}'` },
+      ];
+    };
+
+    const renderFooter = (options: Result[]) => {
+      let output = null;
 
-function SearchFooter({ options, state }: { options: Result[]; state: SearchState }) {
-  if (state === 'loading') {
-    return <p className="m-y-2 m-x-2">Loading...</p>;
-  }
+      if (state === 'loading') {
+        output = 'Loading…';
+      }
 
-  if (state === 'success' && options.length === 0) {
-    return <p className="m-y-2 m-x-2">No results found</p>;
-  }
+      if (state === 'success' && options.length === 0) {
+        output = 'No results found';
+      }
 
-  if (state === 'error' && options.length === 0) {
-    return <div className="m-y-2 m-x-2">Something went wrong</div>;
-  }
+      if (state === 'error' && options.length === 0) {
+        output = 'Something went wrong';
+      }
 
-  return null;
-}
+      return <p className="m-y-2 m-x-2">{output}</p>;
+    };
+
+    return (
+      <>
+        <Typeahead<Result>
+          {...args}
+          initialValue={undefined}
+          footer={renderFooter(results)}
+          addon={<SearchIcon />}
+          options={results.map((option) => ({
+            value: option,
+            label: option.value,
+            keepFocusOnSelect: option.type === 'search',
+            clearQueryOnSelect: option.type === 'action',
+          }))}
+          onChange={handleChange}
+          onInputChange={handleInputChange}
+        />
+
+        {filledValue != null ? <Input value={filledValue} /> : null}
+      </>
+    );
+  },
+};

package/src/typeahead/Typeahead.tsx

@@ -1,27 +1,28 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 import { Cross as CrossIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import { Component, ReactNode } from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
-import { Size, Sentiment, SizeMedium, SizeLarge } from '../common';
 import {
+  Size,
+  Sentiment,
+  SizeMedium,
+  SizeLarge,
   addClickClassToDocumentOnIos,
   removeClickClassFromDocumentOnIos,
   stopPropagation,
-} from '../common/domHelpers';
+} from '../common';
 import InlineAlert from '../inlineAlert';
 import { InlineAlertProps } from '../inlineAlert/InlineAlert';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
 import TypeaheadOption from './typeaheadOption/TypeaheadOption';
+import messages from './Typeahead.messages';
 
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
@@ -35,7 +36,7 @@ export type TypeaheadOption<T = string> = {
   keepFocusOnSelect?: boolean;
 };
 
-export interface TypeaheadProps<T> {
+export interface TypeaheadProps<T> extends WrappedComponentProps {
   id: string;
   name: string;
   addon?: ReactNode;
@@ -464,6 +465,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
       <div
         role="group"
         {...inputAttributes}
@@ -513,7 +515,12 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
 
             {clearButton && (
               <div className="input-group-addon">
-                <button type="button" className="btn-unstyled" onClick={this.clear}>
+                <button
+                  type="button"
+                  className="btn-unstyled"
+                  aria-label={this.props.intl.formatMessage(messages.clearLabel)}
+                  onClick={this.clear}
+                >
                   <CrossIcon />
                 </button>
               </div>
@@ -526,6 +533,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   }
 }
 
-export default withInputAttributes(Typeahead, { nonLabelable: true }) as <T>(
+export default injectIntl(withInputAttributes(Typeahead, { nonLabelable: true })) as <T>(
   props: TypeaheadProps<T>,
 ) => React.ReactElement;