chore(tooling): add husky and lint-staged

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

@@ -1 +1,13 @@
-**/public/**/*
+**/build
+**/public
+**/package.json
+**/.eslintrc.cjs
+**/tsconfig.json
+
+.husky
+.prettierignore
+lint-staged.config.js
+package.json
+package-lock.json
+prettier.config.cjs
+tsconfig.json

lint-staged.config.js

@@ -0,0 +1,7 @@
+const config = {
+  "remix/*.{ts,tsx}": () => "tsc -p remix/tsconfig.json --noEmit",
+  "rte/*.{ts,tsx}": () => "tsc -p rte/tsconfig.json --noEmit",
+  "*": "prettier --write",
+}
+
+export default config

package-lock.json

@@ -29,6 +29,8 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "husky": "^9.0.11",
+        "lint-staged": "^15.2.2",
         "prettier": "^3.2.5",
         "typescript": "^5.1.6",
         "vite": "^5.1.0",
@@ -4276,6 +4278,18 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.1.tgz",
+      "integrity": "sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -5198,6 +5212,72 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -5291,6 +5371,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -7532,6 +7618,18 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
+      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -7909,6 +8007,21 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8902,6 +9015,296 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/lint-staged": {
+      "version": "15.2.2",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.2.tgz",
+      "integrity": "sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "5.3.0",
+        "commander": "11.1.0",
+        "debug": "4.3.4",
+        "execa": "8.0.1",
+        "lilconfig": "3.0.0",
+        "listr2": "8.0.1",
+        "micromatch": "4.0.5",
+        "pidtree": "0.6.0",
+        "string-argv": "0.3.2",
+        "yaml": "2.3.4"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/lint-staged/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/lint-staged/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/lilconfig": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+      "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/lint-staged/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.1.tgz",
+      "integrity": "sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.0.0",
+        "rfdc": "^1.3.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
@@ -8991,6 +9394,172 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/log-update": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz",
+      "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^6.2.0",
+        "cli-cursor": "^4.0.0",
+        "slice-ansi": "^7.0.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/cli-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/restore-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -12082,6 +12651,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
+      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
+      "dev": true
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -12570,6 +13145,46 @@
       "resolved": "https://registry.npmjs.org/sleep-promise/-/sleep-promise-8.0.1.tgz",
       "integrity": "sha512-nfwyX+G1dsx2R1DMMKWLpNxuHMOCL7JIRBUw0fl7Z4nZ1YZK0apZuGY8MDexn0HDZzgbERgj/CrNtsYpo/B7eA=="
     },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -12699,6 +13314,15 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",

package.json

