1mpacto-react-ui 0.2.0-beta.9 → 2.0.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 (158) hide show
  1. package/dist/assets/_colors.scss +80 -0
  2. package/dist/assets/_mixins.scss +32 -5
  3. package/dist/assets/_typography.scss +582 -0
  4. package/dist/assets/colors.css +40 -0
  5. package/dist/assets/core.css +1 -1
  6. package/dist/assets/fontfamily.css +1 -1
  7. package/dist/assets/fonts/PlusJakartaSans-Italic.ttf +0 -0
  8. package/dist/assets/fonts/PlusJakartaSans.ttf +0 -0
  9. package/dist/assets/style.css +1 -1
  10. package/dist/assets/typography.css +96 -0
  11. package/dist/index.cjs +108 -96
  12. package/dist/index.d.ts +2 -0
  13. package/dist/index.mjs +16743 -15220
  14. package/dist/package.json.d.ts +1 -1
  15. package/dist/src/components/Badges/Badges.config.d.ts +57 -0
  16. package/dist/src/components/Badges/Badges.stories.d.ts +115 -1
  17. package/dist/src/components/Breadcrumbs/Breadcrumbs.config.d.ts +113 -0
  18. package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
  19. package/dist/src/components/Breadcrumbs/Breadcrumbs.stories.d.ts +219 -5
  20. package/dist/src/components/Button/Button.config.d.ts +70 -0
  21. package/dist/src/components/Button/Button.stories.d.ts +127 -3
  22. package/dist/src/components/ButtonIcon/ButtonIcon.config.d.ts +53 -0
  23. package/dist/src/components/ButtonIcon/ButtonIcon.stories.d.ts +121 -3
  24. package/dist/src/components/ButtonPopover/ButtonPopover.stories.d.ts +256 -1
  25. package/dist/src/components/Calendar/Calendar.d.ts +2 -1
  26. package/dist/src/components/Calendar/Calendar.stories.d.ts +281 -1
  27. package/dist/src/components/Chart/GradientBarChart.stories.d.ts +67 -1
  28. package/dist/src/components/Chart/GradientLineChart.stories.d.ts +78 -1
  29. package/dist/src/components/Chart/LineChart.stories.d.ts +33 -1
  30. package/dist/src/components/Chips/Chips.config.d.ts +35 -0
  31. package/dist/src/components/Chips/Chips.stories.d.ts +135 -1
  32. package/dist/src/components/Collapse/Collapse.stories.d.ts +87 -1
  33. package/dist/src/components/Collapse/CollapseV2.stories.d.ts +57 -1
  34. package/dist/src/components/DatePicker/DatePicker.stories.d.ts +219 -1
  35. package/dist/src/components/DatePicker/FilterDate.d.ts +1 -1
  36. package/dist/src/components/DatePicker/FilterDate.stories.d.ts +230 -2
  37. package/dist/src/components/DatePicker/MonthYearPicker.stories.d.ts +196 -1
  38. package/dist/src/components/ErrorMessage/ErrorMessage.config.d.ts +8 -0
  39. package/dist/src/components/ErrorMessage/ErrorMessage.stories.d.ts +37 -1
  40. package/dist/src/components/FilterContainer/FilterContainer.stories.d.ts +164 -0
  41. package/dist/src/components/Input/InputFloatingInner.config.d.ts +9 -0
  42. package/dist/src/components/Input/InputFloatingInner.stories.d.ts +175 -5
  43. package/dist/src/components/Input/InputInnerLabel.config.d.ts +8 -0
  44. package/dist/src/components/Input/InputInnerLabel.d.ts +4 -0
  45. package/dist/src/components/Input/InputInnerLabel.stories.d.ts +204 -0
  46. package/dist/src/components/Input/InputNative.config.d.ts +9 -0
  47. package/dist/src/components/Input/InputNative.stories.d.ts +147 -4
  48. package/dist/src/components/Input/InputReguler.config.d.ts +9 -0
  49. package/dist/src/components/Input/InputReguler.stories.d.ts +175 -5
  50. package/dist/src/components/Modal/ModalDialog.config.d.ts +9 -0
  51. package/dist/src/components/Modal/ModalDialog.stories.d.ts +119 -1
  52. package/dist/src/components/NumberFormat/NumberFormat.stories.d.ts +371 -17
  53. package/dist/src/components/Pagination/Pagination.config.d.ts +5 -0
  54. package/dist/src/components/Pagination/Pagination.d.ts +1 -1
  55. package/dist/src/components/Pagination/Pagination.stories.d.ts +198 -2
  56. package/dist/src/components/Popover/Popover.stories.d.ts +212 -4
  57. package/dist/src/components/PortalComponent/PortalComponent.stories.d.ts +60 -0
  58. package/dist/src/components/RadioCheckbox/RadioCheckbox.config.d.ts +41 -0
  59. package/dist/src/components/RadioCheckbox/RadioCheckbox.stories.d.ts +228 -7
  60. package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.config.d.ts +25 -0
  61. package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.stories.d.ts +194 -3
  62. package/dist/src/components/SelectDropdownContainer/SelectDropdownContainer.config.d.ts +26 -0
  63. package/dist/src/components/SelectDropdownContainer/styleConfig.d.ts +4 -1
  64. package/dist/src/components/Sidebar/ItemSidebar.config.d.ts +34 -0
  65. package/dist/src/components/Sidebar/Sidebar.config.d.ts +16 -0
  66. package/dist/src/components/Step/Step.stories.d.ts +133 -1
  67. package/dist/src/components/Step/StepIndicator.stories.d.ts +146 -1
  68. package/dist/src/components/Switch/Switch.config.d.ts +26 -0
  69. package/dist/src/components/Switch/Switch.stories.d.ts +126 -1
  70. package/dist/src/components/Table/Table.config.d.ts +4 -0
  71. package/dist/src/components/Table/Table.d.ts +2 -3
  72. package/dist/src/components/Table/Table.stories.d.ts +69 -51
  73. package/dist/src/components/Table/TableSubMobile.d.ts +3 -0
  74. package/dist/src/components/Tabs/Tabs.config.d.ts +31 -0
  75. package/dist/src/components/Tabs/Tabs.d.ts +1 -1
  76. package/dist/src/components/Tabs/Tabs.stories.d.ts +218 -2
  77. package/dist/src/components/TextEditor/TextEditor.stories.d.ts +57 -9
  78. package/dist/src/components/Textarea/Textarea.config.d.ts +31 -0
  79. package/dist/src/components/Textarea/Textarea.stories.d.ts +248 -2
  80. package/dist/src/components/Textarea/TextareaFloatingInner.config.d.ts +6 -0
  81. package/dist/src/components/Textarea/TextareaFloatingInner.stories.d.ts +258 -2
  82. package/dist/src/components/Textarea/TextareaInnerLabel.config.d.ts +7 -0
  83. package/dist/src/components/Textarea/TextareaInnerLabel.d.ts +4 -0
  84. package/dist/src/components/Textarea/TextareaInnerLabel.stories.d.ts +258 -0
  85. package/dist/src/components/TimeRange/TimeRange.d.ts +3 -0
  86. package/dist/src/components/TimeRange/TimeRange.stories.d.ts +185 -0
  87. package/dist/src/components/Timeline/Timeline.stories.d.ts +38 -1
  88. package/dist/src/components/Tooltip/Tooltip.stories.d.ts +157 -1
  89. package/dist/src/components/TruncateComponent/TruncateComponent.stories.d.ts +104 -1
  90. package/dist/src/components/Upload/UploadFile.stories.d.ts +125 -1
  91. package/dist/src/components/Upload/UploadImage.d.ts +1 -1
  92. package/dist/src/components/Upload/UploadImage.stories.d.ts +143 -2
  93. package/dist/src/components/Upload/UploadMultipleFile.d.ts +1 -1
  94. package/dist/src/components/Upload/UploadMultipleFile.stories.d.ts +188 -2
  95. package/dist/src/components/Virtualization/ListVirtualization.stories.d.ts +277 -1
  96. package/dist/src/components/Virtualization/TableVirtualization.stories.d.ts +294 -1
  97. package/dist/src/components/index.d.ts +14 -8
  98. package/dist/src/components/screens/Screens.stories.d.ts +13 -0
  99. package/dist/src/config/components/borderRadius.d.ts +1 -0
  100. package/dist/src/config/components/font.d.ts +7 -0
  101. package/dist/src/config/components/gap.d.ts +1 -0
  102. package/dist/src/config/components/typography.d.ts +3 -49
  103. package/dist/src/config/tailwind/index.d.ts +2 -1
  104. package/dist/src/config/tailwind/nativeScreen.d.ts +3 -0
  105. package/dist/src/config/tailwind/typography.d.ts +1 -0
  106. package/dist/src/hooks/index.d.ts +5 -3
  107. package/dist/src/hooks/useAsyncDebounce.d.ts +9 -0
  108. package/dist/src/hooks/useCombinedResizeObserver.d.ts +66 -0
  109. package/dist/src/hooks/useCountdown.d.ts +67 -3
  110. package/dist/src/hooks/useDeepCompareEffect.d.ts +13 -0
  111. package/dist/src/hooks/useElementOrWindowMediaQuery.d.ts +9 -0
  112. package/dist/src/hooks/useEventListener.d.ts +27 -0
  113. package/dist/src/hooks/useMasonry.d.ts +79 -0
  114. package/dist/src/hooks/useMergeRefs.d.ts +26 -0
  115. package/dist/src/hooks/useOtpInput.d.ts +199 -0
  116. package/dist/src/hooks/useStateRef.d.ts +8 -0
  117. package/dist/src/interfaces/components/Alert/index.d.ts +8 -0
  118. package/dist/src/interfaces/components/Badges/index.d.ts +30 -1
  119. package/dist/src/interfaces/components/Breadcrumbs/index.d.ts +85 -2
  120. package/dist/src/interfaces/components/Button/index.d.ts +46 -2
  121. package/dist/src/interfaces/components/ButtonIcon/index.d.ts +36 -0
  122. package/dist/src/interfaces/components/ButtonPopover/index.d.ts +78 -0
  123. package/dist/src/interfaces/components/Calendar/index.d.ts +384 -3
  124. package/dist/src/interfaces/components/Chart/index.d.ts +460 -0
  125. package/dist/src/interfaces/components/Checkbox/index.d.ts +12 -0
  126. package/dist/src/interfaces/components/Chips/index.d.ts +38 -1
  127. package/dist/src/interfaces/components/Collapse/index.d.ts +60 -0
  128. package/dist/src/interfaces/components/DatePicker/index.d.ts +277 -1
  129. package/dist/src/interfaces/components/ErrorMessage/index.d.ts +17 -1
  130. package/dist/src/interfaces/components/FilterContainer/index.d.ts +102 -0
  131. package/dist/src/interfaces/components/Input/index.d.ts +193 -0
  132. package/dist/src/interfaces/components/Modal/index.d.ts +45 -0
  133. package/dist/src/interfaces/components/NumberFormat/index.d.ts +25 -0
  134. package/dist/src/interfaces/components/Pagination/index.d.ts +83 -0
  135. package/dist/src/interfaces/components/Popover/index.d.ts +98 -1
  136. package/dist/src/interfaces/components/RadioCheckbox/RadioCheckbox.d.ts +59 -2
  137. package/dist/src/interfaces/components/RadioCheckbox/RadioCheckboxLabel.d.ts +46 -1
  138. package/dist/src/interfaces/components/SelectDropdownContainer/index.d.ts +196 -2
  139. package/dist/src/interfaces/components/Sidebar/index.d.ts +229 -1
  140. package/dist/src/interfaces/components/Step/index.d.ts +153 -0
  141. package/dist/src/interfaces/components/Switch/index.d.ts +54 -1
  142. package/dist/src/interfaces/components/Table/index.d.ts +402 -6
  143. package/dist/src/interfaces/components/Tabs/index.d.ts +130 -1
  144. package/dist/src/interfaces/components/TextEditor/index.d.ts +12 -0
  145. package/dist/src/interfaces/components/Textarea/index.d.ts +169 -0
  146. package/dist/src/interfaces/components/TimeRange/index.d.ts +128 -0
  147. package/dist/src/interfaces/components/Timeline/index.d.ts +36 -0
  148. package/dist/src/interfaces/components/Tooltip/index.d.ts +56 -0
  149. package/dist/src/interfaces/components/TruncateComponent/index.d.ts +34 -0
  150. package/dist/src/interfaces/components/UploadFile/index.d.ts +186 -0
  151. package/dist/src/interfaces/components/Virtualization/ListVirtualization.d.ts +138 -0
  152. package/dist/src/interfaces/components/Virtualization/TableVirtualization.d.ts +143 -0
  153. package/dist/src/utils/common.d.ts +4 -4
  154. package/dist/src/utils/constant.d.ts +1 -0
  155. package/dist/types-external/table.d.ts +3 -0
  156. package/package.json +1 -1
  157. package/dist/index.cjs.map +0 -1
  158. package/dist/index.mjs.map +0 -1
