@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/dialog/dialog-header/dialog-header.jsx

@@ -1,43 +0,0 @@
-import { IconButton } from '../../icon-button';
-import { DialogClose } from '../dialog-close';
-import CloseIcon from '../../../assets/svg/times-close-delete.svg?raw';
-import { getTypographyVar, mediaQuery } from '../../../theme';
-export const DialogHeader = ({ children, closeable = true, ...props }) => {
-    return (<div css={[
-            {
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem',
-                paddingLeft: '1rem',
-                paddingRight: '1rem',
-                gap: '0.5rem',
-                position: 'relative',
-                fontSize: getTypographyVar('lg').fontSize,
-                lineHeight: getTypographyVar('lg').lineHeight,
-                fontWeight: 500,
-                [mediaQuery('sm')]: {
-                    paddingLeft: '1.25rem',
-                    paddingRight: '1.25rem',
-                    fontSize: getTypographyVar('xl').fontSize,
-                    lineHeight: getTypographyVar('xl').lineHeight,
-                },
-            },
-            closeable && { paddingRight: '3rem' },
-        ]} {...props}>
-      {children}
-      {closeable && (<DialogClose>
-          <div css={{
-                position: 'absolute',
-                right: '0.5rem',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                [mediaQuery('sm')]: { right: '0.75rem' },
-            }}>
-            <IconButton xs={{
-                size: 'sm',
-            }} color="neutral" icon={{
-                source: CloseIcon,
-            }}/>
-          </div>
-        </DialogClose>)}
-    </div>);
-};

package/dist/lib/dialog/dialog-header/index.js

@@ -1,2 +0,0 @@
-export * from './dialog-header';
-export * from './types';

package/dist/lib/dialog/dialog-header/types.js

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

package/dist/lib/dialog/index.js

@@ -1,5 +0,0 @@
-export * from './dialog';
-export * from './dialog-body';
-export * from './dialog-close';
-export * from './dialog-footer';
-export * from './dialog-header';

package/dist/lib/drawer/drawer/drawer.jsx

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { motion } from 'motion/react';
-import { FLOATING_Z_INDEX } from '../../../theme';
-import { Floating, FloatingContent } from '../../..';
-export const Drawer = ({ children, placement = 'left', ...props }) => {
-    const initial = useMemo(() => {
-        switch (placement) {
-            case 'left':
-                return { x: '-100%' };
-            case 'right':
-                return { x: '100%' };
-            case 'top':
-                return { y: '-100%' };
-            case 'bottom':
-                return { y: '100%' };
-        }
-    }, [placement]);
-    const animate = useMemo(() => {
-        switch (placement) {
-            case 'left':
-            case 'right':
-                return { x: 0 };
-            case 'top':
-            case 'bottom':
-                return { y: 0 };
-        }
-    }, [placement]);
-    return (<Floating dismissProps={{
-            enabled: true,
-        }} {...props}>
-      <FloatingContent floatingOverlayProps={{
-            disabled: false,
-            lockScroll: true,
-            style: {
-                zIndex: FLOATING_Z_INDEX,
-            },
-        }} css={{
-            maxHeight: '100%',
-            maxWidth: '100%',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-        }}>
-        <div css={{
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            pointerEvents: 'none',
-        }}/>
-
-        <motion.div initial={initial} animate={animate} exit={initial} transition={{
-            duration: 0.2,
-            ease: 'easeInOut',
-        }} css={[
-            {
-                position: 'fixed',
-                backgroundColor: 'white',
-            },
-            placement === 'left' && { top: 0, bottom: 0, left: 0 },
-            placement === 'right' && { top: 0, bottom: 0, right: 0 },
-            placement === 'top' && { left: 0, right: 0, top: 0 },
-            placement === 'bottom' && { left: 0, right: 0, bottom: 0 },
-        ]}>
-          {children}
-        </motion.div>
-      </FloatingContent>
-    </Floating>);
-};

package/dist/lib/drawer/drawer/index.js

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

package/dist/lib/drawer/drawer/types.js

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

package/dist/lib/drawer/drawer-close/drawer-close.jsx

@@ -1,2 +0,0 @@
-import { FloatingClose } from '../../floating';
-export const DrawerClose = FloatingClose;

package/dist/lib/drawer/drawer-close/index.js

@@ -1,2 +0,0 @@
-export * from './drawer-close';
-export * from './types';

package/dist/lib/drawer/drawer-close/types.js

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

package/dist/lib/drawer/index.js

