Merge pull request #142 from tbleckert/next

Refactoring

.eslintrc

@@ -1,24 +1,50 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "plugins": [
-    "react-hooks"
-  ],
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "rules": {
-    "indent": ["error", 4],
-    "react/jsx-indent": ["error", 4],
-    "react/jsx-indent-props": ["error", 4],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/jsx-props-no-spreading": 0,
-    "import/no-unresolved": [2, {"ignore": ["src/"]}],
-    "jsx-a11y/click-events-have-key-events": 0,
-    "no-mixed-operators": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "jsx-a11y/no-autofocus": 0
-  }
+    "parser": "babel-eslint",
+    "extends": "airbnb",
+    "plugins": [
+        "react-hooks"
+    ],
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "react/jsx-indent": [
+            "error",
+            4
+        ],
+        "react/jsx-indent-props": [
+            "error",
+            4
+        ],
+        "react/jsx-filename-extension": [
+            1,
+            {
+                "extensions": [
+                    ".js",
+                    ".jsx"
+                ]
+            }
+        ],
+        "react/jsx-props-no-spreading": 0,
+        "import/no-unresolved": [
+            2,
+            {
+                "ignore": [
+                    "src/"
+                ]
+            }
+        ],
+        "jsx-a11y/click-events-have-key-events": 0,
+        "no-mixed-operators": 0,
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "jsx-a11y/no-autofocus": 0,
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+    }
 }

.storybook/main.js

@@ -1,31 +1,34 @@
-
 module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-storysource'],
-  webpackFinal: async config => {
-    const devMode = process.env.NODE_ENV !== 'production';
+    'stories': ['../stories/**/*.stories.js'],
+    'addons': [
+        '@storybook/addon-links',
+        '@storybook/addon-storysource',
+        '@storybook/addon-essentials'
+    ],
+    webpackFinal: async config => {
+        const devMode = process.env.NODE_ENV !== 'production';
 
-    // get index of css rule
-    config.module.rules.find(
-        rule => rule.test.toString() === '/\\.css$/',
-    ).exclude = /\.module\.css$/;
+        // get index of css rule
+        config.module.rules.find(
+            rule => rule.test.toString() === '/\\.css$/',
+        ).exclude = /\.module\.css$/;
 
-    config.module.rules.push({
-      test: /\.module\.css$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            modules: {
-              localIdentName: (devMode) ? 'mm-[name]__[local]--[hash:base64:5]' : '[hash:base64:5]',
-            },
-          }
-        },
-      ]
-    });
+        config.module.rules.push({
+            test: /\.module\.css$/,
+            use: [
+                'style-loader',
+                {
+                    loader: 'css-loader',
+                    options: {
+                        modules: {
+                            localIdentName: (devMode) ? 'mm-[name]__[local]--[hash:base64:5]' : '[hash:base64:5]',
+                        },
+                    }
+                },
+            ]
+        });
 
-    // Return the altered config
-    return config;
-  },
+        // Return the altered config
+        return config;
+    },
 };

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

README.md

