refactor(web): remove typescript

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

@@ -1,61 +1,40 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import type { TypographyProps } from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
-
 import { Box, TextField } from './style';
-
-type EditableTypographyProps = TypographyProps & {
-  children: string;
-  onConfirm?: (value: string) => void;
-};
-
 const noop = () => null;
-
-function EditableTypography(props: EditableTypographyProps) {
+function EditableTypography(props) {
   const { children, onConfirm = noop, sx, ...typographyProps } = props;
   const [editing, setEditing] = React.useState(false);
-
   const handleClick = React.useCallback(() => {
     setEditing((editing) => !editing);
   }, []);
-
-  const handleTextFieldClick = React.useCallback(
-    (event: React.SyntheticEvent) => {
-      event.stopPropagation();
-    },
-    []
-  );
-
+  const handleTextFieldClick = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
   const handleTextFieldKeyDown = React.useCallback(
-    async (event: React.KeyboardEvent<HTMLInputElement>) => {
-      const target = event.target as HTMLInputElement;
+    async (event) => {
+      const target = event.target;
       if (event.key === 'Enter') {
         if (target.value !== children) {
           await onConfirm(target.value);
         }
-
         setEditing(false);
       }
     },
-    [children]
+    [children],
   );
-
   const handleTextFieldBlur = React.useCallback(
-    async (event: React.FocusEvent<HTMLInputElement>) => {
+    async (event) => {
       const value = event.target.value;
-
       if (value !== children) {
         await onConfirm(value);
       }
-
       setEditing(false);
     },
-    [onConfirm, children]
+    [onConfirm, children],
   );
-
   let component = <Typography {...typographyProps}>{children}</Typography>;
-
   if (editing) {
     component = (
       <TextField
@@ -68,7 +47,6 @@ function EditableTypography(props: EditableTypographyProps) {
       />
     );
   }
-
   return (
     <Box sx={sx} onClick={handleClick} editing={editing}>
       <EditIcon sx={{ mr: 1 }} />
@@ -77,5 +55,4 @@ function EditableTypography(props: EditableTypographyProps) {
     </Box>
   );
 }
-
 export default EditableTypography;

packages/web/src/components/EditableTypography/style.js

@@ -2,23 +2,17 @@ import { styled } from '@mui/material/styles';
 import MuiBox from '@mui/material/Box';
 import MuiTextField from '@mui/material/TextField';
 import { inputClasses } from '@mui/material/Input';
-
-type BoxProps = {
-  editing?: boolean;
-};
-
-const boxShouldForwardProp = (prop: string) => !['editing'].includes(prop);
+const boxShouldForwardProp = (prop) => !['editing'].includes(prop);
 export const Box = styled(MuiBox, {
   shouldForwardProp: boxShouldForwardProp,
-})<BoxProps>`
+})`
   display: flex;
   flex: 1;
   width: 300px;
   height: 33px;
   align-items: center;
-  ${({ editing }) => editing && `border-bottom: 1px dashed #000;`}
+  ${({ editing }) => editing && 'border-bottom: 1px dashed #000;'}
 `;
-
 export const TextField = styled(MuiTextField)({
   width: '100%',
   [`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]: