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

package/build/components/Editor/editorUtils.js

@@ -0,0 +1,213 @@
+const validateField = (testField, fields, displayValue)=>{
+    const field = fields.find(({ id })=>id === testField.id);
+    const composeMode = fields.every((item)=>!item.value);
+    const someFieldsHaveValues = fields.some((item)=>item.value);
+    let isValid = true;
+    let entityLabel = '';
+    if (field) {
+        if (composeMode) isValid = true;
+        else if ((displayValue || someFieldsHaveValues) && !field?.value) isValid = false;
+    } else isValid = false;
+    entityLabel = isValid ? displayValue && !composeMode ? field?.value || '' : field?.label || '' : field?.id || testField.id;
+    const label = displayValue && field?.value ? entityLabel : `{${entityLabel}}`;
+    return {
+        label,
+        isValid
+    };
+};
+const parseTextToDocument = (text, fields, displayValue)=>{
+    const parts = text.replace(/(<<\w+?>>)/g, '~~$1~~').split('~~');
+    const content = [];
+    for (const part of parts)if (part.startsWith('<<') && part.endsWith('>>')) {
+        const id = part.replace(/<<|>>/g, '');
+        const field = fields?.find((item)=>item.id === id);
+        const fieldToValidate = field || {
+            id,
+            label: ''
+        };
+        const { label, isValid } = validateField(fieldToValidate, fields || [], displayValue);
+        content.push({
+            type: 'mergeField',
+            attrs: {
+                id,
+                label,
+                isValid,
+                displayValue
+            }
+        });
+    } else if (part) {
+        const lines = part.split('\n');
+        for(let i = 0; i < lines.length; i++){
+            if (lines[i] || 0 === i) {
+                if (lines[i]) content.push({
+                    type: 'text',
+                    text: lines[i]
+                });
+            }
+            if (i < lines.length - 1) content.push({
+                type: 'hardBreak'
+            });
+        }
+    }
+    if (0 === content.length) return {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                content: []
+            }
+        ]
+    };
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                content
+            }
+        ]
+    };
+};
+const documentToText = (editor)=>{
+    const doc = editor.getJSON();
+    return extractTextFromDocument(doc);
+};
+const documentToJSON = (editor)=>editor.getJSON();
+const documentToHTML = (editor)=>editor.getHTML();
+const documentToMarkdown = (editor)=>{
+    const doc = editor.getJSON();
+    return extractMarkdownFromDocument(doc);
+};
+const editorContentToText = (json)=>extractTextFromDocument(json);
+const getEditorCharacterCount = (editor)=>{
+    const doc = editor.getJSON();
+    return countCharactersInDocument(doc);
+};
+const countCharactersInDocument = (node)=>{
+    let count = 0;
+    if ('mergeField' === node.type) count += (node.attrs?.label || '').length;
+    else if ('text' === node.type) count += (node.text || '').length;
+    else if ('hardBreak' === node.type) count += 1;
+    else if (node.content) for (const child of node.content)count += countCharactersInDocument(child);
+    return count;
+};
+const extractTextFromDocument = (node)=>{
+    let text = '';
+    if ('mergeField' === node.type) text += `<<${node.attrs?.id}>>`;
+    else if ('text' === node.type) text += node.text || '';
+    else if ('hardBreak' === node.type) text += '\n';
+    else if (node.content) {
+        for (const child of node.content)text += extractTextFromDocument(child);
+        'paragraph' === node.type && node.content.length;
+    }
+    return text;
+};
+const extractMarkdownFromDocument = (node)=>{
+    let text = '';
+    if ('mergeField' === node.type) text += `<<${node.attrs?.id}>>`;
+    else if ('text' === node.type) {
+        let textContent = node.text || '';
+        if (node.marks) for (const mark of node.marks)switch(mark.type){
+            case 'bold':
+                textContent = `**${textContent}**`;
+                break;
+            case 'italic':
+                textContent = `*${textContent}*`;
+                break;
+            case 'strike':
+                textContent = `~~${textContent}~~`;
+                break;
+            case 'code':
+                textContent = `\`${textContent}\``;
+                break;
+        }
+        text += textContent;
+    } else if ('hardBreak' === node.type) text += '\n';
+    else if (node.content) {
+        for (const child of node.content)text += extractMarkdownFromDocument(child);
+        if ('paragraph' === node.type && node.content && node.content.length > 0) text += '\n\n';
+    }
+    return text;
+};
+const parseJSONToDocument = (jsonContent, fields, displayValue)=>{
+    const validateNode = (node)=>{
+        if ('mergeField' === node.type) {
+            const field = fields?.find((item)=>item.id === node.attrs.id);
+            const fieldToValidate = field || {
+                id: node.attrs.id,
+                label: ''
+            };
+            const { label, isValid } = validateField(fieldToValidate, fields || [], displayValue);
+            return {
+                ...node,
+                attrs: {
+                    ...node.attrs,
+                    label,
+                    isValid,
+                    displayValue
+                }
+            };
+        }
+        if (node.content) return {
+            ...node,
+            content: node.content.map(validateNode)
+        };
+        return node;
+    };
+    return validateNode(jsonContent);
+};
+const getEditorContent = (editor, mergeFields)=>({
+        text: documentToText(editor),
+        json: documentToJSON(editor),
+        html: documentToHTML(editor),
+        markdown: documentToMarkdown(editor),
+        hasMissingFields: hasMissingFields(editor, mergeFields)
+    });
+const hasMissingFields = (editor, fields)=>{
+    const doc = editor.getJSON();
+    return checkForMissingFields(doc, fields);
+};
+const checkForMissingFields = (node, fields)=>{
+    if ('mergeField' === node.type) return !node.attrs.isValid;
+    if (node.content) return node.content.some((child)=>checkForMissingFields(child, fields));
+    return false;
+};
+const updateMergeFieldValidation = (editor, fields, displayValue)=>{
+    const { state, view } = editor;
+    const { tr } = state;
+    let hasChanges = false;
+    state.doc.descendants((node, pos)=>{
+        if ('mergeField' === node.type.name) {
+            const { id } = node.attrs;
+            const field = fields?.find((item)=>item.id === id);
+            const fieldToValidate = field || {
+                id,
+                label: ''
+            };
+            const { label, isValid } = validateField(fieldToValidate, fields || [], displayValue);
+            if (node.attrs.isValid !== isValid || node.attrs.label !== label || node.attrs.displayValue !== displayValue) {
+                tr.setNodeMarkup(pos, void 0, {
+                    ...node.attrs,
+                    label,
+                    isValid,
+                    displayValue
+                });
+                hasChanges = true;
+            }
+        }
+    });
+    if (hasChanges) view.dispatch(tr);
+};
+const insertMergeField = (editor, field, fields, displayValue)=>{
+    const { label, isValid } = validateField(field, fields, displayValue);
+    editor.chain().focus().insertContent({
+        type: 'mergeField',
+        attrs: {
+            id: field.id,
+            label,
+            isValid,
+            displayValue
+        }
+    }).run();
+};
+export { documentToHTML, documentToJSON, documentToMarkdown, documentToText, editorContentToText, getEditorCharacterCount, getEditorContent, hasMissingFields, insertMergeField, parseJSONToDocument, parseTextToDocument, updateMergeFieldValidation, validateField };

