@tsiky/components-r19 1.0.0 → 1.2.0

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 (61) hide show
  1. package/index.ts +35 -33
  2. package/package.json +1 -1
  3. package/src/components/AnnouncementPanel/FlexRowContainer.css +17 -17
  4. package/src/components/AnnouncementPanel/FlexRowContainer.stories.tsx +329 -329
  5. package/src/components/AnnouncementPanel/FlexRowContainer.tsx +24 -24
  6. package/src/components/AnnouncementPanel/ListBox/CounterListBox.css +56 -56
  7. package/src/components/AnnouncementPanel/ListBox/CounterListBox.stories.tsx +292 -292
  8. package/src/components/AnnouncementPanel/ListBox/CounterListBox.tsx +106 -106
  9. package/src/components/AnnouncementPanel/ListBox/SimpleListBox.css +57 -57
  10. package/src/components/AnnouncementPanel/ListBox/SimpleListBox.stories.tsx +189 -189
  11. package/src/components/AnnouncementPanel/ListBox/SimpleListBox.tsx +138 -138
  12. package/src/components/AnnouncementPanel/ListBox/TrendListBox.css +61 -61
  13. package/src/components/AnnouncementPanel/ListBox/TrendListBox.stories.tsx +257 -257
  14. package/src/components/AnnouncementPanel/ListBox/TrendListBox.tsx +90 -90
  15. package/src/components/AnnouncementPanel/ListBox/index.ts +3 -3
  16. package/src/components/AnnouncementPanel/ListContentContainer.css +23 -23
  17. package/src/components/AnnouncementPanel/ListContentContainer.stories.tsx +212 -212
  18. package/src/components/AnnouncementPanel/ListContentContainer.tsx +33 -33
  19. package/src/components/AnnouncementPanel/index.ts +3 -3
  20. package/src/components/Charts/area-chart-admission/AreaChartAdmission.tsx +129 -89
  21. package/src/components/Charts/bar-chart/BarChart.tsx +171 -132
  22. package/src/components/Charts/boxplot-chart/BoxPlotChart.tsx +114 -114
  23. package/src/components/Charts/mixed-chart/MixedChart.tsx +65 -9
  24. package/src/components/Charts/sankey-adaptation/sankey.tsx +70 -70
  25. package/src/components/Charts/sankey-chart/SankeyChart.tsx +183 -155
  26. package/src/components/Confirmationpopup/ConfirmationPopup.module.css +88 -0
  27. package/src/components/Confirmationpopup/ConfirmationPopup.stories.tsx +94 -0
  28. package/src/components/Confirmationpopup/ConfirmationPopup.tsx +47 -0
  29. package/src/components/Confirmationpopup/index.ts +6 -0
  30. package/src/components/Confirmationpopup/useConfirmationPopup.ts +48 -0
  31. package/src/components/DayStatCard/DayStatCard.tsx +96 -69
  32. package/src/components/DraggableSwitcher/DraggableSwitcherButton.tsx +58 -58
  33. package/src/components/DraggableSwitcher/context/useDraggableSwitcher.tsx +45 -45
  34. package/src/components/DraggableSwitcher/index.ts +2 -2
  35. package/src/components/DynamicInput/input/SelectInput.tsx +75 -75
  36. package/src/components/DynamicInput/input/assets/SelectInput.module.css +95 -95
  37. package/src/components/DynamicTable/TableCell.tsx +38 -30
  38. package/src/components/DynamicTable/TableHeader.tsx +39 -34
  39. package/src/components/DynamicTable/TableauDynamique.module.css +1333 -1287
  40. package/src/components/DynamicTable/TableauDynamique.tsx +154 -154
  41. package/src/components/DynamicTable/tools/tableTypes.ts +63 -63
  42. package/src/components/Grid/Grid.tsx +5 -0
  43. package/src/components/Grid/grid.css +285 -285
  44. package/src/components/Header/Header.tsx +4 -2
  45. package/src/components/Header/header.css +61 -31
  46. package/src/components/MetricsPanel/MetricsPanel.module.css +688 -636
  47. package/src/components/MetricsPanel/MetricsPanel.tsx +220 -282
  48. package/src/components/MetricsPanel/renderers/CompactRenderer.tsx +148 -125
  49. package/src/components/NavBar/NavBar.tsx +1 -1
  50. package/src/components/NavItem/NavItem.tsx +58 -58
  51. package/src/components/PeriodRange/PeriodRange.module.css +158 -158
  52. package/src/components/PeriodRange/PeriodRange.tsx +130 -130
  53. package/src/components/SearchBar/SearchBar.css +40 -40
  54. package/src/components/SelectFilter/SelectFilter.module.css +249 -0
  55. package/src/components/SelectFilter/SelectFilter.stories.tsx +321 -0
  56. package/src/components/SelectFilter/SelectFilter.tsx +219 -0
  57. package/src/components/SelectFilter/index.ts +2 -0
  58. package/src/components/SelectFilter/types.ts +19 -0
  59. package/src/components/TranslationKey/TranslationKey.css +272 -272
  60. package/src/components/TranslationKey/TranslationKey.tsx +266 -245
  61. package/src/components/TrendList/TrendList.tsx +72 -45
