@pautena/react-design-system 0.4.2 → 0.4.4

package/src/components/value-displays/value-image/value-image.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import { ValueImage } from "./value-image";
+import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
+
+describe("ValueImage", () => {
+  const renderComponent = () => {
+    return render(<ValueImage label="Hello world" value={workInProgressImg} />);
+  };
+
+  it("should render the label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+  });
+
+  it("should render an image", () => {
+    renderComponent();
+
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+});

package/src/components/value-displays/value-image/value-image.tsx

@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { ValueContent } from "../value-content";
+import { BaseValueProps } from "../value-displays.types";
+
+export interface ValueImageProps extends BaseValueProps<string> {
+  /**
+   * Image size
+   */
+  size?: number;
+}
+
+const DefaultSize = 100;
+
+/**
+ * Displays a image value with a label
+ */
+export const ValueImage = ({ label, value, size = DefaultSize }: ValueImageProps) => {
+  return (
+    <ValueContent label={label}>
+      <Box component="img" src={value} alt={label} sx={{ width: size, height: size }} />
+    </ValueContent>
+  );
+};

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -3,7 +3,7 @@ import { ValueText } from "./value-text";
 import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Value displays/ValueText",
+  title: "Components/Value displays/ValueText",
   component: ValueText,
   decorators: [withContainer({ width: 200 })],
   parameters: {
@@ -24,3 +24,14 @@ TruncatedText.args = {
   label: "Lorem",
   value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
 };
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  label: "Lorem",
+};
+
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = {
+  label: "Lorem",
+  placeholder: ".",
+};

package/src/components/value-displays/value-text/value-text.test.tsx

@@ -1,21 +1,35 @@
 import React from "react";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { ValueText } from "./value-text";
 
+const DummyValue = "Lorem ipsum sit amet";
+
 describe("ValueText", () => {
-  const renderComponent = () => {
-    return render(<ValueText label="Hello world" value="Lorem ipsum sit amet" />);
+  const renderComponent = ({ value, placeholder }: { value?: string; placeholder?: string }) => {
+    return render(<ValueText label="Hello world" value={value} placeholder={placeholder} />);
   };
 
   it("would render the label", () => {
-    renderComponent();
+    renderComponent({ value: DummyValue });
 
     expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
   });
 
   it("would render the value", () => {
-    renderComponent();
+    renderComponent({ value: DummyValue });
 
     expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
   });
+
+  it("should render the placeholder if value is undefined", () => {
+    renderComponent({ value: undefined });
+
+    expect(screen.getByText(/-/i)).toBeInTheDocument();
+  });
+
+  it("should render the custom placeholder if value is undefined and placeholder has value", () => {
+    renderComponent({ value: undefined, placeholder: "_" });
+
+    expect(screen.getByText(/_/i)).toBeInTheDocument();
+  });
 });

package/src/components/value-displays/value-text/value-text.tsx

@@ -1,32 +1,26 @@
-import { Box, Tooltip, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import React from "react";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { getValueContentLabelId, ValueContent } from "../value-content";
 
-export interface ValueTextProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: string;
-}
+export type ValueTextProps = BaseValueProps<string>;
 
 /**
  * Displays a string value with a label
  */
-export const ValueText = ({ label, value }: ValueTextProps) => {
-  const id = `label-${label.replace(/ /g, "-")}`;
+export const ValueText = ({
+  label,
+  value: valueProp,
+  placeholder = DefaultPlaceholder,
+}: ValueTextProps) => {
+  const id = getValueContentLabelId(label);
+  const value = valueProp || placeholder;
+
   return (
-    <Box>
-      <Typography variant="subtitle2" role="label" id={id}>
-        {label}
+    <ValueContent label={label} tooltip={value}>
+      <Typography variant="h5" noWrap aria-labelledby={id}>
+        {value}
       </Typography>
-      <Tooltip title={value} placement="top" enterDelay={2000}>
-        <Typography variant="h5" noWrap aria-labelledby={id}>
-          {value}
-        </Typography>
-      </Tooltip>
-    </Box>
+    </ValueContent>
   );
 };

package/src/generators/generators.mock.ts

@@ -1,5 +1,6 @@
-import { BasicModelInstance, Model, ModelField } from "./generators.model";
+import { BasicModelInstance, FieldType, Model, ModelField } from "./generators.model";
 import { faker } from "@faker-js/faker";
+import * as R from "ramda";
 import { newArrayWithSize } from "../utils";
 
 export const BirthDateFormat = "dd/MM/yyyy";
@@ -65,7 +66,7 @@ export const mockModel: Model = {
       xs: 12,
       sm: 6,
       md: 3,
-      listable: true,
+      listable: false,
     },
     {
       id: "birthDate",
@@ -141,7 +142,7 @@ export const mockModel: Model = {
           id: "returnTime",
           type: "time",
           format: ReturnTimeFormat,
-          default: new Date(1970, 0, 1, 9, 0),
+          default: new Date(2022, 8, 21, 9, 0),
           description: "Lorem ipsum",
           name: "Return time",
           xs: 12,
@@ -208,9 +209,10 @@ export interface MockInstance {
   available: boolean;
   currency: string;
   tradeDate: Date;
+  [key: string]: FieldType;
 }
 
-const mockFieldValue = {
+const mockFieldValue: Record<string, () => FieldType> = {
   id: () => faker.datatype.number({ min: 1000, max: 100000 }).toString(),
   firstName: faker.name.firstName,
   middleName: faker.name.middleName,
@@ -236,7 +238,7 @@ const mockFieldValue = {
   type: () => {
     const array = newArrayWithSize(faker.datatype.number({ min: 2, max: 5 }), 0);
     const result = array.map(() => faker.vehicle.type());
-    return [...new Set(result)];
+    return R.uniq(result);
   },
   vin: faker.vehicle.vin,
   vrm: faker.vehicle.vrm,
@@ -248,30 +250,31 @@ const mockFieldValue = {
 
 export const createModelInstance = <T extends BasicModelInstance>(model: Model, seed = 100): T => {
   faker.seed(seed);
-  const obj = {};
-
-  model.fields.forEach((field) => {
-    let value;
+  return model.fields.reduce((acc, field) => {
     if (field.type === "group") {
-      value = {};
-      field.value.forEach((groupField) => {
-        value[groupField.id] = getModelFieldValue(groupField);
-      });
+      return {
+        ...acc,
+        [field.id]: field.value.reduce(
+          (acc, groupField) => ({
+            ...acc,
+            [groupField.id]: getModelFieldValue(groupField),
+          }),
+          {},
+        ),
+      };
     } else {
-      value = getModelFieldValue(field);
+      return {
+        ...acc,
+        [field.id]: getModelFieldValue(field),
+      };
     }
-
-    obj[field.id] = value;
-  });
-
-  return obj as T;
+  }, {} as T);
 };
 
-const getModelFieldValue = ({ id, type }: ModelField) => {
+const getModelFieldValue = ({ id }: ModelField): FieldType => {
   const fieldGenerator = mockFieldValue[id];
   if (!fieldGenerator) {
-    const generator = faker.datatype[type];
-    return generator ? generator() : faker.datatype.string();
+    return faker.datatype.string();
   }
   return fieldGenerator();
 };

package/src/generators/generators.model.test.ts

@@ -0,0 +1,77 @@
+import { createModelInstance, mockModel } from "./generators.mock";
+import { newInstanceFromValuesOrZeroValue } from "./generators.model";
+
+describe("utilities", () => {
+  describe("newInstanceFromValuesOrZeroValue", () => {
+    it("would create a zero value instance if no values are provided", () => {
+      const instance = newInstanceFromValuesOrZeroValue(mockModel);
+
+      expect(instance).toStrictEqual({
+        age: 0,
+        available: false,
+        birthDate: new Date(2014, 8, 18),
+        car: {
+          color: "",
+          manufacturer: "",
+          model: "",
+          returnTime: new Date(2022, 8, 21, 9, 0),
+          type: [],
+          vin: "",
+          vrm: "",
+        },
+        currency: "",
+        firstName: "",
+        gender: "",
+        id: "",
+        lastName: "",
+        middleName: "",
+        quantity: 0,
+        tradeDate: new Date(2022, 8, 12, 9, 0),
+      });
+    });
+
+    it("would create the same instance if a full instance is provided", () => {
+      const values = createModelInstance(mockModel);
+      const instance = newInstanceFromValuesOrZeroValue(mockModel, values);
+
+      expect(instance).toStrictEqual(instance);
+    });
+
+    it("would create a mixed instance if just some values are provided", () => {
+      const instance = newInstanceFromValuesOrZeroValue(mockModel, {
+        id: "1",
+        age: 10,
+        currency: "EUR",
+        car: {
+          returnTime: new Date(2022, 9, 10, 23),
+          type: ["sub", "sport"],
+        },
+        available: true,
+        gender: "female",
+      });
+
+      expect(instance).toStrictEqual({
+        age: 10,
+        available: true,
+        birthDate: new Date(2014, 8, 18),
+        car: {
+          color: "",
+          manufacturer: "",
+          model: "",
+          returnTime: new Date(2022, 9, 10, 23),
+          type: ["sub", "sport"],
+          vin: "",
+          vrm: "",
+        },
+        currency: "EUR",
+        firstName: "",
+        gender: "female",
+        id: "1",
+        lastName: "",
+        middleName: "",
+        quantity: 0,
+        tradeDate: new Date(2022, 8, 12, 9, 0),
+      });
+    });
+  });
+});

package/src/generators/generators.model.ts

@@ -1,3 +1,17 @@
+/**
+ * MODEL TYPES
+ * Types used to specify the model
+ */
+export type ModelFieldTypes =
+  | "string"
+  | "number"
+  | "boolean"
+  | "enum"
+  | "multienum"
+  | "date"
+  | "time"
+  | "datetime";
+
 type Base = {
   id: string;
   description: string;
@@ -38,19 +52,19 @@ type MultiEnumField = {
 type DateField = {
   type: "date";
   format: string;
-  default: any;
+  default: Date;
 };
 
 type TimeField = {
   type: "time";
   format: string;
-  default: any;
+  default: Date;
 };
 
 type DatetimeField = {
   type: "datetime";
   format: string;
-  default: any;
+  default: Date;
 };
 
 type SingleFields =
@@ -69,16 +83,74 @@ export type GroupField = {
 } & Base;
 
 type Fields = SingleFields | GroupField;
-
 export type ModelField = Base & Breakpoints & Fields;
 
 export type Model = {
   fields: ModelField[];
 };
 
+/**
+ * INSTANCE TYPES
+ * Types used to represent an instance of a model specification
+ */
+export type BaseFieldType = string | number | boolean | Date;
+export type ArrayFieldType = string[];
+export type SingleFieldType = BaseFieldType | ArrayFieldType;
+export type GroupInstanceType = { [key: string]: SingleFieldType };
+export type FieldType = SingleFieldType | GroupInstanceType;
+
 export interface BasicModelInstance {
   id: string;
-  [key: string]: any;
+  [key: string]: FieldType;
 }
 
-export type ModelFieldTypes = "string" | "number" | "boolean" | "enum" | "multienum";
+/**
+ * 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 getFieldValueOrZero = (
+  field: ModelField,
+  values: BasicModelInstance | GroupInstanceType | undefined,
+) => {
+  return (
+    (values && values[field.id]) ||
+    ("default" in field && field.default) ||
+    InitialStateZeroValue[field.type]
+  );
+};
+
+export const newInstanceFromValuesOrZeroValue = <T extends BasicModelInstance>(
+  model: Model,
+  values: T | undefined = undefined,
+): T => {
+  const obj: Record<string, FieldType | undefined> = {};
+
+  model.fields.forEach((field) => {
+    if (field.type === "group") {
+      const value: GroupInstanceType = {};
+      field.value.forEach((groupField) => {
+        value[groupField.id] = getFieldValueOrZero(
+          groupField,
+          values && (values[field.id] as GroupInstanceType),
+        ) as SingleFieldType;
+      });
+      obj[field.id] = value;
+    } else {
+      obj[field.id] = getFieldValueOrZero(field, values);
+    }
+  });
+
+  return obj as T;
+};

package/src/generators/generators.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Generators/Introduction" />
+
+# Generators
+
+<ul>
+  <li><LinkTo kind="Generators/ModelForm">ModelForm</LinkTo></li>
+  <li><LinkTo kind="Generators/ModelRouter/DummyModelRouter">ModelRouter</LinkTo></li>
+  <li><LinkTo kind="Generators/ObjectDetails">ObjectDetails</LinkTo></li>
+  <li><LinkTo kind="Generators/TableList">TableList</LinkTo></li>
+</ul>

package/src/generators/index.ts

@@ -2,3 +2,4 @@ export * from "./object-details";
 export * from "./model-router";
 export * from "./generators.model";
 export * from "./model-form";
+export * from "./table-list";

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

@@ -1,15 +1,6 @@
 import React from "react";
 import { ModelForm } from "./model-form";
-import {
-  expectModelFieldInputExist,
-  expectModelFieldInputValue,
-  render,
-  screen,
-  selectOption,
-  selectOptions,
-  pickDatetime,
-  expectToHaveBeenCalledOnceWithMockInstance,
-} from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import {
   BirthDateFormat,
   createModelInstance,
@@ -19,6 +10,12 @@ import {
   TradeDateFormat,
 } from "../generators.mock";
 import userEvent from "@testing-library/user-event";
+import { selectOption, typeNumericInput, pickDatetime, selectOptions } from "~/tests/actions";
+import {
+  expectModelFieldInputExist,
+  expectModelFieldInputValue,
+  expectToHaveBeenCalledOnceWithMockInstance,
+} from "~/tests/assertions";
 
 describe("ModelForm", () => {
   const renderComponent = ({
@@ -66,8 +63,8 @@ describe("ModelForm", () => {
     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 selectOption(screen.getByRole("button", { name: /gender/i }), "Cis Man");
-    await userEvent.type(screen.getByRole("spinbutton", { name: /age/i }), "37");
+    await selectOption(screen.getByRole("button", { name: /gender/i }), "Cis man");
+    typeNumericInput(screen.getByRole("spinbutton", { name: /age/i }), 37);
     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");
@@ -84,7 +81,7 @@ describe("ModelForm", () => {
       returnTime,
       ReturnTimeFormat,
     );
-    await userEvent.type(screen.getByRole("spinbutton", { name: /q/i }), "9");
+    typeNumericInput(screen.getByRole("spinbutton", { name: /q/i }), 9);
     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);
@@ -96,7 +93,7 @@ describe("ModelForm", () => {
       firstName: "Karianne",
       middleName: "Noah",
       lastName: "Gorczany",
-      gender: "Cis Man",
+      gender: "Cis man",
       age: 37,
       birthDate,
       car: {