@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 CHANGED
@@ -1 +1 @@
1
- # @ctlyst.id/internal-ui
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 * as React from 'react';
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 Default: () => JSX.Element;
11
- export declare const Variant: () => JSX.Element;
10
+ export declare const TextArea: () => JSX.Element;
@@ -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 './field';
3
+ import type { FieldProps } from '../../field';
5
4
  export interface TextAreaProps extends ChakraTextareaProps, FieldProps {
6
- addOnLeft?: ReactNode;
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;
@@ -0,0 +1,2 @@
1
+ export { default as TextareaField } from './components/textarea';
2
+ export * from './components/textarea';
@@ -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,5 +1,4 @@
1
1
  export { default as Button } from './button';
2
- export { default as Card } from './card';
3
2
  export { default as Checkbox } from './checkbox';
4
3
  export { default as FormLabel } from './form-label';
5
4
  export { default as Input } from './input';
@@ -1,3 +1,55 @@
1
- import type { ComponentStyleConfig } from '@chakra-ui/theme';
2
- declare const Textarea: ComponentStyleConfig;
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.Textarea, Object.assign({
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
- addOnLeft: undefined,
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 Textarea = {
3349
- baseStyle: {
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: 'primary.500',
3352
- boxShadow: 'none',
3353
- outline: 'none'
3377
+ borderColor
3354
3378
  },
3355
3379
  _focus: {
3356
- borderColor: 'primary.500',
3357
- boxShadow: 'none',
3358
- outline: 'none'
3380
+ outline: 'none',
3381
+ borderColor: focusBorderColor,
3382
+ boxShadow: 'none'
3359
3383
  },
3360
3384
  _focusVisible: {
3361
- borderColor: 'primary.500',
3362
- boxShadow: 'none',
3363
- outline: 'none'
3385
+ outline: 'none',
3386
+ borderColor: focusBorderColor,
3387
+ boxShadow: 'none'
3364
3388
  },
3365
3389
  _focusWithin: {
3366
- borderColor: 'primary.500',
3367
- boxShadow: 'none',
3368
- outline: 'none'
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;