@pautena/react-design-system 0.2.0 → 0.3.1

package/src/generators/model-router/screens/update-screen.tsx

@@ -2,8 +2,9 @@ import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Content, Header } from "~/components";
 import { BasicModelInstance, ModelForm } from "~/generators";
+import { useNavigateWhenValueChanges } from "~/hooks";
 import { HeaderLayout } from "../../../layouts";
-import { useNotificationCenter } from "../../../providers";
+import { useNotificationCenter, useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
 
@@ -55,16 +56,24 @@ export const UpdateScreen = <T extends BasicModelInstance>({
     onRequestUpdateItem(id);
   }, [id]);
 
-  useEffect(() => {
-    if (submitUpdateItemRequest.success) {
-      show({
-        title: "Item updated",
-        message: `The item ${id} has been updated successfully`,
-        severity: "success",
-      });
-      navigate(`${basePath}/`);
-    }
-  }, [submitUpdateItemRequest.success]);
+  useNotifyWhenValueChanges(
+    {
+      title: "Item updated",
+      message: `The item ${id} has been updated successfully`,
+      severity: "success",
+    },
+    !!submitUpdateItemRequest.success,
+    { from: false, to: true },
+  );
+  useNavigateWhenValueChanges(`${basePath}/`, !!submitUpdateItemRequest.success, {
+    from: false,
+    to: true,
+  });
+  useNotifyWhenValueChanges(
+    { title: "We had an error", message: submitUpdateItemRequest.error || "", severity: "error" },
+    !!submitUpdateItemRequest.error,
+    { from: false, to: true },
+  );
 
   return (
     <HeaderLayout loading={loading}>
@@ -75,12 +84,12 @@ export const UpdateScreen = <T extends BasicModelInstance>({
           {
             id: "list",
             text: modelName,
-            link: "/",
+            link: `${basePath}/`,
           },
           {
             id: "update",
             text: `Edit ${id}`,
-            link: `/${id}/update`,
+            link: `${basePath}/${id}/update`,
           },
         ]}
       />

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

@@ -1,6 +1,10 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { withMemoryRouter, withNotificationCenter } from "../../../storybook";
+import {
+  withLocalizationProvider,
+  withMemoryRouter,
+  withNotificationCenter,
+} from "../../../storybook";
 import { ModelRouter } from "../model-router";
 import { IdleRequest } from "../model-router.types";
 import { MockInstance, mockModel } from "../../generators.mock";
@@ -16,10 +20,13 @@ import {
   onSubmitUpdateAction,
   REQUEST_TIMEOUT,
 } from "./templates";
+import { Route, Routes, useNavigate } from "react-router-dom";
+import { Box, Button, Typography } from "@mui/material";
 
 interface DummyModelRouterProps {
   requestTimeout: number;
   initialData: MockInstance[];
+  basePath?: string;
   deleteFeature?: boolean;
   updateFeature?: boolean;
   addFeature?: boolean;
@@ -36,6 +43,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
   const {
     requestTimeout,
     initialData,
+    basePath = "",
     deleteFeature = true,
     updateFeature = true,
     addFeature = true,
@@ -130,6 +138,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
       {...args}
       modelName="Items"
       model={mockModel}
+      basePath={basePath}
       deleteFeature={deleteFeature}
       updateFeature={updateFeature}
       addFeature={addFeature}
@@ -163,13 +172,55 @@ const args: DummyModelRouterProps = {
   onSubmitUpdateAction,
   onRequestDeleteAction,
 };
-
 DummyModelRouter.args = args;
 
+export const InternalModelRouter = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Box>
+            <Typography>Internal model route</Typography>
+            <Button variant="contained" onClick={() => navigate("/internal")}>
+              Go to Internal
+            </Button>
+          </Box>
+        }
+      />
+      <Route
+        path="/internal/*"
+        element={
+          <ModelRouter
+            modelName="Items"
+            model={mockModel}
+            basePath="/internal"
+            onRequestItem={() => null}
+            itemRequest={IdleRequest}
+            onRequestList={() => null}
+            listData={data}
+            onClickDeleteItem={() => null}
+            listRequest={IdleRequest}
+            deleteRequest={IdleRequest}
+            onSubmitNewItem={() => null}
+            newItemRequest={IdleRequest}
+            onSubmitUpdateItem={() => null}
+            submitUpdateItemRequest={IdleRequest}
+            updateItemRequest={IdleRequest}
+            onRequestUpdateItem={() => null}
+          />
+        }
+      />
+    </Routes>
+  );
+};
+
 export default {
   title: "Generators/ModelRouter",
   component: DummyModelRouter,
-  decorators: [withMemoryRouter(), withNotificationCenter],
+  decorators: [withMemoryRouter(), withNotificationCenter, withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },

package/src/generators/object-details/object-details.tsx

@@ -6,16 +6,17 @@ import {
   ValueBoolean,
   ValueCard,
   ValueText,
+  ValueDatetime,
 } from "../../components";
 import { ModelField, GroupField, Model, BasicModelInstance } from "../generators.model";
 
-const singleDetailValueFactory = <T extends BasicModelInstance>(
-  { id, name, type }: ModelField,
-  instance: T,
-) => {
+const singleDetailValueFactory = <T extends BasicModelInstance>(field: ModelField, instance: T) => {
+  const { id, name, type } = field;
   const value = instance[id];
   if (type === "boolean") {
     return <ValueBoolean label={name} value={value} />;
+  } else if (type === "date" || type === "time" || type === "datetime") {
+    return <ValueDatetime label={name} value={value} format={field.format} />;
   }
   return <ValueText label={name} value={value?.toString()} />;
 };

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./routing";

package/src/hooks/routing/index.ts

@@ -0,0 +1 @@
+export * from "./routing.hooks";

package/src/hooks/routing/routing.hooks.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+
+export interface NavigateWhenValueChangesOptions<T> {
+  from: T;
+  to: T;
+}
+
+export const useNavigateWhenValueChanges = <T>(
+  path: string,
+  value: T | undefined,
+  { from, to }: NavigateWhenValueChangesOptions<T>,
+) => {
+  const prevRef = useRef<T>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (prevRef.current === from && value === to) {
+      navigate(path);
+    }
+    prevRef.current = value;
+  }, [value]);
+};

package/src/hooks/routing/routing.test.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { Routes, Route } from "react-router-dom";
+import { render, screen } from "../../tests";
+import { useNavigateWhenValueChanges } from "./routing.hooks";
+import userEvent from "@testing-library/user-event";
+
+describe("useNavigateWhenValueChanges", () => {
+  const renderHook = ({ to, from }: { to: boolean; from: boolean }) => {
+    const DummyComponent = () => {
+      const [value, setValue] = useState<boolean | undefined>(false);
+      useNavigateWhenValueChanges("/destination", value, { from, to });
+
+      return (
+        <Box>
+          <Button onClick={() => setValue(undefined)}>undefined</Button>
+          <Button onClick={() => setValue(false)}>false</Button>
+          <Button onClick={() => setValue(true)}>true</Button>
+        </Box>
+      );
+    };
+
+    const DummyRoute = ({ label }: { label: string }) => {
+      return <Typography>{label}</Typography>;
+    };
+
+    const { history } = render(
+      <>
+        <Routes>
+          <Route path="" element={<DummyRoute label="initial" />} />
+          <Route path="" element={<DummyRoute label="destination" />} />
+        </Routes>
+        <DummyComponent />
+      </>,
+    );
+
+    return { history };
+  };
+
+  const changeValueTo = async (value: "undefined" | "false" | "true") => {
+    await userEvent.click(screen.getByRole("button", { name: value }));
+  };
+
+  it("wouldn't change the route when method when is rendered", () => {
+    const { history } = renderHook({ to: true, from: false });
+
+    expect(history.location.pathname).toBe("/");
+  });
+
+  it("wouldn't change the route when it changes to a value that is not to", async () => {
+    const { history } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+
+    expect(history.location.pathname).toBe("/");
+  });
+
+  it("wouldn't change the route when value changes to a value that is not to", async () => {
+    const { history } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+
+    expect(history.location.pathname).toBe("/");
+  });
+
+  it("wouldn't change the route when value changes from undefined to to", async () => {
+    const { history } = renderHook({ to: true, from: false });
+
+    await changeValueTo("undefined");
+    await changeValueTo("true");
+
+    expect(history.location.pathname).toBe("/");
+  });
+
+  it("would change the route when value changes from to to", async () => {
+    const { history } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+    await changeValueTo("true");
+
+    expect(history.location.pathname).toBe("/destination");
+  });
+});

package/src/providers/notification-center/index.ts

@@ -1,2 +1,3 @@
 export * from "./notification-center.provider";
 export * from "./notification-center.context";
+export * from "./notification-center.hooks";

package/src/providers/notification-center/notification-center.hooks.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { useNotificationCenter, Notification } from "./notification-center.context";
+
+export interface NotifyWhenValueChangesOptions<T> {
+  from: T;
+  to: T;
+}
+
+export const useNotifyWhenValueChanges = <T>(
+  notification: Notification,
+  value: T | undefined,
+  { from, to }: NotifyWhenValueChangesOptions<T>,
+) => {
+  const prevRef = useRef<T>();
+  const { show } = useNotificationCenter();
+
+  useEffect(() => {
+    if (prevRef.current === from && value === to) {
+      show(notification);
+    }
+    prevRef.current = value;
+  }, [value]);
+};

package/src/providers/notification-center/notification-center.test.tsx

@@ -1,12 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import userEvent from "@testing-library/user-event";
 import { AlertColor, Box, Button } from "@mui/material";
 import { render, screen, waitForElementToBeRemoved, expectAlert } from "../../tests";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import {
+  NotificationCenterContext,
   NotificationCenterProviderUndefinedError,
   useNotificationCenter,
+  Notification,
 } from "./notification-center.context";
+import { useNotifyWhenValueChanges } from "./notification-center.hooks";
 
 describe("NotificationCenterProvider", () => {
   const renderComponent = ({ autoHideDuration }: { autoHideDuration?: number } = {}) => {
@@ -110,3 +113,86 @@ describe("useNotificationCenter", () => {
     }
   });
 });
+
+describe("useNotifyWhenValueChanges", () => {
+  const DUMMY_NOTIFICATION: Notification = {
+    title: "Hello World",
+    message: "Lorem ipsum sit amet",
+    severity: "info",
+  };
+
+  const renderHook = ({ to, from }: { to: boolean; from: boolean }) => {
+    const show = jest.fn();
+
+    const DummyComponent = () => {
+      const [value, setValue] = useState<boolean | undefined>(false);
+      useNotifyWhenValueChanges(DUMMY_NOTIFICATION, value, { from, to });
+
+      return (
+        <Box>
+          <Button onClick={() => setValue(undefined)}>undefined</Button>
+          <Button onClick={() => setValue(false)}>false</Button>
+          <Button onClick={() => setValue(true)}>true</Button>
+        </Box>
+      );
+    };
+
+    render(
+      <NotificationCenterContext.Provider
+        value={{
+          show,
+          hide: jest.fn(),
+        }}
+      >
+        <DummyComponent />
+      </NotificationCenterContext.Provider>,
+    );
+
+    return { show };
+  };
+
+  const changeValueTo = async (value: "undefined" | "false" | "true") => {
+    await userEvent.click(screen.getByRole("button", { name: value }));
+  };
+
+  it("wouldn't call the show method when is rendered", () => {
+    const { show } = renderHook({ to: true, from: false });
+
+    expect(show).not.toHaveBeenCalled();
+  });
+
+  it("wouldn't call the show method when it changes to a value that is not to", async () => {
+    const { show } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+
+    expect(show).not.toHaveBeenCalled();
+  });
+
+  it("wouldn't call the show method when value changes to a value that is not to", async () => {
+    const { show } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+
+    expect(show).not.toHaveBeenCalled();
+  });
+
+  it("wouldn't call the show method when value changes from undefined to to", async () => {
+    const { show } = renderHook({ to: true, from: false });
+
+    await changeValueTo("undefined");
+    await changeValueTo("true");
+
+    expect(show).not.toHaveBeenCalled();
+  });
+
+  it("would call the show method when value changes from to to", async () => {
+    const { show } = renderHook({ to: true, from: false });
+
+    await changeValueTo("false");
+    await changeValueTo("true");
+
+    expect(show).toHaveBeenCalledTimes(1);
+    expect(show).toHaveBeenCalledWith(DUMMY_NOTIFICATION);
+  });
+});

package/src/storybook.tsx

@@ -6,6 +6,8 @@ import { Box } from "@mui/material";
 import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
 import { NotificationCenterProvider } from "./providers";
 import { action } from "@storybook/addon-actions";
+import { LocalizationProvider } from "@mui/x-date-pickers/";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
 export function createTemplate<P>(
   C: JSXElementConstructor<P>,
@@ -88,3 +90,11 @@ export const withPadding =
       </Box>
     );
   };
