feat(FormInputs): Rebranding of Form Inputs, including TableInput

leemonade · Jan 5, 2024 · d8faaf5 · d8faaf5
1 parent 85f9a85
commit d8faaf5
Show file tree

Hide file tree

Showing 18 changed files with 201 additions and 120 deletions.
diff --git a/packages/components/src/form/ActionButton/ActionButton.js b/packages/components/src/form/ActionButton/ActionButton.js
@@ -50,7 +50,7 @@ const ActionButton = forwardRef(
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const color = ACTION_BUTTON_COLORS.includes(colorProp)
       ? colorProp
@@ -67,7 +67,7 @@ const ActionButton = forwardRef(
         radius,
         active,
       },
-      { classNames, name: 'ActionButton' }
+      { classNames, name: 'ActionButton' },
     );
 
     return (
@@ -94,7 +94,7 @@ const ActionButton = forwardRef(
         </MantineButton>
       </TooltipComponent>
     );
-  }
+  },
 );
 
 ActionButton.defaultProps = ACTION_BUTTON_DEFAULT_PROPS;

diff --git a/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js b/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js
@@ -1,14 +1,14 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { getFontExpressive } from '../../theme.mixins';
 
-export const AutocompleteBadgeStyles = createStyles((theme, {}) => {
-  return {
-    root: {
-      ...getFontExpressive(theme.fontSizes['2']),
-    },
-    item: {
-      paddingBlock: 4,
-    },
-    itemsWrapper: { padding: 50 },
-  };
-});
+const AutocompleteBadgeStyles = createStyles((theme) => ({
+  root: {
+    ...getFontExpressive(theme.fontSizes['2']),
+  },
+  item: {
+    paddingBlock: 4,
+  },
+  itemsWrapper: { padding: 50 },
+}));
+
+export { AutocompleteBadgeStyles };
diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js
@@ -60,6 +60,7 @@ const Button = forwardRef(
         hasLeftIcon,
         hasRightIcon,
         isSelected,
+        onlyIcon: !children,
       },
       { name: 'Button' },
     );

diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js
@@ -20,9 +20,17 @@ const getIsSelected = (isSelected, theme) => {
   };
 };
 
