ecomlab-components-next 0.1.159 → 0.1.162

package/dist/components/ArticleMain/ArticleMain.js

@@ -0,0 +1,451 @@
+"use strict";
+
+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.fetchArticlesByPortal = exports["default"] = void 0;
+var _headers = _interopRequireDefault(require("../../common/headers"));
+var _TableBox = _interopRequireDefault(require("../../stories/TableBox/TableBox"));
+var _ArticleMinBox = _interopRequireDefault(require("../../stories/ArticleMinBox/ArticleMinBox"));
+var _navigation = require("next/navigation");
+var _reactSpinners = require("react-spinners");
+var _Paginator = require("../../stories/Paginator/Paginator");
+var _fetchUrls = require("../../common/fetchUrls");
+var _utils = require("../../common/utils");
+var _react = require("react");
+require("./ArticleMain.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+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 fetchArticlesByPortal = exports.fetchArticlesByPortal = function fetchArticlesByPortal(handleResponseJson, setLoading, activeLang, page, limit, params, orderParam, orderParamDirection) {
+  setLoading(true);
+  var abortController = new AbortController();
+  var filters = null,
+    _;
+  if (params !== null && params !== void 0 && params.length) {
+    var _params = _slicedToArray(params, 2);
+    _ = _params[0];
+    filters = _params[1];
+  }
+  var url = "".concat(_fetchUrls.RavshanArticlesHttps, "/get_articles_by_portal");
+  var getHeaders = _objectSpread(_objectSpread({}, _headers["default"]), {}, {
+    "level-id": PORTAL_ID,
+    "language": activeLang === null || activeLang === void 0 ? void 0 : activeLang.toLowerCase(),
+    "page": page,
+    "limit": limit !== null && limit !== void 0 ? limit : 10,
+    "status": "active",
+    "with-status": false
+  });
+  if (orderParam) Object.assign(getHeaders, {
+    "order-param": btoa(encodeURI(orderParam))
+  });
+  if (orderParamDirection) Object.assign(getHeaders, {
+    "order-param-direction": orderParamDirection
+  });
+  if (filters && filters.length) Object.assign(getHeaders, {
+    "filters": btoa(encodeURI(JSON.stringify({
+      filters: filters
+    })))
+  });
+  fetch(url, {
+    headers: getHeaders,
+    signal: abortController.signal
+  }).then(function (response) {
+    return (0, _utils.handleApiResponseOrThrow)(response);
+  }).then(function (json) {
+    return handleResponseJson(json);
+  })["catch"](function (error) {
+    return console.error(error);
+  })["finally"](function () {
+    return setLoading(false);
+  });
+  return abortController;
+};
+var ArticleMain = function ArticleMain(_ref) {
+  var _articles$data, _paginatorRef$current;
+  var selectedEndLevelValue = _ref.selectedEndLevelValue,
+    selectedPortalValue = _ref.selectedPortalValue,
+    activeLang = _ref.activeLang,
+    pathBread = _ref.pathBread,
+    setTags = _ref.setTags,
+    setSelectedTags = _ref.setSelectedTags,
+    selectedTags = _ref.selectedTags,
+    setTotalParent = _ref.setTotalParent,
+    selectView = _ref.selectView,
+    paginatorCallback = _ref.paginatorCallback,
+    sortingRef = _ref.sortingRef,
+    PORTAL_ID = _ref.PORTAL_ID,
+    BASE_ROUTE = _ref.BASE_ROUTE,
+    paths = _ref.paths,
+    sidebarState = _ref.sidebarState;
+  var params = (0, _navigation.useParams)();
+  console.log(params);
+  // const path = useParams()['*']
+  var path = '';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    articles = _useState4[0],
+    setArticles = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    waiting = _useState6[0],
+    setWaiting = _useState6[1];
+  var _useState7 = (0, _react.useState)(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    initialRender = _useState8[0],
+    setInitialRender = _useState8[1];
+  var paginatorRef = (0, _react.useRef)();
+  var tableFetchCallback = (0, _react.useRef)();
+  var tagsRef = (0, _react.useRef)();
+  var refTableBox = (0, _react.useRef)();
+  var isBaseRoute = path === '';
+  var tableHeaders = articles === null || articles === void 0 ? void 0 : articles.labels;
+  var tableData = (_articles$data = articles === null || articles === void 0 ? void 0 : articles.data) !== null && _articles$data !== void 0 ? _articles$data : [];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    columnSize = _useState10[0],
+    setColumnSize = _useState10[1];
+  var _useState11 = (0, _react.useState)({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    sort = _useState12[0],
+    setSort = _useState12[1];
+  var _useState13 = (0, _react.useState)(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    top = _useState14[0],
+    setTop = _useState14[1];
+  var _useState15 = (0, _react.useState)(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    heightHeader = _useState16[0],
+    setHeightHeader = _useState16[1];
+  var _usePagination = (0, _Paginator.usePagination)(paginatorCallback.current, [], (_paginatorRef$current = paginatorRef.current) === null || _paginatorRef$current === void 0 ? void 0 : _paginatorRef$current.params),
+    _usePagination2 = _slicedToArray(_usePagination, 7),
+    page = _usePagination2[0],
+    limit = _usePagination2[1],
+    total = _usePagination2[2],
+    setTotal = _usePagination2[3],
+    Paginator = _usePagination2[4],
+    resetPaginator = _usePagination2[5],
+    paginatorTransition = _usePagination2[6];
+  var saveWidthColumn = function saveWidthColumn() {
+    if (selectView == 'Table') {
+      var colWidth = _toConsumableArray(document.querySelectorAll('.col-th-border'));
+      if (colWidth.length > 0) {
+        var arrWidth = colWidth.map(function (el) {
+          return el.style.width ? el.style.width : '247px';
+        });
+        sessionStorage.setItem('col-width', arrWidth);
+      }
+    }
+  };
+  var fetchArticlesByLevel = function fetchArticlesByLevel(value, page, limit, params) {
+    var _sorting, _sorting2;
+    saveWidthColumn();
+    setArticles({
+      data: [],
+      label: {}
+    });
+    setLoading(true);
+    var abortController = new AbortController();
+    var url = "".concat(_fetchUrls.RavshanArticlesHttps, "/get_articles_by_parents");
+    var filters = null,
+      sorting = null;
+    if (params !== null && params !== void 0 && params.length) {
+      var _params2 = _slicedToArray(params, 2);
+      sorting = _params2[0];
+      filters = _params2[1];
+    }
+    var orderParam = selectView === "Table" ? (_sorting = sorting) !== null && _sorting !== void 0 && _sorting.length ? sorting[0] : '' : sortingRef.current ? sortingRef.current.param : '';
+    var orderParamDirection = selectView === "Table" ? (_sorting2 = sorting) !== null && _sorting2 !== void 0 && _sorting2.length ? sorting[1] : '' : sortingRef.current ? sortingRef.current.direction : '';
+    var getHeaders = _objectSpread(_objectSpread({}, _headers["default"]), {}, {
+      "level-id": value,
+      "language": activeLang === null || activeLang === void 0 ? void 0 : activeLang.toLowerCase(),
+      "page": page,
+      "limit": limit !== null && limit !== void 0 ? limit : 10,
+      "status": "active",
+      'with-status': false
+    });
+    if (orderParam) Object.assign(getHeaders, {
+      "order-param": btoa(encodeURI(orderParam))
+    });
+    if (orderParamDirection) Object.assign(getHeaders, {
+      "order-param-direction": orderParamDirection
+    });
+    if (filters && filters.length) Object.assign(getHeaders, {
+      "filters": btoa(encodeURI(JSON.stringify({
+        filters: filters
+      })))
+    });
+    fetch(url, {
+      headers: getHeaders,
+      signal: abortController.signal
+    }).then(function (res) {
+      return (0, _utils.handleApiResponseOrThrow)(res);
+    }).then(function (json) {
+      if (!Object.entries(json).length) return;
+      setTotal(json.total);
+      setTotalParent(json.total);
+      setArticles(json);
+      setColumnSize(json.column_size);
+      if (json.labels.sort) setSort(json.labels.sort);
+    })["catch"](function (err) {
+      return console.error(err);
+    })["finally"](function () {
+      return setLoading(false);
+    });
+    return abortController;
+  };
+  var fetchAllPortalsArticles = function fetchAllPortalsArticles(page, limit, params) {
+    var _sorting3, _sorting4;
+    saveWidthColumn();
+    setArticles({
+      data: [],
+      label: {}
+    });
+    var sorting = null;
+    if (params !== null && params !== void 0 && params.length) {
+      var _params3 = _slicedToArray(params, 1);
+      sorting = _params3[0];
+    }
+    var orderParam = selectView === "Table" ? (_sorting3 = sorting) !== null && _sorting3 !== void 0 && _sorting3.length ? sorting[0] : '' : sortingRef.current ? sortingRef.current.param : '';
+    var orderParamDirection = selectView === "Table" ? (_sorting4 = sorting) !== null && _sorting4 !== void 0 && _sorting4.length ? sorting[1] : '' : sortingRef.current ? sortingRef.current.direction : '';
+    return fetchArticlesByPortal(function (json) {
+      if (!Object.entries(json).length) return;
+      setTotal(json.total);
+      setTotalParent(json.total);
+      setArticles(json);
+      setColumnSize(json.column_size);
+      if (json.labels.sort) setSort(json.labels.sort);
+    }, setLoading, activeLang, page, limit, params, orderParam, orderParamDirection);
+  };
+  var setArrayResponseToFilterData = function setArrayResponseToFilterData(data, set) {
+    var _data$label, _data$label2, _data$data;
+    var idIndex = (_data$label = data.label) === null || _data$label === void 0 ? void 0 : _data$label.header.findIndex(function (h) {
+      return h === "id";
+    });
+    var nameIndex = (_data$label2 = data.label) === null || _data$label2 === void 0 ? void 0 : _data$label2.header.findIndex(function (h) {
+      return h === "name";
+    });
+    set((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (el) {
+      return {
+        label: el[nameIndex],
+        value: el[idIndex]
+      };
+    }));
+  };
+  var fetchAllTags = function fetchAllTags() {
+    fetch("".concat(_fetchUrls.RavshanArticlesHttps, "/get_all_tag"), {
+      headers: _headers["default"]
+    }).then(function (response) {
+      return (0, _utils.handleApiResponseOrThrow)(response);
+    }).then(function (json) {
+      return setArrayResponseToFilterData(json, setTags);
+    })["catch"](function (error) {
+      return console.error(error);
+    });
+  };
+  var fetchArticlesByTags = function fetchArticlesByTags(page, limit, params) {
+    var _sorting5, _sorting6;
+    saveWidthColumn();
+    setLoading(true);
+    setArticles({
+      data: [],
+      label: {}
+    });
+    var url = "".concat(_fetchUrls.RavshanArticlesHttps, "/get_articles_by_tag");
+    var filters = null,
+      sorting = null;
+    if (params !== null && params !== void 0 && params.length) {
+      var _params4 = _slicedToArray(params, 2);
+      sorting = _params4[0];
+      filters = _params4[1];
+    }
+    var orderParam = selectView === "Table" ? (_sorting5 = sorting) !== null && _sorting5 !== void 0 && _sorting5.length ? sorting[0] : '' : sortingRef.current ? sortingRef.current.param : '';
+    var orderParamDirection = selectView === "Table" ? (_sorting6 = sorting) !== null && _sorting6 !== void 0 && _sorting6.length ? sorting[1] : '' : sortingRef.current ? sortingRef.current.direction : '';
+    var getHeaders = _objectSpread(_objectSpread({}, _headers["default"]), {}, {
+      "language": activeLang === null || activeLang === void 0 ? void 0 : activeLang.toLowerCase(),
+      "tags": JSON.stringify({
+        tags: selectedTags
+      }),
+      "page": page,
+      "limit": limit !== null && limit !== void 0 ? limit : 10,
+      "status": "active",
+      "with-status": false
+    });
+    if (orderParam) Object.assign(getHeaders, {
+      "order-param": btoa(encodeURI(orderParam))
+    });
+    if (orderParamDirection) Object.assign(getHeaders, {
+      "order-param-direction": orderParamDirection
+    });
+    if (filters && filters.length) Object.assign(getHeaders, {
+      "filters": btoa(encodeURI(JSON.stringify({
+        filters: filters
+      })))
+    });
+    fetch(url, {
+      headers: getHeaders
+    }).then(function (response) {
+      return (0, _utils.handleApiResponseOrThrow)(response);
+    }).then(function (json) {
+      if (!Object.entries(json).length) return;
+      setTotal(json.total);
+      setTotalParent(json.total);
+      setArticles(json);
+      setColumnSize(json.column_size);
+      if (json.labels.sort) setSort(json.labels.sort);
+    })["catch"](function (error) {
+      return console.error(error);
+    })["finally"](function () {
+      return setLoading(false);
+    });
+  };
+  (0, _react.useEffect)(function () {
+    saveWidthColumn();
+  }, [page, limit]);
+  (0, _react.useEffect)(function () {
+    setInitialRender(false);
+    fetchAllTags([]);
+  }, []);
+  (0, _react.useEffect)(function () {
+    resetPaginator();
+  }, [path, activeLang]);
+  (0, _react.useEffect)(function () {
+    if (selectedTags !== null && selectedTags !== void 0 && selectedTags.length) {
+      paginatorCallback.current = function (page, limit, filters) {
+        return fetchArticlesByTags(page, limit, filters);
+      };
+      tableFetchCallback.current = function (filters) {
+        return fetchArticlesByTags(page, limit, filters);
+      };
+      fetchArticlesByTags(1, limit);
+    }
+    if (isBaseRoute && (selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.length) === 0 && tagsRef.current !== selectedTags && !initialRender) {
+      var _paginatorRef$current2;
+      paginatorCallback.current = function (page, limit, filters) {
+        return fetchAllPortalsArticles(page, limit, filters);
+      };
+      tableFetchCallback.current = function (filters) {
+        return fetchAllPortalsArticles(page, limit, filters);
+      };
+      fetchAllPortalsArticles(1, limit, (_paginatorRef$current2 = paginatorRef.current) === null || _paginatorRef$current2 === void 0 ? void 0 : _paginatorRef$current2.params);
+    }
+    tagsRef.current = selectedTags;
+  }, [selectView]);
+  (0, _react.useEffect)(function () {
+    paginatorCallback.current = function (filters) {
+      return fetchArticlesByLevel(selectedEndLevelValue, page, limit, filters);
+    };
+    if (waiting) setWaiting(false);
+    if (isBaseRoute || paginatorTransition) return;
+    if (selectedEndLevelValue) {
+      var _paginatorRef$current3;
+      paginatorCallback.current = function (filters) {
+        return fetchArticlesByLevel(selectedEndLevelValue, page, limit, filters);
+      };
+      tableFetchCallback.current = function (filters) {
+        return fetchArticlesByLevel(selectedEndLevelValue, page, limit, filters);
+      };
+      fetchArticlesByLevel(selectedEndLevelValue, page, limit, (_paginatorRef$current3 = paginatorRef.current) === null || _paginatorRef$current3 === void 0 ? void 0 : _paginatorRef$current3.params, sortingRef);
+    }
+    // уровень не может быть равен нулю если адрес страницы отличается от дефолтного, поэтому ждём пока прогрузится сайдбар
+    else {
+      setTimeout(setWaiting(true), 1000);
+      return;
+    }
+  }, [path, waiting, selectedEndLevelValue, selectedPortalValue, paginatorTransition, selectView, page, limit, sortingRef.current]);
+  (0, _react.useEffect)(function () {
+    if (isBaseRoute && selectedTags.length === 0) {
+      var _paginatorRef$current4;
+      paginatorCallback.current = function (page, limit, filters) {
+        return fetchAllPortalsArticles(page, limit, filters);
+      };
+      tableFetchCallback.current = function (filters) {
+        return fetchAllPortalsArticles(page, limit, filters);
+      };
+      fetchAllPortalsArticles(1, limit, (_paginatorRef$current4 = paginatorRef.current) === null || _paginatorRef$current4 === void 0 ? void 0 : _paginatorRef$current4.params);
+      setSelectedTags([]);
+    }
+  }, [path, activeLang, selectView]);
+  var scroll = function scroll() {
+    var tableBox = refTableBox === null || refTableBox === void 0 ? void 0 : refTableBox.current;
+    var header = document.querySelector('.header');
+    var heightHeader = header.getBoundingClientRect().height;
+    setHeightHeader(heightHeader);
+    setTop(tableBox === null || tableBox === void 0 ? void 0 : tableBox.getBoundingClientRect().top);
+  };
+  (0, _react.useEffect)(function () {
+    window.addEventListener("scroll", scroll);
+    return function () {
+      return window.removeEventListener("scroll", scroll);
+    };
+  }, []);
+
+  // useEffect(() => {
+  //     sidebarState
+  //     if (sidebarState?.length > 0 && !paths) {
+  //         sidebarState
+  //         navigate('/404')
+  //     }
+
+  // }, [path]);
+
+  // useEffect(() => {
+  //     if (typeof paginatorCallback.current === 'function' && !initialRender) {
+  //         paginatorCallback.current(page, limit)
+  //     }
+  // }, [sortingRef.current]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "article-main"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "content-and-filter"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, selectView === "Table" ? /*#__PURE__*/React.createElement("div", {
+    className: "table-box",
+    ref: refTableBox
+  }, /*#__PURE__*/React.createElement(_TableBox["default"], {
+    ref: paginatorRef,
+    fetchedData: tableData,
+    headers: tableHeaders,
+    columnSize: columnSize,
+    fetchCallback: function fetchCallback(e) {
+      resetPaginator();
+      tableFetchCallback.current(e);
+    },
+    sort: sort,
+    loading: loading,
+    topHeader: top < heightHeader - 50 ? top > -50 ? heightHeader - top - 50 : heightHeader : 0
+  }), Paginator) : loading ? /*#__PURE__*/React.createElement("div", {
+    className: "loader-box"
+  }, /*#__PURE__*/React.createElement(_reactSpinners.MoonLoader, {
+    className: "loader",
+    color: "#7b7b7b",
+    speedMultiplier: 0.5,
+    size: 65
+  })) : /*#__PURE__*/React.createElement(_ArticleMinBox["default"], {
+    activeLang: activeLang,
+    articlesData: articles,
+    selectView: selectView,
+    paginator: Paginator,
+    hideInfo: (path === null || path === void 0 ? void 0 : path.indexOf('Вопрос-ответ')) >= 0,
+    BASE_ROUTE: BASE_ROUTE
+  }))));
+};
+var _default = exports["default"] = ArticleMain;

