@itcase/ui 1.0.1

package/dist/components/MenuItem.js

@@ -0,0 +1,209 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$1 = require('./Text.js');
+var index = require('./Link.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var textColorActive = require('../constants/componentProps/textColorActive.js');
+var textColorHover = require('../constants/componentProps/textColorHover.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textGradient = require('../constants/componentProps/textGradient.js');
+var textStyle = require('../constants/componentProps/textStyle.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var type = require('../constants/componentProps/type.js');
+var underline = require('../constants/componentProps/underline.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var size = require('../constants/componentProps/size.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function MenuItem(props) {
+  var isActive = props.isActive,
+    after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    href = props.href,
+    link = props.link,
+    set = props.set,
+    rel = props.rel,
+    desc = props.desc,
+    descTextGradient = props.descTextGradient,
+    descTextSize = props.descTextSize,
+    descTextWeight = props.descTextWeight,
+    descTextColor = props.descTextColor,
+    descTextWrap = props.descTextWrap,
+    descTextColorHover = props.descTextColorHover,
+    descTextStyle = props.descTextStyle,
+    label = props.label,
+    target = props.target,
+    textColor = props.textColor,
+    textColorHover = props.textColorHover,
+    textColorActive = props.textColorActive,
+    textGradient = props.textGradient,
+    textSize = props.textSize,
+    textWrap = props.textWrap,
+    textStyle = props.textStyle,
+    textWeight = props.textWeight,
+    underline = props.underline,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter;
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'menu-item_direction_',
+    propsKey: 'direction'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_hover_',
+    propsKey: 'fillActiveHover'
+  });
+  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  var linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'linkFill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'menu-item_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'menu-item_shape_',
+    propsKey: 'shape'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'menu-item_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'menu-item_type_',
+    propsKey: 'type'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    menuItem = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', directionClass, className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_" + set, justifyContentClass),
+    style: menuItem,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, /*#__PURE__*/React__default.default.createElement(index.Link, {
+    href: link || href,
+    className: clsx__default.default('menu-item__label', alignDirectionClass, alignClass),
+    underline: underline,
+    fill: linkFillClass,
+    target: target,
+    rel: rel
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "menu-item__label",
+    textColorActive: isActive && textColorActive,
+    textGradient: textGradient,
+    size: textSize,
+    textWeight: textWeight,
+    textColor: textColor,
+    textWrap: textWrap,
+    textColorHover: textColorHover,
+    textStyle: textStyle
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "menu-item__desc",
+    textGradient: descTextGradient,
+    size: descTextSize,
+    textWeight: descTextWeight,
+    textColor: descTextColor,
+    textWrap: descTextWrap,
+    textColorHover: descTextColorHover,
+    textStyle: descTextStyle
+  }, desc)), after)));
+}
+MenuItem.propTypes = {
+  before: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  linkFill: PropTypes__default.default.oneOf(fill.default),
+  linkFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  linkFillMobile: PropTypes__default.default.oneOf(fill.default),
+  linkFillTablet: PropTypes__default.default.oneOf(fill.default),
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  labelSize: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  LinkComponent: PropTypes__default.default.any,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  target: PropTypes__default.default.string,
+  rel: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  textColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  textGradient: PropTypes__default.default.oneOf(textGradient.default),
+  textSize: PropTypes__default.default.oneOf(size.default),
+  textWrap: PropTypes__default.default.string,
+  textStyle: PropTypes__default.default.oneOf(textStyle.default),
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  type: PropTypes__default.default.oneOf(type.default),
+  typeDesktop: PropTypes__default.default.oneOf(type.default),
+  typeMobile: PropTypes__default.default.oneOf(type.default),
+  typeTablet: PropTypes__default.default.oneOf(type.default),
+  title: PropTypes__default.default.string,
+  underline: PropTypes__default.default.oneOf(underline.default)
+};
+MenuItem.defaultProps = {
+  size: 'm',
+  LinkComponent: 'a',
+  direction: 'horizontal'
+};
+
+exports.MenuItem = MenuItem;

package/dist/components/Modal.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var ReactDOM = require('react-dom');
+var clsx = require('clsx');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var Modal = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    classNameWrapper = props.classNameWrapper,
+    onOpen = props.onOpen,
+    onClose = props.onClose,
+    containerRef = props.containerRef;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = React.useState(null),
+    modalsNode = _useState2[0],
+    setModalsNode = _useState2[1];
+  var open = React.useCallback(function () {
+    setIsOpen(true);
+    onOpen && onOpen();
+  }, [onOpen]);
+  var close = React.useCallback(function () {
+    setIsOpen(false);
+    onClose && onClose();
+  }, [onClose]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      isOpen: isOpen,
+      open: open,
+      close: close
+    };
+  });
+  React.useEffect(function () {
+    setModalsNode(document.getElementById('modals'));
+  }, []);
+  if (!isOpen || !(modalsNode || containerRef)) {
+    return null;
+  }
+  return /*#__PURE__*/ReactDOM__default.default.createPortal( /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('modal', className),
+    onClick: close
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('modal__wrapper', classNameWrapper),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children)), (containerRef == null ? void 0 : containerRef.current) || modalsNode);
+});
+Modal.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  classNameWrapper: PropTypes__default.default.string,
+  containerRef: PropTypes__default.default.any,
+  onClose: PropTypes__default.default.func,
+  onOpen: PropTypes__default.default.func
+};
+Modal.displayName = 'Modal';
+
+exports.Modal = Modal;

