@wavv/ui 2.2.2-alpha.5 → 2.2.2-alpha.6

package/build/global-styles/GlobalStorybookStyles.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { Global, useTheme } from "@emotion/react";
+import { useEffect } from "react";
+import "sanitize.css";
+import webfontloader from "webfontloader";
+const loadFonts = (fonts)=>{
+    webfontloader.load({
+        google: {
+            families: fonts || [
+                'Roboto:100,300,400,500,700'
+            ]
+        }
+    });
+};
+const GlobalStorybookStyles = ({ families, fontFamily })=>{
+    const { scale1, scale10, font, toast, background0 } = useTheme();
+    useEffect(()=>{
+        loadFonts(families);
+    }, [
+        families
+    ]);
+    return /*#__PURE__*/ jsx(Global, {
+        styles: {
+            '.docs-story,.sb-show-main': {
+                backgroundColor: background0,
+                color: scale10
+            },
+            'html,body': {
+                margin: 0,
+                fontFamily: fontFamily || "'Roboto', sans-serif",
+                WebkitFontSmoothing: 'antialiased',
+                MozOsxFontSmoothing: 'grayscale'
+            },
+            '::-webkit-scrollbar': {
+                width: 8,
+                height: 8
+            },
+            '::-webkit-scrollbar-track': {
+                backgroundColor: 'transparent',
+                border: 'none'
+            },
+            '::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical': {
+                backgroundColor: scale1,
+                WebkitBorderRadius: 6
+            },
+            '*': {
+                scrollbarColor: `${scale1} transparent`
+            },
+            '.Toastify__toast': {
+                color: toast.color,
+                borderRadius: 4,
+                fontFamily: font.family.default
+            },
+            '.Toastify__close-button': {
+                color: toast.color
+            },
+            '.Toastify__toast--default': {
+                background: toast.background.default,
+                border: `1px solid ${toast.border.default}`
+            },
+            '.Toastify__toast--info': {
+                background: toast.background.info,
+                border: `1px solid ${toast.border.info}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.info
+                }
+            },
+            '.Toastify__toast--success': {
+                background: toast.background.success,
+                border: `1px solid ${toast.border.success}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.success
+                }
+            },
+            '.Toastify__toast--warning': {
+                background: toast.background.warning,
+                border: `1px solid ${toast.border.warning}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.warning
+                }
+            },
+            '.Toastify__toast--error': {
+                background: toast.background.error,
+                border: `1px solid ${toast.border.error}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.error
+                }
+            },
+            '.Toastify__progress-bar--default': {
+                background: toast.border.default
+            },
+            '.Toastify__progress-bar--info': {
+                background: toast.border.info
+            },
+            '.Toastify__progress-bar--success': {
+                background: toast.border.success
+            },
+            '.Toastify__progress-bar--warning': {
+                background: toast.border.warning
+            },
+            '.Toastify__progress-bar--error': {
+                background: toast.border.error
+            }
+        }
+    });
+};
+const global_styles_GlobalStorybookStyles = GlobalStorybookStyles;
+export { global_styles_GlobalStorybookStyles as default };

package/build/global-styles/ResetStyles.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import "sanitize.css";
+import { Global } from "@emotion/react";
+import webfontloader from "webfontloader";
+const loadFonts = (fonts)=>{
+    webfontloader.load({
+        google: {
+            families: fonts || [
+                'Roboto:100,300,400,500,700'
+            ]
+        }
+    });
+};
+const ResetStyles_ResetStyles = ({ families, fontFamily })=>{
+    useEffect(()=>{
+        loadFonts(families);
+    }, [
+        families
+    ]);
+    return /*#__PURE__*/ jsx(Global, {
+        styles: {
+            'html,body': {
+                margin: 0,
+                fontFamily: fontFamily || "'Roboto', sans-serif",
+                WebkitFontSmoothing: 'antialiased',
+                MozOsxFontSmoothing: 'grayscale'
+            }
+        }
+    });
+};
+const ResetStyles = ResetStyles_ResetStyles;
+export { ResetStyles as default };

package/build/global-styles/ScrollbarStyles.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Global, useTheme } from "@emotion/react";
+const ScrollbarStyles = ()=>{
+    const { scale1 } = useTheme();
+    return /*#__PURE__*/ jsx(Global, {
+        styles: {
+            '::-webkit-scrollbar': {
+                width: 8,
+                height: 8
+            },
+            '::-webkit-scrollbar-track': {
+                backgroundColor: 'transparent',
+                border: 'none'
+            },
+            '::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical': {
+                backgroundColor: scale1,
+                WebkitBorderRadius: 6
+            },
+            '*': {
+                scrollbarColor: `${scale1} transparent`
+            }
+        }
+    });
+};
+const global_styles_ScrollbarStyles = ScrollbarStyles;
+export { global_styles_ScrollbarStyles as default };

