@pautena/react-design-system 0.0.1 → 0.1.0

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { DummyModelRouter } from "./model-router.stories";
+import { DummyModelRouter } from "./stories/model-router.stories";
 import {
   expectModelFieldInputExist,
   expectProgressIndicator,
@@ -9,11 +9,12 @@ import {
   TestRouter,
   expectModelFieldValue,
   expectModelFieldInputValue,
-} from "../../tests";
+} from "~/tests";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
-import { createModelInstance } from "../generators.mock";
+import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import { NotificationCenterProvider } from "../../providers";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -39,7 +40,7 @@ describe("ModelRouter", () => {
         name: `Edit ${id}`,
         level: 1,
       }),
-    expectListItems: async ({ data, model }: { data: any[]; model: Model }) => {
+    expectListItems: async ({ data, model }: { data: MockInstance[]; model: Model }) => {
       for (let i = 0; i < model.fields.length; ++i) {
         const { id, listable } = model.fields[i];
 
@@ -48,10 +49,10 @@ describe("ModelRouter", () => {
         }
       }
     },
-    expectMenuOption: async ({ id }: { id: number }) => {
+    expectMenuOption: async ({ id }: { id: string }) => {
       await screen.findByTestId(`options-${id}`);
     },
-    expectSubmitInstanceCall: (mockFn: jest.Mock, instance: any) => {
+    expectSubmitInstanceCall: (mockFn: jest.Mock, instance: MockInstance) => {
       expect(mockFn).toHaveBeenCalledTimes(1);
       expect(mockFn).toHaveBeenCalledWith({
         id: instance.id,
@@ -81,14 +82,14 @@ describe("ModelRouter", () => {
     navigateToAddScreen: async () => {
       await userEvent.click(screen.getByRole("button", { name: /add/i }));
     },
-    navigateToUpdateScreen: async ({ id }: { id: number }) => {
+    navigateToUpdateScreen: async ({ id }: { id: string }) => {
       await actions.openItemOptions({ id });
       await userEvent.click(screen.getByRole("menuitem", { name: /edit/i }));
     },
     navigateToDetailScreen: async ({ name }: { name: string }) => {
       await userEvent.click(await screen.findByRole("cell", { name }));
     },
-    openItemOptions: async ({ id }: { id: number }) => {
+    openItemOptions: async ({ id }: { id: string }) => {
       await userEvent.click(await screen.findByTestId(`options-${id}`));
     },
     fullfillModelForm: async ({
@@ -100,7 +101,7 @@ describe("ModelRouter", () => {
       submit?: boolean;
       clear?: boolean;
     }) => {
-      const instance = createModelInstance(model);
+      const instance = createModelInstance<MockInstance>(model);
 
       const idElement = screen.getByRole("textbox", { name: "Id" });
       const firstNameElement = screen.getByRole("textbox", { name: /first name/i });
@@ -167,26 +168,32 @@ describe("ModelRouter", () => {
     router = "memory",
     screen = "initial",
   }: { router?: TestRouter; screen?: "initial" | "add" | "details" | "update" } = {}) => {
-    const requestList = jest.fn();
-    const onSubmitAdd = jest.fn();
+    const onRequestList = jest.fn();
+    const onRequestItem = jest.fn();
+    const onSubmitNewItem = jest.fn();
+    const onRequestUpdateItem = jest.fn();
     const onSubmitUpdate = jest.fn();
     const onRequestDelete = jest.fn();
     const args = DummyModelRouter.args;
     const instance = render(
-      <DummyModelRouter
-        {...args}
-        requestTimeout={REQUEST_TIMEOUT}
-        requestListAction={requestList}
-        onSubmitAddAction={onSubmitAdd}
-        onSubmitUpdateAction={onSubmitUpdate}
-        onRequestDeleteAction={onRequestDelete}
-      />,
+      <NotificationCenterProvider>
+        <DummyModelRouter
+          {...args}
+          requestTimeout={REQUEST_TIMEOUT}
+          onRequestListAction={onRequestList}
+          onRequestItem={onRequestItem}
+          onSubmitNewItemAction={onSubmitNewItem}
+          onRequestUpdateItemAction={onRequestUpdateItem}
+          onSubmitUpdateAction={onSubmitUpdate}
+          onRequestDeleteAction={onRequestDelete}
+        />
+      </NotificationCenterProvider>,
       {
         router,
       },
     );
 
-    const randomItem = getRandomItem<any>(args.initialData);
+    const randomItem = getRandomItem(args.initialData);
 
     if (screen === "add") {
       await actions.navigateToAddScreen();
@@ -199,10 +206,12 @@ describe("ModelRouter", () => {
     return {
       ...instance,
       data: args.initialData,
-      model: args.model,
+      model: mockModel,
       randomItem,
-      requestList,
-      onSubmitAdd,
+      onRequestList,
+      onRequestItem,
+      onSubmitNewItem,
+      onRequestUpdateItem,
       onSubmitUpdate,
       onRequestDelete,
     };
@@ -225,7 +234,7 @@ describe("ModelRouter", () => {
 
     it("would render the update screen if we navigate there", async () => {
       const { data } = await renderComponent();
-      const { item } = getRandomItem<any>(data);
+      const { item } = getRandomItem<MockInstance>(data);
       const { id } = item;
 
       await actions.navigateToUpdateScreen({ id });
@@ -237,7 +246,7 @@ describe("ModelRouter", () => {
       const { data } = await renderComponent();
       const {
         item: { id, firstName },
-      } = getRandomItem<any>(data);
+      } = getRandomItem<MockInstance>(data);
 
       await actions.navigateToDetailScreen({ name: firstName });
 
@@ -264,7 +273,7 @@ describe("ModelRouter", () => {
       const { history, data } = await renderComponent({ router: "router" });
       const {
         item: { id },
-      } = getRandomItem<any>(data);
+      } = getRandomItem<MockInstance>(data);
 
       await actions.navigateToUpdateScreen({ id });
 
@@ -275,7 +284,7 @@ describe("ModelRouter", () => {
       const { history, data } = await renderComponent({ router: "router" });
       const {
         item: { id, firstName },
-      } = getRandomItem<any>(data);
+      } = getRandomItem<MockInstance>(data);
 
       await actions.navigateToDetailScreen({ name: firstName });
 
@@ -284,10 +293,10 @@ describe("ModelRouter", () => {
   });
 
   describe("list screen", () => {
-    it("would call requestList when is mounted", async () => {
-      const { requestList } = await renderComponent();
+    it("would call onRequestList when is mounted", async () => {
+      const { onRequestList } = await renderComponent();
 
-      expect(requestList).toHaveBeenCalledTimes(1);
+      expect(onRequestList).toHaveBeenCalledTimes(1);
     });
 
     it("would render a loading indicator until the data is ready", async () => {
@@ -334,7 +343,7 @@ describe("ModelRouter", () => {
       const { data, history } = await renderComponent({ router: "router" });
       const {
         item: { id, firstName },
-      } = getRandomItem<any>(data);
+      } = getRandomItem<MockInstance>(data);
 
       await userEvent.click(await screen.findByRole("cell", { name: firstName }));
 
@@ -346,7 +355,7 @@ describe("ModelRouter", () => {
         const { data } = await renderComponent();
 
         for (let i = 0; i < data.length; ++i) {
-          const id = (data[i] as any).id;
+          const id = data[i].id;
           await assertions.expectMenuOption({ id });
         }
       });
@@ -355,7 +364,7 @@ describe("ModelRouter", () => {
         const { data } = await renderComponent({ router: "router" });
         const {
           item: { id },
-        } = getRandomItem<any>(data);
+        } = getRandomItem<MockInstance>(data);
 
         await actions.openItemOptions({ id });
 
@@ -366,7 +375,7 @@ describe("ModelRouter", () => {
         const { data } = await renderComponent({ router: "router" });
         const {
           item: { id },
-        } = getRandomItem<any>(data);
+        } = getRandomItem<MockInstance>(data);
 
         await actions.openItemOptions({ id });
 
@@ -417,11 +426,11 @@ describe("ModelRouter", () => {
     });
 
     it("would make a request when the form is submitted", async () => {
-      const { onSubmitAdd, model } = await renderComponent({ screen: "add" });
+      const { onSubmitNewItem, model } = await renderComponent({ screen: "add" });
 
       const newInstance = await actions.fullfillModelForm({ model, submit: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitAdd, newInstance);
+      assertions.expectSubmitInstanceCall(onSubmitNewItem, newInstance);
     });
 
     it("would show a loading indicator when the request is in progress", async () => {
@@ -480,6 +489,18 @@ describe("ModelRouter", () => {
       await assertions.expectListScreen();
     });
 
+    it("would call onRequestItem when is mounted", async () => {
+      const {
+        onRequestItem,
+        randomItem: {
+          item: { id },
+        },
+      } = await renderComponent({ screen: "details" });
+
+      expect(onRequestItem).toHaveBeenCalledTimes(1);
+      expect(onRequestItem).toHaveBeenCalledWith(id);
+    });
+
     it("would show a loading indicator when the request is in progress", async () => {
       await renderComponent({ screen: "details" });
 
@@ -542,6 +563,18 @@ describe("ModelRouter", () => {
       await assertions.expectListScreen();
     });
 
+    it("would make a request to retrive the instance to update", async () => {
+      const {
+        onRequestUpdateItem,
+        randomItem: {
+          item: { id },
+        },
+      } = await renderComponent({ screen: "update" });
+
+      expect(onRequestUpdateItem).toHaveBeenCalledTimes(1);
+      expect(onRequestUpdateItem).toHaveBeenCalledWith(id);
+    });
+
     it("would show a loading indicator while the instance is requested", async () => {
       await renderComponent({ screen: "update" });
 
@@ -591,7 +624,7 @@ describe("ModelRouter", () => {
     it("would make a request when we try to delete an option", async () => {
       const { data, onRequestDelete } = await renderComponent();
 
-      const { item } = getRandomItem<any>(data);
+      const { item } = getRandomItem<MockInstance>(data);
       const { id, firstName } = item;
 
       await screen.findByRole("cell", { name: firstName });
@@ -607,7 +640,7 @@ describe("ModelRouter", () => {
     it("would show a loading indicator while the request is in progress", async () => {
       const { data } = await renderComponent();
 
-      const { item } = getRandomItem<any>(data);
+      const { item } = getRandomItem<MockInstance>(data);
       const { id, firstName } = item;
 
       await screen.findByRole("cell", { name: firstName });
@@ -619,7 +652,7 @@ describe("ModelRouter", () => {
 
     it("would remove the item from the list when the request finish", async () => {
       const { data } = await renderComponent();
-      const { item } = getRandomItem<any>(data);
+      const { item } = getRandomItem<MockInstance>(data);
       const { id, firstName } = item;
 
       await screen.findByRole("cell", { name: firstName });

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

@@ -1,48 +1,23 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
-import { Model } from "../generators.model";
-import { AddScreen, DetailsScreen, ListScreen, UpdateScreen } from "./screens";
+import { BasicModelInstance } from "../generators.model";
+import {
+  AddScreen,
+  AddScreenProps,
+  DetailsScreen,
+  DetailsScreenProps,
+  ListScreen,
+  ListScreenProps,
+  UpdateScreen,
+  UpdateScreenProps,
+} from "./screens";
 
-export interface RequestState {
-  idle?: boolean;
-  loading?: boolean;
-  error?: string;
-  success?: boolean;
-}
+export type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<T> &
+  ListScreenProps<T> &
+  AddScreenProps<T> &
+  UpdateScreenProps<T>;
 
-export interface ModelRouterProps {
-  modelName: string;
-  model: Model;
-  //list screen
-  requestList?: () => void;
-  list: {
-    data: any[];
-    onClickRemoveItem: (item: any) => void;
-    listRequest: RequestState;
-    requestDelete: RequestState;
-  };
-  //add screen
-  add: {
-    onSubmit: (obj: object) => void;
-    request: RequestState;
-  };
-  //detail screen
-  detail: {
-    onScreenMount?: (id: string) => void;
-    request: RequestState;
-    instance?: any;
-  };
-  //update screen
-  update: {
-    onSubmit: (obj: object) => void;
-    request: RequestState;
-    requestInstance: RequestState;
-    onRequestInstance: (id: string) => void;
-    instance?: any;
-  };
-}
-
-export const ModelRouter = (props: ModelRouterProps) => {
+export const ModelRouter = <T extends BasicModelInstance>(props: ModelRouterProps<T>) => {
   return (
     <Routes>
       <Route path="" element={<ListScreen {...props} />} />

package/src/generators/model-router/model-router.types.ts

@@ -0,0 +1,14 @@
+export interface RequestState {
+  idle?: boolean;
+  loading?: boolean;
+  error?: string;
+  success?: boolean;
+}
+
+export const IdleRequest: RequestState = {
+  idle: true,
+};
+
+export const LoadingRequest: RequestState = {
+  loading: true,
+};

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

@@ -1,52 +1,69 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { ModelRouterProps } from "../..";
-import { FormLayout, FormLayoutProps } from "../../../layouts";
-import { useNotificationCenter } from "../../../providers/notification-center/notification-center.context";
+import { Header, Content } from "~/components";
+import { BasicModelInstance, ModelForm } from "~/generators";
+import { HeaderLayout } from "../../../layouts";
+import { useNotificationCenter } from "../../../providers";
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
 
-const getAddPropsFromModel = ({ model, modelName, add }: ModelRouterProps): FormLayoutProps => {
-  return {
-    loading: add.request.loading,
-    headerProps: {
-      title: `Add ${modelName}`,
-      preset: "default",
-      breadcrumbs: [
-        {
-          id: "list",
-          text: modelName,
-          link: "/",
-        },
-        {
-          id: "add",
-          text: `Add new ${modelName}`,
-          link: "/add",
-        },
-      ],
-    },
-    modelFormProps: {
-      model,
-      saveButtonText: "Save",
-      onSubmit: add.onSubmit,
-    },
-  };
-};
+export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+  /**
+   * Callback executed when the user wants to
+   * add a new item
+   */
+  onSubmitNewItem: (obj: T) => void;
+
+  /**
+   * Current status of the request to retrieve
+   * add a new item
+   */
+  newItemRequest: RequestState;
+}
 
-export const AddScreen = (props: ModelRouterProps) => {
+export const AddScreen = <T extends BasicModelInstance>({
+  model,
+  modelName,
+  onSubmitNewItem,
+  newItemRequest,
+}: AddScreenProps<T>) => {
   const navigate = useNavigate();
   const { show } = useNotificationCenter();
 
   useEffect(() => {
-    if (props.add.request.success) {
+    if (newItemRequest.success) {
       show({ message: "Item added successfully", severity: "success" });
       navigate("/");
     }
-  }, [props.add.request.success]);
+  }, [newItemRequest.success]);
 
   useEffect(() => {
-    if (props.add.request.error) {
-      show({ title: "We had an error", message: props.add.request.error, severity: "error" });
+    if (newItemRequest.error) {
+      show({ title: "We had an error", message: newItemRequest.error, severity: "error" });
     }
-  }, [props.add.request.error]);
+  }, [newItemRequest.error]);
 
-  return <FormLayout {...getAddPropsFromModel(props)} />;
+  return (
+    <HeaderLayout loading={newItemRequest.loading}>
+      <Header
+        title={`Add ${modelName}`}
+        preset="default"
+        breadcrumbs={[
+          {
+            id: "list",
+            text: modelName,
+            link: "/",
+          },
+          {
+            id: "add",
+            text: `Add new ${modelName}`,
+            link: "/add",
+          },
+        ]}
+      />
+      <Content>
+        <ModelForm model={model} saveButtonText="Save" onSubmit={onSubmitNewItem} />
+      </Content>
+    </HeaderLayout>
+  );
 };

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

@@ -1,53 +1,62 @@
 import React, { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { ModelRouterProps } from "..";
-import { PlaceholderIconArgs } from "../../../components";
-import { DetailsLayout, DetailsLayoutProps } from "../../../layouts";
-import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";
+import { RequestState } from "../model-router.types";
+import { Content, Header } from "~/components";
+import { HeaderLayout } from "~/layouts";
+import { BaseScreenProps } from "./screens.types";
+import { BasicModelInstance, ObjectDetails } from "~/generators";
 
-const getDetailsPropsFromModel = (
-  { modelName, model, detail }: ModelRouterProps,
-  id: string,
-): DetailsLayoutProps => {
-  return {
-    loading: detail.request.loading,
-    headerProps: {
-      title: id,
-      preset: "default",
-      breadcrumbs: [
-        {
-          id: "list",
-          text: modelName,
-          link: "/",
-        },
-        {
-          id: "detail",
-          text: id,
-          link: `/${id}`,
-        },
-      ],
-    },
-    objectDetailsProps: {
-      model,
-      instance: detail.instance,
-    },
-    notFoundPlaceholderProps: {
-      title: "Not found",
-      subtitle: "There is no item with that id",
-      icon: ({ size, color }: PlaceholderIconArgs) => (
-        <SentimentVeryDissatisfiedIcon color={color} sx={{ fontSize: size }} />
-      ),
-    },
-  };
-};
+export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+  /**
+   * Callback executed each time we want
+   * the details information of an item
+   */
+  onRequestItem: (id: string) => void;
+
+  /**
+   * Current status of the request to retrieve
+   * an item
+   */
+  itemRequest: RequestState;
+
+  /**
+   * Item to be displayed
+   */
+  detailsItem?: T;
+}
 
-export const DetailsScreen = (props: ModelRouterProps) => {
-  const onScreenMount = props.detail.onScreenMount;
+export const DetailsScreen = <T extends BasicModelInstance>({
+  model,
+  modelName,
+  onRequestItem,
+  itemRequest,
+  detailsItem,
+}: DetailsScreenProps<T>) => {
   const { id = "" } = useParams();
 
   useEffect(() => {
-    onScreenMount && onScreenMount(id);
+    onRequestItem(id);
   }, [id]);
 
-  return <DetailsLayout {...getDetailsPropsFromModel(props, id)} />;
+  return (
+    <HeaderLayout loading={itemRequest.loading}>
+      <Header
+        title={id}
+        preset="default"
+        breadcrumbs={[
+          {
+            id: "list",
+            text: modelName,
+            link: "/",
+          },
+          {
+            id: "detail",
+            text: id,
+            link: `/${id}`,
+          },
+        ]}
+      />
+      <Content>{detailsItem && <ObjectDetails model={model} instance={detailsItem} />}</Content>
+    </HeaderLayout>
+  );
 };