+
+export const withLocalizationProvider = (Story: FunctionComponent) => {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Story />
+    </LocalizationProvider>
+  );
+};

package/src/tests/actions.ts

@@ -0,0 +1,43 @@
+import userEvent from "@testing-library/user-event";
+import { screen, fireEvent } from "./testing-library";
+import { format } from "date-fns";
+
+export const selectOption = async (element: HTMLElement, option: string) => {
+  await userEvent.click(element);
+  await userEvent.click(screen.getByRole("option", { name: option }));
+};
+
+export const selectOptions = async (element: HTMLElement, options: string[]) => {
+  await userEvent.click(element);
+
+  for (const option of options) {
+    const optionElement = screen.getByRole("option", { name: option });
+    await userEvent.click(optionElement);
+  }
+
+  const presentation = screen.getByRole("presentation").firstChild;
+  presentation && fireEvent.click(presentation);
+};
+
+export const clearMultiSelect = async (element: HTMLElement) => {
+  await userEvent.click(element);
+
+  const options = screen.queryAllByRole("option", { selected: true });
+
+  for (const option of options) {
+    await userEvent.click(option);
+  }
+
+  const presentation = screen.getByRole("presentation").firstChild;
+  presentation && fireEvent.click(presentation);
+};
+
+export const clearCheckbox = async (element: HTMLInputElement) => {
+  if (element.checked) {
+    await userEvent.click(element);
+  }
+};
+
+export const pickDatetime = (element: HTMLInputElement, value: Date, fmt: string) => {
+  fireEvent.change(element, { target: { value: format(value, fmt) } });
+};