@@ -2,6 +2,7 @@
   "name": "@scandichotels/contentstack-imagevault",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "description": "Integration between Contentstack and ImageVault",
   "workspaces": [
     "remix",
@@ -13,7 +14,8 @@
     "build:rte": "cd rte && npm run build",
     "dev": "concurrently npm:dev:*",
     "dev:remix": "cd remix && npm run dev",
-    "dev:rte": "cd rte && npm run dev"
+    "dev:rte": "cd rte && npm run dev",
+    "prepare": "husky"
   },
   "dependencies": {
     "@contentstack/app-sdk": "^2.0.1",
@@ -33,6 +35,8 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",

remix/.prettierignore

@@ -1,11 +0,0 @@
-# Directories
-build
-public
-
-# Files
-.eslintrc.cjs
-.prettierignore
-package.json
-package-lock.json
-prettier.config.cjs
-tsconfig.json

rte/.eslintrc.cjs

@@ -8,8 +8,8 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 'latest',
+    ecmaVersion: "latest",
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
@@ -19,38 +19,38 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ['node_modules/**/*'],
+  ignorePatterns: ["node_modules/**/*"],
 
   // Base config
-  extends: ['eslint:recommended'],
+  extends: ["eslint:recommended"],
 
   overrides: [
     // React
     {
-      files: ['**/*.{js,jsx,ts,tsx}'],
+      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ['react', 'jsx-a11y'],
+      plugins: ["react", "jsx-a11y"],
       rules: {
-        'react/jsx-uses-vars': 'error',
+        "react/jsx-uses-vars": "error",
-        'react/jsx-uses-react': 'error',
+        "react/jsx-uses-react": "error",
       },
       extends: [
-        'plugin:react/recommended',
+        "plugin:react/recommended",
-        'plugin:react/jsx-runtime',
+        "plugin:react/jsx-runtime",
-        'plugin:react-hooks/recommended',
+        "plugin:react-hooks/recommended",
-        'plugin:jsx-a11y/recommended',
+        "plugin:jsx-a11y/recommended",
       ],
       settings: {
         react: {
-          version: 'detect',
+          version: "detect",
         },
-        formComponents: ['Form'],
+        formComponents: ["Form"],
         linkComponents: [
-          { name: 'Link', linkAttribute: 'to' },
+          { name: "Link", linkAttribute: "to" },
-          { name: 'NavLink', linkAttribute: 'to' },
+          { name: "NavLink", linkAttribute: "to" },
         ],
-        'import/resolver': {
+        "import/resolver": {
           typescript: {
-            project: './rte/tsconfig.json',
+            project: "./rte/tsconfig.json",
           },
         },
       },
@@ -58,14 +58,14 @@ module.exports = {
 
     // Typescript
     {
-      files: ['**/*.{ts,tsx}'],
+      files: ["**/*.{ts,tsx}"],
-      plugins: ['@typescript-eslint', 'import'],
+      plugins: ["@typescript-eslint", "import"],
-      parser: '@typescript-eslint/parser',
+      parser: "@typescript-eslint/parser",
       settings: {
-        'import/internal-regex': '^~/',
+        "import/internal-regex": "^~/",
-        'import/resolver': {
+        "import/resolver": {
           node: {
-            extensions: ['.ts', '.tsx'],
+            extensions: [".ts", ".tsx"],
           },
           typescript: {
             alwaysTryTypes: true,
@@ -73,18 +73,18 @@ module.exports = {
         },
       },
       extends: [
-        'plugin:@typescript-eslint/recommended',
+        "plugin:@typescript-eslint/recommended",
-        'plugin:import/recommended',
+        "plugin:import/recommended",
-        'plugin:import/typescript',
+        "plugin:import/typescript",
       ],
     },
 
     // Node
     {
-      files: ['.eslintrc.cjs'],
+      files: [".eslintrc.cjs"],
       env: {
         node: true,
       },
     },
   ],
-};
+}

rte/.prettierignore

@@ -1,7 +0,0 @@
-# Files
-.eslintrc.cjs
-.prettierignore
-package.json
-package-lock.json
-prettier.config.cjs
-tsconfig.json

rte/prettier.config.cjs

@@ -1,8 +0,0 @@
-module.exports = {
-  semi: false,
-  trailingComma: "es5",
-  singleQuote: false,
-  printWidth: 80,
-  tabWidth: 2,
-  endOfLine: "lf",
-}

types/contentstack.ts

@@ -1,11 +1,11 @@
-import { Lang } from './lang';
+import { Lang } from "./lang"
 
 // This type is only a partial of the data available.
 export type ContentstackPluginDefinition = {
-  type: 'field' | 'rte_plugin';
+  type: "field" | "rte_plugin"
-  title: string;
+  title: string
-  src: string;
+  src: string
-};
+}
 
 // This type is only a partial of the data available.
 // Check console when editing an entry for all the data available.
@@ -13,48 +13,48 @@ export type ContentstackPluginDefinition = {
 // Extend this if needed.
 export type ContentstackEmbeddedData = {
   entryMetadata: {
-    contentTypeUid: string;
+    contentTypeUid: string
-    entryUid: string;
+    entryUid: string
-    locale: Lang;
+    locale: Lang
-  };
+  }
   utilis: {
     content_type: {
       schema: Array<
         | {
-            uid: string;
+            uid: string
-            data_type: "text";
+            data_type: "text"
-            value: string;
+            value: string
           }
         | {
-            uid: string;
+            uid: string
-            data_type: "json";
+            data_type: "json"
-            value: unknown;
+            value: unknown
           }
-      >;
+      >
-    };
+    }
-    extensions: ContentstackPluginDefinition[];
+    extensions: ContentstackPluginDefinition[]
-  };
+  }
   requestProps: {
     stack: {
-      api_key: string;
+      api_key: string
-    };
+    }
-    branch: string;
+    branch: string
-  };
+  }
-};
+}
 
 // This is our version of the required fields we need that are available in ContentstackEmbeddedData
 export type ExtractedContentstackEmbeddedData = {
   contentType: {
-    uid: string;
+    uid: string
-  };
+  }
   entry: {
-    locale: Lang;
+    locale: Lang
-    title: string;
+    title: string
-    uid: string;
+    uid: string
-  };
+  }
-  plugin: ContentstackPluginDefinition;
+  plugin: ContentstackPluginDefinition
   stack: {
-    apiKey: string;
+    apiKey: string
-  };
+  }
-  branch: string;
+  branch: string
-};
+}

