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

package/build/components/Waveform.js

@@ -0,0 +1,243 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect, useRef, useState } from "react";
+import { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
+import { marginProps } from "./helpers/styledProps.js";
+const Waveform2 = ({ src, label, showOutput = false, showHoverTime = false, unplayedColor, playedColor, barCount = 1200, heightMultiplier = 1, width, height, formatOptions, ...sliderProps })=>{
+    const { background4, color } = useTheme();
+    const canvasRef = useRef(null);
+    const trackRef = useRef(null);
+    const [peaks, setPeaks] = useState([]);
+    const [isHovering, setIsHovering] = useState(false);
+    const [hoverSeconds, setHoverSeconds] = useState(null);
+    const currentValue = Number(sliderProps.value ?? sliderProps.defaultValue ?? 0);
+    const maxValue = Number(sliderProps.maxValue ?? 100);
+    useEffect(()=>{
+        let cancelled = false;
+        const buildPeaks = async ()=>{
+            try {
+                if (!src) return;
+                const resp = await fetch(src, {
+                    cache: 'force-cache'
+                });
+                const buf = await resp.arrayBuffer();
+                const Ctx = window.AudioContext || window.webkitAudioContext;
+                const audioCtx = new Ctx();
+                const audioBuffer = await audioCtx.decodeAudioData(buf.slice(0));
+                const samplesPerBar = Math.max(1, Math.floor(audioBuffer.length / barCount));
+                const left = audioBuffer.getChannelData(0);
+                const right = audioBuffer.numberOfChannels > 1 ? audioBuffer.getChannelData(1) : left;
+                const computed = [];
+                for(let i = 0; i < barCount; i += 1){
+                    const start = i * samplesPerBar;
+                    const end = Math.min(start + samplesPerBar, audioBuffer.length);
+                    let peak = 0;
+                    for(let j = start; j < end; j += 1){
+                        const v = Math.max(Math.abs(left[j] || 0), Math.abs(right[j] || 0));
+                        if (v > peak) peak = v;
+                    }
+                    computed.push(peak);
+                }
+                audioCtx.close?.();
+                if (!cancelled) setPeaks(computed);
+            } catch (_e) {
+                if (!cancelled) setPeaks([]);
+            }
+        };
+        buildPeaks();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        src,
+        barCount
+    ]);
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        const track = trackRef.current;
+        if (!canvas || !track) return;
+        const drawWaveform = ()=>{
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+            const rect = track.getBoundingClientRect();
+            const w = rect.width || track.clientWidth || 0;
+            const h = rect.height || track.clientHeight || 0;
+            if (0 === w || 0 === h) return;
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = Math.max(1, Math.floor(w * dpr));
+            canvas.height = Math.max(1, Math.floor(h * dpr));
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+            const centerY = h / 2;
+            const gap = 2;
+            const barWidth = 3;
+            const maxBars = Math.max(1, Math.floor(w / (barWidth + gap)));
+            const bars = Math.min(maxBars, Math.max(peaks.length, maxBars));
+            const getPeak = (i, totalBars)=>{
+                if (0 === peaks.length) return 0.08;
+                const idx = Math.floor(i / totalBars * peaks.length);
+                return Math.min(1, Math.max(0, peaks[idx]));
+            };
+            const ratioPlayed = maxValue ? currentValue / maxValue : 0;
+            const playedCutoffIndex = Math.floor(ratioPlayed * bars);
+            for(let i = 0; i < bars; i += 1){
+                const peak = getPeak(i, bars);
+                const barHeight = Math.max(1, peak * (h - 4) * heightMultiplier);
+                const x = i * (barWidth + gap);
+                const unplayedFill = unplayedColor ?? background4;
+                const playedFill = playedColor ?? color.brand;
+                ctx.fillStyle = i <= playedCutoffIndex ? playedFill : unplayedFill;
+                ctx.fillRect(x, centerY - barHeight / 2, barWidth, barHeight);
+            }
+        };
+        drawWaveform();
+        const resizeObserver = new ResizeObserver(()=>{
+            drawWaveform();
+        });
+        resizeObserver.observe(track);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        peaks,
+        currentValue,
+        maxValue,
+        unplayedColor,
+        playedColor,
+        height
+    ]);
+    const formatTime = (seconds)=>{
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+    const getSecondsFromClientX = (clientX)=>{
+        if (!trackRef.current || !maxValue) return 0;
+        const rect = trackRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+        const ratio = rect.width ? x / rect.width : 0;
+        return Math.min(Math.max(ratio * maxValue, 0), maxValue);
+    };
+    const leftOffset = `calc(${maxValue ? (hoverSeconds ?? 0) / maxValue * 100 : 0}% - 20px)`;
+    return /*#__PURE__*/ jsxs(StyledSlider, {
+        "aria-label": "Audio waveform track",
+        ...sliderProps,
+        width: width,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            showOutput && /*#__PURE__*/ jsx(SliderOutput, {
+                children: ({ state })=>formatTime(state.values[0])
+            }),
+            /*#__PURE__*/ jsxs(StyledSliderTrack, {
+                ref: trackRef,
+                height: height,
+                onMouseEnter: ()=>setIsHovering(true),
+                onMouseLeave: ()=>{
+                    setIsHovering(false);
+                    setHoverSeconds(null);
+                },
+                onMouseMove: (e)=>{
+                    if (showHoverTime) setHoverSeconds(getSecondsFromClientX(e.clientX));
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Canvas, {
+                        ref: canvasRef
+                    }),
+                    /*#__PURE__*/ jsx(HiddenThumb, {
+                        children: ({ isFocusVisible })=>{
+                            if (trackRef.current) if (isFocusVisible) trackRef.current.setAttribute('data-focus-visible', 'true');
+                            else trackRef.current.removeAttribute('data-focus-visible');
+                            return null;
+                        }
+                    }),
+                    showHoverTime && isHovering && null !== hoverSeconds && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(HoverTooltip, {
+                                style: {
+                                    left: leftOffset
+                                },
+                                children: formatTime(hoverSeconds)
+                            }),
+                            /*#__PURE__*/ jsx(HoverLine, {
+                                style: {
+                                    left: `calc(${maxValue ? hoverSeconds / maxValue * 100 : 0}%)`
+                                }
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const StyledSlider = styled(Slider)(({ width })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        width: width || '100%',
+        position: 'relative',
+        gap: 4,
+        '& .react-aria-Label': {
+            fontSize: 14,
+            fontWeight: 500
+        },
+        '& .react-aria-SliderOutput': {
+            fontSize: 12,
+            fontVariantNumeric: 'tabular-nums'
+        }
+    }), marginProps);
+const StyledSliderTrack = styled(SliderTrack)(({ theme, height })=>({
+        position: 'relative',
+        width: '100%',
+        height,
+        cursor: 'pointer',
+        borderRadius: 4,
+        '&[data-focus-visible]': {
+            outline: `1px solid ${theme.accent}`
+        },
+        '&[data-disabled]': {
+            opacity: 0.4,
+            cursor: 'not-allowed'
+        }
+    }));
+const HiddenThumb = styled(SliderThumb)({
+    width: 0,
+    height: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: '50%'
+});
+const Canvas = styled.canvas({
+    width: '100%',
+    height: '100%',
+    userSelect: 'none',
+    pointerEvents: 'none'
+});
+const HoverTooltip = styled.div(({ theme })=>({
+        position: 'absolute',
+        top: -28,
+        padding: '4px 8px',
+        borderRadius: 4,
+        backgroundColor: theme.background4,
+        color: theme.scale10,
+        fontSize: 12,
+        fontWeight: 500,
+        userSelect: 'none',
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
+        boxShadow: theme.elevation2
+    }));
+const HoverLine = styled.div(({ theme })=>({
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: 1,
+        backgroundColor: theme.scale8,
+        pointerEvents: 'none'
+    }));
+const Waveform = Waveform2;
+export { Waveform as default };

package/build/components/draftUtils.js

@@ -0,0 +1,193 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { CompositeDecorator, EditorState, Modifier, SelectionState, convertFromRaw, convertToRaw } from "draft-js";
+import { get } from "es-toolkit/compat";
+const FOUND_FIELD = 'FOUND_FIELD';
+const NOT_FOUND = 'NOT_FOUND';
+const IMMUTABLE = 'IMMUTABLE';
+const getVisualLength = (text)=>Array.from(text).length;
+const visualSlice = (text, start, end)=>{
+    const chars = Array.from(text);
+    return chars.slice(start, end).join('');
+};
+const Field = styled.span(({ theme, error })=>({
+        display: 'inline-block',
+        color: error ? theme.color.error : theme.accent
+    }));
+const FoundField = ({ children })=>/*#__PURE__*/ jsx(Field, {
+        children: children
+    });
+const NotFoundField = ({ children })=>/*#__PURE__*/ jsx(Field, {
+        error: true,
+        children: children
+    });
+const strategy = (block, callback, contentState, type)=>{
+    block.findEntityRanges((character)=>{
+        const key = character.getEntity();
+        if (key) {
+            const entityInstance = contentState.getEntity(key);
+            return entityInstance.getType() === type;
+        }
+        return false;
+    }, callback);
+};
+const decorator = new CompositeDecorator([
+    {
+        strategy: (block, callback, contentState)=>strategy(block, callback, contentState, FOUND_FIELD),
+        component: FoundField
+    },
+    {
+        strategy: (block, callback, contentState)=>strategy(block, callback, contentState, NOT_FOUND),
+        component: NotFoundField
+    }
+]);
+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 decode = (data)=>{
+    const parts = data.blocks.map((block)=>{
+        const { text, entityRanges } = block;
+        if (entityRanges.length < 1) return text;
+        const list = [];
+        let index = 0;
+        for (const { key, offset, length } of entityRanges){
+            if (offset > index) list.push(visualSlice(text, index, offset));
+            const id = get(data, `entityMap[${key}].data.id`, 'unknown');
+            list.push(`<<${id}>>`);
+            index = offset + length;
+        }
+        list.push(visualSlice(text, index));
+        return list.join('');
+    });
+    return parts.join(' ');
+};
+const encode = (text, fields, displayValue)=>{
+    const entityMap = {};
+    const block = {
+        text: '',
+        type: 'unstyled',
+        entityRanges: [],
+        key: '',
+        depth: 1,
+        inlineStyleRanges: []
+    };
+    const parts = text.replace(/(<<\w+?>>)/g, '~~$1~~').split('~~');
+    for(let i = 0; i < parts.length; i++){
+        let part = parts[i];
+        if (part.startsWith('<<')) {
+            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);
+            part = label;
+            block.entityRanges.push({
+                key: i,
+                offset: getVisualLength(block.text),
+                length: getVisualLength(part)
+            });
+            entityMap[i] = {
+                type: isValid ? FOUND_FIELD : NOT_FOUND,
+                mutability: IMMUTABLE,
+                data: {
+                    id
+                }
+            };
+        }
+        block.text += part;
+    }
+    return convertFromRaw({
+        blocks: [
+            block
+        ],
+        entityMap
+    });
+};
+const createStateWithContent = (value, fields, displayValue)=>{
+    const encoded = encode(value, fields, displayValue);
+    const newEditorState = EditorState.createWithContent(encoded, decorator);
+    return newEditorState;
+};
+const getRawState = (state, decoded = true)=>{
+    const content = state.getCurrentContent();
+    const convertedState = convertToRaw(content);
+    return decoded ? decode(convertedState) : convertedState;
+};
+const getEntities = (state)=>{
+    const convertedState = getRawState(state, false);
+    const entities = 'string' != typeof convertedState ? Object.values(convertedState.entityMap) : [];
+    return entities;
+};
+const hasMissingEntities = (state)=>{
+    const entities = getEntities(state);
+    const hasMissing = entities.some((entity)=>entity.type === NOT_FOUND);
+    return hasMissing;
+};
+const insertFieldEntity = (field, fields, state, displayValue)=>{
+    const { id } = field;
+    const content = state.getCurrentContent();
+    const selection = state.getSelection();
+    const { label, isValid } = validateField(field, fields, displayValue);
+    const type = isValid ? FOUND_FIELD : NOT_FOUND;
+    const contentStateWithEntity = content.createEntity(type, IMMUTABLE, {
+        id
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const textWithEntity = Modifier.insertText(content, selection, label, void 0, entityKey);
+    const newState = EditorState.push(state, textWithEntity, 'insert-characters');
+    return EditorState.forceSelection(newState, textWithEntity.getSelectionAfter());
+};
+const getFocusStateAtEnd = (state)=>{
+    const content = state.getCurrentContent();
+    const block = content.getLastBlock();
+    const key = block.getKey();
+    const length = block.getLength();
+    const selection = new SelectionState({
+        anchorKey: key,
+        anchorOffset: length,
+        focusKey: key,
+        focusOffset: length
+    });
+    const atEnd = EditorState.forceSelection(state, selection);
+    return atEnd;
+};
+const getPastedState = (text, state)=>{
+    const currentContent = state.getCurrentContent();
+    const selection = state.getSelection();
+    const block = {
+        text,
+        type: 'unstyled',
+        entityRanges: [],
+        key: '',
+        depth: 1,
+        inlineStyleRanges: []
+    };
+    const content = convertFromRaw({
+        blocks: [
+            block
+        ],
+        entityMap: {}
+    });
+    const pastedState = EditorState.createWithContent(content, decorator);
+    const pastedBlocks = pastedState.getCurrentContent().getBlockMap();
+    const newState = Modifier.replaceWithFragment(currentContent, selection, pastedBlocks);
+    const newEditorState = EditorState.push(state, newState, 'insert-fragment');
+    return newEditorState;
+};
+export { createStateWithContent, decode, decorator, encode, getEntities, getFocusStateAtEnd, getPastedState, getRawState, hasMissingEntities, insertFieldEntity };

package/build/components/helpers/getIcon.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Icon from "../Icon/Icon.js";
+const getIcon = (icon, props)=>{
+    const getClonedIcon = (element)=>/*#__PURE__*/ cloneElement(element, props);
+    if ('string' == typeof icon) {
+        const { width, height, ...rest } = props || {};
+        return /*#__PURE__*/ jsx(Icon, {
+            name: icon,
+            ...rest
+        });
+    }
+    if ('object' == typeof icon && 'props' in icon && 'trigger' in icon.props) return /*#__PURE__*/ cloneElement(icon, {
+        trigger: getClonedIcon(icon.props.trigger)
+    });
+    if ('object' == typeof icon && 'props' in icon) return getClonedIcon(icon);
+    if (icon.svg) return /*#__PURE__*/ jsx(Icon, {
+        ...icon,
+        ...props
+    });
+    const { width, height, ...rest } = props || {};
+    return /*#__PURE__*/ jsx(Icon, {
+        ...icon,
+        ...rest
+    });
+};
+const helpers_getIcon = getIcon;
+export { helpers_getIcon as default };

package/build/components/helpers/getPopPosition.js

@@ -0,0 +1,20 @@
+const getPopPosition = (pos)=>{
+    let side = 'top';
+    let align = 'center';
+    if (!pos) return {
+        side,
+        align
+    };
+    const [sideProp, alignProp] = pos.split(' ');
+    if ('left' === sideProp) side = 'left';
+    if ('right' === sideProp) side = 'right';
+    if ('bottom' === sideProp) side = 'bottom';
+    if ('left' === alignProp || 'top' === alignProp) align = 'start';
+    if ('right' === alignProp || 'bottom' === alignProp) align = 'end';
+    return {
+        side,
+        align
+    };
+};
+const helpers_getPopPosition = getPopPosition;
+export { helpers_getPopPosition as default };

package/build/components/helpers/isPropAllowed.js

@@ -0,0 +1,3 @@
+const isPropAllowed = (prop, propArray)=>!propArray.includes(prop);
+const helpers_isPropAllowed = isPropAllowed;
+export { helpers_isPropAllowed as default };

package/build/components/helpers/mergePadding.js

@@ -0,0 +1,47 @@
+const parseValue = (value)=>{
+    if ('number' == typeof value) return value;
+    if ('string' == typeof value) return Number.parseInt(value.replace('px', ''), 10);
+    return 0;
+};
+const mergePadding_mergePadding = (paddingObj)=>{
+    const paddingValues = {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    };
+    const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft } = paddingObj;
+    if (padding) {
+        const paddingString = 'string' == typeof padding ? padding : padding.toString();
+        const values = paddingString.split(' ').map(parseValue);
+        switch(values.length){
+            case 1:
+                paddingValues.top = paddingValues.right = paddingValues.bottom = paddingValues.left = values[0];
+                break;
+            case 2:
+                paddingValues.top = paddingValues.bottom = values[0];
+                paddingValues.right = paddingValues.left = values[1];
+                break;
+            case 3:
+                paddingValues.top = values[0];
+                paddingValues.right = paddingValues.left = values[1];
+                paddingValues.bottom = values[2];
+                break;
+            case 4:
+                paddingValues.top = values[0];
+                paddingValues.right = values[1];
+                paddingValues.bottom = values[2];
+                paddingValues.left = values[3];
+                break;
+            default:
+                break;
+        }
+    }
+    if (void 0 !== paddingTop) paddingValues.top = parseValue(paddingTop);
+    if (void 0 !== paddingRight) paddingValues.right = parseValue(paddingRight);
+    if (void 0 !== paddingBottom) paddingValues.bottom = parseValue(paddingBottom);
+    if (void 0 !== paddingLeft) paddingValues.left = parseValue(paddingLeft);
+    return paddingValues;
+};
+const mergePadding = mergePadding_mergePadding;
+export { mergePadding as default };

package/build/components/helpers/styledProps.js

@@ -0,0 +1,34 @@
+const widthHeightProps = ({ width, height })=>({
+        width,
+        height
+    });
+const maxWidthHeightProps = ({ maxWidth, maxHeight })=>({
+        maxWidth,
+        maxHeight
+    });
+const minWidthHeightProps = ({ minWidth, minHeight })=>({
+        minWidth,
+        minHeight
+    });
+const paddingProps = ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft })=>({
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingRight,
+        paddingLeft
+    });
+const marginProps = ({ margin, marginTop, marginBottom, marginRight, marginLeft })=>({
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    });
+const positionProps = ({ position, top, bottom, right, left })=>({
+        position,
+        top,
+        bottom,
+        right,
+        left
+    });
+export { marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps, positionProps, widthHeightProps };