@itcase/ui 1.0.1

package/dist/constants.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var align = require('./constants/componentProps/align.js');
+var alignDirection = require('./constants/componentProps/alignDirection.js');
+var borderColor = require('./constants/componentProps/borderColor.js');
+var borderType = require('./constants/componentProps/borderType.js');
+var captionPosition = require('./constants/componentProps/captionPosition.js');
+var direction = require('./constants/componentProps/direction.js');
+var emojiSize = require('./constants/componentProps/emojiSize.js');
+var position = require('./constants/componentProps/position.js');
+var fill = require('./constants/componentProps/fill.js');
+var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fillType = require('./constants/componentProps/fillType.js');
+var flexAlign = require('./constants/componentProps/flexAlign.js');
+var flexJustifyContent = require('./constants/componentProps/flexJustifyContent.js');
+var flexWrap = require('./constants/componentProps/flexWrap.js');
+var gridAlign = require('./constants/componentProps/gridAlign.js');
+var gridAlignSelf = require('./constants/componentProps/gridAlignSelf.js');
+var gridJustifyItems = require('./constants/componentProps/gridJustifyItems.js');
+var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
+var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
+var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
+var iconSize = require('./constants/componentProps/iconSize.js');
+var resizeMode = require('./constants/componentProps/resizeMode.js');
+var shape = require('./constants/componentProps/shape.js');
+var size = require('./constants/componentProps/size.js');
+var stacking = require('./constants/componentProps/stacking.js');
+var strokeColor = require('./constants/componentProps/strokeColor.js');
+var textAlign = require('./constants/componentProps/textAlign.js');
+var textColor = require('./constants/componentProps/textColor.js');
+var textColorActive = require('./constants/componentProps/textColorActive.js');
+var textColorHover = require('./constants/componentProps/textColorHover.js');
+var textGradient = require('./constants/componentProps/textGradient.js');
+var textStyle = require('./constants/componentProps/textStyle.js');
+var textTag = require('./constants/componentProps/textTag.js');
+var textWeight = require('./constants/componentProps/textWeight.js');
+var titleSize = require('./constants/componentProps/titleSize.js');
+var type = require('./constants/componentProps/type.js');
+var underline = require('./constants/componentProps/underline.js');
+var verticalContentAlign = require('./constants/componentProps/verticalContentAlign.js');
+var verticalResizeMode = require('./constants/componentProps/verticalResizeMode.js');
+var width = require('./constants/componentProps/width.js');
+var wrap = require('./constants/componentProps/wrap.js');
+
+
+
+exports.alignProps = align.default;
+exports.alignDirectionProps = alignDirection.default;
+exports.borderColorProps = borderColor.default;
+exports.borderTypeProps = borderType.default;
+exports.captionPositionProps = captionPosition.default;
+exports.directionProps = direction.default;
+exports.emojiSizeProps = emojiSize.default;
+exports.positionProps = position.default;
+exports.fillProps = fill.default;
+exports.fillGradientProps = fillGradient.default;
+exports.fillTypeProps = fillType.default;
+exports.flexAlignProps = flexAlign.default;
+exports.flexJustifyContentProps = flexJustifyContent.default;
+exports.flexWrapProps = flexWrap.default;
+exports.gridAlignProps = gridAlign.default;
+exports.gridAlignSelfProps = gridAlignSelf.default;
+exports.gridJustifyItemsProps = gridJustifyItems.default;
+exports.gridJustifySelfProps = gridJustifySelf.default;
+exports.horizontalContentAlignProps = horizontalContentAlign.default;
+exports.horizontalResizeModeProps = horizontalResizeMode.default;
+exports.iconSizeProps = iconSize.default;
+exports.resizeModeProps = resizeMode.default;
+exports.shapeProps = shape.default;
+exports.sizeProps = size.default;
+exports.stackingProps = stacking.default;
+exports.strokeColorProps = strokeColor.default;
+exports.textAlignProps = textAlign.default;
+exports.textColorProps = textColor.default;
+exports.textColorActiveProps = textColorActive.default;
+exports.textColorHoverProps = textColorHover.default;
+exports.textGradientProps = textGradient.default;
+exports.textStyleProps = textStyle.default;
+exports.textTagProps = textTag.default;
+exports.textWeightProps = textWeight.default;
+exports.titleSizeProps = titleSize.default;
+exports.typeProps = type.default;
+exports.underlineProps = underline.default;
+exports.verticalContentAlignProps = verticalContentAlign.default;
+exports.verticalResizeModeProps = verticalResizeMode.default;
+exports.widthProps = width.default;
+exports.wrapProps = wrap.default;

