diff --git a/.babelrc.js b/.babelrc.js index ac195415..cfab5c44 100644 --- a/.babelrc.js +++ b/.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', diff --git a/README.md b/README.md index 26350539..9977d7e6 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@
React UI based on the
-`@material-ui/core` and `@mui/material`
+`@mui/material`
toolkit for the web. [![npm package](https://img.shields.io/npm/v/flipper-ui/latest.svg)](https://www.npmjs.com/package/flipper-ui) diff --git a/jest.config.js b/jest.config.js index 73f1b4d8..99c9fe26 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,9 @@ module.exports = { '/src/core/**/*.(ts|tsx)', '!/src/core/data-display/data-table/*.(ts|tsx)', '!/src/core/feedback/dialog-v2/index.ts', - '!/src/core/navigation/breadcrumbs/index.tsx' + '!/src/core/navigation/breadcrumbs/index.tsx', + '!/src/core/inputs/select/index.tsx', + '!/src/core/inputs/date-time/index.tsx' ], transform: { '.+\\.(ts|tsx)$': 'ts-jest' diff --git a/package.json b/package.json index 3f9773d3..80480ae7 100644 --- a/package.json +++ b/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": [ diff --git a/src/core/data-display/actions/__snapshots__/actions.spec.tsx.snap b/src/core/data-display/actions/__snapshots__/actions.spec.tsx.snap index 63f801fa..e345d947 100644 --- a/src/core/data-display/actions/__snapshots__/actions.spec.tsx.snap +++ b/src/core/data-display/actions/__snapshots__/actions.spec.tsx.snap @@ -7,37 +7,31 @@ exports[`Actions should match snapshot 1`] = ` class="sc-aYaIB ivIxy" >
diff --git a/src/core/data-display/actions/actions.stories.tsx b/src/core/data-display/actions/actions.stories.tsx index 674b0aea..439313f7 100644 --- a/src/core/data-display/actions/actions.stories.tsx +++ b/src/core/data-display/actions/actions.stories.tsx @@ -53,11 +53,20 @@ const meta: Meta = { 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: { diff --git a/src/core/data-display/actions/index.tsx b/src/core/data-display/actions/index.tsx index 19f1e077..0e3db6ed 100644 --- a/src/core/data-display/actions/index.tsx +++ b/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')) diff --git a/src/core/data-display/advertise/__snapshots__/advertise.spec.tsx.snap b/src/core/data-display/advertise/__snapshots__/advertise.spec.tsx.snap index 0ec4c4af..8ae83b31 100644 --- a/src/core/data-display/advertise/__snapshots__/advertise.spec.tsx.snap +++ b/src/core/data-display/advertise/__snapshots__/advertise.spec.tsx.snap @@ -3,18 +3,18 @@ exports[`Advertise should match snapshot 1`] = `

comment

author diff --git a/src/core/data-display/advertise/index.tsx b/src/core/data-display/advertise/index.tsx index c429a688..ae7a00d8 100644 --- a/src/core/data-display/advertise/index.tsx +++ b/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) => ( - + {author} - + ) export default Advertise diff --git a/src/core/data-display/advertise/styles.ts b/src/core/data-display/advertise/styles.ts index 8d87f77b..70a5f171 100644 --- a/src/core/data-display/advertise/styles.ts +++ b/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; ` diff --git a/src/core/data-display/avatar/index.tsx b/src/core/data-display/avatar/index.tsx index 9d437d50..74483f41 100644 --- a/src/core/data-display/avatar/index.tsx +++ b/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 diff --git a/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap b/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap index 061287a7..28e63af2 100644 --- a/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap +++ b/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap @@ -3,11 +3,11 @@ exports[`Badge should match snapshot 1`] = `
Badge 2 diff --git a/src/core/data-display/badge/badge.stories.tsx b/src/core/data-display/badge/badge.stories.tsx index e3b6a928..b61dff09 100644 --- a/src/core/data-display/badge/badge.stories.tsx +++ b/src/core/data-display/badge/badge.stories.tsx @@ -1,45 +1,91 @@ import React from 'react' -import type { Meta, StoryFn } from '@storybook/react' -import Button from '@/core/inputs/button' +import type { Meta, StoryObj } from '@storybook/react' import Badge from '.' -export default { +const meta: Meta = { title: 'DataDisplay/Badge', component: Badge, argTypes: { - backgroundColor: { control: 'color' }, - counter: { control: 'number' } + counter: { + control: 'number', + description: + 'The counter number. If is set to "0", the badge doesn"t render' + }, + color: { + options: [ + 'default', + 'primary', + 'secondary', + 'error', + 'info', + 'success', + 'warning' + ], + control: { type: 'radio' }, + description: + 'The badge color. ' + + 'Must be `"default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"`' + + 'If not set, the default is "default"' + }, + vertical: { + options: ['top', 'bottom'], + control: { type: 'radio' }, + description: + 'The badge vertical position. ' + + 'Must be `"top" | "bottom"`' + + 'If not set, the default is "top"' + }, + horizontal: { + options: ['right', 'left'], + control: { type: 'radio' }, + description: + 'The badge overlap. ' + + 'Must be `"right" | "left"`' + + 'If not set, the default is "right"' + }, + variant: { + options: ['standard', 'dot'], + control: { type: 'radio' }, + description: + 'The badge variant. ' + + 'Must be `"standard" | "dot"`' + + 'If not set, the default is "standard"' + }, + overlap: { + options: ['rectangular', 'circular'], + control: { type: 'radio' }, + description: + 'The badge overlap. ' + + 'Must be `"rectangular" | "circular"`' + + 'If not set, the default is "rectangular"' + }, + margin: { + control: 'text', + description: 'The badge margin' + }, + padding: { + control: 'text', + description: 'The badge padding' + } } -} as Meta - -const Template: StoryFn = args => - -export const Default = Template.bind({}) -Default.args = { - counter: 2, - children: 'Badge' } -export const Primary = Template.bind({}) -Primary.args = { - counter: 2, - color: 'primary', - children: 'Badge' -} +export default meta -export const Secondary = Template.bind({}) -Secondary.args = { - counter: 150, - color: 'secondary', - children: ( - - ) -} +type Story = StoryObj -export const WithDot = Template.bind({}) -WithDot.args = { - counter: 1, - variant: 'dot', - color: 'primary', - children: 'Badge' +export const badge: Story = { + render: ({ ...args }) => { + return Badge + }, + args: { + counter: 10, + color: 'primary', + vertical: 'top', + horizontal: 'right', + variant: 'standard', + overlap: 'rectangular', + margin: '', + padding: '' + } } diff --git a/src/core/data-display/badge/index.tsx b/src/core/data-display/badge/index.tsx index fb7081e6..d0318229 100644 --- a/src/core/data-display/badge/index.tsx +++ b/src/core/data-display/badge/index.tsx @@ -1,48 +1,46 @@ import React from 'react' -import type { ReactNode } from 'react' -import { Badge as MuiBadge } from '@material-ui/core' -import { makeStyles } from '@material-ui/core/styles' +import MuiBadge from '@mui/material/Badge' import type { DefaultProps } from '../../types' -import type { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge' +import type { BadgeProps } from '@mui/material/Badge' -export interface BadgeProps extends DefaultProps, MuiBadgeProps { - children: ReactNode +export interface IBadge extends DefaultProps, BadgeProps { counter: number | string - position?: { - top?: number - bottom?: number - left?: number - right?: number - } + overlap?: 'rectangular' | 'circular' + vertical?: 'top' | 'bottom' + horizontal?: 'right' | 'left' + color?: + | 'default' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning' } -const useBadgeStyles = (position: BadgeProps['position']) => { - const getStyles = makeStyles({ - badge: { - ...position - } - }) - - return getStyles() -} - -const Badge = (props: BadgeProps) => { +const Badge = (props: IBadge) => { const { children, + color, + overlap, counter, - padding, + vertical = 'top', + horizontal = 'right', margin, - position, + padding, style = {}, ...otherProps } = props - const classes = useBadgeStyles(position) - return ( {children} diff --git a/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap b/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap index 6cfa127a..a7eb0071 100644 --- a/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap +++ b/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap @@ -3,13 +3,14 @@ exports[`Chapter should match snapshot 1`] = `

Chapter

diff --git a/src/core/data-display/chapter/index.tsx b/src/core/data-display/chapter/index.tsx index 3a12cab1..80337c3e 100644 --- a/src/core/data-display/chapter/index.tsx +++ b/src/core/data-display/chapter/index.tsx @@ -1,14 +1,26 @@ import React from 'react' import type { CSSProperties, ReactNode } from 'react' import type { DefaultProps } from '../../types' -import type { TypographyProps } from '@material-ui/core/Typography' import Typography from '@/core/data-display/typography' -import { Container, StyledLine } from './styles' +import { Container, Line } from './styles' export interface LineProps extends DefaultProps { primary?: boolean width?: string - variant?: TypographyProps['variant'] + variant?: + | 'h1' + | 'h2' + | 'h3' + | 'h4' + | 'h5' + | 'h6' + | 'subtitle1' + | 'subtitle2' + | 'body1' + | 'body2' + | 'caption' + | 'button' + | 'overline' childrenStyle?: CSSProperties children?: ReactNode 'data-testid'?: string @@ -26,17 +38,14 @@ const Chapter = ({ }: LineProps) => { return ( - - + + {children} - + ) } diff --git a/src/core/data-display/chapter/styles.ts b/src/core/data-display/chapter/styles.ts index 3957ce8b..76015698 100644 --- a/src/core/data-display/chapter/styles.ts +++ b/src/core/data-display/chapter/styles.ts @@ -4,7 +4,7 @@ import { theme } from '@/theme' const { grays } = theme.colors -export const StyledLine = styled.div` +export const Line = styled.div` height: 1px; flex: 1; min-height: 0.75px; @@ -15,12 +15,4 @@ export const StyledLine = styled.div` export const Container = styled.div` display: flex; - - & div:first-child { - margin-right: 10px; - } - - & div:last-child { - margin-left: 10px; - } ` diff --git a/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap b/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap index 4e03947d..ca0cce04 100644 --- a/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap +++ b/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap @@ -3,10 +3,10 @@ exports[`Chip should match snapshot 1`] = `
chip-label diff --git a/src/core/data-display/chip/chip.stories.tsx b/src/core/data-display/chip/chip.stories.tsx index dcee7f20..afa74b32 100644 --- a/src/core/data-display/chip/chip.stories.tsx +++ b/src/core/data-display/chip/chip.stories.tsx @@ -23,7 +23,8 @@ Default.args = { export const Squared = Template.bind({}) Squared.args = { ...commonArgs, - square: true + square: true, + avatar: } export const WithInitialsAvatar = Template.bind({}) diff --git a/src/core/data-display/chip/index.tsx b/src/core/data-display/chip/index.tsx index c773e986..981067e3 100644 --- a/src/core/data-display/chip/index.tsx +++ b/src/core/data-display/chip/index.tsx @@ -1,23 +1,37 @@ import React from 'react' -import { Chip as MuiChip } from '@material-ui/core' -import { makeStyles } from '@material-ui/core/styles' +import type { MouseEventHandler, ReactElement, ReactNode } from 'react' +import MuiChip from '@mui/material/Chip' +import { makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' -import type { ChipProps as MuiChipProps } from '@material-ui/core' +import type { ChipProps } from '@mui/material/Chip' -export interface IChipProps - extends MuiChipProps, - Omit { +export interface IChipProps extends ChipProps, Omit { + label?: ReactNode + icon?: ReactElement + avatar?: ReactElement square?: boolean + color?: + | 'default' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning' + size?: 'small' | 'medium' + variant?: 'outlined' | 'filled' + onClick?: MouseEventHandler | undefined + onDelete?: ((event: unknown) => void) | undefined } -const useStyles = makeStyles({ +const useStyles = makeStyles(() => ({ root: { borderRadius: '4px' }, avatar: { borderRadius: '2px' } -}) +})) const Chip = ({ square, diff --git a/src/core/data-display/data-table/data-table-action.tsx b/src/core/data-display/data-table/data-table-action.tsx index 0b6c108e..46d283bd 100644 --- a/src/core/data-display/data-table/data-table-action.tsx +++ b/src/core/data-display/data-table/data-table-action.tsx @@ -1,6 +1,6 @@ import React from 'react' import type { ReactNode } from 'react' -import IconButton from '@material-ui/core/IconButton' +import MuiIconButton from '@mui/material/IconButton' export type DataTableActionProps = { label: string @@ -15,7 +15,11 @@ export const DataTableAction = ({ color = 'default', onClick }: DataTableActionProps) => ( - + {children} - + ) diff --git a/src/core/data-display/data-table/data-table-field.tsx b/src/core/data-display/data-table/data-table-field.tsx index 381d48eb..13306552 100644 --- a/src/core/data-display/data-table/data-table-field.tsx +++ b/src/core/data-display/data-table/data-table-field.tsx @@ -1,6 +1,10 @@ import React from 'react' import type { ChangeEvent, Dispatch, MouseEvent, SetStateAction } from 'react' -import { Checkbox, Table, TableBody, TableCell, TableHead } from '@mui/material' +import MuiCheckbox from '@mui/material/Checkbox' +import MuiTable from '@mui/material/Table' +import MuiTableBody from '@mui/material/TableBody' +import MuiTableCell from '@mui/material/TableCell' +import MuiTableHead from '@mui/material/TableHead' import TextField from '@/core/inputs/text-field' import { FieldWrapper, RowTable, TableCellRows } from './styles' @@ -107,10 +111,7 @@ export const DataTableField = >( (event.target as HTMLElement).closest('input[type="checkbox"]') !== null - if ( - !isCheckboxClick && - (!checkboxProps?.checkRow || !checkboxProps.checkRow[index]) - ) { + if (!isCheckboxClick && !checkboxProps?.checkRow?.[index]) { handleSelect(index) } } @@ -122,8 +123,7 @@ export const DataTableField = >( return ( {column.editable && - checkboxProps?.checkRow && - checkboxProps.checkRow[index] ? ( + checkboxProps?.checkRow?.[index] ? ( >( handleTableRow(event, index)}> {checkbox && ( - - + >( } onChange={() => handleSelect(index)} /> - + )} {columns} @@ -194,11 +192,11 @@ export const DataTableField = >( }) return ( - - + + {checkbox && ( - - + >( } }} /> - + )} {header.map((item, i) => ( - + {item.title} - + ))} - - {tableBody(rows, header)} -
+ + {tableBody(rows, header)} + ) } diff --git a/src/core/data-display/data-table/data-table-pagination-actions.tsx b/src/core/data-display/data-table/data-table-pagination-actions.tsx index 301e4afd..0de08604 100644 --- a/src/core/data-display/data-table/data-table-pagination-actions.tsx +++ b/src/core/data-display/data-table/data-table-pagination-actions.tsx @@ -6,7 +6,7 @@ import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material' -import IconButton from '@/core/inputs/icon-button' +import MuiIconButton from '@mui/material/IconButton' import { PaginationWrapper } from './styles' interface DataTablePaginationActionsProps { @@ -63,32 +63,32 @@ export const makeDataTablePaginationActions = return ( {showFirstButton && ( - - + )} - - - + = totalPages || clickable} aria-label='next page' onClick={handleNextButtonClick}> - + {showLastButton && ( - = totalPages || clickable} aria-label='last page' onClick={handleLastPageButtonClick}> - + )} ) diff --git a/src/core/data-display/data-table/data-table-query-paginated.stories.tsx b/src/core/data-display/data-table/data-table-query-paginated.stories.tsx index 5462c3ec..f0132e76 100644 --- a/src/core/data-display/data-table/data-table-query-paginated.stories.tsx +++ b/src/core/data-display/data-table/data-table-query-paginated.stories.tsx @@ -5,7 +5,6 @@ import type { ReactNode, SetStateAction } from 'react' -import { TableCell, TableRow, Typography } from '@material-ui/core' import { Cancel as CancelIcon, Check as CheckIcon, @@ -13,7 +12,10 @@ import { Edit as EditIcon, Save as SaveIcon } from '@mui/icons-material' -import { Skeleton } from '@mui/material' +import MuiSkeleton from '@mui/material/Skeleton' +import MuiTableCell from '@mui/material/TableCell' +import MuiTableRow from '@mui/material/TableRow' +import MuiTypography from '@mui/material/Typography' import format from 'date-fns/format' import type { ColumnSpec, DataTableController, Identifier } from './types' import type { Meta } from '@storybook/react' @@ -85,16 +87,16 @@ const generateSkeleton = ( for (let i = 0; i < size; i++) { const table = ( - + {columns.map(column => ( - - - + + ))} - + ) result.push(table) @@ -183,7 +185,7 @@ export const Empty = () => { boxSizing: 'border-box' }}>
- Empty DataTable + Empty DataTable
@@ -354,7 +356,9 @@ export const Crud = () => { padding: '16px', justifyContent: 'space-between' }}> - Confirm Delete "{data.product}"? + + Confirm Delete "{data.product}"? +
( const mode = rowState?.mode || RowMode.View return ( - ( onUpdate={setEditableRowState(row.id)} /> )} - + ) }), [ @@ -205,13 +205,13 @@ export const DataTableQueryPaginated = ( const columnsList = useMemo( () => columns.map(column => ( - {column.title} - + )), [columns] ) @@ -223,8 +223,8 @@ export const DataTableQueryPaginated = ( : perPage - currentRowsNumber const hiddenRowFiller = hiddenRowsNumber !== 0 && ( - - + ( `${hiddenRowHeight * hiddenRowsNumber}px` }} /> - + ) const rowsElements = ( @@ -265,23 +265,25 @@ export const DataTableQueryPaginated = ( ) return ( - - + + {!noHeader && ( - - {columnsList} - + + + {columnsList} + + )} - + {currentRowsNumber === 0 || !pagination.clickable ? componentForEmpty : rowsElements} {hiddenRowFiller} - + {!pagination.disabled && ( - - - + + ( ) }} /> - - + + )} -
- + + ) } diff --git a/src/core/data-display/data-table/data-table.spec.tsx b/src/core/data-display/data-table/data-table.spec.tsx index 2cfd04de..746cebc1 100644 --- a/src/core/data-display/data-table/data-table.spec.tsx +++ b/src/core/data-display/data-table/data-table.spec.tsx @@ -1,5 +1,4 @@ -import React from 'react' -import { act } from 'react-dom/test-utils' +import React, { act } from 'react' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import format from 'date-fns/format' diff --git a/src/core/data-display/data-table/data-table.tsx b/src/core/data-display/data-table/data-table.tsx index fad6f7ff..c9a562ae 100644 --- a/src/core/data-display/data-table/data-table.tsx +++ b/src/core/data-display/data-table/data-table.tsx @@ -7,16 +7,16 @@ import type { Dispatch, SetStateAction } from 'react' -import { Checkbox } from '@material-ui/core' -import Paper from '@material-ui/core/Paper' -import Table from '@material-ui/core/Table' -import TableBody from '@material-ui/core/TableBody' -import TableCell from '@material-ui/core/TableCell' -import TableContainer from '@material-ui/core/TableContainer' -import TableFooter from '@material-ui/core/TableFooter' -import TableHead from '@material-ui/core/TableHead' -import TablePagination from '@material-ui/core/TablePagination' -import TableRow from '@material-ui/core/TableRow' +import MuiCheckbox from '@mui/material/Checkbox' +import MuiPaper from '@mui/material/Paper' +import MuiTable from '@mui/material/Table' +import MuiTableBody from '@mui/material/TableBody' +import MuiTableCell from '@mui/material/TableCell' +import MuiTableContainer from '@mui/material/TableContainer' +import MuiTableFooter from '@mui/material/TableFooter' +import MuiTableHead from '@mui/material/TableHead' +import MuiTablePagination from '@mui/material/TablePagination' +import MuiTableRow from '@mui/material/TableRow' import { last } from 'ramda' import type { ColumnSpec, @@ -221,15 +221,14 @@ export const DataTable = ( const mode = rowState?.mode || primaryView return ( - onRowClick?.(event, row)}> {checkbox && ( - - + ( } }} /> - + )} {view ? ( view({ data: row }) @@ -263,7 +262,7 @@ export const DataTable = ( onUpdate={setEditableRowState(row.id)} /> )} - + ) }), [ @@ -284,13 +283,13 @@ export const DataTable = ( const columnsList = useMemo( () => columns.map(column => ( - {column.title} - + )), [columns] ) @@ -302,8 +301,8 @@ export const DataTable = ( : rowsPerPage - currentRowsNumber const hiddenRowFiller = hiddenRowsNumber !== 0 && ( - - + ( `${hiddenRowHeight * hiddenRowsNumber}px` }} /> - + ) const rowsElements = ( @@ -342,15 +341,14 @@ export const DataTable = ( rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage) return ( - - + + {!noHeader && ( - - + + {checkbox && ( - - + ( } }} /> - + )} {columnsList} - - + + )} - + {currentRowsNumber === 0 ? componentForEmpty : rowsElements} {hiddenRowFiller} {renderEmptyRows && emptyRows > 0 && ( - - - + + )} - + {!pagination.disabled && ( - - - + + ( setPage(0) }} /> - - + + )} -
- + + ) } diff --git a/src/core/data-display/data-table/rows.tsx b/src/core/data-display/data-table/rows.tsx index 66becc8b..01056db7 100644 --- a/src/core/data-display/data-table/rows.tsx +++ b/src/core/data-display/data-table/rows.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react' import type { ReactNode } from 'react' -import TableCell from '@material-ui/core/TableCell' -import TableRow from '@material-ui/core/TableRow' +import MuiTableCell from '@mui/material/TableCell' +import MuiTableRow from '@mui/material/TableRow' import type { ColumnSpec, Data, Errors, PartialData } from './types' import DateTime from '@/core/inputs/date-time' import MaskField from '@/core/inputs/mask-field' @@ -204,12 +204,12 @@ export const StatefulRow = ({ return ( <> {columns.map((column, i) => ( - {getCorrectViewMode(column, mode, isEditable(column))} - + ))} ) @@ -232,9 +232,9 @@ export const NewRow = ({ ) return ( - + {columns.map((column, i) => ( - @@ -247,8 +247,8 @@ export const NewRow = ({ true ) : renderViewMode(column, editableState)} - + ))} - + ) } diff --git a/src/core/data-display/data-table/use-paginated.ts b/src/core/data-display/data-table/use-paginated.ts index a76630aa..97251a43 100644 --- a/src/core/data-display/data-table/use-paginated.ts +++ b/src/core/data-display/data-table/use-paginated.ts @@ -19,23 +19,23 @@ interface IPaginated { totalItens: number } -export const generateRandomDate = (size: number): Data[] => { +export const generateRandomData = (size: number): Data[] => { const content: Array = [] for (let i = 0; i < size; i++) { content.push({ id: i, product: faker.vehicle.model(), - price: faker.datatype.float({ min: 0, max: 100000 }), - quantity: faker.datatype.number({ min: 0, max: 30 }), - date: faker.date.recent(2) + price: faker.number.float({ min: 0, max: 100000 }), + quantity: faker.number.int({ min: 1, max: 30 }), + date: faker.date.recent({ days: 5, refDate: new Date() }) }) } return content } -const mockData = generateRandomDate(35) +const mockData = generateRandomData(35) const INITIAL_STATE: IPaginated = { items: [], diff --git a/src/core/data-display/divider/__snapshots__/divider.spec.tsx.snap b/src/core/data-display/divider/__snapshots__/divider.spec.tsx.snap index d3db5585..029d3dbf 100644 --- a/src/core/data-display/divider/__snapshots__/divider.spec.tsx.snap +++ b/src/core/data-display/divider/__snapshots__/divider.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Divider should match snapshot 1`] = `
`; diff --git a/src/core/data-display/divider/index.tsx b/src/core/data-display/divider/index.tsx index 9d97c075..ebbb00c6 100644 --- a/src/core/data-display/divider/index.tsx +++ b/src/core/data-display/divider/index.tsx @@ -1,9 +1,9 @@ import React from 'react' -import { Divider as MuiDivider } from '@material-ui/core' +import MuiDivider from '@mui/material/Divider' import type { DefaultProps } from '../../types' -import type { DividerProps as MuiDividerProps } from '@material-ui/core' +import type { DividerProps } from '@mui/material/Divider' -export interface DividerProps extends DefaultProps, MuiDividerProps { +export interface IDividerProps extends DefaultProps, DividerProps { 'data-testid'?: string } @@ -12,7 +12,7 @@ const Divider = ({ padding, style = {}, ...otherProps -}: DividerProps) => ( +}: IDividerProps) => ( ) diff --git a/src/core/data-display/fab-v2/__snapshots__/fab.spec.tsx.snap b/src/core/data-display/fab-v2/__snapshots__/fab.spec.tsx.snap index f7745c9b..b8715b24 100644 --- a/src/core/data-display/fab-v2/__snapshots__/fab.spec.tsx.snap +++ b/src/core/data-display/fab-v2/__snapshots__/fab.spec.tsx.snap @@ -3,35 +3,32 @@ exports[`Fab should match snapshot 1`] = `
diff --git a/src/core/data-display/fab-v2/index.tsx b/src/core/data-display/fab-v2/index.tsx index b7b94f9f..a5ae33c7 100644 --- a/src/core/data-display/fab-v2/index.tsx +++ b/src/core/data-display/fab-v2/index.tsx @@ -1,10 +1,10 @@ import React from 'react' import type { MouseEvent, CSSProperties } from 'react' -import type { FabProps } from '@/core/data-display/fab' +import type { IFabProps } from '@/core/data-display/fab' import Fab from '@/core/data-display/fab' import Tooltip from '@/core/feedback/tooltip' -export interface IProps extends FabProps { +export interface IProps extends IFabProps { mini?: boolean className?: string name?: string diff --git a/src/core/data-display/fab/__snapshots__/fab.spec.tsx.snap b/src/core/data-display/fab/__snapshots__/fab.spec.tsx.snap index b5afea4c..45ec646c 100644 --- a/src/core/data-display/fab/__snapshots__/fab.spec.tsx.snap +++ b/src/core/data-display/fab/__snapshots__/fab.spec.tsx.snap @@ -3,18 +3,14 @@ exports[`Fab should match snapshot 1`] = `
diff --git a/src/core/data-display/fab/index.tsx b/src/core/data-display/fab/index.tsx index 99754bd5..b09109f9 100644 --- a/src/core/data-display/fab/index.tsx +++ b/src/core/data-display/fab/index.tsx @@ -1,24 +1,45 @@ import React from 'react' import type { MouseEvent, ReactElement } from 'react' -import { Fab as MuiFab } from '@material-ui/core' +import MuiFab from '@mui/material/Fab' +import { makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' -import type { FabProps as MuiFabProps } from '@material-ui/core' +import type { FabProps } from '@mui/material/Fab' -export interface FabProps extends DefaultProps, MuiFabProps { +export interface IFabProps extends DefaultProps, FabProps { onClick?: (event?: MouseEvent) => void children: ReactElement> } +const useStyles = makeStyles(() => ({ + root: { + '&:hover': { + backgroundColor: '#d5d5d5' + } + } +})) + const Fab = ({ children, margin, padding, style = {}, ...otherProps -}: FabProps) => ( - - {children} - -) +}: IFabProps) => { + const classes = useStyles() + + return ( + + {children} + + ) +} export default Fab diff --git a/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap index 9df0abc7..abd7e8f7 100644 --- a/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap +++ b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap @@ -3,20 +3,19 @@ exports[`ListItem should match snapshot 1`] = `
Avatar
Title

Subtitle

Action
diff --git a/src/core/data-display/list-item/index.tsx b/src/core/data-display/list-item/index.tsx index f4fc5cbc..fdfbd7cb 100644 --- a/src/core/data-display/list-item/index.tsx +++ b/src/core/data-display/list-item/index.tsx @@ -1,16 +1,13 @@ import React from 'react' import type { MouseEvent } from 'react' -import { - ListItem as MuiListItem, - ListItemAvatar as MuiListItemAvatar, - ListItemIcon as MuiListItemIcon, - ListItemSecondaryAction as MuiListItemSecondaryAction, - ListItemText as MuiListItemText, - MenuItem -} from '@material-ui/core' -import { makeStyles } from '@material-ui/core/styles' +import MuiListItemAvatar from '@mui/material/ListItemAvatar' +import MuiListItemButton from '@mui/material/ListItemButton' +import MuiListItemIcon from '@mui/material/ListItemIcon' +import MuiListItemSecondaryAction from '@mui/material/ListItemSecondaryAction' +import MuiListItemText from '@mui/material/ListItemText' +import MuiMenuItem from '@mui/material/MenuItem' +import { makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' -import type { Theme } from '@material-ui/core' export interface ListItemProps extends Omit { avatar?: JSX.Element @@ -24,13 +21,10 @@ export interface ListItemProps extends Omit { onClick?: (event?: MouseEvent) => void } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(() => ({ root: { - ...theme.typography.body2, - [theme.breakpoints.up('sm')]: { - minHeight: '48px' - }, - color: 'inherit' + color: 'inherit', + minHeight: '48px' }, default: { color: 'inherit' @@ -59,11 +53,11 @@ const ListItem = (props: ListItemProps) => { )} {(props.title || props.subtitle) && ( )} @@ -77,30 +71,28 @@ const ListItem = (props: ListItemProps) => { } return props.children ? ( - {props.children} - + ) : ( - {renderCustomItem()} - + ) } diff --git a/src/core/data-display/list/__snapshots__/list.spec.tsx.snap b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap index ce19961d..ec8cc953 100644 --- a/src/core/data-display/list/__snapshots__/list.spec.tsx.snap +++ b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap @@ -3,40 +3,37 @@ exports[`List should match snapshot 1`] = `
diff --git a/src/core/data-display/list/index.tsx b/src/core/data-display/list/index.tsx index 62ef5789..ea19b64c 100644 --- a/src/core/data-display/list/index.tsx +++ b/src/core/data-display/list/index.tsx @@ -1,35 +1,26 @@ import React from 'react' -import { - List as MuiList, - ListSubheader as MuiListHeader -} from '@material-ui/core' -import { makeStyles, createStyles } from '@material-ui/core/styles' +import MuiList from '@mui/material/List' +import MuiListHeader from '@mui/material/ListSubheader' +import { createStyles, makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' -import type { Theme } from '@material-ui/core/styles' +import { theme } from '@/theme' + +const { app } = theme.colors export interface ListProps extends DefaultProps { title?: string dense?: boolean - color?: 'primary' | 'secondary' | 'default' | 'inherit' + color?: 'default' | 'inherit' } -const useStyles = makeStyles((theme: Theme) => +const useStyles = makeStyles(() => createStyles({ default: { - backgroundColor: theme.palette.background.default, - color: theme.palette.text.primary + backgroundColor: app.background.main }, inherit: { backgroundColor: 'inherit', color: 'inherit' - }, - primary: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText - }, - secondary: { - backgroundColor: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText } }) ) @@ -39,9 +30,9 @@ const List = ({ padding, margin, style = {}, - children, - className, color = 'default', + className, + children, ...otherProps }: ListProps) => { const classes = useStyles() @@ -49,11 +40,11 @@ const List = ({ return ( {title} - ) : undefined + ) } className={`${classes[color]} ${className}`} style={{ padding, margin, ...style }} diff --git a/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap index a2755777..8a94ff5c 100644 --- a/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap +++ b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`MenuItem should match snapshot 1`] = `
`; diff --git a/src/core/feedback/fade/fade.spec.tsx b/src/core/feedback/fade/fade.spec.tsx index 6c2bbc4f..ae4f15ad 100644 --- a/src/core/feedback/fade/fade.spec.tsx +++ b/src/core/feedback/fade/fade.spec.tsx @@ -9,10 +9,12 @@ describe('Fade', () => { Fade Text ) + const element = screen.getByText('Fade Text') + const parentDiv = element.parentElement - expect(element).toHaveProperty('style.visibility', 'hidden') - expect(element).toHaveProperty('style.opacity', '0') + expect(parentDiv).toHaveProperty('style.visibility', 'hidden') + expect(parentDiv).toHaveProperty('style.opacity', '0') }) it('should render opened', () => { @@ -23,9 +25,10 @@ describe('Fade', () => { ) const element = screen.getByText('Fade Text') + const parentDiv = element.parentElement - expect(element).not.toHaveProperty('style.visibility', 'hidden') - expect(element).toHaveProperty('style.opacity', '1') + expect(parentDiv).not.toHaveProperty('style.visibility', 'hidden') + expect(parentDiv).toHaveProperty('style.opacity', '1') }) it('should match snapshot', () => { diff --git a/src/core/feedback/fade/fade.stories.tsx b/src/core/feedback/fade/fade.stories.tsx index e32d5a4b..40e04247 100644 --- a/src/core/feedback/fade/fade.stories.tsx +++ b/src/core/feedback/fade/fade.stories.tsx @@ -44,7 +44,7 @@ export const fade: Story = { ) }, args: { - in: false, + in: true, timeout: { enter: 200, exit: 500 }, margin: '', padding: '', diff --git a/src/core/feedback/fade/index.tsx b/src/core/feedback/fade/index.tsx index 4b56b625..1157b705 100644 --- a/src/core/feedback/fade/index.tsx +++ b/src/core/feedback/fade/index.tsx @@ -1,9 +1,10 @@ import React from 'react' import type { ReactElement } from 'react' -import { Fade as MuiFade } from '@material-ui/core' +import MuiFade from '@mui/material/Fade' import type { DefaultProps } from '../../types' +import type { FadeProps } from '@mui/material/Fade' -export interface FadeProps extends DefaultProps { +export interface IFadeProps extends DefaultProps, FadeProps { in: boolean timeout?: number | { enter?: number; exit?: number } children: ReactElement> @@ -15,9 +16,9 @@ const Fade = ({ margin, style = {}, ...otherProps -}: FadeProps) => ( +}: IFadeProps) => ( - {children} +
{children}
 ) diff --git a/src/core/feedback/grow/__snapshots__/grow.spec.tsx.snap b/src/core/feedback/grow/__snapshots__/grow.spec.tsx.snap index 7be9700c..1eaedffc 100644 --- a/src/core/feedback/grow/__snapshots__/grow.spec.tsx.snap +++ b/src/core/feedback/grow/__snapshots__/grow.spec.tsx.snap @@ -2,20 +2,24 @@ exports[`Grow should match snapshot 1`] = `
- - Grow Text - + + Grow Text + +
`; exports[`Grow should match snapshot 2`] = `
- - Grow Text - + + Grow Text + +
`; diff --git a/src/core/feedback/grow/grow.spec.tsx b/src/core/feedback/grow/grow.spec.tsx index 92f1b33f..23aaf85b 100644 --- a/src/core/feedback/grow/grow.spec.tsx +++ b/src/core/feedback/grow/grow.spec.tsx @@ -10,9 +10,10 @@ describe('Grow', () => { ) const element = screen.getByText('Grow Text') + const parentDiv = element.parentElement - expect(element).toHaveProperty('style.visibility', 'hidden') - expect(element).toHaveProperty('style.opacity', '0') + expect(parentDiv).toHaveProperty('style.visibility', 'hidden') + expect(parentDiv).toHaveProperty('style.opacity', '0') }) it('should render opened', () => { @@ -23,9 +24,10 @@ describe('Grow', () => { ) const element = screen.getByText('Grow Text') + const parentDiv = element.parentElement - expect(element).not.toHaveProperty('style.visibility', 'hidden') - expect(element).toHaveProperty('style.opacity', '1') + expect(parentDiv).not.toHaveProperty('style.visibility', 'hidden') + expect(parentDiv).toHaveProperty('style.opacity', '1') }) it('should match snapshot', () => { diff --git a/src/core/feedback/grow/grow.stories.tsx b/src/core/feedback/grow/grow.stories.tsx index 6fc832e9..1db305f6 100644 --- a/src/core/feedback/grow/grow.stories.tsx +++ b/src/core/feedback/grow/grow.stories.tsx @@ -1,42 +1,53 @@ -import React, { useState } from 'react' -import type { Meta } from '@storybook/react' -import Button from '@/core/inputs/button' +import React from 'react' +import type { Meta, StoryObj } from '@storybook/react' import Grow from '.' -export default { +const meta: Meta = { title: 'Feedback/Grow', component: Grow, argTypes: { - backgroundColor: { control: 'color' } + in: { + control: 'boolean', + description: 'To open or close the grow.' + }, + timeout: { + control: 'object', + description: + 'The grow timeout. ' + + 'Can be a `number`, `auto`, or set the object individually `{ enter: 200, exit: 500 }`.' + }, + margin: { + control: 'text', + description: 'The grow margin.' + }, + padding: { + control: 'text', + description: 'The grow padding.' + }, + style: { + control: 'object', + description: 'The grow style.' + } } } as Meta -export const Default = () => { - const [open, setOpen] = useState(true) - const [label, setLabel] = useState('Close') +export default meta - function handleClick() { - setOpen(!open) +type Story = StoryObj - if (label === 'Close') { - setLabel('Open') - } else { - setLabel('Close') - } - } - - return ( - <> - - +export const grow: Story = { + render: ({ ...args }) => { + return ( + I am open for discussions - - ) + ) + }, + args: { + in: true, + timeout: { enter: 200, exit: 500 }, + margin: '', + padding: '', + style: {} + } } diff --git a/src/core/feedback/grow/index.tsx b/src/core/feedback/grow/index.tsx index 4e6cadf6..c4387b8d 100644 --- a/src/core/feedback/grow/index.tsx +++ b/src/core/feedback/grow/index.tsx @@ -1,12 +1,12 @@ import React from 'react' import type { ReactElement } from 'react' -import { Grow as MuiGrow } from '@material-ui/core' +import MuiGrow from '@mui/material/Grow' import type { DefaultProps } from '../../types' export interface GrowProps extends DefaultProps { in: boolean timeout?: number | { enter?: number; exit?: number } | 'auto' - children?: ReactElement> + children: ReactElement> } const Grow = ({ @@ -17,7 +17,7 @@ const Grow = ({ ...otherProps }: GrowProps) => ( - {children} +
{children}
 ) diff --git a/src/core/feedback/loading/__snapshots__/loading.spec.tsx.snap b/src/core/feedback/loading/__snapshots__/loading.spec.tsx.snap index 1c8b3f52..aaa5bdc7 100644 --- a/src/core/feedback/loading/__snapshots__/loading.spec.tsx.snap +++ b/src/core/feedback/loading/__snapshots__/loading.spec.tsx.snap @@ -7,17 +7,17 @@ exports[`Loading should match snapshot 1`] = ` data-testid="loading-component" style="margin: 48px; padding: 24px;" > -
-
+
`; diff --git a/src/core/feedback/loading/index.tsx b/src/core/feedback/loading/index.tsx index 1b82fcda..be3cc7e5 100644 --- a/src/core/feedback/loading/index.tsx +++ b/src/core/feedback/loading/index.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import React from 'react' import Progress from '../progress' import { LoadingContainer } from './styles' @@ -11,20 +11,12 @@ export interface IProps { const Loading = (props: IProps) => { const { margin = 48, padding = 24, size = 72 } = props - const renderLoading = useMemo( - () => , - [size] - ) - - return useMemo( - () => ( - - {renderLoading} - - ), - [margin, padding, renderLoading] + return ( + + + ) } diff --git a/src/core/feedback/nothing-found/__snapshots__/nothing-found.spec.tsx.snap b/src/core/feedback/nothing-found/__snapshots__/nothing-found.spec.tsx.snap index 154bcfd0..c40f7a30 100644 --- a/src/core/feedback/nothing-found/__snapshots__/nothing-found.spec.tsx.snap +++ b/src/core/feedback/nothing-found/__snapshots__/nothing-found.spec.tsx.snap @@ -3,8 +3,7 @@ exports[`NothingFound should match snapshot 1`] = `
Não há nada aqui. Clique em "Adicionar" para cadastrar um item.
diff --git a/src/core/feedback/nothing-found/index.tsx b/src/core/feedback/nothing-found/index.tsx index 78cb4848..512286fb 100644 --- a/src/core/feedback/nothing-found/index.tsx +++ b/src/core/feedback/nothing-found/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import type { TypographyProps } from '@material-ui/core' +import type { TypographyProps } from '@mui/material/Typography' import { TextTypography } from './styles' export interface IProps extends TypographyProps { diff --git a/src/core/feedback/nothing-found/nothing-found.stories.tsx b/src/core/feedback/nothing-found/nothing-found.stories.tsx index 625adadc..a0b68701 100644 --- a/src/core/feedback/nothing-found/nothing-found.stories.tsx +++ b/src/core/feedback/nothing-found/nothing-found.stories.tsx @@ -35,7 +35,7 @@ export const nothingFound: Story = { }, args: { show: true, - customText: '', + customText: 'Ops! Não foi encontrado nada.', buttonLabel: '', searchText: '', readonly: false diff --git a/src/core/feedback/nothing-found/styles.ts b/src/core/feedback/nothing-found/styles.ts index 6fcbc85d..53d2a7a0 100644 --- a/src/core/feedback/nothing-found/styles.ts +++ b/src/core/feedback/nothing-found/styles.ts @@ -1,7 +1,7 @@ +import MuiTypography from '@mui/material/Typography' import { default as styled } from 'styled-components' -import { default as Typography } from '@/core/data-display/typography' -export const TextTypography = styled(Typography)` +export const TextTypography = styled(MuiTypography)` && { flex: 1; } diff --git a/src/core/feedback/progress/__snapshots__/progress.spec.tsx.snap b/src/core/feedback/progress/__snapshots__/progress.spec.tsx.snap index a4fbcfa6..626dc1c3 100644 --- a/src/core/feedback/progress/__snapshots__/progress.spec.tsx.snap +++ b/src/core/feedback/progress/__snapshots__/progress.spec.tsx.snap @@ -2,17 +2,17 @@ exports[`Progress should match snapshot 1`] = `
-
-
+
`; exports[`Progress should match snapshot 2`] = `
-
-
-
-
+
`; diff --git a/src/core/feedback/progress/index.tsx b/src/core/feedback/progress/index.tsx index 35d0ca59..dbda2973 100644 --- a/src/core/feedback/progress/index.tsx +++ b/src/core/feedback/progress/index.tsx @@ -1,21 +1,26 @@ import React from 'react' -import { - CircularProgress as MuiCircularProgress, - LinearProgress as MuiLinearProgress -} from '@material-ui/core' -import { makeStyles } from '@material-ui/core/styles' +import MuiCircularProgress from '@mui/material/CircularProgress' +import MuiLinearProgress from '@mui/material/LinearProgress' +import { makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' export interface ILinear { - color?: 'primary' | 'secondary' - valueBuffer?: number - variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query' + color?: + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning' + | 'inherit' classes?: { root?: string colorPrimary?: string barColorPrimary?: string barColorSecondary?: string } + variant?: 'buffer' | 'determinate' | 'indeterminate' | 'query' + valueBuffer?: number rootColor?: string primaryColor?: string barPrimaryColor?: string @@ -24,8 +29,15 @@ export interface ILinear { export interface ICircular { size?: string | number - color?: 'primary' | 'secondary' | 'inherit' - variant?: 'determinate' | 'indeterminate' | 'static' + variant?: 'determinate' | 'indeterminate' + color?: + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning' + | 'inherit' } export interface ProgressProps extends DefaultProps { diff --git a/src/core/feedback/slide/__snapshots__/slide.spec.tsx.snap b/src/core/feedback/slide/__snapshots__/slide.spec.tsx.snap deleted file mode 100644 index 255b2788..00000000 --- a/src/core/feedback/slide/__snapshots__/slide.spec.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Slide should match snapshot 1`] = ` -
- - Slide Text - -
-`; - -exports[`Slide should match snapshot 2`] = ` -
- - Slide Text - -
-`; diff --git a/src/core/feedback/slide/index.tsx b/src/core/feedback/slide/index.tsx deleted file mode 100644 index 1f5597c3..00000000 --- a/src/core/feedback/slide/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import type { ReactElement } from 'react' -import { Slide as MuiSlide } from '@material-ui/core' -import type { DefaultProps } from '../../types' - -export interface SlideProps extends DefaultProps { - in: boolean - direction: 'left' | 'right' | 'up' | 'down' - timeout?: number | { enter?: number; exit?: number } - children?: ReactElement> -} - -const Slide = ({ - children, - direction, - margin, - padding, - style = {}, - ...otherProps -}: SlideProps) => ( - - {children} - -) - -export default Slide diff --git a/src/core/feedback/slide/slide.spec.tsx b/src/core/feedback/slide/slide.spec.tsx deleted file mode 100644 index a452f386..00000000 --- a/src/core/feedback/slide/slide.spec.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' -import { render, screen } from '@testing-library/react' -import Slide from '.' - -describe('Slide', () => { - it('should render closed', () => { - render( - - Slide Text - - ) - const element = screen.getByText('Slide Text') - - expect(element).toHaveProperty('style.visibility', 'hidden') - }) - - it('should render opened', () => { - render( - - Slide Text - - ) - - const element = screen.getByText('Slide Text') - - expect(element).not.toHaveProperty('style.visibility', 'hidden') - }) - - it('should match snapshot', () => { - const { container: opened } = render( - - Slide Text - - ) - - const { container: closed } = render( - - Slide Text - - ) - - expect(opened).toMatchSnapshot() - expect(closed).toMatchSnapshot() - }) -}) diff --git a/src/core/feedback/slide/slide.stories.tsx b/src/core/feedback/slide/slide.stories.tsx deleted file mode 100644 index 61516f22..00000000 --- a/src/core/feedback/slide/slide.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useState } from 'react' -import type { Meta, StoryFn } from '@storybook/react' -import Button from '@/core/inputs/button' -import Slide from '.' - -export default { - title: 'Feedback/Slide', - component: Slide -} as Meta - -const Template: StoryFn = args => { - const [open, setOpen] = useState(true) - const [btnLabel, setBtnLabel] = useState('Close') - - function handleClick() { - setOpen(!open) - - if (btnLabel === 'Close') { - setBtnLabel('Open') - } else { - setBtnLabel('Close') - } - } - - return ( - <> - - - - ) -} - -export const Default = Template.bind({}) -Default.args = { - direction: 'left', - timeout: 300, - children: Im not open for discussions. -} diff --git a/src/core/feedback/snackbar/__snapshots__/snackbar.spec.tsx.snap b/src/core/feedback/snackbar/__snapshots__/snackbar.spec.tsx.snap index de456a3f..a9ca20f9 100644 --- a/src/core/feedback/snackbar/__snapshots__/snackbar.spec.tsx.snap +++ b/src/core/feedback/snackbar/__snapshots__/snackbar.spec.tsx.snap @@ -3,19 +3,16 @@ exports[`Snackbar should match snapshot 1`] = `
diff --git a/src/core/feedback/snackbar/index.tsx b/src/core/feedback/snackbar/index.tsx index 482cc358..e1572418 100644 --- a/src/core/feedback/snackbar/index.tsx +++ b/src/core/feedback/snackbar/index.tsx @@ -1,12 +1,5 @@ import React from 'react' import type { ReactNode, FunctionComponent, MouseEvent } from 'react' -import { - IconButton as MuiIconButton, - Snackbar as MuiSnackbar, - SnackbarContent as MuiSnackbarContent -} from '@material-ui/core' -import { amber, blue, green, red } from '@material-ui/core/colors' -import { makeStyles, createStyles } from '@material-ui/core/styles' import { CheckCircle as IconCheck, Close as IconClose, @@ -14,9 +7,12 @@ import { Info as IconInfo, Warning as IconWarning } from '@mui/icons-material' +import { amber, blue, green, red } from '@mui/material/colors' +import MuiSnackbar from '@mui/material/Snackbar' +import MuiSnackbarContent from '@mui/material/SnackbarContent' import type { DefaultProps } from '../../types' -import type { Theme } from '@material-ui/core/styles' -import type { TransitionProps } from '@material-ui/core/transitions/transition' +import type { TransitionProps } from '@mui/material/transitions' +import IconButton from '@/core/inputs/icon-button' export interface SnackBarProps extends DefaultProps { autoHide?: number @@ -60,20 +56,6 @@ const variants = { } } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - icon: { - fontSize: 20, - marginRight: theme.spacing(1), - opacity: 0.9 - }, - message: { - alignItems: 'center', - display: 'flex' - } - }) -) - const SnackBar = (props: SnackBarProps) => { const { id, @@ -92,10 +74,9 @@ const SnackBar = (props: SnackBarProps) => { TransitionComponent, TransitionProps, onClick, - ...other + ...otherProps } = props const Icon = variants[variant].icon - const classes = useStyles() const cursor = onClick ? 'pointer' : undefined @@ -110,42 +91,50 @@ const SnackBar = (props: SnackBarProps) => { return ( - {icon || } -
{message}
+ + {icon || } +
{message}
 } action={ action || ( - - + ) } - {...other} + {...otherProps} /> ) diff --git a/src/core/feedback/snackbar/snackbar.spec.tsx b/src/core/feedback/snackbar/snackbar.spec.tsx index f96b10a3..60171de5 100644 --- a/src/core/feedback/snackbar/snackbar.spec.tsx +++ b/src/core/feedback/snackbar/snackbar.spec.tsx @@ -1,11 +1,10 @@ -import React from 'react' -import { act } from 'react-dom/test-utils' +import React, { act } from 'react' import { render, screen, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import Snackbar from '@/test/mocks/snackbar-mock' describe('Snackbar', () => { - it('should render a Snackbar', async () => { + it('should render', async () => { render() const btn = screen.getByTestId('snackbar-button') diff --git a/src/core/feedback/snackbar/snackbar.stories.tsx b/src/core/feedback/snackbar/snackbar.stories.tsx index 4cc10abf..18321e24 100644 --- a/src/core/feedback/snackbar/snackbar.stories.tsx +++ b/src/core/feedback/snackbar/snackbar.stories.tsx @@ -68,13 +68,3 @@ Error.args = { message: 'In the town where I was born, Lived a man who sailed to sea', children: 'Snackbar' } - -/* -export const WithLongDuration = Template.bind({}) -WithLongDuration.args = { - variant: 'info', - // transitionDuration: { enter: 0, exit: 200 }, - message: 'In the town where I was born, Lived a man who sailed to sea', - children: 'Snackbar' -} -*/ diff --git a/src/core/feedback/tooltip/__snapshots__/tooltip.spec.tsx.snap b/src/core/feedback/tooltip/__snapshots__/tooltip.spec.tsx.snap index f7eaac32..3ee67e3a 100644 --- a/src/core/feedback/tooltip/__snapshots__/tooltip.spec.tsx.snap +++ b/src/core/feedback/tooltip/__snapshots__/tooltip.spec.tsx.snap @@ -3,23 +3,13 @@ exports[`Tooltip should match snapshot 1`] = `
-
diff --git a/src/core/feedback/tooltip/index.tsx b/src/core/feedback/tooltip/index.tsx index 5a5c494a..3a20d3c0 100644 --- a/src/core/feedback/tooltip/index.tsx +++ b/src/core/feedback/tooltip/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import type { ReactElement, CSSProperties, ReactNode } from 'react' -import { Tooltip as MuiTooltip } from '@material-ui/core' +import MuiTooltip from '@mui/material/Tooltip' import type { DefaultProps } from '../../types' export interface TooltipProps extends DefaultProps { diff --git a/src/core/feedback/tooltip/tooltip.spec.tsx b/src/core/feedback/tooltip/tooltip.spec.tsx index c4c4d6f8..36ab9827 100644 --- a/src/core/feedback/tooltip/tooltip.spec.tsx +++ b/src/core/feedback/tooltip/tooltip.spec.tsx @@ -1,15 +1,13 @@ -import React from 'react' -import { act } from 'react-dom/test-utils' -import { Button } from '@material-ui/core' +import React, { act } from 'react' import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import Tooltip from '.' describe('Tooltip', () => { - it('should render a Tooltip', async () => { + it('should render', async () => { render( - + ) @@ -27,7 +25,7 @@ describe('Tooltip', () => { it('should render a Tooltip with wrapper', async () => { render( - + ) @@ -45,7 +43,7 @@ describe('Tooltip', () => { it('should not render a Tooltip', async () => { render( - + ) @@ -63,7 +61,7 @@ describe('Tooltip', () => { it('should match snapshot', () => { const { container } = render( - + ) diff --git a/src/core/feedback/tooltip/tooltip.stories.tsx b/src/core/feedback/tooltip/tooltip.stories.tsx index 6550e49f..1cdbd841 100644 --- a/src/core/feedback/tooltip/tooltip.stories.tsx +++ b/src/core/feedback/tooltip/tooltip.stories.tsx @@ -13,7 +13,11 @@ const Template: StoryFn = args => export const Default = Template.bind({}) Default.args = { title: 'Tooltip', - children: + children: ( + + + + ) } export const Positioned = () => ( diff --git a/src/core/feedback/validation-dialog/index.tsx b/src/core/feedback/validation-dialog/index.tsx index fbf05d1d..524a909d 100644 --- a/src/core/feedback/validation-dialog/index.tsx +++ b/src/core/feedback/validation-dialog/index.tsx @@ -132,15 +132,15 @@ const ValidationDialog = ({ VOLTAR @@ -148,7 +148,7 @@ const ValidationDialog = ({ ) : (
diff --git a/src/core/inputs/add-button/index.tsx b/src/core/inputs/add-button/index.tsx index c8cfeefe..6b956b17 100644 --- a/src/core/inputs/add-button/index.tsx +++ b/src/core/inputs/add-button/index.tsx @@ -1,9 +1,9 @@ import React from 'react' import { NoteAdd as IconAdd } from '@mui/icons-material' -import type { ButtonProps } from '@/core/inputs/button' +import type { IButtonProps } from '@/core/inputs/button' import { ButtonAdd } from './styles' -export interface Props extends ButtonProps { +export interface Props extends IButtonProps { label?: string name: string margin?: string | number @@ -16,7 +16,7 @@ export interface Props extends ButtonProps { const AddButton = (props: Props) => ( { - const { classes, ...otherProps } = props - const styles = useStyles(props) - - return ( - - ) -} diff --git a/src/core/inputs/auto-complete-lab/autocomplete-lab.spec.tsx b/src/core/inputs/autocomplete/autocomplete.spec.tsx similarity index 96% rename from src/core/inputs/auto-complete-lab/autocomplete-lab.spec.tsx rename to src/core/inputs/autocomplete/autocomplete.spec.tsx index fb8dbd33..94021d57 100644 --- a/src/core/inputs/auto-complete-lab/autocomplete-lab.spec.tsx +++ b/src/core/inputs/autocomplete/autocomplete.spec.tsx @@ -2,13 +2,13 @@ import React from 'react' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { default as userEvent } from '@testing-library/user-event' import TextField from '@/core/inputs/text-field' -import { AutoComplete } from '.' +import { Autocomplete } from '.' import '@testing-library/jest-dom' -describe('AutoCompleteLab', () => { +describe('Autocomplete', () => { it('should render', () => { render( - { it('should render the correct suggestions', async () => { render( - { const onChangeMock = jest.fn() render( - { const onChangeMock = jest.fn() render( - + component: Autocomplete +} as Meta export const AutoCompleteLab = () => ( - ( { label: 'Rose', value: 'rose' } ]} getOptionLabel={option => option.label} - style={{ width: 300 }} renderInput={props => ( )} diff --git a/src/core/inputs/autocomplete/index.tsx b/src/core/inputs/autocomplete/index.tsx new file mode 100644 index 00000000..ffab90c7 --- /dev/null +++ b/src/core/inputs/autocomplete/index.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import MuiAutocomplete from '@mui/material/Autocomplete' +export type { + AutocompleteChangeReason, + AutocompleteCloseReason, + AutocompleteInputChangeReason, + AutocompleteProps, + AutocompleteRenderGetTagProps, + AutocompleteRenderInputParams, + AutocompleteRenderOptionState +} from '@mui/material/Autocomplete' + +export const Autocomplete: typeof MuiAutocomplete = props => { + const { ...otherProps } = props + + return +} diff --git a/src/core/inputs/button/__snapshots__/button.spec.tsx.snap b/src/core/inputs/button/__snapshots__/button.spec.tsx.snap index 94b4cd3d..f6ece7f1 100644 --- a/src/core/inputs/button/__snapshots__/button.spec.tsx.snap +++ b/src/core/inputs/button/__snapshots__/button.spec.tsx.snap @@ -3,19 +3,16 @@ exports[`Button should match snapshot 1`] = `
diff --git a/src/core/inputs/button/button.stories.tsx b/src/core/inputs/button/button.stories.tsx index 098dcf8f..81828a3a 100644 --- a/src/core/inputs/button/button.stories.tsx +++ b/src/core/inputs/button/button.stories.tsx @@ -74,21 +74,19 @@ Selected.args = { export const DashedPrimary = Template.bind({}) DashedPrimary.args = { ...commonArgs, - variant: 'dashed', + dashed: true, color: 'primary' } export const DashedSecondary = Template.bind({}) DashedSecondary.args = { ...commonArgs, - variant: 'dashed', + dashed: true, color: 'secondary' } export const AddIcon = Template.bind({}) AddIcon.args = { - variant: 'fab', - color: 'primary', margin: 12, children: } diff --git a/src/core/inputs/button/index.tsx b/src/core/inputs/button/index.tsx index f66fcddd..65b0f6ee 100644 --- a/src/core/inputs/button/index.tsx +++ b/src/core/inputs/button/index.tsx @@ -1,42 +1,56 @@ import React from 'react' import type { ElementType, MouseEvent, ReactNode } from 'react' -import { Button as MuiButton } from '@material-ui/core' +import MuiButton from '@mui/material/Button' import type { DefaultProps } from '../../types' +import type { ButtonProps } from '@mui/material/Button' -export interface ButtonProps extends DefaultProps { +export interface IButtonProps extends DefaultProps, ButtonProps { + children?: ReactNode + color?: + | 'inherit' + | 'primary' + | 'secondary' + | 'success' + | 'error' + | 'info' + | 'warning' + component?: ElementType + dashed?: boolean disabled?: boolean - selected?: boolean disableTouchRipple?: boolean - component?: ElementType - color?: 'default' | 'primary' | 'inherit' | 'secondary' - size?: 'small' | 'medium' | 'large' - href?: string + 'data-testid'?: string fullWidth?: boolean - variant?: 'text' | 'outlined' | 'contained' | 'dashed' + href?: string + selected?: boolean + size?: 'small' | 'medium' | 'large' target?: string - children?: ReactNode - 'data-testid'?: string + variant?: 'text' | 'outlined' | 'contained' onClick?(event: MouseEvent): void } const Button = ({ children, + color, + dashed, + href = '', margin, padding, style = {}, variant, ...otherProps -}: ButtonProps) => ( +}: IButtonProps) => ( + borderStyle: dashed ? 'dashed' : variant + }} + {...otherProps}> {children} ) diff --git a/src/core/inputs/checkbox/__snapshots__/checkbox.spec.tsx.snap b/src/core/inputs/checkbox/__snapshots__/checkbox.spec.tsx.snap index 8f524ecd..72d23196 100644 --- a/src/core/inputs/checkbox/__snapshots__/checkbox.spec.tsx.snap +++ b/src/core/inputs/checkbox/__snapshots__/checkbox.spec.tsx.snap @@ -6,39 +6,34 @@ exports[`Checkbox should match snapshot 1`] = ` class="sc-iGgVNO csexcM" >