@pautena/react-design-system 0.1.2 → 0.2.0

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

@@ -0,0 +1,100 @@
+import React from "react";
+import { ModelForm } from "./model-form";
+import {
+  expectModelFieldInputExist,
+  expectModelFieldInputValue,
+  render,
+  screen,
+} from "../../tests";
+import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import userEvent from "@testing-library/user-event";
+
+describe("ModelForm", () => {
+  const renderComponent = ({
+    initialValues = undefined,
+  }: { initialValues?: MockInstance } = {}) => {
+    const onSubmit = jest.fn();
+    const instance = render(
+      <ModelForm
+        model={mockModel}
+        initialValues={initialValues}
+        saveButtonText="save"
+        onSubmit={onSubmit}
+      />,
+    );
+
+    return { ...instance, onSubmit };
+  };
+
+  it("would render a button", () => {
+    renderComponent();
+
+    expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
+  });
+
+  it("would render an input for each model", () => {
+    renderComponent();
+
+    expectModelFieldInputExist(mockModel.fields);
+  });
+
+  it("would render the initial value if initialValues is provided", () => {
+    const initialValues = createModelInstance<MockInstance>(mockModel);
+    renderComponent({ initialValues });
+
+    expectModelFieldInputValue(mockModel.fields, initialValues);
+  });
+
+  it("would call onSubmit if I fullfill all inputs and press the submit button", async () => {
+    const { onSubmit } = renderComponent();
+
+    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 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");
+    await userEvent.type(screen.getByRole("textbox", { name: /color/i }), "red");
+    await userEvent.type(screen.getByRole("textbox", { name: /type/i }), "Convertible");
+    await userEvent.type(screen.getByRole("textbox", { name: /vin/i }), "46N6UE4VJ2XL28828");
+    await userEvent.type(screen.getByRole("textbox", { name: /vrm/i }), "NE51AFH");
+    await userEvent.type(screen.getByRole("spinbutton", { name: /q/i }), "9");
+    await userEvent.type(screen.getByRole("textbox", { name: /available/i }), "true");
+    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",
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: /save/i }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({
+      id: "Id-1",
+      firstName: "Karianne",
+      middleName: "Noah",
+      lastName: "Gorczany",
+      gender: "Cis Man",
+      age: "37",
+      birthDate: "Tue Nov 26 2047 12:14:19",
+      car: {
+        model: "Spyder",
+        manufacturer: "Bugatti",
+        color: "red",
+        type: "Convertible",
+        vin: "46N6UE4VJ2XL28828",
+        vrm: "NE51AFH",
+      },
+      quantity: "9",
+      available: "true",
+      currency: "mxn",
+      tradeDate: "Thu Jul 21 2022 22:44:10",
+    });
+  });
+});

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

@@ -0,0 +1,97 @@
+import { Box, Button, Grid, Paper, TextField, Typography } from "@mui/material";
+import React, { ChangeEvent, FormEvent } from "react";
+import { useState } from "react";
+import { useGetDefaultThemeColor } from "../../utils/theme";
+import { Model, ModelField, BasicModelInstance } from "../generators.model";
+
+export interface ModelFormProps<T extends BasicModelInstance> {
+  model: Model;
+  initialValues?: T;
+  saveButtonText: string;
+  onSubmit: (values: T) => void;
+}
+
+export const ModelForm = <T extends BasicModelInstance>({
+  model,
+  saveButtonText,
+  onSubmit,
+  initialValues,
+}: ModelFormProps<T>) => {
+  const [values, setValues] = useState<T>(initialValues || ({} as T));
+
+  const handleInputChange = (e: ChangeEvent<any>, key: string | undefined) => {
+    e.preventDefault();
+
+    e.target;
+
+    setValues((v) => {
+      const n: Record<string, object> = {};
+      if (key) {
+        n[key] = {
+          ...v[key],
+          [e.target.name]: e.target.value,
+        };
+      } else {
+        n[e.target.name] = e.target.value;
+      }
+
+      return { ...v, ...n };
+    });
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit(values);
+  };
+
+  const renderField = (field: ModelField, key: string | undefined = undefined) => {
+    const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
+
+    const { id, type, name, description, xs, sm, md, lg, xl } = field;
+    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>
+      );
+    }
+
+    return (
+      <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+        <TextField
+          required
+          type={type}
+          label={name}
+          name={id}
+          variant="outlined"
+          fullWidth
+          value={key && key in values ? values[key][id] : values[id]}
+          onChange={(e) => handleInputChange(e, key)}
+        />
+      </Grid>
+    );
+  };
+
+  return (
+    <Grid container component="form" spacing={2} onSubmit={handleSubmit}>
+      {model.fields.map((f) => renderField(f))}
+      <Grid item xs={12}>
+        <Button type="submit" variant="contained">
+          {saveButtonText}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};

package/src/generators/model-router/index.ts

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