@@ -1,68 +1,284 @@
1
1
  import { ChartArea, ChartData, ChartDataset, ChartOptions, CoreScaleOptions, Scale, TooltipItem } from 'chart.js';
2
2
  import { default as React } from 'react';
3
+ /**
4
+ * [ID] : Opsi untuk grafik donat.
5
+ * [EN] : Options for doughnut chart.
6
+ */
3
7
  export type TOptionsDoughnutChart = ChartOptions<'doughnut'>;
8
+ /**
9
+ * [ID] : Interface untuk data grafik donat.
10
+ * [EN] : Interface for doughnut chart data.
11
+ */
4
12
  export interface IDataDoughnutChart {
13
+ /**
14
+ * [ID] : Properti dinamis lainnya.
15
+ * [EN] : Other dynamic properties.
16
+ */
5
17
  [key: string]: unknown;
18
+ /**
19
+ * [ID] : Nilai data.
20
+ * [EN] : Data value.
21
+ */
6
22
  value: string | number;
23
+ /**
24
+ * [ID] : Judul data.
25
+ * [EN] : Data title.
26
+ */
7
27
  title: string;
28
+ /**
29
+ * [ID] : Nilai asli (opsional).
30
+ * [EN] : Original value (optional).
31
+ */
8
32
  originalValue?: string | number;
33
+ /**
34
+ * [ID] : Warna latar belakang (opsional).
35
+ * [EN] : Background color (optional).
36
+ */
9
37
  backgroundColor?: string;
10
38
  }
