@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/form/components/InputTags/InputTags.esm.js

@@ -0,0 +1,268 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.map.js';
+import React__default from 'react';
+import { Tag } from '../../../tag/Tag.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import FormHelper from '../FormHelper/Helper.esm.js';
+import PropTypes from 'prop-types';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Wrapper = styled('div', {
+  margin: 0,
+  flexDirection: 'column',
+  display: 'block',
+  position: 'relative',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  alignItems: 'center',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  color: '$textDisable',
+  width: '100%'
+});
+const InputTagsComponent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  width: '100%',
+  margin: '0',
+  appearance: 'none',
+  backgroundolor: 'none',
+  boxSizing: 'border-box',
+  border: '1px solid $bgOutline',
+  color: '$textPrimary',
+  lineHeight: '$short-content-regular',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  '&:focus-within': {
+    border: '1px solid $formActive'
+  },
+  '&:hover': {
+    border: '1px solid $gray500'
+  },
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $formDefault'
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 32,
+        padding: '5px 16px',
+        borderRadius: '$md'
+      },
+      lg: {
+        height: 40,
+        padding: '8px 16px',
+        borderRadius: '$lg'
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
+    }
+  }
+});
+const Input = styled('input', {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  appearance: 'none',
+  backgroundolor: 'none',
+  border: 'none',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  cursor: 'text',
+  outline: 'none',
+  letterSpacing: '$short-content-regular',
+  '&:disabled': {
+    backgroundColor: 'transparent',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    }
+  }
+});
+const TagWrapper = styled(Box, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  marginTop: '5px',
+  gap: '5px'
+});
+function InputTags({
+  size,
+  isInvalid,
+  placeholder,
+  onChange,
+  onEnter,
+  onInputChange,
+  value,
+  disabled,
+  readOnly,
+  max,
+  maxChar,
+  pattern,
+  helperText,
+  unremovableTags,
+  onRemoveItem,
+  ...props
+}) {
+  const [tags, setTags] = React__default.useState(value);
+  const [regexError, setRegexError] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setTags(value);
+  }, [value]);
+  React__default.useEffect(() => {
+    onChange && onChange(tags);
+  }, [tags]);
+  const addTags = event => {
+    if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
+      if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
+        onEnter?.({
+          key: 'duplicate',
+          value: event.target.value
+        });
+        return;
+      }
+      if (pattern && pattern?.regex) {
+        const regex = new RegExp(pattern.regex);
+        if (!regex.test(event.target.value)) {
+          onEnter?.({
+            key: 'error',
+            value: event.target.value
+          });
+          setRegexError(true);
+          return;
+        }
+      }
+      setRegexError(false);
+      onEnter?.({
+        key: 'success',
+        value: event.target.value
+      });
+      setTags([...tags, event.target.value]);
+      event.target.value = '';
+    }
+  };
+  const removeTags = (index, key) => {
+    if (disabled || readOnly) {
+      return tags;
+    } else {
+      onRemoveItem?.(tags[index]);
+      setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
+    }
+  };
+
+  // const handleErrorMessage = () => {
+  //   if (regexError && pattern) {
+  //     if (pattern.errorMessage) {
+  //       return <Text color="red">{pattern.errorMessage}</Text>;
+  //     }
+
+  //     return <Text color="red">Invalid Input</Text>;
+  //   }
+  // };
+  return /*#__PURE__*/jsxs(Wrapper, {
+    children: [/*#__PURE__*/jsx(InputTagsComponent, {
+      size: size,
+      isInvalid: isInvalid || regexError,
+      disabled: disabled || readOnly || tags.length >= max,
+      value: value,
+      css: {
+        ...props.css
+      },
+      ...props,
+      children: /*#__PURE__*/jsx(Input, {
+        type: "text",
+        onKeyUp: event => addTags(event)
+        // onKeyDown={event => removeTags(tags.length - 1, event.key)}
+        ,
+        placeholder: placeholder,
+        onChange: onInputChange,
+        disabled: disabled || readOnly || tags.length >= max,
+        maxLength: maxChar
+        // pattern={pattern}
+      })
+    }), regexError && pattern && (pattern?.errorMessage ? /*#__PURE__*/jsx(FormHelper, {
+      color: "red",
+      children: pattern.errorMessage
+    }) : /*#__PURE__*/jsx(FormHelper, {
+      color: "red",
+      children: "Invalid Input"
+    })), helperText && /*#__PURE__*/jsx(Paragraph, {
+      shortContentRegular: true,
+      css: {
+        paddingTop: 8,
+        paddingBottom: 3,
+        fontSize: 12,
+        color: '$textSecondary'
+      },
+      children: helperText
+    }), /*#__PURE__*/jsx(TagWrapper, {
+      children: tags.map((tag, index) => /*#__PURE__*/jsx(Tag, {
+        disabled: disabled,
+        readOnly: readOnly,
+        size: size,
+        isRemovable: disabled || readOnly || unremovableTags.includes(tag) ? false : true,
+        onRemove: () => removeTags(index),
+        children: tag
+      }, index))
+    })]
+  });
+}
+InputTags.propTypes = {
+  placeholder: PropTypes.string,
+  size: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.arrayOf(PropTypes.string),
+  onRemoveItem: PropTypes.func,
+  onEnter: PropTypes.func,
+  onInputChange: PropTypes.func,
+  max: PropTypes.number,
+  maxChar: PropTypes.number,
+  isInvalid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  unremovableTags: PropTypes.arrayOf(PropTypes.string),
+  readOnly: PropTypes.bool,
+  helperText: PropTypes.string,
+  pattern: PropTypes.shape({
+    regex: PropTypes.string.isRequired,
+    errorMessage: PropTypes.string
+  })
+};
+InputTags.defaultProps = {
+  placeholder: 'Placeholder',
+  size: 'lg',
+  isInvalid: false,
+  disabled: false,
+  unremovableTags: [],
+  readOnly: false
+};
+
+export { InputTags, InputTags as default };

