feat(combobox): add comboBox component

src/components/ComboBox/ComboBox.constants.ts

@@ -0,0 +1,35 @@
+const CLASS_PREFIX = 'md-combobox';
+
+const DEFAULTS = {
+  WIDTH:'16.25rem',
+  PLACEHOLDER:'',
+  NO_RESULT_TEXT:'No results found',
+  SHOULDFILTERONARROWBUTTON:true,
+  ERROR:false,
+  SELECTEDKEY:'',
+  DISABLEDKEYS:[],
+};
+
+const STYLE = {
+  description: `${CLASS_PREFIX}-description`,
+  label: `${CLASS_PREFIX}-label`,
+  wrapper: `${CLASS_PREFIX}-wrapper`,
+  inputSection: `${CLASS_PREFIX}-input-section`,
+  input: `${CLASS_PREFIX}-input`,
+  divider: `${CLASS_PREFIX}-divider`,
+  button: `${CLASS_PREFIX}-button`,
+  arrowIcon: `${CLASS_PREFIX}-arrow-icon`,
+  selectionPosition: `${CLASS_PREFIX}-selection-position`,
+  selectionContainer: `${CLASS_PREFIX}-selection-container`,
+  selection: `${CLASS_PREFIX}-selection`,
+  noResultText: `${CLASS_PREFIX}-no-result-text`,
+};
+
+const KEYS = {
+  INPUT_SEARCH_NO_RESULT: 'input_search_no_result',
+};
+
+export{STYLE,DEFAULTS,KEYS};
+
+
+

src/components/ComboBox/ComboBox.documentation.mdx

@@ -0,0 +1,127 @@
+import { Story } from '@storybook/addon-docs';
+
+`<ComboBox />`
+The component is composed of three parts: Button, Menu and Input. In the component, the comboBoxGroups 
+passed in are filtered based on the value of the Input and then passed to the internal Menu 
+to implement the search function.
+
+## Content
+
+The ComboBox element follows the
+[Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html) from
+the @react-stately library, accepting both static and dynamic collections. ComboBox accepts `<Item>`
+elements as children, each with a key prop. Basic usage of `ComboBox`, seen in the example below,
+shows multiple options populated with a string. Simple element with simple options as text.
+
+```js
+import { Item, Section } from '@react-stately/collections';
+
+<ComboBox label="Single Value" onSelectionChange={(item) => console.log}>
+  <Item>Red</Item>
+  <Item>Blue</Item>
+  <Item>Green</Item>
+  <Item>Yellow</Item>
+</ComboBox>;
+```
+
+
+## Dynamic Content
+
+An iterable list of sectionGroups is can be passed to the ComboBox using the comboBoxGroups prop. 
+It should be noted that the outermost array is used to distinguish the group of sections, 
+and the items within the section accept an iterable list of options.
+
+```js
+import { Item } from '@react-stately/collections';
+
+const comboBoxGroups = [
+  { 
+    items: [ 
+      { key: 'key1', label: 'item1' },
+      { key: 'key2', label: 'item2' },
+      { key: 'key3', label: 'item3' },
+      { key: 'key4', label: 'item4' },
+    ]
+  },
+]
+
+<ComboBox onSelectionChange={(item) => console.log} comboBoxGroups={comboBoxGroups}>
+ {(sectionGroup) => {
+    return (
+      <Section key="noSection">
+        {sectionGroup.items.map((menuItem) => {
+          return (
+            <Item key={menuItem.key} textValue={menuItem.key}>
+              <div>{menuItem.label}</div>
+            </Item>
+          );
+        })}
+      </Section>
+    );
+  }}
+</ComboBox>
+```
+
+## Sections
+
+ComboBox supports sections in order to group options. Sections can be used by wrapping groups of items
+in a `Section` element. Each `Section` takes a title and key prop.
+
+```js
+import { Item, Section } from '@react-stately/collections';
+
+<ComboBox onSelectionChange={(item) => console.log}>
+  <Section title="Colors">
+    <Item>Red</Item>
+    <Item>Blue</Item>
+    <Item>Green</Item>
+    <Item>Yellow</Item>
+  </Section>
+  <Section title="Animals">
+    <Item>Dog</Item>
+    <Item>Cat</Item>
+  </Section>
+</ComboBox>;
+
+
+
+const comboBoxGroups = [
+  { 
+    section: 'section1',
+    items: [ 
+      { key: 'key1', label: 'item1' },
+      { key: 'key2', label: 'item2' },
+      { key: 'key3', label: 'item3' },
+      { key: 'key4', label: 'item4' },
+    ]
+  },
+   { 
+    section: 'section2',
+    items: [ 
+      { key: 'key1', label: 'item1' },
+      { key: 'key2', label: 'item2' },
+      { key: 'key3', label: 'item3' },
+      { key: 'key4', label: 'item4' },
+    ]
+  },
+]
+
+<ComboBox onSelectionChange={(item) => console.log} comboBoxGroups={comboBoxGroups}>
+  {(group: IGroup) => {
+    return (
+      <Section title={group.section} key={group.section}>
+        {group.items.map((menuItem: IItem) => {
+          return (
+            <Item key={menuItem.key} textValue={menuItem.key}>
+              <div>{menuItem.label}</div>
+            </Item>
+          );
+        })}
+      </Section>
+    );
+  }}
+</ComboBox>
+```
+
+
+## Default Preview

src/components/ComboBox/ComboBox.stories.args.ts

@@ -0,0 +1,170 @@
+import { commonStyles } from '../../storybook/helper.stories.argtypes';
+import { ComboBox_CONSTANTS as CONSTANTS } from '.';
+
+
+export default {
+  ...commonStyles,
+  width: {
+    description:
+      'To override the ComboBox container and selection list width.',
+    control: { type: 'text' },
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.WIDTH,
+      },
+    },
+  },
+  error: {
+    description: 'Sets whether the ComboBox is in error state',
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  placeholder: {
+    description: 'Text to display inside the input when there is no inputValue or item selected',
+    control: { type: 'text' },
+    table: {
+      category: 'React Aria - Input',
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.PLACEHOLDER,
+      },
+    },
+  },
+  onInputChange: {
+    defaultValue: undefined,
+    description:
+      'Handler that is called when the InputValue changes.',
+    control: { type: 'function' },
+    table: {
+      category: 'React Aria - Input',
+      type: {
+        summary: '(event: InputEvent) => void',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
+  onArrowButtonPress: {
+    defaultValue: undefined,
+    description:
+      'Handler that is called when the press is released over the arrowButton.',
+    control: { type: 'function' },
+    table: {
+      category: 'React Aria - Button',
+      type: {
+        summary: '(event: PressEvent) => void',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },  
+  },
+  shouldFilterOnArrowButton: {
+    description:
+      'This property represents whether to filter based on the input value when click the arrowButton.',
+    control: { type: 'boolean' },
+    table: {
+      category: 'React Aria - Button',
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.SHOULDFILTERONARROWBUTTON,
+      },
+    },  
+  },
+  selectedKey: {
+    description:
+      'It also affects the value of the input (displayed as the label of the corresponding item',
+    control: { type: 'text' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: 'React.Key',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.SELECTEDKEY,
+      },
+    },
+  },
+  disabledKeys: {
+    description:
+      'List with disabled keys. (They must be exact type as the key)',
+    control: { type: 'array' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: 'React.Key[]',
+      },
+      defaultValue: {
+        summary: '[]',
+      },
+    },
+  },
+  comboBoxGroups: {
+    description:
+      'The options for this selection list element.',
+    control: { type: 'array' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: 'IComboBoxGroup[]',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
+  noResultText: {
+    description: 'Text to display inside the dropdown when there is no results.',
+    control: { type: 'text' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.NO_RESULT_TEXT,
+      },
+    },
+  },
+  onSelectionChange: {
+    description:
+      'Handler that is called when an item is selected(if the selected item matches the selectedKey, the parameter is undefined).',
+    control: { type: 'function' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: '(item: IComboBoxItem) => void',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
+  children: {
+    description: 'Provides the items nodes for this selection list element.',
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: 'CollectionChildren<any>',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
+};