feat: Support wildcard filtering in AutoComplete component (#594)

* feat: add wildcard search support to autocomplete component

Signed-off-by: jiwlee <[email protected]>

* feat: add wildcard filter option to AutoComplete in Storybook

Signed-off-by: jiwlee <[email protected]>

* chore: add [email protected]

Signed-off-by: jiwlee <[email protected]>

* refactor: replace manual regex with minimatch for pattern matching

Signed-off-by: jiwlee <[email protected]>

* feat: apply minimatch when props.wildcard is true

Signed-off-by: jiwlee <[email protected]>

* feat: update autocomplete to use glob options instead of wildcard

Signed-off-by: jiwlee <[email protected]>

* chore: update autocomplete story to use a predefined list of items

Signed-off-by: jiwlee <[email protected]>

---------

Signed-off-by: jiwlee <[email protected]>

Author: jiwlee97

package.json

@@ -25,6 +25,7 @@
         "core-js": "^3.32.1",
         "foundation-sites": "^6.4.3",
         "history": "^4.10.1",
+        "minimatch": "5.1.6",
         "prop-types": "^15.8.1",
         "react-autocomplete": "1.8.1",
         "react-form": "^2.16.0",

v2/components/autocomplete/autocomplete.stories.tsx

@@ -9,14 +9,41 @@ export default {
         items: {control: {type: 'object'}},
         inputStyle: {control: {disable: true}},
         placeholder: {control: {type: 'text'}},
+        glob: {control: {type: 'boolean'}},
     },
 };
 
-export const Primary = (args: any) => (
-    <div style={{width: '50%', paddingBottom: '6em'}}>
-        <Autocomplete {...args} items={['hello', 'world']} />
-    </div>
-);
+export const Primary = (args: any) => {
+    const [input, setInput] = React.useState('');
+
+    const items = [
+        'User',
+        'AppServer',
+        'AuthService',
+        'Backend',
+        'Cache',
+        'Config',
+        'Database',
+        'Frontend',
+        'Logger',
+        'utils.js',
+        'data-01.csv',
+        'data-02.csv',
+        'data-final.csv',
+        'src/index.js',
+        'src/components/Button.js',
+        'src/components/Input.ts',
+        'test/app.test.js',
+        '.env',
+        'README.md',
+    ];
+
+    return (
+        <div style={{width: '50%', paddingBottom: '6em'}}>
+            <Autocomplete {...args} items={items} value={input} onChange={(e) => setInput(e.target.value)} />
+        </div>
+    );
+};
 
 Primary.args = {
     placeholder: 'Type something here',

v2/components/autocomplete/autocomplete.tsx

@@ -5,6 +5,7 @@ import {Input, InputProps, SetInputFxn, useDebounce, useInput} from '../input/in
 import ThemeDiv from '../theme-div/theme-div';
 
 import './autocomplete.scss';
+import {Minimatch, IOptions} from 'minimatch';
 
 interface AutocompleteProps extends InputProps {
     inputref?: React.MutableRefObject<HTMLInputElement>;
@@ -53,6 +54,7 @@ export const RenderAutocomplete = (
         onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
         className?: string;
         style?: React.CSSProperties;
+        glob?: boolean | IOptions;
     }
 ) => {
     const [curItems, setCurItems] = React.useState(props.items || []);
@@ -80,9 +82,20 @@ export const RenderAutocomplete = (
     React.useEffect(() => {
         const filtered = (props.items || []).filter((i) => {
             if (i) {
+                const searchValue = debouncedVal?.toLowerCase() || '';
+
+                const useGlob = typeof props.glob === 'boolean' ? props.glob : !!props.glob;
+                const globOptions = typeof props.glob === 'boolean' ? null : props.glob;
+
+                const globMatcher = useGlob && searchValue ? new Minimatch(searchValue, globOptions) : null;
+
+                if (globMatcher) {
+                    return props.abbreviations !== undefined ? globMatcher.match(i) || globMatcher.match(props.abbreviations?.get(i) ?? '') : globMatcher.match(i);
+                }
+
                 return props.abbreviations !== undefined
-                    ? i.toLowerCase().includes(debouncedVal?.toLowerCase()) || props.abbreviations.get(i)?.includes(debouncedVal?.toLowerCase())
-                    : i.toLowerCase().includes(debouncedVal?.toLowerCase());
+                    ? i.toLowerCase().includes(searchValue) || props.abbreviations.get(i)?.toLowerCase().includes(searchValue)
+                    : i.toLowerCase().includes(searchValue);
             }
             return false;
         });

yarn.lock

@@ -3169,11 +3169,6 @@ ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
 
-ansi-regex@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
-  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
-
 ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
@@ -8374,6 +8369,13 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
 
+[email protected]:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -11175,13 +11177,6 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
-  dependencies:
-    ansi-regex "^3.0.0"
-
 strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -11190,7 +11185,6 @@ strip-ansi@^5.1.0:
     ansi-regex "^4.1.0"
 
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==