ecomlab-components-next 0.1.19 → 0.1.21

package/dist/components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _InputDinamycPlaceholder = _interopRequireDefault(require("./InputDinamycPlaceholder.js"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default = exports["default"] = {
+  title: 'Input dinamyc placeholder',
+  component: _InputDinamycPlaceholder["default"],
+  argTypes: {
+    date: {
+      control: 'date'
+    }
+  },
+  args: _defineProperty({
+    tooltip: 'Подсказка',
+    tooltipStatic: false,
+    rows: false,
+    value: false,
+    changeValue: 'some text',
+    setChangeValue: false,
+    setValue: _addonActions.action,
+    classname: false,
+    placeholder: 'Value',
+    type: 'password',
+    onChange: _addonActions.action,
+    passwordTooltip: true,
+    err: false,
+    textErr: false,
+    infoHeader: 'Ttle',
+    info: false,
+    autoComplete: false,
+    disabled: false,
+    showClearIndicator: true,
+    multiline: false,
+    maxLength: false,
+    autoFocus: false,
+    variant: 'filled',
+    size: 'l',
+    required: true
+  }, "disabled", true)
+};
+var Default = exports.Default = {};

package/dist/components/Inputs/InputDinamycPlaceholder/img/close_grey.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6L6 10" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L10 10" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/Inputs/InputDinamycPlaceholder/img/close_red.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6L6 10" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L10 10" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/Inputs/InputDinamycPlaceholder/img/hide.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6026_10547)">
+<path d="M11.1955 9.06673C11.3232 8.72564 11.3879 8.36424 11.3866 8.00006C11.3866 7.19145 11.0654 6.41595 10.4936 5.84417C9.92187 5.27239 9.14637 4.95117 8.33776 4.95117C7.97806 4.95159 7.62134 5.01631 7.28442 5.14228L7.99998 5.88006C8.10875 5.86266 8.21871 5.85374 8.32887 5.85339C8.90062 5.8522 9.44961 6.07728 9.85598 6.47948C10.2623 6.88168 10.4931 7.42833 10.4978 8.00006C10.4974 8.11022 10.4885 8.22017 10.4711 8.32895L11.1955 9.06673Z" fill="#C5CCD3"/>
+<path d="M14.8778 7.71976C13.4571 4.77935 10.9658 3 8.2089 3C7.45827 3.00197 6.71269 3.13739 6 3.40118L6.67869 4.16578C7.17858 4.02114 7.69259 3.94662 8.2089 3.94395C10.5822 3.94395 12.7405 5.42596 14.0262 7.92271C13.5546 8.84902 12.9293 9.666 12.1841 10.3298L12.7827 11C13.6452 10.2209 14.3615 9.2585 14.8904 8.16814L15 7.94159L14.8778 7.71976Z" fill="#C5CCD3"/>
+<path d="M2.07185 1.75855L3.99172 4.02909C2.77821 4.95315 1.78641 6.2313 1.11192 7.74036L1 7.97964L1.11192 8.224C2.56258 11.3956 5.10662 13.3149 7.92185 13.3149C9.02068 13.3146 10.1052 13.0205 11.0944 12.4545L13.2467 15L14 14.2364L2.80795 1L2.07185 1.75855ZM6.26887 6.72218L9.13146 10.1076C8.80802 10.3444 8.43568 10.4712 8.0553 10.4742C7.77891 10.4742 7.50525 10.4096 7.25006 10.284C6.99487 10.1585 6.7632 9.97447 6.56836 9.74263C6.37353 9.51079 6.21938 9.23567 6.11479 8.9331C6.0102 8.63054 5.95724 8.3065 5.95894 7.97964C5.96379 7.53498 6.07093 7.10027 6.26887 6.72218ZM5.6447 5.984C5.24197 6.65569 5.05321 7.47426 5.11184 8.29476C5.17046 9.11526 5.47269 9.88475 5.96501 10.467C6.45733 11.0492 7.10798 11.4067 7.80176 11.476C8.49553 11.5453 9.18768 11.3221 9.75563 10.8458L10.4444 11.6604C9.64706 12.0634 8.78895 12.2712 7.92185 12.2713C5.49834 12.2713 3.29437 10.6727 1.98146 7.97964C2.61153 6.66018 3.51895 5.55545 4.61589 4.77236L5.6447 5.984Z" fill="#C5CCD3"/>
+</g>
+<defs>
+<clipPath id="clip0_6026_10547">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Inputs/InputDinamycPlaceholder/img/info_tooltip.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5656_80367)">
+<path d="M10.7598 14.667L5.23984 14.667L1.33317 10.7603L1.33317 5.24033L5.23984 1.33366L10.7598 1.33366L14.6665 5.24033L14.6665 10.7603L10.7598 14.667Z" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10.667V8.00033" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.33301H7.99333" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_5656_80367">
+<rect width="16" height="16" fill="white" transform="matrix(-1 0 0 -1 16 16)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Inputs/InputDinamycPlaceholder/img/show.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9598 7.7975C14.9393 7.74813 14.4453 6.57375 13.3468 5.39687C11.8833 3.82875 10.0347 3 8 3C5.96533 3 4.11675 3.82875 2.65316 5.39687C1.55474 6.57375 1.05833 7.75 1.04024 7.7975C1.01371 7.86144 1 7.93064 1 8.00062C1 8.0706 1.01371 8.1398 1.04024 8.20375C1.06066 8.25312 1.55474 9.42688 2.65316 10.6038C4.11675 12.1713 5.96533 13 8 13C10.0347 13 11.8833 12.1713 13.3468 10.6038C14.4453 9.42688 14.9393 8.25312 14.9598 8.20375C14.9863 8.1398 15 8.0706 15 8.00062C15 7.93064 14.9863 7.86144 14.9598 7.7975ZM8 12C6.2045 12 4.63591 11.3006 3.33741 9.92188C2.80462 9.35418 2.35134 8.70685 1.99166 8C2.35124 7.29309 2.80454 6.64574 3.33741 6.07812C4.63591 4.69938 6.2045 4 8 4C9.7955 4 11.3641 4.69938 12.6626 6.07812C13.1964 6.6456 13.6507 7.29295 14.0113 8C13.5907 8.84125 11.7584 12 8 12ZM8 5C7.44621 5 6.90486 5.17595 6.4444 5.50559C5.98394 5.83524 5.62506 6.30377 5.41314 6.85195C5.20121 7.40013 5.14576 8.00333 5.2538 8.58527C5.36184 9.16721 5.62851 9.70176 6.0201 10.1213C6.41169 10.5409 6.9106 10.8266 7.45375 10.9424C7.99689 11.0581 8.55988 10.9987 9.07151 10.7716C9.58315 10.5446 10.0204 10.1601 10.3281 9.66671C10.6358 9.17336 10.8 8.59334 10.8 8C10.7992 7.2046 10.504 6.44202 9.97905 5.87959C9.45411 5.31716 8.74237 5.00083 8 5ZM8 10C7.63081 10 7.26991 9.8827 6.96294 9.66294C6.65596 9.44318 6.41671 9.13082 6.27542 8.76537C6.13414 8.39991 6.09717 7.99778 6.1692 7.60982C6.24123 7.22186 6.41901 6.86549 6.68007 6.58579C6.94112 6.30608 7.27373 6.1156 7.63583 6.03843C7.99793 5.96126 8.37325 6.00087 8.71434 6.15224C9.05543 6.30362 9.34697 6.55996 9.55208 6.88886C9.75719 7.21776 9.86667 7.60444 9.86667 8C9.86667 8.53043 9.67 9.03914 9.31993 9.41421C8.96987 9.78929 8.49507 10 8 10Z" fill="#C5CCD3"/>
+</svg>

