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

package/build/components/CalendarParts/CalendarHeader.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CalendarDate } from "@internationalized/date";
+import { range } from "es-toolkit";
+import Icon from "../Icon/index.js";
+import AriaButton from "../Inputs/helpers/AriaButton.js";
+import Select from "../Select.js";
+const CalendarHeader_CalendarHeader = ({ date, setDate })=>{
+    const { calendar } = useTheme();
+    const months = [
+        {
+            id: '1',
+            value: 'January'
+        },
+        {
+            id: '2',
+            value: 'February'
+        },
+        {
+            id: '3',
+            value: 'March'
+        },
+        {
+            id: '4',
+            value: 'April'
+        },
+        {
+            id: '5',
+            value: 'May'
+        },
+        {
+            id: '6',
+            value: 'June'
+        },
+        {
+            id: '7',
+            value: 'July'
+        },
+        {
+            id: '8',
+            value: 'August'
+        },
+        {
+            id: '9',
+            value: 'September'
+        },
+        {
+            id: '10',
+            value: 'October'
+        },
+        {
+            id: '11',
+            value: 'November'
+        },
+        {
+            id: '12',
+            value: 'December'
+        }
+    ];
+    const years = range(1900, 2100).map((year)=>({
+            value: year.toString()
+        }));
+    const { month: mth, year: yr, day } = date || {};
+    const month = mth?.toString() || '';
+    const year = yr?.toString() || '';
+    const handleMonth = (monthId)=>{
+        setDate(new CalendarDate(+year, +monthId, day || 1));
+    };
+    const handleYear = (yearId)=>{
+        setDate(new CalendarDate(+yearId, +month, day || 1));
+    };
+    return /*#__PURE__*/ jsxs(Header, {
+        children: [
+            /*#__PURE__*/ jsx(NavButton, {
+                slot: "previous",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-left"
+                })
+            }),
+            /*#__PURE__*/ jsxs(MonthYear, {
+                children: [
+                    /*#__PURE__*/ jsx(Select, {
+                        options: months,
+                        value: month,
+                        onChange: handleMonth,
+                        textOnly: true,
+                        fontSize: 12,
+                        color: calendar.color.monthYear,
+                        hideCaret: true,
+                        maxHeight: 200,
+                        position: "bottom",
+                        fixedPosition: true
+                    }),
+                    /*#__PURE__*/ jsx(Select, {
+                        options: years,
+                        value: year,
+                        onChange: handleYear,
+                        textOnly: true,
+                        fontSize: 12,
+                        color: calendar.color.monthYear,
+                        hideCaret: true,
+                        maxHeight: 200,
+                        position: "bottom",
+                        fixedPosition: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(NavButton, {
+                slot: "next",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-right"
+                })
+            })
+        ]
+    });
+};
+const Header = styled.header({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+});
+const MonthYear = styled.div(({ theme: { font, calendar } })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        fontSize: font.size.sm,
+        fontWeight: font.weight.default,
+        color: calendar.color.monthYear,
+        margin: 0
+    }));
+const NavButton = styled(AriaButton)(({ theme })=>({
+        color: theme.calendar.color.iconDefault,
+        outline: 'none',
+        borderRadius: 4,
+        '&:hover': {
+            color: theme.calendar.color.iconHover
+        },
+        '&[data-disabled]': {
+            color: theme.calendar.color.iconDisabled,
+            cursor: 'not-allowed'
+        }
+    }));
+const CalendarHeader = CalendarHeader_CalendarHeader;
+export { CalendarHeader as default };

package/build/components/CalendarParts/useMinMax.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { getNow, getObjFromDate } from "./utils.js";
+const now = getNow();
+const useMinMax_useMinMax = ({ past, future })=>{
+    const min = useMemo(()=>{
+        if (true === past) return now;
+        if (past instanceof Date) return getObjFromDate(past);
+    }, [
+        past
+    ]);
+    const max = useMemo(()=>{
+        if (true === future) return now;
+        if (future instanceof Date) return getObjFromDate(future);
+    }, [
+        future
+    ]);
+    return {
+        min,
+        max
+    };
+};
+const useMinMax = useMinMax_useMinMax;
+export { useMinMax as default };