package/dist/components/Notification.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Title.js');
+var index$1 = require('./Text.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../context/UIContext.js');
+var Notifications = require('../context/Notifications.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../useStyles-77c3b520.js');
+require('../hooks/styleAttributes.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+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 clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function NotificationItem(props) {
+  var after = props.after,
+    before = props.before,
+    set = props.set;
+    props.status;
+    var size = props.size,
+    text = props.text,
+    textColor = props.textColor,
+    textSize = props.textSize,
+    title = props.title,
+    titleColor = props.titleColor,
+    titleSize = props.titleSize,
+    type = props.type;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'status'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('notification__item', type && "notification_set_" + type, set && "notification_set_" + set, size && "notification_set_" + size, fillClass && fillClass + "-primary", fillHoverClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-wrapper"
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-text"
+  }, /*#__PURE__*/React__default.default.createElement(index.Title, {
+    size: titleSize,
+    textColor: titleColor
+  }, title), /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    size: textSize,
+    textColor: textColor
+  }, text)), after));
+}
+NotificationItem.propTypes = {
+  className: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  status: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.string,
+  textSize: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleColor: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any
+};
+
+function NotificationList(props) {
+  var notifications = Notifications.useNotifications();
+  var _useNotificationsAPI = Notifications.useNotificationsAPI(),
+    hideNotifications = _useNotificationsAPI.hideNotifications;
+  var className = props.className,
+    size = props.size,
+    textColor = props.textColor,
+    textSize = props.textSize,
+    titleColor = props.titleColor,
+    titleSize = props.titleSize,
+    set = props.set;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('notification', className)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__wrapper"
+  }, notifications.map(function (notification, i) {
+    return /*#__PURE__*/React__default.default.createElement(NotificationItem, {
+      key: i,
+      textColor: notification.textColor || textColor,
+      textSize: textSize,
+      set: set,
+      size: size,
+      titleColor: titleColor,
+      titleSize: titleSize,
+      title: notification.title,
+      text: notification.text,
+      status: notification.status,
+      onClick: hideNotifications
+    });
+  })));
+}
+NotificationList.propTypes = {
+  className: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.string,
+  textSize: PropTypes__default.default.string,
+  titleColor: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string
+};
+
+exports.NotificationItem = NotificationItem;
+exports.NotificationList = NotificationList;

package/dist/components/Pagination.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var React = require('react');
+require('prop-types');
+var clsx = require('clsx');
+var ReactPaginate = require('react-paginate');
+var index = require('./Icon.js');
+var index$1 = require('../index-f1505c84.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-77c3b520.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
+
+function Pagination(props) {
+  var className = props.className,
+    forcePage = props.forcePage,
+    pageCount = props.pageCount,
+    marginPagesDisplayed = props.marginPagesDisplayed,
+    pageRangeDisplayed = props.pageRangeDisplayed,
+    onPageChange = props.onPageChange;
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'pagination_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  return /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
+    containerClassName: clsx__default.default(className, 'pagination', justifyContentClass)
+    // page item
+    ,
+    pageClassName: "pagination__item",
+    pageLinkClassName: "pagination__item-link",
+    disabledClassName: "pagination__item_state_disabled",
+    disabledLinkClassName: "pagination__item_state_disabled",
+    activeClassName: "pagination__item_state_active",
+    activeLinkClassName: "pagination__item-link_state_active"
+    // previous button
+    ,
+    previousLabel: /*#__PURE__*/React__default.default.createElement(index.Icon, {
+      fill: "surfaceItemPrimary",
+      SvgImage: index$1.icon24.doubleArrowLeft,
+      size: "24"
+    }),
+    previousClassName: "pagination__item pagination__item_previous",
+    previousLinkClassName: "pagination__item-link"
+    // next button
+    ,
+    nextLabel: /*#__PURE__*/React__default.default.createElement(index.Icon, {
+      fill: "surfaceItemPrimary",
+      SvgImage: index$1.icon24.doubleArrowRight,
+      size: "24"
+    }),
+    nextClassName: "pagination__item pagination__item_next",
+    nextLinkClassName: "pagination__item-link"
+    // break element
+    ,
+    breakLabel: "...",
+    breakClassName: "pagination__item pagination__item_break",
+    breakLinkClassName: "pagination__item-link"
+    // pages settings
+    ,
+    forcePage: forcePage,
+    pageCount: pageCount,
+    marginPagesDisplayed: marginPagesDisplayed,
+    pageRangeDisplayed: pageRangeDisplayed,
+    onPageChange: onPageChange
+  });
+}
+
+exports.Pagination = Pagination;