cleanup: lint CI with configs

Author: SaraVieira

.github/workflows/ts-sdk-gh-pages.yml

@@ -3,8 +3,6 @@ name: Deploy TS-SDK docs to github pages
 on:
   push:
     branches: ["main"]
-  pull_request:
-    branches: ["main"]
 
 jobs:
   build:

clients/search-component/.eslintrc.json

@@ -25,6 +25,53 @@ export const trieve = new TrieveSDK({
 });
 ```
 
+And then you can use any of the two components in your React application or as web component:
+
+### Search Modal
+
+<details>
+<summary>Screenshots</summary>
+
+![light closed](./github/modal-light-1.png)
+![dark closed](./github/modal-dark-1.png)
+![light open](./github/modal-light-2.png)
+
+</details>
+
+#### Usage in React:
+
+```jsx
+<TrieveModalSearch trieve={trieve} />
+```
+
+#### Usage in Web Components:
+
+```html
+<trieve-modal-search trieve="<your trieve instance>" />
+```
+
+### Search Results
+
+<details>
+<summary>Screenshots</summary>
+
+![light](./github/search-light.png)
+![dark](./github/search-dark.png)
+
+</details>
+
+#### Usage in React:
+
+```jsx
+<TrieveSearch trieve={trieve} />
+```
+
+#### Usage in Web Components:
+
+```html
+<trieve-search trieve="<your trieve instance>" />
+```
+
 ## License
 
 MIT

clients/search-component/README.md

@@ -0,0 +1,10 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  { ignores: ["**/*.js", "**/*.cjs"] }
+);

clients/search-component/eslint.config.mjs

@@ -7,27 +7,30 @@
     "dist/*",
     "dist/**/*"
   ],
-  "version": "0.0.1",
+  "version": "0.0.1-rc1",
   "license": "MIT",
   "scripts": {
     "dev": "run-p watch:css watch:js",
     "watch:css": "npx postcss src/app.css -o dist/app.css --watch",
     "watch:js": "node ./scripts/watch.js",
-    "lint": "eslint 'src/**/*.ts'",
+    "lint": "eslint",
     "build:clean": "rm tsconfig.tsbuildinfo && rm -rf dist && yarn type:gen && yarn build",
     "build": "run-s build:src build:css type:dts",
     "build:src": "node ./scripts/build.js",
     "type:dts": "tsc --emitDeclarationOnly --declarationMap",
     "build:css": "npx postcss src/app.css -o dist/app.css "
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.1",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/eslint__js": "^8.42.3",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "esbuild": "^0.23.1",
     "esbuild-node-externals": "^1.14.0",
     "esbuild-register": "^3.6.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-react": "^7.35.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.41",
@@ -38,7 +41,8 @@
     "react-dom": "^18.3.1",
     "tailwind": "^4.0.0",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.3.0"
   },
   "dependencies": {
     "@r2wc/react-to-web-component": "^2.0.3",

clients/search-component/github/modal-dark-1.png

@@ -65,30 +65,29 @@ body {
         @apply font-normal text-xs text-zinc-600;
       }
     }
-  }
-
-  &.dark {
-    .kbd-wrapper {
-      kbd {
-        @apply border-zinc-400  text-zinc-400;
+    &.dark {
+      .kbd-wrapper {
+        kbd {
+          @apply border-zinc-400  text-zinc-400;
+        }
       }
-    }
 
-    @apply text-white bg-zinc-900;
+      @apply text-white bg-zinc-900;
 
-    input {
-      @apply bg-zinc-900 text-zinc-50 ring-zinc-700;
-    }
+      input {
+        @apply bg-zinc-900 text-zinc-50 ring-zinc-700;
+      }
 
-    .input-wrapper {
-      @apply bg-zinc-900;
-    }
+      .input-wrapper {
+        @apply bg-zinc-900;
+      }
 
-    .item {
-      @apply hover:bg-zinc-800 border-zinc-700 focus:bg-zinc-800 bg-zinc-900;
+      .item {
+        @apply hover:bg-zinc-800 border-zinc-700 focus:bg-zinc-800 bg-zinc-900;
 
-      .description {
-        @apply text-zinc-400;
+        .description {
+          @apply text-zinc-400;
+        }
       }
     }
   }

clients/search-component/github/modal-light-1.png

@@ -56,15 +56,19 @@ export const TrieveModalSearch = ({
 
   const onUpOrDownClicked = (index: number, code: string) => {
     if (code === "ArrowDown") {
-      index < results.length - 1
-        ? document.getElementById(`trieve-search-item-${index + 1}`)?.focus()
-        : document.getElementById(`trieve-search-item-0`)?.focus();
+      if (index < results.length - 1) {
+        document.getElementById(`trieve-search-item-${index + 1}`)?.focus();
+      } else {
+        document.getElementById(`trieve-search-item-0`)?.focus();
+      }
     }
 
     if (code === "ArrowUp") {
-      index > 0
-        ? document.getElementById(`trieve-search-item-${index - 1}`)?.focus()
-        : inputRef.current?.focus();
+      if (index > 0) {
+        document.getElementById(`trieve-search-item-${index - 1}`)?.focus();
+      } else {
+        inputRef.current?.focus();
+      }
     }
   };
 

clients/search-component/github/modal-light-2.png

@@ -17,6 +17,7 @@ export const Item = ({
   onUpOrDownClicked,
 }: Props) => {
   const Component = item.chunk.link ? "a" : "button";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
   const title =
     item.chunk.metadata?.title ||

clients/search-component/github/search-dark.png

@@ -34,6 +34,7 @@ export const TrieveSearch = ({
             } else {
               onResultClick?.(state.selectedItem?.chunk as Chunk);
             }
+            return state;
           }
           case useCombobox.stateChangeTypes.InputBlur: {
             return {