chore/refact stories

.babelrc.js

@@ -36,15 +36,6 @@ module.exports = {
             },
             'mui'
         ],
-        [
-            'import',
-            {
-                libraryName: '@mui/styles',
-                libraryDirectory: '',
-                camel2DashComponentName: false
-            },
-            'styles'
-        ],
         [
             'import',
             {

.storybook/main.ts

@@ -4,29 +4,16 @@ import path from 'path'
 const config: StorybookConfig = {
     framework: '@storybook/react-webpack5',
     stories: [
-        '../src/**/*.stories.mdx',
+        '../src/stories/**/*.mdx',
         '../src/**/*.stories.@(js|jsx|ts|tsx)'
     ],
-    features: {
-        storyStoreV7: false
-    },
-    addons: ['@storybook/addon-essentials'],
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-webpack5-compiler-babel'
+    ],
     docs: {
         autodocs: true
     },
-    typescript: {
-        check: false,
-        checkOptions: {},
-        reactDocgen: 'react-docgen-typescript',
-        reactDocgenTypescriptOptions: {
-            shouldExtractLiteralValuesFromEnum: true,
-            shouldRemoveUndefinedFromOptional: true,
-            propFilter: prop =>
-                prop.parent
-                    ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
-                    : true
-        }
-    },
     webpackFinal: async config => {
         if (config.resolve) {
             config.resolve.alias = {

.storybook/preview.ts

@@ -4,6 +4,7 @@ const preview: Preview = {
     parameters: {
         actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
+            expanded: true,
             matchers: {
                 color: /(background|color)$/i,
                 date: /Date$/

jest.config.js

@@ -6,12 +6,14 @@ module.exports = {
     collectCoverageFrom: [
         '<rootDir>/src/core/**/*.(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',
-        '!<rootDir>/src/core/navigation/breadcrumbs/index.tsx',
-        '!<rootDir>/src/core/inputs/select/index.tsx',
+        '!<rootDir>/src/core/feedback/tooltip/styles.ts',
+        '!<rootDir>/src/core/inputs/chip-field/index.tsx',
         '!<rootDir>/src/core/inputs/date-time/index.tsx',
-        '!<rootDir>/src/core/data-display/table/table-pagination.tsx',
-        '!<rootDir>/src/core/inputs/chip-field/index.tsx'
+        '!<rootDir>/src/core/inputs/select/index.tsx',
+        '!<rootDir>/src/core/navigation/breadcrumbs/index.tsx',
+        '!<rootDir>/src/core/surfaces/header/styles.ts',
     ],
     transform: {
         '.+\\.(ts|tsx)$': 'ts-jest'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.7",
+    "version": "0.34.8",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -32,41 +32,40 @@
     "dependencies": {
         "@emotion/react": "11.13.3",
         "@emotion/styled": "11.13.0",
-        "@mui/icons-material": "6.1.2",
-        "@mui/material": "6.1.2",
-        "@mui/styles": "6.1.2",
-        "@mui/system": "6.1.2",
-        "@mui/x-date-pickers": "7.18.0",
+        "@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",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
-        "react-number-format": "5.4.2",
-        "sprintf-js": "1.1.3",
-        "uuid": "10.0.0"
+        "react-number-format": "5.4.2"
     },
     "devDependencies": {
-        "@babel/cli": "7.25.7",
-        "@babel/core": "7.25.7",
-        "@babel/plugin-transform-runtime": "7.25.7",
-        "@babel/preset-env": "7.25.7",
-        "@babel/preset-typescript": "7.25.7",
-        "@faker-js/faker": "9.0.3",
-        "@storybook/addon-essentials": "7.6.17",
-        "@storybook/react": "7.6.17",
-        "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.8.0",
+        "@babel/cli": "7.25.9",
+        "@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-typescript": "7.26.0",
+        "@faker-js/faker": "9.1.0",
+        "@storybook/addon-essentials": "8.3.6",
+        "@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",
         "@testing-library/dom": "10.4.0",
-        "@testing-library/jest-dom": "6.5.0",
+        "@testing-library/jest-dom": "6.6.2",
         "@testing-library/react": "16.0.1",
         "@testing-library/user-event": "14.5.2",
-        "@types/jest": "29.5.13",
-        "@types/node": "22.7.4",
+        "@types/jest": "29.5.14",
+        "@types/node": "22.8.4",
         "@types/ramda": "0.30.2",
-        "@types/react": "18.3.11",
-        "@types/sprintf-js": "1.1.4",
+        "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.8.0",
-        "@typescript-eslint/parser": "8.8.0",
+        "@typescript-eslint/eslint-plugin": "8.12.2",
+        "@typescript-eslint/parser": "8.12.2",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -75,20 +74,21 @@
         "eslint-import-resolver-typescript": "3.6.3",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.37.1",
-        "eslint-plugin-react-hooks": "4.6.2",
+        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react-hooks": "5.0.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",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "7.6.17",
+        "storybook": "8.3.6",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
-        "typescript": "5.6.2",
+        "typescript": "5.6.3",
+        "uuid": "11.0.2",
         "webpack": "5.95.0"
     },
     "peerDependencies": {

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

@@ -16,7 +16,6 @@ const meta: Meta<typeof Actions> = {
                 disable: true
             }
         },
-
         prefix: {
             table: {
                 disable: true
@@ -26,12 +25,12 @@ const meta: Meta<typeof Actions> = {
             options: ['flex-end', 'flex-start', 'center'],
             control: { type: 'radio' },
             description:
-                "The buttons position. Must be `'flex-end' | 'flex-start' | 'center'`"
+                'The buttons position. Must be `flex-end | flex-start | center`'
         },
         buttons: {
             control: false,
             description:
-                "The buttons inner text. Must be `Array<'confirm' | 'cancel'>`" +
+                "The buttons inner text. Must be `Array<'confirm' | 'cancel'>`. " +
                 "If not informed, it will be used the default 'Cancelar' and 'Confirmar'"
         },
         labels: {
@@ -42,15 +41,7 @@ const meta: Meta<typeof Actions> = {
                 control: 'text'
             },
             description:
-                'The buttons inner label. Must be and object with the cancel and confirm keys.'
-        },
-        padding: {
-            control: 'text',
-            description: 'The buttons padding'
-        },
-        margin: {
-            control: 'text',
-            description: 'The buttons margin.'
+                'The buttons inner label. Must be and object with the cancel and confirm keys'
         },
         actionButtonColor: {
             options: [
@@ -65,21 +56,30 @@ const meta: Meta<typeof Actions> = {
             ],
             control: { type: 'radio' },
             description:
-                'The "Confirmar" button color.' +
-                'Must be `"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning"`' +
+                'The "Confirmar" button color. Must be ' +
+                '`inherit | primary | secondary | `. ' +
+                '`success | error | info | warning`. ' +
                 'If not set, the default is "secondary"'
         },
+        padding: {
+            control: 'text',
+            description: 'The buttons padding'
+        },
+        margin: {
+            control: 'text',
+            description: 'The buttons margin'
+        },
         disabled: {
             control: 'boolean',
-            description: 'If `true`, the buttons are disabled.'
+            description: 'If `true`, the buttons are disabled'
         },
         disabledCancel: {
             control: 'boolean',
-            description: 'If `true`, the Cancel button is disabled.'
+            description: 'If `true`, the Cancel button is disabled'
         },
         disabledConfirm: {
             control: 'boolean',
-            description: 'If `true`, the Confirm button is disabled.'
+            description: 'If `true`, the Confirm button is disabled'
         },
         onCancel: {
             control: false,

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

@@ -1,20 +1,59 @@
 import React from 'react'
-import type { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import Advertise from '.'
 
-export default {
+const meta: Meta<typeof Advertise> = {
     title: 'DataDisplay/Advertise',
-    component: Advertise
-} as Meta<typeof Advertise>
+    component: Advertise,
+    argTypes: {
+        comment: {
+            control: 'text',
+            description: 'The advertise upper text'
+        },
+        author: {
+            control: 'text',
+            description: 'The advertise bottom text'
+        },
+        commentStyle: {
+            control: 'object',
+            description: 'The advertise comment style'
+        },
+        authorStyle: {
+            control: 'object',
+            description: 'The advertise author style'
+        },
+        style: {
+            control: 'object',
+            description: 'The advertise container style'
+        },
+        padding: {
+            control: 'text',
+            description: 'The advertise container padding'
+        },
+        margin: {
+            control: 'text',
+            description: 'The advertise container margin'
+        }
+    }
+}
 
-const Template: StoryFn<typeof Advertise> = args => <Advertise {...args} />
+export default meta
 
-export const Default = Template.bind({})
+type Story = StoryObj<typeof Advertise>
 
-Default.args = {
-    comment:
-        'Be like water. You put water into a cup. \
+export const advertise: Story = {
+    render: ({ ...args }) => {
+        return <Advertise {...args} />
+    },
+    args: {
+        comment:
+            'Be like water. You put water into a cup. \
         It becomes the cup. You put water into a bottle. It becomes the bottle.',
-    author: 'Bruce Lee',
-    children: 'Advertise'
+        author: 'Bruce Lee',
+        commentStyle: {},
+        authorStyle: {},
+        style: {},
+        margin: '0px',
+        padding: '0px'
+    }
 }

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

@@ -9,14 +9,22 @@ const meta: Meta<typeof Avatar> = {
     title: 'DataDisplay/Avatar',
     component: Avatar,
     argTypes: {
+        name: {
+            control: 'text',
+            description: 'The avatar name. Displayed in case there is no image'
+        },
+        src: {
+            control: 'text',
+            description: 'The avatar src image'
+        },
         icon: {
-            table: {
-                disable: true
-            }
+            control: false,
+            description:
+                'The avatar icon. Displayed in case there is no image and no name'
         },
         style: {
             control: 'object',
-            description: 'The avatar style.'
+            description: 'The avatar style'
         }
     }
 }