package/src/components/TranslationKey/TranslationKey.css CHANGED
@@ -1,272 +1,272 @@
1
- .translation-card {
2
- background: var(--color-card-background);
3
- border-radius: 0.5rem;
4
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
5
- box-sizing: border-box;
6
- border: 1px solid var(--color-border);
7
- }
8
-
9
- .card-header {
10
- display: flex;
11
- align-items: center;
12
- justify-content: space-between;
13
- padding: 1.5rem;
14
- }
15
-
16
- .card-title {
17
- font-family: var(--font-primary);
18
- font-weight: var(--font-medium);
19
- font-size: var(--text-paragraph);
20
- margin: 0;
21
- }
22
-
23
- .header-actions {
24
- display: flex;
25
- align-items: center;
26
- gap: 0.5rem;
27
- }
28
-
29
- .action-button {
30
- font-family: var(--font-primary);
31
- font-weight: var(--font-normal);
32
- font-size: var(--text-small);
33
- padding: 0.375rem;
34
- color: #9ca3af;
35
- background: none;
36
- border: none;
37
- cursor: pointer;
38
- transition: color 0.2s;
39
- }
40
-
41
- .action-button:hover {
42
- color: #6b7280;
43
- }
44
-
45
- .action-button.delete:hover {
46
- color: #ef4444;
47
- }
48
-
49
- .action-icon {
50
- width: 1rem;
51
- height: 1rem;
52
- }
53
-
54
- .translations-container {
55
- padding: 1.5rem;
56
- }
57
-
58
- .translation-row {
59
- display: flex;
60
- align-items: center;
61
- gap: 1rem;
62
- padding: 0.75rem 1rem;
63
- background: var(--color-content-background);
64
- border-radius: 0.5rem;
65
- margin-bottom: 0.5rem;
66
- }
67
-
68
- .language-code {
69
- font-family: var(--font-primary);
70
- font-weight: var(--font-medium);
71
- font-size: var(--text-small);
72
- width: 2rem;
73
- text-transform: uppercase;
74
- flex-shrink: 0;
75
- }
76
-
77
- .translation-content {
78
- flex: 1;
79
- display: flex;
80
- align-items: center;
81
- gap: 0.5rem;
82
- }
83
-
84
- .translation-text {
85
- font-family: var(--font-primary);
86
- font-weight: var(--font-normal);
87
- font-size: var(--text-small);
88
- flex: 1;
89
- }
90
-
91
- .edit-input,
92
- .translation-input,
93
- .language-select {
94
- font-family: var(--font-primary);
95
- font-weight: var(--font-normal);
96
- font-size: var(--text-small);
97
- flex: 1;
98
- padding: 0.5rem 0.75rem;
99
- border-radius: 0.375rem;
100
- outline: none;
101
- background-color: var(--color-content-background);
102
- color: var(--color-text);
103
- }
104
- .save-button,
105
- .add-button,
106
- .show-add-button {
107
- font-family: var(--font-primary);
108
- font-weight: var(--font-medium);
109
- font-size: var(--text-xs);
110
- }
111
-
112
- .save-button {
113
- padding: 0.375rem 0.75rem;
114
- background-color: var(--color-primary);
115
- color: var(--color-text-on-primary);
116
- border: none;
117
- border-radius: 0.25rem;
118
- cursor: pointer;
119
- transition: background-color 0.2s;
120
- }
121
-
122
- .save-button:hover {
123
- background-color: var(--color-primary);
124
- }
125
-
126
- .cancel-button,
127
- .edit-button,
128
- .delete-translation-button {
129
- font-family: var(--font-primary);
130
- font-weight: var(--font-normal);
131
- font-size: var(--text-small);
132
- }
133
-
134
- .cancel-button {
135
- padding: 0.375rem;
136
- color: #9ca3af;
137
- background: none;
138
- border: none;
139
- cursor: pointer;
140
- transition: color 0.2s;
141
- }
142
-
143
- .cancel-button:hover,
144
- .edit-button:hover {
145
- color: #6b7280;
146
- }
147
-
148
- .edit-button {
149
- padding: 0.25rem;
150
- background: none;
151
- border: none;
152
- cursor: pointer;
153
- transition: color 0.2s;
154
- opacity: 0;
155
- }
156
-
157
- .translation-row:hover .edit-button {
158
- opacity: 1;
159
- }
160
-
161
- .delete-translation-button {
162
- padding: 0.25rem;
163
- color: #9ca3af;
164
- background: none;
165
- border: none;
166
- cursor: pointer;
167
- transition: color 0.2s;
168
- }
169
-
170
- .delete-translation-button:hover {
171
- color: #ef4444;
172
- }
173
-
174
- .add-language-row {
175
- display: flex;
176
- align-items: center;
177
- gap: 1rem;
178
- padding: 0.75rem 1rem;
179
- border-radius: 0.5rem;
180
- margin-bottom: 0.5rem;
181
- flex-wrap: wrap;
182
- }
183
-
184
- .add-language-content {
185
- flex: 1;
186
- display: flex;
187
- align-items: center;
188
- gap: 0.5rem;
189
- flex-wrap: wrap;
190
- min-width: 0;
191
- }
192
-
193
- .language-select-container {
194
- position: relative;
195
- flex: 1;
196
- min-width: 150px;
197
- }
198
-
199
- .select-chevron {
200
- position: absolute;
201
- right: 0.75rem;
202
- top: 50%;
203
- transform: translateY(-50%);
204
- width: 1rem;
205
- height: 1rem;
206
- color: #9ca3af;
207
- pointer-events: none;
208
- }
209
-
210
- .plus-icon {
211
- font-family: var(--font-primary);
212
- font-size: var(--text-lg);
213
- }
214
-
215
- @media (max-width: 640px) {
216
- .add-language-content {
217
- flex-direction: column;
218
- align-items: stretch;
219
- }
220
-
221
- .language-select-container,
222
- .translation-input {
223
- min-width: 100%;
224
- }
225
- }
226
- .show-add-button {
227
- display: inline-flex;
228
- align-items: center;
229
- gap: 6px;
230
- background: none;
231
- border: none;
232
- color: var(--color-primary);
233
- font-size: 16px;
234
- font-weight: 500;
235
- cursor: pointer;
236
- padding: 0;
237
- }
238
-
239
- .show-add-button:hover {
240
- border-bottom: 1px solid var(--color-primary);
241
- }
242
-
243
- input {
244
- color: var(--color-text);
245
- }
246
-
247
- .collapse-button {
248
- background: none;
249
- border: none;
250
- cursor: pointer;
251
- padding: 0.25rem;
252
- margin-right: 0.5rem;
253
- display: flex;
254
- align-items: center;
255
- color: #9ca3af;
256
- transition: color 0.2s;
257
- }
258
-
259
- .collapse-button:hover {
260
- color: #6b7280;
261
- }
262
-
263
- .collapse-icon {
264
- width: 1rem;
265
- height: 1rem;
266
- }
267
-
268
- .header-left {
269
- display: flex;
270
- align-items: center;
271
- gap: 0.5rem;
272
- }
1
+ .translation-card {
2
+ background: var(--color-card-background);
3
+ border-radius: 0.5rem;
4
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
5
+ box-sizing: border-box;
6
+ border: 1px solid var(--color-border);
7
+ }
8
+
9
+ .card-header {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ padding: 1.5rem;
14
+ }
15
+
16
+ .card-title {
17
+ font-family: var(--font-primary);
18
+ font-weight: var(--font-medium);
19
+ font-size: var(--text-paragraph);
20
+ margin: 0;
21
+ }
22
+
23
+ .header-actions {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.5rem;
27
+ }
28
+
29
+ .action-button {
30
+ font-family: var(--font-primary);
31
+ font-weight: var(--font-normal);
32
+ font-size: var(--text-small);
33
+ padding: 0.375rem;
34
+ color: #9ca3af;
35
+ background: none;
36
+ border: none;
37
+ cursor: pointer;
38
+ transition: color 0.2s;
39
+ }
40
+
41
+ .action-button:hover {
42
+ color: #6b7280;
43
+ }
44
+
45
+ .action-button.delete:hover {
46
+ color: #ef4444;
47
+ }
48
+
49
+ .action-icon {
50
+ width: 1rem;
51
+ height: 1rem;
52
+ }
53
+
54
+ .translations-container {
55
+ padding: 1.5rem;
56
+ }
57
+
58
+ .translation-row {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 1rem;
62
+ padding: 0.75rem 1rem;
63
+ background: var(--color-content-background);
64
+ border-radius: 0.5rem;
65
+ margin-bottom: 0.5rem;
66
+ }
67
+
68
+ .language-code {
69
+ font-family: var(--font-primary);
70
+ font-weight: var(--font-medium);
71
+ font-size: var(--text-small);
72
+ width: 2rem;
73
+ text-transform: uppercase;
74
+ flex-shrink: 0;
75
+ }
76
+
77
+ .translation-content {
78
+ flex: 1;
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 0.5rem;
82
+ }
83
+
84
+ .translation-text {
85
+ font-family: var(--font-primary);
86
+ font-weight: var(--font-normal);
87
+ font-size: var(--text-small);
88
+ flex: 1;
89
+ }
90
+
91
+ .edit-input,
92
+ .translation-input,
93
+ .language-select {
94
+ font-family: var(--font-primary);
95
+ font-weight: var(--font-normal);
96
+ font-size: var(--text-small);
97
+ flex: 1;
98
+ padding: 0.5rem 0.75rem;
99
+ border-radius: 0.375rem;
100
+ outline: none;
101
+ background-color: var(--color-content-background);
102
+ color: var(--color-text);
103
+ }
104
+ .save-button,
105
+ .add-button,
106
+ .show-add-button {
107
+ font-family: var(--font-primary);
108
+ font-weight: var(--font-medium);
109
+ font-size: var(--text-xs);
110
+ }
111
+
112
+ .save-button {
113
+ padding: 0.375rem 0.75rem;
114
+ background-color: var(--color-primary);
115
+ color: var(--color-text-on-primary);
116
+ border: none;
117
+ border-radius: 0.25rem;
118
+ cursor: pointer;
119
+ transition: background-color 0.2s;
120
+ }
121
+
122
+ .save-button:hover {
123
+ background-color: var(--color-primary);
124
+ }
125
+
126
+ .cancel-button,
127
+ .edit-button,
128
+ .delete-translation-button {
129
+ font-family: var(--font-primary);
130
+ font-weight: var(--font-normal);
131
+ font-size: var(--text-small);
132
+ }
133
+
134
+ .cancel-button {
135
+ padding: 0.375rem;
136
+ color: #9ca3af;
137
+ background: none;
138
+ border: none;
139
+ cursor: pointer;
140
+ transition: color 0.2s;
141
+ }
142
+
143
+ .cancel-button:hover,
144
+ .edit-button:hover {
145
+ color: #6b7280;
146
+ }
147
+
148
+ .edit-button {
149
+ padding: 0.25rem;
150
+ background: none;
151
+ border: none;
152
+ cursor: pointer;
153
+ transition: color 0.2s;
154
+ opacity: 0;
155
+ }
156
+
157
+ .translation-row:hover .edit-button {
158
+ opacity: 1;
159
+ }
160
+
161
+ .delete-translation-button {
162
+ padding: 0.25rem;
163
+ color: #9ca3af;
164
+ background: none;
165
+ border: none;
166
+ cursor: pointer;
167
+ transition: color 0.2s;
168
+ }
169
+
170
+ .delete-translation-button:hover {
171
+ color: #ef4444;
172
+ }
173
+
174
+ .add-language-row {
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 1rem;
178
+ padding: 0.75rem 1rem;
179
+ border-radius: 0.5rem;
180
+ margin-bottom: 0.5rem;
181
+ flex-wrap: wrap;
182
+ }
183
+
184
+ .add-language-content {
185
+ flex: 1;
186
+ display: flex;
187
+ align-items: center;
188
+ gap: 0.5rem;
189
+ flex-wrap: wrap;
190
+ min-width: 0;
191
+ }
192
+
193
+ .language-select-container {
194
+ position: relative;
195
+ flex: 1;
196
+ min-width: 150px;
197
+ }
198
+
199
+ .select-chevron {
200
+ position: absolute;
201
+ right: 0.75rem;
202
+ top: 50%;
203
+ transform: translateY(-50%);
204
+ width: 1rem;
205
+ height: 1rem;
206
+ color: #9ca3af;
207
+ pointer-events: none;
208
+ }
209
+
210
+ .plus-icon {
211
+ font-family: var(--font-primary);
212
+ font-size: var(--text-lg);
213
+ }
214
+
215
+ @media (max-width: 640px) {
216
+ .add-language-content {
217
+ flex-direction: column;
218
+ align-items: stretch;
219
+ }
220
+
221
+ .language-select-container,
222
+ .translation-input {
223
+ min-width: 100%;
224
+ }
225
+ }
226
+ .show-add-button {
227
+ display: inline-flex;
228
+ align-items: center;
229
+ gap: 6px;
230
+ background: none;
231
+ border: none;
232
+ color: var(--color-primary);
233
+ font-size: 16px;
234
+ font-weight: 500;
235
+ cursor: pointer;
236
+ padding: 0;
237
+ }
238
+
239
+ .show-add-button:hover {
240
+ border-bottom: 1px solid var(--color-primary);
241
+ }
242
+
243
+ input {
244
+ color: var(--color-text);
245
+ }
246
+
247
+ .collapse-button {
248
+ background: none;
249
+ border: none;
250
+ cursor: pointer;
251
+ padding: 0.25rem;
252
+ margin-right: 0.5rem;
253
+ display: flex;
254
+ align-items: center;
255
+ color: #9ca3af;
256
+ transition: color 0.2s;
257
+ }
258
+
259
+ .collapse-button:hover {
260
+ color: #6b7280;
261
+ }
262
+
263
+ .collapse-icon {
264
+ width: 1rem;
265
+ height: 1rem;
266
+ }
267
+
268
+ .header-left {
269
+ display: flex;
270
+ align-items: center;
271
+ gap: 0.5rem;
272
+ }