@pautena/react-design-system 0.4.7 → 0.4.8

package/dist/esm/types/components/value-displays/index.d.ts

@@ -3,5 +3,6 @@ export * from "./value-card";
 export * from "./value-boolean";
 export * from "./value-datetime";
 export * from "./group-value-card";
-export * from "./value-displays.types";
+export * from "./value-base/value-displays.types";
 export * from "./value-rating";
+export * from "./value-base";

package/dist/esm/types/components/value-displays/value-base/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./value-edit";
+export * from "./value-displays.types";

package/dist/esm/types/components/value-displays/{value-displays.types.d.ts → value-base/value-displays.types.d.ts}

@@ -12,4 +12,14 @@ export interface BaseValueProps<T> {
      */
     placeholder?: string;
 }
+export interface EditableValueProps<T> {
+    /**
+     * This field can be edited or not
+     */
+    editable?: boolean;
+    /**
+     * Callback executed when the value is edited
+     */
+    onEdit?: (value?: T) => void;
+}
 export declare const DefaultPlaceholder = "-";

package/dist/esm/types/components/value-displays/value-base/value-edit.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { SxProps, Theme } from "@mui/material";
+export interface ValueEditButtonsProps {
+    onClickCancel: () => void;
+    onSubmitEdit: () => void;
+    sx?: SxProps<Theme>;
+}
+export declare const ValueEditButtons: ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => JSX.Element;
+/**
+ * Hook to manage the editing behaviour
+ */
+export declare const useEditableValueDisplay: <T>(initialValue: T | undefined, onEdit: (value?: T | undefined) => void) => {
+    isEditing: boolean;
+    cancelEdit: () => void;
+    editValue: T | undefined;
+    setEditValue: React.Dispatch<React.SetStateAction<T | undefined>>;
+    startEdit: () => void;
+    submitEdit: () => void;
+};

package/dist/esm/types/components/value-displays/value-boolean/value-boolean.d.ts

@@ -1,6 +1,6 @@
-import { BaseValueProps } from "../value-displays.types";
-export type ValueBooleanProps = BaseValueProps<boolean>;
+import { BaseValueProps, EditableValueProps } from "../value-base";
+export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 /**
  * Displays a boolean value with a label
  */
-export declare const ValueBoolean: ({ label, value, placeholder, }: ValueBooleanProps) => JSX.Element;
+export declare const ValueBoolean: ({ label, value, placeholder, editable, onEdit, }: ValueBooleanProps) => JSX.Element;

package/dist/esm/types/components/value-displays/value-datetime/value-datetime.d.ts

@@ -1,11 +1,16 @@
-import { BaseValueProps } from "../value-displays.types";
-export interface ValueDatetimeProps extends BaseValueProps<Date> {
+import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
+export type EditInputType = "datetime" | "date" | "time";
+export interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {
     /**
      * Datetime format
      */
     format: string;
+    /**
+     * Edit input type
+     */
+    editInputType?: EditInputType;
 }
 /**
  * Displays a formated datetime with a label
  */
-export declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, }: ValueDatetimeProps) => JSX.Element;
+export declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, editable, editInputType, onEdit, }: ValueDatetimeProps) => JSX.Element;

package/dist/esm/types/components/value-displays/value-image/value-image.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps } from "../value-displays.types";
+import { BaseValueProps } from "../value-base/value-displays.types";
 export interface ValueImageProps extends BaseValueProps<string> {
     /**
      * Image size

package/dist/esm/types/components/value-displays/value-rating/value-rating.d.ts

@@ -1,8 +1,8 @@
-import { BaseValueProps } from "../value-displays.types";
+import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
 export type ValueRatingProps = BaseValueProps<number> & {
     maxRating?: number;
-};
+} & EditableValueProps<number>;
 /**
  * Displays a number using stars
  */
-export declare const ValueRating: ({ label, value, maxRating }: ValueRatingProps) => JSX.Element;
+export declare const ValueRating: ({ label, value, maxRating, editable, onEdit, }: ValueRatingProps) => JSX.Element;

package/dist/esm/types/components/value-displays/value-text/value-text.d.ts

@@ -1,20 +1,6 @@
-import { BaseValueProps } from "../value-displays.types";
-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;
-}
+import { BaseValueProps, EditableValueProps } from "../value-base";
+export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 /**
  * Displays a string value with a label
  */
-export declare const ValueText: <T extends TextValue>({ label, value: valueProp, placeholder, editable, onEdit, onCancelEdit, }: ValueTextProps<T>) => JSX.Element;
+export declare const ValueText: ({ label, value: valueProp, placeholder, editable, onEdit, }: ValueTextProps) => JSX.Element;

package/dist/index.d.ts

