Fix lint issues

Author: mdubus

.eslintrc.js

@@ -7,5 +7,11 @@ module.exports = {
     'no-console': 0,
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'all',
+      },
+    ],
   },
 }

.prettierignore

@@ -0,0 +1,3 @@
+**/.cache/
+.github/
+**/dist/

.prettierrc

@@ -2,13 +2,5 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": false,
-  "singleQuote": true,
-  "overrides": [
-    {
-      "files": "*.scss",
-      "options": {
-        "singleQuote": true
-      }
-    }
-  ]
+  "singleQuote": true
 }

README.md

@@ -84,7 +84,7 @@ If you already have your own scraper but you still want to use MeiliSearch and `
         apiKey: 'XXX',
         indexUid: 'docs',
         inputSelector: '#search-bar-input',
-        debug: true // Set debug to true if you want to inspect the dropdown
+        debug: true, // Set debug to true if you want to inspect the dropdown
       })
     </script>
   </body>
@@ -154,7 +154,7 @@ docsSearchBar({
       const windowReference = window.open(suggestion.url, '_blank')
       windowReference.focus()
     }
-  }
+  },
 })
 ```
 
@@ -181,8 +181,8 @@ For example, you might want to increase the number of results displayed in the d
 ```javascript
 docsSearchBar({
   meilisearchOptions: {
-    limit: 10
-  }
+    limit: 10,
+  },
 })
 ```
 

playgrounds/html/index.html

@@ -40,7 +40,7 @@
           console.info(datasetNumber)
           console.info(context)
         },
-        debug: true // Set debug to true if you want to inspect the dropdown
+        debug: true, // Set debug to true if you want to inspect the dropdown
       })
     </script>
     <style>

src/lib/DocsSearchBar.js

@@ -89,7 +89,7 @@ class DocsSearchBar {
       this.autocompleteOptions.cssClasses.root || 'meilisearch-autocomplete'
     this.autocompleteOptions.keyboardShortcuts =
       this.parseHotkeysAutocompleteOptions(
-        this.autocompleteOptions.keyboardShortcuts
+        this.autocompleteOptions.keyboardShortcuts,
       ) || ['s', 191]
 
     this.isSimpleLayout = layout === 'simple'
@@ -124,18 +124,18 @@ class DocsSearchBar {
         `.${this.autocompleteOptions.cssClasses.prefix}-suggestions a`,
         (event) => {
           event.preventDefault()
-        }
+        },
       )
     }
 
     this.autocomplete.on(
       'autocomplete:selected',
-      this.handleSelected.bind(null, this.autocomplete.autocomplete)
+      this.handleSelected.bind(null, this.autocomplete.autocomplete),
     )
 
     this.autocomplete.on(
       'autocomplete:shown',
-      this.handleShown.bind(null, this.input)
+      this.handleShown.bind(null, this.input),
     )
 
     if (enhancedSearchInput) {
@@ -156,13 +156,13 @@ class DocsSearchBar {
 
     if (typeof args.inputSelector !== 'string') {
       throw new Error(
-        `Error: inputSelector:${args.inputSelector}  must be a string. Each selector must match only one element and separated by ','`
+        `Error: inputSelector:${args.inputSelector}  must be a string. Each selector must match only one element and separated by ','`,
       )
     }
 
     if (!DocsSearchBar.getInputFromSelector(args.inputSelector)) {
       throw new Error(
-        `Error: No input element in the page matches ${args.inputSelector}`
+        `Error: No input element in the page matches ${args.inputSelector}`,
       )
     }
   }
@@ -248,7 +248,7 @@ class DocsSearchBar {
         // eslint-disable-next-line no-param-reassign
         hit._formatted = utils.renameKeysWithLevels(
           cleanFormatted,
-          'hierarchy_'
+          'hierarchy_',
         )
       }
       const cleanHit = utils.replaceNullString(hit)
@@ -261,7 +261,7 @@ class DocsSearchBar {
       const groupedHitsByLvl1 = utils.groupBy(collection, 'lvl1')
       const flattenedHits = utils.flattenAndFlagFirst(
         groupedHitsByLvl1,
-        'isSubCategoryHeader'
+        'isSubCategoryHeader',
       )
       groupedHits[level] = flattenedHits
     })
@@ -281,7 +281,7 @@ class DocsSearchBar {
           utils.getHighlightedValue(hit, 'lvl6'),
         ])
         .join(
-          '<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
+          '<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>',
         )
       const text = utils.getSnippetedValue(hit, 'content')
       const isTextOrSubcategoryNonEmpty =

src/lib/__tests__/DocsSearchBar-test.js