package/dist/components/Inputs/TextareaDynamicPlaceholder/TextareaDynamicPlaceholder.js

@@ -0,0 +1,95 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+require("./TextareaDynamicPlaceholder.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var TextareaDynamicPlaceholder = function TextareaDynamicPlaceholder(_ref) {
+  var _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? false : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? false : _ref$height,
+    disabled = _ref.disabled,
+    changeValue = _ref.changeValue,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? false : _ref$onChange,
+    _ref$setChangeValue = _ref.setChangeValue,
+    setChangeValue = _ref$setChangeValue === void 0 ? false : _ref$setChangeValue,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? false : _ref$tooltip;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+  var _useState3 = (0, _react.useState)(changeValue ? changeValue : ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    valueInside = _useState4[0],
+    setValueInside = _useState4[1];
+  var textAreaRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (_onChange) {
+      _onChange(valueInside);
+    }
+  }, [valueInside]);
+  (0, _react.useEffect)(function () {
+    if (changeValue || changeValue === 0 || changeValue === '') {
+      setValueInside(changeValue);
+      if (setChangeValue) {
+        setChangeValue(false);
+      }
+    }
+  }, [changeValue]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "textarea-dynamic-placeholder",
+    style: {
+      width: width ? width : ''
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "textarea-dynamic-placeholder__content",
+    style: {
+      border: isFocus ? '1px solid #57CC6A' : ''
+    },
+    onClick: function onClick(e) {
+      var _textAreaRef$current;
+      return textAreaRef === null || textAreaRef === void 0 || (_textAreaRef$current = textAreaRef.current) === null || _textAreaRef$current === void 0 ? void 0 : _textAreaRef$current.focus();
+    }
+  }, placeholder && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (valueInside === null || valueInside === void 0 ? void 0 : valueInside.length) > 0 ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+  }, /*#__PURE__*/_react["default"].createElement("label", null, placeholder)), /*#__PURE__*/_react["default"].createElement(_material.TextareaAutosize, {
+    ref: textAreaRef,
+    style: {
+      backgroundColor: disabled && !isEdit ? '#e0e0e0' : '',
+      overflow: 'auto'
+    },
+    onFocus: function onFocus(e) {
+      setIsFocus(true);
+    },
+    onBlur: function onBlur(e) {
+      setIsFocus(false);
+    },
+    value: valueInside,
+    disabled: disabled && !isEdit,
+    onChange: function onChange(e) {
+      setValueInside(e.target.value);
+      _onChange(e.target.value);
+    }
+  })), tooltip && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "textarea-dynamic-placeholder__tooltip"
+  }, tooltip));
+};
+var _default = exports["default"] = TextareaDynamicPlaceholder;

