style: auto format whole project

packages/web/src/components/EditableTypography/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import type { TypographyProps }  from '@mui/material/Typography';
+import type { TypographyProps } from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
 
 import { Box, TextField } from './style';
@@ -17,40 +17,45 @@ function EditableTypography(props: EditableTypographyProps) {
   const [editing, setEditing] = React.useState(false);
 
   const handleClick = React.useCallback(() => {
-    setEditing(editing => !editing);
+    setEditing((editing) => !editing);
   }, []);
 
-  const handleTextFieldClick = React.useCallback((event: React.SyntheticEvent) => {
-    event.stopPropagation();
-  }, []);
+  const handleTextFieldClick = React.useCallback(
+    (event: React.SyntheticEvent) => {
+      event.stopPropagation();
+    },
+    []
+  );
 
-  const handleTextFieldKeyDown = React.useCallback(async (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    if (event.key === 'Enter') {
-      if (target.value !== children) {
-        await onConfirm(target.value);
+  const handleTextFieldKeyDown = React.useCallback(
+    async (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const target = event.target as HTMLInputElement;
+      if (event.key === 'Enter') {
+        if (target.value !== children) {
+          await onConfirm(target.value);
+        }
+
+        setEditing(false);
+      }
+    },
+    [children]
+  );
+
+  const handleTextFieldBlur = React.useCallback(
+    async (event: React.FocusEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+
+      if (value !== children) {
+        await onConfirm(value);
       }
 
       setEditing(false);
-    }
-  }, [children]);
-
-  const handleTextFieldBlur = React.useCallback(async (event: React.FocusEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-
-    if (value !== children) {
-      await onConfirm(value);
-    }
-
-    setEditing(false);
-  }, [onConfirm, children]);
-
-  let component = (
-    <Typography {...typographyProps}>
-      {children}
-    </Typography>
+    },
+    [onConfirm, children]
   );
 
+  let component = <Typography {...typographyProps}>{children}</Typography>;
+
   if (editing) {
     component = (
       <TextField
@@ -62,7 +67,7 @@ function EditableTypography(props: EditableTypographyProps) {
         defaultValue={children}
       />
     );
-  };
+  }
 
   return (
     <Box sx={sx} onClick={handleClick} editing={editing}>