@pautena/react-design-system 0.2.1 → 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/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;
@@ -666,4 +709,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, 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 };
+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.2.1",
+  "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/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",
   },

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

@@ -5,8 +5,19 @@ import {
   expectModelFieldInputValue,
   render,
   screen,
+  selectOption,
+  selectOptions,
+  pickDatetime,
+  expectToHaveBeenCalledOnceWithMockInstance,
 } from "../../tests";
-import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import {
+  BirthDateFormat,
+  createModelInstance,
+  MockInstance,
+  mockModel,
+  ReturnTimeFormat,
+  TradeDateFormat,
+} from "../generators.mock";
 import userEvent from "@testing-library/user-event";
 
 describe("ModelForm", () => {
@@ -47,54 +58,60 @@ describe("ModelForm", () => {
 
   it("would call onSubmit if I fullfill all inputs and press the submit button", async () => {
     const { onSubmit } = renderComponent();
+    const birthDate = new Date(2047, 11, 26);
+    const returnTime = new Date(1970, 0, 1, 10, 12);
+    const tradeDate = new Date(2047, 11, 26, 12, 50);
 
     await userEvent.type(screen.getByRole("textbox", { name: "Id" }), "Id-1");
     await userEvent.type(screen.getByRole("textbox", { name: /first name/i }), "Karianne");
     await userEvent.type(screen.getByRole("textbox", { name: /middle name/i }), "Noah");
     await userEvent.type(screen.getByRole("textbox", { name: /last name/i }), "Gorczany");
-    await userEvent.type(screen.getByRole("textbox", { name: /gender/i }), "Cis Man");
+    await selectOption(screen.getByRole("button", { name: /gender/i }), "Cis Man");
     await userEvent.type(screen.getByRole("spinbutton", { name: /age/i }), "37");
-    await userEvent.type(
-      screen.getByRole("textbox", { name: /birth date/i }),
-      "Tue Nov 26 2047 12:14:19",
-    );
-    await userEvent.type(screen.getByRole("textbox", { name: /model/i }), "Spyder");
-    await userEvent.type(screen.getByRole("textbox", { name: /manufacturer/i }), "Bugatti");
+    pickDatetime(screen.getByRole("textbox", { name: /birth date/i }), birthDate, BirthDateFormat);
+    await selectOption(screen.getByRole("button", { name: /model/i }), "Spyder");
+    await selectOption(screen.getByRole("button", { name: /manufacturer/i }), "Bugatti");
     await userEvent.type(screen.getByRole("textbox", { name: /color/i }), "red");
-    await userEvent.type(screen.getByRole("textbox", { name: /type/i }), "Convertible");
+    await selectOptions(screen.getByRole("button", { name: /type/i }), [
+      "Coupe",
+      "Hatchback",
+      "Minivan",
+    ]);
     await userEvent.type(screen.getByRole("textbox", { name: /vin/i }), "46N6UE4VJ2XL28828");
     await userEvent.type(screen.getByRole("textbox", { name: /vrm/i }), "NE51AFH");
+    pickDatetime(
+      screen.getByRole("textbox", { name: /return time/i }),
+      returnTime,
+      ReturnTimeFormat,
+    );
     await userEvent.type(screen.getByRole("spinbutton", { name: /q/i }), "9");
-    await userEvent.type(screen.getByRole("textbox", { name: /available/i }), "true");
+    await userEvent.click(screen.getByRole("checkbox", { name: /available/i }));
     await userEvent.type(screen.getByRole("textbox", { name: /currency/i }), "mxn");
-    await userEvent.type(
-      screen.getByRole("textbox", { name: /trade date/i }),
-      "Thu Jul 21 2022 22:44:10",
-    );
+    pickDatetime(screen.getByRole("textbox", { name: /trade date/i }), tradeDate, TradeDateFormat);
 
     await userEvent.click(screen.getByRole("button", { name: /save/i }));
 
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    expect(onSubmit).toHaveBeenCalledWith({
+    expectToHaveBeenCalledOnceWithMockInstance(onSubmit, {
       id: "Id-1",
       firstName: "Karianne",
       middleName: "Noah",
       lastName: "Gorczany",
       gender: "Cis Man",
-      age: "37",
-      birthDate: "Tue Nov 26 2047 12:14:19",
+      age: 37,
+      birthDate,
       car: {
         model: "Spyder",
         manufacturer: "Bugatti",
         color: "red",
-        type: "Convertible",
+        type: ["Coupe", "Hatchback", "Minivan"],
         vin: "46N6UE4VJ2XL28828",
         vrm: "NE51AFH",
+        returnTime,
       },
-      quantity: "9",
-      available: "true",
+      quantity: 9,
+      available: true,
       currency: "mxn",
-      tradeDate: "Thu Jul 21 2022 22:44:10",
+      tradeDate,
     });
   });
 });