package/build/global-styles/ToastStyles.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { Global, useTheme } from "@emotion/react";
+const ToastStyles = ()=>{
+    const { font, toast } = useTheme();
+    return /*#__PURE__*/ jsx(Global, {
+        styles: {
+            '.Toastify__toast': {
+                color: toast.color,
+                borderRadius: 4,
+                fontFamily: font.family.default
+            },
+            '.Toastify__close-button': {
+                color: toast.color
+            },
+            '.Toastify__toast--default': {
+                background: toast.background.default,
+                border: `1px solid ${toast.border.default}`
+            },
+            '.Toastify__toast--info': {
+                background: toast.background.info,
+                border: `1px solid ${toast.border.info}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.info
+                }
+            },
+            '.Toastify__toast--success': {
+                background: toast.background.success,
+                border: `1px solid ${toast.border.success}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.success
+                }
+            },
+            '.Toastify__toast--warning': {
+                background: toast.background.warning,
+                border: `1px solid ${toast.border.warning}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.warning
+                }
+            },
+            '.Toastify__toast--error': {
+                background: toast.background.error,
+                border: `1px solid ${toast.border.error}`,
+                '& .Toastify__toast-icon > svg': {
+                    fill: toast.border.error
+                }
+            },
+            '.Toastify__progress-bar--default': {
+                background: toast.border.default
+            },
+            '.Toastify__progress-bar--info': {
+                background: toast.border.info
+            },
+            '.Toastify__progress-bar--success': {
+                background: toast.border.success
+            },
+            '.Toastify__progress-bar--warning': {
+                background: toast.border.warning
+            },
+            '.Toastify__progress-bar--error': {
+                background: toast.border.error
+            }
+        }
+    });
+};
+const global_styles_ToastStyles = ToastStyles;
+export { global_styles_ToastStyles as default };

package/build/global-styles/index.js

@@ -0,0 +1,4 @@
+import ResetStyles from "./ResetStyles.js";
+import ScrollbarStyles from "./ScrollbarStyles.js";
+import ToastStyles from "./ToastStyles.js";
+export { ResetStyles, ScrollbarStyles, ToastStyles };

package/build/hooks/index.js

@@ -0,0 +1,9 @@
+import useControlledOpenState from "./useControlledOpenState.js";
+import useCopy from "./useCopy.js";
+import useElementObserver from "./useElementObserver.js";
+import useEventListener from "./useEventListener.js";
+import useOnClickOutside from "./useOnClickOutside.js";
+import usePrevious from "./usePrevious.js";
+import useSelectAll from "./useSelectAll.js";
+import useWindowSize from "./useWindowSize.js";
+export { useControlledOpenState, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize };

package/build/hooks/useConfirm.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Button from "../components/Button/index.js";
+import TextInput from "../components/Inputs/TextInput.js";
+import Modal from "../components/Modal.js";
+import useEventListener from "./useEventListener.js";
+const useConfirm = ({ header = 'Do you want to proceed?', text, cancelText = 'Cancel', confirmText = 'Okay', negative, input, inputLabel, inputPlaceholder, inputValue } = {})=>{
+    const [inputText, setInputText] = useState(inputValue || '');
+    const [answer, setAnswer] = useState(null);
+    const close = ()=>setAnswer(null);
+    useEffect(()=>{
+        const haveValue = input && 'string' == typeof inputValue;
+        if (haveValue && inputText !== inputValue) setInputText(inputValue);
+    }, [
+        answer
+    ]);
+    const handleConfirm = ()=>{
+        answer?.resolve(input ? inputText : true);
+        close();
+    };
+    const handleCancel = ()=>{
+        answer?.resolve(false);
+        close();
+    };
+    const handleKeyPress = (event)=>{
+        const { key } = event;
+        switch(key){
+            case 'Enter':
+                handleConfirm();
+                break;
+            case 'Escape':
+                handleCancel();
+                break;
+            default:
+                break;
+        }
+    };
+    useEventListener(document, 'keydown', handleKeyPress, !!answer, [
+        inputText
+    ]);
+    const confirm = ()=>new Promise((resolve)=>{
+            setAnswer({
+                resolve
+            });
+        });
+    const ConfirmModal = ()=>/*#__PURE__*/ jsxs(Modal, {
+            visible: !!answer,
+            onClose: close,
+            width: 400,
+            children: [
+                header && /*#__PURE__*/ jsx(Modal.Header, {
+                    children: header
+                }),
+                text && /*#__PURE__*/ jsx(Modal.Text, {
+                    children: text
+                }),
+                input && /*#__PURE__*/ jsx(Modal.Body, {
+                    marginTop: 4,
+                    marginBottom: 8,
+                    children: /*#__PURE__*/ jsx(TextInput, {
+                        autoFocus: true,
+                        label: inputLabel,
+                        placeholder: inputPlaceholder,
+                        value: inputText,
+                        onChange: setInputText
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Modal.Footer, {
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            secondary: true,
+                            marginRight: 8,
+                            onClick: handleCancel,
+                            children: cancelText
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            negative: negative,
+                            onClick: handleConfirm,
+                            children: confirmText
+                        })
+                    ]
+                })
+            ]
+        });
+    return [
+        confirm,
+        ConfirmModal
+    ];
+};
+const hooks_useConfirm = useConfirm;
+export { hooks_useConfirm as default };

package/build/hooks/useControlledOpenState.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+const useControlledOpenState_useControlledOpenState = ({ open, onOpenChange, afterShow, afterHide })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(()=>{
+        if (void 0 !== open && open !== isOpen) setIsOpen(open);
+    }, [
+        open,
+        isOpen
+    ]);
+    const handleOpenChange = (show)=>{
+        if (void 0 === open) setIsOpen(show);
+        if (onOpenChange) onOpenChange(show);
+        if (show && afterShow) afterShow();
+        if (!show && afterHide) afterHide();
+    };
+    return [
+        isOpen,
+        handleOpenChange
+    ];
+};
+const useControlledOpenState = useControlledOpenState_useControlledOpenState;
+export { useControlledOpenState as default };

package/build/hooks/useCopy.js

@@ -0,0 +1,28 @@
+import { useCallback, useState } from "react";
+import copyToClipboard from "../utils/copyToClipboard.js";
+const useCopy = (delay = 2000, resetDelay = 2000)=>{
+    const [isCopying, setIsCopying] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+    const copy = useCallback((text)=>{
+        if (isCopying) return;
+        copyToClipboard(text);
+        setIsCopying(true);
+        setTimeout(()=>{
+            setIsCopying(false);
+            setIsCopied(true);
+            setTimeout(()=>{
+                setIsCopied(false);
+            }, resetDelay);
+        }, delay);
+    }, [
+        delay,
+        isCopying
+    ]);
+    return {
+        copy,
+        isCopying,
+        isCopied
+    };
+};
+const hooks_useCopy = useCopy;
+export { hooks_useCopy as default };

package/build/hooks/useElementObserver.js

@@ -0,0 +1,6 @@
+import resize_observer from "@react-hook/resize-observer";
+const useElementObserver = (target, callback)=>{
+    resize_observer(target, (entry)=>callback(entry.target));
+};
+const hooks_useElementObserver = useElementObserver;
+export { hooks_useElementObserver as default };

package/build/hooks/useEventListener.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+const useEventListener = (element, type, listener, condition, dependencies = [])=>{
+    useEffect(()=>{
+        if (!element || 'current' in element && !element.current) return ()=>null;
+        let el;
+        el = 'current' in element ? element.current : element;
+        const removeListener = ()=>el.removeEventListener(type, listener, false);
+        if (false !== condition) el.addEventListener(type, listener, false);
+        else removeListener();
+        return removeListener;
+    }, [
+        element,
+        type,
+        condition,
+        ...dependencies
+    ]);
+};
+const hooks_useEventListener = useEventListener;
+export { hooks_useEventListener as default };

package/build/hooks/useOnClickOutside.js

@@ -0,0 +1,21 @@
+import { useRef } from "react";
+import useEventListener from "./useEventListener.js";
+const useOnClickOutside_useOnClickOutside = (onClickOutside, condition, exclusions)=>{
+    const ref = useRef(null);
+    const handleOutsideClick = (event)=>{
+        if (ref?.current && null !== event) {
+            const container = ref.current.contains(event.target);
+            if (!container) {
+                const excluded = exclusions?.length ? exclusions.join(', ') : '';
+                const target = event.target;
+                const excludedElement = target && excluded ? target.matches(excluded) : false;
+                if (!excluded || !excludedElement) onClickOutside();
+            }
+        }
+    };
+    useEventListener(document, 'mousedown', handleOutsideClick, condition);
+    useEventListener(document, 'touchstart', handleOutsideClick, condition);
+    return ref;
+};
+const useOnClickOutside = useOnClickOutside_useOnClickOutside;
+export { useOnClickOutside as default };

package/build/hooks/usePrevious.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from "react";
+const usePrevious = (value)=>{
+    const ref = useRef(value);
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+const hooks_usePrevious = usePrevious;
+export { hooks_usePrevious as default };

package/build/hooks/useSelectAll.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+const useSelectAll = (items, defaultSelected)=>{
+    const [list, setList] = useState([]);
+    const [allSelected, setAllSelected] = useState(defaultSelected || false);
+    const [partial, setPartial] = useState(false);
+    const [count, setCount] = useState(0);
+    useEffect(()=>{
+        if (items?.length) {
+            const newList = items.map((item)=>({
+                    ...item,
+                    selected: defaultSelected || false
+                }));
+            setList(newList);
+        }
+    }, []);
+    const onSelectAll = (selectAll)=>{
+        setList((prev)=>prev.map((item)=>({
+                    ...item,
+                    selected: selectAll
+                })));
+    };
+    const onChildChange = (val, id)=>{
+        setList((prev)=>prev.map((item)=>{
+                if (item.id === id) return {
+                    ...item,
+                    selected: val
+                };
+                return item;
+            }));
+    };
+    useEffect(()=>{
+        const allChildren = list.every((item)=>item.selected);
+        const someChildren = list.some((item)=>item.selected);
+        if (allChildren) {
+            setPartial(false);
+            setAllSelected(true);
+            setCount(list.length);
+        } else if (someChildren) {
+            setPartial(true);
+            setAllSelected(false);
+            setCount(list.filter((item)=>item.selected).length);
+        } else {
+            setPartial(false);
+            setAllSelected(false);
+            setCount(0);
+        }
+    }, [
+        list
+    ]);
+    return {
+        list,
+        partial,
+        allSelected,
+        count,
+        onSelectAll,
+        onChildChange
+    };
+};
+const hooks_useSelectAll = useSelectAll;
+export { hooks_useSelectAll as default };

package/build/hooks/useWindowSize.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+const useWindowSize_useWindowSize = ()=>{
+    const initialState = {
+        width: null,
+        height: null
+    };
+    const [windowSize, setWindowSize] = useState(initialState);
+    useEffect(()=>{
+        const ssr = 'undefined' == typeof window;
+        const handleResize = ()=>{
+            if (ssr) return;
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        };
+        if (!ssr) window.addEventListener('resize', handleResize);
+        const cleanup = ssr ? ()=>null : ()=>window.removeEventListener('resize', handleResize);
+        handleResize();
+        return cleanup;
+    }, []);
+    return windowSize;
+};
+const useWindowSize = useWindowSize_useWindowSize;
+export { useWindowSize as default };

package/build/theme/common/button.js

@@ -0,0 +1,33 @@
+import common from "./common.js";
+const { font } = common;
+const common_button = {
+    tiny: {
+        height: 18,
+        iconSize: 12,
+        font: font.size.xs,
+        padding: 4,
+        iconOnlyPadding: 2
+    },
+    small: {
+        height: 28,
+        iconSize: 18,
+        font: font.size.sm,
+        padding: 10,
+        iconOnlyPadding: 5
+    },
+    medium: {
+        height: 32,
+        iconSize: 22,
+        font: font.size.md,
+        padding: 12,
+        iconOnlyPadding: 5
+    },
+    large: {
+        height: 36,
+        iconSize: 24,
+        font: font.size.lg,
+        padding: 14,
+        iconOnlyPadding: 6
+    }
+};
+export { common_button as default };

package/build/theme/common/common.js

@@ -0,0 +1,38 @@
+import colors from "../core/colors.js";
+const common = {
+    color: colors,
+    elevation0: '0px 2px 4px 2px rgba(0, 0, 0, 0.05)',
+    elevation1: '0px 2px 4px 2px rgba(0, 0, 0, 0.1)',
+    elevation2: '0px 2px 4px 2px rgba(0, 0, 0, 0.15)',
+    elevation3: '0px 4px 8px 2px rgba(0, 0, 0, 0.2)',
+    elevation4: '0px 4px 8px 2px rgba(0, 0, 0, 0.25)',
+    font: {
+        weight: {
+            thin: 100,
+            light: 300,
+            default: 400,
+            medium: 500,
+            semiBold: 600,
+            bold: 700
+        },
+        size: {
+            xs: 10,
+            sm: 12,
+            md: 14,
+            lg: 16,
+            xl: 18
+        },
+        family: {
+            default: "'Roboto', sans-serif",
+            medium: "'Roboto', sans-serif",
+            light: "'Roboto', sans-serif"
+        }
+    },
+    size: {
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24
+    }
+};
+export { common as default };

package/build/theme/common/index.js

@@ -0,0 +1,4 @@
+import common from "./common.js";
+import button_0 from "./button.js";
+const theme_common = common;
+export { button_0 as button, theme_common as default };