enable prettier rules

Author: pawelangelow

.eslintrc.js

@@ -363,7 +363,6 @@ module.exports = {
         'react/prop-types': 'off',
         'import/order': 'off',
         'prefer-const': 'off',
-        'prettier/prettier': 'off',
         'prefer-destructuring': 'off',
         // REDUNDANT: These are OFF by default in newer Airbnb config
         // 'react/jsx-boolean-value': 'off',

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -299,12 +299,9 @@ const AutoRefresh = ({
               anchorPosition="downCenter"
               isOpen={isPopoverOpen}
               anchorClassName={styles.anchorWrapper}
-              panelClassName={cx(
-                styles.popoverWrapper,
-                {
-                  [styles.popoverWrapperEditing]: editingRate,
-                },
-              )}
+              panelClassName={cx(styles.popoverWrapper, {
+                [styles.popoverWrapperEditing]: editingRate,
+              })}
               closePopover={closePopover}
               button={
                 <AutoRefreshConfigButton

redisinsight/ui/src/components/base/forms/FormField.tsx

@@ -1,5 +1,8 @@
 import React, { ComponentProps } from 'react'
-import { FormField as RedisFormField, TooltipProvider } from '@redis-ui/components'
+import {
+  FormField as RedisFormField,
+  TooltipProvider,
+} from '@redis-ui/components'
 
 export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & {
   infoIconProps?: any
@@ -8,9 +11,11 @@ export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & {
 export function FormField(props: RedisFormFieldProps) {
   // eslint-disable-next-line react/destructuring-assignment
   if (props.infoIconProps) {
-    return <TooltipProvider>
-      <RedisFormField {...props} />
-    </TooltipProvider>
+    return (
+      <TooltipProvider>
+        <RedisFormField {...props} />
+      </TooltipProvider>
+    )
   }
   return <RedisFormField {...props} />
 }

redisinsight/ui/src/components/base/forms/select/RiSelect.tsx

@@ -3,7 +3,11 @@ import type { SelectOption, SelectValueRender } from '@redis-ui/components'
 import React from 'react'
 
 export { Select as RiSelect } from '@redis-ui/components'
-export type { SelectOption, SelectValueRender, SelectValueRenderParams } from '@redis-ui/components'
+export type {
+  SelectOption,
+  SelectValueRender,
+  SelectValueRenderParams,
+} from '@redis-ui/components'
 
 // Define our extended type
 export type RiSelectOption = SelectOption & {

redisinsight/ui/src/components/base/inputs/TextInput.tsx

@@ -4,7 +4,10 @@ import { Input as RedisInput, TooltipProvider } from '@redis-ui/components'
 
 export type RedisInputProps = ComponentProps<typeof RedisInput>
 
-const TextInput = forwardRef<React.ElementRef<typeof RedisInput>, RedisInputProps>((props, ref) => {
+const TextInput = forwardRef<
+  React.ElementRef<typeof RedisInput>,
+  RedisInputProps
+>((props, ref) => {
   // eslint-disable-next-line react/destructuring-assignment
   if (props.error) {
     return (

redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx

@@ -3,7 +3,8 @@ import styled from 'styled-components'
 import { useTheme } from '@redis-ui/styles'
 import { Spacer } from '../spacer'
 
-interface RiEmptyPromptProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+interface RiEmptyPromptProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   body?: React.ReactNode
   title?: React.ReactNode
   icon?: React.ReactNode
@@ -19,23 +20,23 @@ const StyledEmptyPrompt = styled.div`
 const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => {
   const theme = useTheme()
 
-  return (<StyledEmptyPrompt {...rest}>
-    {icon}
-    {title && (
-      <>
-        <Spacer size={theme.core.space.space100} />
-        {title}
-      </>
-    )}
-    {body && (
-      <>
-        <Spacer size={theme.core.space.space100} />
-        {body}
-      </>
-    )}
-  </StyledEmptyPrompt>
+  return (
+    <StyledEmptyPrompt {...rest}>
+      {icon}
+      {title && (
+        <>
+          <Spacer size={theme.core.space.space100} />
+          {title}
+        </>
+      )}
+      {body && (
+        <>
+          <Spacer size={theme.core.space.space100} />
+          {body}
+        </>
+      )}
+    </StyledEmptyPrompt>
   )
 }
-  
 
 export default RiEmptyPrompt

redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx

@@ -5,11 +5,13 @@ import { HorizontalSpacer } from './horizontal-spacer'
 describe('HorizontalSpacer', () => {
   it('should render with different sizes correctly', () => {
     const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const
-    
-    sizes.forEach(size => {
+
+    sizes.forEach((size) => {
       const { container } = render(<HorizontalSpacer size={size} />)
-      const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
-      
+      const spacer = container.querySelector(
+        '.RI-horizontal-spacer',
+      ) as HTMLElement
+
       if (size === 'xl') {
         expect(spacer).toHaveStyle('width: calc(var(--base) * 2.25)')
       } else {
@@ -22,7 +24,7 @@ describe('HorizontalSpacer', () => {
     const { getByText } = render(
       <HorizontalSpacer size="s">
         <span>Test content</span>
-      </HorizontalSpacer>
+      </HorizontalSpacer>,
     )
     const content = getByText('Test content')
     expect(content).toBeInTheDocument()
@@ -31,19 +33,23 @@ describe('HorizontalSpacer', () => {
 
   it('should apply custom className', () => {
     const { container } = render(<HorizontalSpacer className="custom-class" />)
-    const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
-    
+    const spacer = container.querySelector(
+      '.RI-horizontal-spacer',
+    ) as HTMLElement
+
     expect(spacer).toHaveClass('RI-horizontal-spacer')
     expect(spacer).toHaveClass('custom-class')
   })
 
   it('should pass through custom props', () => {
     const { container } = render(
-      <HorizontalSpacer data-testid="my-spacer" id="spacer-id" />
+      <HorizontalSpacer data-testid="my-spacer" id="spacer-id" />,
     )
-    const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
-    
+    const spacer = container.querySelector(
+      '.RI-horizontal-spacer',
+    ) as HTMLElement
+
     expect(spacer).toHaveAttribute('data-testid', 'my-spacer')
     expect(spacer).toHaveAttribute('id', 'spacer-id')
   })
-}) 
+})

redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts

@@ -23,4 +23,4 @@ export const StyledHorizontalSpacer = styled.div<HorizontalSpacerProps>`
   flex-shrink: 0;
   width: ${({ size = 'l' }) => horizontalSpacerStyles[size]};
   display: inline-block;
-` 
+`

redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.tsx

@@ -5,8 +5,15 @@ import {
   StyledHorizontalSpacer,
 } from './horizontal-spacer.styles'
 
-export const HorizontalSpacer = ({ className, children, ...rest }: HorizontalSpacerProps) => (
-  <StyledHorizontalSpacer {...rest} className={cx('RI-horizontal-spacer', className)}>
+export const HorizontalSpacer = ({
+  className,
+  children,
+  ...rest
+}: HorizontalSpacerProps) => (
+  <StyledHorizontalSpacer
+    {...rest}
+    className={cx('RI-horizontal-spacer', className)}
+  >
     {children}
   </StyledHorizontalSpacer>
-) 
+)

redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts

@@ -1,2 +1,5 @@
 export { HorizontalSpacer } from './horizontal-spacer'
-export type { HorizontalSpacerSize, HorizontalSpacerProps } from './horizontal-spacer.styles' 
+export type {
+  HorizontalSpacerSize,
+  HorizontalSpacerProps,
+} from './horizontal-spacer.styles'