@pautena/react-design-system 0.2.0 → 0.3.1

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/model-router.types.d.ts

@@ -6,3 +6,4 @@ export interface RequestState {
 }
 export declare const IdleRequest: RequestState;
 export declare const LoadingRequest: RequestState;
+export declare const SuccessRequest: RequestState;

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

@@ -17,4 +17,4 @@ export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseSc
      */
     detailsItem?: T;
 }
-export declare const DetailsScreen: <T extends BasicModelInstance>({ model, modelName, onRequestItem, itemRequest, detailsItem, }: DetailsScreenProps<T>) => JSX.Element;
+export declare const DetailsScreen: <T extends BasicModelInstance>({ model, modelName, basePath, onRequestItem, itemRequest, detailsItem, }: DetailsScreenProps<T>) => JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export * from "./routing.hooks";

package/dist/esm/types/hooks/routing/routing.hooks.d.ts

@@ -0,0 +1,5 @@
+export interface NavigateWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNavigateWhenValueChanges: <T>(path: string, value: T | undefined, { from, to }: NavigateWhenValueChangesOptions<T>) => void;

package/dist/esm/types/providers/notification-center/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./notification-center.provider";
 export * from "./notification-center.context";
+export * from "./notification-center.hooks";

package/dist/esm/types/providers/notification-center/notification-center.hooks.d.ts

@@ -0,0 +1,6 @@
+import { Notification } from "./notification-center.context";
+export interface NotifyWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNotifyWhenValueChanges: <T>(notification: Notification, value: T | undefined, { from, to }: NotifyWhenValueChangesOptions<T>) => void;

package/dist/index.d.ts

@@ -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,9 @@ interface RequestState {
     error?: string;
     success?: boolean;
 }
