@pautena/react-design-system 0.12.0 → 0.12.1

package/src/components/feedback/query-container/query-container.test.tsx

@@ -1,144 +0,0 @@
-import React from "react";
-import { QueryContainer, QueryContainerError, QueryContainerSuccess } from "./query-container";
-import { render, screen } from "~/tests/testing-library";
-import { Typography } from "@mui/material";
-import { expectProgressIndicator } from "~/tests/assertions";
-
-describe("QueryContainer", () => {
-  const renderComponent = ({
-    fetching = false,
-    loading = false,
-    error = undefined,
-    success = undefined,
-  }: {
-    fetching?: boolean | boolean[];
-    loading?: boolean | boolean[];
-    error?: QueryContainerError;
-    success?: QueryContainerSuccess;
-  } = {}) => {
-    return render(
-      <QueryContainer fetching={fetching} loading={loading} error={error} success={success}>
-        <Typography>children content</Typography>
-      </QueryContainer>,
-    );
-  };
-
-  describe("fetching", () => {
-    it("should render a loading indicator if fetching=true", () => {
-      renderComponent({ fetching: true });
-
-      expectProgressIndicator();
-    });
-
-    it("should render a loading indicator if fetching is an array with a true value", () => {
-      renderComponent({ fetching: [false, false, true, false, false] });
-
-      expectProgressIndicator();
-    });
-
-    it("should render the children if fetching=true", () => {
-      renderComponent({ fetching: true });
-
-      expect(screen.getByText(/children content/i)).toBeVisible();
-    });
-
-    it("should render the children if fetching is an array with a true value", () => {
-      renderComponent({ fetching: [false, false, true, false, false] });
-
-      expect(screen.getByText(/children content/i)).toBeVisible();
-    });
-  });
-
-  describe("loading", () => {
-    it("should render a loading indicator if loading=true", () => {
-      renderComponent({ loading: true });
-
-      expectProgressIndicator();
-    });
-
-    it("should render a loading indicator if loading is an array with a true value", () => {
-      renderComponent({ loading: [false, false, true, false, false] });
-
-      expectProgressIndicator();
-    });
-
-    it("shouldn't render the children", () => {
-      renderComponent({ loading: true });
-
-      expect(screen.queryByText(/children content/i)).not.toBeInTheDocument();
-    });
-
-    it("shouldn't render the children if fetching is an array with a true value", () => {
-      renderComponent({ loading: [false, false, true, false, false] });
-
-      expect(screen.queryByText(/children content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  describe("error", () => {
-    it("should render an error alert", () => {
-      renderComponent({ error: { message: "Internal error" } });
-
-      expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "error");
-    });
-
-    it("should render the error message if error is defined", () => {
-      renderComponent({ error: { message: "Internal error" } });
-
-      expect(screen.getByText(/internal error/i)).toBeInTheDocument();
-    });
-
-    it("should render the error title if error.name is defined", () => {
-      renderComponent({ error: { name: "Internal error", message: "There was an error" } });
-
-      expect(screen.getByRole("heading", { name: /internal error/i })).toBeInTheDocument();
-    });
-
-    it("shouldn't render the error title if error is defined but the error.name not", () => {
-      renderComponent({ error: { message: "Internal error" } });
-
-      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("success", () => {
-    it("should render a success alert", () => {
-      renderComponent({ success: { message: "Item added" } });
-
-      expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "success");
-    });
-
-    it("should render the success message if success is defined", () => {
-      renderComponent({ success: { message: "Item added" } });
-
-      expect(screen.getByText(/item added/i)).toBeInTheDocument();
-    });
-
-    it("should render the success title if success.name is defined", () => {
-      renderComponent({
-        success: { name: "Item added", message: "The item has been added successfully" },
-      });
-
-      expect(screen.getByRole("heading", { name: /item added/i })).toBeInTheDocument();
-    });
-
-    it("shouldn't render the error title if success is defined but the success.name not", () => {
-      renderComponent({ success: { message: "Item added" } });
-
-      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
-    });
-    //TODO validate the severity of the alert
-
-    it("should render the content", () => {
-      renderComponent({ success: { message: "Item added" } });
-
-      expect(screen.getByText(/children content/i)).toBeInTheDocument();
-    });
-  });
-
-  it("should render the children if isFetching is false and there is no defined error", () => {
-    renderComponent({ fetching: false, error: undefined });
-
-    expect(screen.getByText(/children content/i)).toBeInTheDocument();
-  });
-});

package/src/components/feedback/query-container/query-container.tsx

@@ -1,86 +0,0 @@
-import { Alert, AlertTitle, Box, LinearProgress } from "@mui/material";
-import React from "react";
-import { PropsWithChildren } from "react";
-import { LoadingArea } from "../loading-area";
-
-export interface QueryContainerError {
-  /**
-   * The error title
-   */
-  name?: string;
-  /**
-   * The description of the error
-   */
-  message: string;
-}
-
-export interface QueryContainerSuccess {
-  /**
-   * The success title
-   */
-  name?: string;
-  /**
-   * The success text
-   */
-  message: string;
-}
-
-export type QueryContainerProps = PropsWithChildren<{
-  /**
-   * There is a query in progress and we have available data
-   */
-  fetching?: boolean | boolean[];
-
-  /**
-   * There is a query in progress and we don't have available data
-   */
-  loading?: boolean | boolean[];
-  /**
-   * The query has returned an error
-   */
-  error?: QueryContainerError;
-  /**
-   * The query has finished successfully
-   */
-  success?: QueryContainerSuccess;
-}>;
-
-/**
- * Component to show different indicators based on the usual api query statuses
- */
-export function QueryContainer({
-  fetching: fetchingProp = false,
-  loading: loadingProp = false,
-  error,
-  success,
-  children,
-}: QueryContainerProps) {
-  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;
-  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;
-
-  if (loading) {
-    return <LoadingArea />;
-  }
-
-  if (error) {
-    return (
-      <Alert severity="error" role="alert" aria-describedby="error">
-        {error.name && <AlertTitle role="heading">{error.name}</AlertTitle>}
-        {error.message}
-      </Alert>
-    );
-  }
-
-  return (
-    <Box>
-      {success && (
-        <Alert severity="success" role="alert" aria-describedby="success" sx={{ mb: 2 }}>
-          {success.name && <AlertTitle role="heading">{success.name}</AlertTitle>}
-          {success.message}
-        </Alert>
-      )}
-      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}
-      {children}
-    </Box>
-  );
-}

package/src/components/index.ts

@@ -1,11 +0,0 @@
-export * from "./value-displays";
-export * from "./feedback";
-export * from "./data-display";
-export * from "./containers";
-export * from "./drawers";
-export * from "./inputs";
-export * from "./navigation";
-export * from "./tables";
-export * from "./placeholders";
-export * from "./alerts";
-export * from "./dialogs";

package/src/components/inputs/action/action-header.test.tsx

@@ -1,11 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { ActionHeader } from "./action-header";
-import React from "react";
-
-describe("ActionHeader", () => {
-  it("should render the title", () => {
-    render(<ActionHeader title="Lorem ipsum" />);
-
-    expect(screen.getByRole("heading", { name: /lorem ipsum/i, level: 4 }));
-  });
-});

package/src/components/inputs/action/action-header.tsx

@@ -1,37 +0,0 @@
-import { Typography, useTheme } from "@mui/material";
-import { Variant } from "@mui/material/styles/createTypography";
-import React from "react";
-
-type ActionVariant = "primary" | "error" | "warning" | "success";
-
-export interface ActionHeaderProps {
-  variant?: ActionVariant;
-  title: string;
-  titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
-}
-
-export const ActionHeader = ({
-  title,
-  titleVariant = "h4",
-  variant = "primary",
-}: ActionHeaderProps) => {
-  const { palette } = useTheme();
-
-  const titleColor: Record<ActionVariant, string | undefined> = {
-    primary: undefined,
-    error: "error",
-    warning: palette.warning.main,
-    success: palette.success.main,
-  };
-  return (
-    <Typography
-      color={titleColor[variant]}
-      variant={titleVariant}
-      pb={1}
-      borderBottom={1}
-      borderColor="grey.300"
-    >
-      {title}
-    </Typography>
-  );
-};

package/src/components/inputs/action/action.stories.tsx

@@ -1,77 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Action } from "./action";
-import { loremIpsum } from "lorem-ipsum";
-import { withContainer } from "../../../storybook";
-import { Box, Typography } from "@mui/material";
-import React from "react";
-
-export default {
-  title: "Components/Inputs/Action",
-  component: Action,
-  decorators: [withContainer({ padding: 2 })],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Action>;
-type Story = StoryObj<typeof Action>;
-
-export const Default: Story = {
-  args: {
-    title: "Change username",
-    description: loremIpsum({ count: 5, units: "sentence" }),
-    buttonText: "Change username",
-    helperText: loremIpsum({ count: 1, units: "sentence" }),
-  },
-};
-
-export const CustomDescription: Story = {
-  args: {
-    title: "Change username",
-    description: (
-      <Box>
-        <Typography>
-          This is a test description<Typography fontWeight="bold">with bold text</Typography>
-        </Typography>
-      </Box>
-    ),
-    buttonText: "Change username",
-    helperText: loremIpsum({ count: 1, units: "sentence" }),
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Default.args,
-    variant: "error",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    ...Default.args,
-    variant: "warning",
-  },
-};
-
-export const Sucess: Story = {
-  args: {
-    ...Default.args,
-    variant: "success",
-  },
-};
-
-export const Confirmable: Story = {
-  args: {
-    ...Default.args,
-    confirmable: true,
-    confirmTitle: "Username change",
-    confirmDescription: "Do you want to change the username?",
-  },
-};
-
-export const ConfirmableWithPassphrase: Story = {
-  args: {
-    ...Confirmable.args,
-    passphrase: "yes",
-  },
-};

package/src/components/inputs/action/action.test.tsx

@@ -1,97 +0,0 @@
-import { render, screen, fireEvent } from "~/tests/testing-library";
-import { Action } from "./action";
-import { vi } from "vitest";
-import React from "react";
-
-describe("Action", () => {
-  const renderComponent = ({
-    description,
-    helperText,
-    confirmable = false,
-    passphrase,
-  }: {
-    confirmable?: boolean;
-    passphrase?: string;
-    description?: string;
-    helperText?: string;
-  } = {}) => {
-    const onAction = vi.fn();
-    render(
-      <Action
-        title="Change Username"
-        description={description}
-        helperText={helperText}
-        onAction={onAction}
-        variant={"primary"}
-        buttonText="Change"
-        confirmable={confirmable}
-        confirmTitle="Confirmation title"
-        confirmDescription="Confirmation description"
-        passphrase={passphrase}
-      />,
-    );
-    return { onAction };
-  };
-
-  it("should render the title", () => {
-    renderComponent();
-
-    expect(screen.getByRole("heading", { name: "Change Username" })).toBeVisible();
-  });
-
-  it("should render the description if is defined", () => {
-    renderComponent({ description: "This will change the username" });
-
-    expect(screen.getByText("This will change the username")).toBeVisible();
-  });
-
-  it("should render the helper text if is defined", () => {
-    renderComponent({ helperText: "I'm helping you" });
-
-    expect(screen.getByText("I'm helping you")).toBeVisible();
-  });
-
-  it("should call onAction if the button is clicked and confirmable=false", () => {
-    const { onAction } = renderComponent({ confirmable: false });
-
-    fireEvent.click(screen.getByRole("button", { name: "Change" }));
-
-    expect(onAction).toHaveBeenCalledTimes(1);
-  });
-
-  it("should open a dialog if the button is clicked and confirmable=true", () => {
-    const { onAction } = renderComponent({ confirmable: true });
-
-    fireEvent.click(screen.getByRole("button", { name: "Change" }));
-
-    expect(onAction).not.toHaveBeenCalled();
-
-    expect(screen.getByText("Confirmation title")).toBeVisible();
-    expect(screen.getByText("Confirmation description")).toBeVisible();
-  });
-
-  it("should call onAction if the dialog is confirmed", () => {
-    const { onAction } = renderComponent({ confirmable: true });
-
-    fireEvent.click(screen.getByRole("button", { name: "Change" }));
-    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
-
-    expect(onAction).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call onAction if the dialog is confirmed with a passphrase", () => {
-    const { onAction } = renderComponent({ confirmable: true, passphrase: "yes" });
-
-    fireEvent.click(screen.getByRole("button", { name: "Change" }));
-
-    const confirmButton = screen.getByRole("button", { name: "Confirm" });
-    expect(confirmButton).toBeDisabled();
-
-    fireEvent.type(screen.getByRole("textbox"), "yes");
-    expect(confirmButton).toBeEnabled();
-
-    fireEvent.click(confirmButton);
-
-    expect(onAction).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/inputs/action/action.tsx

@@ -1,88 +0,0 @@
-import { Grid, Button, Typography, DialogContentText } from "@mui/material";
-import { Variant } from "@mui/material/styles/createTypography";
-import React, { ReactElement } from "react";
-import { ConfirmDialog, useDialog } from "~/components/dialogs";
-import { ActionHeader } from "./action-header";
-
-export type ActionVariant = "primary" | "error" | "warning" | "success";
-
-export interface ActionProps {
-  variant: ActionVariant;
-  title: string;
-  titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
-  description?: string | ReactElement;
-  descriptionVariant?: Variant;
-  helperText?: string;
-  helperTextVariant?: Variant;
-  buttonText: string;
-  confirmable?: boolean;
-  confirmTitle?: string;
-  confirmDescription?: string;
-  passphrase?: string;
-  onAction: () => void;
-}
-
-export const Action = ({
-  variant = "primary",
-  title,
-  titleVariant = "h4",
-  description,
-  descriptionVariant = "body2",
-  buttonText,
-  helperText,
-  helperTextVariant = "caption",
-  confirmable,
-  passphrase,
-  confirmTitle = "",
-  confirmDescription = "",
-  onAction,
-}: ActionProps) => {
-  const { isOpen, open, close } = useDialog();
-
-  const handleClickActionButton = () => {
-    if (confirmable) {
-      open();
-    } else {
-      onAction();
-    }
-  };
-
-  const handleConfirmDialog = () => {
-    onAction();
-    close;
-  };
-
-  return (
-    <>
-      <Grid container spacing={1}>
-        <Grid item xs={12} mb={2}>
-          <ActionHeader title={title} titleVariant={titleVariant} />
-        </Grid>
-        {description && (
-          <Grid item xs={12}>
-            <Typography variant={descriptionVariant}>{description}</Typography>
-          </Grid>
-        )}
-        <Grid item xs={12} mt={1}>
-          <Button color={variant} variant="contained" onClick={handleClickActionButton}>
-            {buttonText}
-          </Button>
-        </Grid>
-        {helperText && (
-          <Grid item xs={12}>
-            <Typography variant={helperTextVariant}>{helperText}</Typography>
-          </Grid>
-        )}
-      </Grid>
-      <ConfirmDialog
-        open={isOpen}
-        title={confirmTitle}
-        passphrase={passphrase}
-        onCancel={close}
-        onConfirm={handleConfirmDialog}
-      >
-        <DialogContentText>{confirmDescription}</DialogContentText>
-      </ConfirmDialog>
-    </>
-  );
-};

package/src/components/inputs/action/index.ts

@@ -1,2 +0,0 @@
-export * from "./action";
-export * from "./action-header";

package/src/components/inputs/autocomplete/autocomplete.stories.tsx

@@ -1,123 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer } from "../../../storybook";
-import { Autocomplete } from "./autocomplete";
-import { faker } from "@faker-js/faker";
-import { Box, useTheme } from "@mui/material";
-import React from "react";
-
-export default {
-  title: "Components/Inputs/Autocomplete",
-  component: Autocomplete,
-  decorators: [withContainer({ width: 300 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Autocomplete>;
-type Story = StoryObj<typeof Autocomplete>;
-
-const options: string[] = [...faker.definitions.vehicle.model];
-
-export const Default: Story = {
-  args: {
-    label: "Car model",
-    options,
-  },
-};
-
-export const HelperText: Story = {
-  args: {
-    ...Default.args,
-    helperText: "This is a helper text",
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    ...Default.args,
-    loading: true,
-  },
-};
-
-export const LoadingWithValue: Story = {
-  args: {
-    ...Default.args,
-    loading: true,
-    value: options[0],
-  },
-};
-
-export const Fetching: Story = {
-  args: {
-    ...Default.args,
-    fetching: true,
-  },
-};
-
-export const LoadingAndFetching: Story = {
-  args: {
-    ...Default.args,
-    loading: true,
-    fetching: true,
-  },
-};
-
-export const SizeSmall: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-  },
-};
-
-export const SizeSmallLoading: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-    value: options[0],
-    loading: true,
-  },
-};
-
-export const SizeSmallFetching: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-    fetching: true,
-    value: options[0],
-  },
-};
-
-type WithBackgroundProps = {
-  bgcolor: "primary" | "secondary";
-  loading: boolean;
-  fetching: boolean;
-};
-
-export const WithBackground = {
-  render: ({ bgcolor: bgcolorProp, loading, fetching }: WithBackgroundProps) => {
-    const { palette } = useTheme();
-    const BackgroundColors: Record<"primary" | "secondary", string> = {
-      primary: palette.primary.main,
-      secondary: palette.secondary.main,
-    };
-    const bgcolor = BackgroundColors[bgcolorProp];
-    const selectColor = palette.getContrastText(bgcolor);
-
-    return (
-      <Box bgcolor={bgcolor} padding={3}>
-        <Autocomplete
-          label="Car model"
-          options={options}
-          color={selectColor}
-          loading={loading}
-          fetching={fetching}
-        />
-      </Box>
-    );
-  },
-
-  args: {
-    bgcolor: "secondary",
-    loading: true,
-    fetching: true,
-  },
-};