Merge pull request #348 from nginformatica/chore/optimize

chore/optimize

Author: renanponick

.babelrc.js

@@ -1,120 +1,6 @@
-const toKebabCase = str =>
-    str.replace(
-        /([a-z])?([A-Z])/g,
-        (m, g1, g2) => (g1 ? g1 + '-' : '') + g2.toLowerCase()
-    )
-
-const reactVisModules = {
-    AbstractSeries: 'plot/series/abstract-series',
-    ArcSeries: 'plot/series/arc-series',
-    AreaSeries: 'plot/series/area-series',
-    Borders: 'plot/borders',
-    ChartLabel: 'plot/chart-label',
-    CircularGridLines: 'plot/circular-grid-lines',
-    ContourSeries: 'plot/series/contour-series',
-    Crosshair: 'plot/crosshair',
-    CustomSVGSeries: 'plot/series/custom-svg-series',
-    DecorativeAxis: 'plot/axis/decorative-axis',
-    GradientDefs: 'plot/gradient-defs',
-    GridLines: 'plot/grid-lines',
-    HeatmapSeries: 'plot/series/heatmap-series',
-    HexbinSeries: 'plot/series/hexbin-series',
-    Highlight: 'plot/highlight',
-    Hint: 'plot/hint',
-    HorizontalBarSeries: 'plot/series/horizontal-bar-series',
-    HorizontalBarSeriesCanvas: 'plot/series/horizontal-bar-series-canvas',
-    HorizontalGridLines: 'plot/horizontal-grid-lines',
-    HorizontalRectSeries: 'plot/series/horizontal-rect-series',
-    HorizontalRectSeriesCanvas: 'plot/series/horizontal-rect-series-canvas',
-    LabelSeries: 'plot/series/label-series',
-    LineMarkSeries: 'plot/series/line-mark-series',
-    LineMarkSeriesCanvas: 'plot/series/line-mark-series-canvas',
-    LineSeries: 'plot/series/line-series',
-    LineSeriesCanvas: 'plot/series/line-series-canvas',
-    MarkSeries: 'plot/series/mark-series',
-    MarkSeriesCanvas: 'plot/series/mark-series-canvas',
-    PolygonSeries: 'plot/series/polygon-series',
-    VerticalBarSeries: 'plot/series/vertical-bar-series',
-    VerticalBarSeriesCanvas: 'plot/series/vertical-bar-series-canvas',
-    VerticalGridLines: 'plot/vertical-grid-lines',
-    VerticalRectSeries: 'plot/series/vertical-rect-series',
-    VerticalRectSeriesCanvas: 'plot/series/vertical-rect-series-canvas',
-    Voronoi: 'plot/voronoi',
-    RectSeries: 'plot/series/rect-series',
-    RectSeriesCanvas: 'plot/series/rect-series-canvas',
-    WhiskerSeries: 'plot/series/whisker-series',
-    XYPlot: 'plot/xy-plot',
-    XAxis: 'plot/axis/x-axis',
-    YAxis: 'plot/axis/y-axis',
-    ContinuousColorLegend: 'legends/continuous-color-legend',
-    ContinuousSizeLegend: 'legends/continuous-size-legend',
-    DiscreteColorLegend: 'legends/discrete-color-legend',
-    SearchableDiscreteColorLegend: 'legends/searchable-discrete-color-legend',
-    ParallelCoordinates: 'parallel-coordinates',
-    RadarChart: 'radar-chart',
-    RadialChart: 'radial-chart',
-    Sankey: 'sankey',
-    Sunburst: 'sunburst',
-    Treemap: 'treemap',
-    makeHeightFlexible: 'make-vis-flexible',
-    makeVisFlexible: 'make-vis-flexible',
-    makeWidthFlexible: 'make-vis-flexible',
-    FlexibleXYPlot: 'make-vis-flexible',
-    FlexibleWidthXYPlot: 'make-vis-flexible',
-    FlexibleHeightXYPlot: 'make-vis-flexible',
-    AxisUtils: 'utils/axis-utils',
-    ScaleUtils: 'utils/scales-utils'
-}
-
 module.exports = {
     plugins: [
-        [
-            'transform-imports',
-            {
-                '@': {
-                    transform: './src',
-                    preventFullImport: true
-                },
-                '@mui/icons-material': {
-                    transform: '@mui/icons-material/${member}',
-                    preventFullImport: true
-                },
-                '@material-ui/core': {
-                    transform: '@material-ui/core/${member}',
-                    preventFullImport: true
-                },
-                '@material-ui/styles': {
-                    transform: '@material-ui/styles/${member}',
-                    preventFullImport: true
-                },
-                '../icons': {
-                    transform: '@mui/icons-material/${member}',
-                    preventFullImport: true
-                },
-                '../charts': {
-                    transform: 'flipper-ui/charts/${member}',
-                    preventFullImport: true
-                },
-                'react-vis': {
-                    transform: importName =>
-                        `react-vis/es/${reactVisModules[importName]}`,
-                    preventFullImport: true
-                },
-                'date-fns/locale': {
-                    transform: importName =>
-                        `date-fns/locale/${toKebabCase(importName)}`,
-                    preventFullImport: true
-                },
-                'date-fns': {
-                    transform: 'date-fns/${member}',
-                    preventFullImport: true
-                },
-                ramda: {
-                    transform: 'ramda/es/${member}',
-                    preventFullImport: true
-                }
-            }
-        ],
+        '@babel/plugin-transform-runtime',
         [
             'module-resolver',
             {
@@ -123,8 +9,51 @@ module.exports = {
                 }
             }
         ],
-        '@babel/plugin-transform-runtime',
-        'transform-class-properties'
+        [
+            'import',
+            {
+                libraryName: 'ramda',
+                libraryDirectory: 'es',
+                camel2DashComponentName: false
+            },
+            'ramda'
+        ],
+        [
+            'import',
+            {
+                libraryName: 'date-fns',
+                libraryDirectory: '',
+                camel2DashComponentName: false
+            },
+            'date-fns'
+        ],
+        [
+            'import',
+            {
+                libraryName: '@material-ui/core',
+                libraryDirectory: '',
+                camel2DashComponentName: false
+            },
+            'material'
+        ],
+        [
+            'import',
+            {
+                libraryName: '@mui/material',
+                libraryDirectory: '',
+                camel2DashComponentName: false
+            },
+            'mui'
+        ],
+        [
+            'import',
+            {
+                libraryName: '@mui/icons-material',
+                libraryDirectory: '',
+                camel2DashComponentName: false
+            },
+            'icons'
+        ]
     ],
     presets: [
         '@babel/preset-env',

.eslintrc.js

@@ -112,11 +112,6 @@ const rulesImport = {
                     group: 'index',
                     position: 'after'
                 },
-                {
-                    pattern: '@/icons',
-                    group: 'index',
-                    position: 'after'
-                },
                 {
                     pattern: '@/theme',
                     group: 'index',
@@ -203,5 +198,5 @@ module.exports = {
         'import',
         '@stylistic'
     ],
-    ignorePatterns: ['.eslintrc.js']
+    ignorePatterns: ['.eslintrc.js', 'pre-publish.js', 'jest.config.js']
 }

.npmignore

@@ -1,5 +1,3 @@
 src
 docs
-.docz
-doczrc.js
 .gitignore

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.6",
+    "version": "0.31.7",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -28,8 +28,6 @@
         "type-check": "tsc --noEmit",
         "copy:package": "cp package.json dist/",
         "publish:yalc": "cd dist/ && yalc publish && cd ..",
-        "predeploy": "yarn build && yarn storybook:build",
-        "deploy": "gh-pages -d docs",
         "release": "yarn build && node pre-publish.js && npm publish ./dist --access public",
         "test:ci": "yarn test --coverage",
         "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand"
@@ -39,12 +37,10 @@
         "@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.13",
-        "@mui/material": "5.15.13",
-        "@mui/styles": "5.15.13",
+        "@mui/icons-material": "5.15.17",
+        "@mui/material": "5.15.17",
         "date-fns": "2.30.0",
         "faker": "5.5.3",
         "material-table": "1.69.3",
@@ -53,45 +49,43 @@
         "react-loading-skeleton": "3.4.0",
         "react-number-format": "4.4.1",
         "sprintf-js": "1.1.3",
-        "stylis": "4.3.1",
+        "stylis": "4.3.2",
         "uuid": "9.0.1"
     },
     "devDependencies": {
-        "@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",
+        "@babel/cli": "7.24.5",
+        "@babel/core": "7.24.5",
+        "@babel/plugin-transform-runtime": "7.24.3",
+        "@babel/preset-env": "7.24.5",
+        "@babel/preset-typescript": "7.24.1",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-styling-webpack": "0.0.6",
         "@storybook/react": "7.6.17",
         "@storybook/react-webpack5": "7.6.17",
         "@stylistic/eslint-plugin": "1.5.4",
-        "@testing-library/jest-dom": "6.4.2",
-        "@testing-library/react": "14.2.1",
+        "@testing-library/dom": "10.1.0",
+        "@testing-library/jest-dom": "6.4.5",
+        "@testing-library/react": "15.0.7",
         "@testing-library/user-event": "14.5.2",
         "@types/faker": "5.5.3",
-        "@types/history": "5.0.0",
         "@types/jest": "29.5.12",
-        "@types/node": "20.11.28",
+        "@types/node": "20.12.11",
         "@types/ramda": "0.25.36",
         "@types/react": "18.2.66",
         "@types/sprintf-js": "1.1.4",
-        "@types/styled-components": "5.1.34",
         "@types/uuid": "9.0.8",
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
         "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",
+        "babel-plugin-import": "1.13.8",
+        "babel-plugin-module-resolver": "5.0.2",
         "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.34.0",
-        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-react": "7.34.1",
+        "eslint-plugin-react-hooks": "4.6.2",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
@@ -101,16 +95,16 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "storybook": "7.6.17",
-        "styled-components": "6.1.8",
+        "styled-components": "6.1.11",
         "ts-jest": "29.1.2",
         "ts-loader": "9.5.1",
-        "typescript": "5.4.2",
-        "webpack": "5.90.3"
+        "typescript": "5.4.5",
+        "webpack": "5.91.0"
     },
     "peerDependencies": {
-        "date-fns": "^2.30.0",
-        "react": "16.x || 17.x || 18.x",
-        "styled-components": "5.x || 6.x"
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0",
+        "styled-components": ">=5.0.0"
     },
     "publishConfig": {
         "ignore": [

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

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

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

@@ -3,18 +3,18 @@
 exports[`Chapter should match snapshot 1`] = `
 <div>
   <div
-    class="sc-guDLey wpcEU"
+    class="sc-gEvDqW geoBRc"
   >
     <div
-      class="sc-beySPh bYMaWh"
+      class="sc-aYaIB jcOBwW"
     />
     <p
       class="MuiTypography-root MuiTypography-body2"
     >
       Chapter
     </p>
     <div
-      class="sc-beySPh bYMaWh"
+      class="sc-aYaIB jcOBwW"
     />
   </div>
 </div>

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

@@ -1,8 +1,8 @@
 import React from 'react'
+import { Face } from '@mui/icons-material'
 import type { Meta, StoryFn } from '@storybook/react'
 import { Avatar } from '@/core/data-display/avatar'
 import Chip from '.'
-import { Face } from '@/icons'
 
 export default {
     title: 'DataDisplay/Chip',

src/core/data-display/data-table/data-table-pagination-actions.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import type { MouseEvent } from 'react'
-import IconButton from '@/core/inputs/icon-button'
-import { PaginationWrapper } from './styles'
 import {
     FirstPage,
     LastPage,
     KeyboardArrowLeft,
     KeyboardArrowRight
-} from '@/icons'
+} from '@mui/icons-material'
+import IconButton from '@/core/inputs/icon-button'
+import { PaginationWrapper } from './styles'
 
 interface DataTablePaginationActionsProps {
     count: number