+declare const IdleRequest: RequestState;
+declare const LoadingRequest: RequestState;
+declare const SuccessRequest: RequestState;
 
 interface BaseScreenProps {
     /**
@@ -655,6 +701,12 @@ interface NotificationCenterProps {
 declare const NotificationCenterContext: React__default.Context<NotificationCenterProps | undefined>;
 declare const useNotificationCenter: () => NotificationCenterProps;
 
+interface NotifyWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+declare const useNotifyWhenValueChanges: <T>(notification: Notification, value: T | undefined, { from, to }: NotifyWhenValueChangesOptions<T>) => void;
+
 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>>];
@@ -664,4 +716,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, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SnackbarActionType, SnackbarContentType, SuccessRequest, 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, useNotifyWhenValueChanges, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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/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>
+  );
+};

package/src/generators/generators.mock.ts

@@ -1,7 +1,10 @@
-import { Model, ModelField } from "./generators.model";
+import { BasicModelInstance, Model, ModelField } from "./generators.model";
 import { faker } from "@faker-js/faker";
-import { BasicData } from "../components";
+import { newArrayWithSize } from "../utils";
 
+export const BirthDateFormat = "dd/MM/yyyy";
+export const ReturnTimeFormat = "HH:mm";
+export const TradeDateFormat = "dd/MM/yyyy HH:mm";
 export const mockModel: Model = {
   fields: [
     {
@@ -46,7 +49,8 @@ export const mockModel: Model = {
     },
     {
       id: "gender",
-      type: "string",
+      type: "enum",
+      value: faker.definitions.name?.gender || [],
       description: "User gender",
       name: "Gender",
       xs: 12,
@@ -65,23 +69,27 @@ export const mockModel: Model = {
     },
     {
       id: "birthDate",
-      type: "string",
+      type: "date",
+      format: BirthDateFormat,
+      default: new Date(2014, 8, 18),
       description: "When he was born",
       name: "Birth Date",
       xs: 12,
       sm: 6,
       md: 6,
-      listable: true,
+      listable: false,
     },
     {
       id: "car",
       type: "group",
       description: "Information about the user car",
       name: "User car",
+      xs: 12,
       value: [
         {
           id: "model",
-          type: "string",
+          type: "enum",
+          value: faker.definitions.vehicle?.model || [],
           description: "Lorem ipsum",
           name: "Model",
           xs: 12,
@@ -89,7 +97,8 @@ export const mockModel: Model = {
         },
         {
           id: "manufacturer",
-          type: "string",
+          type: "enum",
+          value: faker.definitions.vehicle?.manufacturer || [],
           description: "Lorem ipsum",
           name: "Manufacturer",
           xs: 12,
@@ -105,7 +114,8 @@ export const mockModel: Model = {
         },
         {
           id: "type",
-          type: "string",
+          type: "multienum",
+          value: faker.definitions.vehicle?.type || [],
           description: "Lorem ipsum",
           name: "Type",
           xs: 12,
@@ -127,6 +137,16 @@ export const mockModel: Model = {
           xs: 12,
           sm: 4,
         },
+        {
+          id: "returnTime",
+          type: "time",
+          format: ReturnTimeFormat,
+          default: new Date(1970, 0, 1, 9, 0),
+          description: "Lorem ipsum",
+          name: "Return time",
+          xs: 12,
+          sm: 4,
+        },
       ],
     },
     {
@@ -156,11 +176,13 @@ export const mockModel: Model = {
     },
     {
       id: "tradeDate",
-      type: "string",
+      type: "datetime",
+      format: TradeDateFormat,
+      default: new Date(2022, 8, 12, 9, 0),
       description: "Lorem ipsum",
       name: "Trade date",
       xs: 12,
-      sm: 3,
+      sm: 5,
     },
   ],
 };
@@ -172,19 +194,20 @@ 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;
 }
 
 const mockFieldValue = {
@@ -194,20 +217,36 @@ const mockFieldValue = {
   lastName: faker.name.lastName,
   gender: faker.name.gender,
   age: () => faker.datatype.number({ min: 20, max: 60 }),
-  birthDate: () => faker.datatype.datetime().toString(),
+  birthDate: () => {
+    const date = faker.date.recent();
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  },
+  returnTime: () => {
+    const date = faker.date.recent();
+    const time = new Date();
+    time.setHours(date.getHours());
+    time.setMinutes(date.getMinutes());
+    time.setSeconds(0);
+    time.setMilliseconds(0);
+    return time;
+  },
   model: faker.vehicle.model,
   manufacturer: faker.vehicle.manufacturer,
   color: faker.vehicle.color,
-  type: faker.vehicle.type,
+  type: () => {
+    const array = newArrayWithSize(faker.datatype.number({ min: 2, max: 5 }), 0);
+    const result = array.map(() => faker.vehicle.type());
+    return [...new Set(result)];
+  },
   vin: faker.vehicle.vin,
   vrm: faker.vehicle.vrm,
   quantity: () => faker.datatype.number({ min: 1, max: 9 }),
   available: faker.datatype.boolean,
   currency: () => "MXN",
-  tradeDate: () => "Thu Jul 21 2022 22:44:10 GMT+0200 (Central European Summer Time)",
+  tradeDate: faker.date.recent,
 };
 
-export const createModelInstance = <T extends BasicData>(model: Model, seed = 100): T => {
+export const createModelInstance = <T extends BasicModelInstance>(model: Model, seed = 100): T => {
   faker.seed(seed);
   const obj = {};
 

package/src/generators/generators.model.ts

@@ -25,7 +25,43 @@ type BooleanField = {
   type: "boolean";
 };
 
-type SingleFields = StringField | NumberField | BooleanField;
+type EnumField = {
+  type: "enum";
+  value: string[];
+};
+
+type MultiEnumField = {
+  type: "multienum";
+  value: string[];
+};
+
+type DateField = {
+  type: "date";
+  format: string;
+  default: any;
+};
+
+type TimeField = {
+  type: "time";
+  format: string;
+  default: any;
+};
+
+type DatetimeField = {
+  type: "datetime";
+  format: string;
+  default: any;
+};
+
+type SingleFields =
+  | StringField
+  | NumberField
+  | BooleanField
+  | EnumField
+  | MultiEnumField
+  | DateField
+  | TimeField
+  | DatetimeField;
 
 export type GroupField = {
   type: "group";
@@ -44,3 +80,5 @@ export interface BasicModelInstance {
   id: string;
   [key: string]: any;
 }
+
+export type ModelFieldTypes = "string" | "number" | "boolean" | "enum" | "multienum";

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

@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 import { ModelForm } from "./model-form";
-import { createTemplate, withPadding } from "../../storybook";
+import { createTemplate, withPadding, withLocalizationProvider } from "../../storybook";
 import { createModelInstance, mockModel } from "../generators.mock";
 
 const initialValues = createModelInstance(mockModel);
@@ -8,7 +8,7 @@ const initialValues = createModelInstance(mockModel);
 export default {
   title: "Generators/ModelForm",
   component: ModelForm,
-  decorators: [withPadding(2)],
+  decorators: [withPadding(2), withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },