@pautena/react-design-system 0.4.6 → 0.4.8

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

@@ -1,19 +1,42 @@
 import React from "react";
 import { render, screen } from "~/tests/testing-library";
-import { ValueDatetime } from "./value-datetime";
+import { EditInputType, ValueDatetime } from "./value-datetime";
+import userEvent from "@testing-library/user-event";
+import { pickDatetime } from "~/tests/actions";
 
-const DummyValue = new Date(2022, 7, 10);
+const DummyValue = new Date(2022, 7, 10, 8, 11);
+const NewValue = new Date(2021, 8, 9, 11, 21);
+const datetimeFormat = "dd-MM-yyyy HH:mm";
+const dateFormat = "dd-MM-yyyy";
+const timeFormat = "HH:mm";
 
 describe("ValueDatetime", () => {
-  const renderComponent = ({ value, placeholder }: { value?: Date; placeholder?: string }) => {
-    return render(
+  const renderComponent = ({
+    value,
+    placeholder,
+    editable,
+    fmt = datetimeFormat,
+    editInputType = "datetime",
+  }: {
+    value?: Date;
+    placeholder?: string;
+    editable?: boolean;
+    fmt?: string;
+    editInputType?: EditInputType;
+  }) => {
+    const onEdit = jest.fn();
+    render(
       <ValueDatetime
         label="Hello world"
         value={value}
         placeholder={placeholder}
-        format="dd-MM-yyyy"
+        format={fmt}
+        editable={editable}
+        editInputType={editInputType}
+        onEdit={onEdit}
       />,
     );
+    return { onEdit };
   };
 
   it("would render the label", () => {
@@ -39,4 +62,70 @@ describe("ValueDatetime", () => {
 
     expect(screen.getByText(/_/i)).toBeInTheDocument();
   });
+
+  describe("editable", () => {
+    it("shouldn't render an option to edit if editable is false", () => {
+      renderComponent({ value: DummyValue, editable: false });
+
+      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+    });
+
+    it("should render an option to edit if editable is true", () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      expect(screen.getByTestId("EditIcon")).toBeVisible();
+    });
+
+    it("should render an input with the value if the edit button is clicked", async () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("textbox")).toHaveValue("10-08-2022 08:11");
+    });
+
+    it.each([
+      ["datetime" as EditInputType, new Date(2021, 8, 9, 11, 21), datetimeFormat],
+      ["date" as EditInputType, new Date(2021, 8, 9), dateFormat],
+      ["time" as EditInputType, new Date(2022, 7, 10, 11, 21), timeFormat],
+    ])(
+      "should submit the new value if is edited with type %s",
+      async (editInputType: EditInputType, expectedDate: Date, fmt: string) => {
+        const { onEdit } = renderComponent({
+          value: DummyValue,
+          editable: true,
+          editInputType,
+          fmt,
+        });
+
+        await userEvent.click(screen.getByTestId("EditIcon"));
+        pickDatetime(screen.getByRole("textbox"), NewValue, fmt);
+        await userEvent.click(screen.getByTestId("CheckIcon"));
+
+        expect(onEdit).toHaveBeenCalledTimes(1);
+        expect(onEdit).toHaveBeenCalledWith(expectedDate);
+      },
+    );
+
+    it("should not call onEdit if the edition is cancelled", async () => {
+      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+
+      expect(onEdit).not.toHaveBeenCalled();
+    });
+
+    it("should have the original value if is edited again after clear a change", async () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("textbox")).toHaveValue("10-08-2022 08:11");
+    });
+  });
 });

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

