Merge pull request #361 from nginformatica/feat/update-date-fns

feat/update date fns

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.8",
+    "version": "0.34.9",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -35,8 +35,8 @@
         "@mui/icons-material": "6.1.6",
         "@mui/material": "6.1.6",
         "@mui/system": "6.1.6",
-        "@mui/x-date-pickers": "7.22.0",
-        "date-fns": "2.30.0",
+        "@mui/x-date-pickers": "7.22.2",
+        "date-fns": "4.1.0",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
         "react-number-format": "5.4.2"
@@ -48,24 +48,24 @@
         "@babel/preset-env": "7.26.0",
         "@babel/preset-react": "7.25.9",
         "@babel/preset-typescript": "7.26.0",
-        "@faker-js/faker": "9.1.0",
-        "@storybook/addon-essentials": "8.3.6",
+        "@faker-js/faker": "9.2.0",
+        "@storybook/addon-essentials": "8.4.2",
         "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-        "@storybook/blocks": "8.3.6",
-        "@storybook/react": "8.3.6",
-        "@storybook/react-webpack5": "8.3.6",
-        "@stylistic/eslint-plugin": "2.9.0",
+        "@storybook/blocks": "8.4.2",
+        "@storybook/react": "8.4.2",
+        "@storybook/react-webpack5": "8.4.2",
+        "@stylistic/eslint-plugin": "2.10.1",
         "@testing-library/dom": "10.4.0",
-        "@testing-library/jest-dom": "6.6.2",
+        "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.0.1",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.14",
-        "@types/node": "22.8.4",
+        "@types/node": "22.9.0",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.12.2",
-        "@typescript-eslint/parser": "8.12.2",
+        "@typescript-eslint/eslint-plugin": "8.13.0",
+        "@typescript-eslint/parser": "8.13.0",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -83,13 +83,13 @@
         "prettier": "3.3.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.3.6",
+        "storybook": "8.4.2",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
         "typescript": "5.6.3",
         "uuid": "11.0.2",
-        "webpack": "5.95.0"
+        "webpack": "5.96.1"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",

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

@@ -16,7 +16,7 @@ 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 { format } from 'date-fns'
 import type { ColumnSpec, DataTableController, Identifier } from './types'
 import type { Meta } from '@storybook/react'
 import Button from '@/core/inputs/button'

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

@@ -1,7 +1,7 @@
 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'
+import { format } from 'date-fns'
 import type { ColumnSpec } from './types'
 import DataTableWithHidden from '@/test/mocks/data-table-hidden-mock'
 import DataTableWithCrud from '@/test/mocks/data-table-mock'

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

@@ -9,7 +9,7 @@ import {
     Visibility as VisibilityIcon,
     VisibilityOff as VisibilityOffIcon
 } from '@mui/icons-material'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import { v4 as uuid } from 'uuid'
 import type { ColumnSpec, DataTableController, Identifier } from './types'
 import type { Meta } from '@storybook/react'

src/core/inputs/date-time/date-time.stories.tsx

@@ -17,6 +17,38 @@ const meta: Meta<typeof DateTime> = {
             options: ['date', 'time', 'datetime'],
             control: { type: 'radio' },
             description: 'The type of the picker'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the input'
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'The size of the input'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'The input disabled state'
+        },
+        error: {
+            control: 'boolean',
+            description: 'The input error state'
+        },
+        required: {
+            control: 'boolean',
+            description: 'The input required state'
+        },
+        margin: {
+            control: 'text',
+            description: 'The input margin'
+        },
+        padding: {
+            control: 'text',
+            description: 'The input padding'
+        },
+        style: {
+            control: 'object',
+            description: 'The input style'
         }
     }
 }
@@ -49,6 +81,14 @@ export const dateTime: Story = {
         return <DateTimeWrapper {...args} />
     },
     args: {
-        type: 'date'
+        type: 'date',
+        placeholder: 'Selecione',
+        fullWidth: true,
+        disabled: false,
+        error: false,
+        required: false,
+        margin: '',
+        padding: '',
+        style: {}
     }
 }

src/core/inputs/date-time/index.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable import/no-duplicates */
 import React from 'react'
 import { StaticDateTimePicker, renderTimeViewClock } from '@mui/x-date-pickers'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { DatePicker, DatePickerToolbar } from '@mui/x-date-pickers/DatePicker'
 import {
     DateTimePicker,
@@ -10,8 +9,7 @@ import {
 import { ptBR as ptBRTexts } from '@mui/x-date-pickers/locales'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { TimePicker, TimePickerToolbar } from '@mui/x-date-pickers/TimePicker'
-import format from 'date-fns/format'
-import ptBR from 'date-fns/locale/pt-BR'
+import { ptBR } from 'date-fns/locale'
 import type { DefaultProps } from '../../types'
 import type {
     DateOrTimeView,
@@ -50,8 +48,8 @@ export type TDateTime = DatePickerProps<Date> &
     IProps &
     DefaultProps
 
-const formatter = (weekday: Date) =>
-    format(weekday, 'eee', { locale: ptBR }).slice(0, 3)
+const formatter = (day: Date) =>
+    day.toLocaleDateString('pt-BR', { weekday: 'short' }).replace('.', '')
 
 const CustomDatePickerToolbar = (props: DatePickerToolbarProps<Date>) => {
     return (