intelicoreact 0.2.24 → 0.2.27

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.scss

@@ -0,0 +1,146 @@
+@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+
+.range-slider {
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2px;
+
+    &__label {
+      font-family: "Sarabun";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 18px;
+      letter-spacing: 0.2px;
+      color: #757f8c;
+    }
+
+    &__selected-range {
+      display: flex;
+      align-items: center;
+      padding: 0px 4px 0px 8px;
+      background: #eaf2ff;
+      border-radius: 16px;
+
+      &--text {
+        font-family: "Sarabun";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 18px;
+        letter-spacing: 0.2px;
+        color: #3b414b;
+        margin-right: 2px;
+      }
+
+      &--reset {
+        display: flex;
+        align-items: center;
+        color: #9aa0b9;
+        border-left: 1px solid #cde1ff;
+        cursor: pointer;
+
+        svg {
+          height: 16px;
+          width: 16px;
+        }
+      }
+    }
+  }
+
+  &__inputs {
+    display: flex;
+
+    &--from {
+      margin-right: 4px;
+    }
+
+    &--to {
+      margin-left: 4px;
+    }
+
+    .input__wrap {
+      height: auto;
+      max-height: 40px;
+      box-sizing: border-box;
+
+      padding: 9px 16px;
+      background: #ffffff;
+      border: 1px solid #e1e8f1;
+      border-radius: 6px;
+
+      &_focus {
+        border-color: #166c92;
+        filter: none;
+      }
+
+      input {
+        box-sizing: border-box;
+        font-family: "Sarabun";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 0.2px;
+        color: #171d33;
+        padding: 0;
+      }
+    }
+  }
+
+  &__track {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    margin-top: 2px;
+    position: relative;
+
+    &__line {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: #d6d9e4;
+      border-radius: 4px;
+    }
+    &__range {
+      position: relative;
+      height: 4px;
+      display: flex;
+
+      background: #1f7499;
+      border-radius: 4px;
+      justify-content: space-between;
+
+      &--trigger {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        background: #ffffff;
+        border: 1px solid #1f7499;
+        box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
+        border-radius: 50%;
+        transform: translateY(-50%);
+        top: 50%;
+        box-sizing: border-box;
+        cursor: move;
+
+        &-left {
+          transform: translate(-50%, 0);
+        }
+
+        &-right {
+        }
+      }
+    }
+  }
+}
+
+.moving-cursor {
+  cursor: move!important;
+}

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.stories.scss

@@ -0,0 +1,26 @@
+.desc {
+  margin-top: 16px;
+  padding: 4px 12px;
+  background: #f7f7f7;
+  border-radius: 8px;
+  max-width: 270px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 8px 2px #e9e7e7;
+
+  h4 {
+    margin: 0;
+    padding: 0;
+    padding-bottom: 8px;
+    margin-top: 4px;
+    color: #1f7499;
+    font-size: 14px;
+    line-height: 1;
+    border-bottom: 1px solid #e9e7e7;
+  }
+
+  code {
+    font-size: 12px;
+    line-height: 16px;
+    color: #171d33;
+  }
+}

