@pautena/react-design-system 0.1.4 → 0.3.0

package/dist/esm/types/components/value-displays/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./value-text";
 export * from "./value-card";
 export * from "./value-boolean";
+export * from "./value-datetime";
 export * from "./group-value-card";

package/dist/esm/types/components/value-displays/value-datetime/index.d.ts

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

package/dist/esm/types/components/value-displays/value-datetime/value-datetime.d.ts

@@ -0,0 +1,18 @@
+export interface ValueDatetimeProps {
+    /**
+     * Name of the displayed value
+     */
+    label: string;
+    /**
+     * Value displayed
+     */
+    value: Date;
+    /**
+     * Datetime format
+     */
+    format: string;
+}
+/**
+ * Displays a formated datetime with a label
+ */
+export declare const ValueDatetime: ({ label, value, format: fmt }: ValueDatetimeProps) => JSX.Element;

package/dist/esm/types/generators/generators.mock.d.ts

@@ -1,4 +1,7 @@
-import { Model } from "./generators.model";
+import { BasicModelInstance, Model } from "./generators.model";
+export declare const BirthDateFormat = "dd/MM/yyyy";
+export declare const ReturnTimeFormat = "HH:mm";
+export declare const TradeDateFormat = "dd/MM/yyyy HH:mm";
 export declare const mockModel: Model;
 export interface MockInstance {
     id: string;
@@ -7,18 +10,19 @@ export interface MockInstance {
     lastName: string;
     gender: string;
     age: number;
-    birthDate: string;
+    birthDate: Date;
     car: {
         model: string;
         manufacturer: string;
         color: string;
-        type: string;
+        type: string[];
         vin: string;
         vrm: string;
+        returnTime: Date;
     };
     quantity: number;
     available: boolean;
     currency: string;
-    tradeDate: string;
+    tradeDate: Date;
 }
-export declare const createModelInstance: <T extends BasicData>(model: Model, seed?: number) => T;
+export declare const createModelInstance: <T extends BasicModelInstance>(model: Model, seed?: number) => T;

package/dist/esm/types/generators/generators.model.d.ts

@@ -20,7 +20,30 @@ declare type NumberField = {
 declare type BooleanField = {
     type: "boolean";
 };
-declare type SingleFields = StringField | NumberField | BooleanField;
+declare type EnumField = {
+    type: "enum";
+    value: string[];
+};
+declare type MultiEnumField = {
+    type: "multienum";
+    value: string[];
+};
+declare type DateField = {
+    type: "date";
+    format: string;
+    default: any;
+};
+declare type TimeField = {
+    type: "time";
+    format: string;
+    default: any;
+};
+declare type DatetimeField = {
+    type: "datetime";
+    format: string;
+    default: any;
+};
+declare type SingleFields = StringField | NumberField | BooleanField | EnumField | MultiEnumField | DateField | TimeField | DatetimeField;
 export declare type GroupField = {
     type: "group";
     value: (Base & Breakpoints & SingleFields)[];
@@ -34,4 +57,5 @@ export interface BasicModelInstance {
     id: string;
     [key: string]: any;
 }
+export declare type ModelFieldTypes = "string" | "number" | "boolean" | "enum" | "multienum";
 export {};

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';
@@ -418,6 +418,25 @@ interface ValueBooleanProps {
  */
 declare const ValueBoolean: ({ label, value }: ValueBooleanProps) => JSX.Element;
 
+interface ValueDatetimeProps {
+    /**
+     * Name of the displayed value
+     */
+    label: string;
+    /**
+     * Value displayed
+     */
+    value: Date;
+    /**
+     * Datetime format
+     */
+    format: string;
+}
+/**
+ * Displays a formated datetime with a label
+ */
+declare const ValueDatetime: ({ label, value, format: fmt }: ValueDatetimeProps) => JSX.Element;
+
 declare type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container">>;
 declare type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
 declare type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
@@ -482,7 +501,30 @@ declare type NumberField = {
 declare type BooleanField = {
     type: "boolean";
 };
-declare type SingleFields = StringField | NumberField | BooleanField;
+declare type EnumField = {
+    type: "enum";
+    value: string[];
+};
+declare type MultiEnumField = {
+    type: "multienum";
+    value: string[];
+};
+declare type DateField = {
+    type: "date";
+    format: string;
+    default: any;
+};
+declare type TimeField = {
+    type: "time";
+    format: string;
+    default: any;
+};
+declare type DatetimeField = {
+    type: "datetime";
+    format: string;
+    default: any;
+};
+declare type SingleFields = StringField | NumberField | BooleanField | EnumField | MultiEnumField | DateField | TimeField | DatetimeField;
 declare type GroupField = {
     type: "group";
     value: (Base & Breakpoints & SingleFields)[];
@@ -496,6 +538,7 @@ interface BasicModelInstance {
     id: string;
     [key: string]: any;
 }
+declare type ModelFieldTypes = "string" | "number" | "boolean" | "enum" | "multienum";
 
 interface ObjectDetailsProps<T extends BasicModelInstance> {
     model: Model;
@@ -509,6 +552,8 @@ interface RequestState {
     error?: string;
     success?: boolean;
 }
+declare const IdleRequest: RequestState;
+declare const LoadingRequest: RequestState;
 
 interface BaseScreenProps {
     /**
@@ -519,6 +564,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 +680,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, ModelFieldTypes, 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, ValueDatetime, ValueDatetimeProps, 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.4",
+  "version": "0.3.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -35,11 +35,14 @@
     "@mui/lab": "^5.0.0-alpha.90",
     "@mui/material": "^5.9.0",
     "@mui/x-data-grid": "^5.13.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.7",
+    "date-fns": "^2.29.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
+    "@date-io/date-fns": "^2.15.0",
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
@@ -99,7 +102,8 @@
     "@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"
+    "react-router-dom": "^6.0.0",
+    "date-fns": "^2.0.0"
   },
   "repository": {
     "type": "git",

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/components/value-displays/index.ts

@@ -1,4 +1,5 @@
 export * from "./value-text";
 export * from "./value-card";
 export * from "./value-boolean";
+export * from "./value-datetime";
 export * from "./group-value-card";

package/src/components/value-displays/value-datetime/index.ts

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

package/src/components/value-displays/value-datetime/value-datetime.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueDatetime } from "./value-datetime";
+import { createTemplate, withContainer } from "../../../storybook";
+
+export default {
+  title: "Value displays/ValueDate",
+  component: ValueDatetime,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueDatetime>;
+
+const Template = createTemplate(ValueDatetime);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Lorem",
+  value: new Date(2022, 8, 22),
+  format: "yyyy/MM/dd",
+};

package/src/components/value-displays/value-datetime/value-datetime.test.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "../../../tests";
+import { ValueDatetime } from "./value-datetime";
+
+describe("ValueDatetime", () => {
+  const renderComponent = () => {
+    return render(
+      <ValueDatetime label="Hello world" value={new Date(2022, 7, 10)} format="dd-MM-yyyy" />,
+    );
+  };
+
+  it("would render the label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+  });
+
+  it("would render the value", () => {
+    renderComponent();
+
+    expect(screen.getByText(/10-08-2022/i)).toBeInTheDocument();
+  });
+});

package/src/components/value-displays/value-datetime/value-datetime.tsx

@@ -0,0 +1,40 @@
+import { Box, Tooltip, Typography } from "@mui/material";
+import React from "react";
+import { format } from "date-fns";
+
+export interface ValueDatetimeProps {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+  /**
+   * Value displayed
+   */
+  value: Date;
+
+  /**
+   * Datetime format
+   */
+  format: string;
+}
+
+/**
+ * Displays a formated datetime with a label
+ */
+export const ValueDatetime = ({ label, value, format: fmt }: ValueDatetimeProps) => {
+  const id = `label-${label.replace(/ /g, "-")}`;
+  const formatedValue = format(value, fmt);
+
+  return (
+    <Box>
+      <Typography variant="subtitle2" role="label" id={id}>
+        {label}
+      </Typography>
+      <Tooltip title={formatedValue} placement="top" enterDelay={2000}>
+        <Typography variant="h5" noWrap aria-labelledby={id}>
+          {formatedValue}
+        </Typography>
+      </Tooltip>
+    </Box>
+  );
+};