package/components/form/components/InputText/InputText.esm.js

@@ -0,0 +1,197 @@
+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 disabledStyle = {
+  backgroundColor: '$formDisable',
+  color: '$textDisable',
+  cursor: 'not-allowed',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  '&:hover': {
+    border: '1px solid $bgOutline'
+  }
+};
+const StyledInput = styled('input', {
+  // 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 $primary400'
+  },
+  '&:active': {
+    border: '1px solid $primary400'
+  },
+  '&:hover': {
+    border: '1px solid $primary600'
+  },
+  '&:disabled': disabledStyle,
+  '&[data-state="readonly"]': {
+    backgroundColor: '$formDisable'
+  },
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  compoundVariants: [{
+    inputGroup: true,
+    isInvalid: true,
+    css: {
+      border: 'none',
+      '&:focus': {
+        border: 'none'
+      },
+      '&:hover': {
+        border: 'none'
+      }
+    }
+  }],
+  variants: {
+    isDisabled: {
+      true: disabledStyle
+    },
+    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 $bgOutline'
+          }
+        }
+      }
+    },
+    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'
+          }
+        }
+      }
+    },
+    /**
+     * Please insert size with string 'sm' | 'lg'
+     */
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $red400',
+        '&:focus': {
+          border: '1px solid $red400'
+        },
+        '&:hover': {
+          border: '1px solid $red400'
+        }
+      }
+    },
+    isPicker: {
+      true: {
+        fontSize: '$placeholder',
+        letterSpacing: '$placeholder',
+        lineHeight: '$placeholder',
+        fontVariantNumeric: 'unset',
+        caretColor: 'transparent',
+        cursor: 'pointer',
+        padding: '0'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const InputText = /*#__PURE__*/React__default.forwardRef(({
+  disabled,
+  readOnly,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledInput, {
+  ref: ref,
+  disabled: disabled,
+  isDisabled: disabled,
+  readOnly: readOnly,
+  isReadOnly: readOnly,
+  ...props
+}));
+InputText.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  size: PropTypes.string,
+  isPicker: PropTypes.bool
+};
+InputText.displayName = 'InputText';
+
+export { InputText, StyledInput };

package/components/form/components/InputTextArea/InputTextArea.esm.js

@@ -0,0 +1,77 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import React__default, { useRef, useEffect } from 'react';
+import { StyledInput } from '../InputText/InputText.esm.js';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledTextArea = styled(StyledInput, {
+  variants: {
+    size: {
+      sm: {
+        height: '52px'
+      },
+      lg: {
+        height: '62px'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const InputTextArea = /*#__PURE__*/React__default.forwardRef(({
+  disabled,
+  readOnly,
+  ...props
+}, ref) => {
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '50px';
+      const scrollHeight = textareaRef?.current.scrollHeight;
+      textareaRef.current.style.height = scrollHeight + 5 + 'px';
+    }
+  }, []);
+  function handleKeyDown(e) {
+    e.target.style.height = '50px';
+    e.target.style.height = `${e.target.scrollHeight + 5}px`;
+  }
+  function mergeRefs(refs) {
+    return value => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          ref.current = value;
+        }
+      });
+    };
+  }
+  return /*#__PURE__*/jsx(StyledTextArea, {
+    ref: mergeRefs([textareaRef, ref]),
+    disabled: disabled,
+    isDisabled: disabled,
+    readOnly: readOnly,
+    isReadOnly: readOnly,
+    onKeyDown: handleKeyDown,
+    ...props
+  });
+});
+InputTextArea.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  size: PropTypes.string,
+  isPicker: PropTypes.bool
+};
+InputTextArea.defaultProps = {
+  as: 'textarea',
+  size: 'lg'
+};
+
+export { InputTextArea as default };

