@pautena/react-design-system 0.12.0 → 0.12.2

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

@@ -1,37 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueImage } from "./value-image";
-import { withContainer } from "../../../storybook";
-import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
-
-export default {
-  title: "Components/Value displays/ValueImage",
-  component: ValueImage,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ValueImage>;
-type Story = StoryObj<typeof ValueImage>;
-
-export const Default: Story = {
-  args: {
-    label: "Lorem",
-    value: workInProgressImg,
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    label: "Lorem",
-    value: workInProgressImg,
-    dense: true,
-  },
-};
-
-export const CustomSize: Story = {
-  args: {
-    label: "Lorem",
-    value: workInProgressImg,
-    size: 250,
-  },
-};

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

@@ -1,22 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import { Box } from "@mui/material";
-import React from "react";
-import { ValueContent } from "../value-content";
-import { BaseValueProps } from "../value-base/value-displays.types";
-
-export interface ValueImageProps extends BaseValueProps<string> {
-  /**
-   * Image size
-   */
-  size?: number;
-}
-
-const DefaultSize = 100;
-const DefaultDenseSize = 50;
-
-/**
- * Displays a image value with a label
- */
-export const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {
-  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);
-  return (
-    <ValueContent label={label} dense={dense}>
-      <Box component="img" src={value} alt={label} sx={{ width: size, height: size }} />
-    </ValueContent>
-  );
-};

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

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

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

@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueItem } from "./value-item";
-import { ValueText } from "../value-text";
-import React from "react";
-
-export default {
-  title: "Components/Value displays/ValueItem",
-  component: ValueItem,
-  parameters: {
-    layout: "centered",
-  },
-  render: (args) => (
-    <ValueItem {...args}>
-      <ValueText label="Hello world" value="Lorem ipsum sit amet" />
-    </ValueItem>
-  ),
-} satisfies Meta<typeof ValueItem>;
-type Story = StoryObj<typeof ValueItem>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Borderless: Story = {
-  args: {
-    bordered: false,
-  },
-};
-
-export const BreakpointsBorder: Story = {
-  args: {
-    bordered: {
-      xs: false,
-      sm: true,
-      md: false,
-      lg: true,
-    },
-  },
-};
-
-export const BreakpointsArrayBorder: Story = {
-  args: {
-    bordered: [false, true, false, true],
-  },
-};

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

@@ -1,20 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import { ValueItem } from "./value-item";
-import React from "react";
-import { Typography } from "@mui/material";
-
-describe("ValueItem", () => {
-  const renderComponent = () => {
-    render(
-      <ValueItem>
-        <Typography>test content</Typography>
-      </ValueItem>,
-    );
-  };
-
-  it("should render the children", () => {
-    renderComponent();
-
-    expect(screen.getByText(/test content/i)).toBeVisible();
-  });
-});

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

@@ -1,54 +0,0 @@
-import { GridProps, Grid, Box } from "@mui/material";
-import { ResponsiveStyleValue } from "@mui/system";
-import React, { PropsWithChildren, FunctionComponent, ReactElement } from "react";
-import { useGetDefaultThemeColor } from "~/utils";
-
-export type ValueItemProps = PropsWithChildren<
-  Omit<GridProps, "item" | "container"> & { bordered?: ResponsiveStyleValue<boolean> }
->;
-export type ValueItemComponent = FunctionComponent<ValueItemProps>;
-export type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;
-
-export const valueItemClasses = {
-  root: "RdsValueItem-root",
-  content: "RdsValueItem-content",
-};
-
-const resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {
-  const borderStyle = `solid ${color} 1px`;
-  const noBorder = "none";
-
-  if (!bordered) {
-    return undefined;
-  }
-
-  if (Array.isArray(bordered)) {
-    return bordered.map((b) => (b ? borderStyle : noBorder));
-  }
-
-  if (typeof bordered === "object") {
-    const style: Record<string, string | undefined> = {};
-    Object.entries(bordered).forEach(([key, value]) => {
-      style[key] = value ? borderStyle : noBorder;
-    });
-    return style;
-  }
-
-  return borderStyle;
-};
-
-export const ValueItem: ValueItemComponent = ({
-  children,
-  bordered = true,
-  ...rest
-}: ValueItemProps) => {
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-  const borderLeft = resolveBorderStyle(bordered, defaultColor);
-  return (
-    <Grid item className={valueItemClasses.root} {...rest}>
-      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>
-        {children}
-      </Box>
-    </Grid>
-  );
-};

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

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

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

