@koine/react 1.0.8 → 1.0.9

package/node/styles/Body.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyMain = exports.BodyRoot = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.BodyRoot = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+/**
+ * If you have background graphics to overlap you might need to add:
+ *
+ * ```css
+ * z-index: 1;
+ * position: relative;
+ * ```
+ */
+exports.BodyMain = styled_components_1.default.main `
+  flex: 1;
+`;

package/node/styles/Global.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylesGlobal = exports.stylesGlobal = void 0;
+const styled_components_1 = require("styled-components");
+/**
+ * App global style
+ *
+ * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
+ * and similar.
+ *
+ * What we do here:
+ * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
+ *  - @see https://stackoverflow.com/a/60987373/1938970
+ * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
+ *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
+ *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+ */
+exports.stylesGlobal = `
+  body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
+  body,
+  button,
+  input,
+  textarea,
+  select,
+  select:-webkit-autofill::first-line,
+  input:-webkit-autofill::first-line {
+    font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+      sans-serif;
+    font-size: var(--fontSize);
+  }
+
+  html {
+    box-sizing: border-box;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+    -webkit-tap-highlight-color: transparent;
+  }
+`;
+exports.StylesGlobal = (0, styled_components_1.createGlobalStyle) `${exports.stylesGlobal}`;

package/node/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Body"), exports);
+tslib_1.__exportStar(require("./Global"), exports);
+tslib_1.__exportStar(require("./media"), exports);
+tslib_1.__exportStar(require("./spacing"), exports);
+tslib_1.__exportStar(require("./styled"), exports);
+tslib_1.__exportStar(require("./theme"), exports);
+tslib_1.__exportStar(require("./theme--vanilla"), exports);

package/node/styles/media.js

