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>
   );
-}
+};

front/src/modules/ui/input/hooks/useRegisterInputEvents.ts

@@ -2,7 +2,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
-export function useRegisterInputEvents<T>({
+export const useRegisterInputEvents = <T>({
   inputRef,
   inputValue,
   onEscape,
@@ -20,7 +20,7 @@ export function useRegisterInputEvents<T>({
   onShiftTab?: (inputValue: T) => void;
   onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
   hotkeyScope: string;
-}) {
+}) => {
   useListenClickOutside({
     refs: [inputRef],
     callback: (event) => {
@@ -64,4 +64,4 @@ export function useRegisterInputEvents<T>({
     hotkeyScope,
     [onShiftTab, inputValue],
   );
-}
+};

front/src/modules/ui/input/image/components/ImageInput.tsx

@@ -87,7 +87,7 @@ type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
   disabled?: boolean;
 };
 
-export function ImageInput({
+export const ImageInput = ({
   picture,
   onUpload,
   onRemove,
@@ -96,7 +96,7 @@ export function ImageInput({
   errorMessage,
   disabled = false,
   ...restProps
-}: Props) {
+}: Props) => {
   const theme = useTheme();
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
   const onUploadButtonClick = () => {
@@ -168,4 +168,4 @@ export function ImageInput({
       </StyledContent>
     </StyledContainer>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -22,7 +22,7 @@ export type EntitiesForMultipleEntitySelect<
   loading: boolean;
 };
 
-export function MultipleEntitySelect<
+export const MultipleEntitySelect = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   entities,
@@ -39,15 +39,15 @@ export function MultipleEntitySelect<
   onCancel?: () => void;
   onSubmit?: () => void;
   value: Record<string, boolean>;
-}) {
+}) => {
   const debouncedSetSearchFilter = debounce(onSearchFilterChange, 100, {
     leading: true,
   });
 
-  function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     debouncedSetSearchFilter(event.currentTarget.value);
     onSearchFilterChange(event.currentTarget.value);
-  }
+  };
 
   let entitiesInDropdown = [
     ...(entities.filteredSelectedEntities ?? []),
@@ -103,4 +103,4 @@ export function MultipleEntitySelect<
       </StyledDropdownMenuItemsContainer>
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -34,7 +34,7 @@ export type SingleEntitySelectProps<
   | 'selectedEntity'
 >;
 
-export function SingleEntitySelect<
+export const SingleEntitySelect = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   disableBackgroundBlur = false,
@@ -42,7 +42,7 @@ export function SingleEntitySelect<
   onCreate,
   width,
   ...props
-}: SingleEntitySelectProps<CustomEntityForSelect>) {
+}: SingleEntitySelectProps<CustomEntityForSelect>) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
@@ -82,4 +82,4 @@ export function SingleEntitySelect<
       )}
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -28,7 +28,7 @@ export type SingleEntitySelectBaseProps<
   selectedEntity?: CustomEntityForSelect;
 };
 
-export function SingleEntitySelectBase<
+export const SingleEntitySelectBase = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   EmptyIcon,
@@ -38,7 +38,7 @@ export function SingleEntitySelectBase<
   onCancel,
   onEntitySelected,
   selectedEntity,
-}: SingleEntitySelectBaseProps<CustomEntityForSelect>) {
+}: SingleEntitySelectBaseProps<CustomEntityForSelect>) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const entitiesInDropdown = [selectedEntity, ...entitiesToSelect].filter(
     (entity): entity is CustomEntityForSelect =>
@@ -105,4 +105,4 @@ export function SingleEntitySelectBase<
       )}
     </StyledDropdownMenuItemsContainer>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -33,7 +33,8 @@ const meta: Meta<typeof SingleEntitySelect> = {
       ),
     },
   },
