@pautena/react-design-system 0.1.3 → 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/esm/types/generators/model-router/screens/add-screen.d.ts

@@ -13,4 +13,4 @@ export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreen
      */
     newItemRequest: RequestState;
 }
-export declare const AddScreen: <T extends BasicModelInstance>({ model, modelName, onSubmitNewItem, newItemRequest, }: AddScreenProps<T>) => JSX.Element;
+export declare const AddScreen: <T extends BasicModelInstance>({ model, modelName, basePath, onSubmitNewItem, newItemRequest, }: AddScreenProps<T>) => JSX.Element;

package/dist/esm/types/generators/model-router/screens/list-screen.d.ts

@@ -27,4 +27,4 @@ export interface ListScreenProps<T extends BasicModelInstance> extends BaseScree
      */
     deleteRequest: RequestState;
 }
-export declare const ListScreen: <T extends BasicModelInstance>({ model, modelName, listData, onRequestList, onClickDeleteItem, listRequest, deleteRequest, }: ListScreenProps<T>) => JSX.Element;
+export declare const ListScreen: <T extends BasicModelInstance>({ model, modelName, listData, listRequest, deleteRequest, basePath, deleteFeature, updateFeature, addFeature, detailsFeature, onRequestList, onClickDeleteItem, }: ListScreenProps<T>) => JSX.Element;

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

@@ -8,4 +8,24 @@ export interface BaseScreenProps {
      * Structure that represents the fields of the model
      */
     model: Model;
+    /**
+     * Path to attach before each internal ModelRouter path
+     */
+    basePath?: string;
+    /**
+     * If true delete features are enabled
+     */
+    deleteFeature?: boolean;
+    /**
+     * If true update features are enabled
+     */
+    updateFeature?: boolean;
+    /**
+     * If true add features are enabled
+     */
+    addFeature?: boolean;
+    /**
+     * If true details features are enabled
+     */
+    detailsFeature?: boolean;
 }

package/dist/esm/types/generators/model-router/screens/update-screen.d.ts

@@ -26,4 +26,4 @@ export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScr
      */
     updateItem?: T;
 }
-export declare const UpdateScreen: <T extends BasicModelInstance>({ model, modelName, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => JSX.Element;
+export declare const UpdateScreen: <T extends BasicModelInstance>({ model, modelName, basePath, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => JSX.Element;

package/dist/esm/types/index.d.ts

@@ -2,3 +2,4 @@ export * from "./components";
 export * from "./utils";
 export * from "./layouts";
 export * from "./generators";
+export * from "./providers";

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import * as _mui_material from '@mui/material';
-import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color } from '@mui/material';
+import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color, AlertColor } from '@mui/material';
 import * as React from 'react';
-import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode } from 'react';
+import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import { LinkProps } from 'react-router-dom';
 import * as _emotion_styled from '@emotion/styled';
@@ -509,6 +509,8 @@ interface RequestState {
     error?: string;
     success?: boolean;
 }
+declare const IdleRequest: RequestState;
+declare const LoadingRequest: RequestState;
 
 interface BaseScreenProps {
     /**
@@ -519,6 +521,26 @@ interface BaseScreenProps {
      * Structure that represents the fields of the model
      */
     model: Model;
+    /**
+     * Path to attach before each internal ModelRouter path
+     */
+    basePath?: string;
+    /**
+     * If true delete features are enabled
+     */
+    deleteFeature?: boolean;
+    /**
+     * If true update features are enabled
+     */
+    updateFeature?: boolean;
+    /**
+     * If true add features are enabled
+     */
+    addFeature?: boolean;
+    /**
+     * If true details features are enabled
+     */
+    detailsFeature?: boolean;
 }
 
 interface UpdateScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
@@ -615,4 +637,33 @@ interface ModelFormProps<T extends BasicModelInstance> {
 }
 declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps<T>) => 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, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, SignIn, TabCard, TabPanel, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor };
+declare type NotificationCenterProviderProps = PropsWithChildren<{
+    autoHideDuration?: number;
+}>;
+declare const NotificationCenterProvider: ({ children, autoHideDuration, }: NotificationCenterProviderProps) => JSX.Element;
+
+declare const NotificationCenterProviderUndefinedError: Error;
+declare type SnackbarContentType = React__default.ReactElement<any, any> | ((key: string) => React__default.ReactElement<any, any>);
+declare type SnackbarActionType = React__default.ReactNode | ((key: string) => React__default.ReactNode);
+interface Notification {
+    severity: AlertColor;
+    title?: string;
+    message: string;
+}
+interface NotificationCenterProps {
+    show(notification: Notification): void;
+    hide(): void;
+}
+declare const NotificationCenterContext: React__default.Context<NotificationCenterProps | undefined>;
+declare const useNotificationCenter: () => NotificationCenterProps;
+
+declare const TabContext: React.Context<[number, Dispatch<SetStateAction<number>>]>;
+declare const TabContextProvider: React.Provider<[number, Dispatch<SetStateAction<number>>]>;
+declare const useTab: () => [number, Dispatch<SetStateAction<number>>];
+
+declare type TabProviderProps = PropsWithChildren<{
+    initialValue?: number;
+}>;
+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, 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.1.3",
+  "version": "0.2.1",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -86,10 +86,21 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook-addon-react-router-v6": "^0.1.10",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^5.0.0",
+    "@mui/material": "^5.0.0",
+    "@mui/x-data-grid": "^5.13.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pautena/react-design-system.git"

package/src/components/drawer/mini-drawer/mini-drawer.stories.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { withRouter } from "storybook-addon-react-router-v6";
 import { MiniDrawer } from "../mini-drawer";
 import { mockNav } from "../drawer.mock";
 import { DrawerContent } from "../../drawer-content";
 import { DrawerProvider } from "../drawer.provider";
 import { Nav } from "../drawer.types";