@@ -1,2 +0,0 @@
-export * from './drawer';
-export * from './drawer-close';

package/dist/lib/filter-panel/checkbox-filter-panel.jsx

@@ -1,77 +0,0 @@
-import { useMemo, useState } from 'react';
-import { trimStart } from 'lodash-es';
-import { Checkbox } from '../checkbox';
-import { Input } from '../input';
-import { VirtualizedList } from '../../components';
-import { useQueryParams } from '../../hooks';
-import { ArrayParamParser, matchSearch } from '../../utils';
-const ROW_HEIGHT = 32;
-const DISPLAY_ROW_COUNT = 5;
-export const CheckboxFilterPanel = ({ value, options, inputSearchProps: _inputSearchProps, onChange, queryParam, name, listProps, }) => {
-    const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
-    const [inputValue, setInputValue] = useState('');
-    const { queryParams, setQueryParams } = useQueryParams(queryParam
-        ? {
-            [queryParam.key]: {
-                parser(value) {
-                    return new ArrayParamParser(value).parse();
-                },
-            },
-        }
-        : {});
-    const valueSet = useMemo(() => {
-        const queryParamKey = queryParam?.key;
-        const valueByQueryParam = queryParamKey ? queryParams[queryParamKey] : undefined;
-        return new Set(value ?? valueByQueryParam ?? []);
-    }, [queryParam?.key, queryParams, value]);
-    const onSearchChange = (e) => {
-        e.target.value = trimStart(e.target.value);
-        setInputValue(e.target.value);
-        inputSearchProps.onChange?.(e);
-    };
-    const displayOptions = useMemo(() => {
-        if (!inputValue) {
-            return options;
-        }
-        return options.filter((option) => matchSearch(option.searchLabel ?? String(option.label), inputValue));
-    }, [inputValue, options]);
-    const RowComponent = ({ row }) => {
-        const rowData = displayOptions.at(row.index);
-        const onCheckboxChange = (e) => {
-            if (queryParam) {
-                const currentList = queryParams[queryParam.key] ?? [];
-                const targetValue = e.currentTarget.value;
-                const nextList = e.target.checked
-                    ? [...currentList, targetValue]
-                    : currentList.filter((value) => value !== targetValue);
-                setQueryParams({
-                    [queryParam.key]: nextList.length ? nextList : undefined,
-                }, {
-                    preventScrollReset: true,
-                });
-            }
-            onChange?.(e);
-        };
-        return (<div css={{ paddingTop: 4, paddingBottom: 4 }}>
-        <Checkbox containerProps={{
-                style: {
-                    width: '100%',
-                },
-            }} name={name} checked={rowData ? (rowData.isChecked ?? valueSet.has(rowData.value)) : false} value={rowData?.value} onChange={onCheckboxChange}>
-          {rowData?.label}
-        </Checkbox>
-      </div>);
-    };
-    return (<div>
-      {searchEnabled && (<div css={{ marginBottom: 8 }}>
-          <Input xs={{ ...inputSearchProps.xs }} value={inputValue} {...inputSearchProps} onChange={onSearchChange}/>
-        </div>)}
-      <VirtualizedList options={{
-            count: displayOptions.length,
-            estimateSize: () => ROW_HEIGHT,
-        }} RowComponent={RowComponent} style={{
-            maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
-            ...listProps?.style,
-        }} css={{ paddingLeft: 8, paddingRight: 8 }} {...listProps}/>
-    </div>);
-};

package/dist/lib/filter-panel/filter-panel.jsx