package/build/components/Editor/index.js

@@ -0,0 +1,3 @@
+import Editor, { createEditorContent } from "./Editor.js";
+import { editorContentToText } from "./editorUtils.js";
+export { createEditorContent, Editor as default, editorContentToText };

package/build/components/Ellipsis.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { marginProps, paddingProps } from "./helpers/styledProps.js";
+const Ellipsis = ({ children, ...props })=>/*#__PURE__*/ jsx(EllipsisContainer, {
+        ...props,
+        children: children
+    });
+const EllipsisContainer = styled.div(({ clampLines })=>({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: clampLines ? void 0 : 'nowrap',
+        WebkitLineClamp: clampLines,
+        display: clampLines ? '-webkit-box' : void 0,
+        WebkitBoxOrient: clampLines ? 'vertical' : void 0,
+        wordBreak: clampLines ? 'break-word' : void 0
+    }), ({ width })=>({
+        width: width || 'auto'
+    }), ({ textAlign })=>({
+        textAlign: textAlign || 'left'
+    }), paddingProps, marginProps);
+const components_Ellipsis = Ellipsis;
+export { components_Ellipsis as default };

package/build/components/Focusable.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef } from "react";
+import { useFocusable } from "react-aria";
+const Focusable_Focusable = ({ children, ref, ...props })=>{
+    const backupRef = useRef(null);
+    const determinedRef = ref || backupRef;
+    const { focusableProps } = useFocusable(props, determinedRef);
+    return /*#__PURE__*/ jsx(Trigger, {
+        ref: determinedRef,
+        ...focusableProps,
+        ...props,
+        children: children
+    });
+};
+const Trigger = styled.span({
+    display: 'grid'
+});
+const Focusable = Focusable_Focusable;
+export { Focusable as default };