types/imagevault.ts

@@ -10,20 +10,20 @@
 declare global {
   interface Window {
     ImageVault: {
-      InsertMediaWindow: typeof InsertMediaWindow;
+      InsertMediaWindow: typeof InsertMediaWindow
-    };
+    }
-    iframeRef: HTMLElement | null;
+    iframeRef: HTMLElement | null
   }
 }
 
 export declare class InsertMediaWindow {
-  constructor(config: Config, windowOptions: string);
+  constructor(config: Config, windowOptions: string)
-  openImageVault: () => void;
+  openImageVault: () => void
-  containerWindow: Window | null;
+  containerWindow: Window | null
 }
 
 export interface IInsertSuccessCallback {
-  (message: InsertSuccessMessageEvent): void;
+  (message: InsertSuccessMessageEvent): void
 }
 
 /**
@@ -33,33 +33,33 @@ export interface InsertSuccessMessageEvent extends MessageEvent {
   /**
    * The response from the ImageVault insert operation
    */
-  data: string;
+  data: string
   /**
    * The response from the ImageVault insert operation
    */
-  response: InsertResponse;
+  response: InsertResponse
 }
 
 export type MetaData = {
-  DefinitionType?: number;
+  DefinitionType?: number
-  Description: string | null;
+  Description: string | null
-  LanguageId: null;
+  LanguageId: null
-  MetadataDefinitionId: number;
+  MetadataDefinitionId: number
-  Name: string;
+  Name: string
-  Value: string;
+  Value: string
-};
+}
 
 export type ImageVaultAsset = {
-  id: number;
+  id: number
-  title: string;
+  title: string
-  url: string;
+  url: string
   dimensions: {
-    width: number;
+    width: number
-    height: number;
+    height: number
-    aspectRatio: number;
+    aspectRatio: number
-  };
+  }
-  meta: { alt: string | undefined; caption: string | undefined };
+  meta: { alt: string | undefined; caption: string | undefined }
-};
+}
 
 /**
  * The response from ImageVault when inserting an asset
@@ -68,29 +68,29 @@ export declare class InsertResponse {
   /**
    * The media item id of the asset
    */
-  Id: number;
+  Id: number
   /**
    * The id of the vault where the asset resides
    */
-  VaultId: number;
+  VaultId: number
   /**
    * The name of the asset
    */
-  Name: string;
+  Name: string
   /**
    * The conversion selected by the user. Is an array but will only contain one object
    */
-  MediaConversions: MediaConversion[];
+  MediaConversions: MediaConversion[]
   /**
    * Date when the asset was added to ImageVault
    */
-  DateAdded: string;
+  DateAdded: string
   /**
    * Name of the user that added the asset to ImageVault
    */
-  AddedBy: string;
+  AddedBy: string
 
-  Metadata?: MetaData[] | undefined;
+  Metadata?: MetaData[] | undefined
 }
 
 /**
@@ -100,51 +100,51 @@ export declare class MediaConversion {
   /**
    * The url to the conversion
    */
-  Url: string;
+  Url: string
   /**
    * Name of the conversion
    */
-  Name: string;
+  Name: string
   /**
    * Html representing the conversion
    */
-  Html: string;
+  Html: string
   /**
    * Content type of the conversion
    */
-  ContentType: string;
+  ContentType: string
   /**
    * Width, in pixels, of the conversion
    */
-  Width: number;
+  Width: number
   /**
    * Height, in pixels, of the conversion
    */
-  Height: number;
+  Height: number
   /**
    * Aspect ratio of the conversion
    */
-  AspectRatio: number;
+  AspectRatio: number
   /**
    * Width of the selected/requested format
    */
-  FormatWidth: number;
+  FormatWidth: number
   /**
    * Height of the selected/requested format
    */
-  FormatHeight: number;
+  FormatHeight: number
   /**
    * Aspect ratio of the selected/requested format
    */
-  FormatAspectRatio: number;
+  FormatAspectRatio: number
   /**
    * Name of the media format
    */
-  MediaFormatName: string;
+  MediaFormatName: string
   /**
    * Id of the selected media format
    */
-  MediaFormatId: number;
+  MediaFormatId: number
 }
 /**
  * Defines where an ImageVault asset is used when requesting it
@@ -153,15 +153,15 @@ export declare class PublishDetails {
   /**
    * The textual description on where an asset is used
    */
-  text: string;
+  text: string
   /**
    * The url to where the asset is used
    */
