@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/floating/floating-content/floating-content.jsx

@@ -1,29 +0,0 @@
-import { forwardRef } from 'react';
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useMergeRefs } from '@floating-ui/react';
-import { AnimatePresence, motion } from 'motion/react';
-import { useFloatingContext } from '../floating/helpers';
-import { FLOATING_Z_INDEX } from '../../../theme';
-import { useIsHydrated } from '../../../hooks/use-is-hydrated';
-export const FloatingContent = forwardRef(({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, ...props }, ref) => {
-    const { getFloatingProps, context } = useFloatingContext();
-    const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
-    const isHydrated = useIsHydrated();
-    return (<AnimatePresence>
-        {context.open && isHydrated && (<FloatingPortal root={document.body} {...floatingPortalProps}>
-            <FloatingOverlay {...floatingOverlayProps} style={{
-                display: (floatingOverlayProps?.disabled ?? true) ? 'contents' : undefined,
-                ...floatingOverlayProps?.style,
-            }}>
-              <FloatingFocusManager disabled context={context} {...floatingFocusManagerProps}>
-                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} style={{
-                ...(context.elements.reference ? context.floatingStyles : {}),
-                ...style,
-                zIndex: FLOATING_Z_INDEX,
-            }} {...getFloatingProps(props)} ref={mergedRefs}>
-                  {props.children}
-                </motion.div>
-              </FloatingFocusManager>
-            </FloatingOverlay>
-          </FloatingPortal>)}
-      </AnimatePresence>);
-});

package/dist/lib/floating/floating-content/index.js

@@ -1,2 +0,0 @@
-export * from './floating-content';
-export * from './types';

package/dist/lib/floating/floating-content/types.js

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

package/dist/lib/floating/floating-trigger/floating-trigger.jsx

@@ -1,27 +0,0 @@
-import { cloneElement, isValidElement } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { get, isFunction } from 'lodash-es';
-import { useFloatingContext } from '../floating/helpers';
-export const FloatingTrigger = ({ children }) => {
-    const { getReferenceProps, context } = useFloatingContext();
-    const mergedRefs = useMergeRefs([
-        context.refs.setReference,
-        isValidElement(children) ? get(children.props, 'ref') : undefined,
-    ]);
-    if (isValidElement(children)) {
-        return cloneElement(children, getReferenceProps({
-            ...(children.props ?? {}),
-            ref: mergedRefs,
-        }));
-    }
-    if (isFunction(children)) {
-        const reactElement = children(context);
-        return cloneElement(reactElement, getReferenceProps({
-            ...(reactElement.props ?? {}),
-            ref: mergedRefs,
-        }));
-    }
-    return (<div {...getReferenceProps()} ref={mergedRefs}>
-      {children}
-    </div>);
-};

package/dist/lib/floating/floating-trigger/index.js

@@ -1,2 +0,0 @@
-export * from './floating-trigger';
-export * from './types';

package/dist/lib/floating/floating-trigger/types.js

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

package/dist/lib/floating/index.js

@@ -1,4 +0,0 @@
-export * from './floating';
-export * from './floating-trigger';
-export * from './floating-content';
-export * from './floating-close';

package/dist/lib/form-helper-text/form-helper-text.jsx

@@ -1,14 +0,0 @@
-import { getTypographyVar, getColorVar } from '../../theme';
-export const FormHelperText = ({ error, children, ...props }) => {
-    return (<p css={{
-            paddingLeft: 16,
-            paddingRight: 16,
-            paddingTop: 4,
-            fontSize: getTypographyVar('xs').fontSize,
-            lineHeight: getTypographyVar('xs').lineHeight,
-            '&:empty': { display: 'none' },
-            ...(error && { color: getColorVar('red.600') }),
-        }} {...props}>
-      {children}
-    </p>);
-};

package/dist/lib/form-helper-text/index.js

@@ -1,2 +0,0 @@
-export * from './form-helper-text';
-export * from './types';