package/build/components/CalendarParts/utils.js

@@ -0,0 +1,6 @@
+import { getLocalTimeZone, parseDate, today } from "@internationalized/date";
+import { format } from "date-fns";
+const getNow = ()=>today(getLocalTimeZone());
+const getDateFromObj = (val)=>val.toDate(getLocalTimeZone());
+const getObjFromDate = (val)=>parseDate(format(val, 'yyyy-MM-dd'));
+export { getDateFromObj, getNow, getObjFromDate };

package/build/components/ChartHelpers.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Global, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Tooltip } from "recharts";
+import { numberWithCommas } from "../utils/index.js";
+import Dot from "./Dot.js";
+import { marginProps } from "./helpers/styledProps.js";
+const ChartStyles = ()=>/*#__PURE__*/ jsx(Global, {
+        styles: {
+            '.recharts-cartesian-grid-vertical line:first-of-type': {
+                strokeOpacity: 0
+            },
+            '.recharts-cartesian-grid-horizontal line:first-of-type': {
+                strokeOpacity: 0
+            }
+        }
+    });
+const ChartContainer = styled.div(({ width, height, maxWidth, maxHeight, responsive })=>({
+        width: width || '100%',
+        height: height || '100%',
+        maxWidth: responsive ? maxWidth || '100%' : void 0,
+        maxHeight: responsive ? maxHeight || '100%' : void 0
+    }), marginProps);
+const TooltipContent = ({ active, payload, label, legendPostfix })=>active && payload && payload.length ? /*#__PURE__*/ jsxs(TooltipContainer, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipLabel, {
+                children: label
+            }),
+            payload?.map((item)=>{
+                const color = item.color || item.payload?.color;
+                const key = `${item.payload?.name}-${item.dataKey}-${item.value}`;
+                return /*#__PURE__*/ jsxs(LegendItem, {
+                    children: [
+                        color && /*#__PURE__*/ jsx(Dot, {
+                            color: color
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "item-container",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "item-name",
+                                    children: item.name
+                                }),
+                                ": ",
+                                numberWithCommas(item.value || 0),
+                                " ",
+                                legendPostfix
+                            ]
+                        })
+                    ]
+                }, key);
+            })
+        ]
+    }) : null;
+const ChartHelpers_Tooltip = ({ legendPostfix } = {})=>{
+    const { elevation1 } = useTheme();
+    return /*#__PURE__*/ jsx(Tooltip, {
+        wrapperStyle: {
+            outline: 'none',
+            boxShadow: elevation1
+        },
+        cursor: false,
+        content: /*#__PURE__*/ jsx(TooltipContent, {
+            legendPostfix: legendPostfix
+        })
+    });
+};
+const LegendContent = ({ payload, toggleData })=>/*#__PURE__*/ jsx(LegendContainer, {
+        children: payload?.map((item)=>/*#__PURE__*/ jsxs(LegendItem, {
+                onClick: toggleData ? ()=>toggleData(item) : void 0,
+                clickable: !!toggleData,
+                inactive: item.inactive,
+                children: [
+                    /*#__PURE__*/ jsx(Dot, {
+                        color: item.color
+                    }),
+                    item.value
+                ]
+            }, `${item.dataKey}-${item.value}`))
+    });
+const LegendContainer = styled.div({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    columnGap: 16,
+    marginTop: 8,
+    flexWrap: 'wrap'
+});
+const LegendItem = styled.div(({ theme, clickable, inactive })=>({
+        color: theme.scale8,
+        fontSize: theme.font.size.sm,
+        display: 'flex',
+        alignItems: 'center',
+        columnGap: 8,
+        borderRadius: 8,
+        lineHeight: '15px',
+        backgroundColor: clickable ? theme.scale1 : void 0,
+        padding: clickable ? '4px 8px' : void 0,
+        cursor: clickable ? 'pointer' : void 0,
+        opacity: inactive ? 0.3 : 1,
+        '.item-container': {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        '.item-name': {
+            textTransform: 'capitalize'
+        }
+    }));
+const TooltipContainer = styled.div(({ theme })=>({
+        background: theme.tooltip.background,
+        border: 'none',
+        borderRadius: 4,
+        padding: 16,
+        boxShadow: theme.elevation1
+    }));
+const TooltipLabel = styled.div(({ theme })=>({
+        fontSize: theme.font.size.md,
+        color: theme.tooltip.color.subtext,
+        marginBottom: 4
+    }));
+export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent };

package/build/components/Checkbox.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { Checkbox } from "react-aria-components";
+import icons_Checkbox from "../assets/icons/Checkbox.js";
+import CheckboxOff from "../assets/icons/CheckboxOff.js";
+import CheckboxPartial from "../assets/icons/CheckboxPartial.js";
+import { ControlLabel } from "./FormControl.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props })=>{
+    const [on, setOn] = useState(checked || false);
+    const labelRight = 'right' === labelPosition;
+    const handleChange = ()=>{
+        const value = partial ? true : !on;
+        setOn(value);
+        if (onChange) onChange(value);
+    };
+    useEffect(()=>{
+        const checkedSet = 'boolean' == typeof checked;
+        const value = checkedSet ? checked : on;
+        setOn(value);
+    }, [
+        checked,
+        on
+    ]);
+    return /*#__PURE__*/ jsx(ControlContainer, {
+        labelRight: labelRight,
+        isSelected: on,
+        isIndeterminate: partial,
+        isDisabled: disabled,
+        isReadOnly: readOnly,
+        onChange: handleChange,
+        ...props,
+        children: ({ isIndeterminate, isSelected })=>{
+            let svg = /*#__PURE__*/ jsx(CheckboxOff, {});
+            if (partial || isIndeterminate) svg = /*#__PURE__*/ jsx(CheckboxPartial, {});
+            else if (on || isSelected) svg = /*#__PURE__*/ jsx(icons_Checkbox, {});
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    label && /*#__PURE__*/ jsx(ControlLabel, {
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Icon, {
+                        svg: svg,
+                        pointer: !disabled
+                    })
+                ]
+            });
+        }
+    });
+};
+const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8 })=>({
+        display: 'inline-flex',
+        flexDirection: labelRight ? 'row-reverse' : 'row',
+        justifyContent: labelRight ? 'flex-end' : 'flex-start',
+        alignItems: 'center',
+        gap,
+        position: 'relative',
+        cursor: isDisabled ? 'not-allowed' : void 0,
+        borderRadius: 4,
+        outline: 'none',
+        outlineOffset: -1,
+        '& > div': {
+            transition: 'color 0.2s linear',
+            color: formControl.color.default
+        },
+        '&[data-hovered] > div': {
+            color: isDisabled ? void 0 : formControl.color.hover
+        },
+        '&[data-selected] > div, &[data-indeterminate] > div': {
+            color: formControl.color.active
+        },
+        '&[data-hovered][data-selected] > div': {
+            color: isDisabled ? void 0 : formControl.color.activeHover
+        },
+        '&[data-disabled] > div': {
+            color: formControl.color.disabled
+        },
+        '&[data-focus-visible]': {
+            outline: `${accent} solid 1px`
+        }
+    }), marginProps);
+const components_Checkbox = Checkbox_Checkbox;
+export { ControlContainer, components_Checkbox as default };

