@pautena/react-design-system 0.7.2 → 0.7.3

package/src/components/value-displays/value-boolean/value-boolean.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Switch, Typography, useTheme } from "@mui/material";
+import { Box, Switch, Typography, useTheme } from "@mui/material";
 import React from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
@@ -7,10 +7,10 @@ import {
   DefaultPlaceholder,
   EditableValueProps,
   useEditableValueDisplay,
+  ValueEditButton,
   ValueEditButtons,
 } from "../value-base";
-import { ValueContent } from "../value-content";
-import EditIcon from "@mui/icons-material/Edit";
+import { ValueContent, getValueContentLabelId } from "../value-content";
 
 export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 
@@ -25,6 +25,7 @@ export const ValueBoolean = ({
   dense,
   onEdit = () => null,
 }: ValueBooleanProps) => {
+  const id = getValueContentLabelId(label);
   const { typography } = useTheme();
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(value, onEdit);
@@ -35,11 +36,21 @@ export const ValueBoolean = ({
     <ValueContent label={label} dense={dense}>
       {isEditing ? (
         <Box display="flex" alignItems="center">
-          <Switch checked={editValue} onChange={(e) => setEditValue(e.target.checked)} />
-          <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />
+          <Switch
+            size={dense ? "small" : "medium"}
+            checked={editValue}
+            onChange={(e) => setEditValue(e.target.checked)}
+          />
+          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
         </Box>
       ) : (
-        <Box display="flex" alignItems="center">
+        <Box
+          display="flex"
+          alignItems="center"
+          aria-labelledby={id}
+          role="checkbox"
+          aria-checked={value}
+        >
           {value === undefined ? (
             <Typography variant="h5">{placeholder}</Typography>
           ) : value ? (
@@ -47,11 +58,7 @@ export const ValueBoolean = ({
           ) : (
             <CloseIcon color="error" sx={iconSx} />
           )}
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Box>
       )}
     </ValueContent>

package/src/components/value-displays/value-content/value-content.test.tsx

@@ -5,9 +5,17 @@ import { ValueContent } from "./value-content";
 import userEvent from "@testing-library/user-event";
 
 describe("ValueContent", () => {
-  const renderComponent = ({ tooltip }: { tooltip?: string } = {}) => {
+  const renderComponent = ({
+    tooltip,
+    hideLabel,
+  }: { tooltip?: string; hideLabel?: boolean } = {}) => {
     render(
-      <ValueContent label="lorem ipsum" tooltip={tooltip} tooltipEnterDelay={0}>
+      <ValueContent
+        label="lorem ipsum"
+        tooltip={tooltip}
+        tooltipEnterDelay={0}
+        hideLabel={hideLabel}
+      >
         <Typography>Test content</Typography>
       </ValueContent>,
     );
@@ -16,7 +24,13 @@ describe("ValueContent", () => {
   it("should render a label", () => {
     renderComponent();
 
-    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeVisible();
+  });
+
+  it("shouldn't render a label if hideLabel=true", () => {
+    renderComponent({ hideLabel: true });
+
+    expect(screen.queryByRole("label", { name: /lorem ipsum/i })).not.toBeInTheDocument();
   });
 
   describe("tooltip", () => {
@@ -25,7 +39,7 @@ describe("ValueContent", () => {
 
       await userEvent.hover(screen.getByText(/test content/i));
 
-      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeInTheDocument();
+      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeVisible();
     });
 
     it("shouldn't render a tooltip if it's not defined", () => {
@@ -39,12 +53,12 @@ describe("ValueContent", () => {
     it("should render the children if tooltip is defined", () => {
       renderComponent({ tooltip: "dolor sit amet" });
 
-      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+      expect(screen.getByText(/test content/i)).toBeVisible();
     });
     it("should render the children if tooltip is undefined", () => {
       renderComponent({ tooltip: undefined });
 
-      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+      expect(screen.getByText(/test content/i)).toBeVisible();
     });
   });
 });

package/src/components/value-displays/value-content/value-content.tsx

@@ -1,4 +1,4 @@
-import { Box, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import React from "react";
 
 export const getValueContentLabelId = (label: string): string =>
@@ -10,6 +10,11 @@ export interface ValueContentProps {
    */
   label: string;
 
+  /**
+   * If true, the label will not be shown
+   */
+  hideLabel?: boolean;
+
   /**
    * If defined, a tooltip is going to be added arround the children;
    */
@@ -30,6 +35,11 @@ export interface ValueContentProps {
    * False by default
    */
   dense?: boolean;
+
+  /**
+   * Custom styles for the root component
+   */
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -37,24 +47,28 @@ export interface ValueContentProps {
  */
 export const ValueContent = ({
   label,
+  hideLabel,
   tooltip,
   tooltipEnterDelay = 2000,
   children,
   dense,
+  sx,
 }: ValueContentProps) => {
   const { typography } = useTheme();
   const id = getValueContentLabelId(label);
 
   return (
-    <Box width={1} lineHeight={dense ? 0 : undefined}>
-      <Typography
-        variant={dense ? "caption" : "subtitle2"}
-        role="label"
-        id={id}
-        lineHeight={dense ? typography.pxToRem(15) : undefined}
-      >
-        {label}
-      </Typography>
+    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>
+      {!hideLabel && (
+        <Typography
+          variant={dense ? "caption" : "subtitle2"}
+          role="label"
+          id={id}
+          lineHeight={dense ? typography.pxToRem(15) : undefined}
+        >
+          {label}
+        </Typography>
+      )}
       {tooltip ? (
         <Tooltip title={tooltip} placement="top" enterDelay={tooltipEnterDelay}>
           {children}

package/src/components/value-displays/value-datetime/value-datetime.stories.tsx

@@ -73,3 +73,14 @@ export const EditableDate: Story = {
     editInputType: "date",
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: new Date(2022, 8, 22),
+    format: "yyyy/MM/dd",
+    editable: true,
+    editInputType: "date",
+    dense: true,
+  },
+};

package/src/components/value-displays/value-datetime/value-datetime.test.tsx

@@ -77,13 +77,13 @@ describe("ValueDatetime", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input with the value if the edit button is clicked", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       assertDatetimeInputValue(screen.getByRole("textbox"), {
         value: DummyValue,
@@ -105,9 +105,9 @@ describe("ValueDatetime", () => {
           fmt,
         });
 
-        await userEvent.click(screen.getByTestId("EditIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /edit/i }));
         pickDatetime(screen.getByRole("textbox"), newValue, fmt);
-        await userEvent.click(screen.getByTestId("CheckIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
         expect(onEdit).toHaveBeenCalledTimes(1);
         expect(onEdit).toHaveBeenCalledWith(expectedDate);
@@ -117,9 +117,9 @@ describe("ValueDatetime", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -127,10 +127,10 @@ describe("ValueDatetime", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       assertDatetimeInputValue(screen.getByRole("textbox"), {
         value: DummyValue,

package/src/components/value-displays/value-datetime/value-datetime.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, TextField, Typography } from "@mui/material";
+import { Box, TextField, Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
 import {
@@ -7,8 +7,7 @@ import {
   EditableValueProps,
 } from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
-import EditIcon from "@mui/icons-material/Edit";
+import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
 import { DatePicker, DateTimePicker, TimePicker } from "@mui/x-date-pickers";
 
 export type EditInputType = "datetime" | "date" | "time";
@@ -51,16 +50,24 @@ export const ValueDatetime = ({
       : DatePicker;
 
   return (
-    <ValueContent label={label} tooltip={value} dense={dense}>
+    <ValueContent
+      label={label}
+      hideLabel={isEditing}
+      tooltip={value}
+      dense={dense}
+      sx={{ display: "flex", flexDirection: "column" }}
+    >
       {isEditing ? (
         <EditPickerComponent
           value={editValue}
           format={fmt}
+          label={label}
           onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}
           slots={{
             textField: (params) => (
               <TextField
                 {...params}
+                size="small"
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (
@@ -68,11 +75,12 @@ export const ValueDatetime = ({
                       {params.InputProps?.endAdornment}
                       <ValueEditButtons
                         onClickCancel={cancelEdit}
-                        onSubmitEdit={submitEdit}
+                        onClickSubmit={submitEdit}
                         sx={{ ml: 2 }}
                       />
                     </>
                   ),
+                  sx: { marginY: !dense ? 1 : 0.2 },
                 }}
               />
             ),
@@ -83,11 +91,7 @@ export const ValueDatetime = ({
           <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
             {value}
           </Typography>
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Box>
       )}
     </ValueContent>

package/src/components/value-displays/value-rating/value-rating.stories.tsx

@@ -43,3 +43,13 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: 4,
+    maxRating: 7,
+    dense: true,
+    editable: true,
+  },
+};

package/src/components/value-displays/value-rating/value-rating.test.tsx

@@ -59,13 +59,13 @@ describe("ValueRating", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input for each star + 1 for the zero value if the edit button is clicked", async () => {
       renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getAllByRole("radio")).toHaveLength(6);
     });
@@ -73,9 +73,9 @@ describe("ValueRating", () => {
     it("should submit the new value if is edited", async () => {
       const { onEdit } = renderComponent({ value: 2, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
-      await userEvent.click(screen.getAllByRole("radio")[3]); // Click the fourth star
-      await userEvent.click(screen.getByTestId("CheckIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.click(screen.getByRole("radio", { name: /4 stars/i }));
+      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
       expect(onEdit).toHaveBeenCalledTimes(1);
       expect(onEdit).toHaveBeenCalledWith(4);
@@ -84,9 +84,9 @@ describe("ValueRating", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.click(screen.getAllByRole("radio")[3]);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -94,10 +94,10 @@ describe("ValueRating", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
-      await userEvent.click(screen.getAllByRole("radio")[3]);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.click(screen.getByLabelText(/3 stars/i));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
     });

package/src/components/value-displays/value-rating/value-rating.tsx

@@ -1,6 +1,6 @@
 import { Box, IconButton, Rating } from "@mui/material";
 import React from "react";
-import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
+import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
 import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
 import EditIcon from "@mui/icons-material/Edit";
@@ -33,14 +33,16 @@ export const ValueRating = ({
           max={maxRating}
           size={dense ? "small" : "medium"}
           value={isEditing ? editValue : value}
-          onChange={(_, newValue) => newValue && setEditValue(newValue)}
+          onChange={(e, newValue) => {
+            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {
+              setEditValue(parseInt((e.currentTarget as any).value, 10));
+            } else if (newValue) {
+              setEditValue(newValue);
+            }
+          }}
         />
-        {editable && !isEditing && (
-          <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-            <EditIcon />
-          </IconButton>
-        )}
-        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />}
+        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}
+        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}
       </Box>
     </ValueContent>
   );

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -61,3 +61,12 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: "lorem ipsum",
+    dense: true,
+    editable: true,
+  },
+};

package/src/components/value-displays/value-text/value-text.test.tsx

@@ -69,13 +69,13 @@ describe("ValueText", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input with the value if the edit button is clicked", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
     });
@@ -83,10 +83,10 @@ describe("ValueText", () => {
     it("should submit the new value if is edited", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("CheckIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
       expect(onEdit).toHaveBeenCalledTimes(1);
       expect(onEdit).toHaveBeenCalledWith("new value");
@@ -95,10 +95,10 @@ describe("ValueText", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -106,13 +106,24 @@ describe("ValueText", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
     });
+
+    it("should call onEdit if the enter button is pressed", async () => {
+      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.clear(screen.getByRole("textbox"));
+      await userEvent.type(screen.getByRole("textbox"), "new value{enter}");
+
+      expect(onEdit).toHaveBeenCalledTimes(1);
+      expect(onEdit).toHaveBeenCalledWith("new value");
+    });
   });
 });

package/src/components/value-displays/value-text/value-text.tsx

@@ -1,14 +1,14 @@
-import { IconButton, TextField, Typography } from "@mui/material";
-import React from "react";
+import { Typography, TextField } from "@mui/material";
+import React, { useEffect, useRef } from "react";
 import {
   BaseValueProps,
   DefaultPlaceholder,
   EditableValueProps,
   useEditableValueDisplay,
+  ValueEditButton,
   ValueEditButtons,
 } from "../value-base";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import EditIcon from "@mui/icons-material/Edit";
 
 export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 
@@ -23,30 +23,43 @@ export const ValueText = ({
   dense,
   onEdit = () => null,
 }: ValueTextProps) => {
+  const editInputRef = useRef<HTMLInputElement>(null);
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(valueProp?.toString(), onEdit);
   const id = getValueContentLabelId(label);
   const value = valueProp?.toString() || placeholder;
 
+  const editKeyPressListener = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      onEdit((e.target as any).value);
+    }
+  };
+
+  useEffect(() => {
+    editInputRef.current?.addEventListener("keypress", editKeyPressListener);
+    return () => editInputRef.current?.removeEventListener("keypress", editKeyPressListener);
+  }, [editInputRef.current]);
+
   return (
-    <ValueContent label={label} tooltip={value} dense={dense}>
+    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <TextField
+          inputRef={editInputRef}
           value={editValue}
+          label={label}
           size="small"
           onChange={(e) => setEditValue(e.target.value)}
           InputProps={{
-            endAdornment: <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />,
+            endAdornment: (
+              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
+            ),
           }}
+          sx={{ marginY: !dense ? 1 : 0 }}
         />
       ) : (
         <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
           {value}
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Typography>
       )}
     </ValueContent>

package/src/generators/model-form/model-form.test.tsx

@@ -115,5 +115,5 @@ describe("ModelForm", () => {
       codes: ["foo", "bar"],
       identifiers: ["1", "2", "3"],
     });
-  });
+  }, 20000);
 });

package/src/generators/model-router/model-router.test.tsx

@@ -711,7 +711,7 @@ describe("ModelRouter", () => {
       const newInstance = await actions.fullfillModelForm({ model, submit: false });
 
       expectModelFieldInputValue(model.fields, newInstance);
-    });
+    }, 20000);
 
     it("would make a request when the form is submitted", async () => {
       const { onSubmitNewItem, model } = await renderComponent({ screen: "add" });
@@ -721,7 +721,7 @@ describe("ModelRouter", () => {
       expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, {
         ...newInstance,
       });
-    });
+    }, 20000);
 
     it("would show a loading indicator when the request is in progress", async () => {
       const { model } = await renderComponent({ screen: "add" });
@@ -729,7 +729,7 @@ describe("ModelRouter", () => {
       await actions.fullfillModelForm({ model, submit: true });
 
       expectProgressIndicator();
-    });
+    }, 20000);
 
     it("would show a success message if the request finish with a success", async () => {
       renderAddScreen();

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
-import { withMemoryRouter } from "~/storybook";
+import { withLocalizationProvider, withMemoryRouter } from "~/storybook";
 import { withFullHeight } from "../../storybook";
 import { Content, Header, HeaderProps, HeaderTab, SkeletonGrid, TabPanel } from "../../components";
 import { Box, Typography } from "@mui/material";
@@ -64,7 +64,7 @@ const DummyHeaderLayout = ({ headerProps, contentChildren, ...rest }: HeaderLayo
 export default {
   title: "Layouts/HeaderLayout",
   component: DummyHeaderLayout,
-  decorators: [withMemoryRouter(), withFullHeight],
+  decorators: [withMemoryRouter(), withFullHeight, withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },

package/src/layouts/header-layout/header-layout.tsx

@@ -1,12 +1,6 @@
 import { Box, LinearProgress } from "@mui/material";
 import React from "react";
-import {
-  ContentElement,
-  HeaderElement,
-  Placeholder,
-  PlaceholderIcon,
-  PlaceholderIconArgs,
-} from "../../components";
+import { ContentElement, HeaderElement, Placeholder, PlaceholderIcon } from "../../components";
 import { LoadingArea } from "../../components/feedback/loading-area";
 import { TabProvider } from "../../providers";
 import ReportProblemIcon from "@mui/icons-material/ReportProblem";