package/dist/lib/form-helper-text/types.js

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

package/dist/lib/form-label/form-label.jsx

@@ -1,12 +0,0 @@
-import { isString } from 'lodash-es';
-import { getColorVar, mediaQuery } from '../../theme';
-export const FormLabel = ({ required, children, ...props }) => {
-    return (<div css={{
-            marginBottom: '0.375rem',
-            display: 'inline-flex',
-            [mediaQuery('sm')]: { marginBottom: '0.5rem' },
-        }} {...props}>
-      {isString(children) ? <label>{children}</label> : children}
-      {required && <span css={{ color: getColorVar('red.600') }}>&nbsp;*</span>}
-    </div>);
-};

package/dist/lib/form-label/index.js

@@ -1 +0,0 @@
-export * from './form-label';

package/dist/lib/grid/cell/cell.jsx

@@ -1,25 +0,0 @@
-import { isNumber } from 'lodash-es';
-import { getCellProps } from './helpers';
-import { mediaQuery } from '../../../theme';
-export const Cell = ({ children, ref, ..._props }) => {
-    const { xs, sm, md, lg, ...rest } = getCellProps(_props);
-    const css = [
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div css={css} {...rest} ref={ref}>
-      {children}
-    </div>);
-};
-const createStyle = ({ colSpan, css } = {}) => {
-    return [
-        {
-            gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan,
-        },
-        css,
-    ];
-};

package/dist/lib/grid/cell/index.js

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

package/dist/lib/grid/cell/types.js

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

package/dist/lib/grid/grid/grid.jsx

@@ -1,33 +0,0 @@
-import { isNil } from 'lodash-es';
-import { getGridProps } from './helpers';
-import { mediaQuery } from '../../../theme';
-import { containerStyle } from '../../../constants/emotion';
-export const GRID_MINIMUM_COLS = 1;
-export const GRID_MAXIMUM_COLS = 24;
-export const Grid = ({ children, ref, ..._props }) => {
-    const { xs, sm, md, lg, container, ...rest } = getGridProps(_props);
-    const css = [
-        container && containerStyle,
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div css={css} {...rest} ref={ref}>
-      <div css={{ display: 'grid', width: '100%', height: '100%' }}>{children}</div>
-    </div>);
-};
-const createStyle = ({ cols, css: { width, height, ...css } = {} } = {}) => {
-    return [
-        {
-            width,
-            height,
-            '& > *': {
-                gridTemplateColumns: isNil(cols) ? undefined : `repeat(${cols}, minmax(0, 1fr))`,
-                ...css,
-            },
-        },
-    ];
-};

package/dist/lib/grid/grid/index.js

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

package/dist/lib/grid/grid/types.js

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

package/dist/lib/grid/index.js

@@ -1,2 +0,0 @@
-export * from './grid';
-export * from './cell';

package/dist/lib/highlight-words/highlight-words.jsx

@@ -1,17 +0,0 @@
-import { Fragment } from 'react';
-import { findAll } from 'highlight-words-core';
-import { cn } from '../../utils';
-export const HighlightWords = ({ highlightClassName, ...props }) => {
-    const chunks = findAll(props);
-    return (<Fragment>
-      {chunks.map((chunk, index) => {
-            const { end, highlight, start } = chunk;
-            const text = props.textToHighlight.substring(start, end);
-            return (<Fragment key={index}>
-            {highlight ? (<span css={{ fontWeight: 500 }} className={cn(highlightClassName)}>
-                {text}
-              </span>) : (text)}
-          </Fragment>);
-        })}
-    </Fragment>);
-};

package/dist/lib/highlight-words/index.js

@@ -1,2 +0,0 @@
-export * from './highlight-words';
-export * from './types';

package/dist/lib/highlight-words/types.js

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

package/dist/lib/icon/icon.jsx