@@ -1,78 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueLabel } from "./value-label";
-import { withContainer } from "../../../storybook";
-
-export default {
-  title: "Components/Value displays/ValueLabel",
-  component: ValueLabel,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ValueLabel>;
-type Story = StoryObj<typeof ValueLabel>;
-
-export const Default: Story = {
-  args: {
-    label: "Lorem",
-    value: "ipsum sit",
-  },
-};
-
-export const Variant: Story = {
-  args: {
-    label: "Lorem",
-    value: "ipsum sit",
-    variant: "success",
-  },
-};
-
-export const NumberAsValue: Story = {
-  args: {
-    label: "Lorem",
-    value: 1000,
-  },
-};
-
-export const TextList: Story = {
-  args: {
-    label: "Lorem",
-    value: ["ipsum sit", "amet", "dolor"],
-  },
-};
-
-export const NumberList: Story = {
-  args: {
-    label: "Lorem",
-    value: [15, 9876, 0],
-  },
-};
-
-export const ListSingleVariant: Story = {
-  args: {
-    label: "Lorem",
-    value: ["ipsum sit", "amet", "dolor"],
-    variant: "error",
-  },
-};
-
-export const ListMultipleVariants: Story = {
-  args: {
-    label: "Lorem",
-    value: ["ipsum sit", "amet", "dolor"],
-    variant: ["error", "success"],
-  },
-};
-
-export const Placeholder: Story = {
-  args: {
-    label: "Lorem",
-  },
-};
-
-export const CustomPlaceholder: Story = {
-  args: {
-    label: "Lorem",
-    placeholder: ".",
-  },
-};

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

@@ -1,72 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { ValueLabel } from "./value-label";
-import { LabelVariant } from "~/components/data-display";
-
-const DummyValueText = "Lorem ipsum sit amet";
-const DummyValueNumber = 1000;
-const DummyValueTextList = ["Lorem ipsum", "Dolor", "Sit amet"];
-const DummyValueNumberList = [200, 350, 1800];
-
-describe("ValueLabel", () => {
-  const renderComponent = ({
-    value,
-    placeholder,
-    variant,
-  }: {
-    value?: string | number | string[] | number[];
-    placeholder?: string;
-    variant?: LabelVariant | LabelVariant[];
-  }) => {
-    render(
-      <ValueLabel
-        label="Hello world"
-        value={value}
-        placeholder={placeholder}
-        variant={Array.isArray(variant) ? variant[0] : variant!}
-      />,
-    );
-  };
-
-  it("would render the label", () => {
-    renderComponent({ value: DummyValueText });
-
-    expect(screen.getByLabelText(/hello world/i)).toBeVisible();
-  });
-
-  it("would render the value if it is text", () => {
-    renderComponent({ value: DummyValueText, variant: "success" });
-
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeVisible();
-  });
-
-  it("would render the value if it is a number", () => {
-    renderComponent({ value: DummyValueNumber });
-
-    expect(screen.getByText(/1000/i)).toBeVisible();
-  });
-
-  it("would render the value if it is a list of texts", () => {
-    renderComponent({ value: DummyValueTextList, variant: ["error", "warning"] });
-
-    DummyValueTextList.forEach((text) => expect(screen.getByText(text)).toBeVisible());
-  });
-
-  it("would render the value if it is a list of numbers", () => {
-    renderComponent({ value: DummyValueNumberList });
-
-    DummyValueNumberList.forEach((number) => expect(screen.getByText(number)).toBeVisible());
-  });
-
-  it("should render the placeholder if value is undefined", () => {
-    renderComponent({ value: undefined });
-
-    expect(screen.getByText(/-/i)).toBeVisible();
-  });
-
-  it("should render the value of the corresponding label", () => {
-    renderComponent({ value: DummyValueText });
-
-    expect(screen.getByLabelText(/hello world/i)).toHaveTextContent(DummyValueText);
-  });
-});

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

@@ -1,45 +0,0 @@
-import React from "react";
-import { BaseValueProps, DefaultPlaceholder } from "../value-base";
-import { getValueContentLabelId, ValueContent } from "../value-content";
-import { Label, LabelVariant } from "~/components/data-display";
-import { Grid } from "@mui/material";
-
-export type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {
-  variant: LabelVariant | LabelVariant[];
-};
-
-/**
- * Displays a label component value with a label
- */
-export const ValueLabel = ({
-  label,
-  value: valueProp,
-  placeholder = DefaultPlaceholder,
-  variant,
-}: ValueLabelProps) => {
-  const id = getValueContentLabelId(label);
-  let value;
-
-  Array.isArray(valueProp)
-    ? (value = valueProp.map((value, i) => (
-        <Label
-          text={value.toString() || placeholder}
-          variant={Array.isArray(variant) ? variant[i] : variant}
-          key={i}
-        />
-      )))
-    : (value = (
-        <Label
-          text={valueProp?.toString() || placeholder}
-          variant={Array.isArray(variant) ? variant[0] : variant}
-        />
-      ));
-
-  return (
-    <ValueContent label={label}>
-      <Grid container gap={1} aria-labelledby={id}>
-        {value}
-      </Grid>
-    </ValueContent>
-  );
-};

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

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

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

@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueRating } from "./value-rating";
-import { withContainer } from "../../../storybook";
-
-export default {
-  title: "Components/Value displays/ValueRating",
-  component: ValueRating,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ValueRating>;
-type Story = StoryObj<typeof ValueRating>;
-
-export const Default: Story = {
-  args: {
-    label: "Lorem",
-    value: 3,
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    label: "Lorem",
-    value: 3,
-    dense: true,
-  },
-};
-
-export const Max: Story = {
-  args: {
-    label: "Lorem",
-    value: 4,
-    maxRating: 7,
-  },
-};
-
-export const Editable: Story = {
-  args: {
-    label: "Lorem",
-    value: 4,
-    maxRating: 7,
-    editable: true,
-  },
-};
-
-export const DenseEditable: Story = {
-  args: {
-    label: "Lorem",
-    value: 4,
-    maxRating: 7,
-    dense: true,
-    editable: true,
-  },
-};

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

@@ -1,105 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { ValueRating } from "./value-rating";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-describe("ValueRating", () => {
-  const renderComponent = ({
-    maxRating,
-    value = 3,
-    editable,
-  }: { maxRating?: number; value?: number; editable?: boolean } = {}) => {
-    const onEdit = vi.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.getByRole("button", { name: /edit/i })).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.getByRole("button", { name: /edit/i }));
-
-      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.getByRole("button", { name: /edit/i }));
-      await userEvent.click(screen.getByRole("radio", { name: /4 stars/i }));
-      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
-
-      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.getByRole("button", { name: /edit/i }));
-      await userEvent.click(screen.getAllByRole("radio")[3]);
-      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({ editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.click(screen.getByLabelText(/3 stars/i));
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
-    });
-  });
-});

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

