@pautena/react-design-system 0.2.0 → 0.3.1

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,
     });
   });
 });

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

@@ -1 +1,2 @@
 export * from "./model-router";
+export * from "./model-router.types";