@@ -1,23 +0,0 @@
-import { getIconProps } from './helpers';
-import { SvgLoader } from '../../components';
-import { mediaQuery } from '../../theme';
-export const Icon = ({ children: _children, ref, ..._props }) => {
-    const { source, xs, md, sm, lg, ...props } = getIconProps(_props);
-    return (<SvgLoader source={source} {...props} css={[
-            createStyle(xs),
-            {
-                [mediaQuery('sm')]: createStyle(sm),
-                [mediaQuery('md')]: createStyle(md),
-                [mediaQuery('lg')]: createStyle(lg),
-            },
-        ]} width={undefined} height={undefined} ref={ref}/>);
-};
-const createStyle = ({ css, size } = {}) => {
-    return [
-        {
-            width: size,
-            height: size,
-            ...css,
-        },
-    ];
-};

package/dist/lib/icon/index.js

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

package/dist/lib/icon/types.js

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

package/dist/lib/icon-button/icon-button.jsx

@@ -1,113 +0,0 @@
-import { forwardRef, useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { getIconButtonProps } from './helpers';
-import { useRippleEffect } from '../../hooks';
-import { cn, ensureBoolean } from '../../utils';
-import { Icon } from '../..';
-import LoadingIcon from '../../assets/svg/loading-waiting.svg?raw';
-import { getColorVar, mediaQuery } from '../../theme';
-import { getColorShadesByVariant, getSizeVariantState, omitResponsiveProps } from '../../utils';
-import { animateSpinStyle } from '../../constants/emotion';
-export const IconButton = forwardRef((_props, ref) => {
-    const { color, variant, children, icon, isLoading, ...rest } = getIconButtonProps(_props);
-    const { dark, light, main, contrastText, placeholder: placeholderColor, ariaDisabledSurface, ariaDisabledText, } = getColorShadesByVariant(color);
-    const buttonRef = useRef(null);
-    const { className } = useRippleEffect(buttonRef);
-    const mergedRef = useMergeRefs([ref, buttonRef]);
-    const createStyle = (screen) => {
-        const { css } = rest[screen] ?? {};
-        return [css];
-    };
-    const css = [
-        {
-            display: 'flex',
-            width: 'fit-content',
-            height: 'fit-content',
-            position: 'relative',
-            justifyContent: 'center',
-            alignItems: 'center',
-            pointerEvents: ensureBoolean(rest['aria-disabled']) ? 'none' : undefined,
-            ':disabled': {
-                pointerEvents: 'none',
-            },
-        },
-        isLoading && {
-            pointerEvents: 'none',
-            '& > *:not([data-loading])': {
-                visibility: 'hidden',
-            },
-        },
-        variant === 'contained' && {
-            backgroundColor: isLoading ? placeholderColor : main,
-            color: contrastText,
-            ':hover': {
-                backgroundColor: dark,
-            },
-            '&[aria-disabled=true]': {
-                backgroundColor: ariaDisabledSurface,
-                pointerEvents: 'none',
-            },
-        },
-        variant === 'outlined' && {
-            backgroundColor: 'transparent',
-            color: isLoading ? placeholderColor : main,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: isLoading ? placeholderColor : main,
-            ':hover': {
-                backgroundColor: light,
-            },
-            '&[aria-disabled=true]': {
-                color: ariaDisabledText,
-                pointerEvents: 'none',
-                borderColor: 'currentcolor',
-            },
-        },
-        variant === 'text' && {
-            backgroundColor: 'transparent',
-            color: isLoading ? placeholderColor : main,
-            ':hover': {
-                backgroundColor: light,
-            },
-            '&[aria-disabled=true]': {
-                color: ariaDisabledText,
-            },
-        },
-        {
-            ':disabled': {
-                color: getColorVar('neutral.500'),
-                backgroundColor: getColorVar('neutral.300'),
-            },
-        },
-        rest['aria-disabled'] && {
-            pointerEvents: 'none',
-        },
-        createStyle('xs'),
-        {
-            [mediaQuery('sm')]: createStyle('sm'),
-            [mediaQuery('md')]: createStyle('md'),
-        },
-    ];
-    const onClick = (e) => {
-        rest.onClick?.(e);
-    };
-    return (<button css={css} {...omitResponsiveProps(rest)} className={cn(rest.className, className)} onClick={onClick} ref={mergedRef}>
-      {!!icon && (<Icon {...icon} xs={{
-                size: getSizeVariantState(rest.xs?.size).iconSize,
-                ...icon.xs,
-            }} sm={{
-                size: getSizeVariantState(rest.sm?.size).iconSize,
-                ...icon.sm,
-            }} md={{
-                size: getSizeVariantState(rest.md?.size).iconSize,
-                ...icon.md,
-            }} lg={{
-                size: getSizeVariantState(rest.lg?.size).iconSize,
-                ...icon.lg,
-            }}/>)}
-      {children}
-      {isLoading && (<span data-loading css={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <Icon css={animateSpinStyle} source={LoadingIcon}/>
-        </span>)}
-    </button>);
-});

package/dist/lib/icon-button/index.js

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

package/dist/lib/icon-button/types.js

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

package/dist/lib/image/image.jsx

@@ -1,31 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-import { isString } from 'lodash-es';
-import { getImageProps } from './helpers';
-import { IMAGE_PLACEHOLDER } from '../../constants';
-import { mediaQuery } from '../../theme';
-export const Image = forwardRef((_props, ref) => {
-    const { xs, sm, md, lg, fallback = true, src, ...rest } = getImageProps(_props);
-    const fallbackSrc = useMemo(() => {
-        if (isString(fallback))
-            return fallback;
-        return fallback ? IMAGE_PLACEHOLDER : undefined;
-    }, [fallback]);
-    const css = [
-        {
-            maxHeight: '100%',
-        },
-        xs?.css,
-        {
-            [mediaQuery('sm')]: sm?.css,
-            [mediaQuery('md')]: md?.css,
-            [mediaQuery('lg')]: lg?.css,
-        },
-    ];
-    const onError = (e) => {
-        if (fallbackSrc) {
-            e.currentTarget.src = fallbackSrc;
-        }
-        rest.onError?.(e);
-    };
-    return <img src={src || fallbackSrc} alt="" css={css} {...rest} ref={ref} onError={onError}/>;
-});

package/dist/lib/image/index.js

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

package/dist/lib/image/types.js

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

package/dist/lib/index.js

@@ -1,59 +0,0 @@
-export * from './grid';
-export * from './text';
-export * from './swiper';
-export * from './marquee';
-export * from './button';
-export * from './checkbox';
-export * from './accordion';
-export * from './image';
-export * from './input';
-export * from './textarea';
-export * from './select';
-export * from './popover';
-export * from './radio-button';
-export * from './linear-progress';
-export * from './highlight-words';
-export * from './menu';
-export * from './icon';
-export * from './flag';
-export * from './unordered-list';
-export * from './flexbox';
-export * from './tabs';
-export * from './swiper';
-export * from './floating';
-export * from './box';
-export * from './form-label';
-export * from './icon-button';
-export * from './container';
-export * from './star-rating';
-export * from './pagination';
-export * from './dialog';
-export * from './loading';
-export * from './link';
-export * from './count-up';
-export * from './nav-link';
-export * from './breadcrumbs';
-export * from './phone-input';
-export * from './form-helper-text';
-export * from './otp-input';
-export * from './notifications';
-export * from './countdown-timer';
-export * from './drawer';
-export * from './filter-panel';
-export * from './collapse';
-export * from './input-number';
-export * from './table';
-export * from './badge';
-export * from './switch';
-export * from './chip';
-export * from './stepper';
-export * from './progress';
-export * from './input-range';
-export * from './tooltip';
-export * from './multiple-select';
-export * from './date-picker';
-export * from './time-picker';
-export * from './video';
-export * from './lightbox';
-export * from './cascader';
-export * from './primitive';

package/dist/lib/input/index.js

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

package/dist/lib/input/input.jsx

@@ -1,128 +0,0 @@
-import { forwardRef, useRef, useState } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { isString } from 'lodash-es';
-import { getInputProps } from './helpers';
-import classes from './input.module.scss';
-import { FormHelperText } from '../form-helper-text';
-import { Icon } from '../icon';
-import { cn } from '../../utils';
-import EyeHidden from '../../assets/svg/eye-hidden.svg?raw';
-import EyeVisible from '../../assets/svg/eye-show-visible.svg?raw';
-import { mediaQuery } from '../../theme';
-import { getSizeVariantState } from '../../utils';
-export const Input = forwardRef((_props, ref) => {
-    const { type, xs, sm, md, lg, prefix, suffix, containerProps, mainProps, className, helperText, error, startIcon, endIcon, onChange: onChangeProp, transform, debounce = 0, mode = 'onChange', value, ...rest } = getInputProps(_props);
-    const inputRef = useRef(null);
-    const [showPassword, setShowPassword] = useState(false);
-    const [typingValue, setTypingValue] = useState();
-    const timeoutFn = useRef(null);
-    const beforeChangeValue = useRef('');
-    const mergedRefs = useMergeRefs([ref, inputRef]);
-    const onChange = (e, force = false) => {
-        e.target.value = transform ? transform(e.target.value) : e.target.value;
-        if (timeoutFn.current) {
-            clearTimeout(timeoutFn.current);
-        }
-        const isFocused = document.activeElement === e.target;
-        /**
-         * nếu force hoặc input đang không được focus
-         */
-        if (force || !isFocused) {
-            onChangeProp?.(e);
-            return;
-        }
-        if (mode === 'onBlur') {
-            // undefined value means the input is not controlled
-            if (isString(value)) {
-                setTypingValue(e.target.value);
-            }
-            return;
-        }
-        if (debounce > 0) {
-            // undefined value means the input is not controlled
-            if (isString(value)) {
-                setTypingValue(e.target.value);
-            }
-            timeoutFn.current = setTimeout(() => {
-                onChangeProp?.(e);
-            }, debounce);
-            return;
-        }
-        onChangeProp?.(e);
-    };
-    const onFocus = (e) => {
-        beforeChangeValue.current = e.target.value;
-        rest.onFocus?.(e);
-    };
-    const onBlur = (e) => {
-        if (beforeChangeValue.current !== e.target.value) {
-            if (mode === 'onBlur' || debounce > 0) {
-                onChange(e, true);
-            }
-        }
-        rest.onBlur?.(e);
-        setTimeout(() => {
-            setTypingValue(undefined);
-        }, debounce);
-    };
-    const css = [
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    const toggleShowPassword = (e) => {
-        e.stopPropagation();
-        setShowPassword((prev) => !prev);
-    };
-    return (<div {...containerProps} className={cn(classes.input__container, containerProps?.className)}>
-      <div css={css} {...mainProps} className={cn(classes.input__main, {
-            [classes.input__main_error]: error,
-        }, mainProps?.className)}>
-        {prefix}
-        {!!startIcon && (<Icon {...startIcon} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...startIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...startIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...startIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...startIcon.lg,
-            }}/>)}
-        <input data-error={error} type={type === 'password' && showPassword ? 'text' : type} className={cn(classes.input__control, className)} {...rest} value={typingValue ?? value} ref={mergedRefs} onChange={onChange} onBlur={onBlur} onFocus={onFocus}/>
-        {!!endIcon && (<Icon {...endIcon} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...endIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...endIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...endIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...endIcon.lg,
-            }}/>)}
-        {suffix}
-        {type === 'password' && (<Icon onClick={toggleShowPassword} css={{ cursor: 'pointer' }} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-            }} source={showPassword ? EyeVisible : EyeHidden}/>)}
-      </div>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-});
-const createStyle = ({ css } = {}) => {
-    return [css];
-};