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

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/index.d.ts

@@ -85,5 +85,6 @@ export { default as useCopy } from './hooks/useCopy';
 export { marginProps, paddingProps, positionProps, widthHeightProps } from './components/helpers/styledProps';
 export { default as copyToClipboard } from './utils/copyToClipboard';
 export { default as formatDate } from './utils/formatDate';
+export { default as formatNumber } from './utils/formatNumber';
 export { default as numberWithCommas } from './utils/numberWithCommas';
 export { createEditorContent, editorContentToText } from './components/Editor';

package/build/index.js

@@ -75,5 +75,6 @@ import useCopy from "./hooks/useCopy.js";
 import { marginProps, paddingProps, positionProps, widthHeightProps } from "./components/helpers/styledProps.js";
 import copyToClipboard from "./utils/copyToClipboard.js";
 import formatDate from "./utils/formatDate.js";
+import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
-export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

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 };