torgbox-ui 1.0.7 → 1.0.8

package/dist/src/Inputs/RepeatPasswordField/index.js

@@ -0,0 +1,2 @@
+export { RepeatPasswordField } from './RepeatPasswordField';
+export { emptyRepeatPasswordError, notCorrectRepeatPasswordError, } from './ErrorMessages';

package/dist/src/Inputs/Selector/Collapse.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import ChevronDown from '../../assets/img/chevron-down.svg';
+import { Option } from './Option/Option';
+export const Collapse = (props) => {
+    const { options, selected, title, onSelect, chevron = true, optionsIcon, closeOnClick = true, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const rootRef = useRef(null);
+    const titleRef = useRef(null);
+    useEffect(() => {
+        const handleClick = (event) => {
+            const { target } = event;
+            if (target instanceof Node &&
+                rootRef.current &&
+                !rootRef.current.contains(target)) {
+                closeOnClick && setIsOpen(false);
+            }
+        };
+        window.addEventListener('click', handleClick);
+        return () => {
+            window.removeEventListener('click', handleClick);
+        };
+    }, [closeOnClick, isOpen]);
+    const handleOptionClick = (value) => {
+        closeOnClick && setIsOpen(false);
+        onSelect(value);
+    };
+    const handleTitleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const chevronMods = [
+        'title__chevron',
+        isOpen && 'title__chevron--rotate',
+    ];
+    const optionsBlock = (_jsx("div", { className: 'selector__options selector__options--slide-down', children: options.map((option) => (_jsx(Option, { option: option, onClick: handleOptionClick, optionsIcon: optionsIcon, selected: option.value === selected?.value }, option.value))) }));
+    const hasIcon = optionsIcon !== undefined || selected?.icon !== undefined;
+    const label = selected ? (_jsxs("div", { className: 'title__label', children: [hasIcon && (_jsx("div", { className: 'title__icon', children: selected?.icon ?? optionsIcon })), selected.label] })) : title;
+    return (_jsxs("div", { className: 'selector', ref: rootRef, children: [_jsxs("div", { className: cn('title', isOpen && 'title--active'), onClick: handleTitleClick, ref: titleRef, children: [label, chevron && (_jsx("div", { className: cn(chevronMods), children: _jsx(ChevronDown, {}) }))] }), isOpen && optionsBlock] }));
+};

package/dist/src/Inputs/Selector/Collapse.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ICollapse } from './Collapse';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ICollapse>;
+export declare const CollapseDefault: Story;
+export declare const CollapseHovered: Story;
+export declare const CollapseSelected: Story;

package/dist/src/Inputs/Selector/Collapse.stories.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dot from '../../assets/img/dot.svg';
+import Star from '../../assets/img/star.svg';
+import { Collapse } from './Collapse';
+const data = [
+    {
+        value: '1',
+        label: 'Monday',
+    },
+    {
+        value: '2',
+        label: 'Tuesday',
+        icon: _jsx(Star, {})
+    },
+    {
+        value: '3',
+        label: 'Wednesday',
+    },
+    {
+        value: '4',
+        label: 'Thursday',
+    },
+    {
+        value: '5',
+        label: 'Friday',
+    },
+    {
+        value: '6',
+        label: 'Saturday',
+    },
+    {
+        value: '7',
+        label: 'Sunday',
+    },
+];
+const title = (_jsxs("div", { style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+    }, children: [_jsx("div", { style: {
+                display: 'flex',
+                width: '20px',
+                paddingRight: '8px'
+            }, children: _jsx(Star, {}) }), "Label"] }));
+const meta = {
+    title: 'Inputs/Selector/Collapse',
+    component: Collapse,
+    tags: ['autodocs'],
+    args: {},
+    argTypes: {
+        title: {
+            table: {
+                disable: true
+            }
+        },
+        optionsIcon: {
+            table: {
+                disable: true
+            }
+        },
+    }
+};
+export default meta;
+export const CollapseDefault = {
+    args: {
+        options: data,
+        title,
+        chevron: true,
+        optionsIcon: _jsx(Dot, {}),
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12695-13174&mode=dev',
+        },
+        pseudo: { hover: false },
+    },
+};
+export const CollapseHovered = {
+    args: {
+        options: data,
+        title,
+        chevron: true,
+        optionsIcon: _jsx(Dot, {}),
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12695-13277&mode=dev',
+        },
+        pseudo: { hover: true },
+    },
+};
+export const CollapseSelected = {
+    args: {
+        options: data,
+        title,
+        chevron: true,
+        optionsIcon: _jsx(Dot, {}),
+        selected: data[1],
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12702-24861&mode=dev',
+        },
+    },
+};