package/build/components/Form.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import Checkbox from "./Checkbox.js";
+import Grid from "./Grid.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Label from "./Label.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+const Form_Form = ({ children, rows, columns, rowGap, columnGap, onSubmit, ...rest })=>{
+    const handleSubmit = (event)=>{
+        event.preventDefault();
+        if (onSubmit) onSubmit(event);
+    };
+    return /*#__PURE__*/ jsx(FormContainer, {
+        as: "form",
+        rows: rows,
+        columns: columns,
+        rowGap: rowGap,
+        columnGap: columnGap,
+        onSubmit: handleSubmit,
+        ...rest,
+        children: children
+    });
+};
+Form_Form.Group = ({ children, rows, columns, rowGap, columnGap, disabled, ...rest })=>/*#__PURE__*/ jsx(FormGroup, {
+        rows: rows,
+        columns: columns,
+        rowGap: rowGap,
+        columnGap: columnGap,
+        disabled: disabled,
+        ...rest,
+        children: children
+    });
+Form_Form.Field = ({ children, inline, align, disabled, ...props })=>/*#__PURE__*/ jsx(FormField, {
+        ...props,
+        inline: inline,
+        align: align,
+        disabled: disabled,
+        children: children
+    });
+Form_Form.Radio = Radio;
+Form_Form.Toggle = Toggle;
+Form_Form.Checkbox = Checkbox;
+Form_Form.Label = Label;
+const FormContainer = styled(Grid)({
+    boxSizing: 'border-box'
+});
+const FormGroup = styled(Grid)(({ disabled })=>disabled && {
+        opacity: 0.3,
+        pointerEvents: 'none'
+    });
+const FormField = styled.div(({ inline, align })=>{
+    const alignOptions = {
+        top: 'flex-start',
+        bottom: 'flex-end',
+        center: 'center'
+    };
+    return {
+        display: 'flex',
+        flexDirection: inline ? 'row' : 'column',
+        alignItems: align ? alignOptions[align] : void 0
+    };
+}, ({ disabled })=>disabled && {
+        opacity: 0.3,
+        pointerEvents: 'none'
+    }, marginProps);
+const Form = Form_Form;
+export { Form as default };

package/build/components/FormControl.js

@@ -0,0 +1,72 @@
+import styled from "@emotion/styled";
+import { darken, lighten } from "polished";
+import { marginProps } from "./helpers/styledProps.js";
+const ControlContainer = styled.label(({ theme: { formControl, name }, labelRight, disabled, readOnly, iconColor })=>{
+    const adjustBgColor = 'dark' === name ? darken : lighten;
+    const hoverColor = iconColor ? adjustBgColor(0.05, iconColor) : formControl.color.hover;
+    const activeHoverColor = iconColor ? adjustBgColor(0.1, iconColor) : formControl.color.activeHover;
+    return {
+        display: 'inline-flex',
+        flexDirection: labelRight ? 'row-reverse' : 'row',
+        justifyContent: labelRight ? 'flex-end' : 'flex-start',
+        alignItems: 'center',
+        position: 'relative',
+        cursor: disabled ? 'not-allowed' : readOnly ? 'default' : void 0,
+        pointerEvents: readOnly ? 'none' : void 0,
+        '&:hover > div': {
+            color: disabled || readOnly ? void 0 : hoverColor
+        },
+        '&:hover > input:checked + div': {
+            color: disabled || readOnly ? void 0 : activeHoverColor
+        }
+    };
+}, marginProps);
+const ControlInput = styled.input({
+    border: 0,
+    clip: 'rect(0, 0, 0, 0)',
+    height: 1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: 1
+}, ({ theme: { accent, formControl }, iconColor })=>({
+        '& + div': {
+            color: iconColor || formControl.color.default,
+            borderRadius: 4
+        },
+        '&[type="checkbox"] + div': {
+            transition: 'color 0.2s linear'
+        },
+        '&[type="radio"] + div > svg > svg > .radio-fill': {
+            opacity: 0
+        },
+        '&:checked': {
+            '& + div': {
+                color: iconColor || formControl.color.active
+            },
+            '&[type="radio"] + div > svg > svg > .radio-fill': {
+                opacity: 1
+            }
+        },
+        '&[type="checkbox"]:indeterminate + div': {
+            color: iconColor || formControl.color.active
+        },
+        '&:disabled': {
+            '& + div': {
+                color: formControl.color.disabled
+            }
+        },
+        '&:focus-visible': {
+            '& + div': {
+                outline: `${accent} solid 1px`,
+                outlineOffset: -1
+            }
+        }
+    }));
+const ControlLabel = styled.span(({ theme: { font, scale10 } })=>({
+        fontSize: font.size.md,
+        color: scale10,
+        cursor: 'pointer'
+    }));
+export { ControlContainer, ControlInput, ControlLabel };