@@ -0,0 +1,156 @@
+"use strict";
+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;
+const react_1 = require("react");
+const theme_1 = require("./theme");
+_a = generateMediaQueries(theme_1.breakpoints), exports.min = _a.min, exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
+function useMedia(media) {
+    const { breakpoints } = (0, theme_1.useTheme)();
+    const [matches, setMatches] = (0, react_1.useState)(false);
+    const [direction = "min", breakpoint] = media.split(":");
+    let px = breakpoints[breakpoint];
+    if (direction === "max") {
+        px = px - 0.02;
+    }
+    const query = `(${direction}-width: ${px}px)`;
+    (0, react_1.useEffect)(() => {
+        const mq = window.matchMedia(query);
+        const handleChange = (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 () => {
+                mq.removeListener(handleChange);
+            };
+        }
+        mq.addEventListener("change", handleChange);
+        return () => {
+            mq.removeEventListener("change", handleChange);
+        };
+    }, [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) {
+    const temp = Object.keys(breakpoints).map((key) => {
+        const br = key;
+        return [br, breakpoints[br]];
+    });
+    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
+    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
+    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}
+     */
+    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) => {
+        const brNext = getNext(br);
+        // TODO: if br does not exists otherwise throw Error
+        return brNext && `@media (max-width: ${breakpoints[brNext] - 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
+     */
+    const only = (br) => {
+        const brNext = getNext(br);
+        return brNext ? between(br, brNext) : min(br);
+    };
+    return {
+        min,
+        max,
+        up,
+        down,
+        between,
+        only,
+    };
+}
+exports.generateMediaQueries = generateMediaQueries;

package/node/styles/spacing.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
+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 += `${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;
+        }`;
+            }
+        }
+    }
+    return css;
+}
+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, 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));
+}
+exports.spacingVertical = spacingVertical;

package/node/styles/styled.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
+function colStretch(direction, bg) {
+    return `
+    background: ${bg};
+    position: relative;
+
+    &:before{
+      z-index: -1;
+      content: '';
+      position: absolute;
+      right: ${direction === "left" ? "100%" : "-100vw"};
+      left: ${direction === "right" ? "100%" : "-100vw"};
+      top: 0;
+      bottom: 0;
+      background: ${bg};
+    }
+  `;
+}
+exports.colStretch = colStretch;
+/** @see https://caniuse.com/?search=inset */
+exports.inset0 = `top:0;left:0;right:0;bottom:0;`;
+exports.overlay = `position: absolute;${exports.inset0}`;
+exports.centered = `display: flex;align-items: center;justify-content: center;`;
+exports.ellipsis = `overflow: hidden;text-overflow: ellipsis;white-space: nowrap;`;
+/**
+ * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
+ */
+exports.invisible = `border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;`;
+exports.stateFocus = `outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);`;

package/node/styles/theme--vanilla.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.getInitialThemeFromRequest = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("@koine/utils");
+const react_use_1 = require("react-use");
+exports.THEME_KEY = "theme";
+exports.THEME_DEFAULT = "light";
+const getInitialThemeFromRequest = (cookie) => {
+    if (cookie) {
+        const parsed = (0, utils_1.parseCookie)(cookie);
+        return parsed?.theme;
+    }
+    return exports.THEME_DEFAULT;
+};
+exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
+const getInitialThemeFromClient = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+        const storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
+        if (typeof storedPrefs === "string") {
+            return storedPrefs;
+        }
+        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        if (userMedia.matches) {
+            return "dark";
+        }
+    }
+    return exports.THEME_DEFAULT;
+};
+exports.getInitialThemeFromClient = getInitialThemeFromClient;
+exports.ThemeVanillaContext = (0, react_1.createContext)({
+    theme: "light",
+    setTheme: undefined,
+});
+const ThemeVanillaProvider = ({ initialTheme, children, }) => {
+    const [theme, setTheme] = (0, react_1.useState)(initialTheme);
+    const rawSetTheme = (rawTheme) => {
+        if (!rawTheme || !utils_1.isBrowser) {
+            return;
+        }
+        const root = window.document.documentElement;
+        const isDark = rawTheme === "dark";
+        root.classList.remove(isDark ? "light" : "dark");
+        root.classList.add(rawTheme);
+        localStorage.setItem(exports.THEME_KEY, rawTheme);
+        (0, utils_1.setCookie)(exports.THEME_KEY, rawTheme);
+    };
+    (0, react_use_1.useMount)(() => {
+        const theme = (0, exports.getInitialThemeFromClient)();
+        setTheme(theme);
+        rawSetTheme(theme);
+    });
+    (0, react_use_1.useUpdateEffect)(() => {
+        rawSetTheme(theme);
+    }, [theme]);
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
+};
+exports.ThemeVanillaProvider = ThemeVanillaProvider;

package/node/styles/theme.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
+const styled_components_1 = require("styled-components");
+const DEFAULT_BREAKPOINTS = {
+    xs: 0,
+    sm: 440,
+    md: 768,
+    lg: 1024,
+    xl: 1368,
+    xxl: 1690,
+};
+/**
+ * You can override the default breakpoints through the .env variable
+ *
+ * FIXME: find a better way to configure it, the problem is that we use the media
+ * queries within this pre-compiled library and thrught it was better to avoid
+ * using theming props for a more ergonomic usage.
+ *
+ * ```.env
+ * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
+ * ```
+ */
+exports.breakpoints = process.env["BREAKPOINTS"]
+    ? process.env["BREAKPOINTS"].split(",").reduce((map, pair) => {
+        const [key, value] = pair.split(":");
+        map[key] = parseFloat(value);
+        return map;
+    }, {})
+    : DEFAULT_BREAKPOINTS;
+const themeDefault = {
+    maxWidth: exports.breakpoints.xxl,
+    breakpoints: exports.breakpoints,
+    devices: {
+        mobile: "sm",
+        tablet: "md",
+        desktop: "lg",
+    },
+};
+const createTheme = (options) => ({
+    ...themeDefault,
+    ...options,
+});
+exports.createTheme = createTheme;
+exports.useTheme = styled_components_1.useTheme;

package/node/tw/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../shared"), exports);
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+var bare_1 = require("../Dialog/tw/bare");
+Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/node/twm/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../shared"), exports);
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+var framer_1 = require("../Dialog/tw/framer");
+Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_1.KoineDialog; } });
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/node/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,4 +1,5 @@
 {
+  "version": "1.0.9",
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
@@ -8,27 +9,7 @@
     "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.13"
   },
-  "version": "1.0.8",
-  "main": "./index.umd.js",
-  "module": "./index.js",
+  "main": "./node/index.js",
   "typings": "./index.d.ts",
-  "peerDependencies": {
-    "styled-components": "^5.3.5",
-    "framer-motion": "^6.2.9",
-    "react": ">=17.0.2 || >=18.0.0",
-    "@mui/base": "^5.0.0-alpha.76",
-    "@koine/utils": "1.0.8",
-    "react-icons": "^4.3.1",
-    "date-fns": "^2.28.0",
-    "react-swipeable": "^6.2.1",
-    "@reach/disclosure": "^0.16.2",
-    "@reach/dialog": "^0.16.2",
-    "@tiptap/react": "^2.0.0-beta.108",
-    "@tiptap/starter-kit": "^2.0.0-beta.183",
-    "yup": "^0.32.11",
-    "react-hook-form": "^7.29.0",
-    "@n8tb1t/use-scroll-position": "^2.0.3",
-    "react-use": "^17.3.2",
-    "@reach/tabs": "^0.16.4"
-  }
+  "module": "./index.js"
 }

package/sc/index.d.ts

@@ -0,0 +1,29 @@
+export * from "../shared";
+export * from "../Alert";
+export * from "../Animations";
+export * from "../Autocomplete";
+export * from "../Bg";
+export * from "../Breadcrumbs";
+export * from "../Buttons";
+export * from "../Carousel";
+export * from "../Collapsable";
+export * from "../Debug";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/bare";
+export * from "../Forms";
+export * from "../Grid";
+export * from "../Hamburger";
+export * from "../Header";
+export * from "../Hidden";
+export * from "../Img";
+export * from "../Link";
+export * from "../MenuItem";
+export * from "../Pagination";
+export * from "../Pill";
+export * from "../Progress";
+export * from "../Rating";
+export * from "../Sidebar";
+export * from "../Spacing";
+export * from "../Sticky";
+export * from "../styles";
+export * from "../Tabs";
+export * from "../Typography";

package/sc/index.js

@@ -0,0 +1,30 @@
+export * from "../shared";
+export * from "../Alert";
+export * from "../Animations";
+export * from "../Autocomplete";
+export * from "../Bg";
+export * from "../Breadcrumbs";
+export * from "../Buttons";
+export * from "../Carousel";
+export * from "../Collapsable";
+export * from "../Debug";
+export { KoineDialog } from "../Dialog/sc/bare";
+export * from "../Forms";
+export * from "../Grid";
+export * from "../Hamburger";
+export * from "../Header";
+export * from "../Hidden";
+export * from "../Img";
+export * from "../Link";
+export * from "../MenuItem";
+export * from "../Pagination";
+export * from "../Pill";
+export * from "../Progress";
+export * from "../Rating";
+// export * from "../Select";
+export * from "../Sidebar";
+export * from "../Spacing";
+export * from "../Sticky";
+export * from "../styles";
+export * from "../Tabs";
+export * from "../Typography";

package/sc/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/sc/index.js",
+  "types": "./index.d.ts"
+}

package/scm/index.d.ts

@@ -0,0 +1,29 @@
+export * from "../shared";
+export * from "../Alert";
+export * from "../Animations";
+export * from "../Autocomplete";
+export * from "../Bg";
+export * from "../Breadcrumbs";
+export * from "../Buttons";
+export * from "../Carousel";
+export * from "../Collapsable";
+export * from "../Debug";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/framer";
+export * from "../Forms";
+export * from "../Grid";
+export * from "../Hamburger";
+export * from "../Header";
+export * from "../Hidden";
+export * from "../Img";
+export * from "../Link";
+export * from "../MenuItem";
+export * from "../Pagination";
+export * from "../Pill";
+export * from "../Progress";
+export * from "../Rating";
+export * from "../Sidebar";
+export * from "../Spacing";
+export * from "../Sticky";
+export * from "../styles";
+export * from "../Tabs";
+export * from "../Typography";