@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Image.js

@@ -0,0 +1,480 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var resizeMode = require('../constants/componentProps/resizeMode.js');
+var shape = require('../constants/componentProps/shape.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../hooks/useStyles.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.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 Image(props) {
+  const {
+    after,
+    alt,
+    before,
+    caption,
+    children,
+    className,
+    imageWrapperClassName,
+    imageClassName,
+    mode,
+    overlay,
+    src,
+    title,
+    type,
+    onClick,
+    onError
+  } = props;
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
+  });
+  const horizontalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_horizontal-align_',
+    propsKey: 'horizontalAlign'
+  });
+  const verticalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_vertical-align_',
+    propsKey: 'verticalContentAlign'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_shape_',
+    propsKey: 'shape'
+  });
+  const resizeModeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_resize-mode_',
+    propsKey: 'resizeMode'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'imageWidth'
+  });
+  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'imageHeight'
+  });
+  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  const borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color-image_',
+    propsKey: 'borderColorImage'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const {
+    styles,
+    wrapper: wrapperStyles,
+    image: imageStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass),
+    onClick: onClick,
+    style: styles
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('image__wrapper', imageWrapperClassName),
+    style: wrapperStyles
+  }, /*#__PURE__*/React__default.default.createElement("img", {
+    alt: alt,
+    src: src,
+    style: imageStyles,
+    title: title,
+    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imageClassName, borderClass, borderColorImageClass),
+    onError: onError
+  }), overlay, caption, children), after);
+}
+Image.propTypes = {
+  after: PropTypes__default.default.any,
+  alt: PropTypes__default.default.string,
+  before: PropTypes__default.default.any,
+  border: PropTypes__default.default.string,
+  borderColorImage: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageDesktop: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageMobile: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageTablet: PropTypes__default.default.oneOf(borderColor.default),
+  overlay: PropTypes__default.default.any,
+  caption: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  imageClassName: PropTypes__default.default.string,
+  imgWrapClassName: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  resizeMode: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeDesktop: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeMobile: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeTablet: PropTypes__default.default.oneOf(resizeMode.default),
+  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),
+  src: PropTypes__default.default.string,
+  style: PropTypes__default.default.object,
+  title: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  сontentX: PropTypes__default.default.string,
+  сontentXDesktop: PropTypes__default.default.string,
+  сontentXMobile: PropTypes__default.default.string,
+  сontentXTablet: PropTypes__default.default.string,
+  сontentY: PropTypes__default.default.string,
+  сontentYDesktop: PropTypes__default.default.string,
+  сontentYMobile: PropTypes__default.default.string,
+  сontentYTablet: PropTypes__default.default.string,
+  imageWidth: PropTypes__default.default.oneOf(width.default),
+  imageWidthMobile: PropTypes__default.default.oneOf(width.default),
+  imageWidthTablet: PropTypes__default.default.oneOf(width.default),
+  imageWidthDesktop: PropTypes__default.default.oneOf(width.default),
+  onError: PropTypes__default.default.func
+};
+Image.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Image",
+  "props": {
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "alt": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "border": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderColorImage": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderColorImageDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderColorImageMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderColorImageTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "overlay": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "caption": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "imageClassName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "imgWrapClassName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "resizeMode": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "resizeModeProps"
+      },
+      "required": false
+    },
+    "resizeModeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "resizeModeProps"
+      },
+      "required": false
+    },
+    "resizeModeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "resizeModeProps"
+      },
+      "required": false
+    },
+    "resizeModeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "resizeModeProps"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "src": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "style": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentX": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentXDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentXMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentXTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentY": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentYDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentYMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "\u0441ontentYTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "imageWidth": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "imageWidthMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "imageWidthTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "imageWidthDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "onError": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Image = Image;

package/dist/cjs/components/Input.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+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 clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const inputConfig = {
+  state: {},
+  setState: newComponent => {
+    inputConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputConfig.appearance = newComponent;
+  }
+};
+const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+  const {
+    appearance,
+    state,
+    index,
+    id,
+    dataTestId,
+    type,
+    className,
+    name,
+    placeholder,
+    isDisabled,
+    value,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_shape_',
+    propsKey: 'shape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance]?.shape && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance]?.textSize && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance]?.size && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    disabled: isDisabled,
+    id: id,
+    index: index,
+    placeholder: placeholder,
+    ref: ref,
+    type: type,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  });
+});
+Input.propTypes = {
+  checked: PropTypes__default.default.bool,
+  className: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
+  placeholder: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func
+};
+Input.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+Input.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Input",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'text'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isDisabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Input = Input;
+exports.inputConfig = inputConfig;