@@ -1,48 +0,0 @@
-import { Box, Rating } from "@mui/material";
-import React from "react";
-import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
-import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
-import { getValueContentLabelId, ValueContent } from "../value-content";
-
-export type ValueRatingProps = BaseValueProps<number> & {
-  maxRating?: number;
-} & EditableValueProps<number>;
-
-/**
- * Displays a number using stars
- */
-export const ValueRating = ({
-  label,
-  value = 0,
-  maxRating = 5,
-  editable,
-  dense,
-  onEdit = () => null,
-}: ValueRatingProps) => {
-  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
-    useEditableValueDisplay(value, onEdit);
-  const id = getValueContentLabelId(label);
-
-  return (
-    <ValueContent label={label} tooltip={value.toString()} dense={dense}>
-      <Box display="flex" alignItems="center">
-        <Rating
-          aria-labelledby={id}
-          readOnly={!isEditing}
-          max={maxRating}
-          size={dense ? "small" : "medium"}
-          value={isEditing ? editValue : value}
-          onChange={(e, newValue) => {
-            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {
-              setEditValue(parseInt((e.currentTarget as any).value, 10));
-            } else if (newValue) {
-              setEditValue(newValue);
-            }
-          }}
-        />
-        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}
-        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}
-      </Box>
-    </ValueContent>
-  );
-};

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

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