@janbox/storefront-ui 1.0.15 → 1.0.17

package/dist/lib/select/select.jsx

@@ -1,219 +0,0 @@
-import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { get, isNil, trimStart } from 'lodash-es';
-import { getSelectProps } 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 CheckIcon from '../../assets/svg/done-check.svg?raw';
-import { Floating, FloatingContent, FloatingTrigger, FormHelperText } from '../..';
-import { useWindowScreen } from '../../hooks';
-import { getColorVar, getTypographyVar } from '../../theme';
-import { getResponsiveProp, getSizeVariantState } from '../../utils';
-const DEFAULT_DISPLAY_ROW_COUNT = 5;
-export const Select = ({ ref, ...props }) => {
-    const { placement = 'bottom-start', open, onOpenChange, searchable = true, value, optionValue, optionLabel, defaultValue, options, onChange, placeholder, listProps, selectedRenderer, optionSearchLabel, helperText, error, containerProps, inputProps, fullWidth = true, lazy = true, ...rest } = getSelectProps(props);
-    const searchInputRef = useRef(null);
-    const floatingRef = useRef(null);
-    const uniqueId = useId();
-    const [inputValue, setInputValue] = useControllableState({
-        defaultValue: inputProps?.defaultValue ?? '',
-        value: inputProps?.value,
-    });
-    const windowScreen = useWindowScreen();
-    const [isOpen, setIsOpen] = useControllableState({
-        defaultValue: open ?? false,
-        value: open,
-    });
-    const prehandleOpenChange = (nextOpen, event, reason) => {
-        setIsOpen(nextOpen);
-        onOpenChange?.(nextOpen, event, reason);
-    };
-    const [selectedValue, setSelectedValue] = useControllableState({
-        defaultValue: defaultValue,
-        value,
-    });
-    const getOptionValue = useCallback((option) => {
-        return typeof optionValue === 'function' ? optionValue(option) : get(option, optionValue ?? 'value');
-    }, [optionValue]);
-    const getOptionLabel = useCallback((option) => {
-        return typeof optionLabel === 'function'
-            ? optionLabel(option)
-            : get(option, optionLabel ?? 'label');
-    }, [optionLabel]);
-    const handleChange = (row) => {
-        const rowValue = getOptionValue(row);
-        setSelectedValue(rowValue);
-        onChange?.(rowValue, row);
-        floatingRef.current?.context.onOpenChange?.(false);
-    };
-    const selectedOption = useMemo(() => options.find((option) => selectedValue === getOptionValue(option)), [getOptionValue, options, selectedValue]);
-    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);
-        if (isNil(rowData))
-            return <></>;
-        const rowValue = getOptionValue(rowData);
-        const isSelected = selectedValue === rowValue;
-        const onClick = (_e) => {
-            if (isSelected) {
-                floatingRef.current?.context.onOpenChange?.(false);
-                return;
-            }
-            handleChange(rowData);
-        };
-        return (<div onClick={onClick} aria-hidden data-option-value={rowValue} css={{
-                minHeight: rowMinHeight,
-                paddingTop: 2,
-                paddingBottom: 2,
-                paddingLeft: 12,
-                paddingRight: 12,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                cursor: 'pointer',
-                borderRadius: 8,
-                ':hover': { backgroundColor: getColorVar('neutral.100') },
-                ...(isSelected
-                    ? {
-                        color: getColorVar('primary.600'),
-                        backgroundColor: getColorVar('primary.100'),
-                        ':hover': { backgroundColor: getColorVar('primary.100') },
-                    }
-                    : {}),
-            }}>
-        <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {getOptionLabel(rowData)}
-        </div>
-        {isSelected && (<SvgLoader source={CheckIcon} width={24} height={24} css={{ color: getColorVar('primary.600') }}/>)}
-      </div>);
-    };
-    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',
-            ...(fullWidth ? { 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} css={[
-            {
-                ':hover': { outlineColor: getColorVar('primary.300') },
-            },
-            isOpen && { outlineColor: getColorVar('primary.600') },
-            rest.disabled && {
-                cursor: 'not-allowed',
-                pointerEvents: 'none',
-                backgroundColor: getColorVar('neutral.200'),
-            },
-            rest.css,
-        ]} ref={ref}>
-            <div css={[
-            { flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-            getTextCss(rest.xs?.size),
-        ]}>
-              {selectedOption ? (<>{selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption)}</>) : (<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,
-            overscan: lazy ? undefined : options.length,
-        }} style={{
-            maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
-            ...listProps?.style,
-        }} RowComponent={RowComponent}/>
-          </div>
-        </FloatingContent>
-      </Floating>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-};