package/src/tests/assertions.ts

@@ -1,6 +1,8 @@
 import { AlertColor } from "@mui/material";
 import { ModelField } from "../generators";
 import { screen, waitForElementToBeRemoved } from "./testing-library";
+import { format } from "date-fns";
+import { MockInstance } from "../generators/generators.mock";
 
 export const expectContentPlaceholder = async () => {
   expect(await screen.findByTestId(/content-placeholder-test/i)).toBeInTheDocument();
@@ -12,6 +14,12 @@ export const expectModelFieldInputExist = (fields: ModelField[]) => {
       expectModelFieldInputExist(field.value);
     } else if (field.type === "number") {
       expect(screen.getByRole("spinbutton", { name: field.name })).toBeInTheDocument();
+    } else if (field.type === "boolean") {
+      expect(screen.getByRole("checkbox", { name: field.name })).toBeInTheDocument();
+    } else if (field.type === "enum" || field.type === "multienum") {
+      expect(
+        screen.getByRole("button", { name: new RegExp(field.name.toLowerCase(), "i") }),
+      ).toBeInTheDocument();
     } else {
       expect(screen.getByRole("textbox", { name: field.name })).toBeInTheDocument();
     }
@@ -25,6 +33,16 @@ export const expectModelFieldInputValue = (fields: ModelField[], initialValues:
       expectModelFieldInputValue(field.value, value);
     } else if (field.type === "number") {
       expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+    } else if (field.type === "boolean") {
+      expect(
+        screen.getByRole("checkbox", { name: field.name, checked: value }),
+      ).toBeInTheDocument();
+    } else if (field.type === "date" || field.type === "time" || field.type === "datetime") {
+      const expectedDateValue = format(value, field.format);
+      expect(screen.getByRole("textbox", { name: field.name })).toHaveAttribute(
+        "value",
+        expectedDateValue,
+      );
     } else {
       expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
     }
@@ -45,9 +63,11 @@ export const expectModelFieldValue = (field: ModelField, instance: object) => {
   expect(screen.getByRole("label", { name: name })).toBeInTheDocument();
   if (type === "boolean") {
     expect(screen.getByTestId(value ? "CheckIcon" : "CloseIcon")).toBeInTheDocument();
+  } else if (type === "date" || type === "time" || type === "datetime") {
+    const formatedValue = format(value, field.format);
+    expect(screen.getByLabelText(name)).toHaveTextContent(formatedValue);
   } else {
     expect(screen.getByLabelText(name)).toHaveTextContent(value);
-    //expect(screen.getByText(value)).toBeInTheDocument();
   }
 };
 
@@ -59,6 +79,11 @@ export const waitForProgressIndicatorToBeRemoved = async () => {
   await waitForElementToBeRemoved(() => screen.getByRole("progressbar"));
 };
 
+export const waitForProgressFinish = async () => {
+  await screen.findByRole("progressbar");
+  await waitForProgressIndicatorToBeRemoved();
+};
+
 export const expectAlert = async ({
   title,
   message,
@@ -74,3 +99,52 @@ export const expectAlert = async ({
   title && expect(await screen.findByText(title)).toBeInTheDocument();
   expect(await screen.findByText(message)).toBeInTheDocument();
 };
+
+export const expectToHaveBeenCalledOnceWithMockInstance = (
+  mockFn: jest.Mock,
+  instance: MockInstance,
+) => {
+  expect(mockFn).toHaveBeenCalledTimes(1);
+
+  const calledReturnTime: Date = mockFn.mock.calls[0][0].car.returnTime;
+  const calledTradeDate: Date = mockFn.mock.calls[0][0].tradeDate;
+
+  expect(mockFn).toHaveBeenCalledWith({
+    id: instance.id,
+    firstName: instance.firstName,
+    middleName: instance.middleName,
+    lastName: instance.lastName,
+    gender: instance.gender,
+    age: instance.age,
+    birthDate: instance.birthDate,
+    car: {
+      model: instance.car.model,
+      manufacturer: instance.car.manufacturer,
+      color: instance.car.color,
+      type: instance.car.type,
+      vin: instance.car.vin,
+      vrm: instance.car.vrm,
+      returnTime: new Date(
+        calledReturnTime.getFullYear(),
+        calledReturnTime.getMonth(),
+        calledReturnTime.getDate(),
+        instance.car.returnTime.getHours(),
+        instance.car.returnTime.getMinutes(),
+        calledReturnTime.getSeconds(),
+        calledReturnTime.getMilliseconds(),
+      ),
+    },
+    quantity: instance.quantity,
+    available: instance.available,
+    currency: instance.currency,
+    tradeDate: new Date(
+      instance.tradeDate.getFullYear(),
+      instance.tradeDate.getMonth(),
+      instance.tradeDate.getDate(),
+      instance.tradeDate.getHours(),
+      instance.tradeDate.getMinutes(),
+      calledTradeDate.getSeconds(),
+      calledTradeDate.getMilliseconds(),
+    ),
+  });
+};

package/src/tests/index.ts

@@ -1,3 +1,4 @@
 export * from "./components";
 export * from "./testing-library";
 export * from "./assertions";
+export * from "./actions";

package/src/tests/testing-library.tsx

@@ -4,6 +4,8 @@ import { createMemoryHistory, MemoryHistory } from "history";
 import React from "react";
 import { ThemeProvider } from "@emotion/react";
 import { Theme, createTheme, PaletteMode } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
 export type TestRouter = "router" | "memory";
 
@@ -34,7 +36,9 @@ const createWrapper =
         };
     return (
       <ThemeProvider theme={theme}>
-        <R {...routerArgs}>{children}</R>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <R {...routerArgs}>{children}</R>
+        </LocalizationProvider>
       </ThemeProvider>
     );
   };