@expressms/smartapp-ui 1.1.6 → 1.1.7

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

@@ -1,4 +1,4 @@
 import { IActionModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, platform, placeholder, defaultValue, isButtonDisabled, iconColor, buttonWidth, backgroundColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, theme, platform, placeholder, defaultValue, isButtonDisabled, iconColor, buttonWidth, backgroundColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionModal;

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

@@ -12,17 +12,17 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import Popup from 'reactjs-popup';
-import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.svg';
+import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
 import Button from '../Button';
 import Input from '../Input';
 import { TButtonColor, TButtonType } from '../Button/types';
-import { getClassNames, getColor, isMobilePlatform } from '../../helpers';
-import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
+import { getClassNames, getColor, getDefaultColorForCloseIcon, isMobilePlatform } from '../../helpers';
+import { DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM, THEME } from '../../constants';
 import '../../styles/stories.module.scss';
 var ActionModal = function (_a) {
-    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, placeholder = _a.placeholder, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, isButtonDisabled = _a.isButtonDisabled, iconColor = _a.iconColor, _d = _a.buttonWidth, buttonWidth = _d === void 0 ? 100 : _d, backgroundColor = _a.backgroundColor;
+    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, placeholder = _a.placeholder, _d = _a.defaultValue, defaultValue = _d === void 0 ? '' : _d, isButtonDisabled = _a.isButtonDisabled, iconColor = _a.iconColor, _e = _a.buttonWidth, buttonWidth = _e === void 0 ? 100 : _e, backgroundColor = _a.backgroundColor;
     var ref = useRef(null);
-    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _f = useState(defaultValue), value = _f[0], setValue = _f[1];
     var onConfirmClick = function () {
         confirmButtonFunction(value);
         setValue('');
@@ -49,6 +49,6 @@ var ActionModal = function (_a) {
     var onChange = function (value) {
         setValue(value);
     };
-    return (_jsx(Popup, __assign({ className: getClassNames('action-modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-action-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-action-modal__content', '--', platform) }, { children: [_jsx("p", __assign({ className: getClassNames('smartapp-action-modal__content--title', '__', platform) }, { children: title })), _jsx("div", __assign({ onClick: onCloseModal, className: "smartapp-action-modal__content--cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), isMobilePlatform(platform) && _jsx("div", { className: "smartapp-action-modal__content--delimiter" }), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, isDisabled: isButtonDisabled, title: buttonName, typeButton: TButtonType.standard, color: TButtonColor.blue, onClickFunction: onConfirmClick }) }))] })) })) })));
+    return (_jsx(Popup, __assign({ className: getClassNames('action-modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-action-modal', '__', [theme, platform]) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-action-modal__content', '--', platform) }, { children: [_jsx("p", __assign({ className: getClassNames('smartapp-action-modal__content--title', '__', platform) }, { children: title })), _jsx("div", __assign({ onClick: onCloseModal, className: "smartapp-action-modal__content--cancel-cross" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, getDefaultColorForCloseIcon(theme)) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { theme: theme, defaultValue: value, placeholder: placeholder, onChange: onChange }) })), isMobilePlatform(platform) && _jsx("div", { className: "smartapp-action-modal__content--delimiter" }), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { theme: theme, width: buttonWidth, isDisabled: isButtonDisabled, title: buttonName, typeButton: TButtonType.standard, color: TButtonColor.blue, onClickFunction: onConfirmClick }) }))] })) })) })));
 };
 export default ActionModal;

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

@@ -5,6 +5,7 @@ export interface IActionModalProps {
     buttonName: string;
     confirmButtonFunction: (str: string) => void;
     cancelButtonFunction: () => void;
+    theme?: 'default' | 'dark';
     platform?: 'web' | 'ios' | 'android';
     placeholder?: string;
     defaultValue?: string;

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

@@ -1,4 +1,4 @@
 import { IButtonProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Button: ({ title, isDisabled, typeButton, color, width, onClickFunction }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ title, isDisabled, typeButton, color, width, theme, onClickFunction }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { TButtonType, TButtonColor } from './types';
+import { THEME } from '../../constants';
 import '../../styles/stories.module.scss';
 var Button = function (_a) {
-    var title = _a.title, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.typeButton, typeButton = _c === void 0 ? TButtonType.standard : _c, _d = _a.color, color = _d === void 0 ? TButtonColor.white : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, _f = _a.onClickFunction, onClickFunction = _f === void 0 ? function () { return undefined; } : _f;
-    return (_jsx("button", __assign({ className: classNames(typeButton ? 'smartapp-button__' + typeButton : null, color ? 'smartapp-button__color--' + color : null, isDisabled && 'smartapp-button__disabled'), style: { width: "".concat(width, "%") }, onClick: onClickFunction }, { children: title })));
+    var title = _a.title, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.typeButton, typeButton = _c === void 0 ? TButtonType.standard : _c, _d = _a.color, color = _d === void 0 ? TButtonColor.white : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, _f = _a.theme, theme = _f === void 0 ? THEME.default : _f, _g = _a.onClickFunction, onClickFunction = _g === void 0 ? function () { return undefined; } : _g;
+    return (_jsx("button", __assign({ className: classNames("smartapp-button__".concat(typeButton), "smartapp-button__color--".concat(color), "smartapp-button__".concat(theme, "--").concat(color), isDisabled && 'smartapp-button__disabled'), style: { width: "".concat(width, "%") }, onClick: onClickFunction }, { children: title })));
 };
 export default Button;

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

@@ -14,5 +14,6 @@ export interface IButtonProps {
     typeButton?: 'standard' | 'low';
     color?: 'white' | 'blue' | 'red';
     onClickFunction?: () => void;
+    theme?: 'default' | 'dark';
     width?: IntRange<1, 101>;
 }

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

@@ -15,7 +15,7 @@ import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.s
 import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
 import { ReactComponent as RefreshIcon } from '../../assets/icons/refresh.svg';
 import { getColor } from '../../helpers';
-import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEADER_TEXT_COLOR, DEFAULT_RED_ICON_COLOR, FONT_SIZE, LINE_HEIGHT, PLATFORM, } from '../../constants';
+import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEADER_TEXT_COLOR, DEFAULT_RED_ICON_COLOR, FONT_SIZE, LINE_HEIGHT, PLATFORM, } from '../../constants';
 import '../../styles/stories.module.scss';
 var Header = function (_a) {
     var _b;
@@ -28,8 +28,8 @@ var Header = function (_a) {
         background: getColor(backgroundColor, DEFAULT_HEADER_BACKGROUND_COLOR),
     }); };
     var renderRefreshIcon = function (_a) {
-        var isEnabled = _a.isEnabled, onClick = _a.onClick;
-        return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), onClick: !isEnabled ? onClick : function () { } }));
+        var isEnabled = _a.isEnabled, color = _a.color, onClick = _a.onClick;
+        return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), style: { color: getColor(color, DEFAULT_GRAY_ICON_COLOR) }, onClick: !isEnabled ? onClick : function () { } }));
     };
     return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon), customIcon] }))] })));
 };

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 export type TRefreshIcon = {
     isEnabled: boolean;
+    color?: string;
     onClick: () => void;
 };
 export interface IHeaderProps {

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

@@ -1,4 +1,4 @@
 import { IInputProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, theme, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -15,13 +15,13 @@ import classNames from 'classnames';
 import { ReactComponent as IconEye } from '../../assets/icons/icon-eye.svg';
 import { ReactComponent as IconEyeClosed } from '../../assets/icons/icon-eye-off.svg';
 import { ReactComponent as ClearIcon } from '../../assets/icons/clear.svg';
-import { ENTER_KEY, FONT_SIZE, INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT, LINE_HEIGHT } from '../../constants';
+import { ENTER_KEY, FONT_SIZE, INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT, LINE_HEIGHT, THEME } from '../../constants';
 import '../../styles/stories.module.scss';
 var Input = function (_a) {
     var _b;
-    var _c = _a.isPassword, isPassword = _c === void 0 ? false : _c, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _f = _a.textSize, textSize = _f === void 0 ? 'small' : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, _h = _a.className, className = _h === void 0 ? '' : _h, onChange = _a.onChange, onEnterPress = _a.onEnterPress, onClearClick = _a.onClearClick;
+    var _c = _a.isPassword, isPassword = _c === void 0 ? false : _c, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _f = _a.textSize, textSize = _f === void 0 ? 'small' : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.theme, theme = _j === void 0 ? THEME.default : _j, onChange = _a.onChange, onEnterPress = _a.onEnterPress, onClearClick = _a.onClearClick;
     var inputRef = useRef(null);
-    var _j = useState(false), isPasswordShown = _j[0], setIsPasswordShown = _j[1];
+    var _k = useState(false), isPasswordShown = _k[0], setIsPasswordShown = _k[1];
     useEffect(function () {
         var inputElement = inputRef.current;
         if (inputElement && inputElement.value.length) {
@@ -52,6 +52,6 @@ var Input = function (_a) {
         setIsPasswordShown(!isPasswordShown);
         !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
     };
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames((_b = { 'smartapp-input': true }, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: classNames('smartapp-input__container--field', { 'smartapp-input__container--field__with-clear-button': isClearable }), style: getTextStyles(), type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: handleKeyDown, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) }))), isClearable && _jsx(ClearIcon, { className: "smartapp-input__container--clear-icon", onClick: onClearClick })] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames('smartapp-input', "smartapp-input__".concat(theme), (_b = {}, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: classNames('smartapp-input__container--field', { 'smartapp-input__container--field__with-clear-button': isClearable }), style: getTextStyles(), type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: handleKeyDown, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) }))), isClearable && _jsx(ClearIcon, { className: "smartapp-input__container--clear-icon", onClick: onClearClick })] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
 };
 export default Input;

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