package/dist/lib/select/types.js

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

package/dist/lib/star-rating/index.js

@@ -1,2 +0,0 @@
-export * from './star-rating';
-export * from './types';

package/dist/lib/star-rating/star-rating.jsx

@@ -1,16 +0,0 @@
-import { forwardRef, useId } from 'react';
-import { getColorShadesByVariant } from '../../utils';
-export const StarRating = forwardRef(({ rating, maxRating = 5, size = 24, colorVariant = 'secondary' }, ref) => {
-    const id = useId();
-    const percent = (rating / maxRating) * 24;
-    const { main } = getColorShadesByVariant(colorVariant);
-    return (<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" ref={ref}>
-        <defs>
-          <clipPath id={id}>
-            <rect x="0" y="0" width={percent} height={24}/>
-          </clipPath>
-        </defs>
-        <path d="M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z" fill="white" stroke={main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z" fill={main} clipPath={`url(#${id})`} strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" stroke={main}/>
-      </svg>);
-});

package/dist/lib/star-rating/types.js

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

package/dist/lib/stepper/index.js

@@ -1,3 +0,0 @@
-export * from './stepper';
-export * from './types';
-export * from './step';

package/dist/lib/stepper/step.jsx

@@ -1,59 +0,0 @@
-import { forwardRef } from 'react';
-import { Icon } from '../icon';
-import { getColorVar } from '../../theme';
-import CheckIcon from '../../assets/svg/check.svg?raw';
-const stateStyles = {
-    done: {
-        text: { color: getColorVar('white') },
-        bg: {
-            borderColor: getColorVar('primary.600'),
-            backgroundColor: getColorVar('primary.600'),
-            color: getColorVar('white'),
-        },
-    },
-    active: {
-        text: { color: getColorVar('primary.600') },
-        bg: {
-            borderColor: getColorVar('primary.600'),
-            backgroundColor: getColorVar('white'),
-            color: getColorVar('primary.600'),
-        },
-    },
-    normal: {
-        text: { color: getColorVar('white') },
-        bg: {
-            borderColor: getColorVar('neutral.500'),
-            backgroundColor: getColorVar('neutral.500'),
-            color: getColorVar('white'),
-        },
-    },
-};
-export const Step = forwardRef((props, ref) => {
-    const { state = 'normal', content, className, size = 32, children, ...rest } = props;
-    const styles = stateStyles[state] ?? stateStyles.normal;
-    const checked = state === 'done';
-    return (<div>
-      <div style={{ width: `${size}px`, height: `${size}px` }} ref={ref} css={{
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderWidth: 2,
-            borderStyle: 'solid',
-            transition: 'border 500ms, background 500ms, color 500ms',
-            zIndex: 1,
-            ...styles.bg,
-        }} {...rest}>
-        <p css={{
-            ...styles.text,
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-        }}>
-          {checked ? <Icon source={CheckIcon}/> : children}
-        </p>
-        {content}
-      </div>
-    </div>);
-});

package/dist/lib/stepper/stepper.jsx

@@ -1,69 +0,0 @@
-import { forwardRef } from 'react';
-import { Step } from './step';
-import { Progress } from '../progress';
-const maxPercent = 100;
-export const Stepper = forwardRef((props, ref) => {
-    const { direction = 'horizontal', className, items, activeIndex = 0, circleSize = 32, ...rest } = props;
-    const value = (maxPercent / (items.length - 1)) * activeIndex;
-    const progressBarSize = `${((items.length - 1) / items.length) * 100}%`;
-    const progressBarStyles = {
-        horizontal: {
-            top: `${circleSize / 2}px`,
-            width: progressBarSize,
-        },
-        vertical: {
-            left: `${circleSize / 2}px`,
-            height: progressBarSize,
-        },
-    };
-    const renderItems = () => {
-        return items.map((item, index) => {
-            const { children, description, ...itemRest } = item;
-            const getState = () => {
-                if (index < activeIndex) {
-                    return 'done';
-                }
-                if (index === activeIndex) {
-                    return 'active';
-                }
-                if (index > activeIndex) {
-                    return 'normal';
-                }
-            };
-            return (<li key={index} css={{
-                    flex: 1,
-                    display: 'flex',
-                    gap: 16,
-                    ...(direction === 'vertical'
-                        ? { flexDirection: 'row', alignItems: 'center' }
-                        : { flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between' }),
-                }}>
-          <Step size={circleSize} state={getState()} {...itemRest}>
-            {children ?? index + 1}
-          </Step>
-          {!!description && <div>{description}</div>}
-        </li>);
-        });
-    };
-    return (<div css={{ position: 'relative' }}>
-      <Progress ref={ref} css={{
-            position: 'absolute',
-            zIndex: -1,
-            width: '100%',
-            ...(direction === 'horizontal'
-                ? { height: 4, left: '50%', transform: 'translateX(-50%) translateY(-50%)' }
-                : { width: 4, top: '50%', transform: 'translateY(-50%) translateX(-50%)' }),
-        }} style={progressBarStyles[direction]} value={value} direction={direction} {...rest}/>
-      <ul css={{
-            display: 'flex',
-            width: '100%',
-            height: '100%',
-            gap: 12,
-            ...(direction === 'horizontal'
-                ? { flexDirection: 'row', justifyContent: 'space-between' }
-                : { flexDirection: 'column', justifyContent: 'space-between' }),
-        }}>
-        {renderItems()}
-      </ul>
-    </div>);
-});

package/dist/lib/swiper/index.js

@@ -1,3 +0,0 @@
-export * from './swiper';
-export * from './swiper-slide';
-export * from './swiper-dots-paging';

package/dist/lib/swiper/swiper/index.js

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

package/dist/lib/swiper/swiper/swiper.jsx

@@ -1,79 +0,0 @@
-import { Suspense, useEffect } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import Autoplay from 'embla-carousel-autoplay';
-import useEmblaCarousel from 'embla-carousel-react';
-import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
-import { isNumber } from 'lodash-es';
-import { getSwiperProps } from './helpers';
-import { SwiperDotsPaging } from '../swiper-dots-paging';
-import { mediaQuery } from '../../../theme';
-const SWIPER_SLIDE_GAP_VAR_NAME = '--slice-gap';
-const SWIPER_SLIDE_GAP_VAR = `var(${SWIPER_SLIDE_GAP_VAR_NAME}, 0px)`;
-export const Swiper = ({ children, onApi, ref, ..._props }) => {
-    const { xs, sm, md, lg, autoplayOptions, options, paging, ...rest } = getSwiperProps(_props);
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        ...options,
-    }, [Autoplay(autoplayOptions), WheelGesturesPlugin()]);
-    useEffect(() => {
-        emblaApi && onApi?.(emblaApi);
-    }, [emblaApi]);
-    const mergedRefs = useMergeRefs([emblaRef, ref]);
-    const css = [
-        {
-            position: 'relative',
-            overflow: 'hidden',
-            maxHeight: '100%',
-            maxWidth: '100%',
-        },
-        options?.axis === 'y' && { height: '100%' },
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div css={css} {...rest} ref={mergedRefs}>
-      <div role="group" css={{
-            display: 'flex',
-            alignItems: 'stretch',
-            height: '100%',
-            ...(options?.axis === 'y' ? { height: '100%', flexDirection: 'column' } : {}),
-        }}>
-        {children}
-      </div>
-      <Suspense fallback={null}>
-        {paging?.type === 'dots' && (<div css={{
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                display: 'flex',
-                justifyContent: 'center',
-                bottom: 0,
-                ...paging.xs?.css,
-                [mediaQuery('sm')]: paging.sm?.css,
-                [mediaQuery('md')]: paging.md?.css,
-                [mediaQuery('lg')]: paging.lg?.css,
-            }}>
-            <SwiperDotsPaging api={emblaApi} {...paging.options}/>
-          </div>)}
-      </Suspense>
-    </div>);
-};
-const createStyle = ({ slidesPerView, css, spaceBetween } = {}) => {
-    return [
-        {
-            [`& > [role="group"]`]: {
-                [SWIPER_SLIDE_GAP_VAR_NAME]: isNumber(spaceBetween) ? `${spaceBetween}px` : undefined,
-                gap: SWIPER_SLIDE_GAP_VAR,
-                [`& > *`]: {
-                    flexBasis: isNumber(slidesPerView)
-                        ? `calc((100% - (${SWIPER_SLIDE_GAP_VAR} * ${slidesPerView - 1})) / ${slidesPerView})`
-                        : undefined,
-                },
-            },
-        },
-        css,
-    ];
-};

package/dist/lib/swiper/swiper/types.js

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

package/dist/lib/swiper/swiper-dots-paging/index.js

@@ -1 +0,0 @@
-export * from './swiper-dots-paging';

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.jsx

@@ -1,58 +0,0 @@
-import { useEffect, useState } from 'react';
-import { times } from 'lodash-es';
-import { motion } from 'motion/react';
-import { getColorShadesByVariant } from '../../../utils';
-export const SwiperDotsPaging = ({ api, size = 12, spaceBetween = 4, colorVariant = 'primary', }) => {
-    const [inViewIndexes, setInViewIndexes] = useState(api?.slidesInView() ?? []);
-    const [totalSlides, setTotalSlides] = useState(api?.slideNodes().length ?? 0);
-    const { main, light } = getColorShadesByVariant(colorVariant);
-    useEffect(() => {
-        const checkSlidesInView = () => {
-            setInViewIndexes(api?.slidesInView() ?? []);
-        };
-        const checkTotalSlides = () => {
-            setTotalSlides(api?.slideNodes().length ?? 0);
-        };
-        checkSlidesInView();
-        checkTotalSlides();
-        api?.on('slidesInView', checkSlidesInView);
-        api?.on('resize', checkSlidesInView);
-        api?.on('slidesChanged', checkTotalSlides);
-        return () => {
-            api?.off('slidesInView', checkSlidesInView);
-            api?.off('resize', checkSlidesInView);
-            api?.off('slidesChanged', checkTotalSlides);
-        };
-    }, [api]);
-    const onDotClick = (e) => {
-        e.stopPropagation();
-        api?.scrollTo(Number(e.currentTarget.value));
-    };
-    const firstInViewIndex = inViewIndexes.at(0) ?? 0;
-    return (<div css={{ position: 'relative', display: 'flex', width: 'fit-content', gap: spaceBetween, minHeight: size }}>
-      {times(totalSlides).map((slideIndex) => (<button onClick={onDotClick} value={slideIndex} key={slideIndex}>
-          <div css={{
-                width: size,
-                height: size,
-                borderColor: main,
-                backgroundColor: light,
-                border: '1px solid',
-                borderRadius: 9999,
-                ...(inViewIndexes.includes(slideIndex) ? { visibility: 'hidden' } : {}),
-            }}/>
-        </button>))}
-      <motion.div initial={{
-            width: 0,
-            left: 0,
-        }} animate={{
-            width: inViewIndexes.length * size + (inViewIndexes.length - 1) * spaceBetween,
-            left: firstInViewIndex * size + firstInViewIndex * spaceBetween,
-        }} css={{
-            backgroundColor: main,
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            borderRadius: 9999,
-        }}/>
-    </div>);
-};

package/dist/lib/swiper/swiper-dots-paging/types.js

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

package/dist/lib/swiper/swiper-slide/index.js

@@ -1,2 +0,0 @@
-export * from './swiper-slide';
-export * from './types';

package/dist/lib/swiper/swiper-slide/swiper-slide.jsx

@@ -1,17 +0,0 @@
-import { mediaQuery } from '../../../theme';
-export const SwiperSlide = ({ xs, sm, md, lg, ...props }) => {
-    const css = [
-        {
-            flexShrink: 0,
-            flexGrow: 0,
-            overflow: 'hidden',
-        },
-        xs?.css,
-        {
-            [mediaQuery('sm')]: sm?.css,
-            [mediaQuery('md')]: md?.css,
-            [mediaQuery('lg')]: lg?.css,
-        },
-    ];
-    return <div {...props} css={css}/>;
-};

package/dist/lib/swiper/swiper-slide/types.js

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

package/dist/lib/switch/index.js

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

package/dist/lib/switch/switch.jsx

@@ -1,14 +0,0 @@
-import { useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import classes from './switch.module.scss';
-import { cn } from '../../utils';
-export const Switch = ({ children, className, ref, ...props }) => {
-    const inputRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, inputRef]);
-    return (<label className={classes.switch__container}>
-      <span className={classes.switch__main}>
-        <input {...props} type="checkbox" className={cn(classes.switch__input, className)} ref={mergedRefs}/>
-      </span>
-      {children}
-    </label>);
-};