@expressms/smartapp-ui 0.0.8 → 1.0.0

package/build/main//321/201omponents/DragAndDrop/DragAndDrop.js

@@ -12,17 +12,18 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { ReactComponent as Order } from '../../assets/icons/order.svg';
-import { ReactComponent as Close } from '../../assets/icons/close.svg';
+import { ReactComponent as OrderIcon } from '../../assets/icons/order.svg';
+import { ReactComponent as DeleteIcon } from '../../assets/icons/close.svg';
 import CheckBox from '../Checkbox';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
-function DragAndDrop(_a) {
-    var options = _a.options, onDragEndFunction = _a.onDragEndFunction, onChangeIsCompletedOption = _a.onChangeIsCompletedOption, onChangeOption = _a.onChangeOption, onClickDeleteOption = _a.onClickDeleteOption, placeholder = _a.placeholder, width = _a.width;
+var DragAndDrop = function (_a) {
+    var placeholder = _a.placeholder, options = _a.options, onDragEndFunction = _a.onDragEndFunction, onChangeIsCompletedOption = _a.onChangeIsCompletedOption, onChangeOption = _a.onChangeOption, onClickDeleteOption = _a.onClickDeleteOption, width = _a.width, checkboxColor = _a.checkboxColor, orderColor = _a.orderColor, deleteColor = _a.deleteColor;
     var _b = useState(false), isOnDragStart = _b[0], setIsOnDragStart = _b[1];
     var isCheckbox = function (option) { return (option === null || option === void 0 ? void 0 : option.isCompleted) !== undefined; };
     var reorderOptions = function (options, startIndex, endIndex) {
         var result = Array.from(options);
-        console.log(options);
         result.forEach(function (item, index) {
             if (startIndex > endIndex && index < startIndex && index >= endIndex) {
                 item.orderId = item.orderId + 1;
@@ -49,6 +50,6 @@ function DragAndDrop(_a) {
         var newOptions = reorderOptions(options, result.source.index, result.destination.index);
         onDragEndFunction(newOptions);
     };
-    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { checked: instanceOption.isCompleted, id: instanceOption.id, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(Order, {}), onClickDeleteOption && _jsx(Close, { onClick: function () { return onClickDeleteOption(instanceOption); }, className: "cp" })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
-}
+    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { id: instanceOption.id, checked: instanceOption.isCompleted, iconColor: checkboxColor, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(OrderIcon, { style: { color: getIconColor(orderColor, DEFAULT_GRAY_ICON_COLOR) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getIconColor(deleteColor, DEFAULT_BLUE_ICON_COLOR) }, onClick: function () { return onClickDeleteOption(instanceOption); } })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
+};
 export default DragAndDrop;

package/build/main//321/201omponents/DragAndDrop/types.d.ts

@@ -5,12 +5,15 @@ export type TDragAndDropOption = {
     isCompleted?: boolean;
     orderId: number;
 };
-export interface IDragAndDrop {
+export interface IDragAndDropProps {
+    placeholder: string;
     options: TDragAndDropOption[];
     onDragEndFunction: (result: any) => void;
     onChangeIsCompletedOption?: (instanceOption: TDragAndDropOption) => void;
     onChangeOption?: (e: any, instanceOption: TDragAndDropOption) => void;
     onClickDeleteOption?: (instanceOption: TDragAndDropOption) => void;
-    placeholder: string;
     width?: IntRange<1, 101>;
+    checkboxColor?: string;
+    orderColor?: string;
+    deleteColor?: string;
 }

package/build/main//321/201omponents/Error/Error.d.ts

@@ -1,4 +1,4 @@
 import { IErrorProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Error({ title, text }: IErrorProps): import("react/jsx-runtime").JSX.Element;
+declare const Error: ({ title, text, width, iconColor }: IErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default Error;

package/build/main//321/201omponents/Error/Error.js

@@ -11,9 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as ErrorIcon } from '../../assets/icons/error.svg';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
-function Error(_a) {
-    var _b = _a.title, title = _b === void 0 ? 'Ошибка' : _b, _c = _a.text, text = _c === void 0 ? 'Попробуйте еще раз' : _c;
-    return (_jsxs("div", __assign({ className: "smartapp-error" }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, {}) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
-}
+var Error = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? 'Ошибка' : _b, _c = _a.text, text = _c === void 0 ? 'Попробуйте еще раз' : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, iconColor = _a.iconColor;
+    return (_jsxs("div", __assign({ className: "smartapp-error", style: { width: "".concat(width, "%") } }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
+};
 export default Error;

package/build/main//321/201omponents/Error/types.d.ts

@@ -1,4 +1,7 @@
+import { IntRange } from '../types';
 export interface IErrorProps {
     title?: string;
     text?: string;
+    width?: IntRange<1, 101>;
+    iconColor?: string;
 }

package/build/main//321/201omponents/Header/Header.d.ts

@@ -1,4 +1,4 @@
 import { IHeaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Header(props: IHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ title, isBack, isRemove, onClickBack, onClickRemove, arrowColor, trashColor, }: IHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/build/main//321/201omponents/Header/Header.js

@@ -10,11 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as ArrowBack } from '../../assets/icons/arrow-back.svg';
-import { ReactComponent as Trash } from '../../assets/icons/trash.svg';
+import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.svg';
+import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_RED_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
-function Header(props) {
-    var _a = props.title, title = _a === void 0 ? '' : _a, _b = props.isBack, isBack = _b === void 0 ? false : _b, _c = props.isRemove, isRemove = _c === void 0 ? false : _c, _d = props.onClickBack, onClickBack = _d === void 0 ? function () { return undefined; } : _d, _e = props.onClickRemove, onClickRemove = _e === void 0 ? function () { return undefined; } : _e, _f = props.arrowColor, arrowColor = _f === void 0 ? '#111111' : _f, _g = props.trashColor, trashColor = _g === void 0 ? '#EB5545' : _g;
-    return (_jsxs("div", __assign({ className: "smartapp-header" }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBack, { style: { color: arrowColor, stroke: arrowColor }, onClick: function () { return onClickBack(); }, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), isRemove && (_jsx("div", __assign({ onClick: function () { return onClickRemove(); }, className: "smartapp-header__trash" }, { children: _jsx(Trash, { style: { color: trashColor } }) })))] })));
-}
+var Header = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.isBack, isBack = _c === void 0 ? false : _c, _d = _a.isRemove, isRemove = _d === void 0 ? false : _d, _e = _a.onClickBack, onClickBack = _e === void 0 ? function () { return undefined; } : _e, _f = _a.onClickRemove, onClickRemove = _f === void 0 ? function () { return undefined; } : _f, arrowColor = _a.arrowColor, trashColor = _a.trashColor;
+    return (_jsxs("div", __assign({ className: "smartapp-header" }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getIconColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__trash" }, { children: _jsx(TrashIcon, { style: { color: getIconColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) })))] })));
+};
 export default Header;

package/build/main//321/201omponents/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { IInput } from './types';
+import { IInputProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Input({ title, onChange, placeholder, width, defaultValue }: IInput): import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ title, onChange, placeholder, width, defaultValue }: IInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/build/main//321/201omponents/Input/Input.js

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../../styles/stories.module.scss';
-function Input(_a) {
+var Input = function (_a) {
     var title = _a.title, onChange = _a.onChange, placeholder = _a.placeholder, _b = _a.width, width = _b === void 0 ? 100 : _b, defaultValue = _a.defaultValue;
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-input" }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsx("input", { defaultValue: defaultValue, placeholder: placeholder, onChange: function (e) { return onChange(e.target.value); }, className: "smartapp-input__field" })] })));
-}
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-input" }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsx("input", { className: "smartapp-input__field", defaultValue: defaultValue, placeholder: placeholder, onChange: function (e) { return onChange(e.target.value); } })] })));
+};
 export default Input;

package/build/main//321/201omponents/Input/types.d.ts

@@ -1,5 +1,5 @@
 import { IntRange } from '../types';
-export interface IInput {
+export interface IInputProps {
     title?: string;
     onChange: (str: string) => void;
     placeholder?: string;

package/build/main//321/201omponents/Loader/Loader.d.ts

@@ -1,4 +1,4 @@
 import { ILoaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Loader({ isLoader, title }: ILoaderProps): import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ isLoader, title }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Loader;

package/build/main//321/201omponents/Loader/Loader.js

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorRing } from 'react-loader-spinner';
 import '../../styles/stories.module.scss';
-function Loader(_a) {
+var Loader = function (_a) {
     var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, title = _a.title;
     return (_jsx("div", __assign({ className: "smartapp-loader-wrapper" }, { children: _jsxs("div", __assign({ className: "smartapp-loader" }, { children: [_jsx(ColorRing, { visible: isLoader, height: "32", width: "32", ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: "smartapp-loader__title" }, { children: title }))] })) })));
-}
+};
 export default Loader;

package/build/main//321/201omponents/Profile/Profile.d.ts

@@ -1,4 +1,4 @@
 import { IProfileProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Profile({ username, email, isShowProfile, onChange, onClickLogout, isMultipleProfile, onClickAddProfile, width, }: IProfileProps): import("react/jsx-runtime").JSX.Element;
+declare const Profile: ({ username, email, isShowProfile, onChange, onClickLogout, isMultipleProfile, onClickAddProfile, width, logoutColor, addProfileColor, addProfileBackgroundColor, }: IProfileProps) => import("react/jsx-runtime").JSX.Element;
 export default Profile;

package/build/main//321/201omponents/Profile/Profile.js

@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { ReactComponent as Logout } from '../../assets/icons/logout.svg';
-import { ReactComponent as AddProfile } from '../../assets/icons/plus.svg';
+import { ReactComponent as LogoutIcon } from '../../assets/icons/logout.svg';
+import { ReactComponent as AddProfileIcon } from '../../assets/icons/plus.svg';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_LIGHT_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
-function Profile(_a) {
+var Profile = function (_a) {
     var _b, _c, _d;
-    var username = _a.username, email = _a.email, _e = _a.isShowProfile, isShowProfile = _e === void 0 ? false : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { return undefined; } : _f, onClickLogout = _a.onClickLogout, isMultipleProfile = _a.isMultipleProfile, onClickAddProfile = _a.onClickAddProfile, _g = _a.width, width = _g === void 0 ? 100 : _g;
+    var username = _a.username, email = _a.email, _e = _a.isShowProfile, isShowProfile = _e === void 0 ? false : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { return undefined; } : _f, onClickLogout = _a.onClickLogout, isMultipleProfile = _a.isMultipleProfile, onClickAddProfile = _a.onClickAddProfile, _g = _a.width, width = _g === void 0 ? 100 : _g, logoutColor = _a.logoutColor, addProfileColor = _a.addProfileColor, addProfileBackgroundColor = _a.addProfileBackgroundColor;
     var ref = useRef(null);
     var initials = (_d = (_c = (_b = username === null || username === void 0 ? void 0 : username.split(' ')) === null || _b === void 0 ? void 0 : _b.map(function (n) { return n[0]; })) === null || _c === void 0 ? void 0 : _c.join('.')) === null || _d === void 0 ? void 0 : _d.toUpperCase();
     useEffect(function () {
@@ -31,6 +33,9 @@ function Profile(_a) {
             document.removeEventListener('mousedown', checkIfClickedOutside);
         };
     }, [isShowProfile, onChange]);
-    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(Logout, {}) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfile, {}) })), _jsx("p", __assign({ className: "smartapp-profile__add-profile--title" }, { children: "\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" }))] })))] })))] })));
-}
+    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(LogoutIcon, { style: { color: getIconColor(logoutColor, DEFAULT_BLUE_ICON_COLOR) } }) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfileIcon, { style: {
+                                        stroke: getIconColor(addProfileColor, DEFAULT_BLUE_ICON_COLOR),
+                                        color: getIconColor(addProfileBackgroundColor, DEFAULT_BLUE_LIGHT_ICON_COLOR)
+                                    } }) })), _jsx("p", __assign({ className: "smartapp-profile__add-profile--title" }, { children: "\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" }))] })))] })))] })));
+};
 export default Profile;

