@ctlyst.id/internal-ui 1.1.0-canary.0 → 2.0.0-canary.1
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/README.md +1 -1
- package/dist/components/field/index.d.ts +0 -2
- package/dist/components/{card/__stories__/card.stories.d.ts → form/__stories__/textarea.stories.d.ts} +2 -3
- package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts} +2 -6
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/config/theme/components/index.d.ts +0 -1
- package/dist/config/theme/components/textarea.d.ts +54 -2
- package/dist/internal-ui.cjs.development.js +92 -57
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +9 -9
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +102 -66
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
- package/dist/components/card/components/card.d.ts +0 -8
- package/dist/components/card/index.d.ts +0 -2
- package/dist/config/theme/components/card.d.ts +0 -18
package/README.md
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
## @ctlyst.id/internal-ui
|
@@ -2,5 +2,3 @@ export { default as Field } from './components/field';
|
|
2
2
|
export * from './components/field';
|
3
3
|
export { default as InputField } from './components/input-field';
|
4
4
|
export * from './components/input-field';
|
5
|
-
export { default as TextareaField } from './components/textarea-field';
|
6
|
-
export * from './components/textarea-field';
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import React from 'react';
|
2
2
|
declare const _default: {
|
3
3
|
chakra: {
|
4
4
|
theme: Record<string, any>;
|
@@ -7,5 +7,4 @@ declare const _default: {
|
|
7
7
|
decorators: ((Story: React.ElementType) => JSX.Element)[];
|
8
8
|
};
|
9
9
|
export default _default;
|
10
|
-
export declare const
|
11
|
-
export declare const Variant: () => JSX.Element;
|
10
|
+
export declare const TextArea: () => JSX.Element;
|
package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts}
RENAMED
@@ -1,12 +1,8 @@
|
|
1
1
|
import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
|
2
|
-
import type { ReactNode } from 'react';
|
3
2
|
import React from 'react';
|
4
|
-
import type { FieldProps } from '
|
3
|
+
import type { FieldProps } from '../../field';
|
5
4
|
export interface TextAreaProps extends ChakraTextareaProps, FieldProps {
|
6
|
-
|
7
|
-
addOnRight?: ReactNode;
|
8
|
-
elementLeft?: ReactNode;
|
9
|
-
elementRight?: ReactNode;
|
5
|
+
isLoading?: boolean;
|
10
6
|
}
|
11
7
|
declare const TextareaField: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
12
8
|
export default TextareaField;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
export * from './breadcrumb';
|
2
|
-
export * from './card';
|
3
2
|
export * from './checkbox';
|
4
3
|
export * from './data-table';
|
5
4
|
export * from './datepicker';
|
6
5
|
export * from './field';
|
6
|
+
export * from './form';
|
7
7
|
export * from './header';
|
8
8
|
export * from './loader';
|
9
9
|
export * from './modal';
|
@@ -1,3 +1,55 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
export declare const Textarea: {
|
2
|
+
baseStyle?: import("@chakra-ui/styled-system").CSSWithMultiValues | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursivePseudo<import("@chakra-ui/styled-system").CSSWithMultiValues>) | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursiveCSSSelector<import("@chakra-ui/styled-system").CSSWithMultiValues>) | import("@chakra-ui/styled-system").SystemStyleFunction | undefined;
|
3
|
+
sizes?: {
|
4
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
5
|
+
} | undefined;
|
6
|
+
variants?: {
|
7
|
+
outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
|
8
|
+
background: string;
|
9
|
+
color: string;
|
10
|
+
borderColor: string;
|
11
|
+
fontSize: string;
|
12
|
+
padding: number;
|
13
|
+
borderRadius: string;
|
14
|
+
borderWidth: string;
|
15
|
+
outline: string;
|
16
|
+
_disabled: {
|
17
|
+
opacity: number;
|
18
|
+
color: string;
|
19
|
+
background: string;
|
20
|
+
};
|
21
|
+
_placeholder: {
|
22
|
+
color: string;
|
23
|
+
};
|
24
|
+
_hover: {
|
25
|
+
borderColor: string;
|
26
|
+
};
|
27
|
+
_focus: {
|
28
|
+
outline: string;
|
29
|
+
borderColor: string;
|
30
|
+
boxShadow: string;
|
31
|
+
};
|
32
|
+
_focusVisible: {
|
33
|
+
outline: string;
|
34
|
+
borderColor: string;
|
35
|
+
boxShadow: string;
|
36
|
+
};
|
37
|
+
_focusWithin: {
|
38
|
+
outline: string;
|
39
|
+
borderColor: string;
|
40
|
+
boxShadow: string;
|
41
|
+
};
|
42
|
+
_invalid: {
|
43
|
+
outline: string;
|
44
|
+
borderColor: string;
|
45
|
+
boxShadow: string;
|
46
|
+
};
|
47
|
+
};
|
48
|
+
} | undefined;
|
49
|
+
defaultProps?: {
|
50
|
+
size?: string | number | undefined;
|
51
|
+
variant?: "outline" | undefined;
|
52
|
+
colorScheme?: string | undefined;
|
53
|
+
} | undefined;
|
54
|
+
};
|
3
55
|
export default Textarea;
|
@@ -21,8 +21,8 @@ var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-crea
|
|
21
21
|
var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
|
22
22
|
var reactDropzone = require('react-dropzone');
|
23
23
|
var themeTools = require('@chakra-ui/theme-tools');
|
24
|
-
var styledSystem = require('@chakra-ui/styled-system');
|
25
24
|
var anatomy = require('@chakra-ui/anatomy');
|
25
|
+
var styledSystem = require('@chakra-ui/styled-system');
|
26
26
|
require('@fontsource/poppins');
|
27
27
|
var axios = _interopDefault(require('axios'));
|
28
28
|
|
@@ -121,22 +121,6 @@ BreadCrumb.defaultProps = {
|
|
121
121
|
spacing: 2
|
122
122
|
};
|
123
123
|
|
124
|
-
const CardCustom = /*#__PURE__*/React.forwardRef(({
|
125
|
-
children,
|
126
|
-
...rest
|
127
|
-
}, ref) => {
|
128
|
-
const styles = react.useStyleConfig('Card', rest);
|
129
|
-
return /*#__PURE__*/React__default.createElement(react.Card, Object.assign({
|
130
|
-
__css: styles,
|
131
|
-
backgroundColor: "white.high",
|
132
|
-
ref: ref
|
133
|
-
}, rest), children);
|
134
|
-
});
|
135
|
-
CardCustom.defaultProps = {
|
136
|
-
withShadow: true,
|
137
|
-
isRounded: true
|
138
|
-
};
|
139
|
-
|
140
124
|
function CheckboxComponent({
|
141
125
|
isError = false,
|
142
126
|
helpText = '',
|
@@ -1798,6 +1782,7 @@ const Field = props => {
|
|
1798
1782
|
return /*#__PURE__*/React__default.createElement(react.FormControl, {
|
1799
1783
|
isInvalid: isError
|
1800
1784
|
}, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
|
1785
|
+
mb: 1,
|
1801
1786
|
fontSize: "text.sm",
|
1802
1787
|
requiredIndicator: undefined
|
1803
1788
|
}, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
|
@@ -1877,21 +1862,36 @@ InputField.defaultProps = {
|
|
1877
1862
|
elementRight: undefined
|
1878
1863
|
};
|
1879
1864
|
|
1865
|
+
const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
|
1866
|
+
const styles = react.useStyleConfig('LoaderStyle', props);
|
1867
|
+
return /*#__PURE__*/React__default.createElement(react.Box, {
|
1868
|
+
ref: ref,
|
1869
|
+
__css: styles
|
1870
|
+
});
|
1871
|
+
});
|
1872
|
+
|
1880
1873
|
const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
1881
1874
|
const {
|
1882
1875
|
value,
|
1876
|
+
isLoading,
|
1883
1877
|
...inputProps
|
1884
1878
|
} = props;
|
1885
|
-
return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.
|
1879
|
+
return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Box, {
|
1880
|
+
position: "relative"
|
1881
|
+
}, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
|
1886
1882
|
ref: ref,
|
1887
1883
|
value: value
|
1888
|
-
}, inputProps))
|
1884
|
+
}, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
|
1885
|
+
zIndex: 999,
|
1886
|
+
top: 2,
|
1887
|
+
right: 2,
|
1888
|
+
position: "absolute"
|
1889
|
+
}, /*#__PURE__*/React__default.createElement(Loader, {
|
1890
|
+
size: "sm"
|
1891
|
+
}))));
|
1889
1892
|
});
|
1890
1893
|
TextareaField.defaultProps = {
|
1891
|
-
|
1892
|
-
addOnRight: undefined,
|
1893
|
-
elementLeft: undefined,
|
1894
|
-
elementRight: undefined
|
1894
|
+
isLoading: undefined
|
1895
1895
|
};
|
1896
1896
|
|
1897
1897
|
const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
|
@@ -2078,14 +2078,6 @@ Header.defaultProps = {
|
|
2078
2078
|
hideSwitchMode: false
|
2079
2079
|
};
|
2080
2080
|
|
2081
|
-
const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
|
2082
|
-
const styles = react.useStyleConfig('LoaderStyle', props);
|
2083
|
-
return /*#__PURE__*/React__default.createElement(react.Box, {
|
2084
|
-
ref: ref,
|
2085
|
-
__css: styles
|
2086
|
-
});
|
2087
|
-
});
|
2088
|
-
|
2089
2081
|
const ModalBody = /*#__PURE__*/React__default.forwardRef(({
|
2090
2082
|
children,
|
2091
2083
|
...rest
|
@@ -2913,15 +2905,6 @@ const Button = {
|
|
2913
2905
|
}
|
2914
2906
|
};
|
2915
2907
|
|
2916
|
-
const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
|
2917
|
-
baseStyle: props => {
|
2918
|
-
return {
|
2919
|
-
shadow: props.withShadow ? 'raised' : 'none',
|
2920
|
-
borderRadius: props.isRounded ? 'lg' : 'none'
|
2921
|
-
};
|
2922
|
-
}
|
2923
|
-
});
|
2924
|
-
|
2925
2908
|
const {
|
2926
2909
|
definePartsStyle,
|
2927
2910
|
defineMultiStyleConfig
|
@@ -3345,37 +3328,90 @@ const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
|
|
3345
3328
|
baseStyle: baseStyle$3
|
3346
3329
|
});
|
3347
3330
|
|
3348
|
-
const
|
3349
|
-
|
3331
|
+
const getProps = props => {
|
3332
|
+
const {
|
3333
|
+
isError,
|
3334
|
+
isSuccess,
|
3335
|
+
isDisabled
|
3336
|
+
} = props;
|
3337
|
+
let borderColor = 'neutral.400';
|
3338
|
+
let focusBorderColor = 'primary.500';
|
3339
|
+
if (isError) {
|
3340
|
+
borderColor = 'danger.500';
|
3341
|
+
focusBorderColor = 'danger.500';
|
3342
|
+
} else if (isSuccess) {
|
3343
|
+
borderColor = 'success.500';
|
3344
|
+
focusBorderColor = 'success.500';
|
3345
|
+
} else if (isDisabled && !isError && !isSuccess) {
|
3346
|
+
borderColor = 'neutral.400';
|
3347
|
+
focusBorderColor = 'danger.500';
|
3348
|
+
}
|
3349
|
+
return {
|
3350
|
+
focusBorderColor,
|
3351
|
+
borderColor
|
3352
|
+
};
|
3353
|
+
};
|
3354
|
+
const outline$1 = /*#__PURE__*/react.defineStyle(props => {
|
3355
|
+
const {
|
3356
|
+
focusBorderColor,
|
3357
|
+
borderColor
|
3358
|
+
} = getProps(props);
|
3359
|
+
return {
|
3360
|
+
background: 'white.high',
|
3361
|
+
color: 'black.high',
|
3362
|
+
borderColor,
|
3363
|
+
fontSize: 'text.sm',
|
3364
|
+
padding: 2,
|
3365
|
+
borderRadius: 'md',
|
3366
|
+
borderWidth: '1px',
|
3367
|
+
outline: 'none',
|
3368
|
+
_disabled: {
|
3369
|
+
opacity: 1,
|
3370
|
+
color: 'black.low',
|
3371
|
+
background: 'neutral.300'
|
3372
|
+
},
|
3373
|
+
_placeholder: {
|
3374
|
+
color: 'black.low'
|
3375
|
+
},
|
3350
3376
|
_hover: {
|
3351
|
-
borderColor
|
3352
|
-
boxShadow: 'none',
|
3353
|
-
outline: 'none'
|
3377
|
+
borderColor
|
3354
3378
|
},
|
3355
3379
|
_focus: {
|
3356
|
-
|
3357
|
-
|
3358
|
-
|
3380
|
+
outline: 'none',
|
3381
|
+
borderColor: focusBorderColor,
|
3382
|
+
boxShadow: 'none'
|
3359
3383
|
},
|
3360
3384
|
_focusVisible: {
|
3361
|
-
|
3362
|
-
|
3363
|
-
|
3385
|
+
outline: 'none',
|
3386
|
+
borderColor: focusBorderColor,
|
3387
|
+
boxShadow: 'none'
|
3364
3388
|
},
|
3365
3389
|
_focusWithin: {
|
3366
|
-
|
3367
|
-
|
3368
|
-
|
3390
|
+
outline: 'none',
|
3391
|
+
borderColor: focusBorderColor,
|
3392
|
+
boxShadow: 'none'
|
3393
|
+
},
|
3394
|
+
_invalid: {
|
3395
|
+
outline: 'none',
|
3396
|
+
borderColor: 'danger.500',
|
3397
|
+
boxShadow: 'none'
|
3369
3398
|
}
|
3399
|
+
};
|
3400
|
+
});
|
3401
|
+
const Textarea = /*#__PURE__*/react.defineStyleConfig({
|
3402
|
+
variants: {
|
3403
|
+
outline: outline$1
|
3404
|
+
},
|
3405
|
+
defaultProps: {
|
3406
|
+
variant: 'outline'
|
3370
3407
|
}
|
3371
|
-
};
|
3408
|
+
});
|
3372
3409
|
|
3373
3410
|
|
3374
3411
|
|
3375
3412
|
var components = {
|
3376
3413
|
__proto__: null,
|
3377
3414
|
Button: Button,
|
3378
|
-
Card: CardStyle,
|
3379
3415
|
Checkbox: Checkbox,
|
3380
3416
|
FormLabel: FormLabel,
|
3381
3417
|
Input: Input,
|
@@ -3679,7 +3715,6 @@ Object.defineProperty(exports, 'useTabsStyles', {
|
|
3679
3715
|
}
|
3680
3716
|
});
|
3681
3717
|
exports.BreadCrumb = BreadCrumb;
|
3682
|
-
exports.Card = CardCustom;
|
3683
3718
|
exports.Checkbox = CheckboxComponent;
|
3684
3719
|
exports.DataTable = DataTable;
|
3685
3720
|
exports.DatePickerMonth = DatePickerMonth;
|