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>
2023-09-16 02:41:10 +01:00
parent 549335054a
commit 00a3c8ca2b
575 changed files with 2848 additions and 3063 deletions
--- a/front/src/modules/ui/button/components/Button.tsx
+++ b/front/src/modules/ui/button/components/Button.tsx
@ -277,7 +277,7 @@ const StyledButton = styled.button<
  }
 `;

-export function Button({
+export const Button = ({
  className,
  Icon,
  title,
@ -290,7 +290,7 @@ export function Button({
  disabled = false,
  focus = false,
  onClick,
-}: ButtonProps) {
+}: ButtonProps) => {
  const theme = useTheme();

  return (
@ -310,4 +310,4 @@ export function Button({
      {soon && <SoonPill />}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/ButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/ButtonGroup.tsx
@ -16,44 +16,42 @@ export type ButtonGroupProps = Pick<
  children: ReactNode[];
 };

-export function ButtonGroup({
+export const ButtonGroup = ({
  className,
  children,
  variant,
  size,
  accent,
-}: ButtonGroupProps) {
-  return (
-    <StyledButtonGroupContainer className={className}>
-      {React.Children.map(children, (child, index) => {
-        if (!React.isValidElement(child)) return null;
+}: ButtonGroupProps) => (
+  <StyledButtonGroupContainer className={className}>
+    {React.Children.map(children, (child, index) => {
+      if (!React.isValidElement(child)) return null;

-        let position: ButtonPosition;
+      let position: ButtonPosition;

-        if (index === 0) {
-          position = 'left';
-        } else if (index === children.length - 1) {
-          position = 'right';
-        } else {
-          position = 'middle';
-        }
+      if (index === 0) {
+        position = 'left';
+      } else if (index === children.length - 1) {
+        position = 'right';
+      } else {
+        position = 'middle';
+      }

-        const additionalProps: any = { position, variant, accent, size };
+      const additionalProps: any = { position, variant, accent, size };

-        if (variant) {
-          additionalProps.variant = variant;
-        }
+      if (variant) {
+        additionalProps.variant = variant;
+      }

-        if (accent) {
-          additionalProps.variant = variant;
-        }
+      if (accent) {
+        additionalProps.variant = variant;
+      }

-        if (size) {
-          additionalProps.size = size;
-        }
+      if (size) {
+        additionalProps.size = size;
+      }

-        return React.cloneElement(child, additionalProps);
-      })}
-    </StyledButtonGroupContainer>
-  );
-}
+      return React.cloneElement(child, additionalProps);
+    })}
+  </StyledButtonGroupContainer>
+);
--- a/front/src/modules/ui/button/components/FloatingButton.tsx
+++ b/front/src/modules/ui/button/components/FloatingButton.tsx
@ -79,7 +79,7 @@ const StyledButton = styled.button<
  }
 `;