package/dist/src/Inputs/Selector/Dropdown.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import { getCoords } from '../../tools/getCoords';
+import { Portal } from '../../Utils';
+import { Option } from './Option/Option';
+export const Dropdown = (props) => {
+    const { options, selected, title, onSelect, optionsIcon, optionsMaxHeight, optionsDirection = 'down', noFlip = false, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [direction, setDirection] = useState(optionsDirection);
+    const [maxHeight, setMaxHeight] = useState(optionsMaxHeight);
+    const rootRef = useRef(null);
+    const titleRef = useRef(null);
+    const optionsRef = useRef(null);
+    const titleCoords = getCoords(titleRef);
+    useEffect(() => {
+        const handleClick = (event) => {
+            const { target } = event;
+            if (target instanceof Node &&
+                rootRef.current &&
+                !rootRef.current.contains(target)) {
+                setIsOpen(false);
+            }
+        };
+        window.addEventListener('click', handleClick);
+        return () => {
+            window.removeEventListener('click', handleClick);
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        if (!optionsRef.current || !titleCoords) {
+            return;
+        }
+        const { topViewport: distanceToTop, bottomViewport } = titleCoords;
+        const windowHeight = window.innerHeight;
+        const optionsHeight = optionsRef.current.offsetHeight;
+        const distanceToBottom = windowHeight - bottomViewport;
+        const isDownDirection = optionsDirection === 'down';
+        setDirection(optionsDirection);
+        setMaxHeight(isDownDirection ? distanceToBottom : distanceToTop);
+        if (noFlip) {
+            return;
+        }
+        const hasSpaceToOptionsBelow = distanceToBottom - optionsHeight > 0;
+        const hasSpaceToOptionsAbove = distanceToTop - optionsHeight > 0;
+        const oppositeDirection = isDownDirection ? 'up' : 'down';
+        if (isDownDirection &&
+            !hasSpaceToOptionsBelow &&
+            hasSpaceToOptionsAbove) {
+            setDirection(oppositeDirection);
+            setMaxHeight(distanceToTop);
+            return;
+        }
+        if (!isDownDirection &&
+            !hasSpaceToOptionsAbove &&
+            hasSpaceToOptionsBelow) {
+            setDirection(oppositeDirection);
+            setMaxHeight(distanceToBottom);
+        }
+    }, [isOpen, noFlip, optionsDirection, titleCoords]);
+    const handleOptionClick = (value) => {
+        setIsOpen(false);
+        onSelect(value);
+    };
+    const handleTitleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const optionsPosition = {
+        position: 'absolute',
+        left: `${titleCoords?.leftDocument ?? 0}px`,
+        minWidth: `${titleCoords?.width ?? 0}px`,
+        maxHeight: `${optionsMaxHeight ?? maxHeight}px`,
+        ...(direction === 'down'
+            ? { top: `${titleCoords?.bottomDocument ?? 0}px` }
+            : { bottom: `${window?.innerHeight - (titleCoords?.topDocument ?? 0)}px` }),
+    };
+    const optionsBlock = titleCoords && (_jsx("div", { className: `selector__options selector__options--slide-${direction}`, style: { ...optionsPosition }, ref: optionsRef, children: options.map((option) => (_jsx(Option, { option: option, onClick: handleOptionClick, optionsIcon: optionsIcon, selected: option.value === selected?.value }, option.value))) }));
+    const hasIcon = optionsIcon !== undefined || selected?.icon !== undefined;
+    const label = selected ? (_jsxs("div", { className: 'title__label', children: [hasIcon && (_jsx("div", { className: 'title__icon', children: selected?.icon ?? optionsIcon })), selected.label] })) : title;
+    return (_jsxs("div", { className: 'selector', ref: rootRef, children: [_jsx("div", { className: cn('title', isOpen && 'title--active'), onClick: handleTitleClick, ref: titleRef, children: label }), isOpen && _jsx(Portal, { children: optionsBlock })] }));
+};

package/dist/src/Inputs/Selector/Dropdown.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IDropdown } from './Dropdown';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IDropdown>;
+export declare const DropdownDefault: Story;
+export declare const DropdownHovered: Story;
+export declare const DropdownSelected: Story;
+export declare const DropdownSetMaxHeight: Story;

package/dist/src/Inputs/Selector/Dropdown.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Logo from '../../assets/img/logo.svg';
+import { Dropdown } from './Dropdown';
+const data = [
+    {
+        value: '1',
+        label: 'Monday',
+    },
+    {
+        value: '2',
+        label: 'Tuesday',
+    },
+    {
+        value: '3',
+        label: 'Wednesday',
+    },
+    {
+        value: '4',
+        label: 'Thursday',
+    },
+    {
+        value: '5',
+        label: 'Friday',
+    },
+    {
+        value: '6',
+        label: 'Saturday',
+    },
+    {
+        value: '7',
+        label: 'Sunday',
+    },
+];
+const title = (_jsxs("div", { style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%'
+    }, children: [_jsx(Logo, {}), "Label"] }));
+const meta = {
+    title: 'Inputs/Selector/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    args: {
+        title,
+        options: data,
+    },
+    argTypes: {
+        title: {
+            table: {
+                disable: true,
+            },
+        },
+        optionsIcon: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        pseudo: { hover: false },
+    }
+};
+export default meta;
+export const DropdownDefault = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12702-24861&mode=dev',
+        },
+    },
+};
+export const DropdownHovered = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12695-13277&mode=dev',
+        },
+        pseudo: { hover: true },
+    },
+};
+export const DropdownSelected = {
+    args: {
+        selected: data[1]
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12695-13277&mode=dev',
+        }
+    },
+};
+export const DropdownSetMaxHeight = {
+    args: {
+        optionsMaxHeight: 150
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12695-13277&mode=dev',
+        }
+    },
+};

