feat/create validation dialog

.babelrc.js

@@ -75,8 +75,8 @@ module.exports = {
                     transform: './src',
                     preventFullImport: true
                 },
-                '@material-ui/icons': {
-                    transform: '@material-ui/icons/${member}',
+                '@mui/icons-material': {
+                    transform: '@mui/icons-material/${member}',
                     preventFullImport: true
                 },
                 '@material-ui/core': {
@@ -88,7 +88,7 @@ module.exports = {
                     preventFullImport: true
                 },
                 '../icons': {
-                    transform: '@material-ui/icons/${member}',
+                    transform: '@mui/icons-material/${member}',
                     preventFullImport: true
                 },
                 '../charts': {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.30.7",
+  "version": "0.30.8",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",
@@ -34,10 +34,15 @@
   "license": "MIT",
   "dependencies": {
     "@date-io/date-fns": "1.3.6",
+    "@emotion/react": "11.11.3",
+    "@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.3",
+    "@mui/material": "5.15.3",
+    "@mui/styles": "5.15.3",
     "date-fns": "2.30.0",
     "faker": "5.5.3",
     "material-table": "1.69.3",
@@ -47,33 +52,34 @@
     "react-loading-skeleton": "3.3.1",
     "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.6",
-    "@babel/plugin-transform-runtime": "7.23.6",
-    "@babel/preset-env": "7.23.6",
+    "@babel/core": "7.23.7",
+    "@babel/plugin-transform-runtime": "7.23.7",
+    "@babel/preset-env": "7.23.7",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/react": "7.6.6",
-    "@storybook/react-webpack5": "7.6.6",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.5.1",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-styling-webpack": "0.0.6",
+    "@storybook/react": "7.6.7",
+    "@storybook/react-webpack5": "7.6.7",
+    "@testing-library/react": "14.1.2",
+    "@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.10.5",
+    "@types/node": "20.10.6",
     "@types/ramda": "0.25.36",
-    "@types/react": "18.2.45",
+    "@types/react": "18.2.46",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",
     "@types/sprintf-js": "1.1.4",
     "@types/styled-components": "5.1.34",
     "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.15.0",
-    "@typescript-eslint/parser": "6.15.0",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/parser": "6.17.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -82,7 +88,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-prettier": "5.1.0",
+    "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-ramda": "2.5.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -95,19 +101,19 @@
     "prettier": "3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.0",
-    "react-router-dom": "6.21.0",
-    "storybook": "7.6.6",
-    "styled-components": "6.1.2",
+    "react-router": "6.21.1",
+    "react-router-dom": "6.21.1",
+    "storybook": "7.6.7",
+    "styled-components": "6.1.6",
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
     "webpack": "5.89.0"
   },
   "peerDependencies": {
-    "date-fns": "2.30.0",
-    "react": "16.8.0",
-    "styled-components": "5.0.0"
+    "date-fns": "^2.30.0",
+    "react": "16.x || 17.x || 18.x",
+    "styled-components": "5.x || 6.x"
   },
   "publishConfig": {
     "ignore": [

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-bdDqHD cGzQhq MuiPaper-elevation1 MuiPaper-rounded"
+    class="MuiPaper-root sc-bcXGCL jFAAU 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;"
+      style="margin: 0px 12px; padding: 6px 18px; border-left: 1px solid #bdbdbd;"
     >
       comment
     </p>
     <span
       class="MuiTypography-root MuiTypography-caption"
-      style="margin: 0px 12px; padding: 6px 18px; border-left: 1px solid #BDBDBD;"
+      style="margin: 0px 12px; padding: 6px 18px; border-left: 1px solid #bdbdbd;"
     >
       author
     </span>

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

@@ -1,9 +1,11 @@
 import React from 'react'
-import { background } from '@/colors'
+import styled from 'styled-components'
 import MuiPaper from '@/core/surfaces/paper'
 import Typography from '@/core/data-display/typography'
-import styled from 'styled-components'
 import type { DefaultProps } from '../../types'
+import { theme } from '@/theme'
+
+const { grays } = theme.colors
 
 export interface AdvertiseProps extends DefaultProps {
     /**
@@ -28,7 +30,7 @@ export interface AdvertiseProps extends DefaultProps {
 
 const styles = {
     border: {
-        borderLeft: `1px solid ${background.dark}`
+        borderLeft: `1px solid ${grays.g5}`
     }
 }
 

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { Meta, StoryFn } from '@storybook/react'
 import Chip from '.'
 import Avatar from '@/core/data-display/avatar'
-import FaceIcon from '@material-ui/icons/Face'
+import { Face } from '../../../icons'
 
 export default {
     title: 'DataDisplay/Chip',
@@ -37,7 +37,7 @@ WithIconAvatar.args = {
     ...commonArgs,
     avatar: (
         <Avatar>
-            <FaceIcon />
+            <Face />
         </Avatar>
     )
 }

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

@@ -1,9 +1,11 @@
 import React from 'react'
 import IconButton from '@/core/inputs/icon-button'
-import FirstPageIcon from '@material-ui/icons/FirstPage'
-import LastPageIcon from '@material-ui/icons/LastPage'
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
+import {
+    FirstPage,
+    LastPage,
+    KeyboardArrowLeft,
+    KeyboardArrowRight
+} from '../../../icons'
 
 interface DataTablePaginationActionsProps {
     count: number
@@ -68,7 +70,7 @@ export const makeDataTablePaginationActions =
                         onClick={handleFirstPageButtonClick}
                         disabled={page === 0 || clickable}
                         aria-label='first page'>
-                        <FirstPageIcon />
+                        <FirstPage />
                     </IconButton>
                 )}
                 <IconButton
@@ -88,7 +90,7 @@ export const makeDataTablePaginationActions =
                         onClick={handleLastPageButtonClick}
                         disabled={page >= totalPages || clickable}
                         aria-label='last page'>
-                        <LastPageIcon />
+                        <LastPage />
                     </IconButton>
                 )}
             </div>

src/core/data-display/data-table/data-table-query-paginated.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable max-lines */
 import { TableCell, TableRow, Typography } from '@material-ui/core'
-import { Skeleton } from '@material-ui/lab'
+import { Skeleton } from '@mui/material'
 import { Meta } from '@storybook/react'
 import format from 'date-fns/format'
 import React, { ReactNode, useMemo, useRef, useState } from 'react'
@@ -315,7 +315,7 @@
 
     const LoadNode: React.ReactNode = useMemo(
         () => generateSkeleton(size, newData),
         [size]
     )
 
     type Data = {

src/core/data-display/editable-table/index.tsx

@@ -32,7 +32,6 @@ import AutoComplete from '@/core/inputs/auto-complete'
 import ListItem from '@/core/data-display/list-item'
 import TextField from '@/core/inputs/text-field'
 import MaskField from '@/core/inputs/mask-field'
-import { DARK, GREY } from '@/colors'
 import { getLocalization } from '@/lib/localization'
 
 export interface EditableTableProps<T extends object> {
@@ -99,6 +98,9 @@ export interface EditableTableProps<T extends object> {
 
 export type TSuggestion = { label: string; value: string }
 
+export const DARK = 'rgba(189,189,189,0)'
+export const GREY = 'rgba(189,189,189,1)'
+
 const AddRowButton = styled.div`
     display: flex;
     align-items: center;

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

@@ -3,7 +3,7 @@
 exports[`Line should match snapshot 1`] = `
 <div>
   <div
-    style="flex: 1; border: 1px solid #e5e5e5;"
+    style="flex: 1; border: 1px solid #e0e0e0;"
   />
 </div>
 `;

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

@@ -1,6 +1,8 @@
 import React from 'react'
-import { background, primary as primaryColor } from '@/colors'
 import { DefaultProps } from '../../types'
+import { theme } from '@/theme'
+
+const { grays, secondary } = theme.colors
 
 export interface LineProps extends DefaultProps {
     /**
@@ -22,9 +24,7 @@ export const Line = ({
             flex: 1,
             padding,
             margin,
-            border: `1px solid ${
-                primary ? primaryColor.normal : background.normal
-            }`,
+            border: `1px solid ${primary ? secondary.light : grays.g6}`,
             ...style
         }}
         {...otherProps}

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

@@ -1,7 +1,9 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import Line from '.'
-import { background, primary as primaryColor } from '@/colors'
+import { theme } from '@/theme'
+
+const { grays, secondary } = theme.colors
 
 describe('Line', () => {
     it('should render closed', () => {
@@ -30,7 +32,7 @@ describe('Line', () => {
         expect(element).toHaveProperty('style.padding', '5px')
         expect(element).toHaveProperty(
             'style.border',
-            `1px solid ${background.normal.toLowerCase()}`
+            `1px solid ${grays.g6.toLowerCase()}`
         )
     })
 
@@ -41,7 +43,7 @@ describe('Line', () => {
 
         expect(element).toHaveProperty(
             'style.border',
-            `1px solid ${primaryColor.normal}`
+            `1px solid ${secondary.light.toLowerCase()}`
         )
     })
 

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { Meta, StoryFn } from '@storybook/react'
 import List from '.'
 import ListItem from '@/core/data-display/list-item'
-import IconBackup from '@material-ui/icons/Backup'
+import { Backup } from '../../../icons'
 import Avatar from '../avatar'
 
 export default {
@@ -34,14 +34,14 @@ WithIcons.args = {
     title: 'My beautiful list"',
     children: (
         <>
-            <ListItem icon={<IconBackup />} title='Item 1' />
-            <ListItem icon={<IconBackup />} title='Item 2' />
-            <ListItem icon={<IconBackup />} title='Item 3' />
-            <ListItem icon={<IconBackup />} title='Item 4' />
-            <ListItem icon={<IconBackup />} title='Item 5' />
-            <ListItem icon={<IconBackup />} title='Item 6' />
-            <ListItem icon={<IconBackup />} title='Item 7' />
-            <ListItem icon={<IconBackup />} title='Item 8' />
+            <ListItem icon={<Backup />} title='Item 1' />
+            <ListItem icon={<Backup />} title='Item 2' />
+            <ListItem icon={<Backup />} title='Item 3' />
+            <ListItem icon={<Backup />} title='Item 4' />
+            <ListItem icon={<Backup />} title='Item 5' />
+            <ListItem icon={<Backup />} title='Item 6' />
+            <ListItem icon={<Backup />} title='Item 7' />
+            <ListItem icon={<Backup />} title='Item 8' />
         </>
     )
 }