@koine/react 2.0.0-beta.10 → 2.0.0-beta.12

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.10",
-    "@koine/utils": "2.0.0-beta.10"
+    "@koine/dom": "2.0.0-beta.12",
+    "@koine/utils": "2.0.0-beta.12"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
@@ -51,22 +51,22 @@
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
-    "@mui/base": "5.0.0-beta.4",
-    "@mui/utils": "^5.13.6",
-    "@tiptap/react": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
+    "@mui/base": "5.0.0-beta.9",
+    "@mui/utils": "^5.14.3",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.17",
+    "framer-motion": "^10.15.0",
     "react": "^18.2.0",
-    "react-hook-form": "^7.45.0",
+    "react-hook-form": "^7.45.2",
     "react-icons": "^4.10.1",
     "react-swipeable": "^7.0.1",
     "styled-components": "^5.3.11",
-    "tslib": "^2.5.3",
-    "type-fest": "^3.12.0"
+    "tslib": "^2.6.1",
+    "type-fest": "^4.1.0"
   },
   "module": "./index.mjs",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "version": "2.0.0-beta.10"
+  "version": "2.0.0-beta.12"
 }

package/Alert/Alert.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Alert", {
-    enumerable: true,
-    get: function() {
-        return Alert;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const AlertRoot = _styledcomponents.default.div`
-  font-size: 12px;
-  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
-`;
-const AlertInner = _styledcomponents.default.div`
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRoot, {
-        $danger: $danger,
-        ...props,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertInner, {
-            children: children
-        })
-    });
-};

package/Alert/Alert.stories.js

@@ -1,39 +0,0 @@
-"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, {
-    default: function() {
-        return _default;
-    },
-    bare: function() {
-        return bare;
-    },
-    danger: function() {
-        return danger;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _Alert = require("./Alert");
-const _default = {
-    component: _Alert.Alert,
-    title: "Base/Alert"
-};
-const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.Alert, {
-        ...args
-    });
-const bare = Template.bind({});
-bare.args = {
-    children: "An alert message"
-};
-const danger = Template.bind({});
-danger.args = {
-    children: "A dangerous message",
-    $danger: true
-};

package/Alert/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Alert"), exports);

package/Animations/Reveal.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Reveal", {
-    enumerable: true,
-    get: function() {
-        return Reveal;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _framermotion = require("framer-motion");
-const _useReveal = require("./useReveal");
-const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
-    const effectOptions = {
-        direction,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX
-    };
-    const prefersReducedMotion = (0, _framermotion.useReducedMotion)();
-    const { ref, startY, endY, startX } = (0, _useReveal.useReveal)(effectOptions);
-    const { scrollYProgress } = (0, _framermotion.useViewportScroll)();
-    const xRange = (0, _framermotion.useTransform)(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        startX,
-        0
-    ]);
-    const opacityRange = (0, _framermotion.useTransform)(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        0,
-        1
-    ]);
-    const x = (0, _framermotion.useSpring)(xRange, {
-        stiffness: 400,
-        damping: 90
-    });
-    const opacity = (0, _framermotion.useSpring)(opacityRange);
-    // console.log("start, end", startY, endY)
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.motion.div, {
-        ...props,
-        ref: ref,
-        style: prefersReducedMotion ? {} : {
-            x,
-            opacity
-        },
-        children: children
-    });
-};

package/Animations/Underline.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "UnderlineSkewed", {
-    enumerable: true,
-    get: function() {
-        return UnderlineSkewed;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _framermotion = require("framer-motion");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const UnderlineSkewed = (0, _styledcomponents.default)(_framermotion.m.i)`
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 15%;
-  right: 15%;
-  height: 20px;
-  margin-top: -10px;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--accent400);
-  transform: skewY(-5deg);
-`;

package/Animations/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Reveal"), exports);
-_export_star._(require("./Underline"), exports);
-_export_star._(require("./useReveal"), exports);

package/Animations/useReveal.js

@@ -1,83 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useReveal", {
-    enumerable: true,
-    get: function() {
-        return useReveal;
-    }
-});
-const _react = require("react");
-function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all" }) {
-    const ref = (0, _react.useRef)(null);
-    const [startY, setStartY] = (0, _react.useState)(0);
-    const [endY, setEndY] = (0, _react.useState)(0);
-    const [startX, setStartX] = (0, _react.useState)(0);
-    (0, _react.useEffect)(()=>{
-        if (!ref.current) {
-            return;
-        }
-        const rect = ref.current.getBoundingClientRect();
-        // scroll position from top of the window
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const elementHeight = rect.height;
-        // rect.top is the distance from the currently visible viewport to the top
-        // of the given element
-        // so distanceTop is the distance between the top edge of the window and the
-        // top edge of the given element
-        const elementTop = rect.top;
-        const distanceTop = elementTop + scrollTop;
-        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
-        // the distance of the element from the top divided by the full height
-        // of the window gives back the start position of the given element in
-        // a scale from 0 to 1
-        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
-        // same for the end, we just add the given element height to the first value
-        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        let startX;
-        if (offsetStartX === "all") {
-            startX = direction === "left" ? -rect.right : rect.left;
-        } else {
-            startX = rect.width * offsetStartX;
-            startX = direction === "left" ? -startX : startX;
-        }
-        // addMarker(startY + "px");
-        // addMarker(endY + "px");
-        // console.log("start", startY, "end", endY, "startX", startX)
-        setStartY(startY);
-        setEndY(endY);
-        setStartX(startX);
-    // addMarker(startY * 100 + "%", "blue", "fixed");
-    // addMarker(endY * 100 + "%", "blue", "fixed");
-    }, [
-        setStartY,
-        setEndY,
-        setStartX,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX,
-        direction
-    ]);
-    return {
-        ref,
-        startY,
-        endY,
-        startX
-    };
-} // function addMarker(top: string, color = "red", position = "absolute") {
- //   const div = document.createElement("div");
- //   div.setAttribute(
- //     "style",
- //     `
- //     position: ${position};
- //     top: ${top};
- //     left: 0;
- //     right: 0;
- //     height: 1px;
- //     background: ${color};
- //   `
- //   );
- //   document.body.appendChild(div);
- // }

