@pautena/react-design-system 0.4.2 → 0.4.3

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

@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Content, Header } from "~/components";
-import { BasicModelInstance, ModelForm } from "~/generators";
+import { BasicModelInstance } from "../../generators.model";
+import { ModelForm } from "../../model-form";
 import { useNavigateWhenValueChanges } from "~/hooks";
 import { HeaderLayout } from "../../../layouts";
-import { useNotificationCenter, useNotifyWhenValueChanges } from "../../../providers";
+import { useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
 
@@ -48,8 +49,6 @@ export const UpdateScreen = <T extends BasicModelInstance>({
   onRequestUpdateItem,
 }: UpdateScreenProps<T>) => {
   const { id = "" } = useParams();
-  const navigate = useNavigate();
-  const { show } = useNotificationCenter();
   const loading = updateItemRequest.loading || submitUpdateItemRequest.loading;
 
   useEffect(() => {

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

@@ -75,7 +75,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
     }, requestTimeout);
   };
 
-  const handleClickDeleteItem = (item) => {
+  const handleClickDeleteItem = (item: MockInstance) => {
     setRemoveRequestState({ idle: false, loading: true });
     onRequestDeleteAction(item);
 

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { expectModelFieldValue, render } from "../../tests";
+import { expectModelFieldValue } from "~/tests/assertions";
+import { render } from "~/tests/testing-library";
 import { mockModel, createModelInstance } from "../generators.mock";
 import { ObjectDetails } from "./object-details";
 

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

@@ -8,28 +8,37 @@ import {
   ValueText,
   ValueDatetime,
 } from "../../components";
-import { ModelField, GroupField, Model, BasicModelInstance } from "../generators.model";
+import {
+  ModelField,
+  GroupField,
+  Model,
+  BasicModelInstance,
+  GroupInstanceType,
+} from "../generators.model";
 
-const singleDetailValueFactory = <T extends BasicModelInstance>(field: ModelField, instance: T) => {
+const singleDetailValueFactory = <T extends BasicModelInstance>(
+  field: ModelField,
+  instance: T | GroupInstanceType,
+) => {
   const { id, name, type } = field;
   const value = instance[id];
   if (type === "boolean") {
-    return <ValueBoolean label={name} value={value} />;
+    return <ValueBoolean label={name} value={value as boolean} />;
   } else if (type === "date" || type === "time" || type === "datetime") {
-    return <ValueDatetime label={name} value={value} format={field.format} />;
+    return <ValueDatetime label={name} value={value as Date} format={field.format} />;
   }
   return <ValueText label={name} value={value?.toString()} />;
 };
 
-interface ObjectDetailGroupProps<T extends BasicModelInstance> {
+interface ObjectDetailGroupProps {
   field: GroupField;
-  instance: T;
+  instance: GroupInstanceType;
 }
 
-const ObjectDetailGroup = <T extends BasicModelInstance>({
+const ObjectDetailGroup = ({
   field: { name, description, value },
   instance,
-}: ObjectDetailGroupProps<T>) => {
+}: ObjectDetailGroupProps) => {
   return (
     <GroupValueCard title={name} subtitle={description}>
       {value.map((field) => {
@@ -61,7 +70,7 @@ export const ObjectDetails = <T extends BasicModelInstance>({
         if (type === "group") {
           return (
             <Grid item key={id} xs={12}>
-              <ObjectDetailGroup field={field} instance={instance[id]} />
+              <ObjectDetailGroup field={field} instance={instance[id] as GroupInstanceType} />
             </Grid>
           );
         }

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

@@ -1,7 +1,7 @@
 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 { render, screen } from "~/tests/testing-library";
 import { useNavigateWhenValueChanges } from "./routing.hooks";
 import userEvent from "@testing-library/user-event";
 

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { AppBarWithDrawerLayout } from "./app-bar-with-drawer-layout";
-import { ContentPlaceholder } from "../../tests";
+import { ContentPlaceholder } from "~/tests/components";
 import { mockNav } from "../../components/drawer/drawer.mock";
 import { MiniAppBar } from "../../components/app-bar";
 import { DrawerContent, MiniDrawer } from "../../components";

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { MiniDrawerStory } from "./app-bar-with-drawer-layout.stories";
-import { expectContentPlaceholder, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
+import { expectContentPlaceholder } from "~/tests/assertions";
 
 describe("AppBarWithDrawerLayout", () => {
   const renderComponent = () => {

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

@@ -1,9 +1,9 @@
 import React, { ReactElement } from "react";
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
-import { HeaderLayout } from "./header-layout";
+import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
 import { withMemoryRouter } from "~/storybook";
-import { SkeletonGrid } from "../../tests";
+import { SkeletonGrid } from "../../tests/components";
 import { withFullHeight } from "../../storybook";
 import { Content, Header, HeaderProps, HeaderTab, TableList, TabPanel } from "../../components";
 import { Box, Typography } from "@mui/material";
@@ -58,7 +58,7 @@ export default {
   },
 } as ComponentMeta<typeof HeaderLayout>;
 
-interface HeaderLayoutStoryProps {
+interface HeaderLayoutStoryProps extends HeaderLayoutProps {
   headerProps: HeaderProps;
   contentChildren: ReactElement;
 }
@@ -102,7 +102,14 @@ const ListContent = () => {
     numeric: false,
   }));
 
-  return <TableList data={rows} columns={columns} defaultSort={columns[0].id} defaultOrder="asc" />;
+  return (
+    <TableList
+      data={rows as any}
+      columns={columns}
+      defaultSort={columns[0].id}
+      defaultOrder="asc"
+    />
+  );
 };
 
 export const List = Template.bind({});

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { HeaderLayout } from "./header-layout";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Content, Header } from "../../components";
 import { Typography } from "@mui/material";
 

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

@@ -4,7 +4,7 @@ import { ContentElement, HeaderElement } from "../../components";
 import { LoadingArea } from "../../components/loading-area";
 import { TabProvider } from "../../providers";
 
-interface HeaderLayoutProps {
+export interface HeaderLayoutProps {
   loading?: boolean;
   children: [HeaderElement, ContentElement];
 }

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

@@ -1,15 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { AlertColor } from "@mui/material";
 import React from "react";
 
 export const NotificationCenterProviderUndefinedError = new Error(
   "NotificationCenterContext.Provider is required and was undefined",
 );
-export type SnackbarContentType =
-  | React.ReactElement<any, any>
-  | ((key: string) => React.ReactElement<any, any>);
-
-export type SnackbarActionType = React.ReactNode | ((key: string) => React.ReactNode);
 
 export interface Notification {
   severity: AlertColor;

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

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
-import { ContentPlaceholder } from "../../tests";
+import { ContentPlaceholder } from "~/tests/components";
 import { Button, Box } from "@mui/material";
 
 const DummyError = {

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

@@ -1,7 +1,7 @@
 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 { render, screen, waitForElementToBeRemoved } from "~/tests/testing-library";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import {
   NotificationCenterContext,
@@ -10,6 +10,8 @@ import {
   Notification,
 } from "./notification-center.context";
 import { useNotifyWhenValueChanges } from "./notification-center.hooks";
+import { expectAlert } from "~/tests/assertions";
+import { mockConsoleError } from "~/tests/mocks";
 
 describe("NotificationCenterProvider", () => {
   const renderComponent = ({ autoHideDuration }: { autoHideDuration?: number } = {}) => {
@@ -99,18 +101,15 @@ describe("NotificationCenterProvider", () => {
 });
 
 describe("useNotificationCenter", () => {
+  mockConsoleError();
+
   it("would throw an error if the component is not wrapped by a NotificationCenterContext.Provider", () => {
     const FailingComponent = () => {
       useNotificationCenter();
       return <Box>FailingComponent</Box>;
     };
 
-    try {
-      render(<FailingComponent />);
-      fail();
-    } catch (err) {
-      expect(err).toStrictEqual(NotificationCenterProviderUndefinedError);
-    }
+    expect(() => render(<FailingComponent />)).toThrow(NotificationCenterProviderUndefinedError);
   });
 });
 

package/src/storybook.tsx

@@ -9,7 +9,7 @@ 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>(
+export function createTemplate<P extends object>(
   C: JSXElementConstructor<P>,
 ): ComponentStory<JSXElementConstructor<P>> {
   return (args) => <C {...args} />;

package/src/tests/actions.ts

@@ -2,6 +2,10 @@ import userEvent from "@testing-library/user-event";
 import { screen, fireEvent } from "./testing-library";
 import { format } from "date-fns";
 
+export const typeNumericInput = (element: HTMLElement, value: number) => {
+  fireEvent.change(element, { target: { value } });
+};
+
 export const selectOption = async (element: HTMLElement, option: string) => {
   await userEvent.click(element);
   await userEvent.click(screen.getByRole("option", { name: option }));

package/src/tests/assertions.ts

@@ -1,5 +1,5 @@
 import { AlertColor } from "@mui/material";
-import { ModelField } from "../generators";
+import { BasicModelInstance, GroupInstanceType, ModelField } from "../generators";
 import { screen, waitForElementToBeRemoved } from "./testing-library";
 import { format } from "date-fns";
 import { MockInstance } from "../generators/generators.mock";
@@ -26,19 +26,22 @@ export const expectModelFieldInputExist = (fields: ModelField[]) => {
   });
 };
 
-export const expectModelFieldInputValue = (fields: ModelField[], initialValues: object) => {
+export const expectModelFieldInputValue = (
+  fields: ModelField[],
+  initialValues: BasicModelInstance | GroupInstanceType,
+) => {
   fields.forEach((field) => {
     const value = initialValues[field.id];
     if (field.type === "group") {
-      expectModelFieldInputValue(field.value, value);
+      expectModelFieldInputValue(field.value, value as GroupInstanceType);
     } else if (field.type === "number") {
-      expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+      expect(screen.getByDisplayValue(value as number)).toBeInTheDocument();
     } else if (field.type === "boolean") {
       expect(
-        screen.getByRole("checkbox", { name: field.name, checked: value }),
+        screen.getByRole("checkbox", { name: field.name, checked: value as boolean }),
       ).toBeInTheDocument();
     } else if (field.type === "date" || field.type === "time" || field.type === "datetime") {
-      const expectedDateValue = format(value, field.format);
+      const expectedDateValue = format(value as Date, field.format);
       expect(screen.getByRole("textbox", { name: field.name })).toHaveAttribute(
         "value",
         expectedDateValue,
@@ -49,14 +52,19 @@ export const expectModelFieldInputValue = (fields: ModelField[], initialValues:
   });
 };
 
-export const expectModelFieldValue = (field: ModelField, instance: object) => {
+export const expectModelFieldValue = (
+  field: ModelField,
+  instance: BasicModelInstance | GroupInstanceType,
+) => {
   const { id, type, name, description } = field;
   const value = instance[id];
 
   if (type === "group") {
     expect(screen.getByRole("heading", { level: 1, name }));
     expect(screen.getByRole("heading", { level: 2, name: description }));
-    field.value.forEach((groupValue) => expectModelFieldValue(groupValue, value));
+    field.value.forEach((groupValue) =>
+      expectModelFieldValue(groupValue, value as GroupInstanceType),
+    );
     return;
   }
 
@@ -64,10 +72,10 @@ export const expectModelFieldValue = (field: ModelField, instance: object) => {
   if (type === "boolean") {
     expect(screen.getByTestId(value ? "CheckIcon" : "CloseIcon")).toBeInTheDocument();
   } else if (type === "date" || type === "time" || type === "datetime") {
-    const formatedValue = format(value, field.format);
+    const formatedValue = format(value as Date, field.format);
     expect(screen.getByLabelText(name)).toHaveTextContent(formatedValue);
   } else {
-    expect(screen.getByLabelText(name)).toHaveTextContent(value);
+    expect(screen.getByLabelText(name)).toHaveTextContent(value as string);
   }
 };
 

package/src/tests/components.tsx

@@ -2,6 +2,8 @@ import React, { PropsWithChildren } from "react";
 import { Typography, Container, Skeleton, Grid, Box } from "@mui/material";
 import { loremIpsum } from "lorem-ipsum";
 import { newArrayWithSize } from "../utils";
+import { useDemoData } from "@mui/x-data-grid-generator";
+import { DataGrid } from "@mui/x-data-grid";
 
 export const Placeholder = () => {
   return (
@@ -14,7 +16,7 @@ export const Placeholder = () => {
   );
 };
 
-interface SkeletonCardProps {
+export interface SkeletonCardProps {
   width?: number | string;
   animation?: "pulse" | "wave" | false;
 }
@@ -58,3 +60,35 @@ export const ContentPlaceholder = ({ size = 20, children, p }: ContentPlaceholde
     </Container>
   );
 };
+
+export interface DatatablePlaceholderProps {
+  rowLength?: number;
+  maxColumns?: number;
+}
+
+export const DatatablePlaceholder = ({
+  rowLength = 1000,
+  maxColumns = 10,
+}: DatatablePlaceholderProps) => {
+  const {
+    data: { rows, columns },
+  } = useDemoData({
+    dataSet: "Commodity",
+    rowLength,
+    maxColumns,
+  });
+
+  return (
+    <Box sx={{ height: 400, width: 1 }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        pageSize={5}
+        rowsPerPageOptions={[5]}
+        checkboxSelection
+        disableSelectionOnClick
+        experimentalFeatures={{ newEditingApi: true }}
+      />
+    </Box>
+  );
+};

package/src/tests/file-mock.ts

@@ -0,0 +1 @@
+module.exports = "";

package/src/tests/mocks.ts

@@ -0,0 +1,21 @@
+export const mockConsoleError = () => {
+  mockConsole("error");
+};
+
+export const mockConsoleWarn = () => {
+  mockConsole("warn");
+};
+
+export const mockConsole = (severity: "error" | "warn") => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let logFn: (message?: any, ...optionalParams: any[]) => void;
+
+  beforeEach(() => {
+    logFn = console[severity];
+    console[severity] = jest.fn();
+  });
+
+  afterEach(() => {
+    console[severity] = logFn;
+  });
+};

package/src/tests/testing-library.tsx

@@ -1,4 +1,4 @@
-import { render, RenderOptions } from "@testing-library/react";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { MemoryRouter, Router } from "react-router-dom";
 import { createMemoryHistory, MemoryHistory } from "history";
 import React from "react";
@@ -28,12 +28,11 @@ const createWrapper =
     const isMemoryRouter = router === "memory";
 
     const R = isMemoryRouter ? MemoryRouter : Router;
-    const routerArgs = isMemoryRouter
-      ? {}
-      : {
-          location: history.location,
-          navigator: history,
-        };
+    const routerArgs = {
+      location: history.location,
+      navigator: history,
+    };
+
     return (
       <ThemeProvider theme={theme}>
         <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -49,7 +48,11 @@ interface CustomRenderOptions {
   router?: TestRouter;
 }
 
-const customRender = (ui: React.ReactElement, options: CustomRenderOptions = {}) => {
+type CustomRenderResult = RenderResult & { history: MemoryHistory };
+const customRender = (
+  ui: React.ReactElement,
+  options: CustomRenderOptions = {},
+): CustomRenderResult => {
   const renderOptions = options.renderOptions || {};
   const mode = options.mode || "light";
   const router = options.router || "router";

package/src/types/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}

package/src/tests/index.ts

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