package/components/heading/Heading.esm.js

@@ -0,0 +1,64 @@
+import { styled } from '../../config/stitches.config.esm.js';
+import Text from '../text/Text.esm.js';
+
+const Heading = styled(Text, {
+  variants: {
+    heading: {
+      h1: {
+        fontSize: '$heading-1',
+        lineHeight: '$heading-1',
+        letterSpacing: '$heading-1',
+        fontWeight: 'bold'
+      },
+      h2: {
+        fontSize: '$heading-2',
+        lineHeight: '$heading-2',
+        letterSpacing: '$heading-2',
+        fontWeight: '600'
+      },
+      h3: {
+        fontSize: '$heading-3',
+        lineHeight: '$heading-3',
+        letterSpacing: '$heading-3',
+        fontWeight: '600'
+      },
+      pageTitle: {
+        fontSize: '$page-title-2',
+        lineHeight: '$page-title',
+        letterSpacing: '$page-title',
+        fontWeight: '600'
+      },
+      sectionTitle: {
+        fontSize: '$section-title',
+        lineHeight: '$section-title',
+        letterSpacing: '$section-title',
+        fontWeight: '600'
+      },
+      sectionSubTitle: {
+        fontSize: '$section-sub-title',
+        lineHeight: '$section-sub-title',
+        letterSpacing: '$section-sub-title',
+        fontWeight: '600'
+      },
+      headerTabs: {
+        fontSize: '$header-tabs',
+        lineHeight: '$header-tabs',
+        letterSpacing: '$header-tabs',
+        fontWeight: '500'
+      },
+      headerTable: {
+        fontSize: '$header-table',
+        lineHeight: '$header-table',
+        letterSpacing: '$header-table',
+        fontWeight: '600'
+      }
+    }
+  }
+});
+Heading.defaultProps = {
+  color: 'primary',
+  heading: 'h1'
+};
+Heading.displayName = 'Heading';
+
+export { Heading as default };

package/components/iconButton/IconButton.esm.js

@@ -0,0 +1,71 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+
+const IconButton = styled('button', {
+  cursor: 'pointer',
+  borderRadius: '$round',
+  size: '24px',
+  padding: '$spacing-01',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'none',
+  appearance: 'none',
+  // '&:focus': {
+  //   outline: '2px solid #82C4E0',
+  // },
+  '&:disabled': {
+    cursor: 'default',
+    '&:hover': {
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: {
+    buttonType: {
+      primary: {
+        backgroundColor: '$btnPrimary',
+        '&:hover': {
+          backgroundColor: '$btnHoverPrimary',
+          color: '$textBrand'
+        },
+        '&:active': {
+          backgroundColor: '$btnActivePrimary'
+        }
+      },
+      secondary: {
+        backgroundColor: 'transparent',
+        '&:hover': {
+          backgroundColor: '$btnHoverSecondary',
+          color: '$textBrand'
+        },
+        '&:active': {
+          backgroundColor: '$btnActiveSecondary'
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    buttonType: 'secondary'
+  }
+});
+IconButton.propTypes = {
+  buttonType: PropTypes.oneOf(['primary', 'secondary'])
+};
+
+export { IconButton as default };