@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/multiple-select/multiple-select.jsx

@@ -1,265 +0,0 @@
-import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { get, isElement, isNil, trimStart } from 'lodash-es';
-import { getMultipleSelectProps } from './helpers';
-import { Input } from '../input';
-import { InputMask } from '../input-mask';
-import { SvgLoader, VirtualizedList } from '../../components';
-import { useControllableState } from '../../hooks';
-import { ensureArray, matchSearch } from '../../utils';
-import ArrowDownIcon from '../../assets/svg/arrow-down.svg?raw';
-import { Checkbox, Floating, FloatingContent, FloatingTrigger, FormHelperText, TextSkeleton } from '../..';
-import { useWindowScreen } from '../../hooks';
-import { getColorVar, getTypographyVar } from '../../theme';
-import { getResponsiveProp, getSizeVariantState } from '../../utils';
-const DEFAULT_DISPLAY_ROW_COUNT = 5;
-export const MultipleSelect = ({ ref, ...props }) => {
-    const { placement = 'bottom-start', open, onOpenChange, searchable = true, value, optionValue, optionLabel, defaultValue, options, onChange, placeholder, listProps, tagLabel, 
-    // selectedRenderer,
-    optionSearchLabel, helperText, error, containerProps, inputProps, displayCount = 1, ...rest } = getMultipleSelectProps(props);
-    const searchInputRef = useRef(null);
-    const floatingRef = useRef(null);
-    const uniqueId = useId();
-    const windowScreen = useWindowScreen();
-    const [inputValue, setInputValue] = useControllableState({
-        defaultValue: inputProps?.defaultValue ?? '',
-        value: inputProps?.value,
-    });
-    const [isOpen, setIsOpen] = useControllableState({
-        defaultValue: open ?? false,
-        value: open,
-    });
-    const prehandleOpenChange = (nextOpen, event, reason) => {
-        setIsOpen(nextOpen);
-        onOpenChange?.(nextOpen, event, reason);
-    };
-    const [controllableValues, setControllableValues] = useControllableState({
-        defaultValue: defaultValue ?? [],
-        value,
-    });
-    const getOptionValue = useCallback((option) => {
-        return typeof optionValue === 'function'
-            ? optionValue(option)
-            : get(option, optionValue ?? 'value');
-    }, [optionValue]);
-    const getTagLabel = (option) => {
-        switch (typeof tagLabel) {
-            case 'function':
-                return tagLabel(option);
-            case 'string':
-                return get(option, tagLabel);
-            default:
-                return null;
-        }
-    };
-    const getOptionValueRef = useRef(getOptionValue);
-    getOptionValueRef.current = getOptionValue;
-    const selectedValueMap = useMemo(() => new Map(controllableValues.map((item) => {
-        const key = typeof item === 'object' ? getOptionValue(item) : item;
-        return [
-            key,
-            (typeof item === 'object' ? item : (options.find((option) => getOptionValue(option) === key) ?? {})),
-        ];
-    })), [controllableValues]);
-    const getOptionLabel = useCallback((option) => {
-        return typeof optionLabel === 'function'
-            ? optionLabel(option)
-            : get(option, optionLabel ?? 'label');
-    }, [optionLabel]);
-    const handleChange = (option, selected) => {
-        let preset = [...controllableValues];
-        if (selected) {
-            preset.push(option);
-        }
-        else {
-            preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
-        }
-        setControllableValues(preset);
-        onChange?.(preset);
-    };
-    const responsiveSize = isNil(windowScreen.name) ? undefined : getResponsiveProp(rest, 'size', windowScreen.name);
-    const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
-    const displayOptions = useMemo(() => {
-        if (!inputValue) {
-            return options;
-        }
-        return options.filter((option) => {
-            let searchLabels = [String(getOptionLabel(option))];
-            switch (typeof optionSearchLabel) {
-                case 'function':
-                    searchLabels = ensureArray(optionSearchLabel(option));
-                    break;
-                case 'string':
-                    searchLabels = ensureArray(String(get(option, optionSearchLabel)));
-                    break;
-                case 'object':
-                    searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
-                    break;
-                default:
-                    break;
-            }
-            return matchSearch(searchLabels, inputValue);
-        });
-    }, [getOptionLabel, inputValue, optionSearchLabel, options]);
-    const RowComponent = ({ row }) => {
-        const rowData = displayOptions.at(row.index);
-        const rowValue = isNil(rowData) ? undefined : getOptionValue(rowData);
-        const isSelected = isNil(rowValue) ? false : selectedValueMap.has(rowValue);
-        const onCheckboxChange = (e) => {
-            if (isNil(rowData))
-                return;
-            handleChange(rowData, e.target.checked);
-        };
-        return (<Checkbox onChange={onCheckboxChange} checked={isSelected} containerProps={{
-                css: {
-                    paddingTop: 2,
-                    paddingBottom: 2,
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    borderRadius: 8,
-                    ':hover': { backgroundColor: getColorVar('neutral.100') },
-                    minHeight: rowMinHeight,
-                    width: '100%',
-                },
-            }}>
-        <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {isNil(rowData) ? <TextSkeleton css={{ width: '100%' }}/> : getOptionLabel(rowData)}
-        </div>
-      </Checkbox>);
-    };
-    const sizeOptions = {
-        apply({ elements }) {
-            const { width } = elements.reference.getBoundingClientRect();
-            Object.assign(elements.floating.style, {
-                minWidth: `${width}px`,
-            });
-        },
-    };
-    const estimateSize = useCallback((_index) => {
-        return rowMinHeight ?? 0;
-    }, [rowMinHeight]);
-    const getItemKey = useCallback((index) => {
-        const option = displayOptions.at(index);
-        return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
-    }, [displayOptions, getOptionValue, uniqueId]);
-    const getTextCss = (sizeVariant) => {
-        if (isNil(sizeVariant))
-            return {};
-        const { textVariant } = getSizeVariantState(sizeVariant);
-        if (isNil(textVariant))
-            return {};
-        return getTypographyVar(textVariant);
-    };
-    const onInputChange = (e) => {
-        e.target.value = trimStart(e.target.value);
-        setInputValue(e.target.value);
-        inputProps?.onChange?.(e);
-    };
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            if (isOpen) {
-                searchInputRef.current?.focus();
-            }
-            else {
-                setInputValue('');
-            }
-        }, 100);
-        return () => clearTimeout(timer);
-    }, [isOpen, setInputValue]);
-    return (<div {...containerProps} css={{ display: 'flex', flexDirection: 'column', width: '100%', ...containerProps?.css }}>
-      <Floating clickProps={{
-            enabled: true,
-        }} dismissProps={{
-            enabled: true,
-        }} sizeOptions={sizeOptions} placement={placement} open={isOpen} onOpenChange={prehandleOpenChange} ref={floatingRef}>
-        <FloatingTrigger>
-          <InputMask type="button" error={isOpen ? false : error} as="button" suffix={<SvgLoader source={ArrowDownIcon} width={20} height={20} css={{
-                transition: 'transform 150ms',
-                ...(isOpen ? { transform: 'rotate(-180deg)' } : {}),
-            }}/>} {...rest} ref={ref}>
-            <div css={[
-            {
-                flex: 1,
-                textAlign: 'left',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                paddingTop: 4,
-                paddingBottom: 4,
-            },
-            getTextCss(rest.xs?.size),
-        ]}>
-              {selectedValueMap.size > 0 ? (<div css={{
-                display: 'flex',
-                gap: 4,
-                ...(displayCount > 1 ? { flexWrap: 'wrap' } : {}),
-            }}>
-                  {Array.from(selectedValueMap.values())
-                .slice(0, displayCount)
-                .map((selectedOption) => {
-                const rowValue = getOptionValue(selectedOption);
-                const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
-                return (<div css={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 8,
-                        overflow: 'hidden',
-                        borderRadius: 8,
-                        backgroundColor: getColorVar('neutral.100'),
-                        paddingLeft: 8,
-                        paddingRight: 8,
-                        paddingTop: 4,
-                        paddingBottom: 4,
-                        fontSize: '0.75rem',
-                        lineHeight: '1rem',
-                    }} key={rowValue.toString()}>
-                          <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {isElement(rowLabel) ? rowLabel : <span>{rowLabel}</span>}
-                          </div>
-                        </div>);
-            })}
-                  {displayCount < selectedValueMap.size && (<div css={{
-                    borderRadius: 8,
-                    backgroundColor: getColorVar('neutral.100'),
-                    paddingLeft: 8,
-                    paddingRight: 8,
-                    paddingTop: 4,
-                    paddingBottom: 4,
-                    fontSize: '0.75rem',
-                    lineHeight: '1rem',
-                    flexShrink: 0,
-                }}>
-                      <span css={{ fontWeight: 500 }}>+{selectedValueMap.size - displayCount}</span>
-                    </div>)}
-                </div>) : (<span css={{ color: getColorVar('neutral.400'), display: 'block' }}>{placeholder}</span>)}
-            </div>
-          </InputMask>
-        </FloatingTrigger>
-        <FloatingContent>
-          <div css={{
-            paddingTop: 8,
-            paddingBottom: 8,
-            border: '1px solid',
-            borderColor: getColorVar('border.default'),
-            borderRadius: 8,
-            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-            fontSize: '0.875rem',
-            lineHeight: '1.25rem',
-            backgroundColor: getColorVar('surface.default'),
-        }}>
-            {searchable && (<div css={{ paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: 'relative' }}>
-                <Input xs={{ size: rest.xs?.size }} sm={{ size: rest.sm?.size }} md={{ size: rest.md?.size }} lg={{ size: rest.lg?.size }} value={inputValue} {...inputProps} onChange={onInputChange} ref={searchInputRef}/>
-              </div>)}
-            <VirtualizedList {...listProps} css={{ paddingLeft: 4, paddingRight: 4 }} options={{
-            count: displayOptions.length,
-            estimateSize,
-            getItemKey,
-        }} style={{
-            maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
-            ...listProps?.style,
-        }} RowComponent={RowComponent}/>
-          </div>
-        </FloatingContent>
-      </Floating>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-};