package/build/components/Code/Code.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { compact, range } from "es-toolkit";
+import { Highlight, themes } from "prism-react-renderer";
+import { marginProps } from "../helpers/styledProps.js";
+import Copy from "./Copy.js";
+import Endpoint from "./Endpoint.js";
+const Code_Code = ({ children, code, className: metaData, lang: langProp, lineHighlights: lineHighlightsProp, noNumbers: noNumbersProp, margin, marginTop, marginBottom, marginRight, marginLeft })=>{
+    const { name: themeName } = useTheme();
+    const rest = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    const classes = metaData?.replace(/}/g, '').split('{') || [];
+    let [lang, lineHighlights, noNumbers] = classes;
+    lang = lang || langProp || '';
+    lineHighlights = lineHighlights || lineHighlightsProp || '';
+    noNumbers = noNumbers || noNumbersProp ? 'nonumbers' : '';
+    let language = lang ? lang.replace(/language-/, '') : 'text';
+    let endpointMethod = '';
+    if (language.includes('rest')) {
+        const [key, method] = language.split('-');
+        language = key;
+        endpointMethod = method?.toUpperCase() || '';
+    }
+    const hideNumbers = 'nonumbers' === noNumbers.toLowerCase().trim();
+    const getLines = (val)=>{
+        const separated = val.split(',');
+        const numbers = separated.map((item)=>{
+            if (item.match(/^\d+$/)) return Number.parseInt(item, 10);
+            if (item.includes('-')) {
+                const [first, last] = item.split('-');
+                const start = Number.parseInt(first, 10);
+                const end = Number.parseInt(last, 10);
+                const lineRange = start < end ? range(start, end + 1) : range(end, start + 1);
+                return lineRange;
+            }
+            return null;
+        });
+        const flattened = numbers.flat();
+        return compact(flattened);
+    };
+    const isNumHighlight = (num)=>{
+        if (lineHighlights) {
+            const numbers = getLines(lineHighlights);
+            return numbers.some((item)=>num === item);
+        }
+        return false;
+    };
+    const content = code?.trim() || children?.trim() || '';
+    return 'rest' === language ? /*#__PURE__*/ jsx(Endpoint, {
+        method: endpointMethod,
+        url: content
+    }) : /*#__PURE__*/ jsx(Highlight, {
+        code: content,
+        language: language,
+        theme: 'dark' === themeName ? themes.oceanicNext : themes.github,
+        children: ({ className, style, tokens, getLineProps, getTokenProps })=>/*#__PURE__*/ jsxs(Pre, {
+                className: className,
+                style: {
+                    ...style
+                },
+                ...rest,
+                "data-testid": "code",
+                children: [
+                    tokens.map((line, i, tokenArray)=>/*#__PURE__*/ createElement(Line, {
+                            ...getLineProps({
+                                line,
+                                key: i
+                            }),
+                            key: `line-${i + 1}`,
+                            highlight: isNumHighlight(i + 1),
+                            children: [
+                                tokenArray.length > 1 && !hideNumbers && /*#__PURE__*/ jsx(LineNumber, {
+                                    children: i + 1
+                                }),
+                                line.map((token, key)=>/*#__PURE__*/ createElement("span", {
+                                        ...getTokenProps({
+                                            token,
+                                            key
+                                        }),
+                                        key: `token-${key + 1}`
+                                    }))
+                            ]
+                        })),
+                    /*#__PURE__*/ jsx(Copy, {
+                        content: content
+                    })
+                ]
+            })
+    });
+};
+const Pre = styled.pre(({ theme })=>({
+        overflowX: 'auto',
+        position: 'relative',
+        padding: theme.size.md,
+        borderRadius: theme.size.xs,
+        backgroundColor: 'light' === theme.name ? `${theme.scale0} !important` : void 0
+    }), marginProps);
+const Line = styled.div(({ theme, highlight })=>({
+        backgroundColor: highlight ? theme.scale1 : 'transparent'
+    }));
+const LineNumber = styled.span(({ theme })=>({
+        display: 'inline-block',
+        minWidth: 17,
+        textAlign: 'right',
+        marginRight: 10,
+        color: theme.scale6,
+        userSelect: 'none'
+    }));
+const Code = Code_Code;
+export { Code as default };

