♻️ (components) refactor useResponsive and move to comp. lib (#4568)

packages/component-library/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.4",
-    "react-aria-components": "^1.7.0"
+    "react-aria-components": "^1.7.0",
+    "usehooks-ts": "^3.0.1"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -15,6 +16,7 @@
     "react": "18.2.0"
   },
   "exports": {
+    "./hooks/*": "./src/hooks/*.ts",
     "./icons/logo": "./src/icons/logo/index.ts",
     "./icons/v0": "./src/icons/v0/index.ts",
     "./icons/v1": "./src/icons/v1/index.ts",

packages/component-library/src/hooks/useResponsive.ts

@@ -0,0 +1,23 @@
+import { useWindowSize } from 'usehooks-ts';
+
+import { breakpoints } from '../tokens';
+
+export function useResponsive() {
+  const { height, width } = useWindowSize({
+    debounceDelay: 250,
+  });
+
+  // Possible view modes: narrow, small, medium, wide
+  // To check if we're at least small width, check !isNarrowWidth
+  return {
+    // atLeastMediumWidth is provided to avoid checking (isMediumWidth || isWideWidth)
+    atLeastMediumWidth: width >= breakpoints.medium,
+    isNarrowWidth: width < breakpoints.small,
+    isSmallWidth: width >= breakpoints.small && width < breakpoints.medium,
+    isMediumWidth: width >= breakpoints.medium && width < breakpoints.wide,
+    // No atLeastWideWidth because that's identical to isWideWidth
+    isWideWidth: width >= breakpoints.wide,
+    height,
+    width,
+  };
+}