package/dist/src/Inputs/Selector/Option/Option.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Option = (props) => {
+    const { option: { value, label, icon }, onClick, selected = false, optionsIcon, } = props;
+    const handleClick = (clickedValue) => () => {
+        onClick(clickedValue);
+    };
+    const hasIcon = optionsIcon !== undefined || icon !== undefined;
+    return (_jsxs("div", { className: cn('selector-option', selected && 'selector-option--selected'), onClick: handleClick(value), children: [hasIcon && (_jsx("div", { className: 'selector-option__icon', children: icon ?? optionsIcon })), label] }));
+};

package/dist/src/Inputs/Selector/Option/Option.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IOption } from './Option';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IOption>;
+export declare const OptionDefault: Story;
+export declare const OptionHovered: Story;
+export declare const OptionSelected: Story;
+export declare const OptionWithIcon: Story;

package/dist/src/Inputs/Selector/Option/Option.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Star from '../../../assets/img/star.svg';
+import { Option } from './Option';
+const meta = {
+    title: 'Inputs/Selector/Option',
+    component: Option,
+    tags: ['autodocs'],
+    args: {}
+};
+export default meta;
+export const OptionDefault = {
+    args: {
+        option: {
+            value: '1',
+            label: 'Monday',
+        },
+    },
+};
+export const OptionHovered = {
+    args: {
+        option: {
+            value: '1',
+            label: 'Monday',
+        },
+    },
+    parameters: {
+        pseudo: { hover: true },
+    }
+};
+export const OptionSelected = {
+    args: {
+        option: {
+            value: '1',
+            label: 'Monday',
+        },
+        selected: true
+    },
+};
+export const OptionWithIcon = {
+    args: {
+        option: {
+            value: '1',
+            label: 'Monday',
+        },
+        optionsIcon: _jsx(Star, {})
+    },
+};

package/dist/src/Inputs/Selector/Option/option.scss

