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

package/components/form/components/FormGroup/FormGroup.esm.js

@@ -0,0 +1,142 @@
+import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.js';
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import Text from '../../../text/Text.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const formLabelClassStyle = {
+  alignItems: 'start !important',
+  '& > div': {
+    width: 175
+  },
+  '& > div > span[role="label"]': {
+    color: '$textPrimary',
+    fontSize: '$label',
+    fontWeight: 500,
+    lineHeight: '$label',
+    letterSpacings: '$label',
+    '@md': {
+      color: '$textPrimary',
+      fontSize: '$section-sub-title',
+      fontWeight: 600,
+      lineHeight: '$section-sub-title',
+      letterSpacings: '$section-sub-title'
+    }
+  }
+};
+const formLabelStyle = {
+  '& > .form-label': {
+    ...formLabelClassStyle
+  }
+};
+const StyledFormGroup = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  rowGap: '$spacing-03',
+  variants: {
+    withCounter: {
+      true: {
+        '& > .form-label': {
+          marginTop: '-24px',
+          ...formLabelClassStyle
+        }
+      }
+    },
+    responsive: {
+      input: {
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+        gap: '$spacing-03',
+        ...formLabelStyle,
+        '@md': {
+          gridTemplateColumns: '175px 1fr',
+          columnGap: '$cozy',
+          rowGap: '$spacing-03',
+          '& > *:nth-child(n+3)': {
+            gridColumn: '2/3'
+          }
+        }
+      },
+      button: {
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+        ...formLabelStyle,
+        '@md': {
+          alignItems: 'center',
+          gridTemplateColumns: '175px 1fr',
+          columnGap: '$cozy',
+          rowGap: '$spacing-03',
+          '& > *:nth-child(n+3)': {
+            gridColumn: '2/3'
+          }
+        }
+      },
+      switch: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        '& *:nth-child(2)': {
+          justifySelf: 'flex-end'
+        },
+        '& *:nth-child(3)': {
+          gridColumn: '1/3'
+        },
+        '& *:nth-child(4)': {
+          gridColumn: '1/3'
+        },
+        ...formLabelStyle,
+        '@md': {
+          alignItems: 'center',
+          gridTemplateColumns: '175px auto 1fr',
+          columnGap: '$cozy',
+          rowGap: '$spacing-03',
+          '& *:nth-child(2)': {
+            justifySelf: 'flex-start'
+          },
+          '& *:nth-child(3)': {
+            gridColumn: 'unset'
+          },
+          '& > *:nth-child(n+4)': {
+            gridColumn: '2/3'
+          }
+        }
+      }
+    }
+  }
+});
+const FormGroup = ({
+  count,
+  maxCount,
+  css,
+  ...props
+}) => {
+  const withCounter = Boolean(count || maxCount);
+  return /*#__PURE__*/jsx(ConditionalWrapper, {
+    condition: withCounter,
+    wrapper: children => /*#__PURE__*/jsxs(Flex, {
+      direction: "column",
+      css: css,
+      children: [/*#__PURE__*/jsxs(Text, {
+        variant: "label",
+        color: "disable",
+        css: {
+          alignSelf: 'end',
+          marginBottom: '$spacing-03 !important'
+        },
+        children: [count, "/", maxCount]
+      }), children]
+    }),
+    children: /*#__PURE__*/jsx(StyledFormGroup, {
+      withCounter: withCounter,
+      css: {
+        ...(!withCounter && {
+          ...css
+        })
+      },
+      ...props
+    })
+  });
+};
+FormGroup.displayName = 'FormGroup';
+
+export { FormGroup as default };

package/components/form/components/FormHelper/Helper.esm.js