39
+ /**
40
+ * [ID] : Interface untuk label dalam grafik donat.
41
+ * [EN] : Interface for inner label of doughnut chart.
42
+ */
11
43
  export interface IDataInnerLabelDoughnutChart {
44
+ /**
45
+ * [ID] : ID label.
46
+ * [EN] : Label ID.
47
+ */
12
48
  id: string;
49
+ /**
50
+ * [ID] : Teks label.
51
+ * [EN] : Label text.
52
+ */
13
53
  text: string;
54
+ /**
55
+ * [ID] : Konfigurasi font (opsional).
56
+ * [EN] : Font configuration (optional).
57
+ */
14
58
  font?: {
59
+ /**
60
+ * [ID] : Ukuran font.
61
+ * [EN] : Font size.
62
+ */
15
63
  size: number;
64
+ /**
65
+ * [ID] : Tinggi baris.
66
+ * [EN] : Line height.
67
+ */
16
68
  lineHeight: number;
17
69
  };
70
+ /**
71
+ * [ID] : Persentase (opsional).
72
+ * [EN] : Percentage (optional).
73
+ */
18
74
  percentage?: string;
75
+ /**
76
+ * [ID] : Warna teks (opsional).
77
+ * [EN] : Text color (optional).
78
+ */
19
79
  color?: string;
80
+ /**
81
+ * [ID] : URL ikon deskripsi (opsional).
82
+ * [EN] : Description icon URL (optional).
83
+ */
20
84
  urlIconDesc?: string;
21
85
  }
