@pautena/react-design-system 0.7.1 → 0.7.3

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",
   },
@@ -215,3 +215,31 @@ export const Loading: Story = {
     contentChildren: <SkeletonGrid />,
   },
 };
+
+export const Fetching: Story = {
+  args: {
+    fetching: true,
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    error: {
+      message: "There is no user with that id",
+    },
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
+  },
+};

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

@@ -1,13 +1,18 @@
 import React from "react";
-import { HeaderLayout } from "./header-layout";
+import { HeaderLayout, HeaderLayoutError } from "./header-layout";
 import { render, screen } from "~/tests/testing-library";
 import { Content, Header } from "../../components";
 import { Typography } from "@mui/material";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 describe("HeaderLayout", () => {
-  const renderComponent = () => {
+  const renderComponent = ({
+    loading,
+    fetching,
+    error,
+  }: { loading?: boolean; fetching?: boolean; error?: HeaderLayoutError } = {}) => {
     return render(
-      <HeaderLayout>
+      <HeaderLayout loading={loading} fetching={fetching} error={error}>
         <Header title="Lorem ipsum" subtitle="Dolor sit amet" />
         <Content>
           <Typography>Test content</Typography>
@@ -16,22 +21,82 @@ describe("HeaderLayout", () => {
     );
   };
 
-  it("would render the header", () => {
+  it("should render the header", () => {
     renderComponent();
 
     expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
     expect(screen.getByRole("heading", { level: 2, name: /dolor sit amet/i })).toBeInTheDocument();
   });
 
-  it("would render a main element", () => {
+  it("should render a main element", () => {
     renderComponent();
 
-    expect(screen.getByRole("main")).toBeInTheDocument();
+    expect(screen.getByRole("main")).toBeVisible();
   });
 
-  it("would render the content", () => {
+  it("should render the content", () => {
     renderComponent();
 
-    expect(screen.getByText(/test content/i)).toBeInTheDocument();
+    expect(screen.getByText(/test content/i)).toBeVisible();
+  });
+
+  it("should render a loading indicator if loading=true", () => {
+    renderComponent({ loading: true });
+
+    expectProgressIndicator();
+  });
+
+  describe("fetching=true", () => {
+    it("should render a loading indicator", () => {
+      renderComponent({ fetching: true });
+
+      expectProgressIndicator();
+    });
+
+    it("should render the content", () => {
+      renderComponent({ fetching: true });
+
+      expect(screen.getByText(/test content/i)).toBeVisible();
+    });
+  });
+
+  describe("error", () => {
+    it("should not render the error if there is no one", () => {
+      renderComponent({ error: undefined });
+
+      expect(screen.queryByText(/there has been an error/i)).not.toBeInTheDocument();
+    });
+
+    it("should render a title if there is an error without title", () => {
+      renderComponent({
+        error: {
+          message: "Invalid user id",
+        },
+      });
+
+      expect(screen.queryByText(/there has been an error/i)).toBeVisible();
+    });
+
+    it("should render a title if there is an error with title", () => {
+      renderComponent({
+        error: {
+          title: "We had an error",
+          message: "Invalid user id",
+        },
+      });
+
+      expect(screen.queryByText(/we had an error/i)).toBeVisible();
+    });
+
+    it("should render the message", () => {
+      renderComponent({
+        error: {
+          title: "We had an error",
+          message: "Invalid user id",
+        },
+      });
+
+      expect(screen.queryByText(/invalid user id/i)).toBeVisible();
+    });
   });
 });

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

@@ -1,22 +1,48 @@
-import { Box } from "@mui/material";
+import { Box, LinearProgress } from "@mui/material";
 import React from "react";
-import { ContentElement, HeaderElement } 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";
+
+export interface HeaderLayoutError {
+  icon?: PlaceholderIcon;
+  title?: string;
+  message: string;
+}
 
 export interface HeaderLayoutProps {
   loading?: boolean;
+  fetching?: boolean;
+  error?: HeaderLayoutError;
   children: [HeaderElement, ContentElement];
 }
 
-export const HeaderLayout = ({ loading, children }: HeaderLayoutProps) => {
+const DefaultErrorIcon = () => <ReportProblemIcon color="error" sx={{ width: 200, height: 200 }} />;
+
+export const HeaderLayout = ({ loading, children, fetching, error }: HeaderLayoutProps) => {
   const [headerElement, contentElement] = children;
 
   return (
     <TabProvider>
       <Box display="flex" flexDirection="column" height={1}>
         {headerElement}
-        {loading ? <LoadingArea /> : contentElement}
+        {fetching && (
+          <Box width={1}>
+            <LinearProgress />
+          </Box>
+        )}
+        {loading && <LoadingArea />}
+        {error && (
+          <Box mt={4}>
+            <Placeholder
+              icon={error.icon || DefaultErrorIcon}
+              title={error.title || "There has been an error"}
+              subtitle={error.message}
+            />
+          </Box>
+        )}
+        {!loading && !error && contentElement}
       </Box>
     </TabProvider>
   );