package/dist/components/Inputs/TextareaDynamicPlaceholder/TextareaDynamicPlaceholder.scss

@@ -0,0 +1,121 @@
+.textarea-dynamic-placeholder {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 360px;
+
+    &__content {
+        display: flex;
+        width: 100%;
+        min-height: 124px;
+        height: fit-content;
+        padding: 16px 20px;
+        gap: 12px;
+        align-self: stretch;
+        border-radius: 8px;
+        border: 1px solid #EDEFFB;
+        position: relative;
+        background: #FFF;
+        cursor: text;
+
+        &:hover {
+            border: 1px solid #64748B;
+        }
+
+        &:focus {
+            border: 1px solid #57CC6A;
+        }
+
+        .placeholder-dinamyc,
+        .placeholder-dinamyc_min,
+        .placeholder-dinamyc_min-blue {
+            width: 100%;
+            position: absolute;
+            top: calc(18px);
+            left: 18px;
+            pointer-events: none;
+
+            label {
+                position: absolute;
+                color: #64748B;
+                font-family: Inter;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 16px;
+                z-index: 1;
+                transition: 0.3s;
+            }
+
+            &_min,
+            &_min-blue {
+                display: inline-block;
+                top: -5px;
+                z-index: 1;
+                left: 12px;
+
+                label {
+                    position: absolute;
+                    z-index: 0;
+                    color: #53616E;
+                    font-family: Inter;
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 10px;
+                    transition: 0.3s;
+                    padding-left: 6px;
+                    padding-right: 6px;
+
+                    &:after {
+                        content: '';
+                        display: inline-block;
+                        position: absolute;
+                        margin-top: 3px;
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 6px;
+                        background-color: white;
+                        z-index: -1;
+                    }
+                }
+            }
+
+            &_min-blue {
+                label {
+                    color: #0B110B;
+                }
+            }
+        }
+
+        textarea {
+            width: 100%;
+            border: none;
+            outline: none;
+            resize: none;
+            color: #020617;
+            font-family: Inter;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 16px;
+            max-height: 100%;
+            // z-index: 1;
+            transition: 0.3s;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &__tooltip {
+        color: #94A3B8;
+        font-family: Rubik;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
+    }
+}

package/dist/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ClientsAboutUs", {
     return _ClientsAboutUs["default"];
   }
 });
+Object.defineProperty(exports, "FormWithBtn", {
+  enumerable: true,
+  get: function get() {
+    return _FormWithBtn["default"];
+  }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
@@ -73,4 +79,5 @@ var _Questions = _interopRequireDefault(require("./components/ConstructorCompone
 var _TariffPlan = _interopRequireDefault(require("./components/ConstructorComponents/Tariff/TariffPlan"));
 var _VideoBlock = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlock/VideoBlock"));
 var _ArticlesBlock = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock/ArticlesBlock"));
+var _FormWithBtn = _interopRequireDefault(require("./components/ConstructorComponents/FormWithBtn/FormWithBtn"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [
@@ -39,17 +39,21 @@
     "@storybook/nextjs": "^8.5.0",
     "@storybook/react": "^8.5.0",
     "@storybook/test": "^8.5.0",
+    "@mui/material": "6.4.4",
     "eslint": "^9",
     "eslint-config-next": "15.1.5",
     "eslint-plugin-storybook": "^0.11.2",
     "html-react-parser": "^5.2.2",
     "sass": "^1.55.0",
-    "storybook": "^8.5.0"
-
+    "storybook": "^8.5.0",
+    "react-select": "^5.8.0",
+    "imask": "^7.6.1",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0"
   },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"
     ]
   }
-}
+}