@pautena/react-design-system 0.4.7 → 0.5.0

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",
+};

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

@@ -0,0 +1,164 @@
+import { Grid, TextField } from "@mui/material";
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import { FormDialog } from "./form-dialog";
+import userEvent from "@testing-library/user-event";
+
+interface DialogRenderArgs {
+  open: boolean;
+  disabled?: boolean;
+  submitText?: string;
+  cancelText?: string;
+  loading?: boolean;
+  content?: string | string[];
+}
+
+describe("FormDialog", () => {
+  const renderComponent = ({
+    open,
+    disabled,
+    submitText,
+    cancelText,
+    loading,
+  }: DialogRenderArgs) => {
+    const onCancel = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(
+      <FormDialog
+        open={open}
+        disabled={disabled}
+        loading={loading}
+        title="lorem ipsum"
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        cancelText={cancelText}
+        submitText={submitText}
+      >
+        <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>
+      </FormDialog>,
+    );
+
+    return { onCancel, onSubmit };
+  };
+
+  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 form", () => {
+    renderComponent({ open: true });
+
+    expect(screen.getByRole("textbox", { name: /message/i })).toBeVisible();
+    expect(screen.getByRole("textbox", { name: /amount/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 onSubmit if the form is submited", async () => {
+    const { onSubmit } = renderComponent({ open: true });
+
+    await userEvent.type(screen.getByRole("textbox", { name: /message/i }), "this is the message");
+    await userEvent.type(screen.getByRole("textbox", { name: /amount/i }), "100");
+    await userEvent.click(screen.getByRole("button", { name: /submit/i }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({
+      message: "this is the message",
+      amount: "100",
+    });
+  });
+
+  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 submit button as disabled", () => {
+      renderComponent({ open: true, disabled: true });
+
+      expect(screen.getByRole("button", { name: /submit/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 submit button text", () => {
+    renderComponent({ open: true, submitText: "updated submit" });
+
+    expect(screen.getByRole("button", { name: /updated submit/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 submit button as disabled", () => {
+      renderComponent({ open: true, loading: true });
+
+      expect(screen.getByRole("button", { name: /submit/i })).toBeDisabled();
+    });
+  });
+});

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

@@ -0,0 +1,69 @@
+import { BootstrapDialog } from "../bootstrap-dialog";
+import { FormEvent } from "react";
+import React from "react";
+import { BootstrapDialogDialogProps } from "../dialog.types";
+
+type OmitBaseDialogProps =
+  | "cancelable"
+  | "acceptable"
+  | "onAccept"
+  | "onCancel"
+  | "onClose"
+  | "actions"
+  | "callCloseWhenCancel"
+  | "component"
+  | "acceptType";
+export interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+  submitText?: string;
+  canceText?: string;
+  onCancel: () => void;
+  onSubmit: (data: T) => void;
+}
+
+export const FormDialog = <T,>({
+  open,
+  title,
+  loading,
+  disabled,
+  submitText = "Submit",
+  cancelText = "Cancel",
+  children,
+  onSubmit,
+  onCancel,
+}: FormDialogProps<T>) => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const data = new FormData(e.currentTarget);
+    const rawData: Record<string, any> = {};
+
+    data.forEach((value, key) => {
+      rawData[key] = value;
+    });
+
+    onSubmit(rawData as T);
+  };
+
+  return (
+    <BootstrapDialog
+      component="form"
+      componentProps={{
+        onSubmit: handleSubmit,
+      }}
+      title={title}
+      loading={loading}
+      disabled={loading || disabled}
+      open={open}
+      onClose={onCancel}
+      callCloseWhenCancel={false}
+      cancelable
+      acceptable
+      cancelText={cancelText}
+      onCancel={onCancel}
+      acceptText={submitText}
+      acceptType="submit"
+    >
+      {children}
+    </BootstrapDialog>
+  );
+};

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

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

package/src/components/dialogs/index.ts

@@ -0,0 +1,5 @@
+export * from "./confirm-dialog";
+export * from "./form-dialog";
+export * from "./bootstrap-dialog";
+export * from "./dialog-hooks";
+export * from "./dialog.types";

package/src/components/drawers/drawer-collapsable-item/drawer-collapsable-item.tsx

@@ -2,14 +2,12 @@ import {
   ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemAvatar,
-  Avatar,
   ListItemText,
   Collapse,
   List,
 } from "@mui/material";
 import React, { ReactElement, useState } from "react";
-import { NavItem, NavItemLink } from "../drawer/drawer.types";
+import { NavItemLink } from "../drawer/drawer.types";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import { DrawerItem } from "../drawer-item";

package/src/components/index.ts

@@ -8,3 +8,5 @@ export * from "./inputs";
 export * from "./navigation";
 export * from "./tables";
 export * from "./placeholders";
+export * from "./alerts";
+export * from "./dialogs";

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

@@ -0,0 +1,109 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate, withContainer } from "../../../storybook";
+import { EnhancedAutocomplete } from "./enhanced-autocomplete";
+import { faker } from "@faker-js/faker";
+import { Box, useTheme } from "@mui/material";
+import React from "react";
+
+export default {
+  title: "Components/Inputs/EnhancedAutocomplete",
+  component: EnhancedAutocomplete,
+  decorators: [withContainer({ width: 300 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof EnhancedAutocomplete>;
+
+const options: string[] = faker.definitions.vehicle?.model || [];
+
+const Template = createTemplate(EnhancedAutocomplete);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Car model",
+  options,
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  ...Default.args,
+  helperText: "This is a helper text",
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+export const LoadingWithValue = Template.bind({});
+LoadingWithValue.args = {
+  ...Default.args,
+  loading: true,
+  value: options[0],
+};
+
+export const Fetching = Template.bind({});
+Fetching.args = {
+  ...Default.args,
+  fetching: true,
+};
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = {
+  ...Default.args,
+  size: "small",
+};
+
+export const SizeSmallLoading = Template.bind({});
+SizeSmallLoading.args = {
+  ...Default.args,
+  size: "small",
+  value: options[0],
+  loading: true,
+};
+
+export const SizeSmallFetching = Template.bind({});
+SizeSmallFetching.args = {
+  ...Default.args,
+  size: "small",
+  fetching: true,
+  value: options[0],
+};
+
+type WithBackgroundProps = {
+  bgcolor: "primary" | "secondary";
+  loading: boolean;
+  fetching: boolean;
+};
+export const WithBackground = ({
+  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}>
+      <EnhancedAutocomplete
+        label="Car model"
+        options={options}
+        color={selectColor}
+        loading={loading}
+        fetching={fetching}
+      />
+    </Box>
+  );
+};
+
+WithBackground.args = {
+  bgcolor: "secondary",
+  loading: true,
+  fetching: true,
+};