package/build/components/Grid.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { marginProps, paddingProps } from "./helpers/styledProps.js";
+const StyledGrid = styled.div({
+    display: 'grid'
+}, ({ rows, rowGap, columns, columnGap, gap, template, alignContent, alignItems, justifyContent, justifyItems, width, height })=>{
+    const isColNum = 'number' == typeof columns;
+    const isRowNum = 'number' == typeof rows;
+    return {
+        gridTemplateColumns: isColNum ? `repeat(${columns}, 1fr)` : columns,
+        gridTemplateRows: isRowNum ? `repeat(${rows}, 1fr)` : rows,
+        gridColumnGap: columnGap,
+        gridRowGap: rowGap,
+        gridGap: gap,
+        gridTemplate: template,
+        alignItems,
+        justifyItems,
+        alignContent,
+        justifyContent,
+        width,
+        height
+    };
+}, ({ columns })=>'equal' === columns && {
+        gridTemplateColumns: 'unset',
+        gridAutoColumns: '1fr',
+        gridAutoFlow: 'column'
+    }, paddingProps, marginProps);
+const GridItem = styled.div(({ row, rowStart, rowEnd, column, columnStart, columnEnd, area, alignSelf, justifySelf, placeSelf, border })=>({
+        gridRow: row,
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+        gridColumn: column,
+        gridColumnStart: columnStart,
+        gridColumnEnd: columnEnd,
+        gridArea: area,
+        alignSelf,
+        justifySelf,
+        placeSelf,
+        border
+    }), paddingProps, marginProps);
+const Grid_Grid = ({ children, ...props })=>/*#__PURE__*/ jsx(StyledGrid, {
+        ...props,
+        children: children
+    });
+const Item = ({ children, ...props })=>/*#__PURE__*/ jsx(GridItem, {
+        ...props,
+        children: children
+    });
+Item.displayName = 'Grid.Item';
+const Grid = Object.assign(Grid_Grid, {
+    Item
+});
+export { Item, Grid as default };

package/build/components/Icon/Icon.js

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { cloneElement } from "react";
+import DynamicIcon from "../DynamicIcon.js";
+import { marginProps } from "../helpers/styledProps.js";
+import customIcons from "./customIcons.js";
+import icons from "./icons.js";
+const Icon = ({ name, svg, external, size, width, height, color, hoverColor, pointer = false, animation, style, onClick, ref, ...props })=>{
+    let SvgComponent = null;
+    let svgContent = null;
+    let iconName;
+    if (name) {
+        if (name in customIcons) SvgComponent = customIcons[name];
+        else if (name in icons) iconName = icons[name];
+    } else if (svg) {
+        let element = svg;
+        if ('function' == typeof svg) element = svg();
+        const clonedSvg = /*#__PURE__*/ cloneElement(element, {
+            width: width || size,
+            height: height || size
+        });
+        svgContent = clonedSvg;
+    }
+    const iconSizes = {
+        tiny: 12,
+        small: 18,
+        medium: 24,
+        large: 40
+    };
+    let iconSize = 'number' == typeof size ? size : iconSizes.medium;
+    if ('tiny' === size || 'small' === size || 'medium' === size || 'large' === size) iconSize = iconSizes[size];
+    const finalLucideName = external ?? iconName;
+    if (!SvgComponent && finalLucideName) return /*#__PURE__*/ jsx(DynamicIcon, {
+        ...props,
+        name: finalLucideName,
+        size: iconSize,
+        pointer: pointer,
+        hoverColor: hoverColor,
+        color: color,
+        style: style,
+        onClick: onClick,
+        tabIndex: onClick ? 0 : void 0,
+        animation: animation,
+        ref: ref
+    });
+    return SvgComponent || svgContent ? /*#__PURE__*/ jsx(IconWrapper, {
+        pointer: pointer,
+        hoverColor: hoverColor,
+        color: color,
+        style: style,
+        onClick: onClick,
+        as: onClick ? 'button' : void 0,
+        tabIndex: onClick ? 0 : -1,
+        animation: animation,
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ jsx(Svg, {
+            size: iconSize,
+            width: width,
+            height: height,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: SvgComponent ? /*#__PURE__*/ jsx(SvgComponent, {}) : svgContent
+        })
+    }) : null;
+};
+const Svg = styled.svg(({ size, width, height })=>({
+        width: width || size,
+        height: height || size
+    }));
+const IconWrapper = styled.div(({ theme, color, pointer, hoverColor, animation })=>({
+        width: 'max-content',
+        height: 'max-content',
+        display: 'flex',
+        color: color || 'inherit',
+        cursor: pointer ? 'pointer' : void 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+        padding: 0,
+        animation,
+        '&:hover': {
+            color: hoverColor || void 0
+        },
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`,
+            outlineOffset: -1
+        }
+    }), marginProps);
+const Icon_Icon = Icon;
+export { Icon_Icon as default };

package/build/components/Icon/customIcons.js

@@ -0,0 +1,48 @@
+import CaretDown from "../../assets/icons/CaretDown.js";
+import CaretUp from "../../assets/icons/CaretUp.js";
+import Dialpad from "../../assets/icons/Dialpad.js";
+import Exclamation from "../../assets/icons/Exclamation.js";
+import Phone from "../../assets/icons/Phone.js";
+import PhoneAdd from "../../assets/icons/PhoneAdd.js";
+import PhoneBlocked from "../../assets/icons/PhoneBlocked.js";
+import PhoneCallback from "../../assets/icons/PhoneCallback.js";
+import PhoneEnd from "../../assets/icons/PhoneEnd.js";
+import PhoneForward from "../../assets/icons/PhoneForward.js";
+import PhoneHistory from "../../assets/icons/PhoneHistory.js";
+import PhoneHold from "../../assets/icons/PhoneHold.js";
+import PhoneIncoming from "../../assets/icons/PhoneIncoming.js";
+import PhoneMissed from "../../assets/icons/PhoneMissed.js";
+import PhoneTalk from "../../assets/icons/PhoneTalk.js";
+import PhoneTransfer from "../../assets/icons/PhoneTransfer.js";
+import Record from "../../assets/icons/Record.js";
+import Screenshot from "../../assets/icons/Screenshot.js";
+import ShieldWavv from "../../assets/icons/ShieldWavv.js";
+import Spotify from "../../assets/icons/Spotify.js";
+import SubArrow from "../../assets/icons/SubArrow.js";
+import TransferCancel from "../../assets/icons/TransferCancel.js";
+const customIcons_customIcons = {
+    'caret-down': CaretDown,
+    'caret-up': CaretUp,
+    dialpad: Dialpad,
+    exclamation: Exclamation,
+    phone: Phone,
+    'phone-add': PhoneAdd,
+    'phone-blocked': PhoneBlocked,
+    'phone-callback': PhoneCallback,
+    'phone-end': PhoneEnd,
+    'phone-forward': PhoneForward,
+    'phone-history': PhoneHistory,
+    'phone-hold': PhoneHold,
+    'phone-incoming': PhoneIncoming,
+    'phone-missed': PhoneMissed,
+    'phone-talk': PhoneTalk,
+    'phone-transfer': PhoneTransfer,
+    record: Record,
+    screenshot: Screenshot,
+    'shield-wavv': ShieldWavv,
+    spotify: Spotify,
+    'sub-arrow': SubArrow,
+    'transfer-cancel': TransferCancel
+};
+const customIcons = customIcons_customIcons;
+export { customIcons as default };