Refactor: Eslint project formatting (#287)

nginformatica · Dec 5, 2022 · 3c2a103 · 3c2a103
1 parent 1b5a021
commit 3c2a103
Show file tree

Hide file tree

Showing 114 changed files with 1,653 additions and 1,643 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
-dist/*
+dist/*
+# FIXME: After project refactor EditableTable should not be ignored
+src/core/EditableTable.tsx
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,7 @@
         "plugin:ramda/recommended"
     ],
     "rules": {
+        "@typescript-eslint/ban-types": 1,
         "prettier/prettier": [
             "error",
             {

diff --git a/cypress/integration/Node.feature b/cypress/integration/Node.feature
@@ -2,7 +2,7 @@ Feature: Node
 
     I want to use Node
 
-    @focus
+    # @focus
     Scenario: I should render
         Given I render Node
         When I expand all nodes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.2",
+    "version": "0.26.3",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",

diff --git a/src/core/Advertise.tsx b/src/core/Advertise.tsx
@@ -30,23 +30,22 @@ const Advertise: FC<AdvertiseProps> = ({
     commentStyle = {},
     authorStyle = {},
     ...otherProps
-}) =>
-    <Paper
-        padding={ padding }
-        { ...otherProps }>
+}) => (
+    <Paper padding={padding} {...otherProps}>
         <Typography
             margin='0 12px'
             padding='6px 18px'
-            style={ { ...styles.border, ...commentStyle } }>
-            { comment }
+            style={{ ...styles.border, ...commentStyle }}>
+            {comment}
         </Typography>
         <Typography
             margin='0px 12px'
             padding='6px 18px'
             variant='caption'
-            style={ { ...styles.border, ...authorStyle } }>
-            { author }
+            style={{ ...styles.border, ...authorStyle }}>
+            {author}
         </Typography>
     </Paper>
+)
 
 export default Advertise
diff --git a/src/core/AutoComplete.tsx b/src/core/AutoComplete.tsx
@@ -59,21 +59,19 @@ interface ISelected {
 
 type TSelected = ISelected | string
 
-const removeAccents = (text: string) => text
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
+const removeAccents = (text: string) =>
+    text.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
 
 const AutoComplete: FC<AutoCompleteProps> = props => {
     const inputRef = useRef<HTMLInputElement>(null)
 
-    const index = props.suggestions
-        .findIndex(suggestion => {
-            if (props.value && typeof props.value === 'object') {
-                return props.value.value === suggestion.value
-            }
+    const index = props.suggestions.findIndex(suggestion => {
+        if (props.value && typeof props.value === 'object') {
+            return props.value.value === suggestion.value
+        }
 
-            return false
-        })
+        return false
+    })
 
     const [highlighted, setHighlighted] = useState(Math.max(0, index))
     const [open, setOpen] = useState(Boolean(props.defaultIsOpen))
@@ -100,9 +98,8 @@ const AutoComplete: FC<AutoCompleteProps> = props => {
         }
     }, [])
 
-    const inputValue = typeof props.value === 'object'
-        ? props.value.label
-        : props.value || ''
+    const inputValue =
+        typeof props.value === 'object' ? props.value.label : props.value || ''
 
     const handleSelect = (item: TSelected) => {
         if (typeof item === 'object' && item.subheader) {
@@ -118,29 +115,26 @@ const AutoComplete: FC<AutoCompleteProps> = props => {
             return props.suggestions
         }
 
-        const items = value
-            ? props.suggestions
-            : []
-
-        return items
-            .filter(item => {
-                if (!item.subheader) {
-                    return props.caseSensitive
-                        ? removeAccents(item.label)
-                            .includes(removeAccents(value))
-                        : removeAccents(item.label)
-                            .toLocaleLowerCase()
-                            .includes(removeAccents(value).toLocaleLowerCase())
-                }
+        const items = value ? props.suggestions : []
 
-                return true
-            })
+        return items.filter(item => {
+            if (!item.subheader) {
+                return props.caseSensitive
+                    ? removeAccents(item.label).includes(removeAccents(value))
+                    : removeAccents(item.label)
+                          .toLocaleLowerCase()
+                          .includes(removeAccents(value).toLocaleLowerCase())
+            }
+
+            return true
+        })
     }
 
     useEffect(() => {
-        const isFocused = inputRef && inputRef.current
-            ? document.activeElement === inputRef.current
-            : false
+        const isFocused =
+            inputRef && inputRef.current
+                ? document.activeElement === inputRef.current
+                : false
 
         const isSearching = props.value && typeof props.value === 'string'
 
@@ -153,10 +147,10 @@ const AutoComplete: FC<AutoCompleteProps> = props => {
 
     const getPaperPosition = () => {
         if (inputRef.current !== null) {
-            const height = props.maxHeight || (getSuggestions().length * 48)
+            const height = props.maxHeight || getSuggestions().length * 48
             const { top } = inputRef.current.getBoundingClientRect()
 
-            if ((top + height) > window.innerHeight) {
+            if (top + height > window.innerHeight) {
                 return 'above'
             }
         }
@@ -208,44 +202,43 @@ const AutoComplete: FC<AutoCompleteProps> = props => {
         const paperStyle: CSSProperties = {
             position: 'absolute',
             width: inputRef.current ? inputRef.current.offsetWidth : 256,
-            bottom: getPaperPosition() === 'above' && inputRef.current
-                ? inputRef.current.getBoundingClientRect().height + 1
-                : undefined,
+            bottom:
+                getPaperPosition() === 'above' && inputRef.current
+                    ? inputRef.current.getBoundingClientRect().height + 1
+                    : undefined,
             zIndex: 1099
         }
 
         return (
-            <Paper square style={ paperStyle }>
-                <div style={ { overflow: 'auto', maxHeight: props.maxHeight } }>
-                    {
-                        getSuggestions().map((suggestion, index) =>
-                            <Fragment key={ index }>
-                                {
-                                    props.renderSuggestion(
-                                        suggestion,
-                                        getItemProps(suggestion),
-                                        highlighted === index
-                                    )
-                                }
-                            </Fragment>
-                        )
-                    }
+            <Paper square style={paperStyle}>
+                <div style={{ overflow: 'auto', maxHeight: props.maxHeight }}>
+                    {getSuggestions().map((suggestion, index) => (
+                        <Fragment key={index}>
+                            {props.renderSuggestion(
+                                suggestion,
+                                getItemProps(suggestion),
+                                highlighted === index
+                            )}
+                        </Fragment>
+                    ))}
                 </div>
-                { props.actions }
+                {props.actions}
             </Paper>
         )
     }
 
-    const renderPaper = () => props.fade
-        ? (
-            <Fade in={ open }>
-                { renderSuggestions() }
-            </Fade>
+    const renderPaper = () =>
+        props.fade ? (
+            <Fade in={open}>{renderSuggestions()}</Fade>
+        ) : (
+            renderSuggestions()
         )
-        : renderSuggestions()
 
     const handleNavigate = (event: KeyboardEvent) => {
-        if (event.key === 'ArrowDown' && highlighted < getSuggestions().length - 1) {
+        if (
+            event.key === 'ArrowDown' &&
+            highlighted < getSuggestions().length - 1
+        ) {
             setHighlighted(highlighted + 1)
         } else if (event.key === 'ArrowUp' && highlighted > 0) {
             setHighlighted(highlighted - 1)
@@ -259,23 +252,21 @@ const AutoComplete: FC<AutoCompleteProps> = props => {
 
     return (
         <div
-            style={ {
+            style={{
                 position: 'relative',
                 ...props.style
-            } }>
-            {
-                props.renderInput({
-                    value: inputValue,
-                    inputProps: {
-                        ref: inputRef
-                    },
-                    onChange: handleChange,
-                    onFocus: handleFocus,
-                    onBlur: handleBlur,
-                    onKeyDown: handleNavigate
-                })
-            }
-            { open && renderPaper() }
+            }}>
+            {props.renderInput({
+                value: inputValue,
+                inputProps: {
+                    ref: inputRef
+                },
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleNavigate
+            })}
+            {open && renderPaper()}
         </div>
     )
 }

diff --git a/src/core/Avatar.tsx b/src/core/Avatar.tsx
@@ -31,9 +31,9 @@ const Avatar: FC<AvatarProps> = ({
 
     return (
         <MuiAvatar
-            { ...otherProps }
-            className={ `${className} ${primary ? classes['primary'] : ''}` }>
-            { children }
+            {...otherProps}
+            className={`${className} ${primary ? classes['primary'] : ''}`}>
+            {children}
         </MuiAvatar>
     )
 }

diff --git a/src/core/Badge.tsx b/src/core/Badge.tsx
@@ -38,17 +38,17 @@ const Badge: FC<BadgeProps> = props => {
 
     const classes = useBadgeStyles(position)
 
-    return counter
-        ? (
-            <MuiBadge
-                badgeContent={ counter }
-                classes={ classes }
-                style={ { padding, margin, ...style } }
-                { ...otherProps }>
-                { children }
-            </MuiBadge>
-        )
-        : <>{ children }</>
+    return counter ? (
+        <MuiBadge
+            badgeContent={counter}
+            classes={classes}
+            style={{ padding, margin, ...style }}
+            {...otherProps}>
+            {children}
+        </MuiBadge>
+    ) : (
+        <>{children}</>
+    )
 }
 
 export default Badge
diff --git a/src/core/Box.tsx b/src/core/Box.tsx
@@ -13,13 +13,14 @@ const Box: FC<BoxProps> = ({
     style = {},
     minHeight = 400,
     ...otherProps
-}) =>
+}) => (
     <Paper
-        padding={ padding }
-        margin={ margin }
-        style={ { minHeight, ...style } }
-        { ...otherProps }>
-        { children }
+        padding={padding}
+        margin={margin}
+        style={{ minHeight, ...style }}
+        {...otherProps}>
+        {children}
     </Paper>
+)
 
 export default Box
diff --git a/src/core/Button.tsx b/src/core/Button.tsx
@@ -12,19 +12,17 @@ export interface ButtonProps extends DefaultProps {
     size?: 'small' | 'medium' | 'large'
     href?: string
     fullWidth?: boolean
-    variant?:
-        | 'text'
-        | 'outlined'
-        | 'contained'
-        | 'dashed'
+    variant?: 'text' | 'outlined' | 'contained' | 'dashed'
     target?: string
     onClick?(event: MouseEvent<HTMLButtonElement>): void
 }
 
-const StyledButton = styled(MuiButton)<ButtonProps & { dashed?: 'true' | 'false' }>`
-    border-style: ${props => props.dashed === 'true'
-        ? 'dashed !important' : 'initial'};
-    opacity: ${props => props.selected ? 0.5 : 1};
+const StyledButton = styled(MuiButton)<
+    ButtonProps & { dashed?: 'true' | 'false' }
+>`
+    border-style: ${props =>
+        props.dashed === 'true' ? 'dashed !important' : 'initial'};
+    opacity: ${props => (props.selected ? 0.5 : 1)};
 `
 
 const Button: FC<ButtonProps> = ({
@@ -34,13 +32,14 @@ const Button: FC<ButtonProps> = ({
     style = {},
     variant,
     ...otherProps
-}) =>
+}) => (
     <StyledButton
-        { ...otherProps }
-        dashed={ variant === 'dashed' ? 'true' : 'false' }
-        variant={ variant === 'dashed' ? 'outlined' : variant }
-        style={ { margin, padding, ...style } }>
-        { children }
+        {...otherProps}
+        dashed={variant === 'dashed' ? 'true' : 'false'}
+        variant={variant === 'dashed' ? 'outlined' : variant}
+        style={{ margin, padding, ...style }}>
+        {children}
     </StyledButton>
+)
 
 export default Button