From 3d6a4370e446f474052891aecb2e0e0b609caaad Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Wed, 11 Dec 2024 11:14:55 -0300 Subject: [PATCH 01/10] chore: replace @mui icons import for the new design system icons import --- .../data-display/avatar/avatar.stories.tsx | 4 +- .../data-table-pagination-actions.tsx | 20 ++++---- .../data-table-query-paginated.stories.tsx | 26 +++++----- .../data-table/data-table.stories.tsx | 50 +++++++++---------- src/core/data-display/fab-v2/fab.spec.tsx | 12 ++--- src/core/data-display/fab-v2/fab.stories.tsx | 4 +- .../data-display/list-item/list-item.spec.tsx | 10 ++-- src/core/data-display/list/list.stories.tsx | 12 +++-- .../password-visibility/index.tsx | 5 +- src/core/feedback/snackbar/index.tsx | 17 ++++--- .../validation-dialog.spec.tsx | 6 +-- .../validaton-dialog.stories.tsx | 6 +-- src/core/inputs/add-button/index.tsx | 4 +- .../icon-button/icon-button.stories.tsx | 2 +- src/core/inputs/select/index.tsx | 4 +- src/core/inputs/text-field/index.tsx | 8 ++- src/core/navigation/breadcrumbs/index.tsx | 4 +- src/core/navigation/drawer/drawer.stories.tsx | 6 +-- src/core/navigation/menu/menu.spec.tsx | 14 +++--- src/core/navigation/menu/menu.stories.tsx | 18 +++---- src/core/navigation/sidebar/index.tsx | 11 +--- src/core/navigation/sidebar/sidebar.spec.tsx | 26 +++++----- .../navigation/sidebar/sidebar.stories.tsx | 10 ++-- src/core/navigation/stepper/stepper.spec.tsx | 16 +++--- .../navigation/stepper/stepper.stories.tsx | 8 +-- src/core/surfaces/card/index.tsx | 6 +-- .../expansion-panel.stories.tsx | 4 +- src/core/surfaces/expansion-panel/index.tsx | 8 +-- src/core/surfaces/panel/index.tsx | 6 ++- .../surfaces/step-card/step-card-details.tsx | 9 ++-- .../surfaces/step-card/step-card-panel.tsx | 9 ++-- src/test/mocks/data-table-hidden-mock.tsx | 38 +++++++------- src/test/mocks/data-table-mock.tsx | 26 +++++----- src/test/mocks/snackbar-mock.tsx | 2 +- 34 files changed, 200 insertions(+), 211 deletions(-) diff --git a/src/core/data-display/avatar/avatar.stories.tsx b/src/core/data-display/avatar/avatar.stories.tsx index d51b39bf..91a55e9d 100644 --- a/src/core/data-display/avatar/avatar.stories.tsx +++ b/src/core/data-display/avatar/avatar.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Face } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' +import { IconFace } from '@/icons/mui-icons' import Avatar from '.' const srcImage = 'https://imgflip.com/s/meme/Doge.jpg' @@ -72,7 +72,7 @@ export const avatarWithCustomIcon: Story = { args: { name: '', src: '', - icon: , + icon: , style: { width: '64px', height: '64px' } } } 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 0de08604..918f131c 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 @@ -1,12 +1,12 @@ import React from 'react' import type { MouseEvent } from 'react' -import { - FirstPage, - LastPage, - KeyboardArrowLeft, - KeyboardArrowRight -} from '@mui/icons-material' import MuiIconButton from '@mui/material/IconButton' +import { + IconFirstPage, + IconLastPage, + IconNavigateBefore, + IconNavigateNext +} from '@/icons/mui-icons' import { PaginationWrapper } from './styles' interface DataTablePaginationActionsProps { @@ -67,27 +67,27 @@ export const makeDataTablePaginationActions = disabled={page === 0 || clickable} aria-label='first page' onClick={handleFirstPageButtonClick}> - + )} - + = 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 baba3113..d7e9c514 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,13 +5,6 @@ import type { ReactNode, SetStateAction } from 'react' -import { - Cancel as CancelIcon, - Check as CheckIcon, - Delete as DeleteIcon, - Edit as EditIcon, - Save as SaveIcon -} from '@mui/icons-material' import MuiSkeleton from '@mui/material/Skeleton' import MuiTableCell from '@mui/material/TableCell' import MuiTableRow from '@mui/material/TableRow' @@ -20,6 +13,13 @@ import { format } from 'date-fns' import type { ColumnSpec, DataTableController, Identifier } from './types' import type { Meta } from '@storybook/react' import Button from '@/core/inputs/button' +import { + IconClose, + IconCheck, + IconDelete, + IconEdit, + IconSave +} from '@/icons/mui-icons' import { DataTableAction } from './data-table-action' import { DataTableQueryPaginated } from './data-table-query-paginated' import { RowMode } from './types' @@ -465,14 +465,14 @@ export const Crud = () => { dataList.filter(item => item.id !== data.id) ) }}> - + { controllerRef.current.popRowView(data.id) }}> - + @@ -615,12 +615,12 @@ export const Crud = () => { - + - + ) @@ -631,12 +631,12 @@ export const Crud = () => { - + - + ) diff --git a/src/core/data-display/data-table/data-table.stories.tsx b/src/core/data-display/data-table/data-table.stories.tsx index 177bb186..a1cad54f 100644 --- a/src/core/data-display/data-table/data-table.stories.tsx +++ b/src/core/data-display/data-table/data-table.stories.tsx @@ -1,20 +1,20 @@ import React, { useState, useRef } from 'react' import type { MutableRefObject, Dispatch, SetStateAction } from 'react' -import { - Delete as DeleteIcon, - Edit as EditIcon, - Save as SaveIcon, - Cancel as CancelIcon, - Check as CheckIcon, - Visibility as VisibilityIcon, - VisibilityOff as VisibilityOffIcon -} from '@mui/icons-material' import { format } from 'date-fns' import { v4 as uuid } from 'uuid' import type { ColumnSpec, DataTableController, Identifier } from './types' import type { Meta } from '@storybook/react' import Typography from '@/core/data-display/typography' import Button from '@/core/inputs/button' +import { + IconClose, + IconCheck, + IconDelete, + IconEdit, + IconSave, + IconVisibility, + IconVisibilityOff +} from '@/icons/mui-icons' import { default as DataTable } from './data-table' import { DataTableAction } from './data-table-action' import { DataTableField } from './data-table-field' @@ -573,14 +573,14 @@ export const Crud = () => { dataList.filter(item => item.id !== data.id) ) }}> - + { controllerRef.current.popRowView(data.id) }}> - + @@ -723,12 +723,12 @@ export const Crud = () => { - + - + ) @@ -739,12 +739,12 @@ export const Crud = () => { - + - + ) @@ -840,14 +840,14 @@ export const CrudWithoutPagination = () => { dataList.filter(item => item.id !== data.id) ) }}> - + { controllerRef?.current.popRowView(data.id) }}> - + @@ -1002,17 +1002,17 @@ export const CrudWithoutPagination = () => { - + - + - + ) @@ -1024,17 +1024,17 @@ export const CrudWithoutPagination = () => { - + - + - + ) @@ -1045,12 +1045,12 @@ export const CrudWithoutPagination = () => { - + - + ) diff --git a/src/core/data-display/fab-v2/fab.spec.tsx b/src/core/data-display/fab-v2/fab.spec.tsx index 5a8783c8..25ae8a85 100644 --- a/src/core/data-display/fab-v2/fab.spec.tsx +++ b/src/core/data-display/fab-v2/fab.spec.tsx @@ -1,14 +1,14 @@ import React from 'react' -import { FileCopy } from '@mui/icons-material' import { render, screen, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' +import { IconFileCopy } from '@/icons/mui-icons' import Fab from '.' describe('Fab', () => { it('should render', () => { render( - + ) @@ -20,7 +20,7 @@ describe('Fab', () => { it('should render medium', () => { render( - + ) @@ -34,7 +34,7 @@ describe('Fab', () => { render( - + ) @@ -52,7 +52,7 @@ describe('Fab', () => { render( - + ) @@ -67,7 +67,7 @@ describe('Fab', () => { it('should match snapshot', () => { const { container } = render( - + ) diff --git a/src/core/data-display/fab-v2/fab.stories.tsx b/src/core/data-display/fab-v2/fab.stories.tsx index 7a25dca0..c5821a40 100644 --- a/src/core/data-display/fab-v2/fab.stories.tsx +++ b/src/core/data-display/fab-v2/fab.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { FileCopy } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' +import { IconFileCopy } from '@/icons/mui-icons' import FabV2 from '.' import { theme } from '@/theme' @@ -55,7 +55,7 @@ export const fabV2: Story = { render: ({ ...args }) => { return ( alert('Fab clicked!')}> - + ) }, diff --git a/src/core/data-display/list-item/list-item.spec.tsx b/src/core/data-display/list-item/list-item.spec.tsx index e613b153..f91777f1 100644 --- a/src/core/data-display/list-item/list-item.spec.tsx +++ b/src/core/data-display/list-item/list-item.spec.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Face } from '@mui/icons-material' import { render, screen, waitFor } from '@testing-library/react' +import { IconFace } from '@/icons/mui-icons' import ListItem from '.' import '@testing-library/jest-dom' @@ -38,7 +38,9 @@ describe('ListItem', () => { }) it('should render with custom width icon', () => { - render(} />) + render( + } /> + ) const button = screen.getByRole('button') const icon = button.querySelector('.MuiListItemIcon-root') @@ -49,7 +51,7 @@ describe('ListItem', () => { }) it('should not render with custom width icon', () => { - render(} />) + render(} />) const button = screen.getByRole('button') const icon = button.querySelector('.MuiListItemIcon-root') @@ -64,7 +66,7 @@ describe('ListItem', () => { } + icon={} avatar={
Avatar
} action={
Action
} /> diff --git a/src/core/data-display/list/list.stories.tsx b/src/core/data-display/list/list.stories.tsx index 3f4df6eb..1a846fac 100644 --- a/src/core/data-display/list/list.stories.tsx +++ b/src/core/data-display/list/list.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { Backup } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' import ListItem from '@/core/data-display/list-item' +import { IconFolderShared } from '@/icons/mui-icons' import Avatar from '../avatar' import List from '.' @@ -46,8 +46,14 @@ export const list: Story = { <> - } title='List Item With Icon 1' /> - } title='List Item With Icon 2' /> + } + title='List Item With Icon 1' + /> + } + title='List Item With Icon 2' + /> } title='List Item With Avatar 1' diff --git a/src/core/data-display/password-visibility/index.tsx b/src/core/data-display/password-visibility/index.tsx index 966dd721..d723a9e8 100644 --- a/src/core/data-display/password-visibility/index.tsx +++ b/src/core/data-display/password-visibility/index.tsx @@ -1,8 +1,5 @@ import React from 'react' -import { - Visibility as IconVisibility, - VisibilityOff as IconVisibilityOff -} from '@mui/icons-material' +import { IconVisibility, IconVisibilityOff } from '@/icons/mui-icons' import { StyledButton } from './styles' export interface IProps { diff --git a/src/core/feedback/snackbar/index.tsx b/src/core/feedback/snackbar/index.tsx index 2fcc8213..037e9f8b 100644 --- a/src/core/feedback/snackbar/index.tsx +++ b/src/core/feedback/snackbar/index.tsx @@ -1,17 +1,17 @@ import React from 'react' import type { ReactNode, FunctionComponent, MouseEvent } from 'react' -import { - CheckCircle as IconCheck, - Close as IconClose, - Error as IconError, - Info as IconInfo, - Warning as IconWarning -} from '@mui/icons-material' import MuiSnackbar from '@mui/material/Snackbar' import MuiSnackbarContent from '@mui/material/SnackbarContent' import type { DefaultProps } from '../../types' import type { TransitionProps } from '@mui/material/transitions' import IconButton from '@/core/inputs/icon-button' +import { + IconCheckCircle, + IconClose, + IconError, + IconInfo, + IconWarning +} from '@/icons/mui-icons' import { Message } from './styles' import { theme } from '@/theme' @@ -51,7 +51,7 @@ const variants = { }, success: { color: green[400], - icon: IconCheck + icon: IconCheckCircle }, warning: { color: orange[600], @@ -79,6 +79,7 @@ const SnackBar = (props: SnackBarProps) => { onClick, ...otherProps } = props + const Icon = variants[variant].icon const cursor = onClick ? 'pointer' : undefined diff --git a/src/core/feedback/validation-dialog/validation-dialog.spec.tsx b/src/core/feedback/validation-dialog/validation-dialog.spec.tsx index 24ecc9ef..a7aecd40 100644 --- a/src/core/feedback/validation-dialog/validation-dialog.spec.tsx +++ b/src/core/feedback/validation-dialog/validation-dialog.spec.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { CheckCircleOutline, CancelOutlined } from '@mui/icons-material' import { CircularProgress } from '@mui/material' import { render, screen, fireEvent } from '@testing-library/react' import type { ITitles, IValidations } from '.' +import { IconCancelOutlined, IconCheckCircleOutlined } from '@/icons/mui-icons' import ValidationDialog, { ValidationStatus } from '.' import { theme } from '@/theme' @@ -22,8 +22,8 @@ const stepsTitle = { } const stepsIcons = { - success: , - error: , + success: , + error: , loading: } diff --git a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx index 030dbeb7..34422ef1 100644 --- a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx +++ b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useState } from 'react' -import { CheckCircleOutline, CancelOutlined } from '@mui/icons-material' import { CircularProgress } from '@mui/material' import { ThemeProvider } from 'styled-components' import type { Meta, StoryObj } from '@storybook/react' import Button from '@/core/inputs/button' +import { IconCancelOutlined, IconCheckCircleOutlined } from '@/icons/mui-icons' import ValidationDialog, { ValidationStatus } from '.' import { ThemeProviderFlipper, muiThemeOptions, theme } from '@/theme' @@ -85,8 +85,8 @@ const ValidationDialogStorie = () => { } const stepsIcons = { - success: , - error: , + success: , + error: , loading: } diff --git a/src/core/inputs/add-button/index.tsx b/src/core/inputs/add-button/index.tsx index 6b956b17..eec09eed 100644 --- a/src/core/inputs/add-button/index.tsx +++ b/src/core/inputs/add-button/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { NoteAdd as IconAdd } from '@mui/icons-material' import type { IButtonProps } from '@/core/inputs/button' +import { IconNoteAdd } from '@/icons/mui-icons' import { ButtonAdd } from './styles' export interface Props extends IButtonProps { @@ -25,7 +25,7 @@ const AddButton = (props: Props) => ( margin={props.margin || '12px 0 24px'} fullWidth={props.fullWidth} onClick={props.onClick}> - + {props.label} ) diff --git a/src/core/inputs/icon-button/icon-button.stories.tsx b/src/core/inputs/icon-button/icon-button.stories.tsx index e9451dea..2754d32d 100644 --- a/src/core/inputs/icon-button/icon-button.stories.tsx +++ b/src/core/inputs/icon-button/icon-button.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Add as IconAdd } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' +import { IconAdd } from '@/icons/mui-icons' import IconButton from '.' const meta: Meta = { diff --git a/src/core/inputs/select/index.tsx b/src/core/inputs/select/index.tsx index 20cdf0f3..841e82ff 100644 --- a/src/core/inputs/select/index.tsx +++ b/src/core/inputs/select/index.tsx @@ -1,11 +1,11 @@ import React from 'react' import type { ChangeEvent, ReactNode } from 'react' -import { Clear } from '@mui/icons-material' import IconButton from '@mui/material/IconButton' import InputAdornment from '@mui/material/InputAdornment' import MuiSelect from '@mui/material/Select' import type { DefaultProps } from '../../types' import type { SelectChangeEvent, SelectProps } from '@mui/material/Select' +import { IconClose } from '@/icons/mui-icons' export interface ISelectProps extends DefaultProps, @@ -32,7 +32,7 @@ const renderEndAdornment = (onClear?: () => void) => ( role='end-adornment-component' size='small' onClick={onClear}> - + ) diff --git a/src/core/inputs/text-field/index.tsx b/src/core/inputs/text-field/index.tsx index b9f354b1..cefb37a8 100644 --- a/src/core/inputs/text-field/index.tsx +++ b/src/core/inputs/text-field/index.tsx @@ -8,7 +8,6 @@ import type { MouseEvent, Ref } from 'react' -import { Clear, Help as ContactSupportIcon } from '@mui/icons-material' import MuiInputAdornment from '@mui/material/InputAdornment' import MuiMenuItem from '@mui/material/MenuItem' import MuiTextField from '@mui/material/TextField' @@ -16,6 +15,7 @@ import { pipe, split, map, reject } from 'ramda' import type { DefaultProps } from '../../types' import type { InputBaseComponentProps } from '@mui/material/InputBase' import type { TextFieldProps } from '@mui/material/TextField' +import { IconClose, IconHelp } from '@/icons/mui-icons' import IconButton from '../icon-button' import { CharactersCount, @@ -99,9 +99,7 @@ const toLispCase = (name: string) => export const HelperBox = (props: IHelperProps) => ( - {props.helperIcon || ( - - )} + {props.helperIcon || } ) @@ -130,7 +128,7 @@ const renderEndAdornment = (disabled?: boolean, onClear?: () => void) => ( margin='0 16px 0 0' disabled={disabled || false} onClick={onClear}> - + ) diff --git a/src/core/navigation/breadcrumbs/index.tsx b/src/core/navigation/breadcrumbs/index.tsx index cd02e7fd..7b53fcd2 100644 --- a/src/core/navigation/breadcrumbs/index.tsx +++ b/src/core/navigation/breadcrumbs/index.tsx @@ -1,8 +1,8 @@ import React from 'react' import type { ReactNode } from 'react' -import { ChevronRight as IconChevronRight } from '@mui/icons-material' import MuiBreadcrumbs from '@mui/material/Breadcrumbs' import { addIndex, map } from 'ramda' +import { IconNavigateNext } from '@/icons/mui-icons' import { BreadcrumbLink, TextTypography } from './styles' const imap = addIndex(map) @@ -54,7 +54,7 @@ const Breadcrumbs = ({ }, allChunks) as ReactNode[] return ( - }> + }> {links} ) diff --git a/src/core/navigation/drawer/drawer.stories.tsx b/src/core/navigation/drawer/drawer.stories.tsx index 655a3574..d6b4ff1f 100644 --- a/src/core/navigation/drawer/drawer.stories.tsx +++ b/src/core/navigation/drawer/drawer.stories.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react' -import { Backup as IconBackup } from '@mui/icons-material' import type { IDrawerProps } from '.' import type { Meta, StoryObj } from '@storybook/react' import List from '@/core/data-display/list' import ListItem from '@/core/data-display/list-item' import Button from '@/core/inputs/button' +import { IconFolderShared } from '@/icons/mui-icons' import Drawer from '.' const meta: Meta = { @@ -52,8 +52,8 @@ const DrawerWrapper = (args: JSX.IntrinsicAttributes & IDrawerProps) => { - } /> - } /> + } /> + } /> diff --git a/src/core/navigation/menu/menu.spec.tsx b/src/core/navigation/menu/menu.spec.tsx index 4637fecf..ac7b7b7d 100644 --- a/src/core/navigation/menu/menu.spec.tsx +++ b/src/core/navigation/menu/menu.spec.tsx @@ -1,15 +1,15 @@ import React from 'react' -import { Backup } from '@mui/icons-material' import { render, screen } from '@testing-library/react' import ListItem from '@/core/data-display/list-item' +import { IconFolderShared } from '@/icons/mui-icons' import Menu from '.' describe('Menu', () => { it('should render', () => { render( - } title='Menu 1' /> - } title='Menu 2' /> + } title='Menu 1' /> + } title='Menu 2' /> ) @@ -23,8 +23,8 @@ describe('Menu', () => { it('should render closed', () => { render( - } title='Menu 1' /> - } title='Menu 2' /> + } title='Menu 1' /> + } title='Menu 2' /> ) @@ -85,8 +85,8 @@ describe('Menu', () => { it('should match snapshot', () => { const { container } = render( - } title='Menu 1' /> - } title='Menu 2' /> + } title='Menu 1' /> + } title='Menu 2' /> ) diff --git a/src/core/navigation/menu/menu.stories.tsx b/src/core/navigation/menu/menu.stories.tsx index 0fd936e5..6753d022 100644 --- a/src/core/navigation/menu/menu.stories.tsx +++ b/src/core/navigation/menu/menu.stories.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react' -import { Backup } from '@mui/icons-material' import type { IMenuProps } from '.' import type { Meta, StoryObj } from '@storybook/react' import ListItem from '@/core/data-display/list-item' import Button from '@/core/inputs/button' +import { IconFolderShared } from '@/icons/mui-icons' import Menu from '.' const meta: Meta = { @@ -55,14 +55,14 @@ export const menu: Story = { args: { children: ( <> - } title='Menu 1' /> - } title='Menu 2' /> - } title='Menu 3' /> - } title='Menu 4' /> - } title='Menu 5' /> - } title='Menu 6' /> - } title='Menu 7' /> - } title='Menu 8' /> + } title='Menu 1' /> + } title='Menu 2' /> + } title='Menu 3' /> + } title='Menu 4' /> + } title='Menu 5' /> + } title='Menu 6' /> + } title='Menu 7' /> + } title='Menu 8' /> ), margin: '', diff --git a/src/core/navigation/sidebar/index.tsx b/src/core/navigation/sidebar/index.tsx index 6b3737ac..0e69ff41 100644 --- a/src/core/navigation/sidebar/index.tsx +++ b/src/core/navigation/sidebar/index.tsx @@ -1,11 +1,8 @@ import React from 'react' -import { - KeyboardArrowLeft as IconArrowLeft, - KeyboardArrowRight as IconArrowRight -} from '@mui/icons-material' import Drawer from '@mui/material/Drawer' import type { DefaultProps } from '../../types' import type { IButtonProps } from '@/core/inputs/button' +import { IconNavigateBefore, IconNavigateNext } from '@/icons/mui-icons' import { Action, AnchorButton } from './styles' import { theme } from '@/theme' @@ -61,11 +58,7 @@ const Sidebar = ({ minwidth={minWidth} onClick={onToggle} {...ButtonProps}> - {iconToLeft ? ( - - ) : ( - - )} + {iconToLeft ? : } ) diff --git a/src/core/navigation/sidebar/sidebar.spec.tsx b/src/core/navigation/sidebar/sidebar.spec.tsx index e6dc818f..4a52e266 100644 --- a/src/core/navigation/sidebar/sidebar.spec.tsx +++ b/src/core/navigation/sidebar/sidebar.spec.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { Backup } from '@mui/icons-material' import { render, screen } from '@testing-library/react' import List from '@/core/data-display/list' import ListItem from '@/core/data-display/list-item' +import { IconFolderShared } from '@/icons/mui-icons' import Sidebar from '.' describe('Sidebar', () => { @@ -10,8 +10,8 @@ describe('Sidebar', () => { render( - } /> - } /> + } /> + } /> ) @@ -27,8 +27,8 @@ describe('Sidebar', () => { render( - } /> - } /> + } /> + } /> ) @@ -44,8 +44,8 @@ describe('Sidebar', () => { render( - } /> - } /> + } /> + } /> ) @@ -61,8 +61,8 @@ describe('Sidebar', () => { render( - } /> - } /> + } /> + } /> ) @@ -78,8 +78,8 @@ describe('Sidebar', () => { render( - } /> - } /> + } /> + } /> ) @@ -95,8 +95,8 @@ describe('Sidebar', () => { const { container } = render( - } /> - } /> + } /> + } /> ) diff --git a/src/core/navigation/sidebar/sidebar.stories.tsx b/src/core/navigation/sidebar/sidebar.stories.tsx index 0ac80859..736a99a8 100644 --- a/src/core/navigation/sidebar/sidebar.stories.tsx +++ b/src/core/navigation/sidebar/sidebar.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { Backup } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' import List from '@/core/data-display/list' import ListItem from '@/core/data-display/list-item' +import { IconFolderShared } from '@/icons/mui-icons' import Sidebar from '.' import { SidebarStorie } from './styles' @@ -42,10 +42,10 @@ export const sidebar: Story = { docked: true, children: ( - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> ) } diff --git a/src/core/navigation/stepper/stepper.spec.tsx b/src/core/navigation/stepper/stepper.spec.tsx index 96b04dc4..0e598c13 100644 --- a/src/core/navigation/stepper/stepper.spec.tsx +++ b/src/core/navigation/stepper/stepper.spec.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Delete } from '@mui/icons-material' import { render, screen } from '@testing-library/react' +import { IconDelete } from '@/icons/mui-icons' import Stepper from '.' describe('Stepper', () => { @@ -35,15 +35,15 @@ describe('Stepper', () => { steps={[ { label: 'Name', - icon: + icon: }, { label: 'Email', - icon: () => + icon: () => }, { label: 'Password', - icon: + icon: } ]} /> @@ -75,7 +75,7 @@ describe('Stepper', () => { steps={[ { label: 'Name', - icon: + icon: } ]} /> @@ -99,15 +99,15 @@ describe('Stepper', () => { steps={[ { label: 'Name', - icon: + icon: }, { label: 'Email', - icon: () => + icon: () => }, { label: 'Password', - icon: + icon: } ]} /> diff --git a/src/core/navigation/stepper/stepper.stories.tsx b/src/core/navigation/stepper/stepper.stories.tsx index 3d11303c..ac8095e0 100644 --- a/src/core/navigation/stepper/stepper.stories.tsx +++ b/src/core/navigation/stepper/stepper.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Star } from '@mui/icons-material' import type { Meta, StoryObj } from '@storybook/react' +import { IconStar } from '@/icons/mui-icons' import Stepper from '.' const meta: Meta = { @@ -70,9 +70,9 @@ export const stepperWithIcon: Story = { bottomLabel: true, orientation: 'horizontal', steps: [ - { label: 'Start', icon: }, - { label: 'You are here!', icon: }, - { label: 'Finish', icon: } + { label: 'Start', icon: }, + { label: 'You are here!', icon: }, + { label: 'Finish', icon: } ], margin: '', padding: '', diff --git a/src/core/surfaces/card/index.tsx b/src/core/surfaces/card/index.tsx index cbf9b60d..ed25f3fc 100644 --- a/src/core/surfaces/card/index.tsx +++ b/src/core/surfaces/card/index.tsx @@ -1,15 +1,11 @@ import React from 'react' import type { ReactNode } from 'react' -import { - Close as IconClose, - Edit as IconEdit, - Delete as IconDelete -} from '@mui/icons-material' import type { IButtonProps } from '@/core/inputs/button' import type { IconButtonProps } from '@/core/inputs/icon-button' import Line from '@/core/data-display/line' import AddButton from '@/core/inputs/add-button' import Paper from '@/core/surfaces/paper' +import { IconClose, IconEdit, IconDelete } from '@/icons/mui-icons' import { CardButton, Header, Title } from './styles' import { theme } from '@/theme' diff --git a/src/core/surfaces/expansion-panel/expansion-panel.stories.tsx b/src/core/surfaces/expansion-panel/expansion-panel.stories.tsx index 14d2e839..09aa4820 100644 --- a/src/core/surfaces/expansion-panel/expansion-panel.stories.tsx +++ b/src/core/surfaces/expansion-panel/expansion-panel.stories.tsx @@ -1,11 +1,11 @@ import React, { useRef, useState } from 'react' import type { KeyboardEvent } from 'react' -import { ExpandMore } from '@mui/icons-material' import type { ExpansionPanelProps } from '.' import type { Meta, StoryObj } from '@storybook/react' import Typography from '@/core/data-display/typography' import Button from '@/core/inputs/button' import TextField from '@/core/inputs/text-field' +import { IconExpandMore } from '@/icons/mui-icons' import ExpansionPanel from '.' const meta: Meta = { @@ -136,7 +136,7 @@ export const expansionPanel: Story = { editable: false, disabled: false, summary: 'Pulp Fiction', - expandIcon: , + expandIcon: , actions: (