@pautena/react-design-system 0.12.0 → 0.12.1

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

@@ -1,61 +0,0 @@
-import React from "react";
-import { ValueBoolean } from "../value-boolean/value-boolean";
-import { ValueRating } from "../value-rating";
-import { ValueText } from "../value-text";
-import { GroupValueCard, GroupValueCardProps } from "./group-value-card";
-import { ValueItem } from "../value-item";
-import { ValueDatetime } from "../value-datetime";
-
-export const GroupValueCardDummy = ({
-  dense,
-  editable,
-  ...rest
-}: GroupValueCardProps & { editable?: boolean }) => {
-  return (
-    <GroupValueCard {...rest} dense={dense}>
-      <ValueItem xs={12} sm={6} md={4}>
-        <ValueText
-          editable={editable}
-          dense={dense}
-          label="Hello world"
-          value="Lorem ipsum sit amet"
-        />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={2}>
-        <ValueBoolean editable={editable} dense={dense} label="Enabled" value />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueText editable={editable} dense={dense} label="Quantity" value="1200" />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueText editable={editable} dense={dense} label="Currency" value="EUR" />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={6}>
-        <ValueText
-          editable={editable}
-          dense={dense}
-          label="I am Batman"
-          value=" Does it come in black? It's ends here. Hero can be anyone"
-        />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueText editable={editable} dense={dense} label="Status" value="Open" />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueText editable={editable} dense={dense} label="Level" value="2144" />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueRating editable={editable} dense={dense} label="Rating" value={3} />
-      </ValueItem>
-      <ValueItem xs={12} sm={6} md={3}>
-        <ValueDatetime
-          editable={editable}
-          dense={dense}
-          label="Created at"
-          value={new Date(2022, 5, 1)}
-          format="yyyy-MM-dd"
-        />
-      </ValueItem>
-    </GroupValueCard>
-  );
-};

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

