@ctlyst.id/internal-ui 2.0.3 → 2.0.5
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/components/field/components/field.d.ts +2 -0
- package/dist/components/form/components/input-element.d.ts +2 -0
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/internal-ui.cjs.development.js +277 -49
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +10 -10
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +277 -69
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
@@ -1,3 +1,4 @@
|
|
1
|
+
import type { FormControlProps } from '@chakra-ui/react';
|
1
2
|
import type { FC, PropsWithChildren, ReactNode } from 'react';
|
2
3
|
export interface Props {
|
3
4
|
label?: string | ReactNode;
|
@@ -7,6 +8,7 @@ export interface Props {
|
|
7
8
|
leftHelperText?: string | ReactNode;
|
8
9
|
rightHelperText?: string | ReactNode;
|
9
10
|
isRequired?: boolean;
|
11
|
+
boxProps?: FormControlProps;
|
10
12
|
}
|
11
13
|
export declare type FieldProps<T = unknown> = Props & T;
|
12
14
|
declare const Field: FC<PropsWithChildren<Props>>;
|
@@ -1,3 +1,4 @@
|
|
1
|
+
export * from './alert';
|
1
2
|
export * from './badge';
|
2
3
|
export * from './breadcrumb';
|
3
4
|
export * from './button';
|
@@ -14,6 +15,7 @@ export * from './modal';
|
|
14
15
|
export * from './navigation';
|
15
16
|
export * from './pagination';
|
16
17
|
export * from './radio';
|
18
|
+
export * from './rating';
|
17
19
|
export * from './select';
|
18
20
|
export * from './switch';
|
19
21
|
export * from './tabs';
|
@@ -4,29 +4,259 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
5
5
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6
6
|
|
7
|
-
var
|
7
|
+
var sharedUtils = require('@chakra-ui/shared-utils');
|
8
|
+
var system = require('@chakra-ui/system');
|
8
9
|
var React = require('react');
|
9
10
|
var React__default = _interopDefault(React);
|
11
|
+
var reactContext = require('@chakra-ui/react-context');
|
12
|
+
var internalIcon = require('@ctlyst.id/internal-icon');
|
13
|
+
var utils = require('@chakra-ui/utils');
|
14
|
+
var react = require('@chakra-ui/react');
|
10
15
|
var fi = require('react-icons/fi');
|
11
16
|
var icons = require('@chakra-ui/icons');
|
12
17
|
var react$1 = require('@emotion/react');
|
13
18
|
var reactTable = require('@tanstack/react-table');
|
14
19
|
var classnames = _interopDefault(require('classnames'));
|
15
20
|
var ReactDatePicker = _interopDefault(require('react-datepicker'));
|
16
|
-
var system = require('@chakra-ui/system');
|
17
21
|
var styled = _interopDefault(require('@emotion/styled'));
|
18
|
-
var internalIcon = require('@ctlyst.id/internal-icon');
|
19
22
|
var ReactSelect = _interopDefault(require('react-select'));
|
20
23
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
21
24
|
var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
|
22
25
|
var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
|
23
|
-
var sharedUtils = require('@chakra-ui/shared-utils');
|
24
26
|
var reactDropzone = require('react-dropzone');
|
25
27
|
var anatomy = require('@chakra-ui/anatomy');
|
26
28
|
var styledSystem = require('@chakra-ui/styled-system');
|
27
29
|
var themeTools = require('@chakra-ui/theme-tools');
|
28
30
|
var axios = _interopDefault(require('axios'));
|
29
31
|
|
32
|
+
/* eslint-disable react/require-default-props */
|
33
|
+
function CheckIcon() {
|
34
|
+
return /*#__PURE__*/React__default.createElement(internalIcon.CheckCircle, {
|
35
|
+
color: "inherit",
|
36
|
+
size: 4
|
37
|
+
});
|
38
|
+
}
|
39
|
+
function InfoIcon() {
|
40
|
+
return /*#__PURE__*/React__default.createElement(internalIcon.Info, {
|
41
|
+
color: "inherit",
|
42
|
+
size: 4
|
43
|
+
});
|
44
|
+
}
|
45
|
+
function WarningIcon() {
|
46
|
+
return /*#__PURE__*/React__default.createElement(internalIcon.AlertTriangle, {
|
47
|
+
color: "inherit",
|
48
|
+
size: 4
|
49
|
+
});
|
50
|
+
}
|
51
|
+
|
52
|
+
const [AlertProvider, useAlertContext] = /*#__PURE__*/reactContext.createContext({
|
53
|
+
name: 'AlertContext',
|
54
|
+
hookName: 'useAlertContext',
|
55
|
+
providerName: '<Alert />'
|
56
|
+
});
|
57
|
+
const [AlertStylesProvider, useAlertStyles] = /*#__PURE__*/reactContext.createContext({
|
58
|
+
name: `AlertStylesContext`,
|
59
|
+
hookName: `useAlertStyles`,
|
60
|
+
providerName: '<Alert />'
|
61
|
+
});
|
62
|
+
const STATUSES = {
|
63
|
+
info: {
|
64
|
+
icon: InfoIcon,
|
65
|
+
colorScheme: 'info'
|
66
|
+
},
|
67
|
+
warning: {
|
68
|
+
icon: InfoIcon,
|
69
|
+
colorScheme: 'warning'
|
70
|
+
},
|
71
|
+
success: {
|
72
|
+
icon: CheckIcon,
|
73
|
+
colorScheme: 'success'
|
74
|
+
},
|
75
|
+
error: {
|
76
|
+
icon: WarningIcon,
|
77
|
+
colorScheme: 'danger'
|
78
|
+
}
|
79
|
+
};
|
80
|
+
function getStatusColorScheme(status) {
|
81
|
+
return STATUSES[status].colorScheme;
|
82
|
+
}
|
83
|
+
function getStatusIcon(status) {
|
84
|
+
return STATUSES[status].icon;
|
85
|
+
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Alert is used to communicate the state or status of a
|
89
|
+
* page, feature or action
|
90
|
+
*
|
91
|
+
* @see Docs https://chakra-ui.com/docs/components/alert
|
92
|
+
* @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/alert/
|
93
|
+
*/
|
94
|
+
const Alert = /*#__PURE__*/system.forwardRef(function Alert(props, ref) {
|
95
|
+
var _props$colorScheme;
|
96
|
+
const {
|
97
|
+
status = 'info',
|
98
|
+
addRole = true,
|
99
|
+
children,
|
100
|
+
...rest
|
101
|
+
} = system.omitThemingProps(props);
|
102
|
+
const colorScheme = (_props$colorScheme = props.colorScheme) !== null && _props$colorScheme !== void 0 ? _props$colorScheme : getStatusColorScheme(status);
|
103
|
+
const styles = system.useMultiStyleConfig('Alert', {
|
104
|
+
...props,
|
105
|
+
colorScheme
|
106
|
+
});
|
107
|
+
const alertStyles = {
|
108
|
+
width: '100%',
|
109
|
+
display: 'grid',
|
110
|
+
gridTemplateColumns: 'auto 1fr auto auto',
|
111
|
+
alignItems: 'center',
|
112
|
+
position: 'relative',
|
113
|
+
overflow: 'hidden',
|
114
|
+
...styles.container
|
115
|
+
};
|
116
|
+
return /*#__PURE__*/React__default.createElement(AlertProvider, {
|
117
|
+
value: {
|
118
|
+
status
|
119
|
+
}
|
120
|
+
}, /*#__PURE__*/React__default.createElement(AlertStylesProvider, {
|
121
|
+
value: styles
|
122
|
+
}, /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
|
123
|
+
"data-status": status,
|
124
|
+
role: addRole ? 'alert' : undefined,
|
125
|
+
ref: ref
|
126
|
+
}, rest, {
|
127
|
+
className: sharedUtils.cx('chakra-alert', props.className),
|
128
|
+
__css: alertStyles
|
129
|
+
}), children)));
|
130
|
+
});
|
131
|
+
Alert.displayName = 'Alert';
|
132
|
+
|
133
|
+
const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
|
134
|
+
const styles = react.useStyleConfig('LoaderStyle', props);
|
135
|
+
return /*#__PURE__*/React__default.createElement(react.Box, {
|
136
|
+
ref: ref,
|
137
|
+
__css: styles
|
138
|
+
});
|
139
|
+
});
|
140
|
+
|
141
|
+
const Button = props => {
|
142
|
+
const {
|
143
|
+
children,
|
144
|
+
variant,
|
145
|
+
size,
|
146
|
+
...rest
|
147
|
+
} = props;
|
148
|
+
const getLoaderSize = () => {
|
149
|
+
if (size === 'lg') return 'md';
|
150
|
+
if (size === 'md') return 'sm';
|
151
|
+
return 'xs';
|
152
|
+
};
|
153
|
+
const getLoaderColor = () => {
|
154
|
+
if (variant === 'primary' || variant === 'danger') return 'white';
|
155
|
+
if (variant === 'outline-danger') return 'danger';
|
156
|
+
return 'primary';
|
157
|
+
};
|
158
|
+
return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
|
159
|
+
size: size,
|
160
|
+
variant: variant,
|
161
|
+
spinner: /*#__PURE__*/React__default.createElement(Loader, {
|
162
|
+
size: getLoaderSize(),
|
163
|
+
color: getLoaderColor()
|
164
|
+
})
|
165
|
+
}, rest), children);
|
166
|
+
};
|
167
|
+
|
168
|
+
function AlertAction({
|
169
|
+
children,
|
170
|
+
className
|
171
|
+
}) {
|
172
|
+
const styles = useAlertStyles();
|
173
|
+
const css = styles.action;
|
174
|
+
return /*#__PURE__*/React__default.createElement(Button, {
|
175
|
+
"data-test-id": "alert-action",
|
176
|
+
className: utils.cx('chakra-alert__close', className),
|
177
|
+
variant: "link",
|
178
|
+
color: "inherit",
|
179
|
+
fontWeight: "700",
|
180
|
+
__css: css
|
181
|
+
}, children);
|
182
|
+
}
|
183
|
+
AlertAction.displayName = 'AlertAction';
|
184
|
+
|
185
|
+
function AlertClose({
|
186
|
+
className,
|
187
|
+
children,
|
188
|
+
...rest
|
189
|
+
}) {
|
190
|
+
const styles = useAlertStyles();
|
191
|
+
const css = styles.close;
|
192
|
+
return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
|
193
|
+
display: "inherit",
|
194
|
+
"data-status": 'alert-close'
|
195
|
+
}, rest, {
|
196
|
+
className: sharedUtils.cx('chakra-alert__close', className),
|
197
|
+
__css: css
|
198
|
+
}), children || /*#__PURE__*/React__default.createElement(internalIcon.Close, {
|
199
|
+
color: "inherit",
|
200
|
+
size: 4
|
201
|
+
}));
|
202
|
+
}
|
203
|
+
AlertClose.displayName = 'AlertClose';
|
204
|
+
|
205
|
+
const AlertDescription = /*#__PURE__*/system.forwardRef(function AlertDescription(props, ref) {
|
206
|
+
const styles = useAlertStyles();
|
207
|
+
const {
|
208
|
+
status
|
209
|
+
} = useAlertContext();
|
210
|
+
const descriptionStyles = {
|
211
|
+
display: 'inline',
|
212
|
+
...styles.description
|
213
|
+
};
|
214
|
+
return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
|
215
|
+
ref: ref,
|
216
|
+
"data-status": status
|
217
|
+
}, props, {
|
218
|
+
className: sharedUtils.cx('chakra-alert__desc', props.className),
|
219
|
+
__css: descriptionStyles
|
220
|
+
}));
|
221
|
+
});
|
222
|
+
AlertDescription.displayName = 'AlertDescription';
|
223
|
+
|
224
|
+
function AlertIcon({
|
225
|
+
className,
|
226
|
+
children,
|
227
|
+
...rest
|
228
|
+
}) {
|
229
|
+
const {
|
230
|
+
status
|
231
|
+
} = useAlertContext();
|
232
|
+
const BaseIcon = getStatusIcon(status);
|
233
|
+
const styles = useAlertStyles();
|
234
|
+
const css = styles.icon;
|
235
|
+
return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
|
236
|
+
display: "inherit",
|
237
|
+
"data-status": status
|
238
|
+
}, rest, {
|
239
|
+
className: sharedUtils.cx('chakra-alert__icon', className),
|
240
|
+
__css: css
|
241
|
+
}), children || /*#__PURE__*/React__default.createElement(BaseIcon, null));
|
242
|
+
}
|
243
|
+
AlertIcon.displayName = 'AlertIcon';
|
244
|
+
|
245
|
+
const AlertTitle = /*#__PURE__*/system.forwardRef(function AlertTitle(props, ref) {
|
246
|
+
const styles = useAlertStyles();
|
247
|
+
const {
|
248
|
+
status
|
249
|
+
} = useAlertContext();
|
250
|
+
return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
|
251
|
+
ref: ref,
|
252
|
+
"data-status": status
|
253
|
+
}, props, {
|
254
|
+
className: sharedUtils.cx('chakra-alert__title', props.className),
|
255
|
+
__css: styles.title
|
256
|
+
}));
|
257
|
+
});
|
258
|
+
AlertTitle.displayName = 'AlertTitle';
|
259
|
+
|
30
260
|
const Badge = props => {
|
31
261
|
const {
|
32
262
|
children,
|
@@ -38,7 +268,7 @@ const Badge = props => {
|
|
38
268
|
variant: "primary-solid",
|
39
269
|
padding: "0 8px",
|
40
270
|
height: "18px",
|
41
|
-
display: "flex",
|
271
|
+
display: "inline-flex",
|
42
272
|
alignItems: "center",
|
43
273
|
justifyContent: "space-between",
|
44
274
|
textTransform: "none"
|
@@ -143,41 +373,6 @@ BreadCrumb.defaultProps = {
|
|
143
373
|
spacing: 2
|
144
374
|
};
|
145
375
|
|
146
|
-
const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
|
147
|
-
const styles = react.useStyleConfig('LoaderStyle', props);
|
148
|
-
return /*#__PURE__*/React__default.createElement(react.Box, {
|
149
|
-
ref: ref,
|
150
|
-
__css: styles
|
151
|
-
});
|
152
|
-
});
|
153
|
-
|
154
|
-
const Button = props => {
|
155
|
-
const {
|
156
|
-
children,
|
157
|
-
variant,
|
158
|
-
size,
|
159
|
-
...rest
|
160
|
-
} = props;
|
161
|
-
const getLoaderSize = () => {
|
162
|
-
if (size === 'lg') return 'md';
|
163
|
-
if (size === 'md') return 'sm';
|
164
|
-
return 'xs';
|
165
|
-
};
|
166
|
-
const getLoaderColor = () => {
|
167
|
-
if (variant === 'primary' || variant === 'danger') return 'white';
|
168
|
-
if (variant === 'outline-danger') return 'danger';
|
169
|
-
return 'primary';
|
170
|
-
};
|
171
|
-
return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
|
172
|
-
size: size,
|
173
|
-
variant: variant,
|
174
|
-
spinner: /*#__PURE__*/React__default.createElement(Loader, {
|
175
|
-
size: getLoaderSize(),
|
176
|
-
color: getLoaderColor()
|
177
|
-
})
|
178
|
-
}, rest), children);
|
179
|
-
};
|
180
|
-
|
181
376
|
const CardCustom = /*#__PURE__*/React.forwardRef(({
|
182
377
|
children,
|
183
378
|
...rest
|
@@ -229,7 +424,6 @@ CheckboxComponent.defaultProps = {
|
|
229
424
|
errorText: ''
|
230
425
|
};
|
231
426
|
|
232
|
-
/* eslint-disable no-nested-ternary */
|
233
427
|
const Field = props => {
|
234
428
|
const {
|
235
429
|
label,
|
@@ -239,7 +433,8 @@ const Field = props => {
|
|
239
433
|
rightHelperText,
|
240
434
|
isRequired,
|
241
435
|
children,
|
242
|
-
isSuccess
|
436
|
+
isSuccess,
|
437
|
+
boxProps = {}
|
243
438
|
} = props;
|
244
439
|
const getHelperColor = () => {
|
245
440
|
if (isError) return 'danger.500';
|
@@ -252,9 +447,9 @@ const Field = props => {
|
|
252
447
|
};
|
253
448
|
const helperColor = getHelperColor();
|
254
449
|
const justifyHelper = getJustifyContentHelper();
|
255
|
-
return /*#__PURE__*/React__default.createElement(react.FormControl, {
|
450
|
+
return /*#__PURE__*/React__default.createElement(react.FormControl, Object.assign({
|
256
451
|
isInvalid: isError
|
257
|
-
}, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
|
452
|
+
}, boxProps), label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
|
258
453
|
mb: 1,
|
259
454
|
fontSize: "text.sm",
|
260
455
|
requiredIndicator: undefined
|
@@ -267,19 +462,19 @@ const Field = props => {
|
|
267
462
|
display: "flex",
|
268
463
|
width: "full",
|
269
464
|
justifyContent: justifyHelper
|
270
|
-
}, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
|
465
|
+
}, !isError ? leftHelperText && (typeof leftHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
|
271
466
|
fontSize: "text.xs",
|
272
467
|
color: helperColor,
|
273
468
|
mt: 1
|
274
|
-
}, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
|
469
|
+
}, leftHelperText) : leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
|
275
470
|
fontSize: "text.xs",
|
276
471
|
color: "danger.500",
|
277
472
|
mt: 1
|
278
|
-
}, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
|
473
|
+
}, errorMessage) : errorMessage, rightHelperText && (typeof rightHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
|
279
474
|
fontSize: "text.xs",
|
280
475
|
color: helperColor,
|
281
476
|
mt: 1
|
282
|
-
}, rightHelperText)));
|
477
|
+
}, rightHelperText) : rightHelperText)));
|
283
478
|
};
|
284
479
|
Field.defaultProps = {
|
285
480
|
label: '',
|
@@ -288,7 +483,8 @@ Field.defaultProps = {
|
|
288
483
|
errorMessage: undefined,
|
289
484
|
leftHelperText: undefined,
|
290
485
|
rightHelperText: undefined,
|
291
|
-
isRequired: false
|
486
|
+
isRequired: false,
|
487
|
+
boxProps: {}
|
292
488
|
};
|
293
489
|
|
294
490
|
function CheckboxGroupComponent(props) {
|
@@ -2749,6 +2945,18 @@ RadioGroupComponent.defaultProps = {
|
|
2749
2945
|
errorMessage: ''
|
2750
2946
|
};
|
2751
2947
|
|
2948
|
+
const Rating = ({
|
2949
|
+
value
|
2950
|
+
}) => {
|
2951
|
+
return /*#__PURE__*/React__default.createElement(react.Grid, {
|
2952
|
+
gap: '4px',
|
2953
|
+
display: "flex"
|
2954
|
+
}, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(internalIcon.Rating, {
|
2955
|
+
color: i < value ? '#FFA230' : '#E0E0E0',
|
2956
|
+
size: 24
|
2957
|
+
})));
|
2958
|
+
};
|
2959
|
+
|
2752
2960
|
const SelectWrapper = ({
|
2753
2961
|
children,
|
2754
2962
|
isError = false
|
@@ -4383,6 +4591,18 @@ Object.defineProperty(exports, 'DrawerOverlay', {
|
|
4383
4591
|
return react.ModalOverlay;
|
4384
4592
|
}
|
4385
4593
|
});
|
4594
|
+
Object.defineProperty(exports, 'InputElementLeft', {
|
4595
|
+
enumerable: true,
|
4596
|
+
get: function () {
|
4597
|
+
return react.InputLeftElement;
|
4598
|
+
}
|
4599
|
+
});
|
4600
|
+
Object.defineProperty(exports, 'InputElementRight', {
|
4601
|
+
enumerable: true,
|
4602
|
+
get: function () {
|
4603
|
+
return react.InputRightElement;
|
4604
|
+
}
|
4605
|
+
});
|
4386
4606
|
Object.defineProperty(exports, 'Modal', {
|
4387
4607
|
enumerable: true,
|
4388
4608
|
get: function () {
|
@@ -4533,6 +4753,12 @@ Object.defineProperty(exports, 'useTabsStyles', {
|
|
4533
4753
|
return react.useTabsStyles;
|
4534
4754
|
}
|
4535
4755
|
});
|
4756
|
+
exports.Alert = Alert;
|
4757
|
+
exports.AlertAction = AlertAction;
|
4758
|
+
exports.AlertClose = AlertClose;
|
4759
|
+
exports.AlertDescription = AlertDescription;
|
4760
|
+
exports.AlertIcon = AlertIcon;
|
4761
|
+
exports.AlertTitle = AlertTitle;
|
4536
4762
|
exports.Badge = Badge;
|
4537
4763
|
exports.Box = react.Box;
|
4538
4764
|
exports.BreadCrumb = BreadCrumb;
|
@@ -4565,6 +4791,7 @@ exports.Provider = Provider;
|
|
4565
4791
|
exports.ProviderContext = ProviderContext;
|
4566
4792
|
exports.Radio = RadioComponent;
|
4567
4793
|
exports.RadioGroup = RadioGroupComponent;
|
4794
|
+
exports.Rating = Rating;
|
4568
4795
|
exports.Select = Select;
|
4569
4796
|
exports.SelectAsync = SelectAsync;
|
4570
4797
|
exports.SelectAsyncCreatable = SelectAsyncCreatable;
|
@@ -4580,5 +4807,6 @@ exports.Uploader = Uploader;
|
|
4580
4807
|
exports.Wrap = react.Wrap;
|
4581
4808
|
exports.foundations = foundations;
|
4582
4809
|
exports.theme = theme;
|
4810
|
+
exports.useAlertStyles = useAlertStyles;
|
4583
4811
|
exports.useInternalUI = useInternalUI;
|
4584
4812
|
//# sourceMappingURL=internal-ui.cjs.development.js.map
|