@@ -119,23 +119,28 @@ Below is all the available options you can pass to the component. Options withou
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | options | array | | Se the [options documentation](#the-options-object) below |
-| value | string, array | undefined | The value should be an array if multiple mode. |
+| getOptions | function | null | Get options through a function call, can return a promise for async usage. See [get options](#get-options) for more. |
+| filterOptions | function | null | Takes the current options list and should return a function that handles the filtering. Runs after getOptions. See [fuzzySearch.js](src/fuzzySearch.js) for example. |
+| value | string, array | null | The value should be an array if multiple mode. |
+| fuse | object, boolean | true | Use fuse.js to apply fuzzy search on search. Set to true to use default options or pass a fuse.js config option. If `search` is enabled and no `filterOptions` callback is passed, this will be set to `true` automatically. |
 | multiple | boolean | false | Set to true if you want to allow multiple selected options. |
 | search | boolean | false | Set to true to enable search functionality |
-| emptyMessage | string, function | null | Set empty message for empty options list, you can provide render function without arguments instead plain string message|
 | disabled | boolean | false | Disables all functionality |
+| printOptions | string | auto | Can be: auto, always, never, on-focus. This property controls when the options list should be rendered. |
+| closeOnSelect | boolean | true | The selectbox will blur by default when selecting an option. Set this to false to prevent this behavior. |
+| debounce | number | 0 | Number of ms to wait until calling [get options](#get-options) when searching. |
 | placeholder | string | empty string | Displayed if no option is selected and/or when search field is focused with empty value. |
+| id | string | null | HTML ID on the top level element. |
 | autoComplete | string, on/off | off | Disables/Enables autoComplete functionality in search field. |
 | autoFocus | boolean | false | Autofocus on select |
-| fuse | object, boolean | true | Use fuse.js to apply fuzzy search on search. Set to true to use default options or pass a fuse.js config option. If `search` is enabled and no `filterOptions` callback is passed, this will be set to `true` automatically. |
 | className | string, function | select-search-box | Set a base class string or pass a function for complete control. Se [custom classNames](#custom-class-names) for more. |
-| onChange | function | null | Function to receive and handle value changes. |
-| printOptions | string | auto | Can be: auto, always, never, on-focus. This property controls when the options list should be rendered. |
-| closeOnSelect | boolean | true | The selectbox will blur by default when selecting an option. Set this to false to prevent this behavior. |
 | renderOption | function | null | Function that renders the options. See [custom renderers](#custom-renderers) for more. |
-| renderValue | function | null | Function that renders the value/search field. See [custom renderers](#custom-renderers) for more. |
 | renderGroupHeader | function | null | Function that renders the group header. See [custom renderers](#custom-renderers) for more. |
-| getOptions | function | null | Get options through a function call, can return a promise for async usage. See [get options](#get-options) for more. |
+| renderValue | function | null | Function that renders the value/search field. See [custom renderers](#custom-renderers) for more. |
+| emptyMessage | string, function | null | Set empty message for empty options list, you can provide render function without arguments instead plain string message|
+| onChange | function | null | Function to receive and handle value changes. |
+| onFocus | function | null | Focus callback. |
+| onBlur | function | null | Blur callback. |
 
 ## The options object
 

__tests__/Option.test.js

@@ -0,0 +1,63 @@
+import renderer from 'react-test-renderer';
+import Option from '../src/Components/Option';
+
+const optionProps = {
+    tabIndex: '-1',
+    onMouseDown: () => {},
+};
+
+describe('Test Option component', () => {
+    test('Renders with default props', () => {
+        const component = renderer.create(
+            <Option
+                option={{
+                    name: 'Hamburger',
+                    value: 'hamburger',
+                }}
+                cls={(cls) => cls}
+                highlighted={false}
+                selected={false}
+                optionProps={optionProps}
+            />
+        );
+
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Highlighted', () => {
+        const component = renderer.create(
+            <Option
+                option={{
+                    name: 'Hamburger',
+                    value: 'hamburger',
+                }}
+                cls={(cls) => cls}
+                highlighted={true}
+                selected={false}
+                optionProps={optionProps}
+            />
+        );
+
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Selected', () => {
+        const component = renderer.create(
+            <Option
+                option={{
+                    name: 'Hamburger',
+                    value: 'hamburger',
+                }}
+                cls={(cls) => cls}
+                highlighted={false}
+                selected={true}
+                optionProps={optionProps}
+            />
+        );
+
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

__tests__/Options.test.js

@@ -0,0 +1,32 @@
+import renderer from 'react-test-renderer';
+import Options from '../src/Components/Options';
+import { countries } from './data';
+
+describe('Test Options component', () => {
+    test('Not found', () => {
+        const component = renderer.create(
+            <Options
+                options={[]}
+                cls={(cls) => cls}
+                emptyMessage="Not found"
+                optionProps={{
+                    tabIndex: '0',
+                    onMouseDown: () => {},
+                }}
+                snapshot={{
+                    highlighted: -1,
+                    option: null,
+                    focus: false,
+                    value: null,
+                }}
+            />
+        );
+
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        expect(component.root.findAllByType('li').length).toBe(1);
+        expect(component.root.findByType('li').props.className).toBe('not-found');
+        expect(component.root.findByType('li').props.children).toBe('Not found');
+    });
+});