package/build/main//321/201omponents/Profile/types.d.ts

@@ -8,4 +8,7 @@ export interface IProfileProps {
     isMultipleProfile?: boolean;
     onClickAddProfile?: () => void;
     width?: IntRange<1, 101>;
+    logoutColor?: string;
+    addProfileColor?: string;
+    addProfileBackgroundColor?: string;
 }

package/build/main//321/201omponents/Stories/Stories.d.ts

@@ -0,0 +1,4 @@
+import { IStoriesProps } from './types';
+import './stories.module.scss';
+declare const StoriesComponent: ({ platform, fontFamily, groupStories, allGroupsStories, changeStoryToViewed, changeGroupStoriesToViewed, handleCloseGroupStories, }: IStoriesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StoriesComponent;

package/build/main//321/201omponents/Stories/Stories.js

@@ -0,0 +1,167 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { isNull, sortBy } from 'lodash';
+import Stories from 'react-insta-stories';
+import Popup from 'reactjs-popup';
+import { useSwipeable } from 'react-swipeable';
+import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
+import { STORY_BACKGROUND_TYPES } from './types';
+import { BUTTON_PADDING, DEFAULT_FONT_FAMILY, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
+import './stories.module.scss';
+var storyItemBaseStyles = {
+    height: '100%',
+    width: '100%',
+};
+var progressContainerStyles = function (platform) { return ({
+    gap: '12px',
+    width: '100%',
+    maxWidth: platform === PLATFORM.ios || platform === PLATFORM.android ? '139px' : '198px',
+    paddingTop: platform === PLATFORM.web ? '22px' : platform === PLATFORM.ios ? '21px' : '26px',
+    paddingLeft: '0',
+    paddingRight: '0',
+    paddingBottom: '0',
+}); };
+var progressWrapperStyles = {
+    height: '4px',
+    borderRadius: '51px',
+    background: 'rgba(255, 255, 255, 0.4)',
+    margin: 0,
+};
+var progressStyles = {
+    height: '4px',
+    borderRadius: '51px',
+    background: 'rgba(255, 255, 255, 1)',
+};
+var StoriesComponent = function (_a) {
+    var _b, _c;
+    var _d;
+    var _e = _a.platform, platform = _e === void 0 ? PLATFORM.web : _e, _f = _a.fontFamily, fontFamily = _f === void 0 ? DEFAULT_FONT_FAMILY : _f, groupStories = _a.groupStories, allGroupsStories = _a.allGroupsStories, changeStoryToViewed = _a.changeStoryToViewed, changeGroupStoriesToViewed = _a.changeGroupStoriesToViewed, handleCloseGroupStories = _a.handleCloseGroupStories;
+    var sortStoriesByOrder = function (stories) { return sortBy(stories, ['order']); };
+    var getActiveGroupStoriesIndex = function () { return allGroupsStories.findIndex(function (_a) {
+        var id = _a.id;
+        return id === (activeGroupStories === null || activeGroupStories === void 0 ? void 0 : activeGroupStories.id);
+    }); };
+    var _g = useState(groupStories), activeGroupStories = _g[0], setActiveGroupStories = _g[1];
+    var _h = useState(sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || [])), stories = _h[0], setStories = _h[1];
+    var _j = useState((_d = stories[0]) === null || _d === void 0 ? void 0 : _d.id), activeStoryId = _j[0], setActiveStoryId = _j[1];
+    var _k = useState(false), isAnimateToRight = _k[0], setIsAnimateToRight = _k[1];
+    var _l = useState(false), isAnimateToLeft = _l[0], setIsAnimateToLeft = _l[1];
+    var activeStory = stories.find(function (_a) {
+        var id = _a.id;
+        return id === activeStoryId;
+    });
+    var getStoryStyles = function (story) {
+        var _a, _b;
+        if (((_a = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color) {
+            return __assign(__assign({}, storyItemBaseStyles), { background: story.backgroundSource.value });
+        }
+        return __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat((_b = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")"), backgroundSize: 'cover' });
+    };
+    var changeActiveGroupStories = function (groupStoriesItem) {
+        setActiveGroupStories(groupStoriesItem);
+        setStories(sortStoriesByOrder(groupStoriesItem.stories));
+        setTimeout(function () {
+            setIsAnimateToLeft(false);
+            setIsAnimateToRight(false);
+        }, 500);
+    };
+    var handlePrevious = function () {
+        var prevGroupStories = allGroupsStories[getActiveGroupStoriesIndex() - 1];
+        if (prevGroupStories) {
+            setIsAnimateToLeft(true);
+            changeActiveGroupStories(prevGroupStories);
+        }
+        else {
+            handleCloseGroupStories();
+        }
+    };
+    var handleNext = function () {
+        var nextGroupStories = allGroupsStories[getActiveGroupStoriesIndex() + 1];
+        if (nextGroupStories) {
+            setIsAnimateToRight(true);
+            changeActiveGroupStories(nextGroupStories);
+        }
+        else {
+            handleCloseGroupStories();
+        }
+    };
+    var onPrevious = function () { return activeStoryId === stories[0].id && handlePrevious(); };
+    var onStoryStart = function () {
+        var story = stories.find(function (_a) {
+            var id = _a.id;
+            return id === activeStoryId;
+        });
+        var isLastStory = stories.at(-1).id === story.id;
+        if (!story.viewed && changeStoryToViewed) {
+            changeStoryToViewed(story, activeGroupStories);
+        }
+        if (isLastStory && !activeGroupStories.viewed && changeGroupStoriesToViewed) {
+            changeGroupStoriesToViewed(activeGroupStories);
+        }
+    };
+    var getStories = function () { return stories.map(function (story) { return ({
+        content: function () {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useEffect(function () {
+                setActiveStoryId(story.id);
+                var storyWrapper = document.querySelector('.smartapp-stories');
+                var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
+                var storyContent = document.querySelector('.smartapp-stories__story');
+                var storyContentHeight = (storyContent === null || storyContent === void 0 ? void 0 : storyContent.getBoundingClientRect().height) || 0;
+                var buttonElement = document.querySelector('.smartapp-stories__story--button');
+                var buttonElementHeight = buttonElement ? (buttonElement.getBoundingClientRect().height + BUTTON_PADDING) : 0;
+                var padding = (storyWrapperHeight - storyContentHeight - buttonElementHeight) / 2;
+                var paddingTop = (padding > MAX_PADDING_FOR_IMAGE && story.image) ? "".concat(MAX_PADDING_FOR_IMAGE, "px") : "".concat(padding, "px");
+                storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
+            }, []);
+            return (_jsx("div", __assign({ style: getStoryStyles(story) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [story.image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: story.image, alt: "" }) })), story.title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: story.title })), story.body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: story.body })), story.button && (_jsx("div", __assign({ className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: story.button.action }, { children: story.button.text })))] })) }), story.id));
+        },
+    }); }); };
+    var swipeableHandlers = useSwipeable({
+        trackMouse: true,
+        onSwipedLeft: function () { return handleNext(); },
+        onSwipedRight: function () { return handlePrevious(); },
+    });
+    useEffect(function () {
+        var _a;
+        var sortedStories = sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || []);
+        setActiveGroupStories(groupStories);
+        setStories(sortedStories);
+        setActiveStoryId((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) ? (_a = sortedStories[0]) === null || _a === void 0 ? void 0 : _a.id : null);
+    }, [groupStories]);
+    useEffect(function () {
+        var _a, _b;
+        var popupElement = document.querySelector('.smartapp-stories-content');
+        var background = ((_a = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color
+            ? activeStory.backgroundSource.value
+            : "url(".concat((_b = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")");
+        popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background);
+    }, [activeStory]);
+    if (isNull(activeGroupStories)) {
+        return null;
+    }
+    return (_jsxs(Popup, __assign({ className: "smartapp-stories", open: true }, { children: [_jsx("div", __assign({ className: classNames((_b = {
+                        'smartapp-stories': true
+                    },
+                    _b["smartapp-stories__".concat(platform)] = true,
+                    _b['smartapp-stories__animate-right'] = isAnimateToRight,
+                    _b['smartapp-stories__animate-left'] = isAnimateToLeft,
+                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
+                        'smartapp-stories__icon': true
+                    },
+                    _c["smartapp-stories__icon--".concat(platform)] = true,
+                    _c)), onClick: handleCloseGroupStories })] })));
+};
+export default StoriesComponent;

package/build/main//321/201omponents/Stories/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Stories';

package/build/main//321/201omponents/Stories/index.js

@@ -0,0 +1 @@
+export { default } from './Stories';

package/build/main//321/201omponents/Stories/types.d.ts

@@ -0,0 +1,34 @@
+export declare enum STORY_BACKGROUND_TYPES {
+    color = "color",
+    image = "image"
+}
+export type TStoryItem = {
+    id: number;
+    order: number;
+    viewed?: boolean;
+    title: string | null;
+    body: string | null;
+    backgroundSource: {
+        type: STORY_BACKGROUND_TYPES;
+        value: string;
+    };
+    button: {
+        text: string;
+        action: () => void;
+    } | null;
+    image: string | null;
+};
+export type TGroupStories = {
+    id: number;
+    viewed: boolean;
+    stories: TStoryItem[];
+};
+export interface IStoriesProps {
+    platform?: string;
+    fontFamily?: string;
+    groupStories: TGroupStories | null;
+    allGroupsStories: TGroupStories[];
+    changeStoryToViewed?: (story: TStoryItem, groupStories: TGroupStories) => void;
+    changeGroupStoriesToViewed?: (groupStories: TGroupStories) => void;
+    handleCloseGroupStories: () => void;
+}

package/build/main//321/201omponents/Stories/types.js

@@ -0,0 +1,5 @@
+export var STORY_BACKGROUND_TYPES;
+(function (STORY_BACKGROUND_TYPES) {
+    STORY_BACKGROUND_TYPES["color"] = "color";
+    STORY_BACKGROUND_TYPES["image"] = "image";
+})(STORY_BACKGROUND_TYPES || (STORY_BACKGROUND_TYPES = {}));

package/build/main//321/201omponents/Switcher/Switcher.d.ts

@@ -1,4 +1,4 @@
 import { ISwitcherProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Switcher({ pages }: ISwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare const Switcher: ({ pages }: ISwitcherProps) => import("react/jsx-runtime").JSX.Element;
 export default Switcher;

package/build/main//321/201omponents/Switcher/Switcher.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Slider from 'react-slick';
 import { NavLink } from 'react-router-dom';
 import '../../styles/stories.module.scss';
-function Switcher(_a) {
+var Switcher = function (_a) {
     var pages = _a.pages;
     var sliderSettings = {
         variableWidth: true,
@@ -25,9 +25,9 @@ function Switcher(_a) {
         infinite: false,
         speed: 300,
     };
-    return (_jsx("div", __assign({ className: "smartapp-switcher" }, { children: _jsx(Slider, __assign({}, sliderSettings, { children: pages === null || pages === void 0 ? void 0 : pages.map(function (page) { return (_jsx(NavLink, __assign({ className: function (_a) {
+    return (_jsx("div", __assign({ className: "smartapp-switcher" }, { children: _jsx(Slider, __assign({}, sliderSettings, { children: pages.map(function (page) { return (_jsx(NavLink, __assign({ className: function (_a) {
                     var isActive = _a.isActive;
                     return isActive ? ' smartapp-switcher__instance smartapp-switcher__instance--active' : 'smartapp-switcher__instance';
-                }, to: page === null || page === void 0 ? void 0 : page.route }, { children: page.title }), page === null || page === void 0 ? void 0 : page.route)); }) })) })));
-}
+                }, to: page.route }, { children: page.title }), page.route)); }) })) })));
+};
 export default Switcher;

package/build/main//321/201omponents/Switcher/types.d.ts

@@ -1,6 +1,8 @@
+type PageType = {
+    route: string;
+    title: string;
+};
 export interface ISwitcherProps {
-    pages: {
-        route: string;
-        title: string;
-    }[];
+    pages: PageType[];
 }
+export {};

package/build/main//321/201omponents/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
 import { IToggleProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Toggle({ id, onClick, checked }: IToggleProps): import("react/jsx-runtime").JSX.Element;
+declare const Toggle: ({ id, checked, onClick }: IToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/build/main//321/201omponents/Toggle/Toggle.js

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../../styles/stories.module.scss';
-function Toggle(_a) {
-    var _b = _a.id, id = _b === void 0 ? 'toggle' : _b, _c = _a.onClick, onClick = _c === void 0 ? function () { return undefined; } : _c, _d = _a.checked, checked = _d === void 0 ? false : _d;
-    return (_jsx("div", __assign({ className: "smartapp-toggle-wrapper" }, { children: _jsxs("label", __assign({ htmlFor: "smartapp-toggle-".concat(id), onClick: function () { return onClick(); }, className: "smartapp-toggle" }, { children: [_jsx("input", { type: "checkbox", id: "smartapp-toggle-".concat(id), checked: checked, disabled: true }), _jsx("span", { className: "smartapp-slider round" })] })) })));
-}
+var Toggle = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'toggle' : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { return undefined; } : _d;
+    return (_jsx("div", __assign({ className: "smartapp-toggle-wrapper" }, { children: _jsxs("label", __assign({ className: "smartapp-toggle", htmlFor: "smartapp-toggle-".concat(id), onClick: function () { return onClick(); } }, { children: [_jsx("input", { type: "checkbox", id: "smartapp-toggle-".concat(id), checked: checked, disabled: true }), _jsx("span", { className: "smartapp-slider round" })] })) })));
+};
 export default Toggle;

package/build/main//321/201omponents/Toggle/types.d.ts

@@ -1,5 +1,5 @@
 export interface IToggleProps {
-    id: string;
-    onClick: () => void;
-    checked: boolean;
+    id?: string;
+    checked?: boolean;
+    onClick?: () => void;
 }

package/build/main//321/201omponents/index.d.ts

@@ -17,3 +17,4 @@ export { default as Loader } from './Loader';
 export { default as Profile } from './Profile';
 export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
+export { default as Stories } from './Stories';

package/build/main//321/201omponents/index.js

@@ -17,3 +17,4 @@ export { default as Loader } from './Loader';
 export { default as Profile } from './Profile';
 export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
+export { default as Stories } from './Stories';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",
@@ -15,6 +15,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-viewport": "^6.5.15",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.15",
     "@svgr/webpack": "5.5",
@@ -28,6 +29,9 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^18.0.10",
     "@types/react-slick": "^0.23.10",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "animate.css": "^4.1.1",
     "babel-jest": "^18.0.0",
     "babel-loader": "8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -45,6 +49,11 @@
     "enhanced-resolve": "^5.12.0",
     "eslint": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
@@ -66,15 +75,17 @@
     "react-datepicker": "^4.8.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
+    "react-insta-stories": "^2.6.2",
     "react-loader-spinner": "^5.3.4",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.7.0",
     "react-select": "^5.7.2",
     "react-slick": "^0.29.0",
+    "react-swipeable": "^7.0.1",
     "reactjs-popup": "^2.0.5",
     "resolve": "^1.20.0",
     "resolve-url-loader": "2.3.1",
-    "sass": "^1.57.1",
+    "sass": "^1.66.1",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
@@ -97,7 +108,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "storybook": "rm -rf node_modules/.cache/storybook && start-storybook -p 6006",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook -o storybook-build",
     "copy-scss-files": "copyfiles -u 1 src/styles/*.module.scss build/main",
     "copy-svg-files": "copyfiles -u 1 src/assets/icons/*.svg build/main",
     "build": "tsc -p tsconfig.json && webpack && npm run copy-svg-files && npm run copy-scss-files",
@@ -151,7 +162,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "css-loader": "^6.7.3",
     "prop-types": "^15.8.1",
-    "style-loader": "2.0.0",
+    "style-loader": "^3.3.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"
   },