-  render: function Render(args) {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const searchFilter = useRecoilScopedValue(
       relationPickerSearchFilterScopedState,
     );

front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -13,7 +13,7 @@ const StyledDropdownMenuSkeletonContainer = styled.div`
   width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
-export function DropdownMenuSkeletonItem() {
+export const DropdownMenuSkeletonItem = () => {
   const theme = useTheme();
   return (
     <StyledDropdownMenuSkeletonContainer>
@@ -25,4 +25,4 @@ export function DropdownMenuSkeletonItem() {
       </SkeletonTheme>
     </StyledDropdownMenuSkeletonContainer>
   );
-}
+};

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts

@@ -8,7 +8,7 @@ import { relationPickerHoverIndexScopedState } from '../states/relationPickerHov
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
-export function useEntitySelectScroll<
+export const useEntitySelectScroll = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   containerRef,
@@ -16,11 +16,11 @@ export function useEntitySelectScroll<
 }: {
   entities: CustomEntityForSelect[];
   containerRef: React.RefObject<HTMLDivElement>;
-}) {
+}) => {
   const [relationPickerHoverIndex, setRelationPickerHoverIndex] =
     useRecoilScopedState(relationPickerHoverIndexScopedState);
 
-  function resetScroll() {
+  const resetScroll = () => {
     setRelationPickerHoverIndex(0);
 
     const currentHoveredRef = containerRef.current?.children[0] as HTMLElement;
@@ -34,7 +34,7 @@ export function useEntitySelectScroll<
       },
       time: 0,
     });
-  }
+  };
 
   useScopedHotkeys(
     Key.ArrowUp,
@@ -94,4 +94,4 @@ export function useEntitySelectScroll<
     hoveredIndex: relationPickerHoverIndex,
     resetScroll,
   };
-}
+};

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts

@@ -6,7 +6,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
 import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';
 
-export function useEntitySelectSearch() {
+export const useEntitySelectSearch = () => {
   const [, setRelationPickerHoverIndex] = useRecoilScopedState(
     relationPickerHoverIndexScopedState,
   );
@@ -22,12 +22,12 @@ export function useEntitySelectSearch() {
     },
   );
 
-  function handleSearchFilterChange(
+  const handleSearchFilterChange = (
     event: React.ChangeEvent<HTMLInputElement>,
-  ) {
+  ) => {
     debouncedSetSearchFilter(event.currentTarget.value);
     setRelationPickerHoverIndex(0);
-  }
+  };
 
   useEffect(() => {
     setRelationPickerSearchFilter('');
@@ -37,4 +37,4 @@ export function useEntitySelectSearch() {
     searchFilter: relationPickerSearchFilter,
     handleSearchFilterChange,
   };
-}
+};

front/src/modules/ui/input/text/components/TextInputEdit.tsx

@@ -30,21 +30,19 @@ export type TextInputEditProps = {
   autoFocus?: boolean;
 };
 
-export function TextInputEdit({
+export const TextInputEdit = ({
   placeholder,
   value,
   onChange,
   autoFocus,
-}: TextInputEditProps) {
-  return (
-    <StyledTextInputContainer>
-      <StyledInplaceInputTextInput
-        autoComplete="off"
-        autoFocus={autoFocus}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-      />
-    </StyledTextInputContainer>
-  );
-}
+}: TextInputEditProps) => (
+  <StyledTextInputContainer>
+    <StyledInplaceInputTextInput
+      autoComplete="off"
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  </StyledTextInputContainer>
+);

front/src/modules/ui/input/text/components/TextInputSettings.tsx

@@ -98,7 +98,7 @@ const StyledTrailingIcon = styled.div`
 
 const INPUT_TYPE_PASSWORD = 'password';
 
-function TextInputComponent(
+const TextInputComponent = (
   {
     label,
     value,
@@ -113,7 +113,7 @@ function TextInputComponent(
     ...props
   }: OwnProps,
   ref: ForwardedRef<HTMLInputElement>,
-): JSX.Element {
+): JSX.Element => {
   const theme = useTheme();
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -195,6 +195,6 @@ function TextInputComponent(
       {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
     </StyledContainer>
   );
-}
+};
 
 export const TextInputSettings = forwardRef(TextInputComponent);

front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx

@@ -20,11 +20,11 @@ const meta: Meta<typeof TextInputSettings> = {
 export default meta;
 type Story = StoryObj<typeof TextInputSettings>;
 
-function FakeTextInput({
+const FakeTextInput = ({
   onChange,
   value: initialValue,
   ...props
-}: React.ComponentProps<typeof TextInputSettings>) {
+}: React.ComponentProps<typeof TextInputSettings>) => {
   const [value, setValue] = useState(initialValue);
   return (
     <TextInputSettings
@@ -36,7 +36,7 @@ function FakeTextInput({
       }}
     />
   );
-}
+};
 
 export const Default: Story = {
   argTypes: { value: { control: false } },