reso-ui 1.1.0

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  IModalChildrenProps,
+  IModalContainerProps,
+  Modal,
+} from "@components/Modal";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// !! IMPORT OTHER COMPONENTS FIRST BEFORE IMPORTING STYLE FILES
+import { ModalHeader } from "@components/Modal/Modal-Header";
+import { ModalBody } from "@components/Modal/Modal-Body";
+
+// styles
+import "./styles/Dialog.layout.scss";
+import "./styles/Dialog.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+import { methodHasValue, hasValue } from "@utils/validations";
+import { Button } from "@components/Buttons/Button";
+
+export type DialogType = "ok" | "yesNo";
+
+export interface IDialog extends IModalChildrenProps, IComponent, IThemeProps {
+  title?: string;
+  header?: string;
+  description?: string;
+  type?: DialogType;
+  yesText?: string;
+  noText?: string;
+  okText?: string;
+  onClose?: () => void;
+  onClickYes?: () => void;
+  onClickNo?: () => void;
+  onClickOk?: () => void;
+  yesButtonClassName?: string;
+  yesButtonStyles?: React.CSSProperties;
+  noButtonClassName?: string;
+  noButtonStyles?: React.CSSProperties;
+  okButtonClassName?: string;
+  okButtonStyles?: React.CSSProperties;
+}
+
+export const Dialog = ({
+  isOpen = false,
+  type = "yesNo",
+  layer = 1,
+  title = "Confirm",
+  header = "Are you sure?",
+  description = "",
+  yesText = "Yes",
+  noText = "No",
+  okText = "OK",
+  onClose, // nullable function
+  onClickYes,
+  onClickNo,
+  onClickOk,
+  rootClassName,
+  rootStyles,
+  yesButtonClassName,
+  yesButtonStyles = {},
+  noButtonClassName,
+  noButtonStyles = {},
+  okButtonClassName,
+  okButtonStyles = {},
+  theme = "light",
+}: IDialog) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        dialog_container: true,
+      },
+
+      rootClassName
+    ),
+    createThemeStyles("dialog_container_theme_", theme)
+  );
+
+  const buttonsContainerClasses = createLayoutStyles(
+    {
+      dialog_buttons_container: true,
+      dialog_buttons_container_yesNo: type === "yesNo",
+    },
+    null,
+    {
+      no_select: true,
+    }
+  );
+
+  const yesButtonClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        dialog_button_yes: true,
+      },
+      yesButtonClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles("dialog_button_yes_", theme)
+  );
+
+  const noButtonClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        dialog_button_no: true,
+      },
+      noButtonClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles("dialog_button_no_", theme)
+  );
+
+  const okButtonClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        dialog_button_ok: true,
+      },
+      okButtonClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles("dialog_button_ok_", theme)
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      rootClassName={containerStyles}
+      rootStyles={rootStyles}
+      layer={layer}
+      theme={theme}
+      pa={5}
+    >
+      <ModalHeader
+        title={title}
+        onClose={() => {
+          if (methodHasValue(onClose)) {
+            onClose();
+          }
+        }}
+        theme={theme}
+      />
+      <ModalBody>
+        <p data-testid="dialog-header-text" className="dialog_header">
+          {header}
+        </p>
+        {description && (
+          <p
+            data-testid="dialog-description-text"
+            className="dialog_description"
+          >
+            {description}
+          </p>
+        )}
+        <div
+          data-testid="dialog-buttons-container"
+          className={buttonsContainerClasses}
+        >
+          {type === "yesNo" ? (
+            <>
+              <Button
+                rootClassName={noButtonClasses}
+                rootStyles={noButtonStyles}
+                onClick={() => {
+                  if (methodHasValue(onClickNo)) {
+                    onClickNo();
+                  }
+                }}
+                text={noText}
+              />
+              <Button
+                rootClassName={yesButtonClasses}
+                rootStyles={yesButtonStyles}
+                onClick={() => {
+                  if (methodHasValue(onClickYes)) {
+                    onClickYes();
+                  }
+                }}
+                text={yesText}
+              />
+            </>
+          ) : (
+            <Button
+              rootClassName={okButtonClasses}
+              rootStyles={okButtonStyles}
+              onClick={() => {
+                if (methodHasValue(onClickOk)) {
+                  onClickOk();
+                }
+              }}
+              text={okText}
+              inline
+              inheritWidth
+            />
+          )}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};

package/src/components/Dialog/__test__/Dialog.test.tsx