-const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => {
+const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme, onlyIcon) => {
   if (!hasLeftIcon && !hasRightIcon) return;
+
   const buttonPadding = theme.other.button.spacing.padding;
+
+  if (onlyIcon) {
+    return {
+      padding: `${buttonPadding.vertical.md} ${buttonPadding.horizontal.xs} ${buttonPadding.vertical.md} ${buttonPadding.horizontal.xs}`,
+    };
+  }
+
   const iconLeftPadding = hasLeftIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm;
   const iconRightPadding = hasRightIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm;
   return {
@@ -164,6 +172,7 @@ export const ButtonStyles = createStyles(
       hasLeftIcon,
       hasRightIcon,
       isSelected,
+      onlyIcon,
     },
   ) => {
     const currentVariant = getVariant(variant, theme, color);
@@ -201,7 +210,7 @@ export const ButtonStyles = createStyles(
         ...getSizes(size || 'md', theme),
         ...getVariant(variant, theme, color),
         ...styles,
-        ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme),
+        ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme, onlyIcon),
         ...getIsSelected(isSelected, theme),
         '&[data-loading]': {
           // borderColor: 'transparent',
@@ -221,11 +230,11 @@ export const ButtonStyles = createStyles(
       },
       rightIcon: {
         ...iconStyles,
-        marginLeft: buttonTheme.spacing.gap,
+        marginLeft: onlyIcon ? 0 : buttonTheme.spacing.gap,
       },
       leftIcon: {
         ...iconStyles,
-        marginRight: buttonTheme.spacing.gap,
+        marginRight: onlyIcon ? 0 : buttonTheme.spacing.gap,
       },
       inner: {
         height: 20,

diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js
@@ -69,6 +69,11 @@ function TimeInput({ onChange, size, ...props }) {
   return <MantineTimeInput {...props} onChange={onChange} classNames={classes} size={size} />;
 }
 
+TimeInput.propTypes = {
+  size: PropTypes.oneOf(DATE_PICKER_SIZES),
+  onChange: PropTypes.func,
+};
+
 const DatePicker = forwardRef(
   (
     {
@@ -95,7 +100,7 @@ const DatePicker = forwardRef(
       style,
       ...props
     },
-    ref
+    ref,
   ) => {
     const uuid = useId();
     const [currentLocale, setCurrentLocale] = useState(locale);
@@ -196,9 +201,10 @@ const DatePicker = forwardRef(
         )}
       </InputWrapper>
     );
-  }
+  },
 );
 
+DatePicker.displayName = 'DatePicker';
 DatePicker.defaultProps = DATE_PICKER_DEFAULT_PROPS;
 DatePicker.propTypes = DATE_PICKER_PROP_TYPES;
 

diff --git a/packages/components/src/form/DatePicker/DatePicker.styles.js b/packages/components/src/form/DatePicker/DatePicker.styles.js
@@ -1,8 +1,8 @@
 import { createStyles } from '@mantine/styles';
 import { getBoxShadowFromToken } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
+const DatePickerStyles = createStyles((theme, { size, date, range }) => {
   const checkDate = () => {
     if (range) {
       if (Array.isArray(date)) return date?.every((value) => !!value);
@@ -20,6 +20,7 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
       ...getInputStyle(inputTheme, theme.other.global),
       textOverflow: 'ellipsis !important',
       paddingRight: checkDate() && 30,
+      minHeight: 40,
     },
     dropdown: {
       padding: `${calendarTheme.spacing.padding.vertical} ${calendarTheme.spacing.padding.horizontal}`,
@@ -37,3 +38,5 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
     },
   };
 });
+
+export { DatePickerStyles };
diff --git a/packages/components/src/form/Input/Input.js b/packages/components/src/form/Input/Input.js
@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import { Input as MantineInput } from '@mantine/core';
 import { InputStyles } from './Input.styles';
 
 export const INPUT_SIZES = ['sm', 'md'];
-export const Input = forwardRef(
+const Input = forwardRef(
   (
     {
       radius,
@@ -17,7 +18,7 @@ export const Input = forwardRef(
       classNames = {},
       ...props
     },
-    ref
+    ref,
   ) => {
     const hasIcon = !!icon;
     const size = INPUT_SIZES.includes(sizeProp) ? sizeProp : 'md';
@@ -27,8 +28,6 @@ export const Input = forwardRef(
       <MantineInput
         {...props}
         ref={ref}
-        // variant={variant}
-        // size={size}
         invalid={invalid}
         icon={icon}
         disabled={disabled}
@@ -37,5 +36,20 @@ export const Input = forwardRef(
         autoComplete={autoComplete}
       />
     );
-  }
+  },
 );
+
+Input.displayName = 'Input';
+Input.propTypes = {
+  size: PropTypes.oneOf(INPUT_SIZES),
+  variant: PropTypes.any,
+  radius: PropTypes.any,
+  icon: PropTypes.node,
+  rightSection: PropTypes.node,
+  invalid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  autoComplete: PropTypes.string,
+  classNames: PropTypes.any,
+};
+
+export { Input };
diff --git a/packages/components/src/form/Input/Input.styles.js b/packages/components/src/form/Input/Input.styles.js
@@ -1,20 +1,22 @@
 import { createStyles } from '@mantine/styles';
-import { getPaddings, getFocusStyles, getSpacing, pxToRem } from '../../theme.mixins';
 import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => {
+const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     root: {},
     input: {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global, disabled),
       height: 'auto',
+      minHeight: 40,
     },
-    rightSection: { color: inputTheme.content.color.icon },
+    rightSection: { color: inputTheme.content.color.icon, paddingRight: 6 },
     icon: {
       width: 32,
       color: inputTheme.content.color.icon,
     },
   };
 });
+
+export { InputStyles };
diff --git a/packages/components/src/form/NumberInput/NumberInput.styles.js b/packages/components/src/form/NumberInput/NumberInput.styles.js
@@ -1,15 +1,15 @@
 import { createStyles } from '@mantine/styles';
-import { getPaddings, getFocusStyles, getSpacing } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
+const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     root: {},
     input: {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global),
       paddingRight: 24,