+import { withMemoryRouter } from "../../../storybook";
 
 export default {
   title: "Drawers/MiniDrawer",
   component: MiniDrawer,
-  decorators: [withRouter],
+  decorators: [withMemoryRouter()],
   parameters: {
     layout: "fullscreen",
   },

package/src/components/drawer-content/drawer-content.stories.tsx

@@ -4,13 +4,13 @@ import { createTemplate } from "../../storybook";
 import { DrawerContent } from "./drawer-content";
 import { mockNav } from "../drawer/drawer.mock";
 import { Box } from "@mui/material";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { withMemoryRouter } from "~/storybook";
 
 export default {
   title: "Drawers/DrawerContent",
   component: DrawerContent,
   decorators: [
-    withRouter,
+    withMemoryRouter(),
     (Story) => {
       return <Box maxWidth={300}>{<Story />}</Box>;
     },

package/src/components/drawer-item/drawer-item.stories.tsx

@@ -4,12 +4,12 @@ import { createTemplate } from "../../storybook";
 import { DrawerItem } from "./drawer-item";
 import DiamondIcon from "@mui/icons-material/Diamond";
 import { withContainer } from "../../storybook";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { withMemoryRouter } from "~/storybook";
 
 export default {
   title: "Drawers/DrawerItem",
   component: DrawerItem,
-  decorators: [withRouter, withContainer({ width: 250 })],
+  decorators: [withMemoryRouter(), withContainer({ width: 250 })],
   parameters: {
     layout: "centered",
   },

package/src/components/drawer-section/drawer-section.stories.tsx

@@ -2,13 +2,13 @@ import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
 import { DrawerSection } from "./drawer-section";
 import { withContainer } from "../../storybook";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { withMemoryRouter } from "~/storybook";
 import { SectionItems } from "./drawer-section.mock";
 
 export default {
   title: "Drawers/DrawerSection",
   component: DrawerSection,
-  decorators: [withRouter, withContainer({ width: 250 })],
+  decorators: [withMemoryRouter(), withContainer({ width: 250 })],
   parameters: {
     layout: "centered",
   },

package/src/components/header/header.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
 import { Header } from "./header";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { withMemoryRouter } from "~/storybook";
 import { breadcrumbs, tabs, actions } from "./header.dummy";
 
 export default {
   title: "Sections/Header",
   component: Header,
-  decorators: [withRouter],
+  decorators: [withMemoryRouter()],
   parameters: {
     layout: "fullscreen",
   },

package/src/components/header/header.test.tsx

@@ -33,8 +33,6 @@ function renderInstance({
   tabs?: HeaderTab[];
   selectedTab?: number;
 }) {
-  const onChangeTab = jest.fn();
-
   const instance = render(
     <TabProvider initialValue={selectedTab}>
       <Header
@@ -49,7 +47,7 @@ function renderInstance({
     </TabProvider>,
   );
 
-  return { ...instance, onChangeTab };
+  return { ...instance };
 }
 
 describe("Header", () => {
@@ -149,7 +147,7 @@ describe("Header", () => {
     });
 
     it("would change the selected tab when a tab is clicked", async () => {
-      const { onChangeTab } = renderInstance({ tabs, selectedTab: 0 });
+      renderInstance({ tabs, selectedTab: 0 });
 
       await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
 
@@ -157,13 +155,5 @@ describe("Header", () => {
       expect(screen.getByRole("tab", { name: /tab 2/i, selected: false })).toBeInTheDocument();
       expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
     });
-
-    it("wouldn't call onChangeTab when the clicked tab is the selectedTab", async () => {
-      const { onChangeTab } = renderInstance({ tabs, selectedTab: 2 });
-
-      await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
-
-      expect(onChangeTab).not.toHaveBeenCalled();
-    });
   });
 });

package/src/components/tab/tab-card/tab-card.tsx

@@ -1,6 +1,6 @@
 import { Paper, Tabs, Tab, styled, tabsClasses } from "@mui/material";
-import React, { PropsWithChildren, useState } from "react";
-import { TabProvider, useTab } from "~/providers";
+import React, { PropsWithChildren } from "react";
+import { useTab } from "~/providers";
 
 const StyledTabs = styled(Tabs)(({ theme }) => ({
   [`&.${tabsClasses.root}`]: {

package/src/components/table-list/table-list.test.tsx

@@ -76,13 +76,14 @@ describe("TableList", () => {
     defaultSort = "value",
     loading = false,
     options = undefined,
+    onClick = jest.fn(),
   }: {
     defaultSort?: string;
     loading?: boolean;
     search?: boolean;
     options?: TableRowOption<any>[];
+    onClick?: jest.Mock;
   } = {}) => {
-    const onClick = jest.fn();
     const instance = render(
       <TableList
         search={search}
@@ -221,6 +222,12 @@ describe("TableList", () => {
     expect(onClick).toHaveBeenCalledWith(data[2]);
   });
 
+  it("would continue working if onClick is not defined and we click a row", async () => {
+    renderInstance({ onClick: undefined });
+
+    await userEvents.click(screen.getByRole("row", { name: /item 3/i }));
+  });
+
   describe("options menu", () => {
     it("would render a button to open the menu if doesn't have options", () => {
       renderInstance({ options: undefined });

package/src/components/table-list/table-list.tsx

@@ -27,7 +27,7 @@ export const TableList = <T extends BasicModelInstance>({
   columns: columnsProp,
   options,
   data,
-  onClick = () => null,
+  onClick,
   search,
   defaultSort,
   defaultOrder,
@@ -62,10 +62,10 @@ export const TableList = <T extends BasicModelInstance>({
             return (
               <TableRow
                 key={row.id}
-                onClick={() => onClick(row)}
+                onClick={() => onClick && onClick(row)}
                 role="row"
                 aria-rowindex={i}
-                sx={{ cursor: "pointer" }}
+                sx={{ cursor: onClick && "pointer" }}
               >
                 {columns.map(({ id }, j) => (
                   <TableCell role="cell" scope="row" key={id} aria-rowindex={i} aria-colindex={j}>

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

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