86
+ /**
87
+ * [ID] : Interface untuk komponen grafik donat.
88
+ * [EN] : Interface for doughnut chart component.
89
+ */
22
90
  export interface IDoughnutChart {
91
+ /**
92
+ * [ID] : Data grafik.
93
+ * [EN] : Chart data.
94
+ */
23
95
  data: IDataDoughnutChart[];
96
+ /**
97
+ * [ID] : Lebar donat bagian dalam.
98
+ * [EN] : Inner doughnut width.
99
+ */
24
100
  widthInnerDoughnut: number;
101
+ /**
102
+ * [ID] : Label bagian dalam.
103
+ * [EN] : Inner labels.
104
+ */
25
105
  innerLabels: IDataInnerLabelDoughnutChart[];
106
+ /**
107
+ * [ID] : Status terbuka (opsional).
108
+ * [EN] : Open status (optional).
109
+ */
26
110
  open?: boolean;
111
+ /**
112
+ * [ID] : Label-label grafik (opsional).
113
+ * [EN] : Chart labels (optional).
114
+ */
27
115
  labels?: string[];
116
+ /**
117
+ * [ID] : Warna latar belakang (opsional).
118
+ * [EN] : Background colors (optional).
119
+ */
28
120
  backgroundColor?: string[];
121
+ /**
122
+ * [ID] : Opsi grafik (opsional).
123
+ * [EN] : Chart options (optional).
124
+ */
29
125
  options?: TOptionsDoughnutChart;
126
+ /**
127
+ * [ID] : Menggambar ulang grafik (opsional).
128
+ * [EN] : Redraw chart (optional).
129
+ */
30
130
  redraw?: boolean;
131
+ /**
132
+ * [ID] : Kunci untuk label (opsional).
133
+ * [EN] : Key for label (optional).
134
+ */
31
135
  keyLabel?: string;
136
+ /**
137
+ * [ID] : Kunci untuk nilai (opsional).
138
+ * [EN] : Key for value (optional).
139
+ */
32
140
  keyValue?: string;
141
+ /**
142
+ * [ID] : Kunci untuk menghapus data saat terbuka (opsional).
143
+ * [EN] : Key to remove data when open (optional).
144
+ */
33
145
  keyRemoveDataOpen?: string;
146
+ /**
147
+ * [ID] : Kunci untuk latar belakang (opsional).
148
+ * [EN] : Key for background (optional).
149
+ */
34
150
  keyBackground?: string;
151
+ /**
152
+ * [ID] : Nama kelas CSS (opsional).
153
+ * [EN] : CSS class name (optional).
154
+ */
35
155
  className?: string;
36
156
  }
157
+ /**
158
+ * [ID] : Interface untuk data grafik garis.
159
+ * [EN] : Interface for line chart data.
160
+ */
37
161
  export interface IDataLineChart {
162
+ /**
163
+ * [ID] : Menandakan data saat ini.
164
+ * [EN] : Indicates current data.
165
+ */
38
166
  isCurrent: boolean;
167
+ /**
168
+ * [ID] : Menandakan data terakhir.
169
+ * [EN] : Indicates last data.
170
+ */
39
171
  isLast: boolean;
172
+ /**
173
+ * [ID] : Label data.
174
+ * [EN] : Data label.
175
+ */
40
176
  label: string;
177
+ /**
178
+ * [ID] : Nilai data (bisa null).
179
+ * [EN] : Data value (can be null).
180
+ */
41
181
  value: number | null;
182
+ /**
183
+ * [ID] : Tahun data.
184
+ * [EN] : Data year.
185
+ */
42
186
  year: number;
43
187
  }
188
+ /**
189
+ * [ID] : Interface untuk komponen grafik garis.
190
+ * [EN] : Interface for line chart component.
191
+ */
44
192
  export interface ILineChart {
193
+ /**
194
+ * [ID] : Data grafik.
195
+ * [EN] : Chart data.
196
+ */
45
197
  data: IDataLineChart[];
198
+ /**
199
+ * [ID] : Nama kelas CSS (opsional).
200
+ * [EN] : CSS class name (optional).
201
+ */
46
202
  className?: string;
203
+ /**
204
+ * [ID] : Tinggi grafik (opsional).
205
+ * [EN] : Chart height (optional).
206
+ */
47
207
  height?: number;
48
208
  }
49
209
  type TGradientLineChartScales = Record<string, Scale<CoreScaleOptions>>;
50
210
  type TGradientLineChartGradientFor = 'background' | 'border';
211
+ /**
212
+ * [ID] : Parameter untuk mengatur gradien grafik garis.
213
+ * [EN] : Parameters to set gradient line chart.
214
+ */
51
215
  export interface TSetGradientLineParams {
216
+ /**
217
+ * [ID] : Konteks rendering canvas.
218
+ * [EN] : Canvas rendering context.
219
+ */
52
220
  ctx: CanvasRenderingContext2D;
221
+ /**
222
+ * [ID] : Area grafik.
223
+ * [EN] : Chart area.
224
+ */
53
225
  chartArea: ChartArea;
226
+ /**
227
+ * [ID] : Skala grafik.
228
+ * [EN] : Chart scales.
229
+ */
54
230
  scales: TGradientLineChartScales;
231
+ /**
232
+ * [ID] : Tinggi grafik.
233
+ * [EN] : Chart height.
234
+ */
55
235
  chartHeight: number;
236
+ /**
237
+ * [ID] : Target gradien (background atau border).
238
+ * [EN] : Gradient target (background or border).
239
+ */
56
240
  gradientFor: TGradientLineChartGradientFor;
241
+ /**
242
+ * [ID] : Dataset item.
243
+ * [EN] : Dataset item.
244
+ */
57
245
  item: IGradientLineChartDataSet;
58
246
  }
247
+ /**
248
+ * [ID] : Parameter untuk mendapatkan gradien grafik garis.
249
+ * [EN] : Parameters to get gradient line chart.
250
+ */
59
251
  export interface TGetGradientLineParams {
252
+ /**
253
+ * [ID] : Konteks rendering canvas.
254
+ * [EN] : Canvas rendering context.
255
+ */
60
256
  ctx: CanvasRenderingContext2D;
257
+ /**
258
+ * [ID] : Area grafik.
259
+ * [EN] : Chart area.
260
+ */
61
261
  chartArea: ChartArea;
262
+ /**
263
+ * [ID] : Skala grafik.
264
+ * [EN] : Chart scales.
265
+ */
62
266
  scales: TGradientLineChartScales;
267
+ /**
268
+ * [ID] : Target gradien.
269
+ * [EN] : Gradient target.
270
+ */
63
271
  gradientFor: TGradientLineChartGradientFor;
272
+ /**
273
+ * [ID] : Dataset item.
274
+ * [EN] : Dataset item.
275
+ */
64
276
  item: IGradientLineChartDataSet;
65
277
  }