@@ -0,0 +1,220 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Dialog } from "@components/Dialog";
+
+// import from index does not work for jest.spyOn
+import * as ModalModule from "@components/Modal/Modal-Container/Modal-Container";
+import * as ModalHeaderModule from "@components/Modal/Modal-Header/Modal-Header";
+import * as ModalBodyModule from "@components/Modal/Modal-Body/Modal-Body";
+import * as ButtonModule from "@components/Buttons/Button/Button";
+
+describe("Dialog Modal Component Unit Tests", () => {
+  beforeEach(() => {
+    jest.spyOn(ModalModule, "Modal").mockImplementation((props) => {
+      const { rootClassName, rootStyles, children } = props;
+
+      return (
+        <div
+          data-testid="dialog-modal-container-mock"
+          className={rootClassName}
+          style={rootStyles}
+        >
+          {children}
+        </div>
+      );
+    });
+
+    jest.spyOn(ModalHeaderModule, "ModalHeader").mockImplementation((props) => {
+      const { rootClassName, rootStyles, title } = props;
+
+      return (
+        <div
+          data-testid="dialog-modal-header-mock"
+          className={rootClassName}
+          style={rootStyles}
+        >
+          {title}
+        </div>
+      );
+    });
+
+    jest.spyOn(ModalBodyModule, "ModalBody").mockImplementation((props) => {
+      const { rootClassName, rootStyles, children } = props;
+
+      return (
+        <div
+          data-testid="dialog-modal-body-mock"
+          className={rootClassName}
+          style={rootStyles}
+        >
+          {children}
+        </div>
+      );
+    });
+
+    jest.spyOn(ButtonModule, "Button").mockImplementation((props) => {
+      const { rootClassName, rootStyles, onClick, text } = props;
+
+      return (
+        <button
+          data-testid="dialog-button-mock"
+          className={rootClassName}
+          style={rootStyles}
+          onClick={onClick}
+        >
+          {text}
+        </button>
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test("should render itself without error", () => {
+    const { debug } = render(<Dialog isOpen={true} />);
+
+    // debug();
+    const component = screen.queryByTestId("dialog-modal-container-mock");
+    expect(component).toBeInTheDocument();
+  });
+
+  test("should render title correctly when provided as prop", () => {
+    const { debug } = render(<Dialog isOpen={true} title="testTitle" />);
+
+    // debug();
+    const component = screen.queryByTestId("dialog-modal-header-mock");
+    expect(component).toHaveTextContent("testTitle");
+  });
+
+  test("should render header correctly when provided as prop", () => {
+    const { debug } = render(
+      <Dialog isOpen={true} header="this is a test header" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("dialog-header-text");
+    expect(component).toHaveTextContent("this is a test header");
+  });
+
+  test("should render description correctly when provided as prop", () => {
+    const { debug } = render(
+      <Dialog isOpen={true} description="this is a test description" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("dialog-description-text");
+    expect(component).toHaveTextContent("this is a test description");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      <Dialog isOpen={true} rootClassName="sampleClassName" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("dialog-modal-container-mock");
+    expect(component).toHaveClass("sampleClassName");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    const { debug } = render(
+      <Dialog isOpen={true} rootStyles={{ border: `2px solid red` }} />
+    );
+
+    const component = screen.queryByTestId("dialog-modal-container-mock");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  describe("Yes/No Dialog", () => {
+    test("should render yes/no dialog type by default", () => {
+      const { debug } = render(<Dialog isOpen={true} />);
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      expect(buttons.length).toEqual(2);
+    });
+
+    test("should render yes/no buttons with custom texts", () => {
+      const { debug } = render(
+        <Dialog isOpen={true} yesText="yesTest" noText="noTest" />
+      );
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      const noButton = buttons[0];
+      const yesButton = buttons[1];
+
+      expect(noButton).toHaveTextContent("noTest");
+      expect(yesButton).toHaveTextContent("yesTest");
+    });
+
+    test("should execute onClickNo when No is clicked", () => {
+      const onClickMock = jest.fn();
+
+      const { debug } = render(
+        <Dialog isOpen={true} onClickNo={onClickMock} />
+      );
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      const noButton = buttons[0];
+      noButton.click();
+
+      expect(onClickMock).toHaveBeenCalled();
+    });
+
+    test("should execute onClickYes when Yes is clicked", () => {
+      const onClickMock = jest.fn();
+
+      const { debug } = render(
+        <Dialog isOpen={true} onClickYes={onClickMock} />
+      );
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      const yesButton = buttons[1];
+      yesButton.click();
+
+      expect(onClickMock).toHaveBeenCalled();
+    });
+  });
+
+  describe("OK Dialog", () => {
+    test("should render ok dialog type when provided as prop", () => {
+      const { debug } = render(<Dialog isOpen={true} type="ok" />);
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      expect(buttons.length).toEqual(1);
+    });
+
+    test("should render OK button with custom texts", () => {
+      const { debug } = render(
+        <Dialog isOpen={true} type="ok" okText="testOK" />
+      );
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      const button = buttons[0];
+
+      expect(button).toHaveTextContent("testOK");
+    });
+
+    test("should execute onClickOk when OK is clicked", () => {
+      const onClickMock = jest.fn();
+
+      const { debug } = render(
+        <Dialog isOpen={true} onClickOk={onClickMock} type="ok" />
+      );
+
+      //   debug();
+      const buttons = screen.queryAllByTestId("dialog-button-mock");
+      const button = buttons[0];
+      button.click();
+
+      expect(onClickMock).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Dialog";

package/src/components/Dialog/stories/Dialog.stories.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Dialog } from "@components/Dialog";
+// import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Modal/Dialog",
+  component: Dialog,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A Modal Dialog component to either alert user with something, or ask for user's confirmation.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Dialog>;
+
+export const DefaultYesNo = () => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      {showDialog && (
+        <Dialog
+          type="yesNo"
+          isOpen={showDialog}
+          onClose={() => setShowDialog(false)}
+          onClickYes={() => {
+            alert("You clicked YES!");
+            setShowDialog(false);
+          }}
+          onClickNo={() => {
+            alert("You clicked NO!");
+            setShowDialog(false);
+          }}
+          description="Once confirmed, this process cannot be undone. Proceed?"
+        />
+      )}
+      <button onClick={() => setShowDialog(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const DefaultYesNoWithCustomStyles = () => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      {showDialog && (
+        <Dialog
+          rootStyles={{ background: "yellow", border: "2px solid blue" }}
+          type="yesNo"
+          isOpen={showDialog}
+          onClose={() => setShowDialog(false)}
+          onClickYes={() => {
+            alert("You clicked YES!");
+            setShowDialog(false);
+          }}
+          onClickNo={() => {
+            alert("You clicked NO!");
+            setShowDialog(false);
+          }}
+          description="Once confirmed, this process cannot be undone. Proceed?"
+        />
+      )}
+      <button onClick={() => setShowDialog(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const OKDialog = () => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      {showDialog && (
+        <Dialog
+          type="ok"
+          isOpen={showDialog}
+          onClose={() => setShowDialog(false)}
+          onClickOk={() => {
+            alert("You clicked OK!");
+            setShowDialog(false);
+          }}
+          description="Request successfully submitted"
+        />
+      )}
+      <button onClick={() => setShowDialog(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const OKDialogWithCustomText = () => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+  return (
+    <>
+      {showDialog && (
+        <Dialog
+          type="ok"
+          isOpen={showDialog}
+          onClose={() => setShowDialog(false)}
+          onClickOk={() => {
+            alert("You clicked OK!");
+            setShowDialog(false);
+          }}
+          okText="Awesome"
+          description="Request successfully submitted"
+        />
+      )}
+      <button onClick={() => setShowDialog(true)}>Show Modal</button>
+    </>
+  );
+};

package/src/components/Dialog/styles/Dialog.layout.scss

@@ -0,0 +1,38 @@
+.dialog_container {
+  //   border: 2px solid red;
+  text-align: center;
+}
+
+.dialog_header {
+  font-size: $font-size-7;
+  font-weight: bold;
+  margin: $margin-medium auto;
+}
+
+.dialog_description {
+  margin-bottom: $margin-large;
+}
+
+.dialog_buttons_container {
+  //   border: 2px solid red;
+  display: block;
+  width: 100%;
+}
+
+.dialog_buttons_container_yesNo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog_button_no {
+  border-width: 1px;
+  border-style: solid;
+  margin-right: $margin-medium;
+}
+
+.dialog_button_yes,
+.dialog_button_ok {
+  border: none;
+}

package/src/components/Dialog/styles/Dialog.theme.scss

@@ -0,0 +1,21 @@
+.dialog_button_yes_light {
+  @include use_theme($primary-grey-dark, "dark");
+  &:hover {
+    background-color: $primary-grey-medium;
+  }
+}
+
+.dialog_button_no_light {
+  @include use_theme(unset, "light");
+  border-color: $primary-grey-dark;
+  &:hover {
+    background-color: $primary-grey-medium;
+  }
+}
+
+.dialog_button_ok_light {
+  @include use_theme($primary-grey-dark, "dark");
+  &:hover {
+    background-color: $primary-grey-medium;
+  }
+}

package/src/components/Errors/Component-Error/Component-Error.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Component-Error.layout.scss";
+import "./styles/Component-Error.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IComponentErrorProps extends IComponent, IThemeProps {
+  text?: string;
+  iconClassName?: string;
+  iconStyles?: React.CSSProperties;
+  textClassName?: string;
+  textStyles?: React.CSSProperties;
+}
+
+export const ComponentError = ({
+  text,
+  rootClassName,
+  rootStyles = {},
+  iconClassName,
+  iconStyles = {},
+  textClassName,
+  textStyles = {},
+  theme = "light",
+}: IComponentErrorProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        componentError_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("componentError_container_theme_", theme)
+  );
+
+  const iconClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        componentError_icon: true,
+        componentError_icon_margin: text && text !== "",
+      },
+      iconClassName
+    ),
+    createThemeStyles("componentError_icon_theme_", theme)
+  );
+
+  const textClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        loader_text: true,
+        componentError_text: true,
+      },
+      textClassName
+    ),
+    createThemeStyles("componentError_text_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="component-error-root"
+    >
+      <div
+        className={iconClasses}
+        style={iconStyles}
+        data-testid="component-error-icon"
+      >
+        !
+      </div>
+      {text && text !== "" && (
+        <p
+          className={textClasses}
+          style={textStyles}
+          data-testid="component-error-text"
+        >
+          {text}
+        </p>
+      )}
+    </div>
+  );
+};