triafly-ui-kit 1.0.26 → 1.0.27

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 (37) hide show
  1. package/README.md +93 -93
  2. package/dist/_virtual/dayjs.min.js +7 -0
  3. package/dist/_virtual/dayjs.min2.js +4 -0
  4. package/dist/_virtual/ru.js +2 -0
  5. package/dist/_virtual/ru2.js +4 -0
  6. package/dist/assets/src/components/Ui/DateRangePicker/DateRangePicker.css +1 -0
  7. package/dist/assets/src/components/Ui/Tooltip/Tooltip.stories.module.css +1 -1
  8. package/dist/components/Ui/DatePicker/DatePicker.js +6 -13
  9. package/dist/components/Ui/DatePicker/DatePicker.stories.js +33 -39
  10. package/dist/components/Ui/DatePicker/index.js +4 -0
  11. package/dist/components/Ui/DateRangePicker/DateRangePicker.js +195 -0
  12. package/dist/components/Ui/DateRangePicker/DateRangePicker.stories.js +84 -0
  13. package/dist/components/Ui/DateRangePicker/const.js +37 -0
  14. package/dist/components/Ui/DateRangePicker/hooks/useCalendarRenderer.js +48 -0
  15. package/dist/components/Ui/DateRangePicker/hooks/useChangeDate.js +28 -0
  16. package/dist/components/Ui/DateRangePicker/hooks/useDateNavigation.js +22 -0
  17. package/dist/components/Ui/DateRangePicker/hooks/useDateRangeState.js +24 -0
  18. package/dist/components/Ui/DateRangePicker/hooks/useQuickRange.js +77 -0
  19. package/dist/components/Ui/DateRangePicker/index.js +4 -0
  20. package/dist/main.d.ts +33 -0
  21. package/dist/main.js +157 -153
  22. package/dist/node_modules/dayjs/dayjs.min.js +282 -0
  23. package/dist/node_modules/dayjs/locale/ru.js +36 -0
  24. package/dist/src/components/Ui/Tooltip/Tooltip.stories.module.css.js +1 -1
  25. package/dist/styles/_mixins.scss +21 -21
  26. package/dist/styles/fix.scss +3 -3
  27. package/dist/styles/main.scss +26 -26
  28. package/dist/styles/reset.scss +105 -105
  29. package/dist/styles/typography.scss +102 -102
  30. package/dist/styles/variables.scss +273 -278
  31. package/package.json +111 -110
  32. package/src/styles/_mixins.scss +21 -21
  33. package/src/styles/fix.scss +3 -3
  34. package/src/styles/main.scss +26 -26
  35. package/src/styles/reset.scss +105 -105
  36. package/src/styles/typography.scss +102 -102
  37. package/src/styles/variables.scss +273 -273
@@ -1,22 +1,22 @@
1
- @mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
2
- background-color: $bg-color;
3
- padding: $padding;
4
- border-radius: 16px;
5
- }
6
-
7
- @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
8
- background-color: transparent !important;
9
- border: 1px solid $borderColor;
10
- color: $textColor;
11
- &[disabled] {
12
- pointer-events: none;
13
- }
14
- &:hover {
15
- background-color: transparent;
16
- box-shadow: inset 0 0 0 1px $borderColor;
17
- }
18
-
19
- svg * {
20
- fill: $textColor;
21
- }
1
+ @mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
2
+ background-color: $bg-color;
3
+ padding: $padding;
4
+ border-radius: 16px;
5
+ }
6
+
7
+ @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
8
+ background-color: transparent !important;
9
+ border: 1px solid $borderColor;
10
+ color: $textColor;
11
+ &[disabled] {
12
+ pointer-events: none;
13
+ }
14
+ &:hover {
15
+ background-color: transparent;
16
+ box-shadow: inset 0 0 0 1px $borderColor;
17
+ }
18
+
19
+ svg * {
20
+ fill: $textColor;
21
+ }
22
22
  }