@@ -1,31 +0,0 @@
-import { isValidElement } from 'react';
-import { useToggle } from '../../hooks/use-toggle';
-import { CheckboxFilterPanel } from './checkbox-filter-panel';
-import { InputRangeFilterPanel } from './input-range-filter-panel';
-import { InputTextFilterPanel } from './input-text-filter-panel';
-import { RadioFilterPanel } from './radio-filter-panel';
-import { Collapse } from '../collapse';
-import { Icon } from '../icon';
-import ArrowDownIcon from '../../assets/svg/arrow-down.svg?raw';
-export const FilterPanel = ({ label, defaultOpen = true, ...props }) => {
-    const [open, toggle] = useToggle(defaultOpen);
-    return (<div css={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <button css={{ display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left' }} onClick={toggle}>
-        <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 }}>
-          {isValidElement(label) ? label : <span>{label}</span>}
-        </div>
-        <Icon css={{
-            transition: 'transform 150ms',
-            ...(open ? { transform: 'rotate(-180deg)' } : {}),
-        }} source={ArrowDownIcon}/>
-      </button>
-      <Collapse open={open}>
-        <>
-          {props.fieldType === 'checkbox' && <CheckboxFilterPanel {...props}/>}
-          {props.fieldType === 'radio' && <RadioFilterPanel {...props}/>}
-          {props.fieldType === 'input-range' && <InputRangeFilterPanel {...props}/>}
-          {props.fieldType === 'input-text' && <InputTextFilterPanel {...props}/>}
-        </>
-      </Collapse>
-    </div>);
-};

package/dist/lib/filter-panel/index.js

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

package/dist/lib/filter-panel/input-range-filter-panel.jsx

@@ -1,60 +0,0 @@
-import { InputRange } from '../input-range';
-import { TYPING_DEBOUNCE } from '../../constants';
-import { useQueryParams } from '../../hooks';
-import { NumberParamParser } from '../../utils';
-export const InputRangeFilterPanel = ({ value, queryParam, placeholder, onChange }) => {
-    const { queryParams, setQueryParams } = useQueryParams({
-        ...(queryParam?.from?.key
-            ? {
-                [queryParam.from.key]: {
-                    parser(value) {
-                        return new NumberParamParser(value).parse();
-                    },
-                },
-            }
-            : {}),
-        ...(queryParam?.to?.key
-            ? {
-                [queryParam.to.key]: {
-                    parser(value) {
-                        return new NumberParamParser(value).parse();
-                    },
-                },
-            }
-            : {}),
-    });
-    const finalValue = {
-        from: value?.from ?? (queryParam?.from?.key ? queryParams[queryParam.from.key] : undefined),
-        to: value?.to ?? (queryParam?.to?.key ? queryParams[queryParam.to.key] : undefined),
-    };
-    const onInputRangeChange = (event, edge) => {
-        const valueAsNumber = event.target.valueAsNumber;
-        if (edge === 'from' && queryParam?.from?.key) {
-            setQueryParams({
-                [queryParam.from.key]: isNaN(valueAsNumber) ? undefined : valueAsNumber,
-            }, {
-                preventScrollReset: true,
-            });
-        }
-        if (edge === 'to' && queryParam?.to?.key) {
-            setQueryParams({
-                [queryParam.to.key]: isNaN(valueAsNumber) ? undefined : valueAsNumber,
-            }, {
-                preventScrollReset: true,
-            });
-        }
-        onChange?.(event, edge);
-    };
-    return (<InputRange onChange={onInputRangeChange} inputs={[
-            {
-                debounce: TYPING_DEBOUNCE,
-                value: finalValue.from ?? '',
-                placeholder: placeholder?.from,
-            },
-            {
-                debounce: TYPING_DEBOUNCE,
-                value: finalValue.to ?? '',
-                placeholder: placeholder?.to,
-            },
-        ]}/>);
-};

package/dist/lib/filter-panel/input-text-filter-panel.jsx

@@ -1,36 +0,0 @@
-import { isString } from 'lodash-es';
-import { Input } from '../input';
-import { useQueryParams } from '../../hooks';
-import { StringParamParser } from '../../utils';
-export const InputTextFilterPanel = ({ queryParam, fieldType: _fieldType, ...props }) => {
-    const queryParamKey = queryParam?.key;
-    const { queryParams, setQueryParams } = useQueryParams(queryParamKey
-        ? {
-            [queryParamKey]: {
-                parser(value) {
-                    return new StringParamParser(value).parse();
-                },
-            },
-        }
-        : {});
-    const finalValue = (() => {
-        if (isString(props.value)) {
-            return props.value;
-        }
-        if (queryParamKey) {
-            return queryParams[queryParamKey] ?? '';
-        }
-        return '';
-    })();
-    const onChange = (e) => {
-        props.onChange?.(e);
-        if (queryParamKey) {
-            setQueryParams({
-                [queryParamKey]: e.target.value,
-            }, {
-                preventScrollReset: true,
-            });
-        }
-    };
-    return <Input name={queryParamKey} {...props} value={finalValue} onChange={onChange}/>;
-};

package/dist/lib/filter-panel/radio-filter-panel.jsx

@@ -1,67 +0,0 @@
-import { useId, useMemo, useState } from 'react';
-import { isNil, trimStart } from 'lodash-es';
-import { Input } from '../input';
-import { RadioButton } from '../radio-button';
-import { VirtualizedList } from '../../components';
-import { useQueryParams } from '../../hooks';
-import { matchSearch, StringParamParser } from '../../utils';
-const ROW_HEIGHT = 32;
-const DISPLAY_ROW_COUNT = 5;
-export const RadioFilterPanel = ({ options, inputSearchProps: _inputSearchProps, value, onChange, queryParam, fallbackValue, }) => {
-    const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
-    const uniqueId = useId();
-    const [inputValue, setInputValue] = useState('');
-    const { queryParams, setQueryParams } = useQueryParams(queryParam
-        ? {
-            [queryParam.key]: {
-                parser(value) {
-                    return new StringParamParser(value).parse();
-                },
-            },
-        }
-        : {});
-    const valueByQueryParam = queryParam ? queryParams[queryParam.key] : undefined;
-    const finalValue = value ?? valueByQueryParam ?? fallbackValue;
-    const onInputChange = (e) => {
-        e.target.value = trimStart(e.target.value);
-        setInputValue(e.target.value);
-        inputSearchProps.onChange?.(e);
-    };
-    const displayOptions = useMemo(() => {
-        if (!inputValue) {
-            return options;
-        }
-        return options.filter((option) => matchSearch(option.searchLabel ?? String(option.label), inputValue));
-    }, [inputValue, options]);
-    const RowComponent = ({ row }) => {
-        const rowData = displayOptions.at(row.index);
-        const onRadioChange = (e) => {
-            if (isNil(rowData))
-                return;
-            if (queryParam) {
-                setQueryParams({
-                    [queryParam.key]: queryParam.transform ? queryParam.transform(rowData.value) : rowData.value,
-                }, {
-                    preventScrollReset: true,
-                });
-            }
-            onChange?.(e);
-        };
-        return (<div css={{ paddingTop: '0.25rem', paddingBottom: '0.25rem' }}>
-        <RadioButton name={uniqueId} checked={rowData?.isChecked ?? finalValue === rowData?.value} value={rowData?.value} onChange={onRadioChange}>
-          {rowData?.label}
-        </RadioButton>
-      </div>);
-    };
-    return (<div>
-      {searchEnabled && (<div css={{ marginBottom: '0.5rem' }}>
-          <Input xs={{ ...inputSearchProps.xs }} value={inputValue} {...inputSearchProps} onChange={onInputChange}/>
-        </div>)}
-      <VirtualizedList css={{ paddingLeft: '0.5rem', paddingRight: '0.5rem' }} options={{
-            count: displayOptions.length,
-            estimateSize: () => ROW_HEIGHT,
-        }} RowComponent={RowComponent} style={{
-            maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
-        }}/>
-    </div>);
-};

package/dist/lib/filter-panel/types.js

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

package/dist/lib/flag/flag.jsx

@@ -1,7 +0,0 @@
-import { getFlagProps } from './helpers';
-import { Image } from '../image';
-import EarthIcon from '../../assets/svg/earth-home-world.svg?url';
-export const Flag = ({ ref, ..._props }) => {
-    const { countryCode, fallback = EarthIcon, ...props } = getFlagProps(_props);
-    return (<Image src={countryCode ? `https://flagcdn.com/${countryCode.toLowerCase()}.svg` : undefined} alt="VN" fallback={fallback} ref={ref} {...props}/>);
-};

package/dist/lib/flag/index.js

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

package/dist/lib/flag/types.js

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

package/dist/lib/flexbox/flex-item/flex-item.jsx

@@ -1,19 +0,0 @@
-import { getFlexItemProps } from './helpers';
-import { mediaQuery } from '../../../theme';
-export const FlexItem = ({ children, ref, ...rest }) => {
-    const { xs, sm, md, lg, ...props } = getFlexItemProps(rest);
-    const css = [
-        {
-            maxWidth: '100%',
-        },
-        xs?.css,
-        {
-            [mediaQuery('sm')]: sm?.css,
-            [mediaQuery('md')]: md?.css,
-            [mediaQuery('lg')]: lg?.css,
-        },
-    ];
-    return (<div css={css} {...props} ref={ref}>
-      {children}
-    </div>);
-};

package/dist/lib/flexbox/flex-item/index.js

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

package/dist/lib/flexbox/flex-item/types.js

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

package/dist/lib/flexbox/flexbox/flexbox.jsx

@@ -1,27 +0,0 @@
-import { getFlexboxProps } from './helpers';
-import { mediaQuery } from '../../../theme';
-import { containerStyle } from '../../../constants/emotion';
-export const Flexbox = ({ children, container, ref, ..._props }) => {
-    const { xs, sm, md, lg, ...rest } = getFlexboxProps(_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: 'flex', width: '100%', height: '100%' }}>{children}</div>
-    </div>);
-};
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
-    return [
-        {
-            width,
-            height,
-            '& > *': css,
-        },
-    ];
-};

