Merge #686

686: Add index.d.ts file for typescript compatible r=bidoubiwa a=hirohe

# Pull Request

## Related issue
Fixes #479

## What does this PR do?
- add `index.d.ts` types declare file
- add dependencies related to typescript and eslint config
- update .eslintrc.js file, with typescript related configs
- replace `no-unused-vars` with ``@typescript-eslint/no-unused-vars`` [refer](https://typescript-eslint.io/rules/no-unused-vars/)

there's some definitions unclear in `index.d.ts`
- ~`queryHook` dont know the arguments definitons~
- ~`handleSelected` dont know the arguments definitons~
- all methods of class DocsSearchBar should be defined ?

## PR checklist
Please check if your PR fulfills the following requirements:
- [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
- [x] Have you read the contributing guidelines?
- [x] Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!


Co-authored-by: hirohe <[email protected]>
Co-authored-by: hirohe <[email protected]>

Author: meili-bors[bot]

.eslintrc.js

@@ -10,7 +10,6 @@ module.exports = {
   plugins: ['prettier', 'cypress'],
   rules: {
     'no-console': 0,
-    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'prettier/prettier': [
       'error',
@@ -19,4 +18,34 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'algolia',
+        'algolia/jest',
+        'plugin:prettier/recommended',
+        'plugin:cypress/recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      plugins: ['prettier', 'cypress', '@typescript-eslint'],
+      rules: {
+        'no-console': 0,
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { argsIgnorePattern: '^_' },
+        ],
+        'eslint-comments/disable-enable-pair': [
+          'error',
+          { allowWholeFile: true },
+        ],
+        'prettier/prettier': [
+          'error',
+          {
+            trailingComma: 'all',
+          },
+        ],
+      },
+    },
+  ],
 }

index.d.ts

@@ -0,0 +1,91 @@
+/* eslint camelcase: ["off"] */
+
+import { SearchResponse, SearchParams, Hits, Config } from 'meilisearch'
+
+interface HitResponse {
+  anchor: string
+  content: string
+  hierarchy_lvl0: string | null
+  hierarchy_lvl1: string | null
+  hierarchy_lvl2: string | null
+  hierarchy_lvl3: string | null
+  hierarchy_lvl4: string | null
+  hierarchy_lvl5: string | null
+  hierarchy_lvl6: string | null
+  objectID: string
+  url: string
+  [key: string]: unknown
+}
+
+interface DefaultFormattedHit {
+  isLvl0: boolean
+  isLvl1: boolean
+  isLbl2: boolean
+  isLvl1EmptyOrDuplicate: boolean
+  isCategoryHeader: boolean
+  isSubCategoryHeader: boolean
+  isTextOrSubcategoryNonEmpty: boolean
+  subcategory: string | null
+  text: string | null
+  title: string | null
+  url: string | null
+}
+
+interface AutoCompleteInput {
+  open: () => void
+  close: () => void
+  destroy: () => void
+  getWrapper: () => Element
+  getVal: () => string
+  setVal: (val: string) => void
+}
+
+interface Options<FormattedHit = DefaultFormattedHit> {
+  hostUrl: string
+  apiKey: string
+  indexUid: string
+  inputSelector?: string
+  inputElement?: Element
+  debug?: boolean
+  meilisearchOptions?: SearchParams
+  queryDataCallback?: (data?: SearchResponse) => void
+  autocompleteOptions?: {
+    ariaLabel?: string
+    cssClasses?: {
+      prefix?: string
+      root?: string
+    }
+    keyboardShortcuts?: (string | number)[]
+  }
+  transformData?: (hits: Hits<HitResponse>) => Hits<FormattedHit>
+  queryHook?: (query: string) => string
+  handleSelected?: (
+    input: AutoCompleteInput,
+    event: Event,
+    suggestion: FormattedHit,
+    datasetNumber: number,
+    context: {
+      selectionMethod: 'click' | 'blur' | 'enterKey' | 'tabKey' | string
+    },
+  ) => void
+  enhancedSearchInput?: boolean
+  layout?: 'column' | 'simple'
+  enableDarkMode?: boolean | 'auto'
+  clientAgents?: Config['clientAgents']
+}
+
+declare class DocsSearchBar<FormattedHit> {
+  constructor(options: Options<FormattedHit>)
+}
+
+declare global {
+  interface Window {
+    docsSearchBar: <FormattedHit = DefaultFormattedHit>(
+      options: Options<FormattedHit>,
+    ) => void
+  }
+}
+
+export default function docsSearchBar<FormattedHit = DefaultFormattedHit>(
+  options: Options<FormattedHit>,
+): DocsSearchBar<FormattedHit>

package.json

@@ -9,6 +9,7 @@
     "search-as-you-type"
   ],
   "main": "dist/npm/index.js",
+  "typings": "./index.d.ts",
   "scripts": {
     "build": "./scripts/build",
     "build:css": "./scripts/build-css",
@@ -36,6 +37,8 @@
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.19.4",
     "@babel/register": "^7.18.9",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.0.2",
@@ -47,6 +50,7 @@
     "eslint": "^7.21.0",
     "eslint-config-algolia": "^16.0.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-config-typescript": "^3.0.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.22.0",
@@ -59,6 +63,7 @@
     "pretty-bytes-cli": "^2.0.0",
     "sass": "^1.56.1",
     "sinon": "^14.0.2",
+    "typescript": "^4.9.3",
     "uglify-js": "^3.17.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"