Merge pull request #352 from nginformatica/feat/migrate-material-to-m…

…ui-less-complex

feat/migrate @material-ui to @mui/material

.babelrc.js

@@ -30,20 +30,20 @@ module.exports = {
         [
             'import',
             {
-                libraryName: '@material-ui/core',
+                libraryName: '@mui/material',
                 libraryDirectory: '',
                 camel2DashComponentName: false
             },
-            'material'
+            'mui'
         ],
         [
             'import',
             {
-                libraryName: '@mui/material',
+                libraryName: '@mui/styles',
                 libraryDirectory: '',
                 camel2DashComponentName: false
             },
-            'mui'
+            'styles'
         ],
         [
             'import',

README.md

@@ -8,7 +8,7 @@
 <div align="center">
 React UI based on the <br/>
 
-`@material-ui/core` and `@mui/material` <br/>
+`@mui/material` <br/>
 toolkit for the web.
 
 [![npm package](https://img.shields.io/npm/v/flipper-ui/latest.svg)](https://www.npmjs.com/package/flipper-ui)

jest.config.js

@@ -7,7 +7,9 @@ module.exports = {
         '<rootDir>/src/core/**/*.(ts|tsx)',
         '!<rootDir>/src/core/data-display/data-table/*.(ts|tsx)',
         '!<rootDir>/src/core/feedback/dialog-v2/index.ts',
-        '!<rootDir>/src/core/navigation/breadcrumbs/index.tsx'
+        '!<rootDir>/src/core/navigation/breadcrumbs/index.tsx',
+        '!<rootDir>/src/core/inputs/select/index.tsx',
+        '!<rootDir>/src/core/inputs/date-time/index.tsx'
     ],
     transform: {
         '.+\\.(ts|tsx)$': 'ts-jest'

package.json

@@ -1,11 +1,11 @@
 {
     "name": "flipper-ui",
-    "version": "0.33.1",
-    "description": "",
+    "version": "0.34.0",
+    "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
-    "homepage": "https://flipper-ui.ngi.com.br/",
     "author": "NG",
     "license": "MIT",
+    "homepage": "https://flipper-ui.ngi.com.br/",
     "repository": {
         "type": "git",
         "url": "https://github.com/nginformatica/flipper-ui.git"
@@ -33,46 +33,43 @@
         "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand"
     },
     "dependencies": {
-        "@date-io/date-fns": "1.3.6",
         "@emotion/react": "11.11.4",
         "@emotion/styled": "11.11.5",
-        "@material-ui/core": "4.12.4",
-        "@material-ui/lab": "4.0.0-alpha.61",
-        "@material-ui/pickers": "3.3.11",
-        "@mui/icons-material": "5.15.19",
-        "@mui/material": "5.15.19",
+        "@mui/icons-material": "5.15.21",
+        "@mui/material": "5.15.21",
+        "@mui/styles": "5.15.21",
+        "@mui/x-date-pickers": "7.8.0",
         "date-fns": "2.30.0",
-        "material-ui-chip-input": "2.0.0-beta.2",
         "ramda": "0.25.0",
         "react-loading-skeleton": "3.4.0",
         "react-number-format": "4.4.1",
         "sprintf-js": "1.1.3",
-        "uuid": "9.0.1"
+        "uuid": "10.0.0"
     },
     "devDependencies": {
-        "@babel/cli": "7.24.6",
-        "@babel/core": "7.24.6",
-        "@babel/plugin-transform-runtime": "7.24.6",
-        "@babel/preset-env": "7.24.6",
-        "@babel/preset-typescript": "7.24.6",
+        "@babel/cli": "7.24.7",
+        "@babel/core": "7.24.7",
+        "@babel/plugin-transform-runtime": "7.24.7",
+        "@babel/preset-env": "7.24.7",
+        "@babel/preset-typescript": "7.24.7",
         "@faker-js/faker": "8.4.1",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-styling-webpack": "1.0.0",
         "@storybook/react": "7.6.17",
         "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "1.5.4",
-        "@testing-library/dom": "10.1.0",
-        "@testing-library/jest-dom": "6.4.5",
-        "@testing-library/react": "15.0.7",
+        "@stylistic/eslint-plugin": "2.3.0",
+        "@testing-library/dom": "10.3.0",
+        "@testing-library/jest-dom": "6.4.6",
+        "@testing-library/react": "16.0.0",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.12",
-        "@types/node": "20.12.12",
+        "@types/node": "20.14.9",
         "@types/ramda": "0.25.36",
         "@types/react": "18.3.3",
         "@types/sprintf-js": "1.1.4",
-        "@types/uuid": "9.0.8",
-        "@typescript-eslint/eslint-plugin": "7.2.0",
-        "@typescript-eslint/parser": "7.2.0",
+        "@types/uuid": "10.0.0",
+        "@typescript-eslint/eslint-plugin": "7.15.0",
+        "@typescript-eslint/parser": "7.15.0",
         "babel-loader": "9.1.3",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -81,30 +78,26 @@
         "eslint-import-resolver-typescript": "3.6.1",
         "eslint-plugin-import": "2.29.1",
         "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-react": "7.34.2",
+        "eslint-plugin-react": "7.34.3",
         "eslint-plugin-react-hooks": "4.6.2",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.2.5",
+        "prettier": "3.3.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "react-router": "6.23.1",
-        "react-router-dom": "6.23.1",
         "storybook": "7.6.17",
         "styled-components": "6.1.11",
-        "ts-jest": "29.1.4",
+        "ts-jest": "29.1.5",
         "ts-loader": "9.5.1",
-        "typescript": "5.4.5",
-        "webpack": "5.91.0"
+        "typescript": "5.5.3",
+        "webpack": "5.92.1"
     },
     "peerDependencies": {
-        "react": ">=17.0.0",
-        "react-dom": ">=17.0.0",
-        "react-router": ">=5.0.0",
-        "react-router-dom": ">=5.0.0",
-        "styled-components": ">=5.0.0"
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0",
+        "styled-components": "^6.0.0"
     },
     "publishConfig": {
         "ignore": [

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

@@ -7,37 +7,31 @@ exports[`Actions should match snapshot 1`] = `
     class="sc-aYaIB ivIxy"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit css-1y942vo-MuiButtonBase-root-MuiButton-root"
       data-testid="cancel-action"
+      href=""
       name="cancel-action"
       style="margin: 0px 16px; opacity: 1;"
       tabindex="0"
       type="button"
     >
+      Voltar
       <span
-        class="MuiButton-label"
-      >
-        Voltar
-      </span>
-      <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary css-zcbmsk-MuiButtonBase-root-MuiButton-root"
       data-testid="confirm-action"
+      href=""
       name="confirm-action"
       style="opacity: 1;"
       tabindex="0"
       type="button"
     >
+      Excluir
       <span
-        class="MuiButton-label"
-      >
-        Excluir
-      </span>
-      <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
   </div>

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

@@ -53,11 +53,20 @@ const meta: Meta<typeof Actions> = {
             description: 'The buttons margin.'
         },
         actionButtonColor: {
-            options: ['inherit', 'primary', 'secondary', 'default', undefined],
+            options: [
+                'inherit',
+                'primary',
+                'secondary',
+                'success',
+                'error',
+                'info',
+                'warning',
+                undefined
+            ],
             control: { type: 'radio' },
             description:
                 'The "Confirmar" button color.' +
-                'Must be `"inherit" | "primary" | "secondary" | "default" | undefined`' +
+                'Must be `"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning"`' +
                 'If not set, the default is "secondary"'
         },
         disabled: {

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

@@ -1,15 +1,21 @@
 import React from 'react'
-import type { ButtonProps } from '@material-ui/core'
 import Button from '@/core/inputs/button'
 import { Wrapper } from './styles'
 
-export interface IProps {
+export interface IActionsProps {
     padding?: number | string
     margin?: number | string
     align?: 'flex-end' | 'flex-start' | 'center'
     prefix?: string
     buttons?: Array<'confirm' | 'cancel'>
-    actionButtonColor?: ButtonProps['color']
+    actionButtonColor?:
+        | 'inherit'
+        | 'primary'
+        | 'secondary'
+        | 'success'
+        | 'error'
+        | 'info'
+        | 'warning'
     names?: {
         cancel: string
         confirm: string
@@ -26,7 +32,7 @@ export interface IProps {
     onConfirm(): void
 }
 
-const Actions = (props: IProps) => {
+const Actions = (props: IActionsProps) => {
     const showButton =
         !props.readonly && (!props.buttons || props.buttons.includes('confirm'))
 

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-gEvDqW gPmBbd MuiPaper-elevation1 MuiPaper-rounded"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 sc-gEvDqW gPmBbd css-1ps6pg7-MuiPaper-root"
     role="mui-paper-container"
     style="padding: 4px;"
   >
     <p
-      class="MuiTypography-root sc-aYaIB ikghlf MuiTypography-body2"
+      class="MuiTypography-root MuiTypography-body2 sc-aYaIB ikghlf css-e784if-MuiTypography-root"
       style="margin: 0px 12px; padding: 6px 18px;"
     >
       comment
     </p>
     <span
-      class="MuiTypography-root sc-aYaIB ikghlf MuiTypography-caption"
+      class="MuiTypography-root MuiTypography-caption sc-aYaIB ikghlf css-1sn4lm3-MuiTypography-root"
       style="margin: 0px 12px; padding: 6px 18px;"
     >
       author

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { CSSProperties } from 'react'
 import type { DefaultProps } from '../../types'
-import { AdvertiseTypography, Paper } from './styles'
+import { AdvertiseTypography, AdvertiseContainer } from './styles'
 
 export interface AdvertiseProps extends DefaultProps {
     comment: string
@@ -18,7 +18,7 @@ const Advertise = ({
     authorStyle = {},
     ...otherProps
 }: AdvertiseProps) => (
-    <Paper padding={padding} {...otherProps}>
+    <AdvertiseContainer padding={padding} {...otherProps}>
         <AdvertiseTypography
             margin='0 12px'
             padding='6px 18px'
@@ -32,7 +32,7 @@ const Advertise = ({
             style={{ ...authorStyle }}>
             {author}
         </AdvertiseTypography>
-    </Paper>
+    </AdvertiseContainer>
 )
 
 export default Advertise

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

@@ -1,6 +1,6 @@
 import { default as styled } from 'styled-components'
 import Typography from '@/core/data-display/typography'
-import MuiPaper from '@/core/surfaces/paper'
+import Paper from '@/core/surfaces/paper'
 import { theme } from '@/theme'
 
 const { grays } = theme.colors
@@ -11,7 +11,7 @@ export const AdvertiseTypography = styled(Typography)`
     }
 `
 
-export const Paper = styled(MuiPaper)`
+export const AdvertiseContainer = styled(Paper)`
     display: flex;
     flex-direction: column;
 `

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import type { CSSProperties, ReactNode } from 'react'
 import { Avatar as MuiAvatar } from '@mui/material'
-import { take } from 'ramda'
 
 export interface IProps {
     name?: string
@@ -13,7 +12,7 @@ export interface IProps {
 const Avatar = (props: IProps) => {
     const getChild = () => {
         if (props.name) {
-            return take(1, props.name.toUpperCase())
+            return props.name.charAt(0).toUpperCase()
         }
 
         return props.icon

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

@@ -3,11 +3,11 @@
 exports[`Badge should match snapshot 1`] = `
 <div>
   <span
-    class="MuiBadge-root"
+    class="MuiBadge-root css-1c32n2y-MuiBadge-root"
   >
     Badge
     <span
-      class="MuiBadge-badge makeStyles-badge-3 MuiBadge-anchorOriginTopRightRectangle"
+      class="MuiBadge-badge MuiBadge-standard MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightRectangular MuiBadge-overlapRectangular css-dlwkee-MuiBadge-badge"
     >
       2
     </span>