@koine/react 1.0.3 → 1.0.8

package/Alert/Alert.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const AlertRoot = styled.div `
+  font-size: 12px;
+  ${(p) => (p.$danger ? `color: var(--danger)` : "")}
+`;
+const AlertInner = styled.div `
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.05);
+  /* border: 1px solid var(--grey700); */
+  /* background: pink; */
+  /* color: red; */
+`;
+export const Alert = (_a) => {
+    var { $danger, children } = _a, props = __rest(_a, ["$danger", "children"]);
+    return (_jsx(AlertRoot, Object.assign({ "$danger": $danger }, props, { children: _jsx(AlertInner, { children: children }) })));
+};

package/Alert/index.js

@@ -0,0 +1 @@
+export * from "./Alert";

package/Animations/Reveal.js

@@ -0,0 +1,17 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion, } from "framer-motion";
+import { useReveal } from "./useReveal";
+export const Reveal = (_a) => {
+    var { children, direction, offsetStartY, offsetEndY, offsetStartX } = _a, props = __rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
+    const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
+    const prefersReducedMotion = useReducedMotion();
+    const { ref, startY, endY, startX } = useReveal(effectOptions);
+    const { scrollYProgress } = useViewportScroll();
+    const xRange = useTransform(scrollYProgress, [startY, endY], [startX, 0]);
+    const opacityRange = useTransform(scrollYProgress, [startY, endY], [0, 1]);
+    const x = useSpring(xRange, { stiffness: 400, damping: 90 });
+    const opacity = useSpring(opacityRange);
+    // console.log("start, end", startY, endY)
+    return (_jsx(motion.div, Object.assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x, opacity } }, { children: children })));
+};

