@pautena/react-design-system 0.12.0 → 0.12.1

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

@@ -1,66 +0,0 @@
-import { Box, 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,
-  EditableValueProps,
-  useEditableValueDisplay,
-  ValueEditButton,
-  ValueEditButtons,
-} from "../value-base";
-import { ValueContent, getValueContentLabelId } from "../value-content";
-
-export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
-
-/**
- * Displays a boolean value with a label
- */
-export const ValueBoolean = ({
-  label,
-  value,
-  placeholder = DefaultPlaceholder,
-  editable,
-  dense,
-  onEdit = () => null,
-}: ValueBooleanProps) => {
-  const id = getValueContentLabelId(label);
-  const { typography } = useTheme();
-  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
-    useEditableValueDisplay(value, onEdit);
-
-  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };
-
-  return (
-    <ValueContent label={label} dense={dense}>
-      {isEditing ? (
-        <Box display="flex" alignItems="center">
-          <Switch
-            size={dense ? "small" : "medium"}
-            checked={editValue}
-            onChange={(e) => setEditValue(e.target.checked)}
-          />
-          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
-        </Box>
-      ) : (
-        <Box
-          display="flex"
-          alignItems="center"
-          aria-labelledby={id}
-          role="checkbox"
-          aria-checked={value}
-        >
-          {value === undefined ? (
-            <Typography variant="h5">{placeholder}</Typography>
-          ) : value ? (
-            <CheckIcon color="success" sx={iconSx} />
-          ) : (
-            <CloseIcon color="error" sx={iconSx} />
-          )}
-          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
-        </Box>
-      )}
-    </ValueContent>
-  );
-};

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

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

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

@@ -1,22 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueCard } from "./value-card";
-import { ValueText } from "../value-text";
-
-export default {
-  title: "Components/Value displays/ValueCard",
-  component: ValueCard,
-  parameters: {
-    layout: "centered",
-  },
-  render: ({ children }: PropsWithChildren) => {
-    return <ValueCard>{children}</ValueCard>;
-  },
-} satisfies Meta<typeof ValueCard>;
-type Story = StoryObj<typeof ValueCard>;
-
-export const ValueCardText: Story = {
-  args: {
-    children: <ValueText label="Hello world" value="Lorem ipsum sit amet" />,
-  },
-};

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

@@ -1,18 +0,0 @@
-import React from "react";
-import { ValueCard } from "./value-card";
-import { render, screen } from "~/tests/testing-library";
-import { ReactElement } from "react";
-import { ValueText } from "../value-text";
-
-describe("ValueCard", () => {
-  const renderComponent = ({ children }: { children: ReactElement }) => {
-    return render(<ValueCard>{children}</ValueCard>);
-  };
-
-  it("would render with a ValueText inside", () => {
-    renderComponent({ children: <ValueText label="Hello world" value="Lorem ipsum sit amet" /> });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
-  });
-});

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

@@ -1,12 +0,0 @@
-import React from "react";
-import { Paper } from "@mui/material";
-import { PropsWithChildren } from "react";
-
-export type ValueCardProps = PropsWithChildren;
-
-/**
- * Container to show a labeled value
- */
-export const ValueCard = ({ children }: ValueCardProps) => {
-  return <Paper sx={{ p: 2 }}>{children}</Paper>;
-};

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

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

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

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueContent } from "./value-content";
-import { withContainer } from "../../../storybook";
-import { Typography } from "@mui/material";
-import React from "react";
-
-export default {
-  title: "Components/Value displays/ValueContent",
-  component: ValueContent,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-  render: (args) => (
-    <ValueContent {...args} label="lorem ipsum">
-      <Typography>Demo content</Typography>
-    </ValueContent>
-  ),
-} satisfies Meta<typeof ValueContent>;
-type Story = StoryObj<typeof ValueContent>;
-
-export const Default: Story = {};
-export const Dense: Story = {
-  args: {
-    dense: true,
-  },
-};

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