@@ -10,6 +10,7 @@ export interface IInputProps {
     textSize?: 'small' | 'default' | 'large';
     width?: IntRange<1, 101>;
     className?: string;
+    theme?: 'default' | 'dark';
     onChange: (str: string) => void;
     onEnterPress?: () => void;
     onClearClick?: () => void;

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

@@ -1,4 +1,4 @@
 import { IModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Modal: ({ isModalOpen, content, handleCloseModal, title, platform, iconColor, backgroundColor }: IModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ isModalOpen, content, handleCloseModal, title, theme, platform, iconColor, backgroundColor, }: IModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

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

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import Popup from 'reactjs-popup';
 import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
-import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
-import { getClassNames, getColor } from '../../helpers';
+import { DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM, THEME } from '../../constants';
+import { getClassNames, getColor, getDefaultColorForCloseIcon } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Modal = function (_a) {
-    var isModalOpen = _a.isModalOpen, content = _a.content, handleCloseModal = _a.handleCloseModal, title = _a.title, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
+    var isModalOpen = _a.isModalOpen, content = _a.content, handleCloseModal = _a.handleCloseModal, title = _a.title, _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
     var ref = useRef(null);
     useEffect(function () {
         document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
@@ -33,6 +33,6 @@ var Modal = function (_a) {
             document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
         };
     }, [isModalOpen, handleCloseModal]);
-    return (_jsx(Popup, __assign({ className: getClassNames('modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), content] })) })) })));
+    return (_jsx(Popup, __assign({ className: getClassNames('modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-modal', '__', [theme, platform]) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, getDefaultColorForCloseIcon(theme)) } }) })), content] })) })) })));
 };
 export default Modal;

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

@@ -4,6 +4,7 @@ export interface IModalProps {
     content: ReactElement;
     handleCloseModal: () => void;
     title?: string;
+    theme?: 'default' | 'dark';
     platform?: 'web' | 'ios' | 'android';
     iconColor?: string;
     backgroundColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",
@@ -16,6 +16,8 @@
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-viewport": "^6.5.15",
+    "@storybook/addons": "^6.5.15",
+    "@storybook/core-events": "^6.5.15",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.15",
     "@svgr/webpack": "5.5",