@@ -1,76 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { GroupValueCard } from "./group-value-card";
-import { withPadding, withLocalizationProvider } from "../../../storybook";
-import { GroupValueCardDummy } from "./group-value-card.mock";
-import { ValueImage } from "../value-image";
-import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
-import React from "react";
-import { ValueContent } from "../value-content";
-import { DatatablePlaceholder } from "~/tests/datatable-placeholder";
-import { ValueItem } from "../value-item";
-
-export default {
-  title: "Components/Value displays/GroupValueCard",
-  component: GroupValueCardDummy,
-  decorators: [withPadding(2), withLocalizationProvider],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof GroupValueCardDummy>;
-type Story = StoryObj<typeof GroupValueCardDummy>;
-
-export const Default: Story = {
-  args: {
-    title: "Hello world",
-    subtitle: "Lorem ipsum sit amet",
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    title: "Hello world",
-    subtitle: "Lorem ipsum sit amet",
-    dense: true,
-  },
-};
-
-export const EditableDense: Story = {
-  args: {
-    title: "Hello world",
-    subtitle: "Lorem ipsum sit amet",
-    dense: true,
-    editable: true,
-  },
-};
-
-export const Editable: Story = {
-  args: {
-    title: "Hello world",
-    subtitle: "Lorem ipsum sit amet",
-    editable: true,
-  },
-};
-
-export const WihtoutSubtitle: Story = {
-  args: {
-    title: "Hello world",
-  },
-};
-
-export const WithImage = () => (
-  <GroupValueCard centered title="Hello world" subtitle="Lorem ipsum sit amet">
-    <ValueItem xs={12} bordered={false}>
-      <ValueImage label="Lorem ipsum" value={workInProgressImg} />
-    </ValueItem>
-  </GroupValueCard>
-);
-
-export const WithDataTable = () => (
-  <GroupValueCard title="Hello world" subtitle="Lorem ipsum sit amet">
-    <ValueItem xs={12} bordered={false}>
-      <ValueContent label="lorem ipsum">
-        <DatatablePlaceholder />
-      </ValueContent>
-    </ValueItem>
-  </GroupValueCard>
-);

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

@@ -1,61 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import React from "react";
-import { GroupValueCardDummy } from "./group-value-card.mock";
-import { LoremIpsumPlaceholder } from "~/components/placeholders";
-
-describe("GroupValueCard", () => {
-  const renderComponent = ({
-    title = "Hello world",
-    subtitle = undefined,
-  }: { title?: string; subtitle?: string } = {}) => {
-    return render(
-      <GroupValueCardDummy title={title} subtitle={subtitle}>
-        <LoremIpsumPlaceholder />
-      </GroupValueCardDummy>,
-    );
-  };
-  it("would render a title", () => {
-    renderComponent({ title: "Hello world" });
-
-    expect(screen.getByRole("heading", { level: 1 })).toBeVisible();
-  });
-
-  describe("subtitle", () => {
-    it("would not render a subtitle if it's not provided", () => {
-      renderComponent({ subtitle: undefined });
-
-      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
-    });
-
-    it("would render a subtitle if it's provided", () => {
-      renderComponent({ subtitle: "Hi. I am batman" });
-
-      expect(screen.getByRole("heading", { level: 2, name: /hi. i am batman/i })).toBeVisible();
-    });
-  });
-
-  it("would render all values", () => {
-    renderComponent();
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeVisible();
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeVisible();
-
-    expect(screen.getByRole("label", { name: /enabled/i })).toBeVisible();
-    expect(screen.getByLabelText(/enabled/i)).toBeChecked();
-
-    expect(screen.getByRole("label", { name: /quantity/i })).toBeVisible();
-    expect(screen.getByText(/1200/i)).toBeVisible();
-
-    expect(screen.getByRole("label", { name: /currency/i })).toBeVisible();
-    expect(screen.getByText(/eur/i)).toBeVisible();
-
-    expect(screen.getByRole("label", { name: /i am batman/i })).toBeVisible();
-    expect(screen.getByText(/does it come in black/i)).toBeVisible();
-
-    expect(screen.getByRole("label", { name: /status/i })).toBeVisible();
-    expect(screen.getByText(/open/i)).toBeVisible();
-
-    expect(screen.getByRole("label", { name: /level/i })).toBeVisible();
-    expect(screen.getByText(/2144/i)).toBeVisible();
-  });
-});

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

@@ -1,60 +0,0 @@
-import { Grid, Paper, Box, Typography, useTheme } from "@mui/material";
-import React from "react";
-import { useGetDefaultThemeColor } from "../../../utils/theme";
-import { ValueItemElement } from "../value-item/value-item";
-
-export interface GroupValueCardProps {
-  title: string;
-  subtitle?: string;
-  centered?: boolean;
-  children: ValueItemElement | ValueItemElement[];
-  dense?: boolean;
-}
-
-export const GroupValueCard = ({
-  title,
-  subtitle,
-  centered,
-  children,
-  dense,
-}: GroupValueCardProps) => {
-  const { typography } = useTheme();
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-
-  return (
-    <Paper
-      sx={{
-        paddingBottom: dense ? 0 : 1,
-      }}
-    >
-      <Box
-        bgcolor={defaultColor}
-        px={dense ? 1 : 2}
-        py={dense ? 0.5 : 1}
-        lineHeight={dense ? 0 : undefined}
-      >
-        <Typography variant={dense ? "body1" : "h6"} role="heading" aria-level={1}>
-          {title}
-        </Typography>
-        {subtitle && (
-          <Typography
-            variant={dense ? "caption" : "body2"}
-            role="heading"
-            aria-level={2}
-            lineHeight={dense ? typography.pxToRem(15) : undefined}
-          >
-            {subtitle}
-          </Typography>
-        )}
-      </Box>
-      <Grid
-        container
-        padding={1}
-        rowSpacing={dense ? 1 : 2}
-        justifyContent={centered ? "center" : "flex-start"}
-      >
-        {children}
-      </Grid>
-    </Paper>
-  );
-};

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

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

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

@@ -1,10 +0,0 @@
-export * from "./value-text";
-export * from "./value-card";
-export * from "./value-boolean";
-export * from "./value-datetime";
-export * from "./group-value-card";
-export * from "./value-base/value-displays.types";
-export * from "./value-rating";
-export * from "./value-base";
-export * from "./value-item";
-export * from "./value-label";

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

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

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

@@ -1,36 +0,0 @@
-export interface BaseValueProps<T> {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-
-  /**
-   * Value displayed
-   */
-  value?: T;
-
-  /**
-   * String rendered if value is undefined
-   */
-  placeholder?: string;
-
-  /**
-   * The value has to be displayed as compact or not.
-   * False by default
-   */
-  dense?: boolean;
-}
-
-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.test.tsx

@@ -1,88 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import { ValueEditButton, ValueEditButtons } from "./value-edit";
-import React from "react";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-describe("ValueEditButton", () => {
-  const renderComponent = () => {
-    const onClick = vi.fn();
-    render(<ValueEditButton onClick={onClick} />);
-
-    return { onClick };
-  };
-
-  it("should render a edit icon", () => {
-    renderComponent();
-
-    expect(screen.getByTestId("EditIcon")).toBeVisible();
-  });
-
-  it("should be accessible", () => {
-    renderComponent();
-
-    expect(screen.getByRole("button", { name: /edit button/i })).toBeVisible();
-  });
-
-  it("should call onClick when the button is clicked", async () => {
-    const { onClick } = renderComponent();
-
-    await userEvent.click(screen.getByRole("button", { name: /edit button/i }));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("ValueEditButtons", () => {
-  const renderComponent = () => {
-    const onClickCancel = vi.fn();
-    const onClickSubmit = vi.fn();
-    render(<ValueEditButtons onClickCancel={onClickCancel} onClickSubmit={onClickSubmit} />);
-
-    return { onClickCancel, onClickSubmit };
-  };
-
-  describe("cancel button", () => {
-    it("should render  a cancel icon", () => {
-      renderComponent();
-
-      expect(screen.getByTestId("ClearIcon")).toBeVisible();
-    });
-
-    it("should be accessible", () => {
-      renderComponent();
-
-      expect(screen.getByRole("button", { name: /cancel button/i })).toBeVisible();
-    });
-
-    it("should call onClickCancel when the button is clicked", async () => {
-      const { onClickCancel } = renderComponent();
-
-      await userEvent.click(screen.getByRole("button", { name: /cancel button/i }));
-
-      expect(onClickCancel).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("submit button", () => {
-    it("should render  a submit icon", () => {
-      renderComponent();
-
-      expect(screen.getByTestId("CheckIcon")).toBeVisible();
-    });
-
-    it("should be accessible", () => {
-      renderComponent();
-
-      expect(screen.getByRole("button", { name: /submit button/i })).toBeVisible();
-    });
-
-    it("should call onClickCancel when the button is clicked", async () => {
-      const { onClickSubmit } = renderComponent();
-
-      await userEvent.click(screen.getByRole("button", { name: /submit button/i }));
-
-      expect(onClickSubmit).toHaveBeenCalledTimes(1);
-    });
-  });
-});

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

@@ -1,81 +0,0 @@
-import React, { useState } from "react";
-import CheckIcon from "@mui/icons-material/Check";
-import ClearIcon from "@mui/icons-material/Clear";
-import { Button, IconButton, InputAdornment, SxProps, Theme, useTheme } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-
-export interface ValueEditButtonsProps {
-  onClickCancel: () => void;
-  onClickSubmit: () => void;
-  sx?: SxProps<Theme>;
-}
-
-export const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {
-  return (
-    <InputAdornment position="end" sx={sx}>
-      <Button
-        variant="contained"
-        size="small"
-        color="error"
-        aria-label="cancel button"
-        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}
-        onClick={onClickCancel}
-        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}
-      />
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        aria-label="submit button"
-        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}
-        onClick={onClickSubmit}
-        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 };
-};
-
-export interface ValueEditButtonProps {
-  dense?: boolean;
-  onClick: () => void;
-}
-
-export const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {
-  const { typography } = useTheme();
-  return (
-    <IconButton
-      size="small"
-      onClick={onClick}
-      sx={{ ml: dense ? 0.5 : 1 }}
-      aria-label="edit button"
-    >
-      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />
-    </IconButton>
-  );
-};

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

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

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

@@ -1,49 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueBoolean } from "./value-boolean";
-export default {
-  title: "Components/Value displays/ValueBoolean",
-  component: ValueBoolean,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ValueBoolean>;
-type Story = StoryObj<typeof ValueBoolean>;
-
-export const True: Story = {
-  args: {
-    label: "Lorem ipsum",
-    value: true,
-  },
-};
-
-export const False: Story = {
-  args: {
-    label: "Lorem ipsum",
-    value: false,
-  },
-};
-
-export const Editable: Story = {
-  args: {
-    label: "Lorem ipsum",
-    value: false,
-    editable: true,
-  },
-};
-
-export const DenseEditable: Story = {
-  args: {
-    label: "Lorem ipsum",
-    value: false,
-    dense: true,
-    editable: true,
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    label: "Lorem ipsum",
-    value: true,
-    dense: true,
-  },
-};

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

@@ -1,133 +0,0 @@
-import React from "react";
-import { ValueBoolean } from "./value-boolean";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-describe("ValueBoolean", () => {
-  const renderComponent = ({
-    value,
-    placeholder,
-    editable,
-  }: {
-    value?: boolean;
-    placeholder?: string;
-    editable?: boolean;
-  }) => {
-    const onEdit = vi.fn();
-    render(
-      <ValueBoolean
-        label="Hello world"
-        value={value}
-        placeholder={placeholder}
-        editable={editable}
-        onEdit={onEdit}
-      />,
-    );
-    return { onEdit };
-  };
-
-  it("would render the label", () => {
-    renderComponent({ value: true });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeVisible();
-  });
-
-  it("would render a check if value is true", () => {
-    renderComponent({ value: true });
-
-    expect(screen.getByTestId("CheckIcon")).toBeVisible();
-  });
-
-  it("would render a cross if value is false", () => {
-    renderComponent({ value: false });
-
-    expect(screen.getByTestId("CloseIcon")).toBeVisible();
-  });
-
-  describe("accessibility", () => {
-    it("should be checked if value is true", () => {
-      renderComponent({ value: true });
-
-      expect(screen.getByLabelText(/hello world/i)).toBeChecked();
-    });
-
-    it("shouldn't be checked if value is false", () => {
-      renderComponent({ value: false });
-
-      expect(screen.getByLabelText(/hello world/i)).not.toBeChecked();
-    });
-  });
-
-  it("should render the placeholder if value is undefined", () => {
-    renderComponent({ value: undefined });
-
-    expect(screen.getByText(/-/i)).toBeVisible();
-  });
-
-  it("should render the custom placeholder if value is undefined and placeholder has value", () => {
-    renderComponent({ value: undefined, placeholder: "_" });
-
-    expect(screen.getByText(/_/i)).toBeVisible();
-  });
-
-  describe("editable", () => {
-    it("shouldn't render an option to edit if editable is false", () => {
-      renderComponent({ value: true, editable: false });
-
-      expect(screen.queryByRole("button", { name: /edit/i })).not.toBeInTheDocument();
-    });
-
-    it("should render an option to edit if editable is true", () => {
-      renderComponent({ value: true, 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: true, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      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.getByRole("button", { name: /edit/i }));
-        await userEvent.click(screen.getByRole("checkbox"));
-        await userEvent.click(screen.getByRole("button", { name: /submit/i }));
-
-        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.getByRole("button", { name: /edit/i }));
-      await userEvent.click(screen.getByRole("checkbox"));
-      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: true, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.click(screen.getByRole("checkbox"));
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      expect(screen.getByRole("checkbox")).toBeChecked();
-    });
-  });
-});