package/dist/lib/flexbox/flexbox/index.js

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

package/dist/lib/flexbox/flexbox/types.js

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

package/dist/lib/flexbox/index.js

@@ -1,2 +0,0 @@
-export * from './flexbox';
-export * from './flex-item';

package/dist/lib/floating/floating/floating.jsx

@@ -1,76 +0,0 @@
-import { forwardRef, useImperativeHandle, useMemo } from 'react';
-import { autoUpdate, flip, FloatingTree, offset, size, useClick, useDismiss, useFloating, useFloatingParentNodeId, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
-import { FloatingContext } from './helpers';
-const FloatingCore = forwardRef(({ open, placement = 'bottom', onOpenChange, dismissProps = {
-    enabled: false,
-}, children, clickProps = {
-    enabled: false,
-}, focusProps = {
-    enabled: false,
-}, hoverProps = {
-    enabled: false,
-}, elements, offsetOptions = 4, sizeOptions, autoUpdateOptions, }, ref) => {
-    const floating = useFloating({
-        open,
-        onOpenChange,
-        placement,
-        middleware: [
-            offset(offsetOptions),
-            flip(),
-            size({
-                ...sizeOptions,
-                apply(args) {
-                    const { availableHeight, availableWidth, rects, elements, placement, x } = args;
-                    const styles = {};
-                    if (rects.floating.height > availableHeight) {
-                        styles.height = `${availableHeight}px`;
-                    }
-                    if (rects.floating.width > availableWidth) {
-                        const maxWidth = Math.min(rects.floating.width, window.innerWidth);
-                        styles.maxWidth = `${maxWidth}px`;
-                        const verticalPlacements = [
-                            'top',
-                            'top-start',
-                            'top-end',
-                            'bottom',
-                            'bottom-start',
-                            'bottom-end',
-                        ];
-                        const isVertical = verticalPlacements.includes(placement);
-                        if (isVertical) {
-                            styles.left = `${-x + (window.innerWidth - rects.floating.width) / 2}px`;
-                        }
-                    }
-                    Object.assign(elements.floating.style, styles);
-                    sizeOptions?.apply?.(args);
-                },
-            }),
-        ],
-        whileElementsMounted: (...args) => {
-            return autoUpdate(...args, autoUpdateOptions);
-        },
-        elements,
-    });
-    useImperativeHandle(ref, () => floating, [floating]);
-    const { context } = floating;
-    const click = useClick(context, clickProps);
-    const hover = useHover(context, hoverProps);
-    const focus = useFocus(context, focusProps);
-    const dismiss = useDismiss(context, dismissProps);
-    const role = useRole(context);
-    const interactions = useInteractions([click, dismiss, role, hover, focus]);
-    const contextValue = useMemo(() => ({
-        ...floating,
-        ...interactions,
-    }), [floating, interactions]);
-    return <FloatingContext.Provider value={contextValue}>{children}</FloatingContext.Provider>;
-});
-export const Floating = forwardRef((props, ref) => {
-    const parentId = useFloatingParentNodeId();
-    if (parentId) {
-        return <FloatingCore {...props} ref={ref}/>;
-    }
-    return (<FloatingTree>
-      <FloatingCore {...props} ref={ref}/>
-    </FloatingTree>);
-});

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

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

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

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

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

@@ -1,22 +0,0 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { useFloatingContext } from '../floating/helpers';
-import { cn } from '../../../utils';
-export const FloatingClose = forwardRef(({ event = 'click', reason, className, ...props }, ref) => {
-    const wrapperRef = useRef(null);
-    const { context: { onOpenChange }, } = useFloatingContext();
-    const mergedRefs = useMergeRefs([ref, wrapperRef]);
-    useEffect(() => {
-        const wrapperEl = wrapperRef.current;
-        if (!wrapperEl)
-            return;
-        const handleEvent = function (event) {
-            onOpenChange?.(false, event, reason);
-        };
-        wrapperEl.addEventListener(event, handleEvent);
-        return () => {
-            wrapperEl.removeEventListener(event, handleEvent);
-        };
-    }, [event, onOpenChange, reason]);
-    return <div css={{ display: 'contents' }} className={cn(className)} {...props} ref={mergedRefs}/>;
-});

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

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

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

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