[#514] chore: format all using prettier

IntersectMBO · Mar 21, 2024 · 8841a24 · 8841a24
1 parent 4fa2dc0
commit 8841a24
Show file tree

Hide file tree

Showing 100 changed files with 1,150 additions and 1,169 deletions.
diff --git a/govtool/frontend/.prettierrc b/govtool/frontend/.prettierrc
@@ -2,6 +2,5 @@
   "semi": true,
   "singleQuote": false,
   "trailingComma": "all",
-  "printWidth": 80,
-  "",
+  "printWidth": 80
 }
diff --git a/govtool/frontend/package.json b/govtool/frontend/package.json
@@ -4,18 +4,19 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic",
+    "dev": "vite",
+    "format": "prettier --write src",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "tsc": "npx tsc --noEmit --skipLibCheck",
+    "postinstall": "patch-package",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test-storybook": "test-storybook",
-    "chromatic": "chromatic",
     "test": "vitest",
+    "test-storybook": "test-storybook",
     "test:watch": "vitest watch",
-    "postinstall": "patch-package"
+    "tsc": "npx tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

diff --git a/govtool/frontend/src/components/atoms/Button.tsx b/govtool/frontend/src/components/atoms/Button.tsx
@@ -1,9 +1,9 @@
-import { Button as MUIButton } from '@mui/material';
-import { ButtonProps } from '.';
+import { Button as MUIButton } from "@mui/material";
+import { ButtonProps } from ".";
 
 export const Button = ({
-  size = 'large',
-  variant = 'contained',
+  size = "large",
+  variant = "contained",
   sx,
   ...props
 }: ButtonProps) => {
@@ -17,7 +17,7 @@ export const Button = ({
   return (
     <MUIButton
       sx={{
-        fontSize: size === 'extraLarge' ? 16 : 14,
+        fontSize: size === "extraLarge" ? 16 : 14,
         height: buttonHeight,
         ...sx,
       }}

diff --git a/govtool/frontend/src/components/atoms/Checkbox.tsx b/govtool/frontend/src/components/atoms/Checkbox.tsx
@@ -1,7 +1,7 @@
-import { useId } from 'react';
-import { Checkbox as MUICheckbox } from '@mui/material';
+import { useId } from "react";
+import { Checkbox as MUICheckbox } from "@mui/material";
 
-import { CheckboxProps } from './types';
+import { CheckboxProps } from "./types";
 
 export const Checkbox = ({
   dataTestId,
@@ -16,12 +16,12 @@ export const Checkbox = ({
       id={id}
       inputProps={
         {
-          'data-testid': dataTestId,
+          "data-testid": dataTestId,
         } as React.InputHTMLAttributes<HTMLInputElement>
       }
       sx={{
-        '& .MuiSvgIcon-root': { fontSize: 18 },
-        color: errorMessage ? 'red' : '#0033AD',
+        "& .MuiSvgIcon-root": { fontSize: 18 },
+        color: errorMessage ? "red" : "#0033AD",
         ...sx,
       }}
       {...props}

diff --git a/govtool/frontend/src/components/atoms/CopyButton.tsx b/govtool/frontend/src/components/atoms/CopyButton.tsx
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
-import { ICONS } from '@consts';
-import { useSnackbar } from '@context';
-import { useTranslation } from '@hooks';
+import { ICONS } from "@consts";
+import { useSnackbar } from "@context";
+import { useTranslation } from "@hooks";
 
 interface Props {
   isChecked?: boolean;
@@ -15,7 +15,7 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { t } = useTranslation();
 
   const iconSrc = useMemo(() => {
-    if (variant === 'blue') {
+    if (variant === "blue") {
       return ICONS.copyBlueIcon;
     }
 
@@ -32,11 +32,11 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       alt="copy"
       onClick={(e) => {
         navigator.clipboard.writeText(text);
-        addSuccessAlert(t('alerts.copiedToClipboard'));
+        addSuccessAlert(t("alerts.copiedToClipboard"));
         e.stopPropagation();
       }}
       src={iconSrc}
-      style={{ cursor: 'pointer' }}
+      style={{ cursor: "pointer" }}
     />
   );
 };
diff --git a/govtool/frontend/src/components/atoms/FormErrorMessage.tsx b/govtool/frontend/src/components/atoms/FormErrorMessage.tsx
@@ -1,21 +1,20 @@
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
 
-import { FormErrorMessageProps } from './types';
+import { FormErrorMessageProps } from "./types";
 
 export const FormErrorMessage = ({
   errorMessage,
   errorStyles,
-}: FormErrorMessageProps) => (
+}: FormErrorMessageProps) =>
   errorMessage && (
-  <Typography
-    color="red"
-    data-testid={`${errorMessage.replace(/\s+/g, '-').toLowerCase()}-error`}
-    fontSize={12}
-    fontWeight={400}
-    sx={{ mt: 0.25 }}
-    {...errorStyles}
-  >
-    {errorMessage}
-  </Typography>
-  )
-);
+    <Typography
+      color="red"
+      data-testid={`${errorMessage.replace(/\s+/g, "-").toLowerCase()}-error`}
+      fontSize={12}
+      fontWeight={400}
+      sx={{ mt: 0.25 }}
+      {...errorStyles}
+    >
+      {errorMessage}
+    </Typography>
+  );
diff --git a/govtool/frontend/src/components/atoms/FormHelpfulText.tsx b/govtool/frontend/src/components/atoms/FormHelpfulText.tsx
@@ -1,21 +1,20 @@
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
 
-import { FormHelpfulTextProps } from './types';
+import { FormHelpfulTextProps } from "./types";
 
 export const FormHelpfulText = ({
   helpfulText,
   helpfulTextStyle,
-}: FormHelpfulTextProps) => (
+}: FormHelpfulTextProps) =>
   helpfulText && (
-  <Typography
-    color="#9792B5"
-    data-testid={`${helpfulText.replace(/\s+/g, '-').toLowerCase()}-error`}
-    fontSize={12}
-    fontWeight={400}
-    sx={{ mt: 0.5 }}
-    {...helpfulTextStyle}
-  >
-    {helpfulText}
-  </Typography>
-  )
-);
+    <Typography
+      color="#9792B5"
+      data-testid={`${helpfulText.replace(/\s+/g, "-").toLowerCase()}-error`}
+      fontSize={12}
+      fontWeight={400}
+      sx={{ mt: 0.5 }}
+      {...helpfulTextStyle}
+    >
+      {helpfulText}
+    </Typography>
+  );
diff --git a/govtool/frontend/src/components/atoms/InfoText.tsx b/govtool/frontend/src/components/atoms/InfoText.tsx
@@ -1,4 +1,4 @@
-import { InfoTextProps, Typography } from '.';
+import { InfoTextProps, Typography } from ".";
 
 export const InfoText = ({ label, sx }: InfoTextProps) => (
   <Typography color="#FF833B" sx={sx} variant="body1">

diff --git a/govtool/frontend/src/components/atoms/Input.tsx b/govtool/frontend/src/components/atoms/Input.tsx
@@ -10,9 +10,7 @@ import { InputBase } from "@mui/material";
 import { InputProps } from "./types";
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({
-    errorMessage, dataTestId, onBlur, onFocus, sx, ...rest
-  }, ref) => {
+  ({ errorMessage, dataTestId, onBlur, onFocus, sx, ...rest }, ref) => {
     const id = useId();
     const inputRef = useRef<HTMLInputElement>(null);
 
@@ -28,11 +26,12 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     useImperativeHandle(
       ref,
-      () => ({
-        focus: handleFocus,
-        blur: handleBlur,
-        ...inputRef.current,
-      } as unknown as HTMLInputElement),
+      () =>
+        ({
+          focus: handleFocus,
+          blur: handleBlur,
+          ...inputRef.current,
+        } as unknown as HTMLInputElement),
       [handleBlur, handleFocus],
     );
 

diff --git a/govtool/frontend/src/components/atoms/LoadingButton.tsx b/govtool/frontend/src/components/atoms/LoadingButton.tsx
@@ -1,12 +1,12 @@
-import { Button, CircularProgress } from '@mui/material';
+import { Button, CircularProgress } from "@mui/material";
 
-import { LoadingButtonProps } from './types';
+import { LoadingButtonProps } from "./types";
 
 export const LoadingButton = ({
   isLoading,
   disabled,
   children,
-  size = 'large',
+  size = "large",
   sx,
   ...rest
 }: LoadingButtonProps) => {
@@ -24,7 +24,7 @@ export const LoadingButton = ({
       {...rest}
     >
       {isLoading && (
-        <CircularProgress size={26} sx={{ position: 'absolute' }} />
+        <CircularProgress size={26} sx={{ position: "absolute" }} />
       )}
       {children}
     </Button>

diff --git a/govtool/frontend/src/components/atoms/Spacer.tsx b/govtool/frontend/src/components/atoms/Spacer.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
-import { SpacerProps } from '.';
+import { Box } from "@mui/material";
+import { SpacerProps } from ".";
 
 export const Spacer = ({ x, y }: SpacerProps) => <Box pt={y} pr={x} />;
diff --git a/govtool/frontend/src/components/atoms/StakeRadio.tsx b/govtool/frontend/src/components/atoms/StakeRadio.tsx
@@ -18,14 +18,13 @@ type StakeRadioProps = {
 };
 
 export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
-  const {
-    dataTestId, isChecked = false, stakeKey, onChange,
-  } = props;
+  const { dataTestId, isChecked = false, stakeKey, onChange } = props;
   const {
     palette: { boxShadow1 },
   } = theme;
   const { isMobile } = useScreenDimension();
-  const { powerIsLoading, votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { powerIsLoading, votingPower } =
+    useGetAdaHolderVotingPowerQuery(stakeKey);
   const { t } = useTranslation();
 
   return (
@@ -83,9 +82,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
               fontWeight={600}
               marginLeft="4px"
             >
-              ₳
-              {" "}
-              {correctAdaFormat(votingPower) ?? 0}
+              ₳ {correctAdaFormat(votingPower) ?? 0}
             </Typography>
           )}
         </Box>

diff --git a/govtool/frontend/src/components/atoms/TextArea.tsx b/govtool/frontend/src/components/atoms/TextArea.tsx
@@ -1,6 +1,4 @@
-import {
-  forwardRef, useCallback, useImperativeHandle, useRef,
-} from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { TextareaAutosize, styled } from "@mui/material";
 
 import { useScreenDimension } from "@hooks";
@@ -22,9 +20,7 @@ const TextAreaBase = styled(TextareaAutosize)(
 );
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({
-    errorMessage, maxLength = 500, onBlur, onFocus, ...props
-  }, ref) => {
+  ({ errorMessage, maxLength = 500, onBlur, onFocus, ...props }, ref) => {
     const { isMobile } = useScreenDimension();
     const textAraeRef = useRef<HTMLTextAreaElement>(null);
 
@@ -46,11 +42,12 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     useImperativeHandle(
       ref,
-      () => ({
-        focus: handleFocus,
-        blur: handleBlur,
-        ...textAraeRef.current,
-      } as unknown as HTMLTextAreaElement),
+      () =>
+        ({
+          focus: handleFocus,
+          blur: handleBlur,
+          ...textAraeRef.current,
+        } as unknown as HTMLTextAreaElement),
       [handleBlur, handleFocus],
     );
 

diff --git a/govtool/frontend/src/components/atoms/Typography.tsx b/govtool/frontend/src/components/atoms/Typography.tsx
@@ -1,9 +1,9 @@
-import { Typography as MUITypography } from '@mui/material';
-import { TypographyProps } from './types';
+import { Typography as MUITypography } from "@mui/material";
+import { TypographyProps } from "./types";
 
 export const Typography = ({
   color,
-  variant = 'body1',
+  variant = "body1",
   ...props
 }: TypographyProps) => {
   const fontSize = {
@@ -33,16 +33,16 @@ export const Typography = ({
   }[variant];
 
   const lineHeight = {
-    headline1: '110px',
-    headline2: '57px',
-    headline3: '44px',
-    headline4: '40px',
-    headline5: '36px',
-    title1: '32px',
-    title2: '28px',
-    body1: '24px',
-    body2: '20px',
-    caption: '16px',
+    headline1: "110px",
+    headline2: "57px",
+    headline3: "44px",
+    headline4: "40px",
+    headline5: "36px",
+    title1: "32px",
+    title2: "28px",
+    body1: "24px",
+    body2: "20px",
+    caption: "16px",
   }[variant];
 
   return (

diff --git a/govtool/frontend/src/components/atoms/VotePill.tsx b/govtool/frontend/src/components/atoms/VotePill.tsx
@@ -1,5 +1,5 @@
-import { Vote } from '@models';
-import { Box, Typography } from '@mui/material';
+import { Vote } from "@models";
+import { Box, Typography } from "@mui/material";
 
 export const VotePill = ({
   vote,
@@ -17,16 +17,16 @@ export const VotePill = ({
       px={2.25}
       border={1}
       borderColor={
-        VOTE === 'yes' ? '#C0E4BA' : VOTE === 'no' ? '#EDACAC' : '#99ADDE'
+        VOTE === "yes" ? "#C0E4BA" : VOTE === "no" ? "#EDACAC" : "#99ADDE"
       }
       bgcolor={
-        VOTE === 'yes' ? '#F0F9EE' : VOTE === 'no' ? '#FBEBEB' : '#E6EBF7'
+        VOTE === "yes" ? "#F0F9EE" : VOTE === "no" ? "#FBEBEB" : "#E6EBF7"
       }
       borderRadius={100}
       textAlign="center"
       minWidth="50px"
-      maxWidth={maxWidth ? `${maxWidth}px` : 'auto'}
-      width={width ? `${width}px` : 'auto'}
+      maxWidth={maxWidth ? `${maxWidth}px` : "auto"}
+      width={width ? `${width}px` : "auto"}
       maxHeight="14px"
     >
       <Typography