@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/styles/media.js

@@ -1,23 +1,55 @@
-"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;
-var react_1 = require("react");
-var theme_1 = require("./theme");
-exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    min: function() {
+        return min;
+    },
+    max: function() {
+        return max;
+    },
+    up: function() {
+        return up;
+    },
+    down: function() {
+        return down;
+    },
+    between: function() {
+        return between;
+    },
+    only: function() {
+        return only;
+    },
+    useMedia: function() {
+        return useMedia;
+    },
+    generateMediaQueries: function() {
+        return generateMediaQueries;
+    }
+});
+const _react = require("react");
+const _theme = require("./theme");
+const { min, max, up, down, between, only } = generateMediaQueries(_theme.breakpoints);
 function useMedia(media) {
-    var breakpoints = (0, theme_1.useTheme)().breakpoints;
-    var _a = (0, react_1.useState)(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
-    var px = breakpoints[breakpoint];
+    const { breakpoints } = (0, _theme.useTheme)();
+    const [matches, setMatches] = (0, _react.useState)(false);
+    const [direction = "min", breakpoint] = media.split(":");
+    let px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;
     }
-    var query = "(".concat(direction, "-width: ").concat(px, "px)");
-    (0, react_1.useEffect)(function () {
-        var mq = window.matchMedia(query);
-        var handleChange = function (event) {
+    const query = `(${direction}-width: ${px}px)`;
+    (0, _react.useEffect)(()=>{
+        const mq = window.matchMedia(query);
+        const handleChange = (event)=>{
             setMatches(event.matches);
         };
         setMatches(mq.matches);
@@ -27,135 +59,81 @@ function useMedia(media) {
             // Update the state whenever the media query match state changes
             mq.addListener(handleChange);
             // Clean up on unmount and if the query changes
-            return function () {
+            return ()=>{
                 mq.removeListener(handleChange);
             };
         }
         mq.addEventListener("change", handleChange);
-        return function () {
+        return ()=>{
             mq.removeEventListener("change", handleChange);
         };
-    }, [query]);
+    }, [
+        query
+    ]);
     return matches;
 }
-exports.useMedia = useMedia;
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */
 function generateMediaQueries(breakpoints) {
-    var temp = Object.keys(breakpoints).map(function (key) {
-        var br = key;
-        return [br, breakpoints[br]];
+    const temp = Object.keys(breakpoints).map((key)=>{
+        const br = key;
+        return [
+            br,
+            breakpoints[br]
+        ];
     });
-    var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
-    var getNext = function (breakpoint) {
-        var index = sortedKeys.indexOf(breakpoint);
+    const sortedKeys = temp.sort((a, b)=>a[1] - b[1]).map((item)=>item[0]);
+    const getNext = (breakpoint)=>{
+        const index = sortedKeys.indexOf(breakpoint);
         return sortedKeys[index + 1];
     };
     /**
-     * It behaves the same as `@media (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`.
-     */ // @ts-expect-error FIXME: at some point
-    var min = function (br) {
-        return "@media (min-width: ".concat(breakpoints[br], "px)");
-    };
+   * It behaves the same as `@media (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`.
+   */ // @ts-expect-error FIXME: at some point
+    const min = (br)=>`@media (min-width: ${breakpoints[br]}px)`;
     /**
-     * It behaves the same as `@media (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`.
-     */ // @ts-expect-error FIXME: at some point
-    var max = function (br) {
-        return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
-    };
-    for (var br in breakpoints) {
-        var _br = br;
-        min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
-        max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
+   * It behaves the same as `@media (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`.
+   */ // @ts-expect-error FIXME: at some point
+    const max = (br)=>`@media (max-width: ${breakpoints[br] - 0.02}px)`;
+    for(const br in breakpoints){
+        const _br = br;
+        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
+        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
     }
     /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var up = min;
+   * 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.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
+   * 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)=>{
+        const brNext = getNext(br);
         // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
     };
     /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
+   * Media query between the two given breakpoints
+   */ const between = (br1, br2)=>{
+        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
     };
     /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    var only = function (br) {
-        var brNext = getNext(br);
+   * Media query to apply from the given breakpoint until the next, just for its
+   * full range
+   */ const only = (br)=>{
+        const brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
     };
     return {
-        min: min,
-        max: max,
-        up: up,
-        down: down,
-        between: between,
-        only: only,
+        min,
+        max,
+        up,
+        down,
+        between,
+        only
     };
 }
-exports.generateMediaQueries = generateMediaQueries;

package/styles/media.mjs

@@ -1,20 +1,19 @@
 /// TODO:FIXME: this should use code from `useMqWidthCreator`
-var _a;
-import { useState, useEffect } from "react";
-import { useTheme, breakpoints } from "./theme";
-export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
+import { useEffect, useState } from "react";
+import { breakpoints, useTheme } from "./theme";
+export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
 export function useMedia(media) {
-    var breakpoints = useTheme().breakpoints;
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
-    var px = breakpoints[breakpoint];
+    const { breakpoints } = useTheme();
+    const [matches, setMatches] = useState(false);
+    const [direction = "min", breakpoint] = media.split(":");
+    let px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;
     }
-    var query = "(".concat(direction, "-width: ").concat(px, "px)");
-    useEffect(function () {
-        var mq = window.matchMedia(query);
-        var handleChange = function (event) {
+    const query = `(${direction}-width: ${px}px)`;
+    useEffect(()=>{
+        const mq = window.matchMedia(query);
+        const handleChange = (event)=>{
             setMatches(event.matches);
         };
         setMatches(mq.matches);
@@ -24,15 +23,17 @@ export function useMedia(media) {
             // Update the state whenever the media query match state changes
             mq.addListener(handleChange);
             // Clean up on unmount and if the query changes
-            return function () {
+            return ()=>{
                 mq.removeListener(handleChange);
             };
         }
         mq.addEventListener("change", handleChange);
-        return function () {
+        return ()=>{
             mq.removeEventListener("change", handleChange);
         };
-    }, [query]);
+    }, [
+        query
+    ]);
     return matches;
 }
 /**
@@ -83,74 +84,68 @@ export function useMedia(media) {
  * @custom-media --narrow-window (max-width: 30em);
  * @media (--narrow-window) {}
  * ```
- */
-export function generateMediaQueries(breakpoints) {
-    var temp = Object.keys(breakpoints).map(function (key) {
-        var br = key;
-        return [br, breakpoints[br]];
+ */ export function generateMediaQueries(breakpoints) {
+    const temp = Object.keys(breakpoints).map((key)=>{
+        const br = key;
+        return [
+            br,
+            breakpoints[br]
+        ];
     });
-    var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
-    var getNext = function (breakpoint) {
-        var index = sortedKeys.indexOf(breakpoint);
+    const sortedKeys = temp.sort((a, b)=>a[1] - b[1]).map((item)=>item[0]);
+    const getNext = (breakpoint)=>{
+        const index = sortedKeys.indexOf(breakpoint);
         return sortedKeys[index + 1];
     };
     /**
-     * It behaves the same as `@media (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`.
-     */ // @ts-expect-error FIXME: at some point
-    var min = function (br) {
-        return "@media (min-width: ".concat(breakpoints[br], "px)");
-    };
+   * It behaves the same as `@media (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`.
+   */ // @ts-expect-error FIXME: at some point
+    const min = (br)=>`@media (min-width: ${breakpoints[br]}px)`;
     /**
-     * It behaves the same as `@media (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`.
-     */ // @ts-expect-error FIXME: at some point
-    var max = function (br) {
-        return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
-    };
-    for (var br in breakpoints) {
-        var _br = br;
-        min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
-        max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
+   * It behaves the same as `@media (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`.
+   */ // @ts-expect-error FIXME: at some point
+    const max = (br)=>`@media (max-width: ${breakpoints[br] - 0.02}px)`;
+    for(const br in breakpoints){
+        const _br = br;
+        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
+        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
     }
     /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var up = min;
+   * 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.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
+   * 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)=>{
+        const brNext = getNext(br);
         // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
     };
     /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
+   * Media query between the two given breakpoints
+   */ const between = (br1, br2)=>{
+        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
     };
     /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    var only = function (br) {
-        var brNext = getNext(br);
+   * Media query to apply from the given breakpoint until the next, just for its
+   * full range
+   */ const only = (br)=>{
+        const brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
     };
     return {
-        min: min,
-        max: max,
-        up: up,
-        down: down,
-        between: between,
-        only: only,
+        min,
+        max,
+        up,
+        down,
+        between,
+        only
     };
 }

package/styles/spacing.js

@@ -1,29 +1,53 @@
+// import type { DefaultTheme } from "styled-components";
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
-function _spacing(theme, size, factor, property, direction, devices) {
-    if (size === void 0) { size = "md"; }
-    if (factor === void 0) { factor = 1; }
-    if (property === void 0) { property = "padding"; }
-    if (direction === void 0) { direction = "top"; }
-    if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
-    var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
-    var css = "";
-    var prop = "".concat(property, "-").concat(direction);
-    if (!devices.length || devices[0] === "mobile") {
-        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    spacing: function() {
+        return spacing;
+    },
+    spacingTop: function() {
+        return spacingTop;
+    },
+    spacingBottom: function() {
+        return spacingBottom;
+    },
+    spacingVertical: function() {
+        return spacingVertical;
     }
-    else {
-        for (var index = 0; index < devices.length; index++) {
-            var device = devices[index];
+});
+function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = [
+    "mobile",
+    "tablet",
+    "desktop"
+]) {
+    const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
+    let css = "";
+    const prop = `${property}-${direction}`;
+    if (!devices.length || devices[0] === "mobile") {
+        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
+        ${prop}: ${SPACES["mobile"][size] * factor}px;
+      }`;
+    } else {
+        for(let index = 0; index < devices.length; index++){
+            const device = devices[index];
             if (device === "mobile") {
-                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
-            }
-            else if (device === "tablet") {
-                css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n          ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n        }");
-            }
-            else if (device === "desktop") {
-                css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
+                css += `${prop}: ${SPACES[device][size] * factor}px;`;
+            } else if (device === "tablet") {
+                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
+          ${prop}: ${SPACES["tablet"][size] * factor}px;
+        }`;
+            } else if (device === "desktop") {
+                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
+          ${prop}: ${SPACES["desktop"][size] * factor}px;
+        }`;
             }
         }
     }
@@ -31,22 +55,16 @@ function _spacing(theme, size, factor, property, direction, devices) {
 }
 function spacing(size, factor, property, direction, devices) {
     if (direction === "vertical") {
-        return (_spacing(this, size, factor, property, "top", devices) +
-            _spacing(this, size, factor, property, "bottom", devices));
+        return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
     }
     return _spacing(this, size, factor, property, direction, devices);
 }
-exports.spacing = spacing;
 function spacingTop(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "top", devices);
 }
-exports.spacingTop = spacingTop;
 function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
-exports.spacingBottom = spacingBottom;
 function spacingVertical(size, factor, property, devices) {
-    return (_spacing(this, size, factor, property, "top", devices) +
-        _spacing(this, size, factor, property, "bottom", devices));
+    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
 }
-exports.spacingVertical = spacingVertical;

package/styles/spacing.mjs

@@ -1,26 +1,29 @@
-function _spacing(theme, size, factor, property, direction, devices) {
-    if (size === void 0) { size = "md"; }
-    if (factor === void 0) { factor = 1; }
-    if (property === void 0) { property = "padding"; }
-    if (direction === void 0) { direction = "top"; }
-    if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
-    var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
-    var css = "";
-    var prop = "".concat(property, "-").concat(direction);
+// import type { DefaultTheme } from "styled-components";
+function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = [
+    "mobile",
+    "tablet",
+    "desktop"
+]) {
+    const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
+    let css = "";
+    const prop = `${property}-${direction}`;
     if (!devices.length || devices[0] === "mobile") {
-        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
-    }
-    else {
-        for (var index = 0; index < devices.length; index++) {
-            var device = devices[index];
+        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
+        ${prop}: ${SPACES["mobile"][size] * factor}px;
+      }`;
+    } else {
+        for(let index = 0; index < devices.length; index++){
+            const device = devices[index];
             if (device === "mobile") {
-                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
-            }
-            else if (device === "tablet") {
-                css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n          ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n        }");
-            }
-            else if (device === "desktop") {
-                css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
+                css += `${prop}: ${SPACES[device][size] * factor}px;`;
+            } else if (device === "tablet") {
+                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
+          ${prop}: ${SPACES["tablet"][size] * factor}px;
+        }`;
+            } else if (device === "desktop") {
+                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
+          ${prop}: ${SPACES["desktop"][size] * factor}px;
+        }`;
             }
         }
     }
@@ -28,8 +31,7 @@ function _spacing(theme, size, factor, property, direction, devices) {
 }
 export function spacing(size, factor, property, direction, devices) {
     if (direction === "vertical") {
-        return (_spacing(this, size, factor, property, "top", devices) +
-            _spacing(this, size, factor, property, "bottom", devices));
+        return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
     }
     return _spacing(this, size, factor, property, direction, devices);
 }
@@ -40,6 +42,5 @@ export function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
 export function spacingVertical(size, factor, property, devices) {
-    return (_spacing(this, size, factor, property, "top", devices) +
-        _spacing(this, size, factor, property, "bottom", devices));
+    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
 }