package/dist/Atomic/UI/Chart/Chart.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _chart = require("chart.js");
+
+var _helpers = require("chart.js/helpers");
+
+var ChartComponents = _interopRequireWildcard(require("react-chartjs-2"));
+
+var _optionsConstructor = require("./partial/optionsConstructor");
+
+var _utils = require("./partial/utils");
+
+var _Chart = require("./partial/Chart.constants");
+
+var _ChartTypeSwitcherIcon = _interopRequireDefault(require("./partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon"));
+
+require("./Chart.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RC = 'chart';
+
+_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement);
+
+var Chart = function Chart(_ref) {
+  var className = _ref.className,
+      initialModel = _ref.initialModel,
+      modelsForSwitch = _ref.modelsForSwitch,
+      setModelExternalValue = _ref.setModelExternalValue,
+      description = _ref.description,
+      customOptions = _ref.customOptions,
+      data = _ref.data;
+  if (!data) return null;
+
+  var correctModelKey = function correctModelKey(key) {
+    return key && _Chart.CHART_TYPES.includes((0, _utils.getChartTypeKey)(key)) ? key : _Chart.DEFAULT_CHART_MODEL;
+  };
+
+  var _ref2 = description || {},
+      label = _ref2.label,
+      value = _ref2.value;
+
+  var _useState = (0, _react.useState)(correctModelKey(initialModel)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      model = _useState2[0],
+      setModel = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(data),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      localData = _useState4[0],
+      setLocalData = _useState4[1];
+
+  var chartRef = (0, _react.useRef)(null);
+
+  var isExcludeDescription = _optionsConstructor.componentOptions.disableDescriptionsFor.includes(model);
+
+  var isExcludeChartTypeSwitcher = _optionsConstructor.componentOptions.disableChartTypeSwitcherFor.includes(model);
+
+  var getChartOptions = function getChartOptions() {
+    return customOptions || (0, _utils.getOptions)(model);
+  };
+
+  var ChartComponent = (0, _react.useCallback)(function (props) {
+    var Component = ChartComponents[(0, _utils.getChartTypeKey)(model)];
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: chartRef
+    }, props));
+  }, [model]);
+  (0, _react.useLayoutEffect)(function () {
+    if (initialModel !== model) setModel(correctModelKey(initialModel));
+  }, [initialModel]);
+  (0, _react.useLayoutEffect)(function () {
+    if (setModelExternalValue) setModelExternalValue(correctModelKey(model));
+  }, [model]);
+  (0, _react.useEffect)(function () {
+    return setLocalData((0, _utils.prepareData)(model, data, chartRef.current));
+  }, [model, data, chartRef]);
+  (0, _react.useEffect)(function () {
+    var _getChartOptions = getChartOptions(),
+        _getChartOptions$notL = _getChartOptions.notLibraryOptions;
+
+    _getChartOptions$notL = _getChartOptions$notL === void 0 ? {} : _getChartOptions$notL;
+    var setCanvasDimensions = _getChartOptions$notL.setCanvasDimensions;
+
+    if (chartRef.current) {
+      var _setCanvasDimensions$, _setCanvasDimensions$2;
+
+      chartRef.current.canvas.parentNode.style.width = (_setCanvasDimensions$ = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.width) !== null && _setCanvasDimensions$ !== void 0 ? _setCanvasDimensions$ : '';
+      chartRef.current.canvas.parentNode.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
+    }
+  }, [model]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _optionsConstructor.iconModels.includes(model)), className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__header"), (0, _defineProperty2.default)({}, "".concat(RC, "__header_only-switcher"), !description))
+  }, description && !isExcludeDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__description"))
+  }, label ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__description-title"))
+  }, label) : null, value ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__description-value"))
+  }, value) : null) : null, !isExcludeChartTypeSwitcher ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__type-switcher"))
+  }, /*#__PURE__*/_react.default.createElement(_ChartTypeSwitcherIcon.default, {
+    iconType: "Bar",
+    isActive: (0, _utils.getChartTypeKey)(model) === 'Bar',
+    onClick: function onClick() {
+      return setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[0]) || 'barLayout');
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ChartTypeSwitcherIcon.default, {
+    iconType: "Line",
+    isActive: (0, _utils.getChartTypeKey)(model) === 'Line',
+    onClick: function onClick() {
+      return setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[1]) || 'lineLayout');
+    }
+  })) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__chart-wrapper"))
+  }, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(), {
+    data: localData
+  }))));
+};
+
+var _default = Chart;
+exports.default = _default;

package/dist/Atomic/UI/Chart/Chart.scss