package/build/components/Code/Copy.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { copyToClipboard } from "../../utils/index.js";
+import Icon from "../Icon/index.js";
+const Copy = ({ content })=>{
+    const [copied, setCopied] = useState(false);
+    const { color, scale10 } = useTheme();
+    useEffect(()=>{
+        if (copied) setTimeout(()=>{
+            setCopied(false);
+        }, 2000);
+    }, [
+        copied
+    ]);
+    const copy = ()=>{
+        copyToClipboard(content);
+        setCopied(true);
+    };
+    return /*#__PURE__*/ jsx(CopyContainer, {
+        onClick: copy,
+        copied: copied,
+        children: copied ? /*#__PURE__*/ jsx(Icon, {
+            name: "copy-check",
+            color: color.success
+        }) : /*#__PURE__*/ jsx(Icon, {
+            name: "copy",
+            color: scale10
+        })
+    });
+};
+const CopyContainer = styled.div(({ copied })=>({
+        width: 25,
+        height: 25,
+        padding: 5,
+        position: 'absolute',
+        top: 5,
+        right: 5,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        opacity: copied ? 1 : 0.3,
+        '&:hover': {
+            opacity: copied ? 1 : 0.7
+        }
+    }));
+const Code_Copy = Copy;
+export { Code_Copy as default };

package/build/components/Code/Endpoint.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import Copy from "./Copy.js";
+const getStyles = (method, theme)=>{
+    const { color } = theme;
+    switch(method){
+        case 'GET':
+            return {
+                borderColor: color.brand,
+                backgroundColor: color.brandTint2
+            };
+        case 'DELETE':
+            return {
+                borderColor: color.error,
+                backgroundColor: color.errorTint2
+            };
+        case 'POST':
+            return {
+                borderColor: color.success,
+                backgroundColor: color.successTint2
+            };
+        case 'PUT':
+            return {
+                borderColor: color.warning,
+                backgroundColor: color.warningTint2
+            };
+        default:
+            return {
+                borderColor: theme.scale8,
+                backgroundColor: theme.scale0
+            };
+    }
+};
+const Endpoint_Endpoint = ({ method, url })=>{
+    const theme = useTheme();
+    const styles = getStyles(method.toUpperCase(), theme);
+    return /*#__PURE__*/ jsxs(Container, {
+        ...styles,
+        children: [
+            /*#__PURE__*/ jsx(EndpointMethod, {
+                backgroundColor: styles.borderColor,
+                children: method.toUpperCase()
+            }),
+            /*#__PURE__*/ jsx(Url, {
+                children: url
+            }),
+            /*#__PURE__*/ jsx(Copy, {
+                content: url
+            })
+        ]
+    });
+};
+const Container = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        border: '1px solid',
+        borderRadius: theme.size.xs,
+        margin: '10px 0',
+        position: 'relative'
+    }), ({ borderColor, backgroundColor })=>({
+        borderColor,
+        backgroundColor
+    }));
+const EndpointMethod = styled.div(({ theme })=>({
+        padding: theme.size.md,
+        textAlign: 'center',
+        fontFamily: 'monospace',
+        whiteSpace: 'pre',
+        fontSize: theme.font.size.lg,
+        color: '#fff'
+    }), ({ backgroundColor })=>({
+        backgroundColor
+    }));
+const Url = styled.div(({ theme })=>({
+        fontFamily: 'monospace',
+        whiteSpace: 'pre',
+        fontSize: theme.font.size.lg,
+        padding: theme.size.md
+    }));
+const Endpoint = Endpoint_Endpoint;
+export { Endpoint as default };

package/build/components/Code/index.js

@@ -0,0 +1,3 @@
+import Code from "./Code.js";
+const components_Code = Code;
+export { components_Code as default };