@pautena/react-design-system 0.2.0 → 0.2.1

package/dist/esm/types/generators/model-router/index.d.ts

@@ -1 +1,2 @@
 export * from "./model-router";
+export * from "./model-router.types";

package/dist/index.d.ts

@@ -509,6 +509,8 @@ interface RequestState {
     error?: string;
     success?: boolean;
 }
+declare const IdleRequest: RequestState;
+declare const LoadingRequest: RequestState;
 
 interface BaseScreenProps {
     /**
@@ -664,4 +666,4 @@ declare type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, Label, LabelProps, LabelVariant, Link, LinkBehaviour, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, SignIn, SnackbarActionType, SnackbarContentType, TabCard, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useTab };
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, Link, LinkBehaviour, LoadingRequest, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SnackbarActionType, SnackbarContentType, TabCard, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -1 +1,2 @@
 export * from "./model-router";
+export * from "./model-router.types";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { DummyModelRouter } from "./stories/model-router.stories";
+import { DummyModelRouter, InternalModelRouter } from "./stories/model-router.stories";
 import {
   expectModelFieldInputExist,
   expectProgressIndicator,
@@ -10,6 +10,7 @@ import {
   expectModelFieldValue,
   expectModelFieldInputValue,
 } from "~/tests";
+import { data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
@@ -17,7 +18,7 @@ import { createModelInstance, MockInstance, mockModel } from "../generators.mock
 import { NotificationCenterProvider } from "../../providers";
 import { Box } from "@mui/system";
 import { Button } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -109,7 +110,7 @@ describe("ModelRouter", () => {
 
   const actions = {
     navigateToAddScreen: async () => {
-      await userEvent.click(screen.getByRole("button", { name: "Add" }));
+      await userEvent.click(await screen.findByRole("button", { name: "Add" }));
     },
     forceNavigateToAddScreen: async () => {
       await userEvent.click(screen.getByRole("button", { name: /force add/i }));
@@ -124,6 +125,9 @@ describe("ModelRouter", () => {
     navigateToDetailScreen: async ({ name }: { name: string }) => {
       await userEvent.click(await screen.findByRole("cell", { name }));
     },
+    navigateToInternal: async () => {
+      await userEvent.click(screen.getByRole("button", { name: /go to internal/i }));
+    },
     forceNavigateToDetailsScreen: async () => {
       await userEvent.click(screen.getByRole("button", { name: /force details/i }));
     },
@@ -205,10 +209,10 @@ describe("ModelRouter", () => {
   const renderComponent = async ({
     router = "memory",
     screen = "initial",
-    deleteFeature = true,
-    updateFeature = true,
-    addFeature = true,
-    detailsFeature = true,
+    deleteFeature,
+    updateFeature,
+    addFeature,
+    detailsFeature,
   }: {
     router?: TestRouter;
     screen?: "initial" | "add" | "details" | "update";
@@ -283,6 +287,15 @@ describe("ModelRouter", () => {
     };
   };
 
+  const renderComponentInsideRouter = () => {
+    render(
+      <NotificationCenterProvider>
+        <InternalModelRouter />
+      </NotificationCenterProvider>,
+      { router: "memory" },
+    );
+  };
+
   describe("router screens", () => {
     it("would render the list screen by default", async () => {
       await renderComponent();
@@ -358,6 +371,41 @@ describe("ModelRouter", () => {
     });
   });
 
+  describe("inside another router", () => {
+    it("would navigate to the add screen", async () => {
+      renderComponentInsideRouter();
+
+      await actions.navigateToInternal();
+      await actions.navigateToAddScreen();
+
+      await assertions.expectAddScreen();
+    });
+
+    it("would navigate to the detail screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id, firstName },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToDetailScreen({ name: firstName });
+
+      await assertions.expectDetailScreen({ id });
+    });
+
+    it("would navigate to the update screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToUpdateScreen({ id });
+
+      await assertions.expectUpdateScreen({ id });
+    });
+  });
+
   describe("list screen", () => {
     it("would call onRequestList when is mounted", async () => {
       const { onRequestList } = await renderComponent();

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

@@ -18,7 +18,7 @@ export type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<
   UpdateScreenProps<T>;
 
 export const ModelRouter = <T extends BasicModelInstance>(props: ModelRouterProps<T>) => {
-  const { updateFeature, addFeature, detailsFeature } = props;
+  const { updateFeature = true, addFeature = true, detailsFeature = true } = props;
   return (
     <Routes>
       <Route path="" element={<ListScreen {...props} />} />

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

@@ -16,10 +16,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 +39,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
   const {
     requestTimeout,
     initialData,
+    basePath = "",
     deleteFeature = true,
     updateFeature = true,
     addFeature = true,
@@ -130,6 +134,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
       {...args}
       modelName="Items"
       model={mockModel}
+      basePath={basePath}
       deleteFeature={deleteFeature}
       updateFeature={updateFeature}
       addFeature={addFeature}
@@ -163,9 +168,51 @@ 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,