Merge branch 'development' into dependabot/npm_and_yarn/fortawesome/r…

…eact-fontawesome-0.2.2

.storybook/main.ts

@@ -5,7 +5,9 @@ module.exports = {
     '../app/react/stories/**/*.stories.mdx',
     '../app/react/stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+
   staticDirs: ['../cypress/test_files'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -15,10 +17,12 @@ module.exports = {
     '@storybook/addon-webpack5-compiler-babel',
     '@chromatic-com/storybook'
   ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
+
   previewHead: head => `
     ${head}
     <style>
@@ -29,6 +33,7 @@ module.exports = {
       }
     </style>
   `,
+
   webpackFinal: async config => {
     config.plugins.push(new MiniCssExtractPlugin({}));
     return {
@@ -39,7 +44,12 @@ module.exports = {
       },
     };
   },
+
   docs: {
     autodocs: true,
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

.storybook/preview.js

@@ -7,7 +7,6 @@ configureActions({
 });
 
 export const parameters = {
-  actions: { argTypesRegex: '^on.\*' } ,
   controls: {
     matchers: {
       color: /(background|color)$/i,

app/react/App/styles/globals.css

@@ -1833,10 +1833,6 @@ input[type="range"]::-ms-fill-lower {
   margin-top: 1.5rem;
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -3129,19 +3125,14 @@ input[type="range"]::-ms-fill-lower {
   padding-bottom: 2rem;
 }
 
-.py-\[3px\] {
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-
 .py-\[2px\] {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
-.py-\[1px\] {
-  padding-top: 1px;
-  padding-bottom: 1px;
+.py-\[3px\] {
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .pb-14 {
@@ -3289,14 +3280,6 @@ input[type="range"]::-ms-fill-lower {
   line-height: 1rem;
 }
 
-.text-\[8px\] {
-  font-size: 8px;
-}
-
-.text-\[10px\] {
-  font-size: 10px;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -3511,6 +3494,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(55 48 163 / var(--tw-text-opacity));
 }
 
+.text-primary-900 {
+  --tw-text-opacity: 1;
+  color: rgb(49 46 129 / var(--tw-text-opacity));
+}
+
 .text-red-800 {
   --tw-text-opacity: 1;
   color: rgb(155 28 28 / var(--tw-text-opacity));
@@ -3546,11 +3534,6 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
-.text-primary-900 {
-  --tw-text-opacity: 1;
-  color: rgb(49 46 129 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }

app/react/stories/ConfirmationModal.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { action } from '@storybook/addon-actions';
 import { Provider } from 'react-redux';
 import { ConfirmationModal } from 'app/V2/Components/UI/ConfirmationModal';
@@ -9,10 +10,7 @@ import { Translate } from 'app/I18N';
 const meta: Meta<typeof ConfirmationModal> = {
   title: 'Components/Modal/ConfirmationModal',
   component: ConfirmationModal,
-  argTypes: {
-    onAcceptClick: { action: 'onAcceptClick' },
-    onCancelClick: { action: 'onCancelClick' },
-  },
+  args: { onAcceptClick: fn(), onCancelClick: fn() },
   parameters: {
     actions: {
       handles: ['change'],

app/react/stories/Forms/Checkbox.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
 import { Checkbox } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { Provider } from 'react-redux';
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Forms/Checkbox',
   component: Checkbox,
-  argTypes: {
-    onChange: { action: 'changed' },
+  args: {
+    onChange: fn(),
   },
 };
 

app/react/stories/Forms/ColorPicker.stories.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider } from 'jotai';
 import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { action } from '@storybook/addon-actions';
 import { ColorPicker } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore, atomsGlobalState } from 'V2/shared/testingHelpers';
 
 const meta: Meta<typeof ColorPicker> = {
   title: 'Forms/ColorPicker',
   component: ColorPicker,
-  argTypes: {
-    onChange: { action: 'onChange' },
+  args: {
+    onChange: fn(),
   },
   parameters: {
     actions: {

app/react/stories/Forms/DatePicker.stories.tsx

@@ -3,16 +3,17 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { Provider } from 'jotai';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
 import { DatePicker } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore, atomsGlobalState } from 'V2/shared/testingHelpers';
 
 const meta: Meta<typeof DatePicker> = {
   title: 'Forms/DatePicker',
   component: DatePicker,
-  argTypes: {
-    onChange: { action: 'onChange' },
-    onBlur: { action: 'onBlur' },
-    clearFieldAction: { action: 'clearFieldAction' },
+  args: {
+    onChange: fn(),
+    onBlur: fn(),
+    clearFieldAction: fn(),
   },
   parameters: {
     actions: {

app/react/stories/Forms/DateRangePicker.stories.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
 import { DateRangePicker } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 
 const meta: Meta<typeof DateRangePicker> = {
   title: 'Forms/DateRangePicker',
   component: DateRangePicker,
-  argTypes: {
-    onFromDateSelected: { action: 'onFromDateSelected' },
-    onToDateSelected: { action: 'onToDateSelected' },
+  args: {
+    onFromDateSelected: fn(),
+    onToDateSelected: fn(),
   },
   parameters: {
     actions: {

app/react/stories/Forms/Geolocation.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
 import { Geolocation } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { Provider } from 'react-redux';
 
 const meta: Meta<typeof Geolocation> = {
   title: 'Forms/Geolocation',
   component: Geolocation,
-  argTypes: {
-    onChange: { action: 'changed' },
+  args: {
+    onChange: fn(),
   },
 };
 

app/react/stories/Forms/RadioSelect.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
 import { RadioSelect } from 'app/V2/Components/Forms';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { Provider } from 'react-redux';
 
 const meta: Meta<typeof RadioSelect> = {
   title: 'Forms/RadioSelect',
   component: RadioSelect,
-  argTypes: {
-    onChange: { action: 'changed' },
+  args: {
+    onChange: fn(),
   },
 };
 

app/react/stories/PDF.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Provider } from 'react-redux';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { PDF } from 'V2/Components/PDFViewer';
@@ -8,7 +9,7 @@ import { highlights } from './fixtures/PDFStoryFixtures';
 const meta: Meta<typeof PDF> = {
   title: 'Viewers/PDF',
   component: PDF,
-  argTypes: { onSelect: { action: 'selected' }, onDeselect: { action: 'unselected' } },
+  args: { onSelect: fn(), onDeselect: fn() },
 };
 
 type Story = StoryObj<typeof PDF>;

app/react/stories/Paginator.stories.tsx

@@ -8,7 +8,6 @@ import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 const meta: Meta<typeof Paginator> = {
   title: 'Components/Paginator',
   component: Paginator,
-  argTypes: {},
 };
 
 type Story = StoryObj<typeof Paginator>;

package.json

@@ -270,14 +270,15 @@
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@chromatic-com/storybook": "^1.3.4",
     "@cypress/react18": "^2.0.0",
-    "@storybook/addon-actions": "^8.0.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-viewport": "^8.0.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-webpack5": "^8.0.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -378,7 +379,7 @@
     "sass": "^1.74.1",
     "sass-loader": "14.2.1",
     "sharp": "^0.33.2",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.10",
     "stream-mock": "^2.0.5",
     "supertest": "7.0.0",
     "svg-inline-loader": "^0.8.2",