@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/form/components/InputGroup/InputGroup.esm.js

@@ -0,0 +1,188 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
+import React__default from 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const InputGroupStyle = styled('div', {
+  display: 'flex',
+  width: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  '& > input:last-child': {
+    borderStartStartRadius: 0,
+    borderEndStartRadius: 0
+  },
+  '& > input:first-child': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  },
+  '& > input:not(:first-child):not(:last-child)': {
+    borderRadius: 0
+  },
+  variants: {
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&::placeholder': {
+          color: '$textDisable'
+        },
+        '&:hover': {
+          border: '1px solid $bgOutline',
+          borderRadius: '$lg',
+          '& > .addon': {
+            border: '1px solid $bgOutline'
+          }
+        },
+        '& > input': {
+          color: '$textDisable !important',
+          cursor: 'not-allowed !important',
+          border: 'none !important',
+          '&:hover': {
+            border: 'none !important'
+          }
+        }
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $red400',
+        '&:focus': {
+          border: '1px solid $red400'
+        },
+        '&:hover': {
+          border: '1px solid $red400'
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isElement: {
+      true: {
+        '& > input:last-child': {
+          paddingLeft: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        },
+        '& > input:first-child': {
+          paddingRight: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        },
+        '& > input:not(:first-child):not(:last-child)': {
+          paddingLeft: 0,
+          paddingRight: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    isLetter: {
+      true: {
+        borderRadius: '$lg',
+        border: '1px solid $bgOutline',
+        '&:focus': {
+          border: '1px solid $primary400'
+        },
+        '&:active': {
+          border: '1px solid $primary400'
+        },
+        '&:hover': {
+          border: '1px solid $primary400'
+        },
+        '&:disabled': {
+          backgroundColor: '$formDisable',
+          color: '$textDisable',
+          cursor: 'not-allowed',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $bgOutline'
+          }
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isLetter: false,
+    size: 'lg'
+  }
+});
+const InputGroup = ({
+  children,
+  size = 'lg',
+  ...rest
+}) => {
+  const isLetter = children.some(child => child && (child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
+  const isElement = children.some(child => child && (child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
+  const clone = children.map((child, index) => {
+    if (child === null) return null;
+    return isLetter ? child.type.name === 'InputText' ? /*#__PURE__*/React__default.cloneElement(child, {
+      inputGroup: true,
+      size: size,
+      key: index
+    }) : /*#__PURE__*/React__default.cloneElement(child, {
+      size: size,
+      key: index
+    }) : /*#__PURE__*/React__default.cloneElement(child, {
+      size: size,
+      key: index
+    });
+  });
+  return /*#__PURE__*/jsx(InputGroupStyle, {
+    ...rest,
+    children: clone,
+    isLetter: isLetter,
+    size: size,
+    isElement: isElement
+  });
+};
+InputGroup.propTypes = {
+  /**
+    Adjust Input Text Size
+   */
+  size: PropTypes.oneOf(['sm', 'lg']),
+  /**
+    Children must be InputText, InputAddon, or InputPrefixes
+   */
+  children: PropTypes.node.isRequired,
+  /** Error state */
+  isInvalid: PropTypes.bool,
+  /** read-only state */
+  readOnly: PropTypes.bool,
+  /** disabled state */
+  disabled: PropTypes.bool
+};
+
+export { InputGroup };

package/components/form/components/InputLetter/InputLetter.esm.js

@@ -0,0 +1,68 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Text from '../../../text/Text.esm.js';
+import PropTypes from 'prop-types';
+
+const InputLetter = styled(Text, {
+  flex: '0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '6px $spacing-05',
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    color: {
+      primary: {
+        color: '$iconPrimary'
+      },
+      disabled: {
+        color: '$iconDisable'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg',
+    color: 'primary'
+  }
+});
+const InputPrefix = styled(InputLetter, {
+  padding: '6px 0px 6px $spacing-05',
+  defaultVariants: {
+    variant: 'placeholder',
+    color: 'secondary',
+    as: 'div'
+  }
+});
+InputPrefix.name = 'InputPrefix';
+InputPrefix.displayName = 'InputPrefix';
+InputPrefix.defaultProps = {
+  as: 'div'
+};
+InputPrefix.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+const InputSuffix = styled(InputLetter, {
+  padding: '6px $spacing-05 6px 0px',
+  defaultVariants: {
+    variant: 'placeholder',
+    color: 'secondary',
+    as: 'div'
+  }
+});
+InputSuffix.name = 'InputSuffix';
+InputSuffix.displayName = 'InputSuffix';
+InputSuffix.defaultProps = {
+  as: 'div'
+};
+InputSuffix.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+export { InputPrefix, InputSuffix };

package/components/form/components/InputNumber/InputNumber.esm.js

@@ -0,0 +1,248 @@
+import React__default, { cloneElement } from 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import NumberFormat from './NumberFormat.esm.js';
+import { Controller } from 'react-hook-form';
+import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledInput = styled(NumberFormat, {
+  // Reset
+  appearance: 'none',
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  margin: '0',
+  outline: 'none',
+  width: '100%',
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  '&::before': {
+    boxSizing: 'border-box'
+  },
+  '&::after': {
+    boxSizing: 'border-box'
+  },
+  // Custom
+  background: 'none',
+  color: '$textPrimary',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  fontWeight: '400',
+  padding: '10px $spacing-05',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  '&:focus': {
+    border: '1px solid $colors$primary400'
+  },
+  '&:active': {
+    border: '1px solid $colors$primary400'
+  },
+  '&:hover': {
+    border: '1px solid $colors$primary600'
+  },
+  '&:disabled': {
+    backgroundColor: '$formDisable',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
+    '&:hover': {
+      border: '1px solid $colors$gray300'
+    }
+  },
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  compoundVariants: [{
+    inputGroup: true,
+    isInvalid: true,
+    css: {
+      border: 'none',
+      '&:focus': {
+        border: 'none'
+      },
+      '&:hover': {
+        border: 'none'
+      }
+    }
+  }, {
+    asChild: true,
+    isInvalid: true,
+    css: {
+      border: 'none',
+      '&:focus': {
+        border: 'none'
+      },
+      '&:hover': {
+        border: 'none'
+      }
+    }
+  }],
+  variants: {
+    isReadOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    inputGroup: {
+      true: {
+        border: 'none',
+        borderRadius: '$lg',
+        '&:focus': {
+          border: 'none'
+        },
+        '&:active': {
+          border: 'none'
+        },
+        '&:hover': {
+          border: 'none'
+        },
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          color: '$textDisable',
+          cursor: 'default',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $colors$gray300'
+          }
+        }
+      }
+    },
+    asChild: {
+      true: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        border: 'none',
+        borderRadius: '$lg',
+        '&:focus': {
+          border: 'none'
+        },
+        '&:active': {
+          border: 'none'
+        },
+        '&:hover': {
+          border: 'none'
+        },
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          color: '$textDisable',
+          cursor: 'default',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: 'none'
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 32
+      },
+      md: {
+        height: 36
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $colors$red400',
+        '&:focus': {
+          border: '1px solid $colors$red400'
+        },
+        '&:hover': {
+          border: '1px solid $colors$red400'
+        }
+      }
+    },
+    isPicker: {
+      true: {
+        fontSize: '$placeholder',
+        letterSpacing: '$placeholder',
+        lineHeight: '$placeholder',
+        fontVariantNumeric: 'unset',
+        caretColor: 'transparent',
+        cursor: 'pointer',
+        padding: '0'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+function countThousandSeparatorsByLength(numberLength) {
+  const separatorCount = Math.floor((numberLength - 1) / 3);
+  return separatorCount;
+}
+function getMaxValueLength(maxValue, prefix = '', suffix = '', thousandSeparator) {
+  const tsLength = thousandSeparator ? countThousandSeparatorsByLength(maxValue) : 0;
+  return maxValue + prefix?.length + suffix?.length + tsLength;
+}
+const InputNumber = /*#__PURE__*/React__default.forwardRef(({
+  placeholder,
+  value,
+  size,
+  isInvalid,
+  readOnly,
+  disabled,
+  control,
+  name,
+  maxValueLength,
+  maxLength,
+  thousandSeparator,
+  ...props
+}, ref) => /*#__PURE__*/jsx(ConditionalWrapper, {
+  condition: Boolean(control),
+  wrapper: child => /*#__PURE__*/jsx(Controller, {
+    control: control,
+    name: name,
+    render: ({
+      field: {
+        name: controlName,
+        ref: controlRef
+      }
+    }) => /*#__PURE__*/cloneElement(child, {
+      ref,
+      getInputRef: controlRef,
+      name: controlName
+    })
+  }),
+  children: /*#__PURE__*/jsx(StyledInput, {
+    ref: ref,
+    placeholder: placeholder,
+    value: value,
+    size: size,
+    isInvalid: isInvalid,
+    readOnly: readOnly,
+    isReadOnly: readOnly && !props?.inputGroup && !props?.asChild,
+    disabled: disabled,
+    maxLength: maxValueLength ? getMaxValueLength(maxValueLength, props?.prefix, props?.suffix, thousandSeparator) : maxLength,
+    thousandSeparator: thousandSeparator,
+    ...props
+  })
+}));
+InputNumber.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  isInvalid: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+InputNumber.defaultProps = {
+  size: 'lg',
+  thousandSeparator: '.',
+  decimalSeparator: ','
+};
+InputNumber.name = 'InputText';
+InputNumber.displayName = 'InputNumber';
+
+export { InputNumber };