@@ -2,13 +2,31 @@
 import * as React from 'react';
 import React__default, { PropsWithChildren, FunctionComponent, ReactElement, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as _mui_material from '@mui/material';
-import { GridProps, AppBarProps as AppBarProps$1, PropTypes, SxProps, Theme, DrawerProps as DrawerProps$1, Color, AlertColor } from '@mui/material';
+import { SxProps, Theme, GridProps, AppBarProps as AppBarProps$1, PropTypes, DrawerProps as DrawerProps$1, Color, AlertColor } from '@mui/material';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import { SelectInputProps } from '@mui/material/Select/SelectInput';
 import { Variant } from '@mui/material/styles/createTypography';
 import { LoremUnit } from 'lorem-ipsum/types/src/constants/units';
 
+interface ValueEditButtonsProps {
+    onClickCancel: () => void;
+    onSubmitEdit: () => void;
+    sx?: SxProps<Theme>;
+}
+declare const ValueEditButtons: ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => JSX.Element;
+/**
+ * Hook to manage the editing behaviour
+ */
+declare const useEditableValueDisplay: <T>(initialValue: T | undefined, onEdit: (value?: T | undefined) => void) => {
+    isEditing: boolean;
+    cancelEdit: () => void;
+    editValue: T | undefined;
+    setEditValue: React__default.Dispatch<React__default.SetStateAction<T | undefined>>;
+    startEdit: () => void;
+    submitEdit: () => void;
+};
+
 interface BaseValueProps<T> {
     /**
      * Name of the displayed value
@@ -23,10 +41,7 @@ interface BaseValueProps<T> {
      */
     placeholder?: string;
 }
-declare const DefaultPlaceholder = "-";
-
-type TextValue = string | number;
-interface ValueTextProps<T extends TextValue> extends BaseValueProps<T> {
+interface EditableValueProps<T> {
     /**
      * This field can be edited or not
      */
@@ -34,16 +49,15 @@ interface ValueTextProps<T extends TextValue> extends BaseValueProps<T> {
     /**
      * Callback executed when the value is edited
      */
-    onEdit?: (value?: string) => void;
-    /**
-     * Callback called when the user cancels an edition
-     */
-    onCancelEdit?: () => void;
+    onEdit?: (value?: T) => void;
 }
+declare const DefaultPlaceholder = "-";
+
+type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 /**
  * Displays a string value with a label
  */
-declare const ValueText: <T extends TextValue>({ label, value: valueProp, placeholder, editable, onEdit, onCancelEdit, }: ValueTextProps<T>) => JSX.Element;
+declare const ValueText: ({ label, value: valueProp, placeholder, editable, onEdit, }: ValueTextProps) => JSX.Element;
 
 type ValueCardProps = PropsWithChildren;
 /**
@@ -51,22 +65,27 @@ type ValueCardProps = PropsWithChildren;
  */
 declare const ValueCard: ({ children }: ValueCardProps) => JSX.Element;
 
-type ValueBooleanProps = BaseValueProps<boolean>;
+type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 /**
  * Displays a boolean value with a label
  */
-declare const ValueBoolean: ({ label, value, placeholder, }: ValueBooleanProps) => JSX.Element;
+declare const ValueBoolean: ({ label, value, placeholder, editable, onEdit, }: ValueBooleanProps) => JSX.Element;
 
-interface ValueDatetimeProps extends BaseValueProps<Date> {
+type EditInputType = "datetime" | "date" | "time";
+interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {
     /**
      * Datetime format
      */
     format: string;
+    /**
+     * Edit input type
+     */
+    editInputType?: EditInputType;
 }
 /**
  * Displays a formated datetime with a label
  */
-declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, }: ValueDatetimeProps) => JSX.Element;
+declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, editable, editInputType, onEdit, }: ValueDatetimeProps) => JSX.Element;
 
 type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container"> & {
     bordered?: boolean;
@@ -87,11 +106,11 @@ declare const GroupValueCard: ({ title, subtitle, centered, children }: GroupVal
 
 type ValueRatingProps = BaseValueProps<number> & {
     maxRating?: number;
-};
+} & EditableValueProps<number>;
 /**
  * Displays a number using stars
  */
-declare const ValueRating: ({ label, value, maxRating }: ValueRatingProps) => JSX.Element;
+declare const ValueRating: ({ label, value, maxRating, editable, onEdit, }: ValueRatingProps) => JSX.Element;
 
 /**
  * Displays a centered loading indicator
@@ -829,4 +848,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, ArrayFieldType, BaseFieldType, BaseValueProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize, EnhancedTable, EnhancedTableHead, FieldType, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemCollapsable, NavItemLabel, NavItemLink, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextValue, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, ArrayFieldType, BaseFieldType, BaseValueProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize, EnhancedTable, EnhancedTableHead, FieldType, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemCollapsable, NavItemLabel, NavItemLink, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButtons, ValueEditButtonsProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/drawers/drawer-collapsable-item/drawer-collapsable-item.tsx

@@ -2,14 +2,12 @@ import {
   ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemAvatar,
-  Avatar,
   ListItemText,
   Collapse,
   List,
 } from "@mui/material";
 import React, { ReactElement, useState } from "react";
-import { NavItem, NavItemLink } from "../drawer/drawer.types";
+import { NavItemLink } from "../drawer/drawer.types";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import { DrawerItem } from "../drawer-item";

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

@@ -3,5 +3,6 @@ export * from "./value-card";
 export * from "./value-boolean";
 export * from "./value-datetime";
 export * from "./group-value-card";
-export * from "./value-displays.types";
+export * from "./value-base/value-displays.types";
 export * from "./value-rating";
+export * from "./value-base";

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

@@ -0,0 +1,2 @@
+export * from "./value-edit";
+export * from "./value-displays.types";

package/src/components/value-displays/{value-displays.types.ts → value-base/value-displays.types.ts}

@@ -1,5 +1,3 @@
-import { ReactElement } from "react";
-
 export interface BaseValueProps<T> {
   /**
    * Name of the displayed value
@@ -17,4 +15,16 @@ export interface BaseValueProps<T> {
   placeholder?: string;
 }
 
+export interface EditableValueProps<T> {
+  /**
+   * This field can be edited or not
+   */
+  editable?: boolean;
+
+  /**
+   * Callback executed when the value is edited
+   */
+  onEdit?: (value?: T) => void;
+}
+
 export const DefaultPlaceholder = "-";

