@pautena/react-design-system 0.0.1

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

@@ -0,0 +1,98 @@
+import React from "react";
+import { ModelForm } from "./model-form";
+import {
+  expectModelFieldInputExist,
+  expectModelFieldInputValue,
+  render,
+  screen,
+} from "../../tests";
+import { createModelInstance, mockModel } from "../generators.mock";
+import userEvent from "@testing-library/user-event";
+
+describe("ModelForm", () => {
+  const renderComponent = ({ initialValues = undefined }: { initialValues?: object } = {}) => {
+    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(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 from "react";
+import { useState } from "react";
+import { useGetDefaultThemeColor } from "../../utils/theme";
+import { Model, ModelField } from "../generators.model";
+
+export interface ModelFormProps {
+  model: Model;
+  initialValues?: object;
+  saveButtonText: string;
+  onSubmit: (values: object) => void;
+}
+
+const defaultThemeColorOpts = { lightWeight: 200, darkWeight: 800 };
+
+export const ModelForm = ({
+  model,
+  saveButtonText,
+  onSubmit,
+  initialValues = {},
+}: ModelFormProps) => {
+  const [values, setValues] = useState(initialValues);
+
+  const handleInputChange = (e, key: string | undefined) => {
+    e.preventDefault();
+
+    setValues((v) => {
+      const n = {};
+      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) => {
+    e.preventDefault();
+    onSubmit(values);
+  };
+
+  const renderField = (field: ModelField, key: string | undefined = undefined) => {
+    const defaultColor = useGetDefaultThemeColor(defaultThemeColorOpts);
+
+    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";

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

@@ -0,0 +1,160 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { withBrowserRouter } from "../../storybook";
+import { ModelRouter, RequestState } from "./model-router";
+import { mockModel, createModelInstance } from "../generators.mock";
+import { action } from "@storybook/addon-actions";
+import { useState } from "react";
+import { NotificationCenterProvider } from "../../providers";
+
+const REQUEST_TIMEOUT = 2000;
+
+const data = [
+  createModelInstance(mockModel, 100),
+  createModelInstance(mockModel, 101),
+  createModelInstance(mockModel, 102),
+  createModelInstance(mockModel, 103),
+  createModelInstance(mockModel, 104),
+];
+
+export default {
+  title: "Generators/ModelRouter",
+  component: ModelRouter,
+  decorators: [withBrowserRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ModelRouter>;
+
+const requestListAction = action("Request list data");
+const onSubmitAddAction = action("Submit add form");
+const onDetailsScreenMount = action("Details screen mount");
+const onRequestUpdateInstanceAction = action("Request update instance");
+const onSubmitUpdateAction = action("Submit update form");
+const onRequestDeleteAction = action("click delete item option");
+
+export const DummyModelRouter = (args: any) => {
+  const {
+    requestTimeout,
+    initialData,
+    requestListAction,
+    onSubmitAddAction,
+    onDetailsScreenMount,
+    onRequestUpdateInstanceAction,
+    onSubmitUpdateAction,
+    onRequestDeleteAction,
+  } = args;
+
+  const [data, setData] = useState<any[]>([]);
+  const [updateInstance, setUpdateInstance] = useState<any>(undefined);
+  const [listRequestState, setListRequestState] = useState<RequestState>({ idle: true });
+  const [addRequestState, setAddRequestState] = useState<RequestState>({ idle: true });
+  const [updateRequestState, setUpdateRequestState] = useState<RequestState>({ idle: true });
+  const [updateInstanceRequestState, setUpdateInstanceRequestState] = useState<RequestState>({
+    idle: true,
+  });
+  const [removeRequestState, setRemoveRequestState] = useState<RequestState>({ idle: true });
+  const [detailRequestState, setDetailRequestState] = useState<RequestState>({ idle: true });
+  const [detailInstance, setDetailInstance] = useState(undefined);
+
+  const props = {
+    ...args,
+    requestList: () => {
+      requestListAction();
+      setListRequestState({ idle: false, loading: true });
+      setTimeout(() => {
+        setData(initialData);
+        setListRequestState({ idle: true, loading: false, success: true });
+      }, requestTimeout);
+    },
+    list: {
+      data,
+      listRequest: listRequestState,
+      requestDelete: removeRequestState,
+      onClickRemoveItem: (item) => {
+        setRemoveRequestState({ idle: false, loading: true });
+        onRequestDeleteAction(item);
+
+        setTimeout(() => {
+          setData((d) => [...d.filter((d) => d !== item)]);
+          setRemoveRequestState({ idle: true, loading: false, success: true });
+        }, requestTimeout);
+      },
+    },
+    add: {
+      request: addRequestState,
+      onSubmit: (obj: any) => {
+        setAddRequestState({ idle: false, loading: true });
+        onSubmitAddAction(obj);
+
+        setTimeout(() => {
+          setData((d) => [...d, obj]);
+          setAddRequestState({ idle: true, loading: false, success: true });
+        }, requestTimeout);
+      },
+    },
+    detail: {
+      request: detailRequestState,
+      instance: detailInstance,
+      onScreenMount: (id: string) => {
+        setDetailInstance(undefined);
+        setDetailRequestState({ idle: false, loading: true });
+        onDetailsScreenMount(id);
+
+        setTimeout(() => {
+          setDetailInstance(data?.find((d) => d.id === id));
+          setDetailRequestState({ idle: true, loading: false, success: true });
+        }, requestTimeout);
+      },
+    },
+    update: {
+      request: updateRequestState,
+      requestInstance: updateInstanceRequestState,
+      instance: updateInstance,
+      onRequestInstance: (id: string) => {
+        setUpdateInstanceRequestState({ idle: false, loading: true });
+        onRequestUpdateInstanceAction(id);
+
+        setTimeout(() => {
+          setUpdateInstance(data?.find((d) => d.id === id));
+          setUpdateInstanceRequestState({ idle: true, loading: false, success: true });
+        }, requestTimeout);
+      },
+      onSubmit: (obj: any) => {
+        setUpdateRequestState({ idle: false, loading: true });
+        onSubmitUpdateAction(obj);
+
+        setTimeout(() => {
+          setData((d) => [
+            ...(d || []).map((item) => {
+              if (item === obj) {
+                return obj;
+              }
+              return item;
+            }),
+          ]);
+          setUpdateRequestState({ idle: true, loading: false, success: true });
+        }, requestTimeout);
+      },
+    },
+  };
+
+  return (
+    <NotificationCenterProvider>
+      <ModelRouter {...props} />
+    </NotificationCenterProvider>
+  );
+};
+
+DummyModelRouter.args = {
+  modelName: "Items",
+  model: mockModel,
+  requestTimeout: REQUEST_TIMEOUT,
+  initialData: data,
+  requestListAction,
+  onSubmitAddAction,
+  onDetailsScreenMount,
+  onRequestUpdateInstanceAction,
+  onSubmitUpdateAction,
+  onRequestDeleteAction,
+};