package/Autocomplete/AutocompleteDownshift.js

@@ -1,167 +0,0 @@
-// TODO: remove, just use mui version...
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Autocomplete", {
-    enumerable: true,
-    get: function() {
-        return Autocomplete;
-    }
-});
-const Autocomplete = null; // import {
- //   forwardRef,
- //   useCallback,
- //   useState,
- //   ForwardedRef,
- //   ReactNode,
- //   ComponentPropsWithRef,
- //   CSSProperties,
- // } from "react";
- // import { useCombobox } from "downshift";
- // import type { SetRequired } from "@koine/utils";
- // // import debounce from "lodash.debounce";
- // import {
- //   AutocompleteRoot,
- //   AutocompleteLabel,
- //   AutocompleteInputWrap,
- //   AutocompleteInput,
- //   AutocompleteInputArrow,
- //   AutocompleteMenu,
- //   AutocompleteMenuItem,
- // } from "./components";
- // import { defaultOptionsFilterFn, triggerOnChange } from "../Forms/helpers";
- // import { InputProgress } from "../Forms/styles";
- // export type AutocompleteOption = Option;
- // export type AutocompleteValue = null | AutocompleteOption;
- // export type AutocompleteProps = SetRequired<
- //   Omit<ComponentPropsWithRef<"input">, "onSelect">,
- //   "onChange" | "name"
- // > & {
- //   freeSolo?: boolean;
- //   onSelect?: (option?: AutocompleteValue) => any;
- //   options?: AutocompleteOption[];
- //   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
- //   label?: string | ReactNode;
- //   className?: string;
- //   style?: CSSProperties;
- //   $ref: ForwardedRef<HTMLInputElement>;
- // };
- // export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
- //   function Autocomplete(
- //     {
- //       freeSolo,
- //       onSelect,
- //       options = [],
- //       label,
- //       name,
- //       value,
- //       onChange,
- //       loadOptions,
- //       className,
- //       style,
- //       $ref,
- //       ...props
- //     },
- //     ref
- //   ) {
- //     const [items, setItems] = useState(options);
- //     const [loading, setLoading] = useState(false);
- //     const triggerChange = useCallback(
- //       (selectedItem?: AutocompleteValue, inputValue?: string) => {
- //         const value = freeSolo ? inputValue : selectedItem?.value;
- //         triggerOnChange(onChange, name, value || "");
- //         if (onSelect) onSelect(selectedItem);
- //       },
- //       [onChange, onSelect, name, freeSolo]
- //     );
- //     const handleInputValueChange = useCallback(
- //       async ({ inputValue }) => {
- //         if (inputValue) {
- //           if (loadOptions) {
- //             setLoading(true);
- //             try {
- //               const newOptions = await loadOptions(inputValue);
- //               setItems(newOptions);
- //             } catch (e) {}
- //             setLoading(false);
- //           } else {
- //             setItems(defaultOptionsFilterFn(options, inputValue));
- //           }
- //         } else {
- //           setItems(options);
- //           // clear like behaviour
- //           triggerChange({ value: "", label: "" });
- //         }
- //       },
- //       [loadOptions, triggerChange]
- //     );
- //     const {
- //       isOpen,
- //       // selectedItem,
- //       getToggleButtonProps,
- //       getLabelProps,
- //       getMenuProps,
- //       getInputProps,
- //       getComboboxProps,
- //       highlightedIndex,
- //       getItemProps,
- //       openMenu,
- //     } = useCombobox<null | AutocompleteOption>({
- //       id: `Autocomplete-${name}`,
- //       items,
- //       // initialInputValue: value,
- //       onSelectedItemChange: ({ selectedItem, inputValue }) => {
- //         triggerChange(selectedItem, inputValue);
- //       },
- //       // itemToString: (item) => (item ? item.label || item.value : ""),
- //       onInputValueChange: handleInputValueChange,
- //     });
- //     // const debouncedInputValueChangeHandler = useCallback(
- //     //   debounce(handleInputValueChange, 200),
- //     //   [handleInputValueChange]
- //     // );
- //     return (
- //       <AutocompleteRoot className={className} style={style}>
- //         {label && (
- //           <AutocompleteLabel {...getLabelProps()}>{label}</AutocompleteLabel>
- //         )}
- //         <AutocompleteInputWrap {...getComboboxProps()}>
- //           <AutocompleteInput
- //             {...getInputProps({
- //               onFocus: openMenu,
- //               onClick: openMenu,
- //               ref: $ref || ref,
- //               // itemRef: ref,
- //             })}
- //             {...props}
- //           />
- //           {!!items.length && (
- //             <AutocompleteInputArrow
- //               {...getToggleButtonProps()}
- //               aria-label={"toggle menu"}
- //             />
- //           )}
- //           {loading && <InputProgress />}
- //         </AutocompleteInputWrap>
- //         <AutocompleteMenu {...getMenuProps()}>
- //           {isOpen &&
- //             items
- //               // .filter(item => !inputValue || item.includes(inputValue))
- //               .map(
- //                 (item, index) =>
- //                   item && (
- //                     <AutocompleteMenuItem
- //                       $active={highlightedIndex === index}
- //                       key={`${item.value}${index}`}
- //                       {...getItemProps({ item, index })}
- //                     >
- //                       {item.label}
- //                     </AutocompleteMenuItem>
- //                   )
- //               )}
- //         </AutocompleteMenu>
- //       </AutocompleteRoot>
- //     );
- //   }
- // );