@@ -0,0 +1,44 @@
+$option-bg:            $color-neutral-gray;
+$option-bg-hover:      $neutral-A8;
+$option-bg-selected:   $primary-A12;
+$option-text:          $neutral-high;
+$option-text-selected: $primary-high;
+$option-icon:          $neutral-high;
+$option-icon-selected: $primary-high;
+
+.selector-option {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  padding: 8px 12px;
+
+  color: $option-text;
+
+  background: $option-bg;
+  border-radius: 4px;
+
+  fill: $option-icon;
+
+  &:hover {
+    background: $option-bg-hover;
+    transition: background-color 0.2s;
+  }
+
+  &--selected {
+    color:      $option-text-selected;
+    background: $option-bg-selected;
+    fill:       $option-icon-selected;
+
+    &:hover {
+      background: $option-bg-selected;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    width: 20px;
+    padding-right: 8px;
+  }
+}

package/dist/src/Inputs/Selector/index.js

@@ -0,0 +1,3 @@
+export { Option, } from './Option/Option';
+export { Collapse } from './Collapse';
+export { Dropdown } from './Dropdown';

package/dist/src/Inputs/Selector/selector.scss

@@ -0,0 +1,101 @@
+$title-bg:        transparent;
+$title-bg-hover:  $neutral-A8;
+$title-bg-active: $neutral-A12;
+$title-text:      $neutral-high;
+$title-icon:      $neutral-high;
+$title-border:    $neutral-border-low;
+$options-bg:      $color-neutral-gray;
+
+.selector {
+  @keyframes slide-down {
+    from {
+      transform: translateY(-5%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      transform: translateY(5%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  width: 200px;
+
+  .title {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 8px 12px;
+
+    color: $title-text;
+
+    background: $title-bg;
+    border-radius: 4px;    
+
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: $title-bg-hover;
+    }
+
+    &--active {
+      background: $title-bg-active;
+      border-bottom: 1px solid $title-border;
+      border-radius: 4px 4px 0 0;
+      &:hover {
+        background: $title-bg-active;
+      }
+    }
+
+    &__label {
+      display: flex;
+    }
+  
+    &__icon {
+      display: flex;
+      width: 20px;
+      padding-right: 8px;
+      fill: $title-icon;
+    }
+
+    &__chevron {
+      display: flex;
+      align-items: center;
+      fill: $title-icon;
+      transition: all 200ms;
+  
+      &--rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }    
+
+  &__options {
+    overflow: auto;
+    background: $options-bg;
+    border-radius: 0 0 4px 4px;
+
+    &--slide-up {
+      animation: slide-up 0.2s forwards;
+    }
+
+    &--slide-down {
+      animation: slide-down 0.2s forwards;
+    }
+  }
+}

package/dist/src/Inputs/TextField/TextField.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import _ from 'lodash/fp';
+import { useEffect, useRef, useState, } from 'react';
+import CheckIcon from '../../assets/img/check.svg';
+import CrossIcon from '../../assets/img/cross.svg';
+import EyeCloseIcon from '../../assets/img/eye-close.svg';
+import EyeOpenIcon from '../../assets/img/eye-open.svg';
+import SearchIcon from '../../assets/img/search.svg';
+import styles from './textField.module.scss';
+export const TextField = (props) => {
+    const { label, value, description, className, placeholder, type = 'text', size = 'large', state = 'idle', tabIndex, maxLength, errorMessage, onChange = _.noop, onClear = _.noop, onVisibilityToggle = _.noop, onTouched = _.noop, required = false, autoFocus = false, checkIcon = false, clearIcon = false, eyeIcon = false, searchIcon = false, alwaysShowError = false, } = props;
+    const ref = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [inputType, setInputType] = useState(type);
+    useEffect(() => {
+        setInputType(type);
+    }, [type]);
+    useEffect(() => {
+        if (autoFocus) {
+            setFocused(true);
+            ref.current?.focus();
+        }
+    }, [autoFocus]);
+    const onChangeHandler = (e) => {
+        onChange(e.target.value, e);
+    };
+    const toggleVisibility = () => {
+        const newType = inputType === 'password' ? 'text' : 'password';
+        setInputType(newType);
+        onVisibilityToggle();
+    };
+    const onBlur = () => {
+        setFocused(false);
+    };
+    const onFocus = () => {
+        setFocused(true);
+        onTouched(true);
+    };
+    const disabledState = state === 'disabled';
+    const wrapperSizeClassBySize = {
+        medium: styles.textFieldWrapperMedium,
+        large: styles.textFieldWrapperLarge,
+    };
+    const labelSizeClassBySize = {
+        medium: styles.textFieldWrapperLabelMedium,
+        large: styles.textFieldWrapperLabelLarge,
+    };
+    const inputSizeClassBySize = {
+        medium: styles.textFieldInputMedium,
+        large: styles.textFieldInputLarge,
+    };
+    const iconsSizeClassBySize = {
+        medium: styles.textFieldIconsMedium,
+        large: styles.textFieldIconsLarge,
+    };
+    const fieldSizeClassBySize = {
+        medium: styles.textFieldMedium,
+        large: styles.textFieldLarge,
+    };
+    const stateClassByState = {
+        idle: styles.textFieldIdle,
+        error: styles.textFieldError,
+        disabled: styles.textFieldDisabled,
+    };
+    const textFieldWrapperClassName = cn(styles.textFieldWrapper, wrapperSizeClassBySize[size]);
+    const textFieldClassName = cn(styles.textField, fieldSizeClassBySize[size], stateClassByState[state], {
+        [styles.textFieldFocused]: !alwaysShowError ? focused : state !== 'error',
+    }, className);
+    const inputClassName = cn(styles.textFieldInput, inputSizeClassBySize[size]);
+    const iconsClassName = cn(styles.textFieldIcons, iconsSizeClassBySize[size]);
+    const labelClassName = cn(styles.textFieldWrapperLabel, labelSizeClassBySize[size], { [styles.textFieldWrapperLabelDisabled]: disabledState });
+    const bottomText = () => {
+        const showError = !!errorMessage && (alwaysShowError || !focused);
+        if (!showError && !description) {
+            return;
+        }
+        return (_jsx("span", { className: cn(styles.textFieldWrapperBottomText, {
+                [styles.textFieldWrapperBottomTextDescription]: !!description,
+                [styles.textFieldWrapperBottomTextError]: showError,
+            }), children: showError ? errorMessage : description }));
+    };
+    const input = (_jsxs("div", { className: textFieldClassName, children: [searchIcon && (_jsx("div", { className: iconsClassName, children: _jsx(SearchIcon, {}) })), _jsx("input", { ref: ref, type: inputType, value: value, onChange: onChangeHandler, className: inputClassName, onFocus: onFocus, onBlur: onBlur, placeholder: disabledState ? '' : placeholder, disabled: disabledState, onClick: onFocus, tabIndex: tabIndex, maxLength: maxLength }), (checkIcon && value && !errorMessage && !disabledState) && (_jsx("div", { id: 'check-icon', className: iconsClassName, children: _jsx(CheckIcon, {}) })), clearIcon && value && !disabledState && (_jsx("div", { className: [iconsClassName, 'cursor-pointer'].join(' '), onClick: onClear, children: _jsx(CrossIcon, {}) })), eyeIcon && !disabledState && (_jsx("div", { id: 'eye-icon', className: [iconsClassName, 'cursor-pointer'].join(' '), onClick: toggleVisibility, children: inputType === 'password' ? _jsx(EyeOpenIcon, {}) : _jsx(EyeCloseIcon, {}) }))] }));
+    return (_jsxs("div", { className: textFieldWrapperClassName, children: [label && (_jsxs("div", { className: labelClassName, children: [label, required && (_jsx("span", { className: 'text-field-wrapper__label--required', children: "*" }))] })), input, bottomText()] }));
+};

package/dist/src/Inputs/TextField/TextField.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ITextField } from './TextField';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const TextFieldDefault: Story;
+export declare const TextFieldHovered: Story;
+export declare const TextFieldActive: Story;
+export declare const TextFieldDisabled: Story;
+export declare const TextFieldError: Story;
+export declare const TextFieldWithValue: Story;
+export declare const TextFieldHiddenValue: Story;