@@ -0,0 +1,50 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Text from '../../../text/Text.esm.js';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledHelper = styled(Text, {
+  display: 'inline-block',
+  color: '$textSecondary',
+  variants: {
+    error: {
+      true: {
+        color: '$textRed'
+      }
+    }
+  }
+});
+const FormHelper = ({
+  children,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const errorByMessage = !!errorMessage;
+  if (error === undefined && errorByMessage) {
+    return /*#__PURE__*/jsx(StyledHelper, {
+      error: true,
+      variant: "helper",
+      className: "retina-error",
+      ...props,
+      children: errorMessage
+    });
+  }
+  if (children === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(StyledHelper, {
+    error: error,
+    variant: "helper",
+    classname: "retina-error",
+    ...props,
+    children: children
+  });
+};
+FormHelper.propTypes = {
+  error: PropTypes.bool
+};
+FormHelper.displayName = 'FormHelper';
+
+export { FormHelper as default };

package/components/form/components/FormLabel/Label.esm.js

@@ -0,0 +1,90 @@
+import 'core-js/modules/es.array.includes.js';
+import 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Text from '../../../text/Text.esm.js';
+import { CircleQuestionOutline } from '@majoo-ui/icons';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import PropTypes from 'prop-types';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Badge from '../../../badge/Badge.esm.js';
+import Tooltip from '../../../tooltip/Tooltip.esm.js';
+
+const StyledLabel = styled(LabelPrimitive.Root, Text, {
+  display: 'inline-block',
+  fontSize: '$label',
+  lineHeight: '$label',
+  fontWeight: '500',
+  variants: {
+    variant: {
+      required: {
+        '&::after': {
+          color: '$textRed',
+          content: '*'
+        }
+      }
+    }
+  }
+});
+const StyledHelpIcon = styled(CircleQuestionOutline, {
+  size: '16px'
+});
+const LabelVariantsEnum = ['required', 'optional', 'with-tooltip'];
+const FormLabel = ({
+  children,
+  htmlFor,
+  variant,
+  variants,
+  tooltipLabel,
+  count,
+  maxCount,
+  labelCss,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxs(Flex, {
+    justify: "between",
+    className: "form-label",
+    children: [/*#__PURE__*/jsxs(Flex, {
+      align: "center",
+      gap: 3,
+      ...props,
+      children: [/*#__PURE__*/jsx(StyledLabel, {
+        htmlFor: htmlFor,
+        variant: variant,
+        css: labelCss,
+        children: children
+      }), (variant === LabelVariantsEnum[1] || variants.includes(LabelVariantsEnum[1])) && /*#__PURE__*/jsx(Badge, {
+        css: {
+          padding: '$spacing-02 $spacing-03',
+          color: '$gray600',
+          backgroundColor: '$gray150',
+          borderRadius: '100px',
+          fontSize: '$label',
+          lineHeight: '$label'
+        },
+        children: "Opsional"
+      }), (variant === LabelVariantsEnum[2] || variants.includes(LabelVariantsEnum[2])) && /*#__PURE__*/jsx(Tooltip, {
+        label: tooltipLabel,
+        children: /*#__PURE__*/jsx(StyledHelpIcon, {})
+      })]
+    }), maxCount && /*#__PURE__*/jsxs(Text, {
+      variant: "label",
+      color: "disable",
+      children: [count, "/", maxCount]
+    })]
+  });
+};
+FormLabel.propTypes = {
+  variant: PropTypes.oneOf(LabelVariantsEnum),
+  variants: PropTypes.array,
+  htmlFor: PropTypes.string,
+  tooltipLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  count: PropTypes.number,
+  maxCount: PropTypes.number
+};
+FormLabel.defaultProps = {
+  variants: []
+};
+FormLabel.displayName = 'FormLabel';
+
+export { LabelVariantsEnum, FormLabel as default };

package/components/form/components/InputAddon/InputAddon.esm.js

@@ -0,0 +1,105 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Text from '../../../text/Text.esm.js';
+
+const InputAddon = styled(Text, {
+  backgroundColor: '$formDisable',
+  flex: '0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  padding: '6px $spacing-05',
+  '&.addon:hover': {
+    borderColor: '$gray300'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    placements: {
+      left: {
+        border: '1px solid $bgOutline',
+        borderRightWidth: 0,
+        borderRadius: '$lg',
+        borderEndEndRadius: 0,
+        borderStartEndRadius: 0
+      },
+      right: {
+        border: '1px solid $bgOutline',
+        borderLeftWidth: 0,
+        borderRadius: '$lg',
+        borderEndStartRadius: 0,
+        borderStartStartRadius: 0
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+InputAddon.defaultProps = {
+  as: 'div',
+  className: 'addon'
+};
+const InputLeftAddon = styled(InputAddon, {
+  variants: {
+    isInvalid: {
+      true: {
+        border: '1px solid $colors$red400',
+        borderRight: 0,
+        '&:focus': {
+          border: '1px solid $colors$red400',
+          borderRight: 0
+        },
+        '&:hover': {
+          border: '1px solid $colors$red400',
+          borderRight: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placements: 'left',
+    variant: 'placeholder'
+  }
+});
+InputLeftAddon.defaultProps = {
+  as: 'div',
+  className: 'addon'
+};
+InputLeftAddon.name = 'InputLeftAddon';
+const InputRightAddon = styled(InputAddon, {
+  variants: {
+    isInvalid: {
+      true: {
+        border: '1px solid $colors$red400',
+        borderLeft: 0,
+        '&:focus': {
+          border: '1px solid $colors$red400',
+          borderLeft: 0
+        },
+        '&:hover': {
+          border: '1px solid $colors$red400',
+          borderLeft: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placements: 'right',
+    variant: 'placeholder'
+  }
+});
+InputRightAddon.name = 'InputRightAddon';
+InputRightAddon.defaultProps = {
+  as: 'div',
+  className: 'addon'
+};
+
+export { InputLeftAddon, InputRightAddon };

package/components/form/components/InputCheckbox/CheckboxGroup.esm.js

@@ -0,0 +1,60 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import PropTypes from 'prop-types';
+import React__default, { useState, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxContext = /*#__PURE__*/createContext();
+const CheckboxGroup = ({
+  children,
+  onChange,
+  value,
+  defaultValue,
+  disabled
+}) => {
+  const [selectedItems, setSelectedItems] = useState(defaultValue);
+  const checkItem = (item, index) => {
+    if (!value) {
+      setSelectedItems(current => {
+        const items = [...current, item];
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange([...value, item], index);
+    }
+  };
+  const uncheckItem = (item, index) => {
+    if (!value) {
+      setSelectedItems(current => {
+        const items = current.filter(currItem => currItem !== item);
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange(value.filter(currItem => currItem !== item), index);
+    }
+  };
+  const values = {
+    checkItem,
+    uncheckItem,
+    checkedItems: value || selectedItems
+  };
+  return /*#__PURE__*/jsx(CheckboxContext.Provider, {
+    value: values,
+    children: React__default.Children.map(children, child => /*#__PURE__*/React__default.cloneElement(child, {
+      disabled: child.props.disabled || disabled
+    }))
+  });
+};
+CheckboxGroup.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  defaultValue: PropTypes.array
+};
+CheckboxGroup.defaultProps = {
+  defaultValue: []
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export { CheckboxContext, CheckboxGroup as default };

package/components/form/components/InputCheckbox/InputCheckbox.esm.js

@@ -0,0 +1,129 @@
+import 'core-js/modules/es.array.includes.js';
+import { useContext, useState, useEffect } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import PropTypes from 'prop-types';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import FormLabel from '../FormLabel/Label.esm.js';
+import { CheckboxContext } from './CheckboxGroup.esm.js';
+import CheckOutline from './icon/CheckOutline.esm.js';
+import SvgMinusOutline from './icon/MinusOutline.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
+  alignItems: 'center',
+  display: 'flex',
+  height: '125%',
+  justifyContent: 'center',
+  width: '125%'
+});
+const StyledCheckbox = styled(CheckboxPrimitive.Root, {
+  all: 'unset',
+  cursor: 'pointer',
+  backgroundColor: 'white',
+  $$cbSize: '13px',
+  minWidth: '$$cbSize',
+  minHeight: '$$cbSize',
+  width: '$$cbSize',
+  height: '$$cbSize',
+  border: '1.5px solid $bgOutline',
+  borderRadius: '3px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '&:hover': {
+    border: '1.5px solid $primary400'
+  },
+  '&:focus': {
+    outline: '1.5px solid #82C4E0',
+    outlineOffset: '1px'
+  },
+  '&[data-state=checked]': {
+    backgroundColor: '$primary500',
+    border: '1.5px solid $primary500',
+    color: 'white',
+    '&:hover': {
+      backgroundColor: '$primary600',
+      border: '1.5px solid $primary600'
+    },
+    '&:focus': {}
+  },
+  '&:disabled': {
+    pointerEvents: 'none',
+    border: '1.5px solid $gray200',
+    '&[data-state=checked]': {
+      backgroundColor: '$gray200',
+      color: 'white'
+    }
+  }
+});
+const Checkbox = ({
+  id,
+  checked,
+  indeterminate,
+  disabled,
+  onCheckedChange,
+  label,
+  index,
+  value,
+  ...props
+}) => {
+  const context = useContext(CheckboxContext);
+  const [isChecked, setChecked] = useState(false);
+  useEffect(() => {
+    const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
+    setChecked(checkValue ?? false);
+  }, [checked, indeterminate, context]);
+  return /*#__PURE__*/jsx(StyledCheckbox, {
+    id: id,
+    disabled: disabled,
+    checked: isChecked,
+    onCheckedChange: isChecked => {
+      if (context) {
+        if (isChecked) context.checkItem(value, index);
+        if (!isChecked) context.uncheckItem(value, index);
+      }
+      if (onCheckedChange) onCheckedChange(isChecked);
+    },
+    ...props,
+    children: /*#__PURE__*/jsx(StyledIndicator, {
+      children: indeterminate ? /*#__PURE__*/jsx(SvgMinusOutline, {}) : /*#__PURE__*/jsx(CheckOutline, {})
+    })
+  });
+};
+const InputCheckbox = ({
+  ...props
+}) => {
+  return props.label ? /*#__PURE__*/jsxs(Flex, {
+    align: "center",
+    gap: 4,
+    children: [/*#__PURE__*/jsx(Checkbox, {
+      ...props
+    }), /*#__PURE__*/jsx(FormLabel, {
+      htmlFor: props.id,
+      labelCss: {
+        fontSize: '$long-content-regular',
+        lineHeight: '$long-content-regular',
+        letterSpacing: '$long-content-regular',
+        fontWeight: '400',
+        color: props.disabled ? '$textDisable' : '$textPrimary',
+        cursor: 'default'
+      },
+      children: props.label
+    })]
+  }) : /*#__PURE__*/jsx(Checkbox, {
+    ...props
+  });
+};
+InputCheckbox.propTypes = {
+  checked: PropTypes.bool,
+  indeterminate: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onCheckedChange: PropTypes.func,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  index: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
+};
+InputCheckbox.displayName = 'InputCheckbox';
+
+export { InputCheckbox as default };

package/components/form/components/InputCheckbox/icon/CheckOutline.esm.js

@@ -0,0 +1,33 @@
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const CheckOutline = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 13.06 13.06",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    }
+  }), /*#__PURE__*/jsx("path", {
+    d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    }
+  })]
+});
+
+export { CheckOutline as default };

package/components/form/components/InputCheckbox/icon/MinusOutline.esm.js

@@ -0,0 +1,33 @@
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SvgMinusOutline = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 18.22 18.22",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M15.61 0H2.6A2.595 2.595 0 0 0 0 2.6v13.01a2.595 2.595 0 0 0 2.6 2.6h13.01a2.595 2.595 0 0 0 2.6-2.6V2.6a2.595 2.595 0 0 0-2.6-2.6z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    }
+  }), /*#__PURE__*/jsx("path", {
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    d: "M14.31 10.41H3.9v-2.6h10.41z"
+  })]
+});
+
+export { SvgMinusOutline as default };