package/dist/lib/multiple-select/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/nav-link/index.js

@@ -1,2 +0,0 @@
-export * from './nav-link';
-export * from './types';

package/dist/lib/nav-link/nav-link.jsx

@@ -1,43 +0,0 @@
-import { forwardRef } from 'react';
-import { isFunction, isNil } from 'lodash-es';
-import { NavLink as ReactRouterNavLink } from 'react-router';
-import { Booleanish } from '../../constants';
-export const NavLink = forwardRef(({ children, style, className, to, ...props }, ref) => {
-    const styleFn = (renderProps) => {
-        return isFunction(style)
-            ? style({
-                ...renderProps,
-                isActive: renderProps.isActive && !isNil(to),
-            })
-            : style;
-    };
-    const classNameFn = (renderProps) => {
-        return isFunction(className)
-            ? className({
-                ...renderProps,
-                isActive: renderProps.isActive && !isNil(to),
-            })
-            : className;
-    };
-    const onClick = (e) => {
-        if (e.currentTarget.getAttribute('aria-disabled') === Booleanish.True) {
-            e.preventDefault();
-        }
-        if (isNil(to)) {
-            e.preventDefault();
-        }
-        props.onClick?.(e);
-    };
-    return (<ReactRouterNavLink {...props} style={styleFn} className={classNameFn} to={to ?? '#'} ref={ref} onClick={onClick}>
-        {(renderProps) => {
-            return (<>
-              {isFunction(children)
-                    ? children({
-                        ...renderProps,
-                        isActive: renderProps.isActive && !isNil(to),
-                    })
-                    : children}
-            </>);
-        }}
-      </ReactRouterNavLink>);
-});

