re-structure to monorepo.

packages/webapp/src/components/Select/DisplayNameList.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { ListSelect } from './ListSelect';
+
+export function DisplayNameList({
+  salutation,
+  firstName,
+  lastName,
+  company,
+  ...restProps
+}) {
+  const formats = [
+    {
+      format: '{1} {2} {3}',
+      values: [salutation, firstName, lastName],
+      required: [1],
+    },
+    { format: '{1} {2}', values: [firstName, lastName], required: [] },
+    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+    { format: '{1}', values: [company], required: [1] },
+  ];
+
+  const formatOptions = formats
+    .filter(
+      (format) =>
+        !format.values.some((value, index) => {
+          return !value && format.required.indexOf(index + 1) !== -1;
+        }),
+    )
+    .map((formatOption) => {
+      const { format, values } = formatOption;
+      let label = format;
+
+      values.forEach((value, index) => {
+        const replaceWith = value || '';
+        label = label.replace(`{${index + 1}}`, replaceWith).trim();
+      });
+      return { label: label.replace(/\s+/g, ' ') };
+    });
+
+  return (
+    <ListSelect
+      items={formatOptions}
+      selectedItemProp={'label'}
+      textProp={'label'}
+      defaultText={intl.get('select_display_name_as')}
+      filterable={false}
+      {...restProps}
+    />
+  );
+}

packages/webapp/src/components/Select/ListSelect.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React, { useState, useMemo, useEffect } from 'react';
+import { Button, MenuItem } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import { FormattedMessage as T } from '../FormattedMessage';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+
+export function ListSelect({
+  buttonProps,
+  defaultText,
+  noResultsText = <T id="no_results" />,
+  isLoading = false,
+  textProp,
+  labelProp,
+
+  selectedItem,
+  selectedItemProp = 'id',
+
+  initialSelectedItem,
+  onItemSelect,
+  disabled = false,
+  ...selectProps
+}) {
+  const selectedItemObj = useMemo(
+    () => selectProps.items.find((i) => i[selectedItemProp] === selectedItem),
+    [selectProps.items, selectedItemProp, selectedItem],
+  );
+
+  const selectedInitialItem = useMemo(
+    () =>
+      selectProps.items.find(
+        (i) => i[selectedItemProp] === initialSelectedItem,
+      ),
+    [initialSelectedItem],
+  );
+
+  const [currentItem, setCurrentItem] = useState(
+    (initialSelectedItem && selectedInitialItem) || null,
+  );
+
+  useEffect(() => {
+    if (selectedItemObj) {
+      setCurrentItem(selectedItemObj);
+    }
+  }, [selectedItemObj, setCurrentItem]);
+
+  const noResults = isLoading ? (
+    'loading'
+  ) : (
+    <MenuItem disabled={true} text={noResultsText} />
+  );
+
+  const itemRenderer = (item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        text={item[textProp]}
+        key={item[selectedItemProp]}
+        label={item[labelProp]}
+        onClick={handleClick}
+      />
+    );
+  };
+
+  const handleItemSelect = (_item) => {
+    setCurrentItem(_item);
+    onItemSelect && onItemSelect(_item);
+  };
+
+  // Filters accounts types items.
+  const filterItems = (query, item, _index, exactMatch) => {
+    const normalizedTitle = item[textProp].toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  return (
+    <Select
+      itemRenderer={itemRenderer}
+      onItemSelect={handleItemSelect}
+      itemPredicate={filterItems}
+      {...selectProps}
+      noResults={noResults}
+      disabled={disabled}
+      className={classNames(
+        CLASSES.FORM_GROUP_LIST_SELECT,
+        selectProps.className,
+      )}
+    >
+      <Button
+        text={currentItem ? currentItem[textProp] : defaultText}
+        loading={isLoading}
+        disabled={disabled}
+        {...buttonProps}
+        fill={true}
+      />
+    </Select>
+  );
+}

packages/webapp/src/components/Select/SalutationList.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { ListSelect } from './ListSelect';
+
+export function SalutationList({ ...restProps }) {
+  const saluations = [
+    intl.get('mr'),
+    intl.get('mrs'),
+    intl.get('ms'),
+    intl.get('miss'),
+    intl.get('dr'),
+  ];
+  const items = saluations.map((saluation) => ({
+    key: saluation,
+    label: saluation,
+  }));
+
+  return (
+    <ListSelect
+      items={items}
+      selectedItemProp={'key'}
+      textProp={'label'}
+      defaultText={intl.get('salutation')}
+      filterable={false}
+      {...restProps}
+    />
+  );
+}

packages/webapp/src/components/Select/index.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './ListSelect';
+export * from './SalutationList';
+export * from './DisplayNameList'