package/Animations/Underline.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { m } from "framer-motion";
+export const UnderlineSkewed = styled(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

@@ -0,0 +1,3 @@
+export * from "./Reveal";
+export * from "./Underline";
+export * from "./useReveal";

package/Animations/useReveal.js

@@ -0,0 +1,70 @@
+import { useRef, useState, useEffect } from "react";
+export function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) {
+    const ref = useRef(null);
+    const [startY, setStartY] = useState(0);
+    const [endY, setEndY] = useState(0);
+    const [startX, setStartX] = useState(0);
+    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

@@ -0,0 +1,158 @@
+// TODO: remove, just use mui version...
+export const Autocomplete = null;
+// import {
+//   forwardRef,
+//   useCallback,
+//   useState,
+//   ForwardedRef,
+//   ReactNode,
+//   ComponentPropsWithRef,
+//   CSSProperties,
+// } from "react";
+// import { useCombobox } from "downshift";
+// import { 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>
+//     );
+//   }
+// );

package/Autocomplete/AutocompleteDownshiftMultiselect.js

@@ -0,0 +1,353 @@
+// TODO: remove, just use mui version...
+export const Autocomplete = null;
+// import {
+//   forwardRef,
+//   useCallback,
+//   useEffect,
+//   useRef,
+//   useState,
+//   ForwardedRef,
+//   ReactNode,
+//   ComponentPropsWithRef,
+//   CSSProperties,
+// } from "react";
+// import { SetRequired } from "@koine/utils";
+// import {
+//   useCombobox,
+//   useMultipleSelection,
+//   UseMultipleSelectionProps,
+//   UseMultipleSelectionStateChange,
+//   UseMultipleSelectionReturnValue,
+// } from "downshift";
+// import { usePopper } from "react-popper"; // imports from downshift demo
+// // import { useDeepCompareEffect } from "react-use"; // imports from downshift demo
+// import type { Option } from "../types";
+// import {
+//   normaliseOptions,
+//   defaultOptionsFilterFn,
+//   triggerOnChange,
+// } from "../Forms/helpers";
+// import {
+//   AutocompleteRoot,
+//   AutocompleteLabel,
+//   AutocompleteWrap,
+//   AutocompleteInner,
+//   AutocompleteItem,
+//   AutocompleteItemLabel,
+//   AutocompleteItemRemove,
+//   AutocompleteInputWrap,
+//   AutocompleteInput,
+//   AutocompleteInputArrow,
+//   AutocompleteMenu,
+//   AutocompleteMenuItem,
+// } from "./components";
+// const USE_POPPER = false;
+// export type AutocompleteItem = Option;
+// export type AutocompleteValue = AutocompleteItem[];
+// export type AutocompleteProps = SetRequired<
+//   Omit<ComponentPropsWithRef<"input">, "defaultValue" | "onSelect">,
+//   "onChange" | "name"
+// > & {
+//   selectedItems: UseMultipleSelectionReturnValue<AutocompleteItem>["selectedItems"];
+//   onSelectedItemsChange: UseMultipleSelectionProps<AutocompleteItem>["onSelectedItemsChange"];
+//   onCreateItem: (item?: AutocompleteItem) => any;
+//   creatable?: boolean;
+//   onSelect?: (value?: AutocompleteValue) => any;
+//   options?: AutocompleteItem[];
+//   loadOptions?: (query?: string) => Promise<AutocompleteItem[]>;
+//   label?: string | ReactNode;
+//   defaultValue?: AutocompleteValue | string[];
+//   className?: string;
+//   style?: CSSProperties;
+//   $ref?: ForwardedRef<HTMLInputElement>;
+// };
+// /**
+//  * @see https://www.downshift-js.com/use-multiple-selection
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/hooks/useMultipleSelection/combobox.js
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/downshift/ordered-examples/05-multi-create.js
+//  */
+// export const _Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function _Autocomplete(
+//     {
+//       selectedItems,
+//       onSelectedItemsChange,
+//       onCreateItem,
+//       creatable,
+//       onSelect,
+//       options = [],
+//       label,
+//       loadOptions,
+//       $ref,
+//       className,
+//       style,
+//       ...props
+//     },
+//     ref
+//   ) {
+//     options = normaliseOptions(options);
+//     const [isCreating, setIsCreating] = useState(false);
+//     const [filteredOptions, setFilteredOptions] = useState(options);
+//     const disclosureRef = useRef(null);
+//     const popoverRef = useRef(null);
+//     const { styles, attributes } = USE_POPPER
+//       ? usePopper(disclosureRef.current, popoverRef.current, {
+//           placement: "bottom-start",
+//         })
+//       : { styles: {}, attributes: {} };
+//     const {
+//       getSelectedItemProps,
+//       getDropdownProps,
+//       addSelectedItem,
+//       removeSelectedItem,
+//       // selectedItems,
+//       activeIndex,
+//     } = useMultipleSelection<AutocompleteItem>({
+//       selectedItems,
+//       onSelectedItemsChange,
+//       // onSelectedItemsChange: ({ selectedItems = [] }) => {
+//       //   triggerChange(selectedItems);
+//       // },
+//       // initialSelectedItems: normaliseOptions(defaultValue),
+//       stateReducer: (_, actionAndChanges) => {
+//         const { type, changes } = actionAndChanges;
+//         switch (type) {
+//           case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+//             return {
+//               ...changes,
+//               activeIndex: undefined,
+//             };
+//           default:
+//             return changes;
+//         }
+//       },
+//     });
+//     const selectedItemsValues = selectedItems.map((item) => item.value);
+//     const {
+//       isOpen,
+//       getToggleButtonProps,
+//       getLabelProps,
+//       getMenuProps,
+//       getInputProps,
+//       getComboboxProps,
+//       highlightedIndex,
+//       getItemProps,
+//       openMenu,
+//       selectItem,
+//       setHighlightedIndex,
+//       inputValue,
+//     } = useCombobox<null | AutocompleteItem>({
+//       selectedItem: null,
+//       items: filteredOptions,
+//       onInputValueChange: ({ inputValue }) => {
+//         // perhaps allows the optionsFilterFn as prop
+//         const filteredItems = defaultOptionsFilterFn(options, inputValue);
+//         if (creatable && isCreating && filteredItems.length > 0) {
+//           setIsCreating(false);
+//         }
+//         setFilteredOptions(filteredItems);
+//       },
+//       stateReducer: (state, actionAndChanges) => {
+//         const { changes, type } = actionAndChanges;
+//         switch (type) {
+//           case useCombobox.stateChangeTypes.InputBlur:
+//             return {
+//               ...changes,
+//               highlightedIndex: state.highlightedIndex,
+//               // clear input on blur to avoid have "pending" uncompleted behaviours
+//               inputValue: "",
+//             };
+//           case useCombobox.stateChangeTypes.InputKeyDownEnter:
+//           case useCombobox.stateChangeTypes.ItemClick:
+//             return {
+//               ...changes,
+//               highlightedIndex: state.highlightedIndex,
+//               isOpen: true,
+//               inputValue: "",
+//             };
+//           default:
+//             return changes;
+//         }
+//       },
+//       onStateChange: ({ type, selectedItem }) => {
+//         switch (type) {
+//           case useCombobox.stateChangeTypes.InputKeyDownEnter:
+//           case useCombobox.stateChangeTypes.ItemClick:
+//             if (selectedItem) {
+//               if (selectedItemsValues.includes(selectedItem.value)) {
+//                 removeSelectedItem(selectedItem);
+//               } else {
+//                 if (creatable && onCreateItem) {
+//                   onCreateItem(selectedItem);
+//                 }
+//                 addSelectedItem(selectedItem);
+//                 if (isCreating) {
+//                   setIsCreating(false);
+//                   setFilteredOptions(options);
+//                 }
+//               }
+//               selectItem(null);
+//             }
+//             break;
+//           default:
+//             break;
+//         }
+//       },
+//     });
+//     useEffect(() => {
+//       if (
+//         creatable &&
+//         filteredOptions.length === 0 &&
+//         activeIndex === -1 &&
+//         inputValue.length > 0
+//       ) {
+//         setIsCreating(true);
+//         setFilteredOptions(normaliseOptions([inputValue]));
+//         setHighlightedIndex(0);
+//       }
+//     }, [
+//       creatable,
+//       filteredOptions,
+//       setIsCreating,
+//       setHighlightedIndex,
+//       inputValue,
+//       activeIndex,
+//     ]);
+//     // useEffect(() => {
+//     //   setSelectedItems(normaliseOptions(defaultValue));
+//     // }, [defaultValue]);
+//     // useDeepCompareEffect(() => {
+//     //   setFilteredOptions(options);
+//     // }, [options]);
+//     // useDeepCompareEffect(() => {
+//     //   triggerChange(values);
+//     // }, [values]);
+//     return (
+//       <AutocompleteRoot>
+//         {label && (
+//           <AutocompleteLabel {...getLabelProps()}>{label}</AutocompleteLabel>
+//         )}
+//         <AutocompleteWrap
+//           {...getComboboxProps({
+//             ref: disclosureRef,
+//           })}
+//         >
+//           <AutocompleteInner>
+//             {selectedItems.map((selectedItem, index) => (
+//               <AutocompleteItem
+//                 key={`selected-item-${index}`}
+//                 {...getSelectedItemProps({ selectedItem, index })}
+//               >
+//                 <AutocompleteItemLabel>
+//                   {selectedItem?.label || selectedItem}
+//                 </AutocompleteItemLabel>
+//                 <AutocompleteItemRemove
+//                   onClick={(e) => {
+//                     e.stopPropagation();
+//                     removeSelectedItem(selectedItem);
+//                   }}
+//                 >
+//                   &#10005;
+//                 </AutocompleteItemRemove>
+//               </AutocompleteItem>
+//             ))}
+//             <AutocompleteInputWrap>
+//               <AutocompleteInput
+//                 {...getInputProps({
+//                   ...getDropdownProps({
+//                     // this option used in the official example prevents the
+//                     // backspace key to behave correctly
+//                     // preventKeyAction: isOpen,
+//                     onClick: isOpen ? () => {} : openMenu,
+//                     onFocus: isOpen ? () => {} : openMenu,
+//                     ref: $ref || ref,
+//                     // ref: disclosureRef,
+//                   }),
+//                   // ref: $ref || ref,
+//                 })}
+//                 {...props}
+//               />
+//             </AutocompleteInputWrap>
+//           </AutocompleteInner>
+//           {!!filteredOptions.length && (
+//             <AutocompleteInputArrow
+//               {...getToggleButtonProps()}
+//               aria-label={"toggle menu"}
+//               isOpen={isOpen}
+//             />
+//           )}
+//         </AutocompleteWrap>
+//         <AutocompleteMenu
+//           style={styles.popper}
+//           {...attributes.popper}
+//           {...getMenuProps({ ref: popoverRef })}
+//         >
+//           {isOpen &&
+//             filteredOptions.map((item, index) => (
+//               <AutocompleteMenuItem
+//                 $active={highlightedIndex === index}
+//                 key={`${item.value}${index}`}
+//                 {...getItemProps({ item, index })}
+//               >
+//                 {isCreating ? (
+//                   <>
+//                     <span>+</span> <strong>{item.label}</strong>
+//                   </>
+//                 ) : (
+//                   <>
+//                     {/* {selectedItemsValues.includes(item.value) && (
+//                       <CheckboxToggle />
+//                     )} */}
+//                     {item.label}
+//                   </>
+//                 )}
+//               </AutocompleteMenuItem>
+//             ))}
+//         </AutocompleteMenu>
+//       </AutocompleteRoot>
+//     );
+//   }
+// );
+// /**
+//  * @see https://www.downshift-js.com/use-multiple-selection
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/hooks/useMultipleSelection/combobox.js
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/downshift/ordered-examples/05-multi-create.js
+//  */
+// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function Autocomplete(
+//     { defaultValue = [], onChange, onSelect, name, ...props },
+//     ref
+//   ) {
+//     const [selectedItems, setSelectedItems] = useState(
+//       normaliseOptions(defaultValue)
+//     );
+//     const triggerChange = useCallback(
+//       (values: AutocompleteValue) => {
+//         triggerOnChange(
+//           onChange,
+//           name,
+//           values.map((item) => item.value || item)
+//         );
+//         if (onSelect) onSelect(values);
+//       },
+//       [onChange, onSelect, name]
+//     );
+//     const handleCreateItem = (item?: AutocompleteItem) => {
+//       // setSelectedItems((curr) => [...curr, item]);
+//     };
+//     const handleSelectedItemsChange = ({
+//       selectedItems = [],
+//     }: UseMultipleSelectionStateChange<AutocompleteItem>) => {
+//       setSelectedItems(selectedItems);
+//       triggerChange(selectedItems);
+//     };
+//     return (
+//       <_Autocomplete
+//         {...props}
+//         selectedItems={selectedItems}
+//         onSelectedItemsChange={handleSelectedItemsChange}
+//         onCreateItem={handleCreateItem}
+//         $ref={ref}
+//       />
+//     );
+//   }
+// );