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

package/Sidebar/Sidebar.js

@@ -1,27 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sidebar = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var gr_1 = require("react-icons/gr");
-var cg_1 = require("react-icons/cg");
-var media_1 = require("../styles/media");
-var Buttons_1 = require("../Buttons");
-var Header_1 = require("../Header");
-var SidebarWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return "".concat(media_1.max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+import { __makeTemplateObject, __read } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { CgCloseR as IconClose } from "react-icons/cg";
+import { GrFolderOpen as IconOpen } from "react-icons/gr";
+import styled from "styled-components";
+import { IconButtonFab } from "../Buttons/index.js";
+import { useHeader } from "../Header/index.js";
+import { max, min } from "../styles/media.js";
+var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
 });
-var SidebarToggle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), media_1.min.md);
-var Sidebar = function (_a) {
+var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
+export var Sidebar = function (_a) {
     var children = _a.children;
-    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
-    var _c = (0, Header_1.useHeader)(), headerHeight = _c[2];
-    var handleClickToggle = (0, react_1.useCallback)(function () {
+    var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
+    var _c = __read(useHeader(), 3), headerHeight = _c[2];
+    var handleClickToggle = useCallback(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, { onClick: handleClickToggle, children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, { "$variant": "contained", children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) }) }), (0, jsx_runtime_1.jsx)(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
 };
-exports.Sidebar = Sidebar;
 var templateObject_1, templateObject_2;

package/Sidebar/index.d.ts

@@ -1 +1 @@
-export * from "./Sidebar";
+export * from "./Sidebar.js";

package/Sidebar/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Sidebar"), exports);
+export * from "./Sidebar.js";

package/Spacing/Spacing.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
+import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing.js";
 export type SpacingPropsStyled = {
     $top?: SpacingFnArgs;
     $bottom?: SpacingFnArgs;
@@ -14,17 +13,5 @@ type SpacingSyntaxFactor = string;
 type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
 type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
 export type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
 export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/Spacing/Spacing.js

@@ -1,32 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacing = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-var spacing_1 = require("../styles/spacing");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__spreadArray([p.theme], p.$bottom, false)); });
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { isUndefined } from "@koine/utils";
+import { spacingBottom, spacingTop, } from "../styles/spacing.js";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], __read(p.$top), false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], __read(p.$bottom), false)); });
 var extractDirectionArgs = function (raw) {
-    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = (0, isUndefined_1.default)(factor) ? undefined : parseFloat(factor);
+    var _a = __read(raw.split(":"), 4), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
-var Spacing = function (_a) {
-    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
     var $top;
     var $bottom;
     if (top) {
@@ -40,10 +25,8 @@ var Spacing = function (_a) {
         $bottom = $top;
     }
     if (!$top && !$bottom && !vertical) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+        return _jsx(_Fragment, { children: props.children });
     }
-    return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
 };
-exports.Spacing = Spacing;
 var templateObject_1;

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+export * from "./Spacing.js";

package/Spacing/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Spacing"), exports);
+export * from "./Spacing.js";

package/Sticky/Sticky.js

@@ -1,222 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sticky = void 0;
-exports.Sticky = null;
-// import {
-//   Ref,
-//   CSSProperties,
-//   useState,
-//   useCallback,
-//   useEffect,
-//   useRef,
-// } from "react";
-// /**
-//  * Get current coordinates `left` and `top` of specific element.
-//  */
-// const offsetRelative = (element: HTMLElement) => {
-//   var result = { l: 0, t: 0 };
-//   do {
-//     let offsetTop = element.offsetTop;
-//     let offsetLeft = element.offsetLeft;
-//     if (!isNaN(offsetTop)) result.t += offsetTop;
-//     if (!isNaN(offsetLeft)) result.l += offsetLeft;
-//     // @ts-expect-error just rething everyhting in this file
-//     element =
-//       "BODY" === element.tagName ? element.parentElement : element.offsetParent;
-//   } while (element);
-//   return result;
-// };
-// export type StickyElementProps = {
-//   ref: Ref<HTMLDivElement>;
-//   sticky?: boolean;
-//   style: CSSProperties;
-// };
-// /**
-//  * - `0`: "STATIC": Static position as nothing happened
-//  * - `1`: "VIEWPORT-TOP": Sticked to the top screen edge
-//  * - `2`: "VIEWPORT-BOTTOM": Sticked to the bottom screen edge
-//  * - `4`: "VIEWPORT-UNBOTTOM": ? Scrolling in the middle of the element, neither sticked nor static
-//  * - `3`: "CONTAINER-BOTTOM": ?
-//  */
-// export type StickyStatus = 0 | 1 | 2 | 3;
-// type DimensionsBasic = [
-//   /** containerTop */
-//   number,
-//   /** containerHeight */
-//   number,
-//   /** containerBottom */
-//   number,
-//   /** elementHeight */
-//   number,
-//   /** elementWidth */
-//   number,
-//   /** viewportHeight */
-//   number,
-//   /** maxTranslateY */
-//   number
-// ];
-// type DimensionsOnScroll = [
-//   /** elementLeft */
-//   number,
-//   /** viewportTop */
-//   number,
-//   /** viewportBottom */
-//   number,
-//   /** viewportLeft */
-//   number,
-//   /** topSpacing */
-//   number,
-//   /** bottomSpacing */
-//   number
-//   /** translateY */
-//   // number,
-//   /** lastTopSpacing */
-//   // number,
-//   /** lastBottomSpacing */
-//   // number,
-//   /** lastViewportTop */
-//   // number,
-// ];
-// type Dimensions = DimensionsBasic & DimensionsOnScroll;
-// const getDimensionsBasic = (container: HTMLElement, inner: HTMLElement) => {
-//   const containerTop = offsetRelative(container).t;
-//   const containerHeight = container.clientHeight;
-//   const containerBottom = containerTop + containerHeight;
-//   const elementHeight = inner.offsetHeight;
-//   const elementWidth = inner.offsetWidth;
-//   const viewportHeight = window.innerHeight;
-//   const maxTranslateY = containerHeight - elementHeight;
-//   return [
-//     containerTop,
-//     containerHeight,
-//     containerBottom,
-//     elementHeight,
-//     elementWidth,
-//     viewportHeight,
-//     maxTranslateY,
-//   ] as DimensionsBasic;
-// };
-// const getDimensionsOnScroll = (
-//   wrapper: HTMLElement,
-//   container: HTMLElement,
-//   inner: HTMLElement
-// ) => {
-//   const elementLeft = offsetRelative(wrapper).l;
-//   const viewportTop =
-//     document.documentElement.scrollTop || document.body.scrollTop;
-//   const viewportBottom = viewportTop + window.innerHeight;
-//   const viewportLeft =
-//     document.documentElement.scrollLeft || document.body.scrollLeft;
-//   const topSpacing = 0; // TODO: make it a prop?
-//   const bottomSpacing = 0; // TODO: make it a prop?
-//   // const lastTopSpacing = topSpacing;
-//   // const lastBottomSpacing = bottomSpacing;
-//   return [
-//     elementLeft,
-//     viewportTop,
-//     viewportBottom,
-//     viewportLeft,
-//     topSpacing,
-//     bottomSpacing,
-//   ] as DimensionsOnScroll;
-// };
-// // const getTranslateYonScroll = (dimensions: DimensionsOnScroll, status: StickyStatus) => {
-// //   if (status === 1) {
-// //     // Adjust translate Y in the case decrease top spacing value.
-// //     if (dimensions[5] < dims.lastTopSpacing) {
-// //       dims.translateY += dims.lastTopSpacing - dims.topSpacing;
-// //       this._reStyle = true;
-// //     }
-// //   } else if (status === 2) {
-// //     // Adjust translate Y in the case decrease bottom spacing value.
-// //     if (dims.bottomSpacing < dims.lastBottomSpacing) {
-// //       dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
-// //       this._reStyle = true;
-// //     }
-// //   }
-// // }
-// export type StickyProps = {
-//   /** @default "div" */
-//   Wrapper?: FC<StickyElementProps>;
-//   /** @default "div" */
-//   Inner?: FC<StickyElementProps>;
-//   top: number;
-// };
-// export const Sticky: FC<StickyProps> = ({
-//   Wrapper = "div",
-//   Inner = "div",
-//   children,
-//   top,
-//   ...props
-// }) => {
-//   const [sticky, setSticky] = useState(false);
-//   const [shouldRestyle, setShouldRestyle] = useState<boolean>();
-//   const stickyStatus = useRef<StickyStatus>(0);
-//   const [dimensionsBasic, setDimensionsBasic] = useState<DimensionsBasic>();
-//   const [dimensionsOnScroll, setDimensionsOnScroll] =
-//     useState<DimensionsOnScroll>();
-//   const [translateY, setTranslateY] = useState<number>(0);
-//   const [styleWrapper, setStyleWrapper] = useState({});
-//   const [styleInner, setStyleInner] = useState({});
-//   const [innerWidth, setInnerWidth] = useState<string>();
-//   const wrapperRef = useRef<HTMLDivElement>(null);
-//   const innerRef = useRef<HTMLDivElement>(null);
-//   const handleScroll = useCallback(() => {
-//     const wrapper = wrapperRef?.current;
-//     const container = wrapper?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (wrapper && inner && container) {
-//       const dimensions = getDimensionsOnScroll(wrapper, container, inner);
-//       setDimensionsOnScroll(dimensions);
-//     }
-//   }, []);
-//   const handleResize = useCallback(() => {
-//     const container = wrapperRef?.current?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (inner && container) {
-//       setDimensionsBasic(getDimensionsBasic(container, inner));
-//       // if (innerRef?.current) {
-//       //   setInnerWidth(window.getComputedStyle(innerRef.current).width);
-//       // }
-//       // setSticky(wrapperRef.current.getBoundingClientRect().top <= top);
-//     }
-//   }, []);
-//   useEffect(() => {
-//     const container = wrapperRef?.current?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (inner && container) {
-//       setDimensionsBasic(getDimensionsBasic(container, inner));
-//     }
-//     window.addEventListener("scroll", handleScroll, { passive: true });
-//     window.addEventListener("resize", handleResize, { passive: true });
-//     return () => {
-//       window.removeEventListener("scroll", () => handleScroll);
-//       window.removeEventListener("resize", () => handleResize);
-//     };
-//   }, [wrapperRef, innerRef, handleScroll, handleResize]);
-//   // useEffect(() => {
-//   //   if (sticky) {
-//   //     setStyleInner({
-//   //       position: "fixed",
-//   //       zIndex: 1,
-//   //       top,
-//   //       width: innerWidth,
-//   //     });
-//   //   } else {
-//   //     setStyleInner({});
-//   //   }
-//   // }, [sticky, top, innerWidth]);
-//   return (
-//     <Wrapper
-//       ref={wrapperRef}
-//       sticky={Wrapper === "div" ? undefined : sticky}
-//       style={{
-//         position: "relative",
-//       }}
-//     >
-//       <Inner ref={innerRef} style={styleInner}>
-//         {children}
-//       </Inner>
-//     </Wrapper>
-//   );
-// };
+export var Sticky = null;

package/Sticky/StickyCss.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickyCss = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var StickyCss = function (_a) {
-    var top = _a.top, props = tslib_1.__rest(_a, ["top"]);
-    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { position: "sticky", top: 100 } }, props));
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var StickyCss = function (_a) {
+    var top = _a.top, props = __rest(_a, ["top"]);
+    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
 };
-exports.StickyCss = StickyCss;

package/Sticky/index.d.ts

@@ -1 +1 @@
-export { StickyCss, StickyCssProps } from "./StickyCss";
+export { StickyCss, StickyCssProps } from "./StickyCss.js";

package/Sticky/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickyCss = void 0;
-var StickyCss_1 = require("./StickyCss");
-Object.defineProperty(exports, "StickyCss", { enumerable: true, get: function () { return StickyCss_1.StickyCss; } });
+export { StickyCss } from "./StickyCss.js";