Change to using arrow functions (#1603)

* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -105,14 +105,14 @@ const StyledCommentText = styled.div`
   padding-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-export function AutosizeTextInput({
+export const AutosizeTextInput = ({
   placeholder,
   onValidate,
   minRows = 1,
   onFocus,
   variant = AutosizeTextInputVariant.Icon,
   buttonTitle,
-}: OwnProps) {
+}: OwnProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
     variant === AutosizeTextInputVariant.Button,
@@ -160,17 +160,17 @@ export function AutosizeTextInput({
     [onValidate, setText, isFocused],
   );
 
-  function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
+  const handleInputChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
     const newText = event.currentTarget.value;
 
     setText(newText);
-  }
+  };
 
-  function handleOnClickSendButton() {
+  const handleOnClickSendButton = () => {
     onValidate?.(text);
 
     setText('');
-  }
+  };
 
   const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
 
@@ -231,4 +231,4 @@ export function AutosizeTextInput({
       </StyledContainer>
     </>
   );
-}
+};

front/src/modules/ui/input/components/BooleanInput.tsx

@@ -19,17 +19,17 @@ type OwnProps = {
   onToggle?: (newValue: boolean) => void;
 };
 
-export function BooleanInput({ value, onToggle }: OwnProps) {
+export const BooleanInput = ({ value, onToggle }: OwnProps) => {
   const [internalValue, setInternalValue] = useState(value);
 
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
 
-  function handleClick() {
+  const handleClick = () => {
     setInternalValue(!internalValue);
     onToggle?.(!internalValue);
-  }
+  };
 
   const theme = useTheme();
 
@@ -45,4 +45,4 @@ export function BooleanInput({ value, onToggle }: OwnProps) {
       </StyledEditableBooleanFieldValue>
     </StyledEditableBooleanFieldContainer>
   );
-}
+};

front/src/modules/ui/input/components/Checkbox.tsx

@@ -108,7 +108,7 @@ const StyledInput = styled.input<InputProps>`
   }
 `;
 
-export function Checkbox({
+export const Checkbox = ({
   checked,
   onChange,
   onCheckedChange,
@@ -116,7 +116,7 @@ export function Checkbox({
   variant = CheckboxVariant.Primary,
   size = CheckboxSize.Small,
   shape = CheckboxShape.Squared,
-}: OwnProps) {
+}: OwnProps) => {
   const [isInternalChecked, setIsInternalChecked] =
     React.useState<boolean>(false);
 
@@ -124,11 +124,11 @@ export function Checkbox({
     setIsInternalChecked(checked);
   }, [checked]);
 
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);
     onCheckedChange?.(event.target.checked);
     setIsInternalChecked(event.target.checked);
-  }
+  };
 
   return (
     <StyledInputContainer>
@@ -156,4 +156,4 @@ export function Checkbox({
       </label>
     </StyledInputContainer>
   );
-}
+};

front/src/modules/ui/input/components/DateInput.tsx

@@ -40,13 +40,13 @@ export type DateInputEditProps = {
   hotkeyScope: string;
 };
 
-export function DateInput({
+export const DateInput = ({
   value,
   hotkeyScope,
   onEnter,
   onEscape,
   onClickOutside,
-}: DateInputEditProps) {
+}: DateInputEditProps) => {
   const theme = useTheme();
 
   const [internalValue, setInternalValue] = useState(value);
@@ -63,9 +63,9 @@ export function DateInput({
     ],
   });
 
-  function handleChange(newDate: Date) {
+  const handleChange = (newDate: Date) => {
     setInternalValue(newDate);
-  }
+  };
 
   useEffect(() => {
     setInternalValue(value);
@@ -100,4 +100,4 @@ export function DateInput({
       </div>
     </div>
   );
-}
+};

front/src/modules/ui/input/components/DatePicker.tsx

@@ -226,26 +226,28 @@ export type DatePickerProps = {
   onChange?: (date: Date) => void;
 };
 
-export function DatePicker({ date, onChange, onMouseSelect }: DatePickerProps) {
-  return (
-    <StyledContainer>
-      <ReactDatePicker
-        open={true}
-        selected={date}
-        showMonthDropdown
-        showYearDropdown
-        onChange={() => {
-          // We need to use onSelect here but onChange is almost redundant with onSelect but is required
-        }}
-        customInput={<></>}
-        onSelect={(date: Date, event) => {
-          if (event?.type === 'click') {
-            onMouseSelect?.(date);
-          } else {
-            onChange?.(date);
-          }
-        }}
-      />
-    </StyledContainer>
-  );
-}
+export const DatePicker = ({
+  date,
+  onChange,
+  onMouseSelect,
+}: DatePickerProps) => (
+  <StyledContainer>
+    <ReactDatePicker
+      open={true}
+      selected={date}
+      showMonthDropdown
+      showYearDropdown
+      onChange={() => {
+        // We need to use onSelect here but onChange is almost redundant with onSelect but is required
+      }}
+      customInput={<></>}
+      onSelect={(date: Date, event) => {
+        if (event?.type === 'click') {
+          onMouseSelect?.(date);
+        } else {
+          onChange?.(date);
+        }
+      }}
+    />
+  </StyledContainer>
+);

front/src/modules/ui/input/components/DoubleTextInputEdit.tsx

@@ -32,40 +32,38 @@ const StyledTextInput = styled(StyledInput)`
   }
 `;
 
-export function DoubleTextInputEdit({
+export const DoubleTextInputEdit = ({
   firstValue,
   secondValue,
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
-}: DoubleTextInputEditProps) {
-  return (
-    <StyledDoubleTextContainer>
-      <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
-        {(nodeDimensions) => (
-          <StyledTextInput
-            width={nodeDimensions?.width}
-            placeholder={firstValuePlaceholder}
-            value={firstValue}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              onChange(event.target.value, secondValue);
-            }}
-          />
-        )}
-      </ComputeNodeDimensionsEffect>
-      <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
-        {(nodeDimensions) => (
-          <StyledTextInput
-            width={nodeDimensions?.width}
-            autoComplete="off"
-            placeholder={secondValuePlaceholder}
-            value={secondValue}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              onChange(firstValue, event.target.value);
-            }}
-          />
-        )}
-      </ComputeNodeDimensionsEffect>
-    </StyledDoubleTextContainer>
-  );
-}
+}: DoubleTextInputEditProps) => (
+  <StyledDoubleTextContainer>
+    <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
+      {(nodeDimensions) => (
+        <StyledTextInput
+          width={nodeDimensions?.width}
+          placeholder={firstValuePlaceholder}
+          value={firstValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onChange(event.target.value, secondValue);
+          }}
+        />
+      )}
+    </ComputeNodeDimensionsEffect>
+    <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
+      {(nodeDimensions) => (
+        <StyledTextInput
+          width={nodeDimensions?.width}
+          autoComplete="off"
+          placeholder={secondValuePlaceholder}
+          value={secondValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onChange(firstValue, event.target.value);
+          }}
+        />
+      )}
+    </ComputeNodeDimensionsEffect>
+  </StyledDoubleTextContainer>
+);

front/src/modules/ui/input/components/PhoneInput.tsx

@@ -80,7 +80,7 @@ export type PhoneCellEditProps = {
   hotkeyScope: string;
 };
 
-export function PhoneInput({
+export const PhoneInput = ({
   autoFocus,
   value,
   onEnter,
@@ -89,7 +89,7 @@ export function PhoneInput({
   onShiftTab,
   onClickOutside,
   hotkeyScope,
-}: PhoneCellEditProps) {
+}: PhoneCellEditProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -119,4 +119,4 @@ export function PhoneInput({
       />
     </StyledContainer>
   );
-}
+};

front/src/modules/ui/input/components/Radio.tsx

@@ -110,7 +110,7 @@ export type RadioProps = {
   labelPosition?: LabelPosition;
 };
 
-export function Radio({
+export const Radio = ({
   checked,
   value,
   onChange,
@@ -119,11 +119,11 @@ export function Radio({
   labelPosition = LabelPosition.Right,
   disabled = false,
   ...restProps
-}: RadioProps) {
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+}: RadioProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);
     onCheckedChange?.(event.target.checked);
-  }
+  };
 
   return (
     <StyledContainer {...restProps} labelPosition={labelPosition}>
@@ -152,6 +152,6 @@ export function Radio({
       )}
     </StyledContainer>
   );
-}
+};
 
 Radio.Group = RadioGroup;

front/src/modules/ui/input/components/RadioGroup.tsx

@@ -9,18 +9,18 @@ type RadioGroupProps = React.PropsWithChildren & {
   onValueChange?: (value: string) => void;
 };
 
-export function RadioGroup({
+export const RadioGroup = ({
   value,
   onChange,
   onValueChange,
   children,
-}: RadioGroupProps) {
+}: RadioGroupProps) => {
   const theme = useTheme();
 
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);
     onValueChange?.(event.target.value);
-  }
+  };
 
   return (
     <>
@@ -36,4 +36,4 @@ export function RadioGroup({
       })}
     </>
   );
-}
+};

front/src/modules/ui/input/components/TextInput.tsx

@@ -23,7 +23,7 @@ type OwnProps = {
   hotkeyScope: string;
 };
 
-export function TextInput({
+export const TextInput = ({
   placeholder,
   autoFocus,
   value,
@@ -33,14 +33,14 @@ export function TextInput({
   onTab,
   onShiftTab,
   onClickOutside,
-}: OwnProps) {
+}: OwnProps) => {
   const [internalText, setInternalText] = useState(value);
 
   const wrapperRef = useRef(null);
 
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInternalText(event.target.value);
-  }
+  };
 
   useEffect(() => {
     setInternalText(value);
@@ -67,4 +67,4 @@ export function TextInput({
       value={internalText}
     />
   );
-}
+};

front/src/modules/ui/input/components/Toggle.tsx

@@ -37,16 +37,16 @@ export type ToggleProps = {
   color?: string;
 };
 
-export function Toggle({ value, onChange, color }: ToggleProps) {
+export const Toggle = ({ value, onChange, color }: ToggleProps) => {
   const [isOn, setIsOn] = useState(value ?? false);
 
-  function handleChange() {
+  const handleChange = () => {
     setIsOn(!isOn);
 
     if (onChange) {
       onChange(!isOn);
     }
-  }
+  };
 
   useEffect(() => {
     if (value !== isOn) {
@@ -60,4 +60,4 @@ export function Toggle({ value, onChange, color }: ToggleProps) {
       <StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
     </StyledContainer>
   );
-}
+};