From dd9058b7983e8ebb2d17c495bcc267cd465aec57 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sun, 8 Feb 2026 13:31:58 +0700 Subject: [PATCH] rm two packages for hooks (#251) * rm two packages for hooks * fix navigation --- package-lock.json | 262 +----------------- package.json | 2 - .../Navigation/MobileNavigation.tsx | 9 +- src/hooks/useDarkTheme.ts | 4 +- src/hooks/useLockBodyScroll.test.ts | 40 +++ src/hooks/useLockBodyScroll.ts | 16 ++ src/hooks/useMediaQuery.test.ts | 57 ++++ src/hooks/useMediaQuery.ts | 13 + src/hooks/useMobile.ts | 4 +- src/hooks/useReducedMotion.ts | 4 +- src/hooks/useToggle.test.ts | 37 +++ src/hooks/useToggle.ts | 8 + src/ui/Overlay/index.tsx | 4 +- 13 files changed, 188 insertions(+), 272 deletions(-) create mode 100644 src/hooks/useLockBodyScroll.test.ts create mode 100644 src/hooks/useLockBodyScroll.ts create mode 100644 src/hooks/useMediaQuery.test.ts create mode 100644 src/hooks/useMediaQuery.ts create mode 100644 src/hooks/useToggle.test.ts create mode 100644 src/hooks/useToggle.ts diff --git a/package-lock.json b/package-lock.json index 4f6cdcf7..f031ee6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,11 +20,9 @@ "react": "^18.3.0", "react-dom": "^18.3.0", "react-icons": "^4.2.0", - "react-use": "^17.4.0", "sharp": "^0.34.0", "sitemap": "^1.5.0", "typograf": "^6.11.1", - "use-media": "^1.4.0", "valtio": "^2.1.7" }, "devDependencies": { @@ -2275,11 +2273,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/js-cookie": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.6.tgz", - "integrity": "sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==" - }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -2746,11 +2739,6 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/@xobotyi/scrollbar-width": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz", - "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==" - }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -3169,14 +3157,6 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, - "node_modules/copy-to-clipboard": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", - "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", - "dependencies": { - "toggle-selection": "^1.0.6" - } - }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3192,27 +3172,6 @@ "node": ">= 8" } }, - "node_modules/css-in-js-utils": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", - "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", - "dependencies": { - "hyphenate-style-name": "^1.0.2", - "isobject": "^3.0.1" - } - }, - "node_modules/css-tree": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", - "dependencies": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -3223,7 +3182,8 @@ "node_modules/csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "devOptional": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -3448,14 +3408,6 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/error-stack-parser": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", - "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==", - "dependencies": { - "stackframe": "^1.3.4" - } - }, "node_modules/es-abstract": { "version": "1.23.5", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz", @@ -4236,7 +4188,8 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true }, "node_modules/fast-glob": { "version": "3.3.2", @@ -4269,16 +4222,6 @@ "dev": true, "license": "MIT" }, - "node_modules/fast-shallow-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", - "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==" - }, - "node_modules/fastest-stable-stringify": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz", - "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==" - }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -4674,11 +4617,6 @@ "node": ">= 0.4" } }, - "node_modules/hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -4725,14 +4663,6 @@ "node": ">=8" } }, - "node_modules/inline-style-prefixer": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz", - "integrity": "sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==", - "dependencies": { - "css-in-js-utils": "^2.0.0" - } - }, "node_modules/internal-slot": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", @@ -5153,14 +5083,6 @@ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, - "node_modules/isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/iterator.prototype": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz", @@ -5178,11 +5100,6 @@ "node": ">= 0.4" } }, - "node_modules/js-cookie": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", - "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5370,11 +5287,6 @@ "markdown-it": "bin/markdown-it.js" } }, - "node_modules/mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" - }, "node_modules/mdurl": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", @@ -5451,25 +5363,6 @@ "dev": true, "license": "MIT" }, - "node_modules/nano-css": { - "version": "5.3.5", - "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz", - "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==", - "dependencies": { - "css-tree": "^1.1.2", - "csstype": "^3.0.6", - "fastest-stable-stringify": "^2.0.2", - "inline-style-prefixer": "^6.0.0", - "rtl-css-js": "^1.14.0", - "sourcemap-codec": "^1.4.8", - "stacktrace-js": "^2.0.2", - "stylis": "^4.0.6" - }, - "peerDependencies": { - "react": "*", - "react-dom": "*" - } - }, "node_modules/nanoid": { "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", @@ -5984,40 +5877,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-universal-interface": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", - "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==", - "peerDependencies": { - "react": "*", - "tslib": "*" - } - }, - "node_modules/react-use": { - "version": "17.4.0", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz", - "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==", - "dependencies": { - "@types/js-cookie": "^2.2.6", - "@xobotyi/scrollbar-width": "^1.9.5", - "copy-to-clipboard": "^3.3.1", - "fast-deep-equal": "^3.1.3", - "fast-shallow-equal": "^1.0.0", - "js-cookie": "^2.2.1", - "nano-css": "^5.3.1", - "react-universal-interface": "^0.6.2", - "resize-observer-polyfill": "^1.5.1", - "screenfull": "^5.1.0", - "set-harmonic-interval": "^1.0.1", - "throttle-debounce": "^3.0.1", - "ts-easing": "^0.2.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -6078,11 +5937,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/resize-observer-polyfill": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", - "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" - }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -6166,14 +6020,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/rtl-css-js": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.0.tgz", - "integrity": "sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==", - "dependencies": { - "@babel/runtime": "^7.1.2" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -6249,17 +6095,6 @@ "loose-envify": "^1.1.0" } }, - "node_modules/screenfull": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz", - "integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==", - "engines": { - "node": ">=0.10.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semver": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", @@ -6306,14 +6141,6 @@ "node": ">= 0.4" } }, - "node_modules/set-harmonic-interval": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz", - "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==", - "engines": { - "node": ">=6.9" - } - }, "node_modules/sharp": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", @@ -6414,14 +6241,6 @@ "url-join": "^1.1.0" } }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6431,19 +6250,6 @@ "node": ">=0.10.0" } }, - "node_modules/sourcemap-codec": { - "version": "1.4.8", - "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" - }, - "node_modules/stack-generator": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", - "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==", - "dependencies": { - "stackframe": "^1.3.4" - } - }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -6451,38 +6257,6 @@ "dev": true, "license": "MIT" }, - "node_modules/stackframe": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", - "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==" - }, - "node_modules/stacktrace-gps": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz", - "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==", - "dependencies": { - "source-map": "0.5.6", - "stackframe": "^1.3.4" - } - }, - "node_modules/stacktrace-gps/node_modules/source-map": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/stacktrace-js": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz", - "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==", - "dependencies": { - "error-stack-parser": "^2.0.6", - "stack-generator": "^2.0.5", - "stacktrace-gps": "^3.0.4" - } - }, "node_modules/std-env": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz", @@ -6654,11 +6428,6 @@ } } }, - "node_modules/stylis": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.1.tgz", - "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==" - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -6718,14 +6487,6 @@ "node": ">=6" } }, - "node_modules/throttle-debounce": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", - "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", - "engines": { - "node": ">=10" - } - }, "node_modules/tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", @@ -6792,11 +6553,6 @@ "node": ">=8.0" } }, - "node_modules/toggle-selection": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" - }, "node_modules/ts-api-utils": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz", @@ -6810,11 +6566,6 @@ "typescript": ">=4.8.4" } }, - "node_modules/ts-easing": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", - "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" - }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -7008,11 +6759,6 @@ } } }, - "node_modules/use-media": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/use-media/-/use-media-1.4.0.tgz", - "integrity": "sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==" - }, "node_modules/valtio": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.7.tgz", diff --git a/package.json b/package.json index ac3d8aac..321e3d59 100644 --- a/package.json +++ b/package.json @@ -32,11 +32,9 @@ "react": "^18.3.0", "react-dom": "^18.3.0", "react-icons": "^4.2.0", - "react-use": "^17.4.0", "sharp": "^0.34.0", "sitemap": "^1.5.0", "typograf": "^6.11.1", - "use-media": "^1.4.0", "valtio": "^2.1.7" }, "devDependencies": { diff --git a/src/components/Navigation/MobileNavigation.tsx b/src/components/Navigation/MobileNavigation.tsx index b60bb200..77fc1f66 100644 --- a/src/components/Navigation/MobileNavigation.tsx +++ b/src/components/Navigation/MobileNavigation.tsx @@ -1,11 +1,11 @@ import { MenuToggle } from "../MenuToggle" import { Menu } from "../Menu" import { Overlay } from "@/ui/Overlay" -import { useContext } from "react" +import { useCallback, useContext } from "react" import { MenuContext } from "@/context/MenuContext" import { Box } from "@/ui/Box" import { Spacer } from "../Spacer" -import { useToggle } from "react-use" +import { useToggle } from "@/hooks/useToggle" import HudozkaLogo from "../HudozkaLogo" import { HudozkaTitle } from "../HudozkaTitle" import Link from "next/link" @@ -16,6 +16,7 @@ export type MobileNavigationProps = { export const MobileNavigation: React.FC = ({ style }) => { const [open, toggleOpen] = useToggle(false) + const handleToggle = useCallback(() => toggleOpen(), [toggleOpen]) const menu = useContext(MenuContext) return ( @@ -32,7 +33,7 @@ export const MobileNavigation: React.FC = ({ style }) => = ({ style }) => diff --git a/src/hooks/useDarkTheme.ts b/src/hooks/useDarkTheme.ts index fc4d3bf1..14d4c81c 100644 --- a/src/hooks/useDarkTheme.ts +++ b/src/hooks/useDarkTheme.ts @@ -1,5 +1,5 @@ -import useMedia from "use-media" +import { useMediaQuery } from "@/hooks/useMediaQuery" export function useDarkTheme(): boolean { - return useMedia("(prefers-color-scheme: dark)") + return useMediaQuery("(prefers-color-scheme: dark)") } diff --git a/src/hooks/useLockBodyScroll.test.ts b/src/hooks/useLockBodyScroll.test.ts new file mode 100644 index 00000000..edf52fbe --- /dev/null +++ b/src/hooks/useLockBodyScroll.test.ts @@ -0,0 +1,40 @@ +import { renderHook } from "@testing-library/react" +import { describe, it, expect, beforeEach } from "vitest" +import { useLockBodyScroll } from "./useLockBodyScroll" + +describe("useLockBodyScroll", () => { + beforeEach(() => { + document.body.style.overflow = "" + }) + + it("sets overflow hidden when locked", () => { + renderHook(() => useLockBodyScroll(true)) + expect(document.body.style.overflow).toBe("hidden") + }) + + it("does not change overflow when unlocked", () => { + document.body.style.overflow = "auto" + renderHook(() => useLockBodyScroll(false)) + expect(document.body.style.overflow).toBe("auto") + }) + + it("restores original overflow on unmount", () => { + document.body.style.overflow = "scroll" + const { unmount } = renderHook(() => useLockBodyScroll(true)) + expect(document.body.style.overflow).toBe("hidden") + unmount() + expect(document.body.style.overflow).toBe("scroll") + }) + + it("responds to lock/unlock transitions", () => { + const { rerender } = renderHook( + ({ locked }) => useLockBodyScroll(locked), + { initialProps: { locked: false } }, + ) + expect(document.body.style.overflow).toBe("") + rerender({ locked: true }) + expect(document.body.style.overflow).toBe("hidden") + rerender({ locked: false }) + expect(document.body.style.overflow).toBe("") + }) +}) diff --git a/src/hooks/useLockBodyScroll.ts b/src/hooks/useLockBodyScroll.ts new file mode 100644 index 00000000..cc99eb24 --- /dev/null +++ b/src/hooks/useLockBodyScroll.ts @@ -0,0 +1,16 @@ +import { useEffect } from "react" + +export function useLockBodyScroll(locked: boolean): void { + useEffect(() => { + if (!locked) { + return + } + + const original = document.body.style.overflow + document.body.style.overflow = "hidden" + + return () => { + document.body.style.overflow = original + } + }, [locked]) +} diff --git a/src/hooks/useMediaQuery.test.ts b/src/hooks/useMediaQuery.test.ts new file mode 100644 index 00000000..8f02651f --- /dev/null +++ b/src/hooks/useMediaQuery.test.ts @@ -0,0 +1,57 @@ +import { renderHook, act } from "@testing-library/react" +import { describe, it, expect, beforeEach, vi } from "vitest" +import { useMediaQuery } from "./useMediaQuery" + +describe("useMediaQuery", () => { + let listeners: Map void>> + let matches: Map + + beforeEach(() => { + listeners = new Map() + matches = new Map() + + vi.stubGlobal("matchMedia", (query: string) => ({ + matches: matches.get(query) ?? false, + addEventListener: (_: string, cb: () => void) => { + if (!listeners.has(query)) { + listeners.set(query, new Set()) + } + listeners.get(query)!.add(cb) + }, + removeEventListener: (_: string, cb: () => void) => { + listeners.get(query)?.delete(cb) + }, + })) + }) + + it("returns current match state", () => { + matches.set("(min-width: 800px)", true) + const { result } = renderHook(() => useMediaQuery("(min-width: 800px)")) + expect(result.current).toBe(true) + }) + + it("returns false when query does not match", () => { + const { result } = renderHook(() => useMediaQuery("(min-width: 800px)")) + expect(result.current).toBe(false) + }) + + it("updates on change events", () => { + const query = "(min-width: 800px)" + const { result } = renderHook(() => useMediaQuery(query)) + expect(result.current).toBe(false) + + act(() => { + matches.set(query, true) + listeners.get(query)?.forEach((cb) => cb()) + }) + expect(result.current).toBe(true) + }) + + it("cleans up listener on unmount", () => { + const query = "(min-width: 800px)" + const { unmount } = renderHook(() => useMediaQuery(query)) + expect(listeners.get(query)?.size).toBe(1) + unmount() + expect(listeners.get(query)?.size).toBe(0) + }) +}) diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts new file mode 100644 index 00000000..821146e4 --- /dev/null +++ b/src/hooks/useMediaQuery.ts @@ -0,0 +1,13 @@ +import { useSyncExternalStore } from "react" + +export function useMediaQuery(query: string, defaultValue = false): boolean { + return useSyncExternalStore( + (callback) => { + const mql = window.matchMedia(query) + mql.addEventListener("change", callback) + return () => mql.removeEventListener("change", callback) + }, + () => window.matchMedia(query).matches, + () => defaultValue, + ) +} diff --git a/src/hooks/useMobile.ts b/src/hooks/useMobile.ts index 48b7f9b7..6bb83254 100644 --- a/src/hooks/useMobile.ts +++ b/src/hooks/useMobile.ts @@ -1,5 +1,5 @@ -import useMedia from "use-media" +import { useMediaQuery } from "@/hooks/useMediaQuery" export function useMobile(): boolean { - return useMedia("(max-width: 31.25em)", false) + return useMediaQuery("(max-width: 31.25em)", false) } diff --git a/src/hooks/useReducedMotion.ts b/src/hooks/useReducedMotion.ts index fff6943a..14cdf96d 100644 --- a/src/hooks/useReducedMotion.ts +++ b/src/hooks/useReducedMotion.ts @@ -1,5 +1,5 @@ -import useMedia from "use-media" +import { useMediaQuery } from "@/hooks/useMediaQuery" export function useReducedMotion(): boolean { - return useMedia("(prefers-reduced-motion: reduce)") + return useMediaQuery("(prefers-reduced-motion: reduce)") } diff --git a/src/hooks/useToggle.test.ts b/src/hooks/useToggle.test.ts new file mode 100644 index 00000000..feb32b8b --- /dev/null +++ b/src/hooks/useToggle.test.ts @@ -0,0 +1,37 @@ +import { renderHook, act } from "@testing-library/react" +import { describe, it, expect } from "vitest" +import { useToggle } from "./useToggle" + +describe("useToggle", () => { + it("returns initial value", () => { + const { result } = renderHook(() => useToggle(false)) + expect(result.current[0]).toBe(false) + }) + + it("toggles value", () => { + const { result } = renderHook(() => useToggle(false)) + act(() => result.current[1]()) + expect(result.current[0]).toBe(true) + act(() => result.current[1]()) + expect(result.current[0]).toBe(false) + }) + + it("sets explicit true", () => { + const { result } = renderHook(() => useToggle(false)) + act(() => result.current[1](true)) + expect(result.current[0]).toBe(true) + }) + + it("sets explicit false", () => { + const { result } = renderHook(() => useToggle(true)) + act(() => result.current[1](false)) + expect(result.current[0]).toBe(false) + }) + + it("has a stable dispatch reference", () => { + const { result, rerender } = renderHook(() => useToggle(false)) + const first = result.current[1] + rerender() + expect(result.current[1]).toBe(first) + }) +}) diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts new file mode 100644 index 00000000..cee7d28b --- /dev/null +++ b/src/hooks/useToggle.ts @@ -0,0 +1,8 @@ +import { useReducer } from "react" + +export function useToggle(initialValue: boolean): [boolean, (nextValue?: boolean) => void] { + return useReducer( + (state: boolean, next?: boolean) => typeof next === "boolean" ? next : !state, + initialValue, + ) +} diff --git a/src/ui/Overlay/index.tsx b/src/ui/Overlay/index.tsx index d380ad04..8676854d 100644 --- a/src/ui/Overlay/index.tsx +++ b/src/ui/Overlay/index.tsx @@ -1,8 +1,8 @@ import s from "./styles.module.css" import { Transition } from "./Transition" -import { useReducedMotion } from "../../hooks/useReducedMotion" -import { useLockBodyScroll } from "react-use" +import { useReducedMotion } from "@/hooks/useReducedMotion" +import { useLockBodyScroll } from "@/hooks/useLockBodyScroll" export type OverlayProps = { children?: React.ReactNode