@@ -1,14 +1,28 @@
-import { Typography } from "@mui/material";
+import { Box, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
-import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import {
+  BaseValueProps,
+  DefaultPlaceholder,
+  EditableValueProps,
+} from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
+import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
+import EditIcon from "@mui/icons-material/Edit";
+import { DatePicker, DateTimePicker, TimePicker } from "@mui/x-date-pickers";
 
-export interface ValueDatetimeProps extends BaseValueProps<Date> {
+export type EditInputType = "datetime" | "date" | "time";
+
+export interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {
   /**
    * Datetime format
    */
   format: string;
+
+  /**
+   * Edit input type
+   */
+  editInputType?: EditInputType;
 }
 
 /**
@@ -19,15 +33,59 @@ export const ValueDatetime = ({
   value: valueProp,
   format: fmt,
   placeholder = DefaultPlaceholder,
+  editable,
+  editInputType = "datetime",
+  onEdit = () => null,
 }: ValueDatetimeProps) => {
+  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
+    useEditableValueDisplay(valueProp, onEdit);
   const id = getValueContentLabelId(label);
   const value = (valueProp && format(valueProp, fmt)) || placeholder;
 
+  const EditPickerComponent =
+    editInputType === "datetime"
+      ? DateTimePicker
+      : editInputType === "time"
+      ? TimePicker
+      : DatePicker;
+
   return (
     <ValueContent label={label} tooltip={value}>
-      <Typography variant="h5" noWrap aria-labelledby={id}>
-        {value}
-      </Typography>
+      {isEditing ? (
+        <EditPickerComponent
+          value={editValue}
+          inputFormat={fmt}
+          onChange={(newValue: any) => setEditValue(newValue)}
+          renderInput={(params: any) => (
+            <TextField
+              {...params}
+              InputProps={{
+                endAdornment: (
+                  <>
+                    {params.InputProps.endAdornment}
+                    <ValueEditButtons
+                      onClickCancel={cancelEdit}
+                      onSubmitEdit={submitEdit}
+                      sx={{ ml: 2 }}
+                    />
+                  </>
+                ),
+              }}
+            />
+          )}
+        />
+      ) : (
+        <Box display="flex" alignItems="center">
+          <Typography variant="h5" noWrap aria-labelledby={id}>
+            {value}
+          </Typography>
+          {editable && (
+            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
+              <EditIcon />
+            </IconButton>
+          )}
+        </Box>
+      )}
     </ValueContent>
   );
 };

package/src/components/value-displays/value-displays.stories.mdx

@@ -13,4 +13,5 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Value displays/ValueDatetime">ValueDatetime</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueImage">ValueImage</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueText">ValueText</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueRating">ValueRating</LinkTo></li>
 </ul>

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

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import React from "react";
 import { ValueContent } from "../value-content";
-import { BaseValueProps } from "../value-displays.types";
+import { BaseValueProps } from "../value-base/value-displays.types";
 
 export interface ValueImageProps extends BaseValueProps<string> {
   /**

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

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

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

@@ -0,0 +1,35 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueRating } from "./value-rating";
+import { createTemplate, withContainer } from "../../../storybook";
+
+export default {
+  title: "Components/Value displays/ValueRating",
+  component: ValueRating,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueRating>;
+
+const Template = createTemplate(ValueRating);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Lorem",
+  value: 3,
+};
+
+export const Max = Template.bind({});
+Max.args = {
+  label: "Lorem",
+  value: 4,
+  maxRating: 7,
+};
+
+export const Editable = Template.bind({});
+Editable.args = {
+  label: "Lorem",
+  value: 4,
+  maxRating: 7,
+  editable: true,
+};

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import { ValueRating } from "./value-rating";
+import userEvent from "@testing-library/user-event";
+
+describe("ValueRating", () => {
+  const renderComponent = ({
+    maxRating,
+    value = 3,
+    editable,
+  }: { maxRating?: number; value?: number; editable?: boolean } = {}) => {
+    const onEdit = jest.fn();
+    render(
+      <ValueRating
+        label="hello world"
+        value={value}
+        maxRating={maxRating}
+        editable={editable}
+        onEdit={onEdit}
+      />,
+    );
+    return { onEdit };
+  };
+
+  it("should render a label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+  });
+
+  it("should render 5 stars by default", () => {
+    renderComponent();
+
+    expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
+    expect(screen.getAllByTestId("StarBorderIcon")).toHaveLength(2);
+  });
+
+  it("should render maxRating stars if is set", () => {
+    renderComponent({ maxRating: 7 });
+
+    expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
+    expect(screen.getAllByTestId("StarBorderIcon")).toHaveLength(4);
+  });
+
+  it("should render 3 filled stars", () => {
+    renderComponent();
+
+    expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
+  });
+
+  describe("editable", () => {
+    it("shouldn't render an option to edit if editable is false", () => {
+      renderComponent({ editable: false });
+
+      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+    });
+
+    it("should render an option to edit if editable is true", () => {
+      renderComponent({ editable: true });
+
+      expect(screen.getByTestId("EditIcon")).toBeVisible();
+    });
+
+    it("should render an input for each star + 1 for the zero value if the edit button is clicked", async () => {
+      renderComponent({ editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getAllByRole("radio")).toHaveLength(6);
+    });
+
+    it("should submit the new value if is edited", async () => {
+      const { onEdit } = renderComponent({ value: 2, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getAllByRole("radio")[3]); // Click the fourth star
+      await userEvent.click(screen.getByTestId("CheckIcon"));
+
+      expect(onEdit).toHaveBeenCalledTimes(1);
+      expect(onEdit).toHaveBeenCalledWith(4);
+    });
+
+    it("should not call onEdit if the edition is cancelled", async () => {
+      const { onEdit } = renderComponent({ editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getAllByRole("radio")[3]);
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+
+      expect(onEdit).not.toHaveBeenCalled();
+    });
+
+    it("should have the original value if is edited again after clear a change", async () => {
+      renderComponent({ editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getAllByRole("radio")[3]);
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+import { Box, IconButton, InputAdornment, Rating } from "@mui/material";
+import React from "react";
+import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
+import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
+import { getValueContentLabelId, ValueContent } from "../value-content";
+import EditIcon from "@mui/icons-material/Edit";
+
+export type ValueRatingProps = BaseValueProps<number> & {
+  maxRating?: number;
+} & EditableValueProps<number>;
+
+/**
+ * Displays a number using stars
+ */
+export const ValueRating = ({
+  label,
+  value = 0,
+  maxRating = 5,
+  editable,
+  onEdit = () => null,
+}: ValueRatingProps) => {
+  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
+    useEditableValueDisplay(value, onEdit);
+  const id = getValueContentLabelId(label);
+
+  return (
+    <ValueContent label={label} tooltip={value.toString()}>
+      <Box display="flex" alignItems="center">
+        <Rating
+          aria-labelledby={id}
+          readOnly={!isEditing}
+          max={maxRating}
+          value={isEditing ? editValue : value}
+          onChange={(_, newValue) => setEditValue(newValue!)}
+        />
+        {editable && !isEditing && (
+          <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
+            <EditIcon />
+          </IconButton>
+        )}
+        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />}
+      </Box>
+    </ValueContent>
+  );
+};

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

@@ -19,6 +19,12 @@ Default.args = {
   value: "ipsum sit",
 };
 
+export const NumberAsValue = Template.bind({});
+NumberAsValue.args = {
+  label: "Lorem",
+  value: 1000,
+};
+
 export const TruncatedText = Template.bind({});
 TruncatedText.args = {
   label: "Lorem",
@@ -35,3 +41,10 @@ CustomPlaceholder.args = {
   label: "Lorem",
   placeholder: ".",
 };
+
+export const Editable = Template.bind({});
+Editable.args = {
+  label: "Lorem",
+  value: "lorem ipsum",
+  editable: true,
+};

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

@@ -1,12 +1,31 @@
 import React from "react";
 import { render, screen } from "~/tests/testing-library";
 import { ValueText } from "./value-text";
+import userEvent from "@testing-library/user-event";
 
 const DummyValue = "Lorem ipsum sit amet";
 
 describe("ValueText", () => {
-  const renderComponent = ({ value, placeholder }: { value?: string; placeholder?: string }) => {
-    return render(<ValueText label="Hello world" value={value} placeholder={placeholder} />);
+  const renderComponent = ({
+    value,
+    placeholder,
+    editable,
+  }: {
+    value?: string | number;
+    placeholder?: string;
+    editable?: boolean;
+  }) => {
+    const onEdit = jest.fn();
+    render(
+      <ValueText
+        label="Hello world"
+        value={value}
+        placeholder={placeholder}
+        editable={editable}
+        onEdit={onEdit}
+      />,
+    );
+    return { onEdit };
   };
 
   it("would render the label", () => {
@@ -21,6 +40,12 @@ describe("ValueText", () => {
     expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
   });
 
+  it("would render the value if is a number", () => {
+    renderComponent({ value: 1000 });
+
+    expect(screen.getByText(/1000/i)).toBeInTheDocument();
+  });
+
   it("should render the placeholder if value is undefined", () => {
     renderComponent({ value: undefined });
 
@@ -32,4 +57,61 @@ describe("ValueText", () => {
 
     expect(screen.getByText(/_/i)).toBeInTheDocument();
   });
+
+  describe("editable", () => {
+    it("shouldn't render an option to edit if editable is false", () => {
+      renderComponent({ value: DummyValue, editable: false });
+
+      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+    });
+
+    it("should render an option to edit if editable is true", () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      expect(screen.getByTestId("EditIcon")).toBeVisible();
+    });
+
+    it("should render an input with the value if the edit button is clicked", async () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
+    });
+
+    it("should submit the new value if is edited", async () => {
+      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.clear(screen.getByRole("textbox"));
+      await userEvent.type(screen.getByRole("textbox"), "new value");
+      await userEvent.click(screen.getByTestId("CheckIcon"));
+
+      expect(onEdit).toHaveBeenCalledTimes(1);
+      expect(onEdit).toHaveBeenCalledWith("new value");
+    });
+
+    it("should not call onEdit if the edition is cancelled", async () => {
+      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.clear(screen.getByRole("textbox"));
+      await userEvent.type(screen.getByRole("textbox"), "new value");
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+
+      expect(onEdit).not.toHaveBeenCalled();
+    });
+
+    it("should have the original value if is edited again after clear a change", async () => {
+      renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.clear(screen.getByRole("textbox"));
+      await userEvent.type(screen.getByRole("textbox"), "new value");
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
+    });
+  });
 });

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

@@ -1,9 +1,16 @@
-import { Typography } from "@mui/material";
+import { IconButton, InputAdornment, TextField, Typography } from "@mui/material";
 import React from "react";
-import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import {
+  BaseValueProps,
+  DefaultPlaceholder,
+  EditableValueProps,
+  useEditableValueDisplay,
+  ValueEditButtons,
+} from "../value-base";
 import { getValueContentLabelId, ValueContent } from "../value-content";
+import EditIcon from "@mui/icons-material/Edit";
 
-export type ValueTextProps = BaseValueProps<string>;
+export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 
 /**
  * Displays a string value with a label
@@ -12,15 +19,35 @@ export const ValueText = ({
   label,
   value: valueProp,
   placeholder = DefaultPlaceholder,
+  editable,
+  onEdit = () => null,
 }: ValueTextProps) => {
+  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
+    useEditableValueDisplay(valueProp?.toString(), onEdit);
   const id = getValueContentLabelId(label);
-  const value = valueProp || placeholder;
+  const value = valueProp?.toString() || placeholder;
 
   return (
     <ValueContent label={label} tooltip={value}>
-      <Typography variant="h5" noWrap aria-labelledby={id}>
-        {value}
-      </Typography>
+      {isEditing ? (
+        <TextField
+          value={editValue}
+          size="small"
+          onChange={(e) => setEditValue(e.target.value)}
+          InputProps={{
+            endAdornment: <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />,
+          }}
+        />
+      ) : (
+        <Typography variant="h5" noWrap aria-labelledby={id}>
+          {value}
+          {editable && (
+            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
+              <EditIcon />
+            </IconButton>
+          )}
+        </Typography>
+      )}
     </ValueContent>
   );
 };

package/src/tests/actions.ts

@@ -42,6 +42,6 @@ export const clearCheckbox = async (element: HTMLInputElement) => {
   }
 };
 
-export const pickDatetime = (element: HTMLInputElement, value: Date, fmt: string) => {
-  fireEvent.change(element, { target: { value: format(value, fmt) } });
+export const pickDatetime = (element: HTMLInputElement, valueArg: Date, fmt: string) => {
+  fireEvent.change(element, { target: { value: format(valueArg, fmt) } });
 };