int-components 0.0.2
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.
- package/README.md +98 -0
- package/dist/03a1823ba824367789ec.svg +3 -0
- package/dist/index.css +1287 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -0
- package/dist/rh-components/Button/Button.d.ts +18 -0
- package/dist/rh-components/Button/Button.d.ts.map +1 -0
- package/dist/rh-components/Button/index.css +188 -0
- package/dist/rh-components/Button/index.d.ts +2 -0
- package/dist/rh-components/Button/index.d.ts.map +1 -0
- package/dist/rh-components/Button/index.js +1 -0
- package/dist/rh-components/Footer/ContactModal.d.ts +9 -0
- package/dist/rh-components/Footer/ContactModal.d.ts.map +1 -0
- package/dist/rh-components/Footer/Footer.d.ts +8 -0
- package/dist/rh-components/Footer/Footer.d.ts.map +1 -0
- package/dist/rh-components/Footer/index.css +641 -0
- package/dist/rh-components/Footer/index.d.ts +3 -0
- package/dist/rh-components/Footer/index.d.ts.map +1 -0
- package/dist/rh-components/Footer/index.js +1 -0
- package/dist/rh-components/Header/Header.d.ts +17 -0
- package/dist/rh-components/Header/Header.d.ts.map +1 -0
- package/dist/rh-components/Header/index.css +465 -0
- package/dist/rh-components/Header/index.d.ts +3 -0
- package/dist/rh-components/Header/index.d.ts.map +1 -0
- package/dist/rh-components/Header/index.js +1 -0
- package/dist/rh-components/HotelCard/HotelCard.d.ts +18 -0
- package/dist/rh-components/HotelCard/HotelCard.d.ts.map +1 -0
- package/dist/rh-components/HotelCard/index.css +150 -0
- package/dist/rh-components/HotelCard/index.d.ts +3 -0
- package/dist/rh-components/HotelCard/index.d.ts.map +1 -0
- package/dist/rh-components/HotelCard/index.js +1 -0
- package/dist/rh-components/HotelsLanding/HotelsLanding.d.ts +27 -0
- package/dist/rh-components/HotelsLanding/HotelsLanding.d.ts.map +1 -0
- package/dist/rh-components/HotelsLanding/index.css +1287 -0
- package/dist/rh-components/HotelsLanding/index.d.ts +3 -0
- package/dist/rh-components/HotelsLanding/index.d.ts.map +1 -0
- package/dist/rh-components/HotelsLanding/index.js +1 -0
- package/dist/rh-components/index.d.ts +10 -0
- package/dist/rh-components/index.d.ts.map +1 -0
- package/dist/store/fluidMode.d.ts +37 -0
- package/dist/store/fluidMode.d.ts.map +1 -0
- package/dist/store/fluidMode.js +1 -0
- package/dist/storybook/decorator.d.ts +3 -0
- package/dist/storybook/decorator.d.ts.map +1 -0
- package/dist/themes/layout.d.ts +3 -0
- package/dist/themes/layout.d.ts.map +1 -0
- package/dist/themes/ratehawk/index.css +8 -0
- package/dist/themes/ratehawk/index.d.ts +7 -0
- package/dist/themes/ratehawk/index.d.ts.map +1 -0
- package/dist/themes/ratehawk/index.js +1 -0
- package/dist/utils/classes.d.ts +2 -0
- package/dist/utils/classes.d.ts.map +1 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +1 -0
- package/dist/utils/isValidEmail.d.ts +2 -0
- package/dist/utils/isValidEmail.d.ts.map +1 -0
- package/dist/utils/throttle.d.ts +2 -0
- package/dist/utils/throttle.d.ts.map +1 -0
- package/package.json +139 -0
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# Promo components
|
|
2
|
+
|
|
3
|
+
Рейтхочные компоненты.
|
|
4
|
+
Storybook https://of.worldota.net/mrktg/components/index.html
|
|
5
|
+
|
|
6
|
+
## Содержание
|
|
7
|
+
- [Подключение компонентов](#подключение-компонентов)
|
|
8
|
+
- [Компоненты RateHawk (`rh-components/*`)](#компоненты-ratehawk-rh-components)
|
|
9
|
+
- [Импорт стилей](#импорт-стилей)
|
|
10
|
+
- [Fluid mode](#fluid-mode)
|
|
11
|
+
- [Публикация пакета](#публикация-пакета)
|
|
12
|
+
|
|
13
|
+
## Подключение компонентов
|
|
14
|
+
## Компоненты RateHawk (`rh-components/*`)
|
|
15
|
+
|
|
16
|
+
Для компонентов RateHawk провайдер не принимает проп с темой и автоматически подключает нужные шрифты (Aeonik и ABCGravity).
|
|
17
|
+
|
|
18
|
+
### Пример использования в Astro
|
|
19
|
+
|
|
20
|
+
Layout.astro:
|
|
21
|
+
```astro
|
|
22
|
+
---
|
|
23
|
+
import { ThemeProvider } from "int-components/themes/ratehawk";
|
|
24
|
+
import "int-components/index.css"; // Импорт всех стилей, опционально
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
<html lang="en">
|
|
28
|
+
<ThemeProvider>
|
|
29
|
+
...
|
|
30
|
+
</ThemeProvider>
|
|
31
|
+
</html>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Header.astro:
|
|
35
|
+
```astro
|
|
36
|
+
---
|
|
37
|
+
// Можно импортировать не все стили, а только нужные
|
|
38
|
+
import "int-components/rh-components/Header/index.css";
|
|
39
|
+
import Header from "int-components/rh-components/Header";
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
<Header
|
|
43
|
+
client:load
|
|
44
|
+
menu={[
|
|
45
|
+
{ title: "Пункт 1" },
|
|
46
|
+
{
|
|
47
|
+
title: "Пункт 2",
|
|
48
|
+
onClick: () => {
|
|
49
|
+
alert('test');
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
]}
|
|
53
|
+
/>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
**ThemeProvider** автоматически подключает шрифты Aeonik и ABCGravity. Можно убрать отдельные font-face из проекта.
|
|
57
|
+
|
|
58
|
+
## Импорт стилей
|
|
59
|
+
|
|
60
|
+
### Вариант 1: Импорт всех стилей
|
|
61
|
+
```javascript
|
|
62
|
+
import "int-components/index.css";
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Вариант 2: Импорт стилей отдельных компонентов
|
|
66
|
+
```javascript
|
|
67
|
+
import "int-components/rh-components/Button/index.css";
|
|
68
|
+
import "int-components/rh-components/Header/index.css";
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Важно для SSR:** Импорт CSS файлов необходим для избежания CLS (Cumulative Layout Shift) при серверном рендеринге.
|
|
72
|
+
CSS будет включен в `<head>` при SSR, и стили применятся мгновенно.
|
|
73
|
+
|
|
74
|
+
**Оптимизация:** Не беспокойтесь о дублирующихся импортах! Astro (Vite) автоматически дедуплицирует CSS — если вы
|
|
75
|
+
импортируете один и тот же файл стилей в нескольких компонентах, он будет включен в финальную сборку только один раз.
|
|
76
|
+
Поэтому безопасно импортировать стили компонента в каждом `.astro` файле, где он используется.
|
|
77
|
+
|
|
78
|
+
## Fluid mode
|
|
79
|
+
Fluid mode привязывает размер компонентов к ширине окна браузера, что улучшает адаптивность интерфейса.
|
|
80
|
+
Чтобы включить fluid mode, передайте проп `fluidMode` в провайдер темы. Также можно передать аналогичный проп в каждый
|
|
81
|
+
из компонентов, чтобы переопределить глобальную настройку. Оценить работу fluid mode можно в Storybook, тумблер
|
|
82
|
+
находится рядом с верхним меню.
|
|
83
|
+
|
|
84
|
+
## Публикация пакета
|
|
85
|
+
Auth token лежит в [bitwarden](https://bitwarden.emergingtravel.com/#/vault?action=view&itemId=8d539336-49ca-448a-a5d9-b36b0086b0ad).
|
|
86
|
+
Для получения доступов необходимо письмо в it@ с руководителем в копии. Для установки токена нужно создать файл .npmrc
|
|
87
|
+
в корне проекта с содержимым:
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
//registry.npmjs.org/:_authToken=<auth token>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
<auth token> соответственно заменить на токен из bitwarden.
|
|
94
|
+
|
|
95
|
+
Затем выполнить команду:
|
|
96
|
+
```
|
|
97
|
+
npm run publish:patch
|
|
98
|
+
```
|