@koine/react 1.0.82 → 1.0.84

package/hooks/useMqWidthCreator.js

@@ -0,0 +1,225 @@
+import { __assign } from "tslib";
+import { useState, useEffect, useMemo } from "react";
+import { isBrowser } from "@koine/utils";
+export function useMqWidthCreator(customBreakpoints) {
+    var breakpoints = __assign({ xs: 0 }, customBreakpoints);
+    var sortedBreakpointsNames = Object.keys(breakpoints).map(function (key) {
+        var br = key;
+        return [br, breakpoints[br]];
+    })
+        .sort(function (a, b) { return a[1] - b[1]; })
+        .map(function (item) { return item[0]; });
+    var getNextBreakpoint = function (breakpoint) {
+        var index = sortedBreakpointsNames.indexOf(breakpoint);
+        return sortedBreakpointsNames[index + 1];
+    };
+    /**
+     * It behaves the same as `(min-width: ${value}px)`
+     * where value is the given breakpoint value.
+     * For ease of use this can be used both as a function `min("md")` and as an
+     * object literal `min.md`.
+     */
+    var min = function (br) { return "(min-width: ".concat(breakpoints[br], "px)"); };
+    /**
+     * It behaves the same as `(max-width: ${value}px)`
+     * where value is the given breakpoint value.
+     * For ease of use this can be used both as a function `max("md")` and as an
+     * object literal `max.md`.
+     */
+    var max = function (br) { return "(max-width: ".concat(breakpoints[br] - 0.02, "px)"); };
+    /**
+     * It behaves the same as `min`
+     * @inheritdoc {max}
+     */
+    var up = min;
+    /**
+     * It behaves similarly to `max` but you will use the "next" breakpoint,
+     * specifying CSS that will apply from the given breakpoint and down.
+     */
+    var down = function (br) {
+        var brNext = getNextBreakpoint(br);
+        // TODO: if br does not exists otherwise throw Error
+        return brNext && "(max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+    };
+    /**
+     * Media query between the two given breakpoints
+     */
+    var between = function (br1, br2) {
+        return br2
+            ? "(min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)")
+            : min(br1);
+    };
+    /**
+     * Media query to apply from the given breakpoint until the next, just for its
+     * full range
+     */
+    var only = function (br) {
+        var brNext = getNextBreakpoint(br);
+        return brNext ? between(br, brNext) : min(br);
+    };
+    var queryResolvers = {
+        max: max,
+        min: min,
+        down: down,
+        up: up,
+        between: between,
+        only: only,
+    };
+    return function useMqWidth(media) {
+        var _a = media.split(":"), _b = _a[0], rule = _b === void 0 ? "min" : _b, ruleBreakpoint = _a[1];
+        // with the hook creator approach these breakpoint types cannot be deduced
+        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
+        //   typeof ruleBreakpoint,
+        //   "-"
+        // >;
+        var _c = ruleBreakpoint.split("-"), br1 = _c[0], br2 = _c[1];
+        var query = queryResolvers[rule](br1, br2);
+        var mq = useMemo(function () { return (isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
+        var _d = useState(mq.matches), matches = _d[0], setMatches = _d[1];
+        useEffect(function () {
+            var mq = window.matchMedia(query);
+            var handleChange = function (event) {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            // Safari < 14 can't use addEventListener on a MediaQueryList
+            // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+            if (!mq.addEventListener) {
+                // Update the state whenever the media query match state changes
+                mq.addListener(handleChange);
+                // Clean up on unmount and if the query changes
+                return function () {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return function () {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+}
+export default useMqWidthCreator;
+//// without creator it would be:
+//// ---------------------------------------------------------------------------
+// import { useState, useEffect, useMemo } from "react";
+// import { isBrowser, type Split } from "@koine/utils";
+// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+// type Breakpoints = Record<Breakpoint, number>;
+// type MediaQuery =
+//   | `max:${Breakpoint}`
+//   | `min:${Breakpoint}`
+//   | `down:${Breakpoint}`
+//   | `up:${Breakpoint}`
+//   | `between:${Breakpoint}-${Breakpoint}`
+//   | `only:${Breakpoint}`;
+// const breakpoints: Breakpoints = {
+//   xs: 0,
+//   ...themeBreakpoints,
+// };
+// const sortedBreakpointsNames = (
+//   Object.keys(breakpoints).map((key) => {
+//     const br = key as keyof typeof breakpoints;
+//     return [br, breakpoints[br]];
+//   }) as [Breakpoint, number][]
+// )
+//   .sort((a, b) => a[1] - b[1])
+//   .map((item) => item[0]);
+// const getNextBreakpoint = (breakpoint: Breakpoint) => {
+//   const index = sortedBreakpointsNames.indexOf(breakpoint);
+//   return sortedBreakpointsNames[index + 1];
+// };
+// /**
+//  * It behaves the same as `(min-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `min("md")` and as an
+//  * object literal `min.md`.
+//  */
+// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
+// /**
+//  * It behaves the same as `(max-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `max("md")` and as an
+//  * object literal `max.md`.
+//  */
+// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
+// /**
+//  * It behaves the same as `min`
+//  * @inheritdoc {max}
+//  */
+// const up = min;
+// /**
+//  * It behaves similarly to `max` but you will use the "next" breakpoint,
+//  * specifying CSS that will apply from the given breakpoint and down.
+//  */
+// const down = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   // TODO: if br does not exists otherwise throw Error
+//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
+// };
+// /**
+//  * Media query between the two given breakpoints
+//  */
+// const between = (br1: Breakpoint, br2?: Breakpoint) => {
+//   return br2
+//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
+//         breakpoints[br2] - 0.02
+//       }px)`
+//     : min(br1);
+// };
+// /**
+//  * Media query to apply from the given breakpoint until the next, just for its
+//  * full range
+//  */
+// const only = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   return brNext ? between(br, brNext) : min(br);
+// };
+// const queryResolvers = {
+//   max,
+//   min,
+//   down,
+//   up,
+//   between,
+//   only,
+// };
+// export function useMqWidth(media: MediaQuery) {
+//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
+//     MediaQuery,
+//     ":"
+//   >;
+//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//     typeof ruleBreakpoint,
+//     "-"
+//   >;
+//   const query = queryResolvers[rule](br1, br2);
+//   const mq = useMemo(
+//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
+//     [query]
+//   );
+//   const [matches, setMatches] = useState(mq.matches);
+//   useEffect(() => {
+//     const mq = window.matchMedia(query);
+//     const handleChange = (event: MediaQueryListEvent) => {
+//       setMatches(event.matches);
+//     };
+//     setMatches(mq.matches);
+//     // Safari < 14 can't use addEventListener on a MediaQueryList
+//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+//     if (!mq.addEventListener) {
+//       // Update the state whenever the media query match state changes
+//       mq.addListener(handleChange);
+//       // Clean up on unmount and if the query changes
+//       return () => {
+//         mq.removeListener(handleChange);
+//       };
+//     }
+//     mq.addEventListener("change", handleChange);
+//     return () => {
+//       mq.removeEventListener("change", handleChange);
+//     };
+//   }, [query]);
+//   return matches;
+// }

package/node/hooks/index.js

@@ -10,6 +10,7 @@ tslib_1.__exportStar(require("./useId"), exports);
 tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
 tslib_1.__exportStar(require("./useMount"), exports);
 tslib_1.__exportStar(require("./useMountedState"), exports);
+tslib_1.__exportStar(require("./useMqWidthCreator"), exports);
 tslib_1.__exportStar(require("./usePrevious"), exports);
 tslib_1.__exportStar(require("./useScrollPosition"), exports);
 // export * from "./useScrollTo";

package/node/hooks/useMqWidthCreator.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMqWidthCreator = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+function useMqWidthCreator(customBreakpoints) {
+    var breakpoints = tslib_1.__assign({ xs: 0 }, customBreakpoints);
+    var sortedBreakpointsNames = Object.keys(breakpoints).map(function (key) {
+        var br = key;
+        return [br, breakpoints[br]];
+    })
+        .sort(function (a, b) { return a[1] - b[1]; })
+        .map(function (item) { return item[0]; });
+    var getNextBreakpoint = function (breakpoint) {
+        var index = sortedBreakpointsNames.indexOf(breakpoint);
+        return sortedBreakpointsNames[index + 1];
+    };
+    /**
+     * It behaves the same as `(min-width: ${value}px)`
+     * where value is the given breakpoint value.
+     * For ease of use this can be used both as a function `min("md")` and as an
+     * object literal `min.md`.
+     */
+    var min = function (br) { return "(min-width: ".concat(breakpoints[br], "px)"); };
+    /**
+     * It behaves the same as `(max-width: ${value}px)`
+     * where value is the given breakpoint value.
+     * For ease of use this can be used both as a function `max("md")` and as an
+     * object literal `max.md`.
+     */
+    var max = function (br) { return "(max-width: ".concat(breakpoints[br] - 0.02, "px)"); };
+    /**
+     * It behaves the same as `min`
+     * @inheritdoc {max}
+     */
+    var up = min;
+    /**
+     * It behaves similarly to `max` but you will use the "next" breakpoint,
+     * specifying CSS that will apply from the given breakpoint and down.
+     */
+    var down = function (br) {
+        var brNext = getNextBreakpoint(br);
+        // TODO: if br does not exists otherwise throw Error
+        return brNext && "(max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+    };
+    /**
+     * Media query between the two given breakpoints
+     */
+    var between = function (br1, br2) {
+        return br2
+            ? "(min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)")
+            : min(br1);
+    };
+    /**
+     * Media query to apply from the given breakpoint until the next, just for its
+     * full range
+     */
+    var only = function (br) {
+        var brNext = getNextBreakpoint(br);
+        return brNext ? between(br, brNext) : min(br);
+    };
+    var queryResolvers = {
+        max: max,
+        min: min,
+        down: down,
+        up: up,
+        between: between,
+        only: only,
+    };
+    return function useMqWidth(media) {
+        var _a = media.split(":"), _b = _a[0], rule = _b === void 0 ? "min" : _b, ruleBreakpoint = _a[1];
+        // with the hook creator approach these breakpoint types cannot be deduced
+        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
+        //   typeof ruleBreakpoint,
+        //   "-"
+        // >;
+        var _c = ruleBreakpoint.split("-"), br1 = _c[0], br2 = _c[1];
+        var query = queryResolvers[rule](br1, br2);
+        var mq = (0, react_1.useMemo)(function () { return (utils_1.isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
+        var _d = (0, react_1.useState)(mq.matches), matches = _d[0], setMatches = _d[1];
+        (0, react_1.useEffect)(function () {
+            var mq = window.matchMedia(query);
+            var handleChange = function (event) {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            // Safari < 14 can't use addEventListener on a MediaQueryList
+            // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+            if (!mq.addEventListener) {
+                // Update the state whenever the media query match state changes
+                mq.addListener(handleChange);
+                // Clean up on unmount and if the query changes
+                return function () {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return function () {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+}
+exports.useMqWidthCreator = useMqWidthCreator;
+exports.default = useMqWidthCreator;
+//// without creator it would be:
+//// ---------------------------------------------------------------------------
+// import { useState, useEffect, useMemo } from "react";
+// import { isBrowser, type Split } from "@koine/utils";
+// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+// type Breakpoints = Record<Breakpoint, number>;
+// type MediaQuery =
+//   | `max:${Breakpoint}`
+//   | `min:${Breakpoint}`
+//   | `down:${Breakpoint}`
+//   | `up:${Breakpoint}`
+//   | `between:${Breakpoint}-${Breakpoint}`
+//   | `only:${Breakpoint}`;
+// const breakpoints: Breakpoints = {
+//   xs: 0,
+//   ...themeBreakpoints,
+// };
+// const sortedBreakpointsNames = (
+//   Object.keys(breakpoints).map((key) => {
+//     const br = key as keyof typeof breakpoints;
+//     return [br, breakpoints[br]];
+//   }) as [Breakpoint, number][]
+// )
+//   .sort((a, b) => a[1] - b[1])
+//   .map((item) => item[0]);
+// const getNextBreakpoint = (breakpoint: Breakpoint) => {
+//   const index = sortedBreakpointsNames.indexOf(breakpoint);
+//   return sortedBreakpointsNames[index + 1];
+// };
+// /**
+//  * It behaves the same as `(min-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `min("md")` and as an
+//  * object literal `min.md`.
+//  */
+// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
+// /**
+//  * It behaves the same as `(max-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `max("md")` and as an
+//  * object literal `max.md`.
+//  */
+// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
+// /**
+//  * It behaves the same as `min`
+//  * @inheritdoc {max}
+//  */
+// const up = min;
+// /**
+//  * It behaves similarly to `max` but you will use the "next" breakpoint,
+//  * specifying CSS that will apply from the given breakpoint and down.
+//  */
+// const down = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   // TODO: if br does not exists otherwise throw Error
+//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
+// };
+// /**
+//  * Media query between the two given breakpoints
+//  */
+// const between = (br1: Breakpoint, br2?: Breakpoint) => {
+//   return br2
+//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
+//         breakpoints[br2] - 0.02
+//       }px)`
+//     : min(br1);
+// };
+// /**
+//  * Media query to apply from the given breakpoint until the next, just for its
+//  * full range
+//  */
+// const only = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   return brNext ? between(br, brNext) : min(br);
+// };
+// const queryResolvers = {
+//   max,
+//   min,
+//   down,
+//   up,
+//   between,
+//   only,
+// };
+// export function useMqWidth(media: MediaQuery) {
+//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
+//     MediaQuery,
+//     ":"
+//   >;
+//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//     typeof ruleBreakpoint,
+//     "-"
+//   >;
+//   const query = queryResolvers[rule](br1, br2);
+//   const mq = useMemo(
+//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
+//     [query]
+//   );
+//   const [matches, setMatches] = useState(mq.matches);
+//   useEffect(() => {
+//     const mq = window.matchMedia(query);
+//     const handleChange = (event: MediaQueryListEvent) => {
+//       setMatches(event.matches);
+//     };
+//     setMatches(mq.matches);
+//     // Safari < 14 can't use addEventListener on a MediaQueryList
+//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+//     if (!mq.addEventListener) {
+//       // Update the state whenever the media query match state changes
+//       mq.addListener(handleChange);
+//       // Clean up on unmount and if the query changes
+//       return () => {
+//         mq.removeListener(handleChange);
+//       };
+//     }
+//     mq.addEventListener("change", handleChange);
+//     return () => {
+//       mq.removeEventListener("change", handleChange);
+//     };
+//   }, [query]);
+//   return matches;
+// }

package/node/styles/media.js

@@ -1,4 +1,5 @@
 "use strict";
+/// TODO:FIXME: this should use code from `useMqWidthCreator`
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;

package/package.json

@@ -8,7 +8,7 @@
     "framer-motion": "^7.2.1",
     "react": "^18.2.0",
     "@mui/base": "^5.0.0-alpha.95",
-    "@koine/utils": "1.0.82",
+    "@koine/utils": "1.0.84",
     "ts-debounce": "^4.0.0",
     "date-fns-tz": "^1.3.7",
     "react-icons": "^4.4.0",
@@ -18,12 +18,11 @@
     "@tiptap/starter-kit": "^2.0.0-beta.192",
     "@kuus/yup": "^1.0.0-beta.4",
     "react-hook-form": "^7.34.2",
-    "type-fest": "^2.19.0",
     "react-popper": "^2.3.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {},
-  "version": "1.0.82",
+  "version": "1.0.84",
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/styles/media.js

@@ -1,3 +1,4 @@
+/// TODO:FIXME: this should use code from `useMqWidthCreator`
 var _a;
 import { useState, useEffect } from "react";
 import { useTheme, breakpoints } from "./theme";