Merge pull request #364 from nginformatica/feat/implement-ds-icons

Feat/implement ds icons

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     coveragePathIgnorePatterns: ['stories.(ts|tsx)'],
     collectCoverageFrom: [
         '<rootDir>/src/core/**/*.(ts|tsx)',
+        '!<rootDir>/src/icons/**/*.(ts|tsx)',
         '!<rootDir>/src/core/data-display/data-table/*.(ts|tsx)',
         '!<rootDir>/src/core/data-display/table/table-pagination.tsx',
         '!<rootDir>/src/core/feedback/dialog-v2/index.ts',

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",

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: <Face />,
+        icon: <IconFace />,
         style: { width: '64px', height: '64px' }
     }
 }

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}>
-                        <FirstPage />
+                        <IconFirstPage />
                     </MuiIconButton>
                 )}
                 <MuiIconButton
                     disabled={page === 0 || clickable}
                     aria-label='previous page'
                     onClick={handleBackButtonClick}>
-                    <KeyboardArrowLeft />
+                    <IconNavigateBefore />
                 </MuiIconButton>
                 <MuiIconButton
                     disabled={page >= totalPages || clickable}
                     aria-label='next page'
                     onClick={handleNextButtonClick}>
-                    <KeyboardArrowRight />
+                    <IconNavigateNext />
                 </MuiIconButton>
                 {showLastButton && (
                     <MuiIconButton
                         disabled={page >= totalPages || clickable}
                         aria-label='last page'
                         onClick={handleLastPageButtonClick}>
-                        <LastPage />
+                        <IconLastPage />
                     </MuiIconButton>
                 )}
             </PaginationWrapper>

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)
                                 )
                             }}>
-                            <CheckIcon />
+                            <IconCheck />
                         </DataTableAction>
                         <DataTableAction
                             label='CancelIcon'
                             onClick={() => {
                                 controllerRef.current.popRowView(data.id)
                             }}>
-                            <CancelIcon />
+                            <IconClose />
                         </DataTableAction>
                     </div>
                 </div>
@@ -615,12 +615,12 @@ export const Crud = () => {
                             <DataTableAction
                                 label='Edit'
                                 onClick={handleEdit(id)}>
-                                <EditIcon />
+                                <IconEdit />
                             </DataTableAction>
                             <DataTableAction
                                 label='Delete'
                                 onClick={handleDelete(id)}>
-                                <DeleteIcon />
+                                <IconDelete />
                             </DataTableAction>
                         </div>
                     )
@@ -631,12 +631,12 @@ export const Crud = () => {
                         <DataTableAction
                             label='Save'
                             onClick={handleSave(id, isNew)}>
-                            <SaveIcon />
+                            <IconSave />
                         </DataTableAction>
                         <DataTableAction
                             label='Cancel'
                             onClick={handleView(id)}>
-                            <CancelIcon />
+                            <IconClose />
                         </DataTableAction>
                     </div>
                 )