From 5773587eb738e6eb8672ede9dc348dd430070acb Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@protonmail.com>
Date: Wed, 25 Sep 2024 11:42:13 +0200
Subject: [PATCH] feat(fields): add unit prop to NumberInput

---
 src/fields/NumberInput.tsx             | 112 +++++++++++++++++++------
 stories/fields/NumberInput.stories.tsx |   4 +-
 2 files changed, 88 insertions(+), 28 deletions(-)

diff --git a/src/fields/NumberInput.tsx b/src/fields/NumberInput.tsx
index 31f4c2bc..505d581f 100644
--- a/src/fields/NumberInput.tsx
+++ b/src/fields/NumberInput.tsx
@@ -33,6 +33,7 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
   name: string
   onChange?: (nextValue: number | undefined) => Promisable<void>
   readOnly?: boolean | undefined
+  unit?: string | undefined
   value?: number | undefined
 }
 export function NumberInput({
@@ -53,6 +54,7 @@ export function NumberInput({
   onFocus,
   readOnly = false,
   style,
+  unit,
   value,
   ...originalProps
 }: NumberInputProps) {
@@ -105,44 +107,55 @@ export function NumberInput({
 
   useFieldUndefineEffect(isUndefinedWhenDisabled && !!disabled, onChange)
 
+  const commonInputProps = {
+    $areArrowsHidden: areArrowsHidden,
+    $isDisabled: disabled,
+    $isLight: isLight,
+    $isReadOnly: readOnly,
+    $isTransparent: isTransparent,
+    disabled,
+    id: name,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    readOnly,
+    ref: inputRef,
+    type: 'number',
+    value: value ?? '',
+    ...originalProps
+  }
+
   return (
     <Field className={controlledClassname} style={style}>
       <Label $idDisabled={disabled} $isHidden={isLabelHidden} $isRequired={isRequired} htmlFor={name}>
         {label}
       </Label>
 
-      <StyledInput
-        key={key}
-        ref={inputRef}
-        $areArrowsHidden={areArrowsHidden}
-        $hasError={hasError}
-        $isDisabled={disabled}
-        $isLight={isLight}
-        $isReadOnly={readOnly}
-        $isTransparent={isTransparent}
-        disabled={disabled}
-        id={name}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        readOnly={readOnly}
-        type="number"
-        value={value ?? ''}
-        {...originalProps}
-      />
+      {!unit && <InputWithoutUnit key={key} {...commonInputProps} />}
+      {!!unit && (
+        <InputBoxWithUnit
+          key={key}
+          $hasError={hasError}
+          $isDisabled={disabled}
+          $isLight={isLight}
+          $isReadOnly={readOnly}
+          $isTransparent={isTransparent}
+        >
+          <InputWithUnit {...commonInputProps} />
+          {unit}
+        </InputBoxWithUnit>
+      )}
 
       {!isErrorMessageHidden && hasError && <FieldError>{controlledError}</FieldError>}
     </Field>
   )
 }
 
-const StyledInput = styled(Input as any)<
+const BaseInput = styled(Input)<
   CommonFieldStyleProps & {
     $areArrowsHidden: boolean
   }
 >`
-  background-color: ${getFieldBackgroundColorFactory()};
-  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
   border-radius: 0;
   color: ${p => p.theme.color.gunMetal};
   ${p => p.$isReadOnly && `cursor: default;`}
@@ -169,9 +182,6 @@ const StyledInput = styled(Input as any)<
   }
 
   &:hover {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
-
     &::placeholder {
       color: ${getFieldPlaceholderColorFactoryForState('hover')};
     }
@@ -179,8 +189,6 @@ const StyledInput = styled(Input as any)<
 
   &:active,
   &:focus {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
     outline: 0;
 
     &::placeholder {
@@ -188,3 +196,53 @@ const StyledInput = styled(Input as any)<
     }
   }
 `
+
+const InputWithoutUnit = styled(BaseInput)<
+  CommonFieldStyleProps & {
+    $areArrowsHidden: boolean
+  }
+>`
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`
+
+const InputBoxWithUnit = styled.div<CommonFieldStyleProps>`
+  align-items: center;
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+  color: ${p => p.theme.color.slateGray};
+  display: flex;
+  font-size: 13px;
+  line-height: 19px;
+  padding-right: 8px;
+  user-select: none;
+  width: 100%;
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`
+
+const InputWithUnit = styled(BaseInput)`
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
+`
diff --git a/stories/fields/NumberInput.stories.tsx b/stories/fields/NumberInput.stories.tsx
index 10b4bc5a..b5ae94bf 100644
--- a/stories/fields/NumberInput.stories.tsx
+++ b/stories/fields/NumberInput.stories.tsx
@@ -25,6 +25,7 @@ const meta: Meta<NumberInputProps> = {
     isUndefinedWhenDisabled: ARG_TYPE.OPTIONAL_BOOLEAN,
     onChange: ARG_TYPE.NO_CONTROL_INPUT,
     readOnly: ARG_TYPE.OPTIONAL_BOOLEAN,
+    unit: ARG_TYPE.OPTIONAL_STRING,
     value: ARG_TYPE.OPTIONAL_NUMBER
   },
 
@@ -41,7 +42,8 @@ const meta: Meta<NumberInputProps> = {
     label: 'A number input',
     name: 'myNumberInput',
     placeholder: 'Pick a number',
-    readOnly: false
+    readOnly: false,
+    unit: ''
   },
 
   decorators: [