-  url: string;
+  url: string
   /**
    * An optional id for grouping usage
    */
-  groupId?: string;
+  groupId?: string
 }
 
 /**
@@ -171,73 +171,73 @@ export declare class Config {
   /**
    * The url to the ImageVault ui that should be used
    */
-  imageVaultUiUrl: string;
+  imageVaultUiUrl: string
   /**
    * [Optional] Origin where the insert function is launched from. Is normally calculated and does not need to be supplied.
    */
-  origin?: string;
+  origin?: string
   /**
    * The language that the ImageVault ui should be displayed in
    */
-  uiLang: string;
+  uiLang: string
   /**
    * [Optional] The language for the default content in ImageVault
    */
-  pageLang?: string;
+  pageLang?: string
   /**
    * The publishingSource where the image should be used. Normally the url for the site.
    */
-  publishingSource: string;
+  publishingSource: string
   /**
    * If it should be possible to select multiple assets from ImageVault. Default is false.
    */
-  insertMultiple: boolean;
+  insertMultiple: boolean
   /**
    * The url base that the media assets should use. Supply the url to a cdn.
    */
-  mediaUrlBase: string;
+  mediaUrlBase: string
   /**
    * The ids of the formats that the selection should result in.
    */
-  formatId: string;
+  formatId: string
   /**
    * [Optional] The comma-separated id-list of additional metadata definitions that the selection should result in.
    */
-  additionalMetadataIds?: string;
+  additionalMetadataIds?: string
   /**
    * The publishDetails to use. If supplied, published urls are returned.
    */
-  publishDetails?: PublishDetails;
+  publishDetails?: PublishDetails
   /**
    * Function that is invoked when the user insert items from ImageVault
    */
-  success: IInsertSuccessCallback;
+  success: IInsertSuccessCallback
   /**
    * This function is called when the Insert window should be closed
    */
-  close: (result: unknown) => void;
+  close: (result: unknown) => void
   /**
    * [Optional] This function is called whenever an error is encountered
    */
-  error?: (result: unknown, errorMessage: string) => void;
+  error?: (result: unknown, errorMessage: string) => void
   /**
    * [Optional] Listen on this method for debug messages
    */
-  debug?: (result: unknown) => void;
+  debug?: (result: unknown) => void
 
   /**
    * [Optional] Set media url to edit existing media
    */
-  mediaUrl?: string;
+  mediaUrl?: string
   /**
    * [Optional] Set media id to show specific media
    */
-  mediaId?: number;
+  mediaId?: number
 
   /**
    * [Optional]
    * @0 (Default) Insert with format or choose format from dropdown in ImageVault UI
    * @1 Same as 0 (default) except that you can edit media in editor before insert
    */
-  insertMode?: number;
+  insertMode?: number
 }

types/lang.ts

@@ -1,10 +1,10 @@
 export const langEnum = {
-  en: 'en',
+  en: "en",
-  sv: 'sv',
+  sv: "sv",
-  no: 'no',
+  no: "no",
-  fi: 'fi',
+  fi: "fi",
-  da: 'da',
+  da: "da",
-  de: 'de',
+  de: "de",
-} as const;
+} as const
 
-export type Lang = keyof typeof langEnum;
+export type Lang = keyof typeof langEnum

utils/imagevault.ts

@@ -1,13 +1,13 @@
-import { langEnum } from '../types/lang';
+import { langEnum } from "../types/lang"
 
-import type { GenericObjectType } from '@contentstack/app-sdk/dist/src/types/common.types';
+import type { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
-import type { Lang } from '../types/lang';
+import type { Lang } from "../types/lang"
 import type {
   Config,
   ImageVaultAsset,
   InsertResponse,
   PublishDetails,
-} from "../types/imagevault";
+} from "../types/imagevault"
 
 const metaIds = {
   [langEnum.de]: { altText: 68, title: 77 },
@@ -16,20 +16,20 @@ const metaIds = {
   [langEnum.no]: { altText: 71, title: 79 },
   [langEnum.sv]: { altText: 74, title: 82 },
   [langEnum.en]: { altText: 69, title: 65 },
-};
+}
 
 export function getMetaIds(lang: Lang) {
-  return metaIds[lang];
+  return metaIds[lang]
 }
 
 export type EntryDataPublishDetails = {
-  branch: string;
+  branch: string
-  contentTypeUid: string;
+  contentTypeUid: string
-  locale: Lang;
+  locale: Lang
-  stackApiKey: string;
+  stackApiKey: string
-  title: string;
+  title: string
-  uid: string;
+  uid: string
-};
+}
 
 export function getPublishDetails(
   baseUrl: string,
@@ -42,28 +42,28 @@ export function getPublishDetails(
     uid,
   }: EntryDataPublishDetails
 ): PublishDetails {
-  const text = `${title} (${uid})`;
+  const text = `${title} (${uid})`
-  const url = `${baseUrl}#!/stack/${stackApiKey}/content-type/${contentTypeUid}/${locale}/entry/${uid}/edit?branch=${branch}`;
+  const url = `${baseUrl}#!/stack/${stackApiKey}/content-type/${contentTypeUid}/${locale}/entry/${uid}/edit?branch=${branch}`
 
-  return { text, url };
+  return { text, url }
 }
 
 export function isInsertResponse(
   res: InsertResponse | GenericObjectType
 ): res is InsertResponse {
-  return (res as InsertResponse).MediaConversions !== undefined;
+  return (res as InsertResponse).MediaConversions !== undefined
 }
 
 export type ImageVaultDAMConfig = {
-  imageVaultUrl: string;
+  imageVaultUrl: string
-  baseUrl: string;
+  baseUrl: string
-  formatId: string;
+  formatId: string
-};
+}
 
 export function isImageVaultDAMConfig(
   config: Record<string, string>
 ): config is ImageVaultDAMConfig {
-  return !!(config.baseUrl && config.formatId && config.imageVaultUrl);
+  return !!(config.baseUrl && config.formatId && config.imageVaultUrl)
 }
 
 // Utility function to convert InsertResponse to ImageVaultAsset, used mainly for custom field images
@@ -74,11 +74,11 @@ export function insertResponseToImageVaultAsset(
 ): ImageVaultAsset {
   const alt = response.Metadata?.find((meta) =>
     meta.Name.includes("AltText_")
-  )?.Value;
+  )?.Value
 
   const caption = response.Metadata?.find((meta) =>
     meta.Name.includes("Title_")
-  )?.Value;
+  )?.Value
 
   return {
     url: response.MediaConversions[0].Url,
@@ -93,15 +93,15 @@ export function insertResponseToImageVaultAsset(
       height: response.MediaConversions[0].Height,
       aspectRatio: response.MediaConversions[0].FormatAspectRatio,
     },
-  };
+  }
 }
 
 export type openImageVaultParams = {
-  config: ImageVaultDAMConfig;
+  config: ImageVaultDAMConfig
-  entryData: EntryDataPublishDetails;
+  entryData: EntryDataPublishDetails
-  onSuccess: (result: InsertResponse) => void;
+  onSuccess: (result: InsertResponse) => void
-  onClose?: () => void;
+  onClose?: () => void
-};
+}
 
 export function openImageVault({
   config,
@@ -110,8 +110,8 @@ export function openImageVault({
   onClose,
 }: openImageVaultParams) {
   if (window.ImageVault) {
-    const publishDetails = getPublishDetails(config.baseUrl, entryData);
+    const publishDetails = getPublishDetails(config.baseUrl, entryData)
-    const metaIdsForLocale = getMetaIds(entryData.locale);
+    const metaIdsForLocale = getMetaIds(entryData.locale)
 
     const insertMediaWindowOptions: Config = {
       imageVaultUiUrl: config.imageVaultUrl,
@@ -123,27 +123,27 @@ export function openImageVault({
       publishDetails,
       insertMultiple: false,
       success: (result) => {
-        onSuccess(result.response);
+        onSuccess(result.response)
       },
       close: () => {
         if (typeof onClose === "function") {
-          onClose();
+          onClose()
         }
-        windowInserter.containerWindow?.close();
+        windowInserter.containerWindow?.close()
       },
-    };
+    }
 
     if (metaIdsForLocale) {
-      const additionalMetadataIds = Object.values(metaIdsForLocale).join(",");
+      const additionalMetadataIds = Object.values(metaIdsForLocale).join(",")
-      insertMediaWindowOptions.additionalMetadataIds = additionalMetadataIds;
+      insertMediaWindowOptions.additionalMetadataIds = additionalMetadataIds
     }
 
     const windowInserter = new window.ImageVault.InsertMediaWindow(
       insertMediaWindowOptions,
       `left=0,top=0,width=${window.screen.width},height=${window.screen.height}`
-    );
+    )
-    windowInserter.openImageVault();
+    windowInserter.openImageVault()
   } else {
-    console.error("Missing ImageVault global. ImageVault script not loaded?");
+    console.error("Missing ImageVault global. ImageVault script not loaded?")
   }
 }