package/dist/context/Notifications.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var uuid = require('uuid');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+var STATUSES = {
+  success: 'success',
+  info: 'info',
+  error: 'error',
+  warning: 'warning'
+};
+var NotificationsContext = /*#__PURE__*/React.createContext([]);
+var NotificationsAPIContext = /*#__PURE__*/React.createContext({
+  showNotification: function showNotification() {},
+  hideNotifications: function hideNotifications() {},
+  notificationStatuses: STATUSES
+});
+function NotificationsProvider(props) {
+  var _useState = React.useState([]),
+    notifications = _useState[0],
+    setNotifications = _useState[1];
+  var showNotification = React.useCallback(function (notification, onClose) {
+    var id = uuid.v4().split('-')[0];
+    var title = '';
+    var text = '';
+    var status = STATUSES.warning;
+    var closeByTime = 4500;
+    var textColor = '';
+    if (typeof notification === 'string') {
+      text = notification;
+    } else if (typeof notification === 'object') {
+      var _notification$id, _notification$title, _notification$text, _notification$status, _notification$closeBy;
+      id = (_notification$id = notification.id) != null ? _notification$id : id;
+      title = (_notification$title = notification.title) != null ? _notification$title : title;
+      text = (_notification$text = notification.text) != null ? _notification$text : text;
+      status = (_notification$status = notification.status) != null ? _notification$status : status;
+      switch (status) {
+        case 'success':
+          textColor = 'successTextPrimary';
+          break;
+        case 'info':
+          textColor = 'infoTextPrimary';
+          break;
+        case 'error':
+          textColor = 'errorTextPrimary';
+          break;
+        case 'warning':
+          textColor = 'warningTextPrimary';
+          break;
+      }
+      closeByTime = (_notification$closeBy = notification.closeByTime) != null ? _notification$closeBy : closeByTime;
+    }
+    setNotifications(function (prevState) {
+      return [].concat(prevState, [{
+        id: id,
+        title: title,
+        text: text,
+        status: status,
+        textColor: textColor,
+        // closeByTime: closeByTime,
+        onClose: onClose
+      }]);
+    });
+    if (closeByTime) {
+      setTimeout(function () {
+        setNotifications(function (prevState) {
+          var currentNotification = prevState.find(function (notification) {
+            return notification.id === id;
+          });
+          if (currentNotification) {
+            if (typeof currentNotification.onClose === 'function') {
+              currentNotification.onClose();
+            }
+            return prevState.filter(function (notification) {
+              return notification.id !== id;
+            });
+          }
+          return prevState;
+        });
+      }, closeByTime);
+    }
+  }, []);
+  var hideNotifications = React.useCallback(function (id) {
+    setNotifications(function (prevState) {
+      return prevState.filter(function (notification) {
+        return notification.id !== id;
+      });
+    });
+  }, []);
+  var notificationsAPI = React.useMemo(function () {
+    return {
+      showNotification: showNotification,
+      hideNotifications: hideNotifications,
+      notificationStatuses: STATUSES
+    };
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
+    value: notificationsAPI
+  }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {
+    value: notifications
+  }, props.children));
+}
+NotificationsProvider.propTypes = {
+  children: PropTypes__default.default.any
+};
+function useNotifications() {
+  return React.useContext(NotificationsContext);
+}
+function useNotificationsAPI() {
+  return React.useContext(NotificationsAPIContext);
+}
+
+exports.NotificationsProvider = NotificationsProvider;
+exports.useNotifications = useNotifications;
+exports.useNotificationsAPI = useNotificationsAPI;

package/dist/context/UIContext.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var useMediaQueries = require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+var UserDeviceContext = /*#__PURE__*/React.createContext({
+  isMobile: false,
+  isTablet: false,
+  isDesktop: false
+});
+var SiteMenuContext = /*#__PURE__*/React.createContext({
+  isSiteMenuOpen: false,
+  setIsSiteMenuOpen: function setIsSiteMenuOpen() {}
+});
+function useUserDeviceContext() {
+  return React.useContext(UserDeviceContext);
+}
+function useSiteMenuContext() {
+  return React.useContext(SiteMenuContext);
+}
+var UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
+  var children = props.children,
+    _props$userDeviceStat = props.userDeviceState,
+    userDeviceState = _props$userDeviceStat === void 0 ? {} : _props$userDeviceStat;
+  var _useState = React.useState(false),
+    isSiteMenuOpen = _useState[0],
+    setIsSiteMenuOpen = _useState[1];
+  var siteMenuContextState = React.useMemo(function () {
+    return {
+      isSiteMenuOpen: isSiteMenuOpen,
+      setIsSiteMenuOpen: setIsSiteMenuOpen
+    };
+  }, [isSiteMenuOpen]);
+  var mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
+  return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
+    value: mediaQueriesDevices
+  }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {
+    value: siteMenuContextState
+  }, children));
+});
+UIProvider.propTypes = {
+  children: PropTypes__default.default.any,
+  userDeviceState: PropTypes__default.default.shape({
+    isMobile: PropTypes__default.default.bool,
+    isTablet: PropTypes__default.default.bool,
+    isDesktop: PropTypes__default.default.bool
+  })
+};
+
+exports.UIProvider = UIProvider;
+exports.useSiteMenuContext = useSiteMenuContext;
+exports.useUserDeviceContext = useUserDeviceContext;

package/dist/css/components/Accordion/Accordion.css

@@ -0,0 +1,65 @@
+.accordion {
+  &__wrapper {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+  }
+}
+.accordion {
+  &_direction {
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: $(val);
+        }
+      }
+    }
+    &_horizontal {
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+    &_vertical {
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+.accordion-item {
+  display: flex;
+  flex-flow: row wrap;
+  &__title {
+    flex: 1;
+    cursor: pointer;
+  }
+  &__icon {
+    margin: 0 0 0 40px;
+    align-self: center;
+    transform-origin: 50% 50%;
+    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  &__content {
+    width: 100%;
+  }
+}
+.accordion-item {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.accordion-item {
+  &&_state_open {
+    ^&__icon {
+      transform: rotate(90deg);
+    }
+  }
+}

package/dist/css/components/Avatar/Avatar.css

@@ -0,0 +1,28 @@
+.avatar {
+  &__wrapper {
+    display: flex;
+    ^&__image {
+    }
+    ^&__data {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+    ^&__icon {
+      padding: 8px 0 0 0;
+      display: flex;
+      gap: 16px;
+    }
+  }
+}
+.avatar{
+  &_size {
+    @each $size in 16, 32, 40, 60, 72, 96, 144, 240 {
+      &_$(size) {
+        ^^&__image {
+          width: $(size)px;
+          height: $(size)px;
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Background/Background.css

@@ -0,0 +1,11 @@
+.background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  &__item {
+    position: absolute;
+  }
+}