@pautena/react-design-system 0.4.8 → 0.5.1

package/src/generators/generators.mock.ts

@@ -219,19 +219,8 @@ const mockFieldValue: Record<string, () => FieldType> = {
   lastName: faker.name.lastName,
   gender: faker.name.gender,
   age: () => faker.datatype.number({ min: 20, max: 60 }),
-  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;
-  },
+  birthDate: () => new Date(2019, 3, 2),
+  returnTime: () => new Date(2022, 10, 2, 11, 0),
   model: faker.vehicle.model,
   manufacturer: faker.vehicle.manufacturer,
   color: faker.vehicle.color,
@@ -245,7 +234,7 @@ const mockFieldValue: Record<string, () => FieldType> = {
   quantity: () => faker.datatype.number({ min: 1, max: 9 }),
   available: faker.datatype.boolean,
   currency: () => "MXN",
-  tradeDate: faker.date.recent,
+  tradeDate: () => new Date(2012, 2, 11, 8, 25),
 };
 
 export const createModelInstance = <T extends BasicModelInstance>(model: Model, seed = 100): T => {

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

@@ -191,30 +191,27 @@ export const ModelForm = <T extends BasicModelInstance>({
       fieldInput = (
         <DesktopDatePicker
           label={name}
-          inputFormat={field.format}
+          format={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else if (type === "time") {
       fieldInput = (
         <TimePicker
           label={name}
-          inputFormat={field.format}
+          format={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else if (type === "datetime") {
       fieldInput = (
         <DateTimePicker
           label={name}
-          inputFormat={field.format}
+          format={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else {

package/src/storybook.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/display-name */
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, PropsWithChildren, ReactElement, useState } from "react";
 import { ComponentStory } from "@storybook/react";
 import { JSXElementConstructor } from "react";
-import { Box } from "@mui/material";
+import { Box, Button, SxProps, Theme } from "@mui/material";
 import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
 import { NotificationCenterProvider } from "./providers";
 import { action } from "@storybook/addon-actions";
@@ -18,6 +18,7 @@ export function createTemplate<P extends object>(
 const replaceAction = action("navigator/replace");
 const goAction = action("navigator/go");
 const pushAction = action("navigator/push");
+const closeDialogAction = action("dialog/close");
 
 export const withActionRouter =
   ({ location = "/", path = "/" }: { location?: string; path?: string } = {}) =>
@@ -65,9 +66,24 @@ export const withFullHeight = (Story: FunctionComponent) => {
 };
 
 export const withContainer =
-  ({ width, height, bordered }: { width?: number; height?: number; bordered?: boolean }) =>
+  ({
+    width,
+    height,
+    bordered,
+    backgroundColor,
+    padding,
+  }: {
+    width?: number;
+    height?: number;
+    bordered?: boolean;
+    backgroundColor?: string;
+    padding?: number;
+  }) =>
   (Story: FunctionComponent) => {
-    let sx = {};
+    let sx: SxProps<Theme> = {
+      backgroundColor,
+      padding,
+    };
     if (bordered) {
       sx = {
         ...sx,
@@ -98,3 +114,34 @@ export const withLocalizationProvider = (Story: FunctionComponent) => {
     </LocalizationProvider>
   );
 };
+
+export const StoryDialogManager = ({
+  component: C,
+  args,
+}: {
+  component: FunctionComponent<any>;
+  args: any;
+}) => {
+  const [open, setOpen] = useState(false);
+  const handleClose = (key: string) => {
+    setOpen(false);
+    closeDialogAction(key);
+  };
+
+  return (
+    <Box>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Open
+      </Button>
+      <C
+        {...args}
+        open={open}
+        onClose={() => handleClose("close")}
+        onCancel={() => handleClose("cancel")}
+        onAccept={() => handleClose("accept")}
+        onConfirm={() => handleClose("confirm")}
+        onSubmit={() => handleClose("submit")}
+      />
+    </Box>
+  );
+};

package/src/tests/actions.ts

@@ -43,5 +43,6 @@ export const clearCheckbox = async (element: HTMLInputElement) => {
 };
 
 export const pickDatetime = (element: HTMLInputElement, valueArg: Date, fmt: string) => {
-  fireEvent.change(element, { target: { value: format(valueArg, fmt) } });
+  const value = format(valueArg, fmt);
+  fireEvent.change(element, { target: { value } });
 };

package/src/tests/assertions.ts

@@ -8,6 +8,18 @@ export const expectContentPlaceholder = async () => {
   expect(await screen.findByTestId(/content-placeholder-test/i)).toBeInTheDocument();
 };
 
+export const assertDatetimeInputValue = (
+  element: HTMLElement,
+  { value, fmt, addSpaces = false }: { value: Date; fmt: string; addSpaces?: boolean },
+) => {
+  let expectedDateValue = format(value, fmt).replace(/ /g, "⁩ ⁦");
+
+  if (addSpaces) {
+    expectedDateValue = expectedDateValue.replace(/\//g, " / ").replace(/-/g, " - ");
+  }
+  expect(element).toHaveValue(expectedDateValue);
+};
+
 export const expectModelFieldInputExist = (fields: ModelField[]) => {
   fields.forEach((field) => {
     if (field.type === "group") {
@@ -41,11 +53,11 @@ export const expectModelFieldInputValue = (
         screen.getByRole("checkbox", { name: field.name, checked: value as boolean }),
       ).toBeInTheDocument();
     } else if (field.type === "date" || field.type === "time" || field.type === "datetime") {
-      const expectedDateValue = format(value as Date, field.format);
-      expect(screen.getByRole("textbox", { name: field.name })).toHaveAttribute(
-        "value",
-        expectedDateValue,
-      );
+      assertDatetimeInputValue(screen.getByRole("textbox", { name: field.name }), {
+        value: value as Date,
+        fmt: field.format,
+        addSpaces: true,
+      });
     } else {
       expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
     }
@@ -156,3 +168,36 @@ export const expectToHaveBeenCalledOnceWithMockInstance = (
     ),
   });
 };
+
+export enum AssertCloseDateUpTo {
+  Year = 1,
+  Month = 2,
+  Day = 3,
+  Hour = 4,
+  Minute = 5,
+  Seconds = 6,
+  Milliseconds = 7,
+}
+export const assertCloseDate = (date: Date, expectedDate: Date, upTo: AssertCloseDateUpTo) => {
+  if (upTo >= AssertCloseDateUpTo.Year) {
+    expect(date.getFullYear()).toBe(expectedDate.getFullYear());
+  }
+  if (upTo >= AssertCloseDateUpTo.Month) {
+    expect(date.getMonth()).toBe(expectedDate.getMonth());
+  }
+  if (upTo >= AssertCloseDateUpTo.Day) {
+    expect(date.getDay()).toBe(expectedDate.getDay());
+  }
+  if (upTo >= AssertCloseDateUpTo.Hour) {
+    expect(date.getHours()).toBe(expectedDate.getHours());
+  }
+  if (upTo >= AssertCloseDateUpTo.Minute) {
+    expect(date.getMinutes()).toBe(expectedDate.getMinutes());
+  }
+  if (upTo >= AssertCloseDateUpTo.Seconds) {
+    expect(date.getSeconds()).toBe(expectedDate.getSeconds());
+  }
+  if (upTo >= AssertCloseDateUpTo.Milliseconds) {
+    expect(date.getMilliseconds()).toBe(expectedDate.getMilliseconds());
+  }
+};

package/src/tests/datatable-placeholder/datatable-placeholder.tsx

@@ -29,11 +29,9 @@ export const DatatablePlaceholder = ({
       <DataGrid
         rows={rows}
         columns={columns as any}
-        pageSize={5}
-        rowsPerPageOptions={[5]}
         checkboxSelection
-        disableSelectionOnClick
-        experimentalFeatures={{ newEditingApi: true }}
+        autoPageSize
+        disableRowSelectionOnClick
       />
     </Box>
   );

package/src/tests/mocks/markdown.mock.ts

@@ -0,0 +1,25 @@
+export const mockMarkdownContent = `
+# Diu in illa Lavini atque de quoque
+
+## Secretaque nepos mentitis cupidine ponti dextramque nata
+funesta opposuitque deus adloquitur reminiscitur manibus ales? Spumisque fulva, veneni, vicit dum? Ipse responsa equo!
+
+Deos debebat, in tenuit postquam candida errorem vires undis limina ignis pectora capere dant, in curvo
+
+## Mota dixit
+Dum tot tum nunc, atque deae telum rustica tuebere tacti dat. Nunc quasi Tritonidos fluminis. Ulli regnat clamant luminis moenia; hoc numen accipe, indefletaeque artesque fores ales in concumbere. Boves humi regimen, vulnus ore adspicias, sit mutua nega, illud; quam fruges meritis.
+
+## Link section
+[toto link](http://www.maestispropositum.io/nuncprecibus.html)
+
+## List section
+
+1. Cum bella cantato
+2. Sinistra maternos tamen Gorgonis sim aquis
+3. Quo orat dabitur Dianae ira timendi templi
+
+
+- Cum oro Lycabas ultima
+- Haut ad dedit reducit crimina adhaeret pectore
+- Vulnere latebramque minima
+`;

package/src/types/index.d.ts

@@ -2,3 +2,9 @@ declare module "*.jpg" {
   const value: string;
   export default value;
 }
+
+declare module "*.md" {
+  const value: string;
+  export default value;
+}
+

package/src/utils/forms.ts

@@ -0,0 +1,11 @@
+import { FormEvent } from "react";
+
+export const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {
+  const data = new FormData(e.currentTarget);
+  const rawData: Record<string, any> = {};
+
+  data.forEach((value, key) => {
+    rawData[key] = value;
+  });
+  return rawData as T;
+};

package/dist/cjs/types/generators/generators.model.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/types/utils/arrays.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/dist/esm/types/utils/arrays.test.d.ts

@@ -1 +0,0 @@
-export {};