package/dist/components/ArticleMain/ArticleMain.scss

@@ -0,0 +1,220 @@
+.content-and-filter {
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.article-box {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 20px;
+
+    .article-box-short {
+        row-gap: 24px;
+        column-gap: 24px;
+    }
+
+    .paginator {
+        background-color: #fff;
+    }
+}
+
+.table-box {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+
+    .scrollbar {
+        margin-top: -14px;
+    }
+}
+
+.article-template__content-article {
+    width: auto;
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+.select-box {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+
+    .text {
+        white-space: nowrap;
+        font-size: 12px;
+    }
+}
+
+.loader-box {
+    margin-top: 120px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.article-main {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+
+    &__header {
+        display: flex;
+        gap: 24px;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 40px;
+
+        .input-dynamic-width-bar {
+            max-width: 400px;
+            width: 100%;
+            margin-left: auto;
+        }
+    }
+
+    .toolbar-top {
+        display: flex;
+        width: 100%;
+        column-gap: 40px;
+        row-gap: 16px;
+        flex-wrap: wrap;
+
+        .filter-group,
+        .btn-group {
+            display: flex;
+            column-gap: 24px;
+            row-gap: 16px;
+            align-items: center;
+            width: 100%;
+            flex-wrap: wrap;
+
+            &__header {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                gap: 24px;
+                width: 100%;
+
+                &__group {
+                    display: flex;
+                    align-items: center;
+                    gap: 24px;
+
+                    .text {
+                        white-space: nowrap;
+                        font-size: 12px;
+                    }
+                }
+            }
+
+        }
+
+        .btn__green,
+        .btn__bej {
+            margin: 0;
+            height: 32px;
+            min-width: 200px;
+            font-size: 12px;
+        }
+    }
+}
+
+.select-box {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+
+    .text {
+        white-space: nowrap;
+        font-size: 12px;
+    }
+}
+
+.loader-box {
+    margin-top: 120px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+@media(max-width: 430px) {
+    .article-box {
+        padding: 8px;
+    }
+
+    .article-main {
+
+        &__header {
+            flex-direction: column-reverse;
+            gap: 8px;
+        }
+    
+        .toolbar-top {
+            display: flex;
+            width: 100%;
+            column-gap: 40px;
+            row-gap: 16px;
+            flex-wrap: wrap;
+    
+            .filter-group,
+            .btn-group {
+                display: flex;
+                column-gap: 24px;
+                row-gap: 16px;
+                align-items: center;
+                width: 100%;
+                flex-wrap: wrap;
+    
+                &__header {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    gap: 24px;
+                    width: 100%;
+    
+                    &__group {
+                        display: flex;
+                        align-items: center;
+                        gap: 24px;
+    
+                        .text {
+                            white-space: nowrap;
+                            font-size: 12px;
+                        }
+                    }
+                }
+    
+            }
+    
+            .btn__green,
+            .btn__bej {
+                margin: 0;
+                height: 32px;
+                min-width: 200px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .article-box {
+        .article-box-short {
+            row-gap: 6px;
+            column-gap: 6px;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+}

package/dist/components/ArticleMain/img/table_icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 3.25H18.25M1.75 7.75H18.25M1.75 12.25H18.25M1.75 16.75H18.25" stroke="#99A6D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/ArticleMain/img/tile-long_icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3.75C1 2.23122 2.23122 1 3.75 1H16.25C17.7688 1 19 2.23122 19 3.75V16.25C19 17.7688 17.7688 19 16.25 19H3.75C2.23122 19 1 17.7688 1 16.25V3.75ZM2.5 10.75V16.25C2.5 16.9404 3.05964 17.5 3.75 17.5H16.25C16.9404 17.5 17.5 16.9404 17.5 16.25V10.75H2.5ZM17.5 9.25H2.5V3.75C2.5 3.05964 3.05964 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05964 17.5 3.75V9.25Z" fill="#99A6D6"/>
+</svg>