diff --git a/jest.config.js b/jest.config.js index 29482b4b..56462113 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,7 @@ module.exports = { coveragePathIgnorePatterns: ['stories.(ts|tsx)'], collectCoverageFrom: [ '/src/core/**/*.(ts|tsx)', + '!/src/icons/**/*.(ts|tsx)', '!/src/core/data-display/data-table/*.(ts|tsx)', '!/src/core/data-display/table/table-pagination.tsx', '!/src/core/feedback/dialog-v2/index.ts', diff --git a/package.json b/package.json index fd4c2ce7..aa34b8c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flipper-ui", - "version": "0.35.1", + "version": "0.35.2", "description": "React UI based on the @mui/material toolkit for the web", "main": "dist/index.js", "author": "NG", @@ -30,67 +30,67 @@ "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand --updateSnapshot" }, "dependencies": { - "@emotion/react": "11.13.5", - "@emotion/styled": "11.13.5", - "@mui/icons-material": "6.1.8", - "@mui/material": "6.1.8", - "@mui/system": "6.1.8", - "@mui/x-date-pickers": "7.22.2", + "@emotion/react": "11.14.0", + "@emotion/styled": "11.14.0", + "@mui/icons-material": "6.2.0", + "@mui/material": "6.2.0", + "@mui/system": "6.2.0", + "@mui/x-date-pickers": "7.23.2", "ramda": "0.30.1", "react-loading-skeleton": "3.5.0", "react-number-format": "5.4.2" }, "devDependencies": { - "@babel/cli": "7.25.9", + "@babel/cli": "7.26.4", "@babel/core": "7.26.0", "@babel/plugin-transform-runtime": "7.25.9", "@babel/preset-env": "7.26.0", - "@babel/preset-react": "7.25.9", + "@babel/preset-react": "7.26.3", "@babel/preset-typescript": "7.26.0", - "@faker-js/faker": "9.2.0", - "@storybook/addon-essentials": "8.4.5", + "@faker-js/faker": "9.3.0", + "@storybook/addon-essentials": "8.4.7", "@storybook/addon-webpack5-compiler-babel": "3.0.3", - "@storybook/blocks": "8.4.5", - "@storybook/react": "8.4.5", - "@storybook/react-webpack5": "8.4.5", - "@stylistic/eslint-plugin": "2.11.0", + "@storybook/blocks": "8.4.7", + "@storybook/react": "8.4.7", + "@storybook/react-webpack5": "8.4.7", + "@stylistic/eslint-plugin": "2.12.1", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", - "@testing-library/react": "16.0.1", + "@testing-library/react": "16.1.0", "@testing-library/user-event": "14.5.2", "@types/jest": "29.5.14", - "@types/node": "22.9.1", + "@types/node": "22.10.2", "@types/ramda": "0.30.2", "@types/react": "18.3.12", "@types/uuid": "10.0.0", - "@typescript-eslint/eslint-plugin": "8.15.0", - "@typescript-eslint/parser": "8.15.0", + "@typescript-eslint/eslint-plugin": "8.18.0", + "@typescript-eslint/parser": "8.18.0", "babel-loader": "9.2.1", "babel-plugin-import": "1.13.8", "babel-plugin-module-resolver": "5.0.2", "date-fns": "4.1.0", - "eslint": "9.15.0", + "eslint": "9.17.0", "eslint-config-prettier": "9.1.0", - "eslint-import-resolver-typescript": "3.6.3", + "eslint-import-resolver-typescript": "3.7.0", "eslint-plugin-import": "2.31.0", "eslint-plugin-prettier": "5.2.1", "eslint-plugin-react": "7.37.2", - "eslint-plugin-react-hooks": "5.0.0", + "eslint-plugin-react-hooks": "5.1.0", "fs-extra": "11.2.0", "identity-obj-proxy": "3.0.0", "jest": "29.7.0", "jest-environment-jsdom": "29.7.0", - "prettier": "3.3.3", + "prettier": "3.4.2", "react": "18.3.1", "react-dom": "18.3.1", - "storybook": "8.4.5", + "storybook": "8.4.7", "styled-components": "6.1.13", "ts-jest": "29.2.5", "ts-loader": "9.5.1", - "typescript": "5.6.3", - "typescript-eslint": "8.15.0", + "typescript": "5.7.2", + "typescript-eslint": "8.18.0", "uuid": "11.0.3", - "webpack": "5.96.1" + "webpack": "5.97.1" }, "peerDependencies": { "date-fns": "^4.0.0", diff --git a/src/core/data-display/avatar/avatar.stories.tsx b/src/core/data-display/avatar/avatar.stories.tsx index d51b39bf..20500d0a 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' 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..7c80d10c 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' 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..baa6eddf 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' 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..1250a81f 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' 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..2bdc0b9b 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' 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..3e11d526 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' 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..ac16fc6a 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' 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..e322876d 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' 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..8f3ba6ef 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' 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..db7df2a2 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' 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..bd9d40b5 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' 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..00d8be6a 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' 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..c992d5c3 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' 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..cb5e4eb7 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' import IconButton from '.' const meta: Meta = { diff --git a/src/core/inputs/select/index.tsx b/src/core/inputs/select/index.tsx index 20cdf0f3..ddbe7589 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' 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..202531c1 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' 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..bd6dfd8a 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' 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..a3bcf69b 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' 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..07d6a032 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' 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..4fda5962 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' 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..6717feeb 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' 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..af5a00f8 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' 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..a967f8f7 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' 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..8da48903 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' 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..bd174ac3 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' 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..daefd6b5 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' 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..f3f4479b 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' import ExpansionPanel from '.' const meta: Meta = { @@ -136,7 +136,7 @@ export const expansionPanel: Story = { editable: false, disabled: false, summary: 'Pulp Fiction', - expandIcon: , + expandIcon: , actions: (