@pautena/react-design-system 0.4.2 → 0.4.3

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

@@ -2,32 +2,32 @@ import { Box, Typography, useTheme } from "@mui/material";
 import React from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { ValueContent } from "../value-content";
 
-export interface ValueBooleanProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: boolean;
-}
+export type ValueBooleanProps = BaseValueProps<boolean>;
 
 /**
  * Displays a boolean value with a label
  */
-export const ValueBoolean = ({ label, value }: ValueBooleanProps) => {
+export const ValueBoolean = ({
+  label,
+  value,
+  placeholder = DefaultPlaceholder,
+}: ValueBooleanProps) => {
   const { typography } = useTheme();
 
   const iconSx = { fontSize: typography.h5.fontSize };
 
   return (
-    <Box>
-      <Typography variant="subtitle2" role="label">
-        {label}
-      </Typography>
-      {value ? <CheckIcon color="success" sx={iconSx} /> : <CloseIcon color="error" sx={iconSx} />}
-    </Box>
+    <ValueContent label={label}>
+      {value === undefined ? (
+        <Typography variant="h5">{placeholder}</Typography>
+      ) : value ? (
+        <CheckIcon color="success" sx={iconSx} />
+      ) : (
+        <CloseIcon color="error" sx={iconSx} />
+      )}
+    </ValueContent>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ValueCard } from "./value-card";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { ReactElement } from "react";
 import { ValueText } from "../value-text";
 

package/src/components/value-displays/value-content/index.ts

@@ -0,0 +1 @@
+export * from "./value-content";

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

@@ -0,0 +1,20 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueContent } from "./value-content";
+import { withContainer } from "../../../storybook";
+import { Typography } from "@mui/material";
+import React from "react";
+
+export default {
+  title: "Value displays/ValueContent",
+  component: ValueContent,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueContent>;
+
+export const Default = () => (
+  <ValueContent label="lorem ipsum">
+    <Typography>Demo content</Typography>
+  </ValueContent>
+);

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { render, screen } from "~/tests/testing-library";
+import { ValueContent } from "./value-content";
+import userEvent from "@testing-library/user-event";
+
+describe("ValueContent", () => {
+  const renderComponent = ({ tooltip }: { tooltip?: string } = {}) => {
+    render(
+      <ValueContent label="lorem ipsum" tooltip={tooltip} tooltipEnterDelay={0}>
+        <Typography>Test content</Typography>
+      </ValueContent>,
+    );
+  };
+
+  it("should render a label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  describe("tooltip", () => {
+    it("should render a tooltip if is defined and the user hovers the value", async () => {
+      renderComponent({ tooltip: "dolor sit amet" });
+
+      await userEvent.hover(screen.getByText(/test content/i));
+
+      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeInTheDocument();
+    });
+
+    it("shouldn't render a tooltip if it's not defined", () => {
+      renderComponent({ tooltip: undefined });
+
+      expect(screen.queryByRole("tooltip", { name: /dolor sit amet/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("children", () => {
+    it("should render the children if tooltip is defined", () => {
+      renderComponent({ tooltip: "dolor sit amet" });
+
+      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+    });
+    it("should render the children if tooltip is undefined", () => {
+      renderComponent({ tooltip: undefined });
+
+      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Box, Tooltip, Typography } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+
+export const getValueContentLabelId = (label: string): string =>
+  `label-${label.replace(/ /g, "-")}`;
+
+export interface ValueContentProps {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+
+  /**
+   * If defined, a tooltip is going to be added arround the children;
+   */
+  tooltip?: string;
+
+  /**
+   * Timeout before the tooltip appears when the user hovers the value
+   */
+  tooltipEnterDelay?: number;
+
+  /**
+   * Component that's going to be renderd under the label
+   */
+  children: React.ReactElement<any, any>;
+}
+
+/**
+ * Displays a string value with a label
+ */
+export const ValueContent = ({
+  label,
+  tooltip,
+  tooltipEnterDelay = 2000,
+  children,
+}: ValueContentProps) => {
+  const id = getValueContentLabelId(label);
+
+  return (
+    <Box width={1}>
+      <Typography variant="subtitle2" role="label" id={id}>
+        {label}
+      </Typography>
+      {tooltip ? (
+        <Tooltip title={tooltip} placement="top" enterDelay={tooltipEnterDelay}>
+          {children}
+        </Tooltip>
+      ) : (
+        children
+      )}
+    </Box>
+  );
+};

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

@@ -19,3 +19,16 @@ Default.args = {
   value: new Date(2022, 8, 22),
   format: "yyyy/MM/dd",
 };
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  label: "Lorem",
+  format: "yyyy/MM/dd",
+};
+
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = {
+  label: "Lorem",
+  format: "yyyy/MM/dd",
+  placeholder: ".",
+};

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

@@ -1,23 +1,42 @@
 import React from "react";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { ValueDatetime } from "./value-datetime";
 
+const DummyValue = new Date(2022, 7, 10);
+
 describe("ValueDatetime", () => {
-  const renderComponent = () => {
+  const renderComponent = ({ value, placeholder }: { value?: Date; placeholder?: string }) => {
     return render(
-      <ValueDatetime label="Hello world" value={new Date(2022, 7, 10)} format="dd-MM-yyyy" />,
+      <ValueDatetime
+        label="Hello world"
+        value={value}
+        placeholder={placeholder}
+        format="dd-MM-yyyy"
+      />,
     );
   };
 
   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(/10-08-2022/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-datetime/value-datetime.tsx

@@ -1,17 +1,10 @@
 import { Box, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { getValueContentLabelId, ValueContent } from "../value-content";
 
-export interface ValueDatetimeProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: Date;
-
+export interface ValueDatetimeProps extends BaseValueProps<Date> {
   /**
    * Datetime format
    */
@@ -21,20 +14,20 @@ export interface ValueDatetimeProps {
 /**
  * Displays a formated datetime with a label
  */
-export const ValueDatetime = ({ label, value, format: fmt }: ValueDatetimeProps) => {
-  const id = `label-${label.replace(/ /g, "-")}`;
-  const formatedValue = format(value, fmt);
+export const ValueDatetime = ({
+  label,
+  value: valueProp,
+  format: fmt,
+  placeholder = DefaultPlaceholder,
+}: ValueDatetimeProps) => {
+  const id = getValueContentLabelId(label);
+  const value = (valueProp && format(valueProp, fmt)) || 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={formatedValue} placement="top" enterDelay={2000}>
-        <Typography variant="h5" noWrap aria-labelledby={id}>
-          {formatedValue}
-        </Typography>
-      </Tooltip>
-    </Box>
+    </ValueContent>
   );
 };

package/src/components/value-displays/value-displays.types.ts

@@ -0,0 +1,18 @@
+export interface BaseValueProps<T> {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+
+  /**
+   * Value displayed
+   */
+  value?: T;
+
+  /**
+   * String rendered if value is undefined
+   */
+  placeholder?: string;
+}
+
+export const DefaultPlaceholder = "-";

package/src/components/value-displays/value-image/index.ts

@@ -0,0 +1 @@
+export * from "./value-image";

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

@@ -0,0 +1,28 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueImage } from "./value-image";
+import { createTemplate, withContainer } from "../../../storybook";
+import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
+
+export default {
+  title: "Value displays/ValueImage",
+  component: ValueImage,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueImage>;
+
+const Template = createTemplate(ValueImage);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Lorem",
+  value: workInProgressImg,
+};
+
+export const CustomSize = Template.bind({});
+CustomSize.args = {
+  label: "Lorem",
+  value: workInProgressImg,
+  size: 250,
+};

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

@@ -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();
 };