@pautena/react-design-system 0.6.2 → 0.7.0

package/src/generators/generators.model.ts

@@ -5,6 +5,8 @@
 export type ModelFieldTypes =
   | "string"
   | "number"
+  | "string[]"
+  | "number[]"
   | "boolean"
   | "enum"
   | "multienum"
@@ -31,10 +33,18 @@ type StringField = {
   type: "string";
 };
 
+type StringArrayField = {
+  type: "string[]";
+};
+
 type NumberField = {
   type: "number";
 };
 
+type NumberArrayField = {
+  type: "number[]";
+};
+
 type BooleanField = {
   type: "boolean";
 };
@@ -70,6 +80,8 @@ type DatetimeField = {
 type SingleFields =
   | StringField
   | NumberField
+  | StringArrayField
+  | NumberArrayField
   | BooleanField
   | EnumField
   | MultiEnumField
@@ -82,7 +94,12 @@ export type GroupField = {
   value: (Base & Breakpoints & SingleFields)[];
 } & Base;
 
-type Fields = SingleFields | GroupField;
+export type ArrayGroupField = {
+  type: "group[]";
+  value: (Base & Breakpoints & SingleFields)[];
+} & Base;
+
+type Fields = SingleFields | GroupField | ArrayGroupField;
 export type ModelField = Base & Breakpoints & Fields;
 
 export type Model = {
@@ -94,9 +111,10 @@ export type Model = {
  * Types used to represent an instance of a model specification
  */
 export type BaseFieldType = string | number | boolean | Date;
-export type ArrayFieldType = string[];
+export type ArrayFieldType = string[] | number[];
 export type SingleFieldType = BaseFieldType | ArrayFieldType;
 export type GroupInstanceType = { [key: string]: SingleFieldType };
+export type ArrayInstanceType = { [key: string]: SingleFieldType }[];
 export type FieldType = SingleFieldType | GroupInstanceType;
 
 export interface BasicModelInstance {
@@ -108,17 +126,21 @@ export interface BasicModelInstance {
  * UTILITIES
  * Some functions used in several places to help to manage models
  */
-const InitialStateZeroValue: Record<ModelFieldTypes | "group", FieldType | undefined> = {
-  string: "",
-  number: 0,
-  boolean: false,
-  enum: "",
-  multienum: [],
-  date: new Date(1970, 0, 1, 0, 0),
-  time: new Date(1970, 0, 1, 0, 0),
-  datetime: new Date(1970, 0, 1, 0, 0),
-  group: {},
-};
+const InitialStateZeroValue: Record<ModelFieldTypes | "group" | "group[]", FieldType | undefined> =
+  {
+    string: "",
+    number: 0,
+    boolean: false,
+    enum: "",
+    multienum: [],
+    date: new Date(1970, 0, 1, 0, 0),
+    time: new Date(1970, 0, 1, 0, 0),
+    datetime: new Date(1970, 0, 1, 0, 0),
+    group: {},
+    "group[]": [],
+    "string[]": [],
+    "number[]": [],
+  };
 
 const getFieldValueOrZero = (
   field: ModelField,

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

@@ -86,6 +86,8 @@ describe("ModelForm", () => {
     await userEvent.click(screen.getByRole("checkbox", { name: /available/i }));
     await userEvent.type(screen.getByRole("textbox", { name: /currency/i }), "mxn");
     pickDatetime(screen.getByRole("textbox", { name: /trade date/i }), tradeDate, TradeDateFormat);
+    await userEvent.type(screen.getByRole("textbox", { name: /codes/i }), "foo,bar");
+    await userEvent.type(screen.getByRole("textbox", { name: /identifiers/i }), "1,2,3");
 
     await userEvent.click(screen.getByRole("button", { name: /save/i }));
 
@@ -110,6 +112,9 @@ describe("ModelForm", () => {
       available: true,
       currency: "mxn",
       tradeDate,
+      codes: ["foo", "bar"],
+      identifiers: ["1", "2", "3"],
+      carsHistory: [],
     });
   });
 });

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

@@ -88,9 +88,11 @@ export const ModelForm = <T extends BasicModelInstance>({
   ) => {
     e.preventDefault();
 
-    let value: string | number = e.target.value;
+    let value: string | number | string[] | number[] = e.target.value;
     if (type === "number" && typeof value === "string") {
-      value = parseInt(e.target.value);
+      value = parseInt(e.target.value, 10);
+    } else if (type.includes("[]")) {
+      value = e.target.value.split(",");
     }
     setKeyValue(e.target.name, key, value);
   };
@@ -180,7 +182,7 @@ export const ModelForm = <T extends BasicModelInstance>({
           >
             {field.value.map((fieldValue) => (
               <MenuItem key={fieldValue} value={fieldValue}>
-                <Checkbox checked={((value as ArrayFieldType) || []).includes(fieldValue)} />
+                <Checkbox checked={((value as any[]) || []).includes(fieldValue)} />
                 <ListItemText primary={fieldValue} />
               </MenuItem>
             ))}
@@ -214,6 +216,22 @@ export const ModelForm = <T extends BasicModelInstance>({
           onChange={(value) => handleDateChange(value, key, id)}
         />
       );
+    } else if (type === "group[]") {
+      return null;
+    } else if (type.includes("[]")) {
+      fieldInput = (
+        <TextField
+          required
+          type="text"
+          label={name}
+          name={id}
+          variant="outlined"
+          helperText="Use comas to separate multiple values"
+          fullWidth
+          value={(value as any[]).join(",")}
+          onChange={(e) => handleInputChange(e, key, type)}
+        />
+      );
     } else {
       fieldInput = (
         <TextField

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

@@ -167,6 +167,8 @@ describe("ModelRouter", () => {
       const tradeDateElement = screen.getByRole<HTMLInputElement>("textbox", {
         name: /trade date/i,
       });
+      const codesElement = screen.getByRole("textbox", { name: /codes/i });
+      const identifiersElement = screen.getByRole("textbox", { name: /identifiers/i });
 
       if (clear) {
         await userEvent.clear(idElement);
@@ -181,6 +183,8 @@ describe("ModelRouter", () => {
         await userEvent.clear(currencyElement);
         await userEvent.clear(tradeDateElement);
         await userEvent.clear(timeReturnElement);
+        await userEvent.clear(codesElement);
+        await userEvent.clear(identifiersElement);
         await clearCheckbox(availableElement);
         await clearMultiSelect(typeElement);
       }
@@ -204,6 +208,8 @@ describe("ModelRouter", () => {
       }
       await userEvent.type(currencyElement, instance.currency);
       pickDatetime(tradeDateElement, instance.tradeDate, TradeDateFormat);
+      await userEvent.type(codesElement, instance.codes.join(","));
+      await userEvent.type(identifiersElement, instance.identifiers.join(","));
 
       submit && (await userEvent.click(screen.getByRole("button", { name: /save/i })));
 
@@ -712,7 +718,10 @@ describe("ModelRouter", () => {
 
       const newInstance = await actions.fullfillModelForm({ model, submit: true });
 
-      expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, {
+        ...newInstance,
+        carsHistory: [],
+      });
     });
 
     it("would show a loading indicator when the request is in progress", async () => {

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

@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import { ModelRouter } from "../model-router";
 import { createModelInstance, MockInstance, mockModel } from "../../generators.mock";
 import { IdleRequest } from "../model-router.types";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 import { ObjectDetails } from "./object-details";
 import { withPadding } from "../../storybook";
@@ -15,6 +14,17 @@ export default {
   },
 } satisfies Meta<typeof ObjectDetails>;
 
-export const Default = () => {
-  return <ObjectDetails model={mockModel} instance={instance} />;
+export const Default = {
+  args: {
+    model: mockModel,
+    instance: instance,
+  },
+};
+
+export const Dense = {
+  args: {
+    model: mockModel,
+    instance: instance,
+    dense: true,
+  },
 };

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

@@ -2,9 +2,8 @@ import React from "react";
 import { Grid } from "@mui/material";
 import {
   GroupValueCard,
-  GroupValueItem,
+  ValueItem,
   ValueBoolean,
-  ValueCard,
   ValueText,
   ValueDatetime,
 } from "../../components";
@@ -14,39 +13,103 @@ import {
   Model,
   BasicModelInstance,
   GroupInstanceType,
+  ArrayGroupField,
+  ArrayInstanceType,
 } from "../generators.model";
+import { newBreakpointsCounter } from "~/utils/breakpoints";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { ValueContent } from "~/components/value-displays/value-content";
+import { ArrayFieldType } from "../generators.model";
+
+interface SingleDetailValueFactoryOptions {
+  dense?: boolean;
+}
 
 const singleDetailValueFactory = <T extends BasicModelInstance>(
   field: ModelField,
   instance: T | GroupInstanceType,
+  { dense }: SingleDetailValueFactoryOptions = {},
 ) => {
   const { id, name, type } = field;
   const value = instance[id];
   if (type === "boolean") {
-    return <ValueBoolean label={name} value={value as boolean} />;
+    return <ValueBoolean dense={dense} label={name} value={value as boolean} />;
   } else if (type === "date" || type === "time" || type === "datetime") {
-    return <ValueDatetime label={name} value={value as Date} format={field.format} />;
+    return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;
   }
-  return <ValueText label={name} value={value?.toString()} />;
+  return <ValueText dense={dense} label={name} value={value?.toString()} />;
+};
+
+interface ObjectArrayGroupProps {
+  field: ArrayGroupField;
+  instance: ArrayInstanceType;
+  dense?: boolean;
+}
+
+const ObjectArrayGroup = ({
+  field: { name, description, value },
+  instance,
+  dense,
+}: ObjectArrayGroupProps) => {
+  const columns: GridColDef[] = [{ field: "id", headerName: "ID", width: 70 }];
+
+  value.forEach((column) => {
+    columns.push({
+      field: column.id,
+      headerName: column.name,
+    });
+  });
+
+  const rows = instance.map((f, id) => ({
+    id,
+    ...f,
+  }));
+
+  return (
+    <GroupValueCard title={name} subtitle={description} dense={dense}>
+      <Grid item xs={12}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          density={dense ? "compact" : "standard"}
+          disableRowSelectionOnClick
+          pageSizeOptions={[5]}
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 5,
+              },
+            },
+          }}
+          sx={{ height: 400 }}
+        />
+      </Grid>
+    </GroupValueCard>
+  );
 };
 
 interface ObjectDetailGroupProps {
   field: GroupField;
   instance: GroupInstanceType;
+  dense?: boolean;
 }
 
 const ObjectDetailGroup = ({
   field: { name, description, value },
   instance,
+  dense,
 }: ObjectDetailGroupProps) => {
+  const breakpointsCounter = newBreakpointsCounter();
+
   return (
-    <GroupValueCard title={name} subtitle={description}>
+    <GroupValueCard title={name} subtitle={description} dense={dense}>
       {value.map((field) => {
         const { id, xs, sm, md, lg, xl } = field;
+        const bordered = breakpointsCounter.increment(field);
         return (
-          <GroupValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
-            {singleDetailValueFactory(field, instance)}
-          </GroupValueItem>
+          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>
+            {singleDetailValueFactory(field, instance, { dense })}
+          </ValueItem>
         );
       })}
     </GroupValueCard>
@@ -55,30 +118,48 @@ const ObjectDetailGroup = ({
 
 export interface ObjectDetailsProps<T extends BasicModelInstance> {
   model: Model;
+  dense?: boolean;
   instance: T;
 }
 
 export const ObjectDetails = <T extends BasicModelInstance>({
   model,
   instance,
+  dense,
 }: ObjectDetailsProps<T>) => {
+  const breakpointsCounter = newBreakpointsCounter();
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={dense ? 1 : 2}>
       {model.fields.map((field) => {
-        const { id, type, xs = 3, sm, md, lg, xl } = field;
+        const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;
 
         if (type === "group") {
+          breakpointsCounter.increment({ xs: 12 });
+          return (
+            <Grid item key={id} xs={12}>
+              <ObjectDetailGroup
+                field={field}
+                instance={instance[id] as GroupInstanceType}
+                dense={dense}
+              />
+            </Grid>
+          );
+        }
+
+        if (type === "group[]") {
+          breakpointsCounter.increment({ xs: 12 });
           return (
             <Grid item key={id} xs={12}>
-              <ObjectDetailGroup field={field} instance={instance[id] as GroupInstanceType} />
+              <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />
             </Grid>
           );
         }
 
+        const bordered = breakpointsCounter.increment(field);
         return (
-          <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
-            <ValueCard>{singleDetailValueFactory(field, instance)}</ValueCard>
-          </Grid>
+          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>
+            {singleDetailValueFactory(field, instance, { dense })}
+          </ValueItem>
         );
       })}
     </Grid>

package/src/providers/notification-center/notification-center.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
 import { Button, Box } from "@mui/material";

package/src/tests/assertions.ts

@@ -32,7 +32,7 @@ export const expectModelFieldInputExist = (fields: ModelField[]) => {
       expect(
         screen.getByRole("button", { name: new RegExp(field.name.toLowerCase(), "i") }),
       ).toBeInTheDocument();
-    } else {
+    } else if (field.type !== "group[]") {
       expect(screen.getByRole("textbox", { name: field.name })).toBeInTheDocument();
     }
   });
@@ -58,6 +58,12 @@ export const expectModelFieldInputValue = (
         fmt: field.format,
         addSpaces: true,
       });
+    } else if (field.type === "group[]") {
+      // Ignore group[] cases
+    } else if (field.type.includes("[]")) {
+      expect(screen.getByRole("textbox", { name: field.name })).toHaveValue(
+        (value as any[]).join(","),
+      );
     } else {
       expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
     }
@@ -166,6 +172,9 @@ export const expectToHaveBeenCalledOnceWithMockInstance = (
       calledTradeDate.getSeconds(),
       calledTradeDate.getMilliseconds(),
     ),
+    codes: instance.codes,
+    identifiers: instance.identifiers.map((i) => i.toString()),
+    carsHistory: instance.carsHistory,
   });
 };
 

package/src/utils/breakpoints.test.ts

@@ -0,0 +1,42 @@
+import { newBreakpointsCounter } from "./breakpoints";
+
+describe("newBreakpointsCounter", () => {
+  //TODO Write some tests to be able to debug/develop faster
+  it("should create a new instance with the correct initial values", () => {
+    const breakpointsCounter = newBreakpointsCounter();
+
+    expect(breakpointsCounter.xs).toBe(0);
+    expect(breakpointsCounter.sm).toBe(0);
+    expect(breakpointsCounter.md).toBe(0);
+    expect(breakpointsCounter.lg).toBe(0);
+    expect(breakpointsCounter.xl).toBe(0);
+  });
+
+  describe.each([["xs"], ["sm"], ["md"], ["lg"], ["xl"]])("breakpoint %s", (breakpoint: string) => {
+    it.each([
+      [false, [2, 3, 3, 4, 3]],
+      [false, [2, 3, 3, 4, 12, 3]],
+      [false, [6, 6, 6, 6, 6, 12, 3]],
+      [false, [4, 4, 4, 4, 4, 3, 8]],
+      [false, [4, 4, 4, 4, 4, 3, 8]],
+      [true, [1, 2]],
+      [true, [12, 6, 3]],
+      [true, [2, 6, 3]],
+    ])(
+      "should have border=%s if apply %s increments",
+      (expectedBorder: boolean, increments: number[]) => {
+        const breakpointsCounter = newBreakpointsCounter();
+
+        let border: Record<string, boolean> = {};
+        increments.forEach((increment) => {
+          border = breakpointsCounter.increment({ [breakpoint]: increment }) as Record<
+            string,
+            boolean
+          >;
+        });
+
+        expect(border[breakpoint]).toBe(expectedBorder);
+      },
+    );
+  });
+});

package/src/utils/breakpoints.ts

@@ -0,0 +1,62 @@
+import { ResponsiveStyleValue } from "@mui/system";
+
+interface Breakpoints {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
+interface BreakpointsCounter extends Breakpoints {
+  increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;
+}
+
+export const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {
+  const calculateBreakpointIncrement = (
+    breakpointsCounter: BreakpointsCounter,
+    key: keyof Breakpoints,
+    value: number,
+  ): boolean => {
+    const initialValue = breakpointsCounter[key];
+    breakpointsCounter[key] += value;
+    if (breakpointsCounter[key] > breakpoint) {
+      breakpointsCounter[key] = value;
+      return false;
+    }
+
+    if (breakpointsCounter[key] == breakpoint) {
+      breakpointsCounter[key] = 0;
+    }
+
+    return initialValue > 0;
+  };
+
+  return {
+    xs: 0,
+    sm: 0,
+    md: 0,
+    lg: 0,
+    xl: 0,
+    increment: function ({
+      xs = 0,
+      sm = 0,
+      md = 0,
+      lg = 0,
+      xl = 0,
+    }): ResponsiveStyleValue<boolean> {
+      const smInc = sm || xs;
+      const mdInc = md || smInc;
+      const lgInc = lg || mdInc;
+      const xlInc = xl || lgInc;
+
+      return {
+        xs: calculateBreakpointIncrement(this, "xs", xs),
+        sm: calculateBreakpointIncrement(this, "sm", smInc),
+        md: calculateBreakpointIncrement(this, "md", mdInc),
+        lg: calculateBreakpointIncrement(this, "lg", lgInc),
+        xl: calculateBreakpointIncrement(this, "xl", xlInc),
+      };
+    },
+  };
+};