@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.
@@ -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>>;
@@ -0,0 +1,2 @@
1
+ export { InputLeftElement as InputElementLeft } from '@chakra-ui/react';
2
+ export { InputRightElement as InputElementRight } from '@chakra-ui/react';
@@ -1,4 +1,5 @@
1
1
  export * from './components/input-addon';
2
+ export * from './components/input-element';
2
3
  export { default as InputField } from './components/input-field';
3
4
  export * from './components/input-field';
4
5
  export { default as TextareaField } from './components/textarea';
@@ -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 react = require('@chakra-ui/react');
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