@@ -1,4 +1,4 @@
1
- // Скрываем браузерный крестик в полях поиска
2
- input[type="search"]::-webkit-search-cancel-button {
3
- display: none;
1
+ // Скрываем браузерный крестик в полях поиска
2
+ input[type="search"]::-webkit-search-cancel-button {
3
+ display: none;
4
4
  }
@@ -1,27 +1,27 @@
1
- @import "./reset.scss";
2
- @import "./variables.scss";
3
- @import "./fix.scss";
4
- @import './_mixins.scss';
5
- @import './typography.scss';
6
-
7
- // Пока не трогать, тестовая подсветка блоков
8
- // html {
9
- // border: 4px solid red;
10
- // padding: 1px;
11
- // }
12
-
13
- // body {
14
- // border: 2px dashed;
15
- // margin: 1px;
16
- // }
17
-
18
- // div {
19
- // border: 1px dotted;
20
- // margin: 1px;
21
- // }
22
-
23
-
24
- //layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
25
- .page-content {
26
- border-radius: 16px;
1
+ @import "./reset.scss";
2
+ @import "./variables.scss";
3
+ @import "./fix.scss";
4
+ @import './_mixins.scss';
5
+ @import './typography.scss';
6
+
7
+ // Пока не трогать, тестовая подсветка блоков
8
+ // html {
9
+ // border: 4px solid red;
10
+ // padding: 1px;
11
+ // }
12
+
13
+ // body {
14
+ // border: 2px dashed;
15
+ // margin: 1px;
16
+ // }
17
+
18
+ // div {
19
+ // border: 1px dotted;
20
+ // margin: 1px;
21
+ // }
22
+
23
+
24
+ //layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
25
+ .page-content {
26
+ border-radius: 16px;
27
27
  }
@@ -1,106 +1,106 @@
1
- * {
2
- margin: 0;
3
- padding: 0;
4
- border: 0;
5
-
6
- /*color: #1a2026;*/
7
- }
8
-
9
- *,
10
- *::before,
11
- *::after {
12
- -moz-box-sizing: border-box;
13
- -webkit-box-sizing: border-box;
14
- box-sizing: border-box;
15
- }
16
-
17
- :focus,
18
- :active {
19
- outline: none;
20
- }
21
-
22
- nav,
23
- footer,
24
- header,
25
- aside {
26
- display: block;
27
- }
28
-
29
- html,
30
- body {
31
- width: 100%;
32
- height: 100%;
33
-
34
- font-size: 100%;
35
- font-size: 14px;
36
- line-height: 1;
37
- -ms-text-size-adjust: 100%;
38
- -moz-text-size-adjust: 100%;
39
- -webkit-text-size-adjust: 100%;
40
- }
41
-
42
- input,
43
- button,
44
- textarea {
45
- font-family: inherit;
46
- }
47
-
48
- input::-ms-clear {
49
- display: none;
50
- }
51
-
52
- button {
53
- cursor: pointer;
54
- }
55
-
56
- button::-moz-focus-inner {
57
- padding: 0;
58
-
59
- border: 0;
60
- }
61
-
62
- a,
63
- a:visited {
64
- text-decoration: none;
65
- }
66
-
67
- a:focus,
68
- a:active {
69
- outline: none;
70
- }
71
-
72
- a:hover {
73
- text-decoration: none;
74
- }
75
-
76
- ul li {
77
- list-style: none;
78
- }
79
-
80
- img {
81
- vertical-align: top;
82
- }
83
-
84
- h1,
85
- h2,
86
- h3,
87
- h4,
88
- h5,
89
- h6 {
90
- font-size: inherit;
91
- font-weight: 400;
92
- }
93
-
94
- #root {
95
- background-color: var(--color-bg-island-default);
96
- }
97
-
98
- .page-wrapper {
99
- width: 100%;
100
- max-width: 1920px;
101
- min-height: 100vh;
102
- margin: 0 auto;
103
- display: flex;
104
- flex-direction: column;
105
- background-color: var(--color-bg-island-default);
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+
6
+ /*color: #1a2026;*/
7
+ }
8
+
9
+ *,
10
+ *::before,
11
+ *::after {
12
+ -moz-box-sizing: border-box;
13
+ -webkit-box-sizing: border-box;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ :focus,
18
+ :active {
19
+ outline: none;
20
+ }
21
+
22
+ nav,
23
+ footer,
24
+ header,
25
+ aside {
26
+ display: block;
27
+ }
28
+
29
+ html,
30
+ body {
31
+ width: 100%;
32
+ height: 100%;
33
+
34
+ font-size: 100%;
35
+ font-size: 14px;
36
+ line-height: 1;
37
+ -ms-text-size-adjust: 100%;
38
+ -moz-text-size-adjust: 100%;
39
+ -webkit-text-size-adjust: 100%;
40
+ }
41
+
42
+ input,
43
+ button,
44
+ textarea {
45
+ font-family: inherit;
46
+ }
47
+
48
+ input::-ms-clear {
49
+ display: none;
50
+ }
51
+
52
+ button {
53
+ cursor: pointer;
54
+ }
55
+
56
+ button::-moz-focus-inner {
57
+ padding: 0;
58
+
59
+ border: 0;
60
+ }
61
+
62
+ a,
63
+ a:visited {
64
+ text-decoration: none;
65
+ }
66
+
67
+ a:focus,
68
+ a:active {
69
+ outline: none;
70
+ }
71
+
72
+ a:hover {
73
+ text-decoration: none;
74
+ }
75
+
76
+ ul li {
77
+ list-style: none;
78
+ }
79
+
80
+ img {
81
+ vertical-align: top;
82
+ }
83
+
84
+ h1,
85
+ h2,
86
+ h3,
87
+ h4,
88
+ h5,
89
+ h6 {
90
+ font-size: inherit;
91
+ font-weight: 400;
92
+ }
93
+
94
+ #root {
95
+ background-color: var(--color-bg-island-default);
96
+ }
97
+
98
+ .page-wrapper {
99
+ width: 100%;
100
+ max-width: 1920px;
101
+ min-height: 100vh;
102
+ margin: 0 auto;
103
+ display: flex;
104
+ flex-direction: column;
105
+ background-color: var(--color-bg-island-default);
106
106
  }
@@ -1,102 +1,102 @@
1
- //Подключение шрифтов
2
- @font-face {
3
- font-family: "Roboto Slab";
4
- src: url("../assets/fonts/RobotoSlab-SemiBold.ttf") format("truetype");
5
- font-weight: 600;
6
- }
7
-
8
- @font-face {
9
- font-family: "Manrope";
10
- src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
11
- font-weight: 400;
12
- }
13
-
14
- @font-face {
15
- font-family: "Manrope";
16
- src: url("../assets/fonts/Manrope-Semibold.ttf") format("truetype");
17
- font-weight: 600;
18
- }
19
-
20
- @font-face {
21
- font-family: "Manrope";
22
- src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
23
- font-weight: 700;
24
- }
25
-
26
- @font-face {
27
- font-family: "Fira Code";
28
- src: url("../assets/fonts/FiraCode-Regular.ttf") format("truetype");
29
- font-weight: 400;
30
- }
31
-
32
- //Глобальные свойства шрифтов
33
- * {
34
- font-family: "Manrope", sans-serif;
35
- font-size: 14px;
36
- line-height: 1.2em;
37
- letter-spacing: 0.02em;
38
- font-weight: 400;
39
- color: var(--color-text-primary-default);
40
- }
41
-
42
- //Заголовки
43
-
44
- //NOTE:
45
- //по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
46
- //AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
47
- //как это принято общей практикой вёрстки,
48
- //а для указания размеров и начертания использовать миксин.
49
- //В противном случае основными хедерами будут h4-h8 + варнинги JSX
50
-
51
- //Дефолтные значения font-size и font-weight = 14 и 400
52
- //При необходимости кастомизации текста в компоненте импортируется данные миксины
53
- //с указанием необходимых значений согласно макету
54
- //TODO: подготовить переменные для стандартизаии размеров
55
-
56
- //Акцидентная гарнитура для заголовков
57
- @mixin accidental($size, $margin) {
58
- font-family: "Roboto Slab", sans-serif;
59
- font-size: $size;
60
- margin: 0 0 $margin 0;
61
- }
62
-
63
- //Гротескная гарнитура для заголовков и регулярного текста
64
- @mixin grotesque($size, $weight) {
65
- font-size: $size;
66
- font-weight: $weight;
67
- }
68
-
69
- //сброс дефолтных отступов в заголовках
70
- @for $i from 1 through 6 {
71
- h#{$i} {
72
- margin: 0;
73
- }
74
- }
75
-
76
- //Ссылки
77
- a {
78
- color: var(--color-text-brand-default);
79
- text-decoration: none;
80
- &:hover {
81
- color: var(--color-text-brand-hover);
82
- }
83
- &[href=""] {
84
- //стили неактивной ссылки
85
- opacity: 40%;
86
- cursor: default;
87
- pointer-events: none;
88
- //не совсем понятно зачем она нам
89
- //+ линтер неадекватно реагирует на пустой href
90
- //добавить .disabled с JS-логикой?
91
- }
92
- }
93
-
94
- //Параграфы
95
-
96
- //TODO: недостаточно кейсов в моках, запросить для уточнения
97
- p {
98
- // font-size: 12px;
99
- &:not(:last-child) {
100
- margin: 0 0 8px 0;
101
- }
102
- }
1
+ //Подключение шрифтов
2
+ @font-face {
3
+ font-family: "Roboto Slab";
4
+ src: url("../assets/fonts/RobotoSlab-SemiBold.ttf") format("truetype");
5
+ font-weight: 600;
6
+ }
7
+
8
+ @font-face {
9
+ font-family: "Manrope";
10
+ src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
11
+ font-weight: 400;
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "Manrope";
16
+ src: url("../assets/fonts/Manrope-Semibold.ttf") format("truetype");
17
+ font-weight: 600;
18
+ }
19
+
20
+ @font-face {
21
+ font-family: "Manrope";
22
+ src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
23
+ font-weight: 700;
24
+ }
25
+
26
+ @font-face {
27
+ font-family: "Fira Code";
28
+ src: url("../assets/fonts/FiraCode-Regular.ttf") format("truetype");
29
+ font-weight: 400;
30
+ }
31
+
32
+ //Глобальные свойства шрифтов
33
+ * {
34
+ font-family: "Manrope", sans-serif;
35
+ font-size: 14px;
36
+ line-height: 1.2em;
37
+ letter-spacing: 0.02em;
38
+ font-weight: 400;
39
+ color: var(--color-text-primary-default);
40
+ }
41
+
42
+ //Заголовки
43
+
44
+ //NOTE:
45
+ //по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
46
+ //AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
47
+ //как это принято общей практикой вёрстки,
48
+ //а для указания размеров и начертания использовать миксин.
49
+ //В противном случае основными хедерами будут h4-h8 + варнинги JSX
50
+
51
+ //Дефолтные значения font-size и font-weight = 14 и 400
52
+ //При необходимости кастомизации текста в компоненте импортируется данные миксины
53
+ //с указанием необходимых значений согласно макету
54
+ //TODO: подготовить переменные для стандартизаии размеров
55
+
56
+ //Акцидентная гарнитура для заголовков
57
+ @mixin accidental($size, $margin) {
58
+ font-family: "Roboto Slab", sans-serif;
59
+ font-size: $size;
60
+ margin: 0 0 $margin 0;
61
+ }
62
+
63
+ //Гротескная гарнитура для заголовков и регулярного текста
64
+ @mixin grotesque($size, $weight) {
65
+ font-size: $size;
66
+ font-weight: $weight;
67
+ }
68
+
69
+ //сброс дефолтных отступов в заголовках
70
+ @for $i from 1 through 6 {
71
+ h#{$i} {
72
+ margin: 0;
73
+ }
74
+ }
75
+
76
+ //Ссылки
77
+ a {
78
+ color: var(--color-text-brand-default);
79
+ text-decoration: none;
80
+ &:hover {
81
+ color: var(--color-text-brand-hover);
82
+ }
83
+ &[href=""] {
84
+ //стили неактивной ссылки
85
+ opacity: 40%;
86
+ cursor: default;
87
+ pointer-events: none;
88
+ //не совсем понятно зачем она нам
89
+ //+ линтер неадекватно реагирует на пустой href
90
+ //добавить .disabled с JS-логикой?
91
+ }
92
+ }
93
+
94
+ //Параграфы
95
+
96
+ //TODO: недостаточно кейсов в моках, запросить для уточнения
97
+ p {
98
+ // font-size: 12px;
99
+ &:not(:last-child) {
100
+ margin: 0 0 8px 0;
101
+ }
102
+ }