@pautena/react-design-system 0.4.7 → 0.5.0

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

@@ -1,11 +1,18 @@
-import { Typography, useTheme } from "@mui/material";
+import { Box, IconButton, Switch, 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 {
+  BaseValueProps,
+  DefaultPlaceholder,
+  EditableValueProps,
+  useEditableValueDisplay,
+  ValueEditButtons,
+} from "../value-base";
 import { ValueContent } from "../value-content";
+import EditIcon from "@mui/icons-material/Edit";
 
-export type ValueBooleanProps = BaseValueProps<boolean>;
+export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 
 /**
  * Displays a boolean value with a label
@@ -14,19 +21,37 @@ export const ValueBoolean = ({
   label,
   value,
   placeholder = DefaultPlaceholder,
+  editable,
+  onEdit = () => null,
 }: ValueBooleanProps) => {
   const { typography } = useTheme();
+  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
+    useEditableValueDisplay(value, onEdit);
 
   const iconSx = { fontSize: typography.h5.fontSize };
 
   return (
     <ValueContent label={label}>
-      {value === undefined ? (
-        <Typography variant="h5">{placeholder}</Typography>
-      ) : value ? (
-        <CheckIcon color="success" sx={iconSx} />
+      {isEditing ? (
+        <Box display="flex" alignItems="center">
+          <Switch checked={editValue} onChange={(e) => setEditValue(e.target.checked)} />
+          <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />
+        </Box>
       ) : (
-        <CloseIcon color="error" sx={iconSx} />
+        <Box display="flex" alignItems="center">
+          {value === undefined ? (
+            <Typography variant="h5">{placeholder}</Typography>
+          ) : value ? (
+            <CheckIcon color="success" sx={iconSx} />
+          ) : (
+            <CloseIcon color="error" sx={iconSx} />
+          )}
+          {editable && (
+            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
+              <EditIcon />
+            </IconButton>
+          )}
+        </Box>
       )}
     </ValueContent>
   );

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

@@ -1,11 +1,11 @@
 import { ComponentMeta } from "@storybook/react";
 import { ValueDatetime } from "./value-datetime";
-import { createTemplate, withContainer } from "../../../storybook";
+import { createTemplate, withContainer, withLocalizationProvider } from "../../../storybook";
 
 export default {
   title: "Components/Value displays/ValueDatetime",
   component: ValueDatetime,
-  decorators: [withContainer({ width: 200 })],
+  decorators: [withContainer({ width: 600 }), withLocalizationProvider],
   parameters: {
     layout: "centered",
   },
@@ -32,3 +32,30 @@ CustomPlaceholder.args = {
   format: "yyyy/MM/dd",
   placeholder: ".",
 };
+
+export const EditableDatetime = Template.bind({});
+EditableDatetime.args = {
+  label: "Lorem",
+  value: new Date(2022, 8, 22, 12, 25),
+  format: "yyyy/MM/dd HH:mm",
+  editable: true,
+  editInputType: "datetime",
+};
+
+export const EditableTime = Template.bind({});
+EditableTime.args = {
+  label: "Lorem",
+  value: new Date(2022, 8, 22, 12, 25),
+  format: "HH:mm",
+  editable: true,
+  editInputType: "time",
+};
+
+export const EditableDate = Template.bind({});
+EditableDate.args = {
+  label: "Lorem",
+  value: new Date(2022, 8, 22),
+  format: "yyyy/MM/dd",
+  editable: true,
+  editInputType: "date",
+};

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

@@ -1,19 +1,45 @@
 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";
+import { assertDatetimeInputValue } from "~/tests/assertions";
 
-const DummyValue = new Date(2022, 7, 10);
+const DummyValue = new Date(2022, 7, 10, 0, 0);
+const NewValue = new Date(2021, 8, 9, 11, 21);
+const NewDateValue = new Date(2018, 2, 17);
+const NewTimeValue = 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 +65,76 @@ 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"));
+
+      assertDatetimeInputValue(screen.getByRole("textbox"), {
+        value: DummyValue,
+        fmt: datetimeFormat,
+      });
+    });
+
+    it.each([
+      ["datetime" as EditInputType, NewValue, new Date(2021, 8, 9, 11, 21), datetimeFormat],
+      ["date" as EditInputType, NewDateValue, new Date(2018, 2, 17), dateFormat],
+      ["time" as EditInputType, NewTimeValue, new Date(2022, 7, 10, 11, 21), timeFormat],
+    ])(
+      "should submit the new value if is edited with type %s",
+      async (editInputType: EditInputType, newValue: Date, 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"));
+
+      assertDatetimeInputValue(screen.getByRole("textbox"), {
+        value: DummyValue,
+        fmt: datetimeFormat,
+      });
+    });
+  });
 });

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

@@ -1,14 +1,28 @@
-import { Typography } from "@mui/material";
+import { Box, IconButton, 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,62 @@ 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}
+          format={fmt}
+          onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}
+          slots={{
+            textField: (params) => (
+              <TextField
+                {...params}
+                InputProps={{
+                  ...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-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/value-rating.stories.tsx

@@ -25,3 +25,11 @@ Max.args = {
   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

@@ -1,10 +1,25 @@
 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 }: { maxRating?: number } = {}) => {
-    render(<ValueRating label="hello world" value={3} maxRating={maxRating} />);
+  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", () => {
@@ -32,4 +47,58 @@ describe("ValueRating", () => {
 
     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

@@ -1,21 +1,45 @@
-import { Rating, Typography } from "@mui/material";
+import { Box, IconButton, Rating } from "@mui/material";
 import React from "react";
-import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+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 }: ValueRatingProps) => {
+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()}>
-      <Rating aria-labelledby={id} readOnly max={maxRating} value={value} />
+      <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.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "~/tests/testing-library";
-import { TextValue, ValueText } from "./value-text";
+import { ValueText } from "./value-text";
 import userEvent from "@testing-library/user-event";
 
 const DummyValue = "Lorem ipsum sit amet";
@@ -11,12 +11,11 @@ describe("ValueText", () => {
     placeholder,
     editable,
   }: {
-    value?: TextValue;
+    value?: string | number;
     placeholder?: string;
     editable?: boolean;
   }) => {
     const onEdit = jest.fn();
-    const onCancelEdit = jest.fn();
     render(
       <ValueText
         label="Hello world"
@@ -24,10 +23,9 @@ describe("ValueText", () => {
         placeholder={placeholder}
         editable={editable}
         onEdit={onEdit}
-        onCancelEdit={onCancelEdit}
       />,
     );
-    return { onEdit, onCancelEdit };
+    return { onEdit };
   };
 
   it("would render the label", () => {
@@ -93,8 +91,8 @@ describe("ValueText", () => {
       expect(onEdit).toHaveBeenCalledWith("new value");
     });
 
-    it("should call onCancelEdit without calling onEdit if the edition is cancelled", async () => {
-      const { onEdit, onCancelEdit } = renderComponent({ value: DummyValue, editable: true });
+    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"));
@@ -102,7 +100,6 @@ describe("ValueText", () => {
       await userEvent.click(screen.getByTestId("ClearIcon"));
 
       expect(onEdit).not.toHaveBeenCalled();
-      expect(onCancelEdit).toHaveBeenCalledTimes(1);
     });
 
     it("should have the original value if is edited again after clear a change", async () => {

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

@@ -1,57 +1,32 @@
-import { Button, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
-import React, { useState } from "react";
-import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { IconButton, TextField, Typography } from "@mui/material";
+import React from "react";
+import {
+  BaseValueProps,
+  DefaultPlaceholder,
+  EditableValueProps,
+  useEditableValueDisplay,
+  ValueEditButtons,
+} from "../value-base";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import CheckIcon from "@mui/icons-material/Check";
 import EditIcon from "@mui/icons-material/Edit";
-import ClearIcon from "@mui/icons-material/Clear";
 
-export type TextValue = string | number;
-
-export interface ValueTextProps<T extends TextValue> extends BaseValueProps<T> {
-  /**
-   * This field can be edited or not
-   */
-  editable?: boolean;
-
-  /**
-   * Callback executed when the value is edited
-   */
-  onEdit?: (value?: string) => void;
-
-  /**
-   * Callback called when the user cancels an edition
-   */
-  onCancelEdit?: () => void;
-}
+export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 
 /**
  * Displays a string value with a label
  */
