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>

docs/docs/developer/frontend/best-practices.mdx

@@ -22,7 +22,7 @@ export const myAtomState = atom({
   default: 'default value',
 });
 
-export function MyComponent() {
+export const MyComponent = () => {
   const [myAtom, setMyAtom] = useRecoilState(myAtomState);
 
   return (
@@ -79,7 +79,7 @@ The same can be applied for data fetching logic, with Apollo hooks.
 ```tsx
 // ❌ Bad, will cause re-renders even if data is not changing, 
 //    because useEffect needs to be re-evaluated
-export function PageComponent() {
+export const PageComponent = () => {
   const [data, setData] = useRecoilState(dataState);
   const [someDependency] = useRecoilState(someDependencyState);
 
@@ -92,25 +92,23 @@ export function PageComponent() {
   return <div>{data}</div>;
 };
 
-export function App() {
-  return (
-    <RecoilRoot>
-      <PageComponent />
-    </RecoilRoot>
-  );
-}
+export const App = () => (
+  <RecoilRoot>
+    <PageComponent />
+  </RecoilRoot>
+);
 ```
 
 ```tsx
 // ✅ Good, will not cause re-renders if data is not changing, 
 //   because useEffect is re-evaluated in another sibling component
-export function PageComponent() {
+export const PageComponent = () => {
   const [data, setData] = useRecoilState(dataState);
 
   return <div>{data}</div>;
 };
 
-export function PageData() {
+export const PageData = () => {
   const [data, setData] = useRecoilState(dataState);
   const [someDependency] = useRecoilState(someDependencyState);
 
@@ -123,14 +121,12 @@ export function PageData() {
   return <></>;
 };
 
-export function App() {
-  return (
-    <RecoilRoot>
-      <PageData />
-      <PageComponent />
-    </RecoilRoot>
-  );
-}
+export const App = () => (
+  <RecoilRoot>
+    <PageData />
+    <PageComponent />
+  </RecoilRoot>
+);
 ```
 
 ### Use recoil family states and recoil family selectors
@@ -189,16 +185,16 @@ Event handler names should start with `handle`, `on` is a prefix used to name ev
 
 ```tsx
 // ❌ Bad
-function onEmailChange(val: string) {
+const onEmailChange = (val: string) => {
   // ...
-}
+};
 ```
 
 ```tsx
 // ✅ Good
-function handleEmailChange(val: string) {
+const handleEmailChange = (val: string) => {
   // ...
-}
+};
 ```
 
 ## Optional Props
@@ -215,25 +211,21 @@ type OwnProps = {
   disabled?: boolean;
 };
 
-function EmailField({ value, disabled = false }: OwnProps) {
-  return <TextInput value={value} disabled={disabled} fullWidth />;
-}
+const EmailField = ({ value, disabled = false }: OwnProps) => (
+  <TextInput value={value} disabled={disabled} fullWidth />
+);
 ```
 
 USAGE
 
 ```tsx
 // ❌ Bad, passing in the same value as the default value adds no value
-function Form() {
-  return <EmailField value="username@email.com" disabled={false} />;
-}
+const Form = () => <EmailField value="username@email.com" disabled={false} />;
 ```
 
 ```tsx
 // ✅ Good, assumes the default value
-function Form() {
-  return <EmailField value="username@email.com" />;
-}
+const Form = () => <EmailField value="username@email.com" />;
 ```
 
 ## Component as props
@@ -243,14 +235,10 @@ Try as much as possible to pass uninstanciated components as props, so chilren c
 The most common example for that is icon components : 
 
 ```tsx
-function SomeParentComponent() {
-  return (
-    <MyComponent Icon={MyIcon} />
-  )
-}
+const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
 
 // In MyComponent
-function MyComponent({ MyIcon }: { MyIcon: IconComponent }) {
+const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
   const theme = useTheme();
 
   return (
@@ -258,7 +246,7 @@ function MyComponent({ MyIcon }: { MyIcon: IconComponent }) {
       <MyIcon size={theme.icon.size.md}>
     </div>
   )
-}
+};
 ```
 
 For React to understand that the component is a component, you need to use PascalCase, to later instanciate it with `<MyIcon>`

docs/docs/developer/frontend/style-guide.mdx

@@ -46,18 +46,14 @@ Use props destructuring.
 
 ```tsx
 // ❌ Bad, no type
-export function MyComponent(props) {
-  return <div>Hello {props.name}</div>;
-};
+export const MyComponent = (props) => <div>Hello {props.name}</div>;
 
 // ✅ Good, type
 type OwnProps = {
   name: string;
 };
 
-export function MyComponent({ name }: OwnProps) {
-  return <div>Hello {name}</div>;
-};
+export const MyComponent = ({ name }: OwnProps) => <div>Hello {name}</div>;
 ```
 
 #### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types.
@@ -84,9 +80,9 @@ type OwnProps = {
   value: string;
 };
 
-function EmailField({ value }: OwnProps) {
-  return <TextInput value={value} disabled fullWidth />;
-}
+const EmailField = ({ value }: OwnProps) => (
+  <TextInput value={value} disabled fullWidth />
+);
 ```
 
 ## JavaScript 

docs/src/pages/graphql.tsx

@@ -1,34 +1,38 @@
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { GraphiQL } from 'graphiql';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Layout from '@theme/Layout';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-
-import 'graphiql/graphiql.css';
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import { GraphiQL } from "graphiql";
+import React from "react";
+import ReactDOM from "react-dom";
+import Layout from "@theme/Layout";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
+import "graphiql/graphiql.css";
 
 // Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
-function GraphiQLComponent() {
-  if(!window.localStorage.getItem('graphiql:theme') && window.localStorage.getItem('theme') != 'dark') {
-    window.localStorage.setItem('graphiql:theme', 'light');
-  } 
+const GraphiQLComponent = () => {
+  if (
+    !window.localStorage.getItem("graphiql:theme") &&
+    window.localStorage.getItem("theme") != "dark"
+  ) {
+    window.localStorage.setItem("graphiql:theme", "light");
+  }
 
-  const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+  const fetcher = createGraphiQLFetcher({
+    url: "https://api.twenty.com/graphql",
+  });
   return (
-  <div className="fullHeightPlayground">
-    <GraphiQL fetcher={fetcher} />;
-  </div>
+    <div className="fullHeightPlayground">
+      <GraphiQL fetcher={fetcher} />;
+    </div>
   );
-}
+};
 
-export default function graphQL() {
-  return (
-    <Layout title="GraphQL Playground" description="GraphQL Playground for Twenty">
-      
-        <BrowserOnly>
-          {() => <GraphiQLComponent />}
-        </BrowserOnly>
-    </Layout>
-  );
-}
+const graphQL = () => (
+  <Layout
+    title="GraphQL Playground"
+    description="GraphQL Playground for Twenty"
+  >
+    <BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
+  </Layout>
+);
+
+export default graphQL;

docs/src/theme/DocSidebarItem/Link/index.js

@@ -32,14 +32,14 @@ import {
 } from "react-icons/tb";
 
 
-export default function DocSidebarItemLink({
+const DocSidebarItemLink = ({
   item,
   onItemClick,
   activePath,
   level,
   index,
   ...props
-}) {
+}) => {
   const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
@@ -104,3 +104,5 @@ export default function DocSidebarItemLink({
     </li>
   );
 }
+
+export default DocSidebarItemLink;

docs/src/theme/Icon/DarkMode/index.js

@@ -3,7 +3,9 @@ import { TbMoon } from 'react-icons/tb';
 import {useColorMode} from '@docusaurus/theme-common';
 
 
-export default function IconDarkMode(props) {
+const IconDarkMode = (props) => {
   const { colorMode } = useColorMode().colorMode;
   return colorMode === 'dark' ? <TbMoon /> : <></>;
 }
+
+export default IconDarkMode

docs/src/theme/Icon/Home/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TbHome } from 'react-icons/tb';
-export default function IconHome(props) {
-  return <TbHome size={14} />;
-}
+import React from "react";
+import { TbHome } from "react-icons/tb";
+const IconHome = (props) => <TbHome size={14} />;
+
+export default IconHome;

docs/src/theme/Icon/LightMode/index.js

@@ -3,7 +3,9 @@ import { TbSun } from 'react-icons/tb';
 import {useColorMode} from '@docusaurus/theme-common';
 
 
-export default function IconLightMode(props) {
+const IconLightMode = (props) =>  {
   const { colorMode } = useColorMode().colorMode;
   return colorMode === 'dark' ? <></>: <TbSun /> ;
 }
+
+export default IconLightMode;