package/src/components/value-displays/value-base/value-edit.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import { Button, InputAdornment, SxProps, Theme } from "@mui/material";
+
+export interface ValueEditButtonsProps {
+  onClickCancel: () => void;
+  onSubmitEdit: () => void;
+  sx?: SxProps<Theme>;
+}
+
+export const ValueEditButtons = ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => {
+  return (
+    <InputAdornment position="end" sx={sx}>
+      <Button
+        variant="contained"
+        size="small"
+        color="error"
+        startIcon={<ClearIcon />}
+        onClick={onClickCancel}
+        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}
+      />
+      <Button
+        variant="contained"
+        size="small"
+        color="primary"
+        startIcon={<CheckIcon />}
+        onClick={onSubmitEdit}
+        sx={{ paddingRight: 0, minWidth: 0 }}
+      />
+    </InputAdornment>
+  );
+};
+
+/**
+ * Hook to manage the editing behaviour
+ */
+export const useEditableValueDisplay = <T,>(
+  initialValue: T | undefined,
+  onEdit: (value?: T) => void,
+) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState<T | undefined>(initialValue);
+
+  const cancelEdit = () => {
+    setIsEditing(false);
+    setEditValue(initialValue);
+  };
+  const startEdit = () => {
+    setIsEditing(true);
+  };
+
+  const submitEdit = () => {
+    onEdit(editValue);
+    cancelEdit();
+  };
+
+  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };
+};

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

@@ -23,3 +23,10 @@ False.args = {
   label: "Lorem ipsum",
   value: false,
 };
+
+export const Editable = Template.bind({});
+Editable.args = {
+  label: "Lorem ipsum",
+  value: false,
+  editable: true,
+};

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

@@ -1,10 +1,29 @@
 import React from "react";
 import { ValueBoolean } from "./value-boolean";
 import { render, screen } from "~/tests/testing-library";
+import userEvent from "@testing-library/user-event";
 
 describe("ValueBoolean", () => {
-  const renderComponent = ({ value, placeholder }: { value?: boolean; placeholder?: string }) => {
-    return render(<ValueBoolean label="Hello world" value={value} placeholder={placeholder} />);
+  const renderComponent = ({
+    value,
+    placeholder,
+    editable,
+  }: {
+    value?: boolean;
+    placeholder?: string;
+    editable?: boolean;
+  }) => {
+    const onEdit = jest.fn();
+    render(
+      <ValueBoolean
+        label="Hello world"
+        value={value}
+        placeholder={placeholder}
+        editable={editable}
+        onEdit={onEdit}
+      />,
+    );
+    return { onEdit };
   };
 
   it("would render the label", () => {
@@ -36,4 +55,64 @@ describe("ValueBoolean", () => {
 
     expect(screen.getByText(/_/i)).toBeInTheDocument();
   });
+
+  describe("editable", () => {
+    it("shouldn't render an option to edit if editable is false", () => {
+      renderComponent({ value: true, editable: false });
+
+      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+    });
+
+    it("should render an option to edit if editable is true", () => {
+      renderComponent({ value: true, editable: true });
+
+      expect(screen.getByTestId("EditIcon")).toBeVisible();
+    });
+
+    it("should render an input with the value if the edit button is clicked", async () => {
+      renderComponent({ value: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("checkbox")).toBeChecked();
+    });
+
+    it.each([
+      [true, false],
+      [false, true],
+    ])(
+      "should submit %s if is edited and the initial value is %s",
+      async (expectedValue: boolean, initialValue: boolean) => {
+        const { onEdit } = renderComponent({ value: initialValue, editable: true });
+
+        await userEvent.click(screen.getByTestId("EditIcon"));
+        await userEvent.click(screen.getByRole("checkbox"));
+        await userEvent.click(screen.getByTestId("CheckIcon"));
+
+        expect(onEdit).toHaveBeenCalledTimes(1);
+        expect(onEdit).toHaveBeenCalledWith(expectedValue);
+      },
+    );
+
+    it("should not call onEdit if the edition is cancelled", async () => {
+      const { onEdit } = renderComponent({ value: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("checkbox"));
+      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: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("checkbox"));
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("checkbox")).toBeChecked();
+    });
+  });
 });

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",
+};