+      minHeight: 40,
     },
     icon: {
       width: 32,
@@ -61,3 +61,5 @@ export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
     },
   };
 });
+
+export { NumberInputStyles };
diff --git a/packages/components/src/form/PasswordInput/PasswordInput.styles.js b/packages/components/src/form/PasswordInput/PasswordInput.styles.js
@@ -1,8 +1,7 @@
 import { createStyles } from '@mantine/styles';
-import { getBoxShadowFromToken, getFocusStyles, getPaddings } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => {
+const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => {
   const inputTheme = theme.other.input;
   const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon);
   const inputStyles = getInputStyle(inputTheme, theme.other.global);
@@ -11,7 +10,7 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
     input: {
       ...inputSizes,
       ...inputStyles,
-      // padding: 0,
+      minHeight: 40,
     },
     innerInput: {
       ...inputSizes,
@@ -27,7 +26,7 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
       backgroundColor: 'inherit !important',
       boxShadow: 'none !important',
     },
-    // rightSection: { ...getRightSection(theme) },
+    rightSection: { paddingRight: 6 },
     visibilityToggle: {
       color: '#495057',
     },
@@ -37,3 +36,5 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
     },
   };
 });
+
+export { PasswordInputStyles };
diff --git a/packages/components/src/form/Select/Select.styles.js b/packages/components/src/form/Select/Select.styles.js
@@ -1,14 +1,15 @@
 import { createStyles } from '@mantine/styles';
 import { getInputSizes, getInputStyle, getSelectDividerStyle } from '../mixins/fieldStyles.mixins';
 
-export const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => {
+const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     input: {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global),
       paddingRight: 30,
       textOverflow: 'ellipsis',
+      minHeight: 40,
     },
     icon: {
       width: 32,
@@ -26,3 +27,5 @@ export const SelectStyles = createStyles((theme, { size, rightEvents, variant, h
     ...getSelectDividerStyle(theme, theme.other.global),
   };
 });
+
+export { SelectStyles };
diff --git a/packages/components/src/form/TableInput/TableInput.js b/packages/components/src/form/TableInput/TableInput.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import update from 'immutability-helper';
-import { map, forEach, isEmpty, isFunction } from 'lodash';
+import { map, forEach, isEmpty, isFunction, noop } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { useForm } from 'react-hook-form';
 import { Box } from '../../layout/Box';
@@ -40,26 +40,23 @@ const TableInput = ({
   resetOnAdd,
   rowsExpanded,
   rowStyles,
-  onChange = () => {},
-  onChangeData = () => {},
-  onBeforeRemove = () => {},
-  onBeforeAdd = () => {},
-  onAdd = () => {},
-  onUpdate = () => {},
-  onRemove = () => {},
-  onItemAdd = () => {},
-  onSort = () => {},
-  renderRowSubComponent = () => {},
+  onChange = noop,
+  onChangeData = noop,
+  onBeforeRemove = noop,
+  onBeforeAdd = noop,
+  onAdd = noop,
+  onUpdate = noop,
+  onRemove = noop,
+  onItemAdd = noop,
+  onSort = noop,
+  renderRowSubComponent = noop,
+  disabled,
   ...props
 }) => {
   const [tableData, setTableData] = useState([]);
   const hasError = useMemo(() => !isEmpty(error), [error]);
 
-  let form = formProp;
-
-  if (!form) {
-    form = useForm();
-  }
+  const form = formProp ?? useForm();
 
   useEffect(() => {
     const newData = serializeData(data);
@@ -141,13 +138,17 @@ const TableInput = ({
     handleOnChange(newData, { type: 'sort' });
   };
 
-  const { classes, cx } = TableInputStyles({ hasError, rowStyles }, { name: 'TableInput' });
+  const { classes, cx } = TableInputStyles(
+    { hasError, disabled, rowStyles },
+    { name: 'TableInput' },
+  );
 
   return (
     <Box>
       <Box className={classes.wrapper}>
         <TableInputDisplay
           {...props}
+          disabled={disabled}
           form={form}
           rowStyles={rowStyles}
           data={tableData}