Add curly brace eslint rule (#52)

rarimo · Mar 13, 2024 · e5aa34f · e5aa34f
1 parent 907c9f8
commit e5aa34f
Show file tree

Hide file tree

Showing 59 changed files with 510 additions and 455 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -84,6 +84,7 @@ module.exports = {
     ],
     'react-i18n/no-dynamic-translation-keys': 'error',
     'react-i18n/no-missing-interpolation-keys': 'error',
+    'react/jsx-curly-brace-presence': ['warn', 'never'],
     // disable unnecessary rules from recommendations
     'react/display-name': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',

diff --git a/src/App.tsx b/src/App.tsx
@@ -49,7 +49,7 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
             <AppRoutes />
           ) : (
             <Stack alignItems='center' justifyContent='center' flex={1}>
-              <CircularProgress color={'secondary'} />
+              <CircularProgress color='secondary' />
             </Stack>
           )}
         </div>

diff --git a/src/common/AppNavbar.tsx b/src/common/AppNavbar.tsx
@@ -24,8 +24,8 @@ const NavbarLink = ({ children, to }: NavbarLinkProps) => {
   return (
     <NavLink to={to}>
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         sx={{
           width: spacing(10),
           height: spacing(10),
@@ -54,7 +54,7 @@ const AppNavbar = () => {
       { route: RoutePaths.Dashboard, iconComponent: <UiIcon name={Icons.House} size={5} /> },
       {
         route: RoutePaths.Credentials,
-        iconComponent: <UiIcon componentName={'layers'} size={6} />,
+        iconComponent: <UiIcon componentName='layers' size={6} />,
       },
       { route: RoutePaths.Rewards, iconComponent: <UiIcon name={Icons.Gift} size={5} /> },
     ],
@@ -67,15 +67,15 @@ const AppNavbar = () => {
 
   return (
     <Stack
-      justifyContent={'space-between'}
-      alignItems={'center'}
+      justifyContent='space-between'
+      alignItems='center'
       py={6}
       px={4}
       borderRight={1}
       borderColor={palette.divider}
     >
       <Stack spacing={4}>
-        <Stack component={NavLink} to={RoutePaths.Dashboard} alignItems={'center'}>
+        <Stack component={NavLink} to={RoutePaths.Dashboard} alignItems='center'>
           <UiIcon name={Icons.Rarime} size={10} sx={{ color: palette.text.primary }} />
         </Stack>
         <Divider />

diff --git a/src/common/BackLink.tsx b/src/common/BackLink.tsx
@@ -17,7 +17,7 @@ export default function BackLink({ to, ...rest }: Props) {
       variant='text'
       color='secondary'
       size='small'
-      startIcon={<UiIcon componentName={'chevronLeft'} size={5} />}
+      startIcon={<UiIcon componentName='chevronLeft' size={5} />}
       {...rest}
       sx={{ width: 'fit-content', ...rest.sx }}
     >

diff --git a/src/common/CredentialCard.tsx b/src/common/CredentialCard.tsx
@@ -15,15 +15,15 @@ function DotsDecoration({ ...rest }: StackProps) {
 
   // TODO: alpha(palette.common.white, ...) should be configured together with bg
   return (
-    <Stack {...rest} alignItems={'flex-end'} spacing={betweenDotsSpacing}>
+    <Stack {...rest} alignItems='flex-end' spacing={betweenDotsSpacing}>
       {Array.from({ length: rowsCount }, (v, i) => i).map(rowIdx => (
         <Stack key={rowIdx} direction='row' spacing={betweenDotsSpacing}>
           {Array.from({ length: maxDots - rowIdx }, (v, i) => i).map(boxIdx => (
             <Box
               key={boxIdx}
               width={8}
               height={8}
-              borderRadius={'50%'}
+              borderRadius='50%'
               bgcolor={alpha(palette.common.white, 0.16)}
             />
           ))}
@@ -66,7 +66,7 @@ export default function CredentialCard({ vc, issuerDetails, ...rest }: Props) {
         height={40}
         color={palette.common.white}
         bgcolor={alpha(palette.common.white, 0.1)}
-        borderRadius={'50%'}
+        borderRadius='50%'
         p={2}
       >
         {/*TODO: define map for credential types*/}

diff --git a/src/common/ErrorView.tsx b/src/common/ErrorView.tsx
@@ -22,9 +22,9 @@ export default function ErrorView({
   return (
     <Stack
       spacing={4}
-      alignItems={'center'}
-      width={'100%'}
-      justifyContent={'center'}
+      alignItems='center'
+      width='100%'
+      justifyContent='center'
       p={8}
       border={1}
       borderColor={palette.error.light}
@@ -33,8 +33,8 @@ export default function ErrorView({
       {...rest}
     >
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         bgcolor={palette.error.lighter}
         color={palette.error.main}
         borderRadius={250}
@@ -43,7 +43,7 @@ export default function ErrorView({
       >
         {icon}
       </Stack>
-      <Stack spacing={1} textAlign={'center'}>
+      <Stack spacing={1} textAlign='center'>
         <Typography variant='body3'>{title}</Typography>
         {description && (
           <Typography variant='body3' color={palette.text.secondary}>

diff --git a/src/common/InfiniteList.tsx b/src/common/InfiniteList.tsx
@@ -33,7 +33,7 @@ export default function InfiniteList<D>({
       {children}
       {loadingState === LoadingStates.NextLoading ? (
         <Stack alignItems='center'>
-          <CircularProgress color={'secondary'} size={spacing(6)} />
+          <CircularProgress color='secondary' size={spacing(6)} />
         </Stack>
       ) : loadingState === LoadingStates.Error ? (
         <Stack alignItems='center'>
@@ -47,7 +47,7 @@ export default function InfiniteList<D>({
     </Stack>
   ) : loadingState === LoadingStates.Loading ? (
     <Stack alignItems='center' p={20}>
-      <CircularProgress color={'secondary'} />
+      <CircularProgress color='secondary' />
     </Stack>
   ) : loadingState === LoadingStates.Error ? (
     <ErrorView

diff --git a/src/common/NoDataView.tsx b/src/common/NoDataView.tsx
@@ -22,9 +22,9 @@ export default function NoDataView({
   return (
     <Stack
       spacing={4}
-      alignItems={'center'}
-      width={'100%'}
-      justifyContent={'center'}
+      alignItems='center'
+      width='100%'
+      justifyContent='center'
       p={8}
       border={1}
       borderColor={palette.action.hover}
@@ -33,8 +33,8 @@ export default function NoDataView({
       {...rest}
     >
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         bgcolor={palette.action.active}
         color={palette.text.secondary}
         borderRadius={250}
@@ -43,7 +43,7 @@ export default function NoDataView({
       >
         {icon}
       </Stack>
-      <Stack spacing={1} textAlign={'center'}>
+      <Stack spacing={1} textAlign='center'>
         <Typography variant='body3'>{title}</Typography>
         {description && (
           <Typography variant='body3' color={palette.text.secondary}>

diff --git a/src/common/PageListFilters.tsx b/src/common/PageListFilters.tsx
@@ -20,18 +20,12 @@ export default function PageListFilters({ tabs, onSearchInput, actionBar, ...res
   const handleSearchInput = debounce((value: string) => onSearchInput?.(value), 500)
 
   return (
-    <Stack
-      {...rest}
-      direction='row'
-      alignItems='center'
-      justifyContent={'space-between'}
-      spacing={5}
-    >
+    <Stack {...rest} direction='row' alignItems='center' justifyContent='space-between' spacing={5}>
       {tabs && <UiNavTabs tabs={tabs} />}
 
-      <Stack direction={'row'} alignItems={'center'} spacing={6}>
+      <Stack direction='row' alignItems='center' spacing={6}>
         <UiSearchField
-          size={'small'}
+          size='small'
           placeholder={t('page-list-filters.search-input-placeholder')}
           onChange={e => handleSearchInput(e.target.value)}
         />

diff --git a/src/common/ProfileMenu.tsx b/src/common/ProfileMenu.tsx
@@ -82,13 +82,13 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
           },
         }}
       >
-        <Stack direction={'column'} p={4} alignItems={'center'}>
+        <Stack direction='column' p={4} alignItems='center'>
           <UserAvatar userDid={userDid} size={12} />
-          <Stack direction={'row'} mt={3} spacing={2}>
+          <Stack direction='row' mt={3} spacing={2}>
             <Typography
-              variant={'subtitle4'}
-              overflow={'hidden'}
-              textOverflow={'ellipsis'}
+              variant='subtitle4'
+              overflow='hidden'
+              textOverflow='ellipsis'
               maxWidth={spacing(40)}
             >
               {formatDid(userDid)}
@@ -102,9 +102,9 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
         {/*TODO: Add handler*/}
         <MenuItem onClick={exportIdentity} sx={menuItemSx} disabled={isExporting}>
           <ListItemIcon>
-            <UiIcon componentName={'key'} size={5} sx={{ color: palette.text.secondary }} />
+            <UiIcon componentName='key' size={5} sx={{ color: palette.text.secondary }} />
           </ListItemIcon>
-          <Typography variant={'caption1'}>
+          <Typography variant='caption1'>
             {isExporting ? 'Exporting...' : 'Export Identity'}
           </Typography>
         </MenuItem>
@@ -116,15 +116,15 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
           sx={menuItemSx}
         >
           <ListItemIcon>
-            <UiIcon componentName={'openInNew'} size={5} sx={{ color: palette.text.secondary }} />
+            <UiIcon componentName='openInNew' size={5} sx={{ color: palette.text.secondary }} />
           </ListItemIcon>
-          <Typography variant={'caption1'}>Help Center</Typography>
+          <Typography variant='caption1'>Help Center</Typography>
         </MenuItem>
         <MenuItem onClick={logout} sx={menuItemSx}>
           <ListItemIcon>
-            <UiIcon componentName={'logOut'} size={5} sx={{ color: palette.error.main }} />
+            <UiIcon componentName='logOut' size={5} sx={{ color: palette.error.main }} />
           </ListItemIcon>
-          <Typography variant={'caption1'} color={palette.error.main}>
+          <Typography variant='caption1' color={palette.error.main}>
             Disconnect
           </Typography>
         </MenuItem>

diff --git a/src/contexts/toasts-manager/toasts/DefaultToast.tsx b/src/contexts/toasts-manager/toasts/DefaultToast.tsx
@@ -46,7 +46,7 @@ const DefaultToast = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
         onClose={() => closeSnackbar(id)}
       >
         <AlertTitle>{title}</AlertTitle>
-        <Typography variant={'body4'}>{message}</Typography>
+        <Typography variant='body4'>{message}</Typography>
       </Alert>
     </SnackbarContent>
   )

diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
@@ -8,28 +8,28 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
   const { palette, spacing } = useTheme()
 
   return (
-    <Stack direction={'row'} height={vh(100)}>
+    <Stack direction='row' height={vh(100)}>
       <Stack pl={14} pr={8} py={8} flex={1}>
-        <Box flex={1} position={'relative'}>
-          <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
-            <Box component={'img'} src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
+        <Box flex={1} position='relative'>
+          <Stack direction='row' justifyContent='space-between' alignItems='center'>
+            <Box component='img' src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
             <Button
-              component={'a'}
-              href={'https://rarime.com'}
-              target={'_blank'}
+              component='a'
+              href='https://rarime.com'
+              target='_blank'
               variant='text'
-              color={'secondary'}
-              size={'medium'}
+              color='secondary'
+              size='medium'
             >
               Visit Landing page
             </Button>
           </Stack>
 
           <Stack
-            position={'absolute'}
-            top={'50%'}
-            left={'50%'}
-            width={'100%'}
+            position='absolute'
+            top='50%'
+            left='50%'
+            width='100%'
             maxWidth={spacing(100)}
             sx={{ transform: 'translate(-50%, -50%)' }}
           >
@@ -38,16 +38,11 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
         </Box>
       </Stack>
 
-      <Stack
-        justifyContent={'center'}
-        alignItems={'end'}
-        pl={8}
-        bgcolor={palette.additional.pureBlack}
-      >
+      <Stack justifyContent='center' alignItems='end' pl={8} bgcolor={palette.additional.pureBlack}>
         <Box
-          component={'img'}
+          component='img'
           src='/imgs/dashboard.png'
-          alt={'Dashboard image'}
+          alt='Dashboard image'
           height={vh(90)}
           sx={{ objectFit: 'contain' }}
         />

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -8,10 +8,10 @@ const MainLayout = ({ children }: PropsWithChildren) => {
   const { spacing } = useTheme()
 
   return (
-    <Stack direction='row' spacing={4} height={vh(100)} width={'100%'}>
+    <Stack direction='row' spacing={4} height={vh(100)} width='100%'>
       <AppNavbar />
-      <Stack py={8} flex={1} overflow={'hidden auto'}>
-        <Stack mx={'auto'} maxWidth={spacing(220)} width={'100%'}>
+      <Stack py={8} flex={1} overflow='hidden auto'>
+        <Stack mx='auto' maxWidth={spacing(220)} width='100%'>
           {children}
         </Stack>
       </Stack>

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
@@ -16,28 +16,28 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
       bgcolor={palette.background.default}
     >
       <Stack
-        direction={'row'}
-        justifyContent={'space-between'}
-        alignItems={'center'}
-        width={'100%'}
+        direction='row'
+        justifyContent='space-between'
+        alignItems='center'
+        width='100%'
         px={8}
         py={3}
         bgcolor={palette.background.paper}
       >
-        <Box component={'img'} src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
+        <Box component='img' src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
         <Button
-          component={'a'}
-          href={'https://rarime.com'}
-          target={'_blank'}
-          color={'secondary'}
-          size={'medium'}
+          component='a'
+          href='https://rarime.com'
+          target='_blank'
+          color='secondary'
+          size='medium'
         >
           Visit Landing page
         </Button>
       </Stack>
 
-      <Stack py={6} flex={1} overflow={'hidden auto'} width={'100%'}>
-        <Stack mx={'auto'} maxWidth={spacing(220)} width={'100%'} height={'100%'}>
+      <Stack py={6} flex={1} overflow='hidden auto' width='100%'>
+        <Stack mx='auto' maxWidth={spacing(220)} width='100%' height='100%'>
           {children}
         </Stack>
       </Stack>

diff --git a/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx b/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx
@@ -36,7 +36,7 @@ export default function ActionButton({
           justifyContent='center'
           alignItems='center'
           bgcolor={palette.background.paper}
-          borderRadius={'50%'}
+          borderRadius='50%'
           sx={{
             transition: Transitions.Default,
           }}

diff --git a/src/pages/Credentials/pages/CredentialsId/index.tsx b/src/pages/Credentials/pages/CredentialsId/index.tsx
@@ -162,7 +162,7 @@ export default function CredentialsId() {
           </Stack>
         ) : (
           <NoDataView
-            title={'Credential not found'}
+            title='Credential not found'
             action={
               <Button component={NavLink} to={RoutePaths.CredentialsList} size='medium'>
                 View all credentials