package/dist/lib/nav-link/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/notifications/index.js

@@ -1,2 +0,0 @@
-export * from './notifications';
-export * from './helpers';

package/dist/lib/notifications/notifications.jsx

@@ -1,160 +0,0 @@
-import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
-import { FloatingPortal } from '@floating-ui/react';
-import { isNil } from 'lodash-es';
-import { AnimatePresence, motion, useAnimation } from 'motion/react';
-import { notificationStore } from './helpers';
-import { getColorShadesByVariant } from '../../utils';
-import { FLOATING_Z_INDEX, getTypographyVar, mediaQuery } from '../../theme';
-export const Notifications = () => {
-    const { entries } = useSyncExternalStore(notificationStore.subscribe, notificationStore.getSnapshot, notificationStore.getServerSnapshot);
-    return (<FloatingPortal>
-      <div css={{
-            zIndex: FLOATING_Z_INDEX + 1,
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            pointerEvents: 'none',
-            padding: 8,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            gap: 8,
-        }}>
-        <AnimatePresence mode="popLayout">
-          {entries.map((notification) => {
-            return <Notification key={notification.id} notification={notification}/>;
-        })}
-        </AnimatePresence>
-      </div>
-    </FloatingPortal>);
-};
-const Notification = ({ notification }) => {
-    const { main, light } = getColorShadesByVariant(notification.color);
-    const timerRef = useRef(null);
-    const controls = useAnimation();
-    const progressControls = useAnimation();
-    const startTimeRef = useRef(Date.now());
-    const remainingTimeRef = useRef(notification.duration ?? 3000);
-    const removeNotification = useCallback(() => {
-        notificationStore.setState((prev) => ({
-            ...prev,
-            entries: prev.entries.filter((n) => n.id !== notification.id),
-        }));
-    }, [notification.id]);
-    const clearTimer = useCallback(() => {
-        if (isNil(timerRef.current))
-            return;
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-    }, []);
-    const startTimer = useCallback((timeLeft) => {
-        clearTimer();
-        const duration = timeLeft ?? remainingTimeRef.current;
-        startTimeRef.current = Date.now();
-        timerRef.current = setTimeout(() => {
-            removeNotification();
-        }, duration);
-    }, [clearTimer, removeNotification]);
-    useEffect(() => {
-        startTimer(notification.duration ?? 3000);
-        // Start progress bar animation - chạy từ 0% sang 100%
-        progressControls.start({
-            scaleX: 1,
-            transition: {
-                duration: (notification.duration ?? 3000) / 1000,
-                ease: 'linear',
-            },
-        });
-        return () => {
-            clearTimer();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const handleMouseEnter = useCallback(() => {
-        // Tính thời gian còn lại
-        const elapsed = Date.now() - startTimeRef.current;
-        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-        clearTimer();
-        progressControls.stop();
-    }, [clearTimer, progressControls]);
-    const handleMouseLeave = useCallback(() => {
-        startTimer(remainingTimeRef.current);
-        // Tiếp tục progress bar với thời gian còn lại - chạy đến 100%
-        progressControls.start({
-            scaleX: 1,
-            transition: {
-                duration: remainingTimeRef.current / 1000,
-                ease: 'linear',
-            },
-        });
-    }, [startTimer, progressControls]);
-    return (<motion.div layout initial={{ opacity: 0, x: 100 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 300 }} transition={{ duration: 0.3 }} css={{
-            backgroundColor: light,
-            outlineColor: main,
-            width: 440,
-            borderRadius: 12,
-            outlineWidth: 1,
-            outlineOffset: -1,
-            outlineStyle: 'solid',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            maxWidth: '100%',
-            pointerEvents: 'auto',
-            cursor: 'grab',
-            padding: 16,
-            overflow: 'hidden',
-            position: 'relative',
-        }} drag="x" dragConstraints={{ left: 0, right: 0 }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onDragEnd={(_event, info) => {
-            if (Math.abs(info.offset.x) > 100) {
-                // vuốt đủ xa thì ẩn
-                controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
-            }
-            else {
-                // không đủ xa thì quay lại
-                controls.start({ x: 0 });
-            }
-        }}>
-      <div css={{
-            fontSize: getTypographyVar('sm').fontSize,
-            lineHeight: getTypographyVar('sm').lineHeight,
-            fontWeight: 500,
-            [mediaQuery('md')]: {
-                fontSize: getTypographyVar('base').fontSize,
-                lineHeight: getTypographyVar('base').lineHeight,
-            },
-        }}>
-        {notification.title ?? <>&nbsp;</>}
-      </div>
-      <div css={{
-            fontSize: getTypographyVar('xs').fontSize,
-            lineHeight: getTypographyVar('xs').lineHeight,
-            [mediaQuery('md')]: {
-                fontSize: getTypographyVar('sm').fontSize,
-                lineHeight: getTypographyVar('sm').lineHeight,
-            },
-        }}>
-        {notification.message ?? <>&nbsp;</>}
-      </div>
-      <div css={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 4,
-            paddingLeft: 4,
-            paddingRight: 4,
-            overflow: 'hidden',
-            pointerEvents: 'none',
-        }}>
-        <motion.div css={{
-            height: 4,
-            width: '100%',
-            borderRadius: 9999,
-        }} style={{
-            backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
-            transformOrigin: 'left',
-        }} initial={{ scaleX: 0 }} animate={progressControls}/>
-      </div>
-    </motion.div>);
-};

package/dist/lib/otp-input/index.js

@@ -1 +0,0 @@
-export * from './otp-input';

package/dist/lib/otp-input/otp-input.jsx

@@ -1,111 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { times } from 'lodash-es';
-import { Input } from '../input';
-import { useControllableState } from '../../hooks';
-import { getTypographyVar, mediaQuery } from '../../theme';
-export const OtpInput = ({ length = 6, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }) => {
-    const [otp, setOtp] = useControllableState({
-        defaultValue: times(length, (num) => defaultValue?.at(num) ?? ''),
-        value: value?.split(''),
-    });
-    const inputRefs = useRef([]);
-    const getInputIndex = (target) => {
-        return Number(target.dataset.index);
-    };
-    useEffect(() => {
-        if (autoFocus) {
-            inputRefs.current.at(0)?.focus();
-        }
-    }, [autoFocus]);
-    const handleChange = (e) => {
-        if (disabled)
-            return;
-        const value = e.target.value;
-        const index = getInputIndex(e.target);
-        // Chỉ cho phép nhập số
-        if (value && !/^\d$/.test(value))
-            return;
-        const newOtp = [...otp];
-        newOtp[index] = value;
-        setOtp(newOtp);
-        // Gọi callback khi có thay đổi
-        onChange?.(newOtp.join(''));
-        // Tự động chuyển sang ô tiếp theo
-        if (value && index < length - 1) {
-            inputRefs.current.at(index + 1)?.focus();
-        }
-        // Gọi callback khi hoàn thành
-        if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
-            onFullfilled?.(newOtp.join(''));
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (disabled)
-            return;
-        const index = getInputIndex(e.target);
-        // Xử lý phím Backspace
-        if (e.key === 'Backspace') {
-            if (otp[index]) {
-                // Xóa ký tự hiện tại
-                const newOtp = [...otp];
-                newOtp[index] = '';
-                setOtp(newOtp);
-                onChange?.(newOtp.join(''));
-            }
-            else if (index > 0) {
-                // Chuyển về ô trước đó và xóa
-                const newOtp = [...otp];
-                newOtp[index - 1] = '';
-                setOtp(newOtp);
-                inputRefs.current.at(index - 1)?.focus();
-                onChange?.(newOtp.join(''));
-            }
-        }
-        // Xử lý phím mũi tên
-        if (e.key === 'ArrowLeft' && index > 0) {
-            inputRefs.current.at(index - 1)?.focus();
-        }
-        if (e.key === 'ArrowRight' && index < length - 1) {
-            inputRefs.current.at(index + 1)?.focus();
-        }
-    };
-    const handlePaste = (e) => {
-        if (disabled)
-            return;
-        e.preventDefault();
-        const pastedData = e.clipboardData.getData('text/plain');
-        const pastedDigits = pastedData.replace(/\D/g, '').slice(0, length);
-        if (pastedDigits) {
-            const newOtp = [...otp];
-            pastedDigits.split('').forEach((digit, index) => {
-                if (index < length) {
-                    newOtp[index] = digit;
-                }
-            });
-            setOtp(newOtp);
-            onChange?.(newOtp.join(''));
-            // Focus vào ô cuối cùng được điền
-            const lastFilledIndex = Math.min(pastedDigits.length - 1, length - 1);
-            inputRefs.current.at(lastFilledIndex)?.focus();
-            // Kiểm tra xem đã hoàn thành chưa
-            if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
-                onFullfilled?.(newOtp.join(''));
-            }
-        }
-    };
-    const onFocus = (e) => {
-        e.target.select();
-    };
-    return (<div css={{ display: 'flex', width: '100%', gap: '0.5rem', [mediaQuery('sm')]: { gap: '0.75rem' } }}>
-      {otp.map((digit, index) => (<div key={index} css={{ flex: '1 1 0%', position: 'relative' }}>
-          <Input ref={(el) => {
-                inputRefs.current[index] = el;
-            }} type="text" inputMode="numeric" pattern="\d*" maxLength={1} data-index={index} value={digit} onChange={handleChange} onFocus={onFocus} onKeyDown={handleKeyDown} onPaste={index === 0 ? handlePaste : undefined} disabled={disabled} readOnly={isLoading} css={{
-                textAlign: 'center',
-                fontWeight: 500,
-                fontSize: getTypographyVar('lg').fontSize,
-                lineHeight: getTypographyVar('lg').lineHeight,
-            }} xs={{ size: 'md' }} error={error}/>
-        </div>))}
-    </div>);
-};

package/dist/lib/otp-input/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/pagination/index.js

@@ -1,3 +0,0 @@
-export * from './pagination';
-export * from './types';
-export * from './helpers';