-export const ValueText = <T extends TextValue>({
+export const ValueText = ({
   label,
   value: valueProp,
   placeholder = DefaultPlaceholder,
   editable,
   onEdit = () => null,
-  onCancelEdit = () => null,
-}: ValueTextProps<T>) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState<string | undefined>(valueProp?.toString());
+}: ValueTextProps) => {
+  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
+    useEditableValueDisplay(valueProp?.toString(), onEdit);
   const id = getValueContentLabelId(label);
   const value = valueProp?.toString() || placeholder;
 
-  const handleCancelEdit = () => {
-    setIsEditing(false);
-    setEditValue(valueProp?.toString());
-    onCancelEdit();
-  };
-
-  const handleEdit = () => {
-    onEdit(editValue);
-    setIsEditing(false);
-  };
-
   return (
     <ValueContent label={label} tooltip={value}>
       {isEditing ? (
@@ -60,33 +35,14 @@ export const ValueText = <T extends TextValue>({
           size="small"
           onChange={(e) => setEditValue(e.target.value)}
           InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <Button
-                  variant="contained"
-                  size="small"
-                  color="error"
-                  startIcon={<ClearIcon />}
-                  onClick={handleCancelEdit}
-                  sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}
-                />
-                <Button
-                  variant="contained"
-                  size="small"
-                  color="primary"
-                  startIcon={<CheckIcon />}
-                  onClick={handleEdit}
-                  sx={{ paddingRight: 0, minWidth: 0 }}
-                />
-              </InputAdornment>
-            ),
+            endAdornment: <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />,
           }}
         />
       ) : (
         <Typography variant="h5" noWrap aria-labelledby={id}>
           {value}
           {editable && (
-            <IconButton size="small" onClick={() => setIsEditing(true)} sx={{ ml: 1 }}>
+            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
               <EditIcon />
             </IconButton>
           )}