@@ -1,64 +0,0 @@
-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,
-    hideLabel,
-  }: { tooltip?: string; hideLabel?: boolean } = {}) => {
-    render(
-      <ValueContent
-        label="lorem ipsum"
-        tooltip={tooltip}
-        tooltipEnterDelay={0}
-        hideLabel={hideLabel}
-      >
-        <Typography>Test content</Typography>
-      </ValueContent>,
-    );
-  };
-
-  it("should render a label", () => {
-    renderComponent();
-
-    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeVisible();
-  });
-
-  it("shouldn't render a label if hideLabel=true", () => {
-    renderComponent({ hideLabel: true });
-
-    expect(screen.queryByRole("label", { name: /lorem ipsum/i })).not.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 })).toBeVisible();
-    });
-
-    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)).toBeVisible();
-    });
-    it("should render the children if tooltip is undefined", () => {
-      renderComponent({ tooltip: undefined });
-
-      expect(screen.getByText(/test content/i)).toBeVisible();
-    });
-  });
-});

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

@@ -1,81 +0,0 @@
-import { Box, SxProps, Theme, Tooltip, Typography, useTheme } from "@mui/material";
-import React from "react";
-
-export const getValueContentLabelId = (label: string): string =>
-  `label-${label.replace(/ /g, "-")}`;
-
-export interface ValueContentProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-
-  /**
-   * If true, the label will not be shown
-   */
-  hideLabel?: boolean;
-
-  /**
-   * 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>;
-
-  /**
-   * The value has to be displayed as compact or not.
-   * False by default
-   */
-  dense?: boolean;
-
-  /**
-   * Custom styles for the root component
-   */
-  sx?: SxProps<Theme>;
-}
-
-/**
- * Displays a string value with a label
- */
-export const ValueContent = ({
-  label,
-  hideLabel,
-  tooltip,
-  tooltipEnterDelay = 2000,
-  children,
-  dense,
-  sx,
-}: ValueContentProps) => {
-  const { typography } = useTheme();
-  const id = getValueContentLabelId(label);
-
-  return (
-    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>
-      {!hideLabel && (
-        <Typography
-          variant={dense ? "caption" : "subtitle2"}
-          role="label"
-          id={id}
-          lineHeight={dense ? typography.pxToRem(15) : undefined}
-        >
-          {label}
-        </Typography>
-      )}
-      {tooltip ? (
-        <Tooltip title={tooltip} placement="top" enterDelay={tooltipEnterDelay}>
-          {children}
-        </Tooltip>
-      ) : (
-        children
-      )}
-    </Box>
-  );
-};

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

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

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

@@ -1,86 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueDatetime } from "./value-datetime";
-import { withContainer, withLocalizationProvider } from "../../../storybook";
-
-export default {
-  title: "Components/Value displays/ValueDatetime",
-  component: ValueDatetime,
-  decorators: [withContainer({ width: 600 }), withLocalizationProvider],
-  parameters: {
-    layout: "centered",
-  },
-} as Meta<typeof ValueDatetime>;
-type Story = StoryObj<typeof ValueDatetime>;
-
-export const Default: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22),
-    format: "yyyy/MM/dd",
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22),
-    format: "yyyy/MM/dd",
-    dense: true,
-  },
-};
-
-export const Placeholder: Story = {
-  args: {
-    label: "Lorem",
-    format: "yyyy/MM/dd",
-  },
-};
-
-export const CustomPlaceholder: Story = {
-  args: {
-    label: "Lorem",
-    format: "yyyy/MM/dd",
-    placeholder: ".",
-  },
-};
-
-export const EditableDatetime: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22, 12, 25),
-    format: "yyyy/MM/dd HH:mm",
-    editable: true,
-    editInputType: "datetime",
-  },
-};
-
-export const EditableTime: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22, 12, 25),
-    format: "HH:mm",
-    editable: true,
-    editInputType: "time",
-  },
-};
-
-export const EditableDate: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22),
-    format: "yyyy/MM/dd",
-    editable: true,
-    editInputType: "date",
-  },
-};
-
-export const DenseEditable: Story = {
-  args: {
-    label: "Lorem",
-    value: new Date(2022, 8, 22),
-    format: "yyyy/MM/dd",
-    editable: true,
-    editInputType: "date",
-    dense: true,
-  },
-};

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

