ecomlab-components-next 0.1.225 → 0.1.227

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/Buttons/ButtonBasic/ButtonBasic.scss +2 -0
  2. package/dist/components/ConstructorComponents/AdvantagesBlock/AdvantagesBlock.js +36 -18
  3. package/dist/stories/ButtonBasic/ButtonBasic.scss +239 -239
  4. package/package.json +1 -1
package/dist/components/Buttons/ButtonBasic/ButtonBasic.scss CHANGED
@@ -1,3 +1,5 @@
1
+ // Оставить
2
+
1
3
  .btn-basic {
2
4
  width: 100%;
3
5
  min-height: 32px;
package/dist/components/ConstructorComponents/AdvantagesBlock/AdvantagesBlock.js CHANGED
@@ -43,14 +43,19 @@ var AdvantagesBlock = function AdvantagesBlock(_ref) {
43
43
  _useState4 = _slicedToArray(_useState3, 2),
44
44
  maxHeight = _useState4[0],
45
45
  setMaxHeight = _useState4[1];
46
- var _useState5 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : 0),
46
+ var _useState5 = (0, _react.useState)(0),
47
47
  _useState6 = _slicedToArray(_useState5, 2),
48
48
  windowWidth = _useState6[0],
49
- setWindowWidth = _useState6[1];
49
+ setWindowWidth = _useState6[1]; // ✅ Инициализируем 0
50
50
  var _useState7 = (0, _react.useState)(false),
51
51
  _useState8 = _slicedToArray(_useState7, 2),
52
52
  isReady = _useState8[0],
53
53
  setIsReady = _useState8[1];
54
+ var _useState9 = (0, _react.useState)(false),
55
+ _useState10 = _slicedToArray(_useState9, 2),
56
+ isClient = _useState10[0],
57
+ setIsClient = _useState10[1]; // ✅ Новое состояние для проверки клиента
58
+
54
59
  var setHeight = (0, _react.useCallback)(function () {
55
60
  if (blocksRef.current.length === 0 || !isReady) return;
56
61
  var heights = blocksRef.current.filter(function (block) {
@@ -66,20 +71,19 @@ var AdvantagesBlock = function AdvantagesBlock(_ref) {
66
71
  }
67
72
  }, [isReady, maxHeight]);
68
73
  (0, _react.useEffect)(function () {
69
- if (typeof window !== 'undefined') {
70
- setRefPage("?ref_page=".concat(window.location.href));
71
- setWindowWidth(window.innerWidth);
72
- }
74
+ // ✅ Устанавливаем флаг, что мы на клиенте
75
+ setIsClient(true);
76
+ setRefPage("?ref_page=".concat(window.location.href));
77
+ setWindowWidth(window.innerWidth);
73
78
  }, []);
74
79
  (0, _react.useEffect)(function () {
75
- if (typeof window === 'undefined') return;
80
+ if (!isClient) return; // ✅ Не выполняем на сервере
81
+
76
82
  var handleResize = function handleResize() {
77
83
  setWindowWidth(window.innerWidth);
78
84
  setHeight();
79
85
  };
80
86
  window.addEventListener("resize", handleResize);
81
-
82
- // Ждем полной загрузки страницы включая шрифты
83
87
  if (document.readyState === 'complete') {
84
88
  setIsReady(true);
85
89
  } else {
@@ -93,10 +97,11 @@ var AdvantagesBlock = function AdvantagesBlock(_ref) {
93
97
  return setIsReady(true);
94
98
  });
95
99
  };
96
- }, [setHeight]);
100
+ }, [setHeight, isClient]); // ✅ Добавляем isClient в зависимости
101
+
97
102
  (0, _react.useEffect)(function () {
98
- if (isReady) {
99
- // Несколько попыток установить высоту с интервалами
103
+ if (isReady && isClient) {
104
+ // ✅ Проверяем isClient
100
105
  var attempts = [0, 100, 300, 500];
101
106
  attempts.forEach(function (delay) {
102
107
  setTimeout(function () {
@@ -104,14 +109,28 @@ var AdvantagesBlock = function AdvantagesBlock(_ref) {
104
109
  }, delay);
105
110
  });
106
111
  }
107
- }, [isReady, setHeight, list.length]);
108
-
109
- // Обновляем высоту при изменении контента
112
+ }, [isReady, setHeight, list.length, isClient]);
110
113
  (0, _react.useEffect)(function () {
111
- if (isReady) {
114
+ if (isReady && isClient) {
115
+ // ✅ Проверяем isClient
112
116
  setHeight();
113
117
  }
114
- }, [list, isReady, setHeight]);
118
+ }, [list, isReady, setHeight, isClient]);
119
+
120
+ // ✅ Ранний возврат для серверного рендеринга
121
+ if (!isClient) {
122
+ return /*#__PURE__*/_react["default"].createElement("section", {
123
+ className: "advantages-block ".concat(className)
124
+ }, /*#__PURE__*/_react["default"].createElement("div", {
125
+ className: "advantages-block__header"
126
+ }, title && /*#__PURE__*/_react["default"].createElement("h2", {
127
+ className: "advantages-block__title"
128
+ }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
129
+ className: "advantages-block__description"
130
+ }, description)), descriptionWhite && /*#__PURE__*/_react["default"].createElement("p", {
131
+ className: "advantages-block__description-white"
132
+ }, descriptionWhite));
133
+ }
115
134
  return /*#__PURE__*/_react["default"].createElement("section", {
116
135
  className: "advantages-block ".concat(className)
117
136
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -143,7 +162,6 @@ var AdvantagesBlock = function AdvantagesBlock(_ref) {
143
162
  ref: function ref(el) {
144
163
  blocksRef.current[index] = el;
145
164
  if (el && isReady) {
146
- // Обновляем высоту при изменении ref
147
165
  setTimeout(setHeight, 0);
148
166
  }
149
167
  }
package/dist/stories/ButtonBasic/ButtonBasic.scss CHANGED
@@ -1,241 +1,241 @@
1
1
 
2
2
 
3
- .btn-basic {
4
- width: 100%;
5
- min-height: 32px;
6
- font-size: 14px;
7
- // max-width: 200px;
8
- width: 200px;
9
- border-radius: 8px;
10
- border: none;
11
- //margin-top: 32px;
12
- color: white;
13
- font-family: Rubik;
14
- font-weight: 500;
15
- min-width: 120px;
16
- padding: 4px 8px;
17
- cursor: pointer;
18
- }
19
-
20
- .green-btn {
21
- background-color: #22C55E;
22
-
23
- &:hover {
24
- background: #16A34A;
25
- transition: 0.5s;
26
- }
27
-
28
- &[disabled] {
29
- position: relative;
30
- cursor: not-allowed;
31
- background-color: #BBF7D0;
32
- color: #ffffff;
33
- -webkit-box-shadow: none;
34
- -moz-box-shadow: none;
35
- box-shadow: none;
36
-
37
- &:hover {
38
- box-shadow: none;
39
- background-color: #BBF7D0;
40
- box-shadow: none;
41
- }
42
-
43
- &:active {
44
- border: none;
45
- }
46
-
47
- }
48
- }
49
-
50
- .blue-btn {
51
- background-color: #1890FF;
52
- box-shadow: 2px 4px 10px 0px rgba(24, 144, 255, 0.25);
53
-
54
- &:hover {
55
- -webkit-box-shadow: none;
56
- -moz-box-shadow: none;
57
- box-shadow: none;
58
- background-color: #005DB2;
59
- transition: 0.5s;
60
- box-shadow: none;
61
- }
62
-
63
- &:active {
64
- background-color: #1890FF;
65
- border: 2px solid #005DB2;
66
- }
67
-
68
- &[disabled] {
69
- position: relative;
70
- cursor: not-allowed;
71
- background-color: #B2DAFF;
72
- color: #ffffff;
73
- -webkit-box-shadow: none;
74
- -moz-box-shadow: none;
75
- box-shadow: none;
76
-
77
- &:hover {
78
- box-shadow: none;
79
- background-color: #B2DAFF;
80
- box-shadow: none;
81
- }
82
-
83
- &:active {
84
- border: none;
85
- }
86
-
87
- }
88
- }
89
-
90
- .orange-btn {
91
- background-color: #FB923C;
92
-
93
- &:hover {
94
- -webkit-box-shadow: none;
95
- -moz-box-shadow: none;
96
- box-shadow: none;
97
- background-color: #F97316;
98
- transition: 0.5s;
99
- box-shadow: none;
100
- }
101
-
102
- &:active {
103
- background-color: #FB923C;
104
- border: 2px solid #F97316;
105
- }
106
-
107
- &[disabled] {
108
- position: relative;
109
- cursor: not-allowed;
110
- background-color: #FFEDD5;
111
- color: #ffffff;
112
- -webkit-box-shadow: none;
113
- -moz-box-shadow: none;
114
- box-shadow: none;
115
-
116
- &:hover {
117
- box-shadow: none;
118
- background-color: #FFEDD5;
119
- box-shadow: none;
120
- }
121
-
122
- &:active {
123
- border: none;
124
- }
125
-
126
- }
127
- }
128
-
129
- .white-blue-btn {
130
- color: #1890FF;
131
- background: white;
132
- border: 1px solid #1890FF;
133
-
134
- &:hover {
135
- background-color: #E0E7F2;
136
- border: 1px solid #1890FF;
137
- transition: all 0.5s;
138
- }
139
-
140
- &:active {
141
- transition: all 0.5s;
142
- border: 2px solid #1890FF;
143
- }
144
-
145
- &[disabled] {
146
- position: relative;
147
- cursor: not-allowed;
148
- background-color: #E1E6EA;
149
- border: none;
150
- color: #A9B3BC;
151
- -webkit-box-shadow: none;
152
- -moz-box-shadow: none;
153
- box-shadow: none;
154
-
155
- &:hover {
156
- box-shadow: none;
157
- border: none;
158
- background-color: #E1E6EA;
159
- box-shadow: none;
160
- }
161
-
162
- &:active {
163
- border: none;
164
- }
165
-
166
- }
167
- }
168
-
169
- .red-btn {
170
- background-color: #F87171;
171
- color: white;
172
-
173
- &:hover {
174
- background-color: #EF4444;
175
- transition: 0.5s;
176
- }
177
-
178
- &:active {
179
- background-color: #F87171;
180
- border: 2px solid #EF4444;
181
- transition: 0.5s;
182
- }
183
-
184
- &[disabled] {
185
- position: relative;
186
- cursor: not-allowed;
187
- background-color: #FEE2E2;
188
- color: #ffffff;
189
- -webkit-box-shadow: none;
190
- -moz-box-shadow: none;
191
- box-shadow: none;
192
-
193
- &:hover {
194
- box-shadow: none;
195
- background-color: #FEE2E2;
196
- box-shadow: none;
197
- }
198
-
199
- &:active {
200
- border: none;
201
- }
202
-
203
- }
204
- }
205
-
206
- .violet-btn {
207
- background-color: #3900B1;
208
- color: white;
209
-
210
- &:hover {
211
- background-color: #24006F;
212
- transition: 0.5s;
213
- }
214
-
215
- &:active {
216
- background-color: #3900B1;
217
- border: 2px solid #24006F;
218
- transition: 0.5s;
219
- }
220
-
221
- &[disabled] {
222
- position: relative;
223
- cursor: not-allowed;
224
- background-color: #ABADE4;
225
- color: #EAEAF9;
226
- -webkit-box-shadow: none;
227
- -moz-box-shadow: none;
228
- box-shadow: none;
229
-
230
- &:hover {
231
- box-shadow: none;
232
- background-color: #ABADE4;
233
- box-shadow: none;
234
- }
235
-
236
- &:active {
237
- border: none;
238
- }
239
-
240
- }
241
- }
3
+ // .btn-basic {
4
+ // width: 100%;
5
+ // min-height: 32px;
6
+ // font-size: 14px;
7
+ // // max-width: 200px;
8
+ // width: 200px;
9
+ // border-radius: 8px;
10
+ // border: none;
11
+ // //margin-top: 32px;
12
+ // color: white;
13
+ // font-family: Rubik;
14
+ // font-weight: 500;
15
+ // min-width: 120px;
16
+ // padding: 4px 8px;
17
+ // cursor: pointer;
18
+ // }
19
+
20
+ // .green-btn {
21
+ // background-color: #22C55E;
22
+
23
+ // &:hover {
24
+ // background: #16A34A;
25
+ // transition: 0.5s;
26
+ // }
27
+
28
+ // &[disabled] {
29
+ // position: relative;
30
+ // cursor: not-allowed;
31
+ // background-color: #BBF7D0;
32
+ // color: #ffffff;
33
+ // -webkit-box-shadow: none;
34
+ // -moz-box-shadow: none;
35
+ // box-shadow: none;
36
+
37
+ // &:hover {
38
+ // box-shadow: none;
39
+ // background-color: #BBF7D0;
40
+ // box-shadow: none;
41
+ // }
42
+
43
+ // &:active {
44
+ // border: none;
45
+ // }
46
+
47
+ // }
48
+ // }
49
+
50
+ // .blue-btn {
51
+ // background-color: #1890FF;
52
+ // box-shadow: 2px 4px 10px 0px rgba(24, 144, 255, 0.25);
53
+
54
+ // &:hover {
55
+ // -webkit-box-shadow: none;
56
+ // -moz-box-shadow: none;
57
+ // box-shadow: none;
58
+ // background-color: #005DB2;
59
+ // transition: 0.5s;
60
+ // box-shadow: none;
61
+ // }
62
+
63
+ // &:active {
64
+ // background-color: #1890FF;
65
+ // border: 2px solid #005DB2;
66
+ // }
67
+
68
+ // &[disabled] {
69
+ // position: relative;
70
+ // cursor: not-allowed;
71
+ // background-color: #B2DAFF;
72
+ // color: #ffffff;
73
+ // -webkit-box-shadow: none;
74
+ // -moz-box-shadow: none;
75
+ // box-shadow: none;
76
+
77
+ // &:hover {
78
+ // box-shadow: none;
79
+ // background-color: #B2DAFF;
80
+ // box-shadow: none;
81
+ // }
82
+
83
+ // &:active {
84
+ // border: none;
85
+ // }
86
+
87
+ // }
88
+ // }
89
+
90
+ // .orange-btn {
91
+ // background-color: #FB923C;
92
+
93
+ // &:hover {
94
+ // -webkit-box-shadow: none;
95
+ // -moz-box-shadow: none;
96
+ // box-shadow: none;
97
+ // background-color: #F97316;
98
+ // transition: 0.5s;
99
+ // box-shadow: none;
100
+ // }
101
+
102
+ // &:active {
103
+ // background-color: #FB923C;
104
+ // border: 2px solid #F97316;
105
+ // }
106
+
107
+ // &[disabled] {
108
+ // position: relative;
109
+ // cursor: not-allowed;
110
+ // background-color: #FFEDD5;
111
+ // color: #ffffff;
112
+ // -webkit-box-shadow: none;
113
+ // -moz-box-shadow: none;
114
+ // box-shadow: none;
115
+
116
+ // &:hover {
117
+ // box-shadow: none;
118
+ // background-color: #FFEDD5;
119
+ // box-shadow: none;
120
+ // }
121
+
122
+ // &:active {
123
+ // border: none;
124
+ // }
125
+
126
+ // }
127
+ // }
128
+
129
+ // .white-blue-btn {
130
+ // color: #1890FF;
131
+ // background: white;
132
+ // border: 1px solid #1890FF;
133
+
134
+ // &:hover {
135
+ // background-color: #E0E7F2;
136
+ // border: 1px solid #1890FF;
137
+ // transition: all 0.5s;
138
+ // }
139
+
140
+ // &:active {
141
+ // transition: all 0.5s;
142
+ // border: 2px solid #1890FF;
143
+ // }
144
+
145
+ // &[disabled] {
146
+ // position: relative;
147
+ // cursor: not-allowed;
148
+ // background-color: #E1E6EA;
149
+ // border: none;
150
+ // color: #A9B3BC;
151
+ // -webkit-box-shadow: none;
152
+ // -moz-box-shadow: none;
153
+ // box-shadow: none;
154
+
155
+ // &:hover {
156
+ // box-shadow: none;
157
+ // border: none;
158
+ // background-color: #E1E6EA;
159
+ // box-shadow: none;
160
+ // }
161
+
162
+ // &:active {
163
+ // border: none;
164
+ // }
165
+
166
+ // }
167
+ // }
168
+
169
+ // .red-btn {
170
+ // background-color: #F87171;
171
+ // color: white;
172
+
173
+ // &:hover {
174
+ // background-color: #EF4444;
175
+ // transition: 0.5s;
176
+ // }
177
+
178
+ // &:active {
179
+ // background-color: #F87171;
180
+ // border: 2px solid #EF4444;
181
+ // transition: 0.5s;
182
+ // }
183
+
184
+ // &[disabled] {
185
+ // position: relative;
186
+ // cursor: not-allowed;
187
+ // background-color: #FEE2E2;
188
+ // color: #ffffff;
189
+ // -webkit-box-shadow: none;
190
+ // -moz-box-shadow: none;
191
+ // box-shadow: none;
192
+
193
+ // &:hover {
194
+ // box-shadow: none;
195
+ // background-color: #FEE2E2;
196
+ // box-shadow: none;
197
+ // }
198
+
199
+ // &:active {
200
+ // border: none;
201
+ // }
202
+
203
+ // }
204
+ // }
205
+
206
+ // .violet-btn {
207
+ // background-color: #3900B1;
208
+ // color: white;
209
+
210
+ // &:hover {
211
+ // background-color: #24006F;
212
+ // transition: 0.5s;
213
+ // }
214
+
215
+ // &:active {
216
+ // background-color: #3900B1;
217
+ // border: 2px solid #24006F;
218
+ // transition: 0.5s;
219
+ // }
220
+
221
+ // &[disabled] {
222
+ // position: relative;
223
+ // cursor: not-allowed;
224
+ // background-color: #ABADE4;
225
+ // color: #EAEAF9;
226
+ // -webkit-box-shadow: none;
227
+ // -moz-box-shadow: none;
228
+ // box-shadow: none;
229
+
230
+ // &:hover {
231
+ // box-shadow: none;
232
+ // background-color: #ABADE4;
233
+ // box-shadow: none;
234
+ // }
235
+
236
+ // &:active {
237
+ // border: none;
238
+ // }
239
+
240
+ // }
241
+ // }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.225",
3
+ "version": "0.1.227",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "files": [