@pautena/react-design-system 0.2.1 → 0.3.0

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

@@ -1,8 +1,69 @@
-import { Box, Button, Grid, Paper, TextField, Typography } from "@mui/material";
-import React, { ChangeEvent, FormEvent } from "react";
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { DesktopDatePicker, TimePicker, DateTimePicker } from "@mui/x-date-pickers";
+import React, { ChangeEvent, FormEvent, ReactElement, useMemo } from "react";
 import { useState } from "react";
 import { useGetDefaultThemeColor } from "../../utils/theme";
-import { Model, ModelField, BasicModelInstance } from "../generators.model";
+import { Model, ModelField, BasicModelInstance, ModelFieldTypes } from "../generators.model";
+
+const InitialStateZeroValue: Record<string, any> = {
+  string: undefined,
+  number: undefined,
+  boolean: false,
+  enum: "",
+  multienum: [],
+  date: "01/01/1970",
+  group: {},
+};
+
+const getFieldInitialState = <T extends BasicModelInstance>(
+  field: ModelField,
+  initialValues: T | undefined,
+) => {
+  return initialValues ? initialValues[field.id] : InitialStateZeroValue[field.type];
+};
+
+const getValuesInitialState = <T extends BasicModelInstance>(
+  model: Model,
+  initialValues: T | undefined,
+): T => {
+  const obj = {} as any;
+
+  model.fields.forEach((field) => {
+    let value: any;
+    if (field.type === "group") {
+      value = {};
+      field.value.forEach((groupField) => {
+        value[groupField.id] = getFieldInitialState(
+          groupField,
+          initialValues && initialValues[field.id],
+        );
+      });
+    } else if (field.type === "date" || field.type === "time") {
+      value = (initialValues && initialValues[field.id]) || field.default;
+    } else {
+      value = getFieldInitialState(field, initialValues);
+    }
+
+    obj[field.id] = value;
+  });
+
+  return obj;
+};
 
 export interface ModelFormProps<T extends BasicModelInstance> {
   model: Model;
@@ -17,28 +78,63 @@ export const ModelForm = <T extends BasicModelInstance>({
   onSubmit,
   initialValues,
 }: ModelFormProps<T>) => {
-  const [values, setValues] = useState<T>(initialValues || ({} as T));
-
-  const handleInputChange = (e: ChangeEvent<any>, key: string | undefined) => {
-    e.preventDefault();
-
-    e.target;
+  const valuesInitialState = useMemo(
+    () => getValuesInitialState<T>(model, initialValues),
+    [model, initialValues],
+  );
+  const [values, setValues] = useState<T>(valuesInitialState);
 
+  const setKeyValue = (name: string, key: string | undefined, value: any) => {
     setValues((v) => {
       const n: Record<string, object> = {};
       if (key) {
         n[key] = {
           ...v[key],
-          [e.target.name]: e.target.value,
+          [name]: value,
         };
       } else {
-        n[e.target.name] = e.target.value;
+        n[name] = value;
       }
 
       return { ...v, ...n };
     });
   };
 
+  const handleCheckboxChange = (e: ChangeEvent<any>, key: string | undefined) => {
+    e.preventDefault();
+    setKeyValue(e.target.name, key, e.target.checked);
+  };
+
+  const handleSelectChange = (e: SelectChangeEvent<any>, key: string | undefined) => {
+    e.preventDefault();
+    setKeyValue(e.target.name, key, e.target.value);
+  };
+
+  const handleMultiSelectChange = (e: SelectChangeEvent<any>, key: string | undefined) => {
+    e.preventDefault();
+    const { value } = e.target;
+    const newValue = typeof value === "string" ? value.split(",") : value;
+    setKeyValue(e.target.name, key, newValue);
+  };
+
+  const handleInputChange = (
+    e: ChangeEvent<any>,
+    key: string | undefined,
+    type: ModelFieldTypes,
+  ) => {
+    e.preventDefault();
+
+    let value = e.target.value;
+    if (type === "number") {
+      value = parseInt(e.target.value);
+    }
+    setKeyValue(e.target.name, key, value);
+  };
+
+  const handleDateChange = (value: any, key: string | undefined, id: string) => {
+    setKeyValue(id, key, value);
+  };
+
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     onSubmit(values);
@@ -48,28 +144,113 @@ export const ModelForm = <T extends BasicModelInstance>({
     const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
 
     const { id, type, name, description, xs, sm, md, lg, xl } = field;
+
+    let fieldInput: ReactElement;
+    const value = key ? values[key][id] : values[id];
     if (type === "group") {
-      return (
-        <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
-          <Paper>
-            <Box bgcolor={defaultColor} px={2} py={1} mb={2}>
-              <Typography variant="h6" role="heading" aria-level={1}>
-                {name}
-              </Typography>
-              <Typography variant="body2" role="heading" aria-level={2}>
-                {description}
-              </Typography>
-            </Box>
-            <Grid container spacing={2} sx={{ p: 2 }}>
-              {field.value.map((f) => renderField(f, id))}
-            </Grid>
-          </Paper>
-        </Grid>
+      fieldInput = (
+        <Paper>
+          <Box bgcolor={defaultColor} px={2} py={1} mb={2}>
+            <Typography variant="h6" role="heading" aria-level={1}>
+              {name}
+            </Typography>
+            <Typography variant="body2" role="heading" aria-level={2}>
+              {description}
+            </Typography>
+          </Box>
+          <Grid container spacing={2} sx={{ p: 2 }}>
+            {field.value.map((f) => renderField(f, id))}
+          </Grid>
+        </Paper>
       );
-    }
-
-    return (
-      <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+    } else if (type === "boolean") {
+      fieldInput = (
+        <Box sx={{ height: 1, display: "flex", alignItems: "center" }}>
+          <FormControlLabel
+            control={
+              <Checkbox name={id} onChange={(e) => handleCheckboxChange(e, key)} checked={value} />
+            }
+            label={name}
+          />
+        </Box>
+      );
+    } else if (type === "enum") {
+      fieldInput = (
+        <FormControl fullWidth>
+          <InputLabel id={`${id}-select-label`}>{name}</InputLabel>
+          <Select
+            labelId={`${id}-select-label`}
+            id={`${id}-select`}
+            value={value}
+            label={name}
+            name={id}
+            onChange={(e) => handleSelectChange(e, key)}
+            required
+          >
+            {field.value.map((fieldValue) => (
+              <MenuItem key={fieldValue} value={fieldValue}>
+                {fieldValue}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      );
+    } else if (type === "multienum") {
+      fieldInput = (
+        <FormControl fullWidth>
+          <InputLabel id={`${id}-select-label`}>{name}</InputLabel>
+          <Select
+            labelId={`${id}-select-label`}
+            id={`${id}-select`}
+            value={value || []}
+            renderValue={(selected) => selected.join(", ")}
+            label={name}
+            name={id}
+            onChange={(e) => handleMultiSelectChange(e, key)}
+            required
+            multiple
+          >
+            {field.value.map((fieldValue) => (
+              <MenuItem key={fieldValue} value={fieldValue}>
+                <Checkbox checked={(value || []).includes(fieldValue)} />
+                <ListItemText primary={fieldValue} />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      );
+    } else if (type === "date") {
+      fieldInput = (
+        <DesktopDatePicker
+          label={name}
+          inputFormat={field.format}
+          value={value}
+          onChange={(value) => handleDateChange(value, key, id)}
+          renderInput={(params: any) => <TextField {...params} />}
+        />
+      );
+    } else if (type === "time") {
+      fieldInput = (
+        <TimePicker
+          label={name}
+          inputFormat={field.format}
+          value={value}
+          onChange={(value) => handleDateChange(value, key, id)}
+          renderInput={(params: any) => <TextField {...params} />}
+        />
+      );
+    } else if (type === "datetime") {
+      fieldInput = (
+        <DateTimePicker
+          label={name}
+          inputFormat={field.format}
+          value={value}
+          onChange={(value) => handleDateChange(value, key, id)}
+          renderInput={(params: any) => <TextField {...params} />}
+        />
+      );
+    } else {
+      fieldInput = (
         <TextField
           required
           type={type}
@@ -77,9 +258,15 @@ export const ModelForm = <T extends BasicModelInstance>({
           name={id}
           variant="outlined"
           fullWidth
-          value={key && key in values ? values[key][id] : values[id]}
-          onChange={(e) => handleInputChange(e, key)}
+          value={value}
+          onChange={(e) => handleInputChange(e, key, type)}
         />
+      );
+    }
+
+    return (
+      <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+        {fieldInput}
       </Grid>
     );
   };

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

@@ -9,16 +9,31 @@ import {
   TestRouter,
   expectModelFieldValue,
   expectModelFieldInputValue,
+  selectOption,
 } from "~/tests";
 import { data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
-import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import {
+  BirthDateFormat,
+  createModelInstance,
+  MockInstance,
+  mockModel,
+  ReturnTimeFormat,
+  TradeDateFormat,
+} from "../generators.mock";
 import { NotificationCenterProvider } from "../../providers";
 import { Box } from "@mui/system";
 import { Button } from "@mui/material";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import {
+  clearCheckbox,
+  clearMultiSelect,
+  expectToHaveBeenCalledOnceWithMockInstance,
+  pickDatetime,
+  selectOptions,
+} from "../../tests";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -82,30 +97,6 @@ describe("ModelRouter", () => {
     expectNotToHaveMenuOption: ({ id }: { id: string }) => {
       expect(screen.queryByTestId(`options-${id}`)).not.toBeInTheDocument();
     },
-    expectSubmitInstanceCall: (mockFn: jest.Mock, instance: MockInstance) => {
-      expect(mockFn).toHaveBeenCalledTimes(1);
-      expect(mockFn).toHaveBeenCalledWith({
-        id: instance.id,
-        firstName: instance.firstName,
-        middleName: instance.middleName,
-        lastName: instance.lastName,
-        gender: instance.gender,
-        age: instance.age.toString(),
-        birthDate: instance.birthDate,
-        car: {
-          model: instance.car.model,
-          manufacturer: instance.car.manufacturer,
-          color: instance.car.color,
-          type: instance.car.type,
-          vin: instance.car.vin,
-          vrm: instance.car.vrm,
-        },
-        quantity: instance.quantity.toString(),
-        available: instance.available.toString(),
-        currency: instance.currency,
-        tradeDate: instance.tradeDate,
-      });
-    },
   };
 
   const actions = {
@@ -149,17 +140,18 @@ describe("ModelRouter", () => {
       const firstNameElement = screen.getByRole("textbox", { name: /first name/i });
       const middleNameElement = screen.getByRole("textbox", { name: /middle name/i });
       const lastNameElement = screen.getByRole("textbox", { name: /last name/i });
-      const genderElement = screen.getByRole("textbox", { name: /gender/i });
+      const genderElement = screen.getByRole("button", { name: /gender/i });
       const ageElement = screen.getByRole("spinbutton", { name: /age/i });
       const birthDateElement = screen.getByRole("textbox", { name: /birth date/i });
-      const manufacturerElement = screen.getByRole("textbox", { name: /manufacturer/i });
-      const modelElement = screen.getByRole("textbox", { name: /model/i });
+      const manufacturerElement = screen.getByRole("button", { name: /manufacturer/i });
+      const modelElement = screen.getByRole("button", { name: /model/i });
       const colorElement = screen.getByRole("textbox", { name: /color/i });
-      const typeElement = screen.getByRole("textbox", { name: /type/i });
+      const typeElement = screen.getByRole("button", { name: /type/i });
       const vinElement = screen.getByRole("textbox", { name: /vin/i });
       const vrmElement = screen.getByRole("textbox", { name: /vrm/i });
+      const timeReturnElement = screen.getByRole("textbox", { name: /return time/i });
       const quantityElement = screen.getByRole("spinbutton", { name: /q/i });
-      const availableElement = screen.getByRole("textbox", { name: /available/i });
+      const availableElement = screen.getByRole("checkbox", { name: /available/i });
       const currencyElement = screen.getByRole("textbox", { name: /currency/i });
       const tradeDateElement = screen.getByRole("textbox", { name: /trade date/i });
 
@@ -168,37 +160,39 @@ describe("ModelRouter", () => {
         await userEvent.clear(firstNameElement);
         await userEvent.clear(middleNameElement);
         await userEvent.clear(lastNameElement);
-        await userEvent.clear(genderElement);
         await userEvent.clear(ageElement);
         await userEvent.clear(birthDateElement);
-        await userEvent.clear(manufacturerElement);
-        await userEvent.clear(modelElement);
         await userEvent.clear(colorElement);
-        await userEvent.clear(typeElement);
         await userEvent.clear(vinElement);
         await userEvent.clear(vrmElement);
         await userEvent.clear(quantityElement);
         await userEvent.clear(availableElement);
         await userEvent.clear(currencyElement);
         await userEvent.clear(tradeDateElement);
+        await userEvent.clear(timeReturnElement);
+        await clearCheckbox(availableElement);
+        await clearMultiSelect(typeElement);
       }
       await userEvent.type(idElement, instance.id);
       await userEvent.type(firstNameElement, instance.firstName);
       await userEvent.type(middleNameElement, instance.middleName);
       await userEvent.type(lastNameElement, instance.lastName);
-      await userEvent.type(genderElement, instance.gender);
+      await selectOption(genderElement, instance.gender);
       await userEvent.type(ageElement, instance.age.toString());
-      await userEvent.type(birthDateElement, instance.birthDate);
-      await userEvent.type(modelElement, instance.car.model);
-      await userEvent.type(manufacturerElement, instance.car.manufacturer);
+      pickDatetime(birthDateElement, instance.birthDate, BirthDateFormat);
+      await selectOption(modelElement, instance.car.model);
+      await selectOption(manufacturerElement, instance.car.manufacturer);
       await userEvent.type(colorElement, instance.car.color);
-      await userEvent.type(typeElement, instance.car.type);
+      await selectOptions(typeElement, instance.car.type);
       await userEvent.type(vinElement, instance.car.vin);
       await userEvent.type(vrmElement, instance.car.vrm);
+      pickDatetime(timeReturnElement, instance.car.returnTime, ReturnTimeFormat);
       await userEvent.type(quantityElement, instance.quantity.toString());
-      await userEvent.type(availableElement, instance.available.toString());
+      if (instance.available) {
+        await userEvent.click(availableElement);
+      }
       await userEvent.type(currencyElement, instance.currency);
-      await userEvent.type(tradeDateElement, instance.tradeDate);
+      pickDatetime(tradeDateElement, instance.tradeDate, TradeDateFormat);
 
       submit && (await userEvent.click(screen.getByRole("button", { name: /save/i })));
 
@@ -544,7 +538,7 @@ describe("ModelRouter", () => {
 
       const newInstance = await actions.fullfillModelForm({ model, submit: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitNewItem, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, newInstance);
     });
 
     it("would show a loading indicator when the request is in progress", async () => {
@@ -707,12 +701,12 @@ describe("ModelRouter", () => {
     });
 
     it("would make a request with the new values when the form is submitted", async () => {
-      const { model } = await renderComponent({ screen: "update" });
+      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
 
       await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, clear: true });
+      const newInstance = await actions.fullfillModelForm({ model, clear: true, submit: true });
 
-      expectModelFieldInputValue(model.fields, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitUpdate, newInstance);
     });
 
     it("would show a loading indicator while the submit request is in progress", async () => {
@@ -724,14 +718,14 @@ describe("ModelRouter", () => {
       expectProgressIndicator();
     });
 
-    it("would navigate to the list screen when the submit request finish", async () => {
-      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
+    // it("would navigate to the list screen when the submit request finish", async () => {
+    //   const { model } = await renderComponent({ screen: "update" });
 
-      await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, submit: true, clear: true });
+    //   await waitForProgressIndicatorToBeRemoved();
+    //   await actions.fullfillModelForm({ model, submit: true, clear: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitUpdate, newInstance);
-    });
+    //   await assertions.expectListScreen();
+    // });
   });
 
   describe("delete item", () => {

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

@@ -1,6 +1,10 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { withMemoryRouter, withNotificationCenter } from "../../../storybook";
+import {
+  withLocalizationProvider,
+  withMemoryRouter,
+  withNotificationCenter,
+} from "../../../storybook";
 import { ModelRouter } from "../model-router";
 import { IdleRequest } from "../model-router.types";
 import { MockInstance, mockModel } from "../../generators.mock";
@@ -216,7 +220,7 @@ export const InternalModelRouter = () => {
 export default {
   title: "Generators/ModelRouter",
   component: DummyModelRouter,
-  decorators: [withMemoryRouter(), withNotificationCenter],
+  decorators: [withMemoryRouter(), withNotificationCenter, withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },

package/src/generators/object-details/object-details.tsx

@@ -6,16 +6,17 @@ import {
   ValueBoolean,
   ValueCard,
   ValueText,
+  ValueDatetime,
 } from "../../components";
 import { ModelField, GroupField, Model, BasicModelInstance } from "../generators.model";
 
-const singleDetailValueFactory = <T extends BasicModelInstance>(
-  { id, name, type }: ModelField,
-  instance: T,
-) => {
+const singleDetailValueFactory = <T extends BasicModelInstance>(field: ModelField, instance: T) => {
+  const { id, name, type } = field;
   const value = instance[id];
   if (type === "boolean") {
     return <ValueBoolean label={name} value={value} />;
+  } else if (type === "date" || type === "time" || type === "datetime") {
+    return <ValueDatetime label={name} value={value} format={field.format} />;
   }
   return <ValueText label={name} value={value?.toString()} />;
 };

package/src/storybook.tsx

@@ -6,6 +6,8 @@ import { Box } from "@mui/material";
 import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
 import { NotificationCenterProvider } from "./providers";
 import { action } from "@storybook/addon-actions";
+import { LocalizationProvider } from "@mui/x-date-pickers/";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
 export function createTemplate<P>(
   C: JSXElementConstructor<P>,
@@ -88,3 +90,11 @@ export const withPadding =
       </Box>
     );
   };
+
+export const withLocalizationProvider = (Story: FunctionComponent) => {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Story />
+    </LocalizationProvider>
+  );
+};

package/src/tests/actions.ts

@@ -0,0 +1,43 @@
+import userEvent from "@testing-library/user-event";
+import { screen, fireEvent } from "./testing-library";
+import { format } from "date-fns";
+
+export const selectOption = async (element: HTMLElement, option: string) => {
+  await userEvent.click(element);
+  await userEvent.click(screen.getByRole("option", { name: option }));
+};
+
+export const selectOptions = async (element: HTMLElement, options: string[]) => {
+  await userEvent.click(element);
+
+  for (const option of options) {
+    const optionElement = screen.getByRole("option", { name: option });
+    await userEvent.click(optionElement);
+  }
+
+  const presentation = screen.getByRole("presentation").firstChild;
+  presentation && fireEvent.click(presentation);
+};
+
+export const clearMultiSelect = async (element: HTMLElement) => {
+  await userEvent.click(element);
+
+  const options = screen.queryAllByRole("option", { selected: true });
+
+  for (const option of options) {
+    await userEvent.click(option);
+  }
+
+  const presentation = screen.getByRole("presentation").firstChild;
+  presentation && fireEvent.click(presentation);
+};
+
+export const clearCheckbox = async (element: HTMLInputElement) => {
+  if (element.checked) {
+    await userEvent.click(element);
+  }
+};
+
+export const pickDatetime = (element: HTMLInputElement, value: Date, fmt: string) => {
+  fireEvent.change(element, { target: { value: format(value, fmt) } });
+};