feat(autocomplete simple): react component for autocomplete - simple variation

CHANGELOG.react.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   Text field enhancements (`chips`, `onFocus`, `onBlur`, `textfieldRef`, `inputRef` props) [#199](https://github.com/lumapps/design-system/pull/199)
+-   Autocomplete component [#191](https://github.com/lumapps/design-system/pull/191)
 
 ### Changed
 

demo/react/doc/product/components/autocomplete.mdx

@@ -0,0 +1,111 @@
+```javascript import
+import { Autocomplete, List, ListItem, ListItemSize, Size, TextField, Chip, ListDivider, Icon, ListSubheader } from 'LumX';
+import { useBooleanState } from 'LumX/core/react/hooks';
+import { DOWN_KEY_CODE, ENTER_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from 'LumX/core/constants';
+```
+
+# Autocomplete
+
+## Default
+
+```javascript jsx withThemeSwitcher
+(theme) => {
+    const CITIES = [
+        {
+            text: 'Los Angeles',
+            id: 'losangeles'
+        },
+        {
+            text: 'San Francisco',
+            id: 'sanfrancisco'
+        },
+        {
+            text: 'Paris',
+            id: 'paris'
+        },
+        {
+            text: 'Montpellier',
+            id: 'montpellier'
+        },
+        {
+            text: 'Bordeaux',
+            id: 'bordeaux'
+        },
+        {
+            text: 'Toulouse',
+            id: 'toulouse'
+        },
+        {
+            text: 'Lyon',
+            id: 'lyon'
+        },
+        {
+            text: 'Montevideo',
+            id: 'montevideo'
+        }
+    ];
+
+    const [showSuggestions, setShowSuggestions] = React.useState(false);
+    const [filterValue, setFilterValue] = React.useState('');
+    const inputRef = React.useRef(null);
+
+    const filteredCities = CITIES.filter(city => city.text.replace(' ', '').toLowerCase().includes(filterValue.replace(' ', '').toLowerCase()));
+    const closeAutocomplete = () => setShowSuggestions(false);
+
+    const setSelectedCity = (city) => {
+        setFilterValue(city.text);
+        setShowSuggestions(false);
+    }
+
+    const onChange = (value) => {
+        setFilterValue(value);
+        setShowSuggestions(value.length > 0);
+    };
+
+    const {
+        activeItemIndex,
+    } = List.useKeyboardListNavigation(
+        filteredCities,
+        setSelectedCity,
+        inputRef,
+    );
+
+    const onFocus = (evt) => {
+        setShowSuggestions(filterValue.length > 0);
+    }
+
+    const hasSuggestions = filteredCities.length > 0;
+
+    return (
+        <Autocomplete
+            theme={theme}
+            isOpen={showSuggestions && hasSuggestions}
+            onClose={closeAutocomplete}
+            value={filterValue}
+            onChange={onChange}
+            onFocus={onFocus}
+            inputRef={inputRef}
+        >
+            { hasSuggestions && (
+                <List>
+                    {filteredCities.map((city, index) => (
+                        <ListItem
+                            size={ListItemSize.tiny}
+                            isClickable
+                            key={city.id}
+                            isHighlighted={index === activeItemIndex}
+                            onItemSelected={() => setSelectedCity(city)}
+                        >
+                            <div>{city.text}</div>
+                        </ListItem>
+                    ))}
+                </List>
+            )}
+        </Autocomplete>
+    );
+};
+```
+
+### Properties
+
+<PropTable component="Autocomplete" />

demo/react/layout/MainNav.tsx

@@ -45,6 +45,7 @@ const ITEMS: Item[] = [
             {
                 label: 'Components',
                 children: [
+                    'Autocomplete',
                     'Avatar',
                     'Button',
                     'Checkbox',

src/components/autocomplete/react/Autocomplete.test.tsx

@@ -0,0 +1,99 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+
+import { ICommonSetup, Wrapper, commonTestsSuite } from 'LumX/core/testing/utils.test';
+
+import { Autocomplete, AutocompleteProps, CLASSNAME } from './Autocomplete';
+
+/////////////////////////////
+
+/**
+ * Define the overriding properties waited by the `setup` function.
+ */
+type ISetupProps = Partial<AutocompleteProps>;
+
+/**
+ * Defines what the `setup` function will return.
+ */
+interface ISetup extends ICommonSetup {
+    props: ISetupProps;
+
+    /**
+     * The <div> element that holds the popover content.
+     */
+    wrapper: Wrapper;
+}
+
+/////////////////////////////
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ *
+ * @param  props  The props to use to override the default props of the component.
+ * @param  [shallowRendering=true] Indicates if we want to do a shallow or a full rendering.
+ * @return An object with the props, the component wrapper and some shortcut to some element inside of the component.
+ */
+const setup = (props: ISetupProps = {}, shallowRendering: boolean = true): ISetup => {
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+
+    // @ts-ignore
+    const wrapper: Wrapper = renderer(<Autocomplete {...props} />);
+
+    return {
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Autocomplete.displayName}>`, (): void => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', (): void => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', (): void => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    /////////////////////////////
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', (): void => {
+        it('should use default props', (): void => {
+            const { wrapper }: ISetup = setup();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    /////////////////////////////
+
+    // 3. Test events.
+    describe('Events', (): void => {
+        // Nothing to do here.
+    });
+    /////////////////////////////
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', (): void => {
+        // Nothing to do here.
+    });
+
+    /////////////////////////////
+
+    // 5. Test state.
+    describe('State', (): void => {
+        // Nothing to do here.
+    });
+
+    /////////////////////////////
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});