@@ -1,141 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { EditInputType, ValueDatetime } from "./value-datetime";
-import userEvent from "@testing-library/user-event";
-import { pickDatetime } from "~/tests/actions";
-import { assertDatetimeInputValue } from "~/tests/assertions";
-import { vi } from "vitest";
-
-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,
-    editable,
-    fmt = datetimeFormat,
-    editInputType = "datetime",
-  }: {
-    value?: Date;
-    placeholder?: string;
-    editable?: boolean;
-    fmt?: string;
-    editInputType?: EditInputType;
-  }) => {
-    const onEdit = vi.fn();
-    render(
-      <ValueDatetime
-        label="Hello world"
-        value={value}
-        placeholder={placeholder}
-        format={fmt}
-        editable={editable}
-        editInputType={editInputType}
-        onEdit={onEdit}
-      />,
-    );
-    return { onEdit };
-  };
-
-  it("would render the label", () => {
-    renderComponent({ value: DummyValue });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-  });
-
-  it("would render the value", () => {
-    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();
-  });
-
-  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.getByRole("button", { name: /edit/i })).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.getByRole("button", { name: /edit/i }));
-
-      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.getByRole("button", { name: /edit/i }));
-        pickDatetime(screen.getByRole("textbox"), newValue, fmt);
-        await userEvent.click(screen.getByRole("button", { name: /submit/i }));
-
-        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.getByRole("button", { name: /edit/i }));
-      pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-
-      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.getByRole("button", { name: /edit/i }));
-      pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      assertDatetimeInputValue(screen.getByRole("textbox"), {
-        value: DummyValue,
-        fmt: datetimeFormat,
-      });
-    });
-  });
-});

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

@@ -1,99 +0,0 @@
-import { Box, TextField, Typography } from "@mui/material";
-import React from "react";
-import { format } from "date-fns";
-import {
-  BaseValueProps,
-  DefaultPlaceholder,
-  EditableValueProps,
-} from "../value-base/value-displays.types";
-import { getValueContentLabelId, ValueContent } from "../value-content";
-import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
-import { DatePicker, DateTimePicker, TimePicker } from "@mui/x-date-pickers";
-
-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 const ValueDatetime = ({
-  label,
-  value: valueProp,
-  format: fmt,
-  placeholder = DefaultPlaceholder,
-  editable,
-  editInputType = "datetime",
-  dense,
-  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}
-      hideLabel={isEditing}
-      tooltip={value}
-      dense={dense}
-      sx={{ display: "flex", flexDirection: "column" }}
-    >
-      {isEditing ? (
-        <EditPickerComponent
-          value={editValue}
-          format={fmt}
-          label={label}
-          onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}
-          slots={{
-            textField: (params) => (
-              <TextField
-                {...params}
-                size="small"
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <>
-                      {params.InputProps?.endAdornment}
-                      <ValueEditButtons
-                        onClickCancel={cancelEdit}
-                        onClickSubmit={submitEdit}
-                        sx={{ ml: 2 }}
-                      />
-                    </>
-                  ),
-                  sx: { marginY: !dense ? 1 : 0.2 },
-                }}
-              />
-            ),
-          }}
-        />
-      ) : (
-        <Box display="flex" alignItems="center">
-          <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
-            {value}
-          </Typography>
-          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
-        </Box>
-      )}
-    </ValueContent>
-  );
-};

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

@@ -1,39 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-import LinkTo from "@storybook/addon-links/react";
-
-<Meta title="Components/Value displays/Introduction" />
-
-# Value Displays
-
-<ul>
-  <li>
-    <LinkTo kind="Components/Value displays/GroupValueCard">GroupValueCard</LinkTo>
-  </li>
-  <li>
-    <LinkTo kind="Components/Value displays/ValueBoolean">ValueBoolean</LinkTo>
-  </li>
-  <li>
-    <LinkTo kind="Components/Value displays/ValueCard">ValueCard</LinkTo>
-  </li>
-  <li>
-    <LinkTo kind="Components/Value displays/ValueContent">ValueContent</LinkTo>
-  </li>
-  <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>
-  <li>
-    <LinkTo kind="Components/Value displays/ValueItem">ValueItem</LinkTo>
-  </li>
-  <li>
-    <LinkTo kind="Components/Value displays/ValueLabel">ValueLabel</LinkTo>
-  </li>
-</ul>

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

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