@@ -183,7 +183,7 @@ describe('DocsSearchBar', () => {
         MeiliSearch.calledWith({
           host: 'https://test.getmeili.com',
           apiKey: 'apiKey',
-        })
+        }),
       ).toBe(true)
     })
     it('should instantiate autocomplete.js', () => {
@@ -212,7 +212,7 @@ describe('DocsSearchBar', () => {
           autoselect: true,
           ariaLabel: 'search input',
           keyboardShortcuts: ['s', 191],
-        })
+        }),
       ).toBe(true)
     })
     it('should listen to the selected and shown event of autocomplete', () => {
@@ -387,7 +387,7 @@ describe('DocsSearchBar', () => {
         }
         expect(client.index.calledWith('indexUID')).toBe(true)
         expect(
-          client.index('indexUid').search.calledWith('query', expectedParams)
+          client.index('indexUid').search.calledWith('query', expectedParams),
         ).toBe(true)
       })
     })
@@ -397,7 +397,7 @@ describe('DocsSearchBar', () => {
         // Given
         const actual = docsSearchBar.getAutocompleteSource(
           false,
-          (query) => `${query} modified`
+          (query) => `${query} modified`,
         )
 
         // When
@@ -415,7 +415,7 @@ describe('DocsSearchBar', () => {
         expect(
           client
             .index('indexUID')
-            .search.calledWith('query modified', expectedParams)
+            .search.calledWith('query modified', expectedParams),
         ).toBe(true)
         expect(client.index.calledWith('indexUID')).toBe(true)
       })
@@ -440,7 +440,7 @@ describe('DocsSearchBar', () => {
 
       return new Promise((resolve) => {
         expect(window.location.assign).toHaveBeenCalledWith(
-          'https://website.com/doc/page'
+          'https://website.com/doc/page',
         )
         resolve()
       })
@@ -475,7 +475,7 @@ describe('DocsSearchBar', () => {
         expect(customHandleSelected).toHaveBeenCalledWith(
           expectedInput,
           expectedEvent,
-          expectedSuggestion
+          expectedSuggestion,
         )
         resolve()
       })
@@ -527,7 +527,7 @@ describe('DocsSearchBar', () => {
           undefined, // Event
           mockSuggestion,
           undefined, // Dataset
-          mockContext
+          mockContext,
         )
 
         return new Promise((resolve) => {
@@ -552,7 +552,7 @@ describe('DocsSearchBar', () => {
           undefined, // Event
           undefined, // Suggestion
           undefined, // Dataset
-          mockContext
+          mockContext,
         )
 
         return new Promise((resolve) => {
@@ -580,7 +580,7 @@ describe('DocsSearchBar', () => {
       dsb.autocomplete.trigger('autocomplete:shown')
 
       expect($('.meilisearch-autocomplete').attr('class')).toEqual(
-        'meilisearch-autocomplete meilisearch-autocomplete-right'
+        'meilisearch-autocomplete meilisearch-autocomplete-right',
       )
     })
   })
@@ -861,7 +861,7 @@ describe('DocsSearchBar', () => {
         '<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
       // Then
       expect(actual[0].title).toEqual(
-        `Geo-search${separator}Foo${separator}Bar${separator}Baz`
+        `Geo-search${separator}Foo${separator}Bar${separator}Baz`,
       )
     })
     it('should concatenate highlighted elements', () => {

src/lib/utils.js

@@ -203,7 +203,7 @@ const utils = {
         // eslint-disable-next-line no-param-reassign
         item[flag] = index === 0
         return item
-      })
+      }),
     )
     return this.flatten(values)
   },

src/styles/_variables.scss

@@ -16,7 +16,7 @@ $searchbox-config: (
   icon-color: #6d7e96,
   icon-background: #458ee1,
   icon-background-opacity: 0,
-  icon-clear-size: 8px
+  icon-clear-size: 8px,
 ) !default;
 
 $searchbox-config-dark: (
@@ -27,7 +27,7 @@ $searchbox-config-dark: (
   placeholder-color: #bbbbbb,
   text-color: #eaeaea,
   icon-color: #6d7e96,
-  icon-background: #458ee1
+  icon-background: #458ee1,
 ) !default;
 
 // DROPDOWN
@@ -54,7 +54,7 @@ $dropdown-config: (
   highlight-opacity: 0.1,
   highlight-type: underline,
   suggestion-background-color: #f8f8f8,
-  hover-color-opacity: 0.05
+  hover-color-opacity: 0.05,
 ) !default;
 
 // Dropdown dark mode
@@ -69,7 +69,7 @@ $dropdown-config-dark: (
   border-color: #5b6369,
   highlight-color: #3881ff,
   suggestion-background-color: #6b7278,
-  hover-color-opacity: 0.5
+  hover-color-opacity: 0.5,
 ) !default;
 
 $builder-height: 260px;