@pautena/react-design-system 0.1.4 → 0.3.0

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

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";