278
+ /**
279
+ * [ID] : Tipe komponen tooltip kustom untuk grafik garis gradien.
280
+ * [EN] : Custom tooltip component type for gradient line chart.
281
+ */
66
282
  export type TGradientLineChartCustomTooltip = React.ComponentType<{
67
283
  label: string;
68
284
  dataset: string;
@@ -70,49 +286,193 @@ export type TGradientLineChartCustomTooltip = React.ComponentType<{
70
286
  style: React.CSSProperties;
71
287
  dataPoints: TooltipItem<'line'>[];
72
288
  }>;
289
+ /**
290
+ * [ID] : Interface untuk dataset grafik garis gradien.
291
+ * [EN] : Interface for gradient line chart dataset.
292
+ */
73
293
  export interface IGradientLineChartDataSet extends ChartDataset<'line'> {
294
+ /**
295
+ * [ID] : Warna background positif nol (opsional).
296
+ * [EN] : Positive zero background color (optional).
297
+ */
74
298
  colorBackgroundPositiveZero?: string;
299
+ /**
300
+ * [ID] : Warna background persentase positif (opsional).
301
+ * [EN] : Positive percentage background color (optional).
302
+ */
75
303
  colorBackgroundPositivePercentage?: string;
304
+ /**
305
+ * [ID] : Warna background negatif satu (opsional).
306
+ * [EN] : Negative one background color (optional).
307
+ */
76
308
  colorBackgroundNegativeOne?: string;
309
+ /**
310
+ * [ID] : Warna background persentase negatif (opsional).
311
+ * [EN] : Negative percentage background color (optional).
312
+ */
77
313
  colorBackgroundNegativePercentage?: string;
314
+ /**
315
+ * [ID] : Warna border positif (opsional).
316
+ * [EN] : Positive border color (optional).
317
+ */
78
318
  colorBorderPositive?: string;
319
+ /**
320
+ * [ID] : Warna border negatif (opsional).
321
+ * [EN] : Negative border color (optional).
322
+ */
79
323
  colorBorderNegative?: string;
80
324
  }
325
+ /**
326
+ * [ID] : Interface untuk data grafik garis gradien.
327
+ * [EN] : Interface for gradient line chart data.
328
+ */
81
329
  export interface IGradientLineChartData extends Omit<ChartData<'line'>, 'datasets'> {
330
+ /**
331
+ * [ID] : Kumpulan dataset.
332
+ * [EN] : Collection of datasets.
333
+ */
82
334
  datasets: IGradientLineChartDataSet[];
83
335
  }
336
+ /**
337
+ * [ID] : Interface untuk komponen grafik garis gradien.
338
+ * [EN] : Interface for gradient line chart component.
339
+ */
84
340
  export interface IGradientLineChart {
341
+ /**
342
+ * [ID] : Data grafik.
343
+ * [EN] : Chart data.
344
+ */
85
345
  data: IGradientLineChartData;
346
+ /**
347
+ * [ID] : Opsi grafik (opsional).
348
+ * [EN] : Chart options (optional).
349
+ */
86
350
  options?: ChartOptions<'line'>;
351
+ /**
352
+ * [ID] : ID grafik.
353
+ * [EN] : Chart ID.
354
+ */
87
355
  id: string;
356
+ /**
357
+ * [ID] : Nama kelas CSS kontainer (opsional).
358
+ * [EN] : Container CSS class name (optional).
359
+ */
88
360
  classNameContainer?: string;
361
+ /**
362
+ * [ID] : Tinggi grafik (opsional).
363
+ * [EN] : Chart height (optional).
364
+ */
89
365
  height?: number;
366
+ /**
367
+ * [ID] : Tooltip kustom (opsional).
368
+ * [EN] : Custom tooltip (optional).
369
+ */
90
370
  CustomTooltip?: TGradientLineChartCustomTooltip;
91
371
  }
372
+ /**
373
+ * [ID] : Interface untuk data tooltip kustom grafik garis gradien.
374
+ * [EN] : Interface for gradient line chart custom tooltip data.
375
+ */
92
376
  export interface IDataGradientLineChartCustomTooltip {
377
+ /**
378
+ * [ID] : Gaya CSS.
379
+ * [EN] : CSS style.
380
+ */
93
381
  style: React.CSSProperties;
382
+ /**
383
+ * [ID] : Label tooltip.
384
+ * [EN] : Tooltip label.
385
+ */
94
386
  label: string;
387
+ /**
388
+ * [ID] : Dataset tooltip.
389
+ * [EN] : Tooltip dataset.
390
+ */
95
391
  dataset: string;
392
+ /**
393
+ * [ID] : Nilai tooltip.
394
+ * [EN] : Tooltip value.
395
+ */
96
396
  value: number;
397
+ /**
398
+ * [ID] : Titik data tooltip.
399
+ * [EN] : Tooltip data points.
400
+ */
97
401
  dataPoints: TooltipItem<'line'>[];
98
402
  }
99
403
  type TGradientBarChartScales = Record<string, Scale<CoreScaleOptions>>;
100
404
  type TGradientBarChartGradientFor = 'background' | 'border';
405
+ /**
406
+ * [ID] : Parameter untuk mengatur gradien grafik batang.
407
+ * [EN] : Parameters to set gradient bar chart.
408
+ */
101
409
  export interface TSetGradientBarParams {
410
+ /**
411
+ * [ID] : Konteks rendering canvas.
412
+ * [EN] : Canvas rendering context.
413
+ */
102
414
  ctx: CanvasRenderingContext2D;
415
+ /**
416
+ * [ID] : Area grafik.
417
+ * [EN] : Chart area.
418
+ */
103
419
  chartArea: ChartArea;
420
+ /**
421
+ * [ID] : Skala grafik.
422
+ * [EN] : Chart scales.
423
+ */
104
424
  scales: TGradientBarChartScales;
425
+ /**
426
+ * [ID] : Tinggi grafik.
427
+ * [EN] : Chart height.
428
+ */
105
429
  chartHeight: number;
430
+ /**
431
+ * [ID] : Target gradien.
432
+ * [EN] : Gradient target.
433
+ */
106
434
  gradientFor: TGradientBarChartGradientFor;
435
+ /**
436
+ * [ID] : Dataset item.
437
+ * [EN] : Dataset item.
438
+ */
107
439
  item: IGradientBarChartDataSet;
108
440
  }
441
+ /**
442
+ * [ID] : Parameter untuk mendapatkan gradien grafik batang.
443
+ * [EN] : Parameters to get gradient bar chart.
444
+ */
109
445
  export interface TGetGradientBarParams {
446
+ /**
447
+ * [ID] : Konteks rendering canvas.
448
+ * [EN] : Canvas rendering context.
449
+ */
110
450
  ctx: CanvasRenderingContext2D;
451
+ /**
452
+ * [ID] : Area grafik.
453
+ * [EN] : Chart area.
454
+ */
111
455
  chartArea: ChartArea;
456
+ /**
457
+ * [ID] : Skala grafik.
458
+ * [EN] : Chart scales.
459
+ */
112
460
  scales: TGradientBarChartScales;
461
+ /**
462
+ * [ID] : Target gradien.
463
+ * [EN] : Gradient target.
464
+ */
113
465
  gradientFor: TGradientBarChartGradientFor;
466
+ /**
467
+ * [ID] : Dataset item.
468
+ * [EN] : Dataset item.
469
+ */
114
470
  item: IGradientBarChartDataSet;
115
471
  }
472
+ /**
473
+ * [ID] : Tipe komponen tooltip kustom untuk grafik batang gradien.
474
+ * [EN] : Custom tooltip component type for gradient bar chart.
475
+ */
116
476
  export type TGradientBarChartCustomTooltip = React.ComponentType<{
117
477
  label: string;
118
478
  dataset: string;
@@ -120,33 +480,133 @@ export type TGradientBarChartCustomTooltip = React.ComponentType<{
120
480
  style: React.CSSProperties;
121
481
  dataPoints: TooltipItem<'bar'>[];
122
482
  }>;
483
+ /**
484
+ * [ID] : Interface untuk dataset grafik batang gradien.
485
+ * [EN] : Interface for gradient bar chart dataset.
486
+ */
123
487
  export interface IGradientBarChartDataSet extends ChartDataset<'bar'> {
488
+ /**
489
+ * [ID] : Warna background positif nol (opsional).
490
+ * [EN] : Positive zero background color (optional).
491
+ */
124
492
  colorBackgroundPositiveZero?: string;
493
+ /**
494
+ * [ID] : Warna background persentase positif (opsional).
495
+ * [EN] : Positive percentage background color (optional).
496
+ */
125
497
  colorBackgroundPositivePercentage?: string;
498
+ /**
499
+ * [ID] : Warna background negatif satu (opsional).
500
+ * [EN] : Negative one background color (optional).
501
+ */
126
502
  colorBackgroundNegativeOne?: string;
503
+ /**
504
+ * [ID] : Warna background persentase negatif (opsional).
505
+ * [EN] : Negative percentage background color (optional).
506
+ */
127
507
  colorBackgroundNegativePercentage?: string;
508
+ /**
509
+ * [ID] : Warna border positif (opsional).
510
+ * [EN] : Positive border color (optional).
511
+ */
128
512
  colorBorderPositive?: string;
513
+ /**
514
+ * [ID] : Warna border negatif (opsional).
515
+ * [EN] : Negative border color (optional).
516
+ */
129
517
  colorBorderNegative?: string;
518
+ /**
519
+ * [ID] : Warna teks label positif (opsional).
520
+ * [EN] : Positive label text color (optional).
521
+ */
130
522
  colorTextLabelPositive?: string;
523
+ /**
524
+ * [ID] : Warna teks label negatif (opsional).
525
+ * [EN] : Negative label text color (optional).
526
+ */
131
527
  colorTextLabelNegative?: string;
528
+ /**
529
+ * [ID] : Mengatur digit (opsional).
530
+ * [EN] : Set digit (optional).
531
+ */
132
532
  setDigit?: boolean;
133
533
  }
534
+ /**
535
+ * [ID] : Interface untuk data grafik batang gradien.
536
+ * [EN] : Interface for gradient bar chart data.
537
+ */
134
538
  export interface IGradientBarChartData extends Omit<ChartData<'bar'>, 'datasets'> {
539
+ /**
540
+ * [ID] : Kumpulan dataset.
541
+ * [EN] : Collection of datasets.
542
+ */
135
543
  datasets: IGradientBarChartDataSet[];
136
544
  }
545
+ /**
546
+ * [ID] : Interface untuk komponen grafik batang gradien.
547
+ * [EN] : Interface for gradient bar chart component.
548
+ */
137
549
  export interface IGradientBarChart {
550
+ /**
551
+ * [ID] : Data grafik.
552
+ * [EN] : Chart data.
553
+ */
138
554
  data: IGradientBarChartData;
555
+ /**
556
+ * [ID] : Opsi grafik (opsional).
557
+ * [EN] : Chart options (optional).
558
+ */
139
559
  options?: ChartOptions<'bar'>;
560
+ /**
561
+ * [ID] : ID grafik.
562
+ * [EN] : Chart ID.
563
+ */
140
564
  id: string;
565
+ /**
566
+ * [ID] : Nama kelas CSS kontainer (opsional).
567
+ * [EN] : Container CSS class name (optional).
568
+ */
141
569
  classNameContainer?: string;
570
+ /**
571
+ * [ID] : Tinggi grafik (opsional).
572
+ * [EN] : Chart height (optional).
573
+ */
142
574
  height?: number;
575
+ /**
576
+ * [ID] : Tooltip kustom (opsional).
577
+ * [EN] : Custom tooltip (optional).
578
+ */
143
579
  CustomTooltip?: TGradientBarChartCustomTooltip;
144
580
  }
581
+ /**
582
+ * [ID] : Interface untuk data tooltip kustom grafik batang gradien.
583
+ * [EN] : Interface for gradient bar chart custom tooltip data.
584
+ */
145
585
  export interface IDataGradientBarChartCustomTooltip {
586
+ /**
587
+ * [ID] : Gaya CSS.
588
+ * [EN] : CSS style.
589
+ */
146
590
  style: React.CSSProperties;
591
+ /**
592
+ * [ID] : Label tooltip.
593
+ * [EN] : Tooltip label.
594
+ */
147
595
  label: string;
596
+ /**
597
+ * [ID] : Dataset tooltip.
598
+ * [EN] : Tooltip dataset.
599
+ */
148
600
  dataset: string;
601
+ /**
602
+ * [ID] : Nilai tooltip.
603
+ * [EN] : Tooltip value.
604
+ */
149
605
  value: number;
606
+ /**
607
+ * [ID] : Titik data tooltip.
608
+ * [EN] : Tooltip data points.
609
+ */
150
610
  dataPoints: TooltipItem<'bar'>[];
151
611
  }
152
612
  export {};
@@ -1,5 +1,17 @@
1
1
  import { default as React } from 'react';
2
+ /**
3
+ * [ID] : Interface untuk komponen CheckboxTable.
4
+ * [EN] : Interface for CheckboxTable component.
5
+ */
2
6
  export interface ICheckboxTable extends React.HTMLProps<HTMLInputElement> {
7
+ /**
8
+ * [ID] : Menentukan status indeterminate (setengah dicentang) (opsional).
9
+ * [EN] : Determines indeterminate status (half-checked) (optional).
10
+ */
3
11
  indeterminate?: boolean;
12
+ /**
13
+ * [ID] : Nama kelas CSS untuk kontainer (opsional).
14
+ * [EN] : CSS class name for container (optional).
15
+ */
4
16
  classNameContainer?: string;
5
17
  }
@@ -1,12 +1,49 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { Itypography } from '../../../config/components/typography';
3
+ import { TFont } from '../../../config/components/font';
4
+ /**
5
+ * [ID] : Interface untuk komponen Chips.
6
+ * [EN] : Interface for Chips component.
7
+ */
3
8
  export interface IChips extends React.HTMLAttributes<HTMLSpanElement> {
9
+ /**
10
+ * [ID] : Konten anak di dalam chips.
11
+ * [EN] : Child content inside the chips.
12
+ */
4
13
  children: ReactNode | ReactNode[];
14
+ /**
15
+ * [ID] : Nama kelas CSS tambahan (opsional).
16
+ * [EN] : Additional CSS class name (optional).
17
+ */
5
18
  className?: string | undefined;
6
- fonts?: 'lato' | 'inter';
19
+ /**
20
+ * [ID] : Konfigurasi font (opsional).
21
+ * [EN] : Font configuration (optional).
22
+ */
23
+ fonts?: TFont;
24
+ /**
25
+ * [ID] : Ukuran chips (opsional).
26
+ * [EN] : Chips size (optional).
27
+ */
7
28
  size?: 'reguler' | 'small' | 'l' | 's';
29
+ /**
30
+ * [ID] : Varian gaya chips (opsional).
31
+ * [EN] : Chips style variant (optional).
32
+ */
8
33
  variants?: 'filled-laba-blue-10' | 'ghost-laba-grey-02' | 'nude-laba-grey-10' | 'filled-blue-gray-100' | 'filled-gray-300';
34
+ /**
35
+ * [ID] : Ikon utama (opsional).
36
+ * [EN] : Main icon (optional).
37
+ */
9
38
  icon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
39
+ /**
40
+ * [ID] : Ikon hapus (opsional).
41
+ * [EN] : Remove icon (optional).
42
+ */
10
43
  removeIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
44
+ /**
45
+ * [ID] : Konfigurasi tipografi (opsional).
46
+ * [EN] : Typography configuration (optional).
47
+ */
11
48
  typography?: Itypography;
12
49
  }