@pautena/react-design-system 0.4.8 → 0.5.1

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.test.tsx

@@ -0,0 +1,233 @@
+import { DialogContentText } from "@mui/material";
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import { BootstrapDialog } from "./bootstrap-dialog";
+import userEvent from "@testing-library/user-event";
+import { DialogAction } from "../dialog.types";
+
+interface DialogRenderArgs {
+  open: boolean;
+  disabled?: boolean;
+  cancelable?: boolean;
+  acceptable?: boolean;
+  callCloseWhenCancel?: boolean;
+  actions?: DialogAction[];
+  acceptText?: string;
+  cancelText?: string;
+  loading?: boolean;
+}
+
+describe("BootstrapDialog", () => {
+  const createMockActions = () => {
+    const onClickAction1 = jest.fn();
+    const onClickAction2 = jest.fn();
+    const actions: DialogAction[] = [
+      {
+        id: "action1",
+        text: "Action 1",
+        color: "error",
+        onClick: onClickAction1,
+      },
+      {
+        id: "action2",
+        text: "Action 2",
+        onClick: onClickAction2,
+      },
+    ];
+    return { actions, onClickAction1, onClickAction2 };
+  };
+
+  const renderComponent = ({
+    open,
+    disabled,
+    cancelable,
+    acceptable,
+    callCloseWhenCancel,
+    acceptText,
+    cancelText,
+    actions,
+    loading,
+  }: DialogRenderArgs) => {
+    const onClose = jest.fn();
+    const onCancel = jest.fn();
+    const onAccept = jest.fn();
+
+    render(
+      <BootstrapDialog
+        open={open}
+        disabled={disabled}
+        cancelable={cancelable}
+        acceptable={acceptable}
+        callCloseWhenCancel={callCloseWhenCancel}
+        actions={actions}
+        title="lorem ipsum"
+        onClose={onClose}
+        onCancel={onCancel}
+        onAccept={onAccept}
+        cancelText={cancelText}
+        acceptText={acceptText}
+        loading={loading}
+      >
+        <DialogContentText>This is the content</DialogContentText>
+      </BootstrapDialog>,
+    );
+
+    return { onClose, onCancel, onAccept };
+  };
+
+  it("should render the dialog if open is true", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+
+  it("shouldn't render the dialog if open is false", () => {
+    renderComponent({ open: false });
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("should render the title", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByText("lorem ipsum")).toBeVisible();
+  });
+
+  it("should render the children content", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByText(/this is the content/i)).toBeVisible();
+  });
+
+  it("should call onClose if the close button is clicked", async () => {
+    const { onClose } = renderComponent({ open: true });
+
+    await userEvent.click(screen.getByRole("button", { name: "close" }));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  describe("disabled", () => {
+    it("should have the close button as disabled", () => {
+      renderComponent({ open: true, disabled: true });
+
+      expect(screen.getByRole("button", { name: "close" })).toBeDisabled();
+    });
+
+    it("should have the Cancel button as disabled", () => {
+      renderComponent({ open: true, disabled: true, cancelable: true });
+
+      expect(screen.getByRole("button", { name: /cancel/i })).toBeDisabled();
+    });
+
+    it("should have the accept button as disabled", () => {
+      renderComponent({ open: true, disabled: true, acceptable: true });
+
+      expect(screen.getByRole("button", { name: /accept/i })).toBeDisabled();
+    });
+
+    it("should have the actions button as disabled", () => {
+      const { actions } = createMockActions();
+      renderComponent({ open: true, disabled: true, actions });
+
+      expect(screen.getByRole("button", { name: /action 1/i })).toBeDisabled();
+      expect(screen.getByRole("button", { name: /action 2/i })).toBeDisabled();
+    });
+  });
+
+  it("should be able to change the cancel button text", () => {
+    renderComponent({ open: true, cancelable: true, cancelText: "updated cancel" });
+
+    expect(screen.getByRole("button", { name: /updated cancel/i })).toBeVisible();
+  });
+
+  it("should be able to change the accept button text", () => {
+    renderComponent({ open: true, acceptable: true, acceptText: "updated accept" });
+
+    expect(screen.getByRole("button", { name: /updated accept/i })).toBeVisible();
+  });
+
+  it("should call onCancel if the cancel button is clicked", async () => {
+    const { onCancel } = renderComponent({ open: true, cancelable: true });
+
+    await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onAccept if the accept button is clicked", async () => {
+    const { onAccept } = renderComponent({ open: true, acceptable: true });
+
+    await userEvent.click(screen.getByRole("button", { name: /accept/i }));
+
+    expect(onAccept).toHaveBeenCalledTimes(1);
+  });
+
+  describe("callCloseWhenCancel", () => {
+    it("should call onClose when call cancel if is true", async () => {
+      const { onClose } = renderComponent({
+        open: true,
+        cancelable: true,
+        callCloseWhenCancel: true,
+      });
+
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("shouln't call onClose when call cancel if is false", async () => {
+      const { onClose } = renderComponent({
+        open: true,
+        cancelable: true,
+        callCloseWhenCancel: false,
+      });
+
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("actions", () => {
+    it("should render a button for each action", () => {
+      const { actions } = createMockActions();
+      renderComponent({ open: true, cancelable: true, callCloseWhenCancel: false, actions });
+
+      expect(screen.getByRole("button", { name: /action 1/i })).toBeVisible();
+      expect(screen.getByRole("button", { name: /action 2/i })).toBeVisible();
+    });
+
+    it("should call the action 1 click listener if the action 1 is clicked", async () => {
+      const { actions, onClickAction1 } = createMockActions();
+      renderComponent({ open: true, cancelable: true, callCloseWhenCancel: false, actions });
+
+      await userEvent.click(screen.getByRole("button", { name: /action 1/i }));
+
+      expect(onClickAction1).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call the action 1 click listener if the action 2 is clicked", async () => {
+      const { actions, onClickAction2 } = createMockActions();
+      renderComponent({ open: true, cancelable: true, callCloseWhenCancel: false, actions });
+
+      await userEvent.click(screen.getByRole("button", { name: /action 2/i }));
+
+      expect(onClickAction2).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("loading", () => {
+    it("should render a loading indicator if acceptable is true and loading is true", () => {
+      renderComponent({ open: true, acceptable: true, loading: true });
+
+      expect(screen.getByRole("progressbar")).toBeVisible();
+    });
+
+    it("should render a loading indicator if acceptable is false and loading is true", () => {
+      renderComponent({ open: true, acceptable: false, loading: true });
+
+      expect(screen.getByRole("progressbar")).toBeVisible();
+    });
+  });
+});

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.tsx

@@ -0,0 +1,95 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  Button,
+  IconButton,
+  DialogContent,
+  Box,
+  CircularProgress,
+} from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { BootstrapDialogDialogProps } from "../dialog.types";
+
+export const BootstrapDialog = ({
+  open,
+  title,
+  component,
+  componentProps = {},
+  disabled,
+  actions = [],
+  children,
+  loading,
+  cancelable,
+  callCloseWhenCancel = true,
+  acceptable,
+  acceptText = "Accept",
+  cancelText = "Cancel",
+  onAccept,
+  onCancel = () => null,
+  onClose,
+  acceptType = "button",
+}: BootstrapDialogDialogProps) => {
+  const hasActions = actions.length > 0 || acceptable || cancelable;
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle sx={{ display: "flex", alignItems: "center" }}>
+        {title}
+        {loading && !acceptable && (
+          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />
+        )}
+        <IconButton
+          disabled={disabled}
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <Box component={component} {...componentProps}>
+        <DialogContent dividers>{children}</DialogContent>
+        {hasActions && (
+          <DialogActions>
+            {actions.map(({ id, text, type = "button", onClick, color = "primary" }) => (
+              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>
+                {text}
+              </Button>
+            ))}
+            {cancelable && (
+              <Button
+                color="error"
+                disabled={disabled}
+                onClick={() => {
+                  onCancel();
+                  callCloseWhenCancel && onClose();
+                }}
+              >
+                {cancelText}
+              </Button>
+            )}
+
+            {acceptable && (
+              <LoadingButton
+                type={acceptType}
+                loading={loading}
+                disabled={disabled}
+                onClick={onAccept}
+              >
+                {acceptText}
+              </LoadingButton>
+            )}
+          </DialogActions>
+        )}
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/dialogs/bootstrap-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./bootstrap-dialog";

package/src/components/dialogs/confirm-dialog/confirm-dialog.stories.tsx

@@ -0,0 +1,43 @@
+import { DialogContentText } from "@mui/material";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { loremIpsum } from "lorem-ipsum";
+import React from "react";
+import { StoryDialogManager } from "~/storybook";
+import { ConfirmDialog } from "./confirm-dialog";
+
+export default {
+  title: "Components/Dialogs/ConfirmDialog",
+  component: ConfirmDialog,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ConfirmDialog>;
+
+const Template: ComponentStory<typeof ConfirmDialog> = (args) => (
+  <StoryDialogManager component={ConfirmDialog} args={args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  title: "Lorem ipsum",
+  children: <DialogContentText>{loremIpsum({ count: 1, units: "paragraph" })}</DialogContentText>,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const CustomButtonText = Template.bind({});
+CustomButtonText.args = {
+  ...Default.args,
+  confirmText: "Create token",
+  cancelText: "Don't create a token",
+};

package/src/components/dialogs/confirm-dialog/confirm-dialog.test.tsx

@@ -0,0 +1,150 @@
+import { DialogContentText } from "@mui/material";
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import { ConfirmDialog } from "./confirm-dialog";
+import userEvent from "@testing-library/user-event";
+
+interface DialogRenderArgs {
+  open: boolean;
+  disabled?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  loading?: boolean;
+  content?: string | string[];
+}
+
+describe("ConfirmDialog", () => {
+  const renderComponent = ({
+    open,
+    disabled,
+    confirmText,
+    cancelText,
+    loading,
+  }: DialogRenderArgs) => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+
+    render(
+      <ConfirmDialog
+        open={open}
+        disabled={disabled}
+        loading={loading}
+        title="lorem ipsum"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelText={cancelText}
+        confirmText={confirmText}
+      >
+        <DialogContentText>This is the content</DialogContentText>
+      </ConfirmDialog>,
+    );
+
+    return { onCancel, onConfirm };
+  };
+
+  it("should render the dialog if open is true", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+
+  it("shouldn't render the dialog if open is false", () => {
+    renderComponent({ open: false });
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("should render the title", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByText("lorem ipsum")).toBeVisible();
+  });
+
+  it("should render the children content", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByText(/this is the content/i)).toBeVisible();
+  });
+
+  it("should call onCancel if the close button is clicked", async () => {
+    const { onCancel } = renderComponent({ open: true });
+
+    await userEvent.click(screen.getByRole("button", { name: "close" }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onCancel if the cancel button is clicked", async () => {
+    const { onCancel } = renderComponent({ open: true });
+
+    await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onConfirm if the confirm button is clicked", async () => {
+    const { onConfirm } = renderComponent({ open: true });
+
+    await userEvent.click(screen.getByRole("button", { name: /confirm/i }));
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  describe("disabled", () => {
+    it("should have the close button as disabled", () => {
+      renderComponent({ open: true, disabled: true });
+
+      expect(screen.getByRole("button", { name: "close" })).toBeDisabled();
+    });
+
+    it("should have the Cancel button as disabled", () => {
+      renderComponent({ open: true, disabled: true });
+
+      expect(screen.getByRole("button", { name: /cancel/i })).toBeDisabled();
+    });
+
+    it("should have the confirm button as disabled", () => {
+      renderComponent({ open: true, disabled: true });
+
+      expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled();
+    });
+  });
+
+  it("should be able to change the cancel button text", () => {
+    renderComponent({ open: true, cancelText: "updated cancel" });
+
+    expect(screen.getByRole("button", { name: /updated cancel/i })).toBeVisible();
+  });
+
+  it("should be able to change the confirm button text", () => {
+    renderComponent({ open: true, confirmText: "updated confirm" });
+
+    expect(screen.getByRole("button", { name: /updated confirm/i })).toBeVisible();
+  });
+
+  describe("loading", () => {
+    it("should render a loading indicator if is true", async () => {
+      renderComponent({ open: true, loading: true });
+
+      expect(screen.getByRole("progressbar")).toBeVisible();
+    });
+
+    it("should have the close button as disabled", () => {
+      renderComponent({ open: true, loading: true });
+
+      expect(screen.getByRole("button", { name: "close" })).toBeDisabled();
+    });
+
+    it("should have the Cancel button as disabled", () => {
+      renderComponent({ open: true, loading: true });
+
+      expect(screen.getByRole("button", { name: /cancel/i })).toBeDisabled();
+    });
+
+    it("should have the confirm button as disabled", () => {
+      renderComponent({ open: true, loading: true });
+
+      expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled();
+    });
+  });
+});

package/src/components/dialogs/confirm-dialog/confirm-dialog.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { BootstrapDialog } from "../bootstrap-dialog";
+import { BootstrapDialogDialogProps } from "../dialog.types";
+
+type OmitBaseDialogProps =
+  | "cancelable"
+  | "acceptable"
+  | "onAccept"
+  | "onCancel"
+  | "onClose"
+  | "actions"
+  | "callCloseWhenCancel"
+  | "component"
+  | "acceptType";
+export interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+  confirmText?: string;
+  canceText?: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const ConfirmDialog = ({
+  open,
+  title,
+  loading,
+  disabled,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  children,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) => {
+  return (
+    <BootstrapDialog
+      title={title}
+      loading={loading}
+      disabled={loading || disabled}
+      open={open}
+      onClose={onCancel}
+      acceptable
+      cancelable
+      callCloseWhenCancel={false}
+      acceptText={confirmText}
+      cancelText={cancelText}
+      onCancel={onCancel}
+      onAccept={onConfirm}
+    >
+      {children}
+    </BootstrapDialog>
+  );
+};

package/src/components/dialogs/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./confirm-dialog";

package/src/components/dialogs/dialog-hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-dialog";

package/src/components/dialogs/dialog-hooks/use-dialog.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export const useDialog = (intialOpen = false) => {
+  const [isOpen, setIsOpen] = useState(intialOpen);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
+  return { isOpen, open, close, setIsOpen };
+};

package/src/components/dialogs/dialog.types.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from "react";
+
+export interface DialogAction {
+  id: string;
+  text: string;
+  type?: "button" | "submit";
+  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  onClick?: () => void;
+}
+export type BootstrapDialogDialogProps = PropsWithChildren<{
+  open: boolean;
+  title: string;
+  loading?: boolean;
+  disabled?: boolean;
+  cancelable?: boolean;
+  acceptable?: boolean;
+  callCloseWhenCancel?: boolean;
+  actions?: DialogAction[];
+  cancelText?: string;
+  acceptText?: string;
+  acceptType?: "button" | "submit";
+  onClose: () => void;
+  onCancel?: () => void;
+  onAccept?: () => void;
+  component?: React.ElementType;
+  componentProps?: any;
+}>;

package/src/components/dialogs/dialogs.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Drawers/Introduction" />
+
+# Drawers
+
+<ul>
+  <li><LinkTo kind="Components/Dialogs/ConfirmDialog">ConfirmDialog</LinkTo></li>
+  <li><LinkTo kind="Components/Dialogs/FormDialog">FormDialog</LinkTo></li>
+  <li><LinkTo kind="Components/Dialogs/BootstrapDialog">BootstrapDialog</LinkTo></li>
+</ul>

package/src/components/dialogs/form-dialog/form-dialog.stories.tsx

@@ -0,0 +1,52 @@
+import { Grid, TextField } from "@mui/material";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { StoryDialogManager } from "~/storybook";
+import { FormDialog } from "./form-dialog";
+
+export default {
+  title: "Components/Dialogs/FormDialog",
+  component: FormDialog,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof FormDialog>;
+
+const Template: ComponentStory<typeof FormDialog> = (args) => (
+  <StoryDialogManager component={FormDialog} args={args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  title: "Lorem ipsum",
+  children: (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <TextField name="message" label="Message" fullWidth required variant="outlined" />
+      </Grid>
+      <Grid item xs={12}>
+        <TextField name="amount" label="Amount" fullWidth required variant="outlined" />
+      </Grid>
+    </Grid>
+  ),
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const CustomButtonText = Template.bind({});
+CustomButtonText.args = {
+  ...Default.args,
+  submitText: "Create token",
+  cancelText: "Don't create a token",
+};