-export function FloatingButton({
+export const FloatingButton = ({
  className,
  Icon,
  title,
@ -88,7 +88,7 @@ export function FloatingButton({
  applyShadow = true,
  disabled = false,
  focus = false,
-}: FloatingButtonProps) {
+}: FloatingButtonProps) => {
  const theme = useTheme();
  return (
    <StyledButton
@ -103,4 +103,4 @@ export function FloatingButton({
      {title}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/FloatingButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/FloatingButtonGroup.tsx
@ -15,36 +15,34 @@ export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
  children: React.ReactElement[];
 };

-export function FloatingButtonGroup({
+export const FloatingButtonGroup = ({
  children,
  size,
-}: FloatingButtonGroupProps) {
-  return (
-    <StyledFloatingButtonGroupContainer>
-      {React.Children.map(children, (child, index) => {
-        let position: FloatingButtonPosition;
+}: FloatingButtonGroupProps) => (
+  <StyledFloatingButtonGroupContainer>
+    {React.Children.map(children, (child, index) => {
+      let position: FloatingButtonPosition;

-        if (index === 0) {
-          position = 'left';
-        } else if (index === children.length - 1) {
-          position = 'right';
-        } else {
-          position = 'middle';
-        }
+      if (index === 0) {
+        position = 'left';
+      } else if (index === children.length - 1) {
+        position = 'right';
+      } else {
+        position = 'middle';
+      }

-        const additionalProps: any = {
-          position,
-          size,
-          applyShadow: false,
-          applyBlur: false,
-        };
+      const additionalProps: any = {
+        position,
+        size,
+        applyShadow: false,
+        applyBlur: false,
+      };

-        if (size) {
-          additionalProps.size = size;
-        }
+      if (size) {
+        additionalProps.size = size;
+      }

-        return React.cloneElement(child, additionalProps);
-      })}
-    </StyledFloatingButtonGroupContainer>
-  );
-}
+      return React.cloneElement(child, additionalProps);
+    })}
+  </StyledFloatingButtonGroupContainer>
+);
--- a/front/src/modules/ui/button/components/FloatingIconButton.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButton.tsx
@ -99,7 +99,7 @@ const StyledButton = styled.button<
  }
 `;

-export function FloatingIconButton({
+export const FloatingIconButton = ({
  className,
  Icon,
  size = 'small',
@ -109,7 +109,7 @@ export function FloatingIconButton({
  disabled = false,
  focus = false,
  onClick,
-}: FloatingIconButtonProps) {
+}: FloatingIconButtonProps) => {
  const theme = useTheme();
  return (
    <StyledButton
@ -125,4 +125,4 @@ export function FloatingIconButton({
      {Icon && <Icon size={theme.icon.size.md} />}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
@ -29,32 +29,30 @@ export type FloatingIconButtonGroupProps = Pick<
  }[];
 };

-export function FloatingIconButtonGroup({
+export const FloatingIconButtonGroup = ({
  iconButtons,
  size,
-}: FloatingIconButtonGroupProps) {
-  return (
-    <StyledFloatingIconButtonGroupContainer>
-      {iconButtons.map(({ Icon, onClick }, index) => {
-        const position: FloatingIconButtonPosition =
-          index === 0
-            ? 'left'
-            : index === iconButtons.length - 1
-            ? 'right'
-            : 'middle';
+}: FloatingIconButtonGroupProps) => (
+  <StyledFloatingIconButtonGroupContainer>
+    {iconButtons.map(({ Icon, onClick }, index) => {
+      const position: FloatingIconButtonPosition =
+        index === 0
+          ? 'left'
+          : index === iconButtons.length - 1
+          ? 'right'
+          : 'middle';

-        return (
-          <FloatingIconButton
-            key={`floating-icon-button-${index}`}
-            applyBlur={false}
-            applyShadow={false}
-            Icon={Icon}
-            onClick={onClick}
-            position={position}
-            size={size}
-          />
-        );
-      })}
-    </StyledFloatingIconButtonGroupContainer>
-  );
-}
+      return (
+        <FloatingIconButton
+          key={`floating-icon-button-${index}`}
+          applyBlur={false}
+          applyShadow={false}
+          Icon={Icon}
+          onClick={onClick}
+          position={position}
+          size={size}
+        />
+      );
+    })}
+  </StyledFloatingIconButtonGroupContainer>
+);
--- a/front/src/modules/ui/button/components/IconButton.tsx
+++ b/front/src/modules/ui/button/components/IconButton.tsx
@ -269,7 +269,7 @@ const StyledButton = styled.button<
  }
 `;

-export function IconButton({
+export const IconButton = ({
  className,
  Icon,
  variant = 'primary',
@ -280,7 +280,7 @@ export function IconButton({
  focus = false,
  dataTestId,
  onClick,
-}: IconButtonProps) {
+}: IconButtonProps) => {
  const theme = useTheme();
  return (
    <StyledButton
@ -297,4 +297,4 @@ export function IconButton({
      {Icon && <Icon size={theme.icon.size.md} />}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/IconButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/IconButtonGroup.tsx
@ -24,33 +24,31 @@ export type IconButtonGroupProps = Pick<
  }[];
 };

-export function IconButtonGroup({
+export const IconButtonGroup = ({
  accent,
  iconButtons,
  size,
  variant,
-}: IconButtonGroupProps) {
-  return (
-    <StyledIconButtonGroupContainer>
-      {iconButtons.map(({ Icon, onClick }, index) => {
-        const position: IconButtonPosition =
-          index === 0
-            ? 'left'
-            : index === iconButtons.length - 1
-            ? 'right'
-            : 'middle';
+}: IconButtonGroupProps) => (
+  <StyledIconButtonGroupContainer>
+    {iconButtons.map(({ Icon, onClick }, index) => {
+      const position: IconButtonPosition =
+        index === 0
+          ? 'left'
+          : index === iconButtons.length - 1
+          ? 'right'
+          : 'middle';

-        return (
-          <IconButton
-            accent={accent}
-            Icon={Icon}
-            onClick={onClick}
-            position={position}
-            size={size}
-            variant={variant}
-          />
-        );
-      })}
-    </StyledIconButtonGroupContainer>
-  );
-}
+      return (
+        <IconButton
+          accent={accent}
+          Icon={Icon}
+          onClick={onClick}
+          position={position}
+          size={size}
+          variant={variant}
+        />
+      );
+    })}
+  </StyledIconButtonGroupContainer>
+);
--- a/front/src/modules/ui/button/components/LightButton.tsx
+++ b/front/src/modules/ui/button/components/LightButton.tsx
@ -74,7 +74,7 @@ const StyledButton = styled.button<
  }
 `;

-export function LightButton({
+export const LightButton = ({
  className,
  icon: initialIcon,
  title,
@ -83,7 +83,7 @@ export function LightButton({
  disabled = false,
  focus = false,
  onClick,
-}: LightButtonProps) {
+}: LightButtonProps) => {
  const icon = useMemo(() => {
    if (!initialIcon || !React.isValidElement(initialIcon)) {
      return null;
@ -107,4 +107,4 @@ export function LightButton({
      {title}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/LightIconButton.tsx
+++ b/front/src/modules/ui/button/components/LightIconButton.tsx
@ -78,7 +78,7 @@ const StyledButton = styled.button<
  }
 `;

-export function LightIconButton({
+export const LightIconButton = ({
  className,
  Icon,
  active = false,
@ -87,7 +87,7 @@ export function LightIconButton({
  disabled = false,
  focus = false,
  onClick,
-}: LightIconButtonProps) {
+}: LightIconButtonProps) => {
  const theme = useTheme();
  return (
    <StyledButton
@ -102,4 +102,4 @@ export function LightIconButton({
      {Icon && <Icon size={theme.icon.size.md} />}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/MainButton.tsx
+++ b/front/src/modules/ui/button/components/MainButton.tsx
@ -91,13 +91,13 @@ type MainButtonProps = Props & {
  Icon?: IconComponent;
 };

-export function MainButton({
+export const MainButton = ({
  Icon,
  title,
  fullWidth = false,
  variant = 'primary',
  ...props
-}: MainButtonProps) {
+}: MainButtonProps) => {
  const theme = useTheme();
  return (
    <StyledButton fullWidth={fullWidth} variant={variant} {...props}>
@ -105,4 +105,4 @@ export function MainButton({
      {title}
    </StyledButton>
  );
-}
+};
--- a/front/src/modules/ui/button/components/RoundedIconButton.tsx
+++ b/front/src/modules/ui/button/components/RoundedIconButton.tsx
@ -33,7 +33,10 @@ type RoundedIconButtonProps = {
  Icon: IconComponent;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;

-export function RoundedIconButton({ Icon, ...props }: RoundedIconButtonProps) {
+export const RoundedIconButton = ({
+  Icon,
+  ...props
+}: RoundedIconButtonProps) => {
  const theme = useTheme();

  return (
@ -41,4 +44,4 @@ export function RoundedIconButton({ Icon, ...props }: RoundedIconButtonProps) {
      {<Icon size={theme.icon.size.md} />}
    </StyledIconButton>
  );
-}
+};