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/DateRange/DateRange.css

@@ -29,7 +29,7 @@
   @apply bg-no-repeat;
 }
 .DateInput_input {
-  @apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-gray-700 leading-tight pl-8;
+  @apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
 }
 .DateInput_input:hover {
   @apply border-gray-500;

platform/ui/src/components/Icon/icon.mdx

@@ -10,6 +10,12 @@ import { ICONS } from './getIcon';
 
 # Icon
 
+## Import
+
+```javascript
+import { Icon } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

platform/ui/src/components/Input/Input.jsx

@@ -4,7 +4,7 @@ import Label from '../Label';
 import classnames from 'classnames';
 
 const baseInputClasses =
-  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-gray-700 hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
+  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-white hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
 
 const transparentClasses = {
   true: 'bg-transparent',

platform/ui/src/components/Input/Input.mdx

@@ -9,6 +9,12 @@ import Input from './';
 
 # Input
 
+## Import
+
+```javascript
+import { Input } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

platform/ui/src/components/Label/Label.mdx

@@ -9,6 +9,12 @@ import Label from './';
 
 # Label
 
+## Import
+
+```javascript
+import { Label } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

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;

platform/ui/src/components/index.js

@@ -4,6 +4,7 @@ import DateRange from './DateRange';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
+import Select from './Select';
 import Svg from './Svg';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
@@ -15,6 +16,7 @@ export {
   Icon,
   IconButton,
   Input,
+  Select,
   Svg,
   ThemeWrapper,
   Typography,