chore/resolve eslint warnings

.eslintrc.js

@@ -2,14 +2,13 @@ const rulesReact = {
     'react/prop-types': 'off',
     'react/display-name': 'off',
     'react/no-unescaped-entities': 'off',
-    'react-perf/jsx-no-new-function-as-prop': 'off',
-
+
     'react/jsx-key': 'warn',
     'react/jsx-pascal-case': 'warn',
     'react/self-closing-comp': 'warn',
-    'react/no-unstable-nested-components': 'warn',
-    'react-perf/jsx-no-new-array-as-prop': 'warn',
-    'react-perf/jsx-no-new-object-as-prop': 'warn',
+    // it should be 'warn' but
+    // material-table needs to render nested components
+    'react/no-unstable-nested-components': 'off',
     'react/jsx-sort-props': [
         'warn',
         {
@@ -43,11 +42,19 @@ const rulesEslint = {
     'no-console': ['error', { allow: ['error'] }],
     'prefer-const': ['error', { destructuring: 'all' }],
 
-    '@stylistic/max-len': ['error', { code: 85 }],
     '@stylistic/key-spacing': [
         'error',
         { beforeColon: false, afterColon: true }
     ],
+    '@stylistic/max-len': [
+        'error',
+        {
+            code: 85,
+            ignoreStrings: true,
+            ignoreRegExpLiterals: true,
+            ignoreTemplateLiterals: true
+        }
+    ],
     '@stylistic/padding-line-between-statements': [
         'error',
         { blankLine: 'always', prev: '*', next: 'return' },
@@ -105,6 +112,11 @@ const rulesImport = {
                     group: 'index',
                     position: 'after'
                 },
+                {
+                    pattern: '@/icons',
+                    group: 'index',
+                    position: 'after'
+                },
                 {
                     pattern: '@/theme',
                     group: 'index',
@@ -187,7 +199,6 @@ module.exports = {
     },
     plugins: [
         'react-hooks',
-        'react-perf',
         '@typescript-eslint',
         'import',
         '@stylistic'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",
@@ -36,76 +36,75 @@
   },
   "dependencies": {
     "@date-io/date-fns": "1.3.6",
-    "@emotion/react": "11.11.3",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/pickers": "3.3.11",
-    "@mui/icons-material": "5.15.6",
-    "@mui/material": "5.15.6",
-    "@mui/styles": "5.15.6",
+    "@mui/icons-material": "5.15.12",
+    "@mui/material": "5.15.12",
+    "@mui/styles": "5.15.12",
     "date-fns": "2.30.0",
     "faker": "5.5.3",
     "material-table": "1.69.3",
     "material-ui-chip-input": "2.0.0-beta.2",
     "ramda": "0.25.0",
-    "react-loading-skeleton": "3.3.1",
+    "react-loading-skeleton": "3.4.0",
     "react-number-format": "4.4.1",
     "sprintf-js": "1.1.3",
     "stylis": "4.3.1",
     "uuid": "9.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.7",
-    "@babel/plugin-transform-runtime": "7.23.7",
-    "@babel/preset-env": "7.23.8",
+    "@babel/cli": "7.23.9",
+    "@babel/core": "7.24.0",
+    "@babel/plugin-transform-runtime": "7.24.0",
+    "@babel/preset-env": "7.24.0",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-essentials": "7.6.17",
     "@storybook/addon-styling-webpack": "0.0.6",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
     "@stylistic/eslint-plugin": "1.5.4",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/faker": "5.5.3",
     "@types/history": "5.0.0",
-    "@types/jest": "29.5.11",
-    "@types/node": "20.11.6",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.11.25",
     "@types/ramda": "0.25.36",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.63",
     "@types/sprintf-js": "1.1.4",
     "@types/styled-components": "5.1.34",
-    "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-imports": "2.0.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-perf": "3.3.2",
     "fs-extra": "11.2.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "node-fetch": "3.3.2",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.10",
+    "storybook": "7.6.17",
     "styled-components": "6.1.8",
     "ts-jest": "29.1.2",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
-    "webpack": "5.90.0"
+    "webpack": "5.90.3"
   },
   "peerDependencies": {
     "date-fns": "^2.30.0",

src/core/context/styles-provider/index.tsx

@@ -1,2 +1,3 @@
 import { StylesProvider } from '@material-ui/core/styles'
+
 export default StylesProvider

src/core/data-display/advertise/__snapshots__/advertise.spec.tsx.snap

@@ -3,19 +3,19 @@
 exports[`Advertise should match snapshot 1`] = `
 <div>
   <div
-    class="MuiPaper-root sc-beySPh gShNvO MuiPaper-elevation1 MuiPaper-rounded"
+    class="MuiPaper-root sc-guDLey eZPlpZ MuiPaper-elevation1 MuiPaper-rounded"
     role="mui-paper-container"
     style="padding: 4px;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body2"
-      style="margin: 0px 12px; padding: 6px 18px; border-left: 1px solid #bdbdbd;"
+      class="MuiTypography-root sc-beySPh fcGFSo MuiTypography-body2"
+      style="margin: 0px 12px; padding: 6px 18px;"
     >
       comment
     </p>
     <span
-      class="MuiTypography-root MuiTypography-caption"
-      style="margin: 0px 12px; padding: 6px 18px; border-left: 1px solid #bdbdbd;"
+      class="MuiTypography-root sc-beySPh fcGFSo MuiTypography-caption"
+      style="margin: 0px 12px; padding: 6px 18px;"
     >
       author
     </span>

src/core/data-display/advertise/index.tsx

@@ -1,12 +1,7 @@
 import React from 'react'
 import type { CSSProperties } from 'react'
-import { default as styled } from 'styled-components'
 import type { DefaultProps } from '../../types'
-import { Typography } from '@/core/data-display/typography'
-import MuiPaper from '@/core/surfaces/paper'
-import { theme } from '@/theme'
-
-const { grays } = theme.colors
+import { AdvertiseTypography, Paper } from './styles'
 
 export interface AdvertiseProps extends DefaultProps {
     /**
@@ -18,7 +13,7 @@ export interface AdvertiseProps extends DefaultProps {
      */
     author: string
     /**
-     * The style of the comment
+     * The style of the comments
      * @optional
      */
     commentStyle?: CSSProperties
@@ -29,17 +24,6 @@ export interface AdvertiseProps extends DefaultProps {
     authorStyle?: CSSProperties
 }
 
-const styles = {
-    border: {
-        borderLeft: `1px solid ${grays.g5}`
-    }
-}
-
-const Paper = styled(MuiPaper)`
-    display: flex;
-    flex-direction: column;
-`
-
 const Advertise = ({
     comment,
     author,
@@ -49,19 +33,19 @@ const Advertise = ({
     ...otherProps
 }: AdvertiseProps) => (
     <Paper padding={padding} {...otherProps}>
-        <Typography
+        <AdvertiseTypography
             margin='0 12px'
             padding='6px 18px'
-            style={{ ...styles.border, ...commentStyle }}>
+            style={{ ...commentStyle }}>
             {comment}
-        </Typography>
-        <Typography
+        </AdvertiseTypography>
+        <AdvertiseTypography
             margin='0px 12px'
             padding='6px 18px'
             variant='caption'
-            style={{ ...styles.border, ...authorStyle }}>
+            style={{ ...authorStyle }}>
             {author}
-        </Typography>
+        </AdvertiseTypography>
     </Paper>
 )
 

src/core/data-display/advertise/styles.ts

@@ -0,0 +1,17 @@
+import { default as styled } from 'styled-components'
+import Typography from '@/core/data-display/typography'
+import MuiPaper from '@/core/surfaces/paper'
+import { theme } from '@/theme'
+
+const { grays } = theme.colors
+
+export const AdvertiseTypography = styled(Typography)`
+    && {
+        border-left: 1px solid ${grays.g5};
+    }
+`
+
+export const Paper = styled(MuiPaper)`
+    display: flex;
+    flex-direction: column;
+`

src/core/data-display/avatar/avatar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Typography } from '@/core/data-display/typography'
+import Typography from '@/core/data-display/typography'
 import { Avatar } from '.'
 
 describe('Avatar', () => {

src/core/data-display/badge/badge.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Badge } from '.'
+import Badge from '.'
 
 describe('Badge', () => {
     it('should render', () => {

src/core/data-display/badge/badge.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { Meta, StoryFn } from '@storybook/react'
-import { Button } from '@/core/inputs/button'
-import { Badge } from '.'
+import Button from '@/core/inputs/button'
+import Badge from '.'
 
 export default {
     title: 'DataDisplay/Badge',

src/core/data-display/badge/index.tsx

@@ -32,7 +32,7 @@ const useBadgeStyles = (position: BadgeProps['position']) => {
     return getStyles()
 }
 
-export const Badge = (props: BadgeProps) => {
+const Badge = (props: BadgeProps) => {
     const {
         children,
         counter,

src/core/data-display/chapter/chapter.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Chapter } from '.'
+import Chapter from '.'
 
 describe('Chapter', () => {
     it('should render', () => {

src/core/data-display/chapter/chapter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Meta, StoryFn } from '@storybook/react'
-import { Chapter } from '.'
+import Chapter from '.'
 
 export default {
     title: 'DataDisplay/Chapter',