Add usehooks-ts (#58341)

* Add usehooks-ts

* Add ESLint rules to restrict usage of useResizeObserver and useCopyToClipboard

package.json

@@ -92,6 +92,7 @@
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.19",
     "tslib": "^2.8.1",
+    "usehooks-ts": "^3.1.1",
     "use-immer": "^0.11.0",
     "whatwg-fetch": "^3.6.20"
   },

pnpm-lock.yaml

@@ -108,6 +108,9 @@ importers:
       use-immer:
         specifier: ^0.11.0
         version: 0.11.0(immer@10.1.1)(react@19.1.1)
+      usehooks-ts:
+        specifier: ^3.1.1
+        version: 3.1.1(react@19.1.1)
       whatwg-fetch:
         specifier: ^3.6.20
         version: 3.6.20
@@ -6642,6 +6645,12 @@ packages:
       '@types/react':
         optional: true
 
+  usehooks-ts@3.1.1:
+    resolution: {integrity: sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==}
+    engines: {node: '>=16.15.0'}
+    peerDependencies:
+      react: ^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   utf8-byte-length@1.0.5:
     resolution: {integrity: sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==}
 
@@ -14256,6 +14265,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
+  usehooks-ts@3.1.1(react@19.1.1):
+    dependencies:
+      lodash.debounce: 4.0.8
+      react: 19.1.1
+
   utf8-byte-length@1.0.5: {}
 
   util-deprecate@1.0.2: {}

web/packages/build/eslint.config.mjs

@@ -242,5 +242,36 @@ export default tseslint.config(
         },
       ],
     },
+  },
+
+  /*
+   * Restricted hook imports
+   *
+   * We already have our own, Electron and browser safe hooks, so we don't want any usage of the equivalent
+   * hooks from `usehooks-ts`
+   */
+  {
+    files: ['e/web/**/*.{ts,tsx,js,jsx}', 'web/packages/**/*.{ts,tsx,js,jsx}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'usehooks-ts',
+              importNames: ['useResizeObserver'],
+              message:
+                "Use 'useResizeObserver' from 'design/utils/useResizeObserver' instead.",
+            },
+            {
+              name: 'usehooks-ts',
+              importNames: ['useCopyToClipboard'],
+              message:
+                "Use 'copyToClipboard' from 'design/utils/copyToClipboard' instead.",
+            },
+          ],
+        },
+      ],
+    },
   }
 );