OHIF-32: Wrapping React-select with our style requirements (#1529)

* Custom Select component

* Including inpot section

* Adding missing import sections on docz

* Change cursor once is disabled

* update date range color font

platform/ui/src/components/Select/Select.css

@@ -0,0 +1,39 @@
+.customSelect__wrapper .customSelect__control {
+  @apply bg-black border-custom-blue shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
+  min-height: 33px;
+}
+.customSelect__wrapper .customSelect__control:hover {
+  @apply border-gray-500;
+}
+
+.customSelect__wrapper .customSelect__control:focus {
+  @apply border-gray-500 outline-none;
+}
+
+.customSelect__wrapper .customSelect__control--menu-is-open {
+  @apply border-gray-500 outline-none;
+}
+
+.customSelect__wrapper .customSelect__indicator-separator {
+  @apply hidden;
+}
+
+.customSelect__wrapper .customSelect__dropdown-indicator {
+  padding: 4px;
+}
+
+.customSelect__wrapper .customSelect__option {
+  @apply text-black;
+}
+
+.customSelect__wrapper .customSelect__single-value {
+  @apply text-white;
+}
+
+.customSelect--is-disabled .customSelect__control--is-disabled {
+  @apply pointer-events-none;
+}
+
+.customSelect__wrapper.customSelect--is-disabled {
+  @apply cursor-not-allowed pointer-events-auto;
+}

platform/ui/src/components/Select/Select.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ReactSelect from 'react-select';
+
+import './Select.css';
+
+const Select = ({
+  autoFocus,
+  className,
+  isDisabled,
+  isMulti,
+  isSearchable,
+  name,
+  onChange,
+  options,
+  placeholder,
+  noOptionsMessage,
+  value,
+}) => {
+  return (
+    <ReactSelect
+      autoFocus={autoFocus}
+      className={classnames(
+        className,
+        'flex flex-col flex-1 mt-2 customSelect__wrapper'
+      )}
+      classNamePrefix="customSelect"
+      isDisabled={isDisabled}
+      isMulti={isMulti}
+      isSearchable={isSearchable}
+      name={name}
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+      noOptionsMessage={noOptionsMessage}
+      value={value}
+    ></ReactSelect>
+  );
+};
+
+Select.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  placeholder: PropTypes.string,
+  noOptionsMessage: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default Select;

platform/ui/src/components/Select/Select.mdx

@@ -0,0 +1,70 @@
+---
+name: Select
+menu: Components
+route: components/select
+---
+
+import { Playground, Props } from 'docz';
+import Select from './';
+
+# Select
+
+## Import
+
+```javascript
+import { Select } from '@ohfi/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        options={[
+          { value: 'one', label: 'one' },
+          { value: 'two', label: 'two' },
+          { value: 'three', label: 'three' },
+          { value: 'four', label: 'four' },
+        ]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        isDisabled
+        options={[
+          { value: 'one', label: 'one' },
+          { value: 'two', label: 'two' },
+          { value: 'three', label: 'three' },
+          { value: 'four', label: 'four' },
+        ]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## No Options
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        noOptionsMessage={() => {
+          'No Options';
+        }}
+        options={[]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={Select} />

platform/ui/src/components/Select/index.js

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;