@@ -0,0 +1,57 @@
+
+.chart {
+  box-sizing: border-box;
+  position: relative;
+  height: fit-content;
+  padding: 24px;
+
+  &__header {
+    margin-bottom: 24px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &_only-switcher {
+      justify-content: flex-end;
+    }
+  }
+
+  &__description {
+    flex-grow: 1;
+    padding-left: 24px;
+
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  &__type-switcher {
+    width: fit-content;
+    height: fit-content;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    &-icon {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // не менять положение этого/этих классов, класс-модификаторы должны быть внизу
+  &_icon-mode {
+    width: fit-content;
+    padding: 0;
+
+    .chart__header {
+      margin-bottom: 0;
+    }
+  }
+}

package/dist/Atomic/UI/Chart/partial/AnyOuterClass.scss

@@ -0,0 +1,38 @@
+.any-outer-class__chart:not(.chart_icon-mode) {
+  max-width: 806px;
+
+  background: #FFFFFF;
+  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+}
+
+
+.any-outer-class__chart {
+  .chart__description-title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #3B414B;
+  }
+  .chart__description-value {
+    span {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 30px;
+      letter-spacing: 0.359794px;
+      color: #3B414B;
+
+      
+
+      &:last-child {
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        color: #757F8C;
+      }
+    }
+  }
+}

package/dist/Atomic/UI/Chart/partial/Chart.constants.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRADIENT_OBJECTS = exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = exports.DEFAULT_CHART_MODEL = exports.CHART_TYPES = void 0;
+var CHART_TYPES = ['Bar', 'Line'];
+exports.CHART_TYPES = CHART_TYPES;
+var DEFAULT_CHART_MODEL = 'barLayout';
+exports.DEFAULT_CHART_MODEL = DEFAULT_CHART_MODEL;
+var FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ['#53D1AD', '#389AA3'];
+exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = FINTURF_ADD_GRADIENT_COLORS_POSITIVE;
+var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ['#FDB4DB', '#FA2E69'];
+exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = FINTURF_ADD_GRADIENT_COLORS_NEGATIVE;
+var GRADIENT_OBJECTS = {
+  finturf: {
+    bar: {
+      gradientTargetPropertyName: 'backgroundColor',
+      colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
+      direction: 'toBottom',
+      typeDistributionOfGradientPoints: 'personalBase'
+    },
+    line: {
+      gradientTargetPropertyName: 'borderColor',
+      colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
+      direction: 'toRight'
+    }
+  }
+};
+exports.GRADIENT_OBJECTS = GRADIENT_OBJECTS;

package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+require("./ChartTypeSwitcherIcon.scss");
+
+var RC = 'chart__type-switcher-icon';
+
+var getIcon = function getIcon(type) {
+  switch (type) {
+    case 'Bar':
+      return /*#__PURE__*/_react.default.createElement("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 25",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/_react.default.createElement("rect", {
+        y: "0.5",
+        width: "24",
+        height: "24",
+        rx: "4",
+        fill: "#EAF2FF"
+      }), /*#__PURE__*/_react.default.createElement("path", {
+        d: "M18 18V11",
+        stroke: "#1F7499",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }), /*#__PURE__*/_react.default.createElement("path", {
+        d: "M12 18V6",
+        stroke: "#1F7499",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }), /*#__PURE__*/_react.default.createElement("path", {
+        d: "M6 18V13",
+        stroke: "#1F7499",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }));
+
+    case 'Line':
+      return /*#__PURE__*/_react.default.createElement("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 25",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/_react.default.createElement("rect", {
+        y: "0.5",
+        width: "24",
+        height: "24",
+        rx: "4",
+        fill: "#EAF2FF"
+      }), /*#__PURE__*/_react.default.createElement("path", {
+        d: "M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818 13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17",
+        stroke: "#1F7499",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }));
+
+    default:
+      return null;
+  }
+};
+
+var ChartTypeSwitcherIcon = function ChartTypeSwitcherIcon(_ref) {
+  var iconType = _ref.iconType,
+      isActive = _ref.isActive,
+      className = _ref.className,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_active"), isActive), className),
+    onClick: onClick
+  }, getIcon(iconType));
+};
+
+var _default = ChartTypeSwitcherIcon;
+exports.default = _default;

package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.scss

@@ -0,0 +1,18 @@
+.chart__type-switcher-icon {
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+  &_active {
+    svg rect{
+      fill: #1F7499;
+    }
+    svg path {
+      stroke: white;
+    }
+  }
+}