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.
- package/dist/assets/_colors.scss +80 -0
- package/dist/assets/_mixins.scss +32 -5
- package/dist/assets/_typography.scss +582 -0
- package/dist/assets/colors.css +40 -0
- package/dist/assets/core.css +1 -1
- package/dist/assets/fontfamily.css +1 -1
- package/dist/assets/fonts/PlusJakartaSans-Italic.ttf +0 -0
- package/dist/assets/fonts/PlusJakartaSans.ttf +0 -0
- package/dist/assets/style.css +1 -1
- package/dist/assets/typography.css +96 -0
- package/dist/index.cjs +108 -96
- package/dist/index.d.ts +2 -0
- package/dist/index.mjs +16743 -15220
- package/dist/package.json.d.ts +1 -1
- package/dist/src/components/Badges/Badges.config.d.ts +57 -0
- package/dist/src/components/Badges/Badges.stories.d.ts +115 -1
- package/dist/src/components/Breadcrumbs/Breadcrumbs.config.d.ts +113 -0
- package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/dist/src/components/Breadcrumbs/Breadcrumbs.stories.d.ts +219 -5
- package/dist/src/components/Button/Button.config.d.ts +70 -0
- package/dist/src/components/Button/Button.stories.d.ts +127 -3
- package/dist/src/components/ButtonIcon/ButtonIcon.config.d.ts +53 -0
- package/dist/src/components/ButtonIcon/ButtonIcon.stories.d.ts +121 -3
- package/dist/src/components/ButtonPopover/ButtonPopover.stories.d.ts +256 -1
- package/dist/src/components/Calendar/Calendar.d.ts +2 -1
- package/dist/src/components/Calendar/Calendar.stories.d.ts +281 -1
- package/dist/src/components/Chart/GradientBarChart.stories.d.ts +67 -1
- package/dist/src/components/Chart/GradientLineChart.stories.d.ts +78 -1
- package/dist/src/components/Chart/LineChart.stories.d.ts +33 -1
- package/dist/src/components/Chips/Chips.config.d.ts +35 -0
- package/dist/src/components/Chips/Chips.stories.d.ts +135 -1
- package/dist/src/components/Collapse/Collapse.stories.d.ts +87 -1
- package/dist/src/components/Collapse/CollapseV2.stories.d.ts +57 -1
- package/dist/src/components/DatePicker/DatePicker.stories.d.ts +219 -1
- package/dist/src/components/DatePicker/FilterDate.d.ts +1 -1
- package/dist/src/components/DatePicker/FilterDate.stories.d.ts +230 -2
- package/dist/src/components/DatePicker/MonthYearPicker.stories.d.ts +196 -1
- package/dist/src/components/ErrorMessage/ErrorMessage.config.d.ts +8 -0
- package/dist/src/components/ErrorMessage/ErrorMessage.stories.d.ts +37 -1
- package/dist/src/components/FilterContainer/FilterContainer.stories.d.ts +164 -0
- package/dist/src/components/Input/InputFloatingInner.config.d.ts +9 -0
- package/dist/src/components/Input/InputFloatingInner.stories.d.ts +175 -5
- package/dist/src/components/Input/InputInnerLabel.config.d.ts +8 -0
- package/dist/src/components/Input/InputInnerLabel.d.ts +4 -0
- package/dist/src/components/Input/InputInnerLabel.stories.d.ts +204 -0
- package/dist/src/components/Input/InputNative.config.d.ts +9 -0
- package/dist/src/components/Input/InputNative.stories.d.ts +147 -4
- package/dist/src/components/Input/InputReguler.config.d.ts +9 -0
- package/dist/src/components/Input/InputReguler.stories.d.ts +175 -5
- package/dist/src/components/Modal/ModalDialog.config.d.ts +9 -0
- package/dist/src/components/Modal/ModalDialog.stories.d.ts +119 -1
- package/dist/src/components/NumberFormat/NumberFormat.stories.d.ts +371 -17
- package/dist/src/components/Pagination/Pagination.config.d.ts +5 -0
- package/dist/src/components/Pagination/Pagination.d.ts +1 -1
- package/dist/src/components/Pagination/Pagination.stories.d.ts +198 -2
- package/dist/src/components/Popover/Popover.stories.d.ts +212 -4
- package/dist/src/components/PortalComponent/PortalComponent.stories.d.ts +60 -0
- package/dist/src/components/RadioCheckbox/RadioCheckbox.config.d.ts +41 -0
- package/dist/src/components/RadioCheckbox/RadioCheckbox.stories.d.ts +228 -7
- package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.config.d.ts +25 -0
- package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.stories.d.ts +194 -3
- package/dist/src/components/SelectDropdownContainer/SelectDropdownContainer.config.d.ts +26 -0
- package/dist/src/components/SelectDropdownContainer/styleConfig.d.ts +4 -1
- package/dist/src/components/Sidebar/ItemSidebar.config.d.ts +34 -0
- package/dist/src/components/Sidebar/Sidebar.config.d.ts +16 -0
- package/dist/src/components/Step/Step.stories.d.ts +133 -1
- package/dist/src/components/Step/StepIndicator.stories.d.ts +146 -1
- package/dist/src/components/Switch/Switch.config.d.ts +26 -0
- package/dist/src/components/Switch/Switch.stories.d.ts +126 -1
- package/dist/src/components/Table/Table.config.d.ts +4 -0
- package/dist/src/components/Table/Table.d.ts +2 -3
- package/dist/src/components/Table/Table.stories.d.ts +69 -51
- package/dist/src/components/Table/TableSubMobile.d.ts +3 -0
- package/dist/src/components/Tabs/Tabs.config.d.ts +31 -0
- package/dist/src/components/Tabs/Tabs.d.ts +1 -1
- package/dist/src/components/Tabs/Tabs.stories.d.ts +218 -2
- package/dist/src/components/TextEditor/TextEditor.stories.d.ts +57 -9
- package/dist/src/components/Textarea/Textarea.config.d.ts +31 -0
- package/dist/src/components/Textarea/Textarea.stories.d.ts +248 -2
- package/dist/src/components/Textarea/TextareaFloatingInner.config.d.ts +6 -0
- package/dist/src/components/Textarea/TextareaFloatingInner.stories.d.ts +258 -2
- package/dist/src/components/Textarea/TextareaInnerLabel.config.d.ts +7 -0
- package/dist/src/components/Textarea/TextareaInnerLabel.d.ts +4 -0
- package/dist/src/components/Textarea/TextareaInnerLabel.stories.d.ts +258 -0
- package/dist/src/components/TimeRange/TimeRange.d.ts +3 -0
- package/dist/src/components/TimeRange/TimeRange.stories.d.ts +185 -0
- package/dist/src/components/Timeline/Timeline.stories.d.ts +38 -1
- package/dist/src/components/Tooltip/Tooltip.stories.d.ts +157 -1
- package/dist/src/components/TruncateComponent/TruncateComponent.stories.d.ts +104 -1
- package/dist/src/components/Upload/UploadFile.stories.d.ts +125 -1
- package/dist/src/components/Upload/UploadImage.d.ts +1 -1
- package/dist/src/components/Upload/UploadImage.stories.d.ts +143 -2
- package/dist/src/components/Upload/UploadMultipleFile.d.ts +1 -1
- package/dist/src/components/Upload/UploadMultipleFile.stories.d.ts +188 -2
- package/dist/src/components/Virtualization/ListVirtualization.stories.d.ts +277 -1
- package/dist/src/components/Virtualization/TableVirtualization.stories.d.ts +294 -1
- package/dist/src/components/index.d.ts +14 -8
- package/dist/src/components/screens/Screens.stories.d.ts +13 -0
- package/dist/src/config/components/borderRadius.d.ts +1 -0
- package/dist/src/config/components/font.d.ts +7 -0
- package/dist/src/config/components/gap.d.ts +1 -0
- package/dist/src/config/components/typography.d.ts +3 -49
- package/dist/src/config/tailwind/index.d.ts +2 -1
- package/dist/src/config/tailwind/nativeScreen.d.ts +3 -0
- package/dist/src/config/tailwind/typography.d.ts +1 -0
- package/dist/src/hooks/index.d.ts +5 -3
- package/dist/src/hooks/useAsyncDebounce.d.ts +9 -0
- package/dist/src/hooks/useCombinedResizeObserver.d.ts +66 -0
- package/dist/src/hooks/useCountdown.d.ts +67 -3
- package/dist/src/hooks/useDeepCompareEffect.d.ts +13 -0
- package/dist/src/hooks/useElementOrWindowMediaQuery.d.ts +9 -0
- package/dist/src/hooks/useEventListener.d.ts +27 -0
- package/dist/src/hooks/useMasonry.d.ts +79 -0
- package/dist/src/hooks/useMergeRefs.d.ts +26 -0
- package/dist/src/hooks/useOtpInput.d.ts +199 -0
- package/dist/src/hooks/useStateRef.d.ts +8 -0
- package/dist/src/interfaces/components/Alert/index.d.ts +8 -0
- package/dist/src/interfaces/components/Badges/index.d.ts +30 -1
- package/dist/src/interfaces/components/Breadcrumbs/index.d.ts +85 -2
- package/dist/src/interfaces/components/Button/index.d.ts +46 -2
- package/dist/src/interfaces/components/ButtonIcon/index.d.ts +36 -0
- package/dist/src/interfaces/components/ButtonPopover/index.d.ts +78 -0
- package/dist/src/interfaces/components/Calendar/index.d.ts +384 -3
- package/dist/src/interfaces/components/Chart/index.d.ts +460 -0
- package/dist/src/interfaces/components/Checkbox/index.d.ts +12 -0
- package/dist/src/interfaces/components/Chips/index.d.ts +38 -1
- package/dist/src/interfaces/components/Collapse/index.d.ts +60 -0
- package/dist/src/interfaces/components/DatePicker/index.d.ts +277 -1
- package/dist/src/interfaces/components/ErrorMessage/index.d.ts +17 -1
- package/dist/src/interfaces/components/FilterContainer/index.d.ts +102 -0
- package/dist/src/interfaces/components/Input/index.d.ts +193 -0
- package/dist/src/interfaces/components/Modal/index.d.ts +45 -0
- package/dist/src/interfaces/components/NumberFormat/index.d.ts +25 -0
- package/dist/src/interfaces/components/Pagination/index.d.ts +83 -0
- package/dist/src/interfaces/components/Popover/index.d.ts +98 -1
- package/dist/src/interfaces/components/RadioCheckbox/RadioCheckbox.d.ts +59 -2
- package/dist/src/interfaces/components/RadioCheckbox/RadioCheckboxLabel.d.ts +46 -1
- package/dist/src/interfaces/components/SelectDropdownContainer/index.d.ts +196 -2
- package/dist/src/interfaces/components/Sidebar/index.d.ts +229 -1
- package/dist/src/interfaces/components/Step/index.d.ts +153 -0
- package/dist/src/interfaces/components/Switch/index.d.ts +54 -1
- package/dist/src/interfaces/components/Table/index.d.ts +402 -6
- package/dist/src/interfaces/components/Tabs/index.d.ts +130 -1
- package/dist/src/interfaces/components/TextEditor/index.d.ts +12 -0
- package/dist/src/interfaces/components/Textarea/index.d.ts +169 -0
- package/dist/src/interfaces/components/TimeRange/index.d.ts +128 -0
- package/dist/src/interfaces/components/Timeline/index.d.ts +36 -0
- package/dist/src/interfaces/components/Tooltip/index.d.ts +56 -0
- package/dist/src/interfaces/components/TruncateComponent/index.d.ts +34 -0
- package/dist/src/interfaces/components/UploadFile/index.d.ts +186 -0
- package/dist/src/interfaces/components/Virtualization/ListVirtualization.d.ts +138 -0
- package/dist/src/interfaces/components/Virtualization/TableVirtualization.d.ts +143 -0
- package/dist/src/utils/common.d.ts +4 -4
- package/dist/src/utils/constant.d.ts +1 -0
- package/dist/types-external/table.d.ts +3 -0
- package/package.json +1 -1
- package/dist/index.cjs.map +0 -1
- 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
|
-
|
|
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
|
}
|