reso-ui 1.1.0

package/src/components/Loaders/Loader/stories/Loader.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Loader } from "@components/Loaders/Loader";
+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: "Loaders/Generic Loader",
+  component: Loader,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A basic Loader to be placed *on top* of a component. It can be used within a component, or as a ternary placeholder.
+            
+            The parent component MUST have \`position: relative\`.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Loader>;
+
+const ComponentTemplate: ComponentStory<typeof Loader> = (args) => (
+  <div style={{ width: "200px", height: "200px", position: "relative" }}>
+    <Loader {...args} />
+    An Example Component
+  </div>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const CustomContainerClass = ComponentTemplate.bind({});
+CustomContainerClass.args = {
+  rootClassName: "Loader_container_story",
+};
+
+export const CustomIconContainerClass = ComponentTemplate.bind({});
+CustomIconContainerClass.args = {
+  iconContainerClassName: "Loader_icon_container_story",
+};

package/src/components/Loaders/Loader/stories/storiesStyle.scss

@@ -0,0 +1,7 @@
+.Loader_container_story {
+  background-color: green;
+}
+
+.Loader_icon_container_story {
+  background-color: red;
+}

package/src/components/Loaders/Loader/styles/Component-Loader.layout.scss

@@ -0,0 +1,43 @@
+.componentLoader_container {
+  box-sizing: content-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 4; // below navbar
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.componentLoader_container_fullscreen {
+  background-color: $bg-fullscreenloader;
+  position: fixed;
+  z-index: 100;
+}
+
+.componentLoader_icon_container {
+  line-height: 55px;
+  text-align: center;
+}
+
+.componentLoader_icon_container_mb {
+  margin-bottom: 40px;
+}
+
+.componentLoader_icon_size_small {
+  width: 35px;
+  height: 35px;
+}
+
+.componentLoader_icon_size_medium {
+  width: 45px;
+  height: 45px;
+}
+
+.componentLoader_icon_size_large {
+  width: 55px;
+  height: 55px;
+}

package/src/components/Loaders/Loader/styles/Component-Loader.theme.scss

@@ -0,0 +1,9 @@
+.componentLoader_container_theme_light {
+  border: 1px solid $primary-grey-medium-light;
+  background-color: $bg-fullscreenloader;
+}
+
+.componentLoader_loader_theme_light {
+  border: 2px solid $primary-grey-dark;
+  background-color: $primary-grey-dark;
+}

package/src/components/Loaders/index.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export * from "./Loader";

package/src/components/Modal/Modal-Body/Modal-Body.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IPaddingProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Modal-Body.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IModalBodyProps extends IComponent, IPaddingProps {
+  children: React.ReactNode;
+}
+
+export const ModalBody = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+  ...paddingProps
+}: IModalBodyProps) => {
+  const modalClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          modal_body: true,
+        },
+        paddingProps
+      ),
+      rootClassName,
+      {
+        width_full: true,
+        position_relative: true,
+      }
+    )
+  );
+
+  return (
+    <div
+      className={modalClasses}
+      style={rootStyles}
+      data-testid="modal-body-root"
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Modal/Modal-Body/__test__/Modal-Body.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ModalBody } from "@components/Modal/Modal-Body";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="modal-body-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Modal Body Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <ModalBody>
+        <SampleComponent />
+      </ModalBody>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-body-root");
+    expect(component).toBeInTheDocument();
+
+    const child = screen.queryByTestId("modal-body-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <ModalBody rootClassName="sample_class">
+        <SampleComponent />
+      </ModalBody>
+    );
+
+    const component = screen.queryByTestId("modal-body-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <ModalBody rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </ModalBody>
+    );
+
+    const component = screen.queryByTestId("modal-body-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply paddings classes when provided as prop", () => {
+    render(
+      <ModalBody pa={5}>
+        <SampleComponent />
+      </ModalBody>
+    );
+
+    const component = screen.queryByTestId("modal-body-root");
+    expect(component).toHaveClass("spacing-pa-5");
+  });
+});

package/src/components/Modal/Modal-Body/index.ts

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

package/src/components/Modal/Modal-Body/stories/Modal-Body.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Modal } from "@components/Modal";
+import { ModalBody } from "@components/Modal/Modal-Body";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Modal/Modal Body",
+  component: ModalBody,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component meant to wrap content of Modal.
+
+            It supports Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ModalBody>;
+
+const SampleChildComponent = () => {
+  return (
+    <div className="story_modal_child_sample" style={{ width: "320px" }}>
+      Test Child Modal
+    </div>
+  );
+};
+export const Default = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal isOpen={showModal} pa={5}>
+          <ModalBody pa={5}>
+            <button onClick={() => setShowModal(false)}>Close</button>
+            <SampleChildComponent />
+          </ModalBody>
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const WithContainerStyles = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal isOpen={showModal} pa={5}>
+          <ModalBody
+            rootStyles={{
+              border: "2px solid red",
+            }}
+            pa={5}
+          >
+            <button onClick={() => setShowModal(false)}>Close</button>
+            <SampleChildComponent />
+          </ModalBody>
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};

package/src/components/Modal/Modal-Body/styles/Modal-Body.layout.scss

@@ -0,0 +1,4 @@
+.modal_body {
+  // border: 2px solid blue;
+  display: block;
+}

package/src/components/Modal/Modal-Container/Modal-Container.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IPaddingProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Modal-Container.layout.scss";
+import "./styles/Modal-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+import useDisableBodyScroll from "@hooks/useDisableBodyScroll";
+
+export interface IModalContainerProps
+  extends IComponent,
+    IThemeProps,
+    IPaddingProps {
+  children: React.ReactNode;
+  isOpen: boolean;
+  layer?: number;
+}
+
+export interface IModalChildrenProps
+  extends Omit<IModalContainerProps, "children"> {}
+
+export const Modal = ({
+  children,
+  isOpen = false,
+  layer = 1,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...paddingProps
+}: IModalContainerProps) => {
+  useDisableBodyScroll(isOpen);
+
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          modal_container: true,
+        },
+        paddingProps
+      ),
+      rootClassName
+    ),
+    createThemeStyles("modal_container_theme_", theme)
+  );
+
+  const computedZIndex = layer + 10;
+
+  return (
+    <div
+      className="modal_backdrop"
+      style={{
+        zIndex: computedZIndex,
+      }}
+      data-testid="modal-backdrop"
+    >
+      <div
+        className={containerStyles}
+        style={{
+          zIndex: computedZIndex + 1,
+          ...rootStyles,
+        }}
+        data-testid="modal-container-root"
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Modal/Modal-Container/__test__/Modal-Container.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Modal } from "@components/Modal";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="modal-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Modal Container Unit Tests", () => {
+  test("should render itself and children when isOpen is true without error", () => {
+    const { debug } = render(
+      <Modal isOpen={true}>
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-container-root");
+    expect(component).toBeInTheDocument();
+
+    const child = screen.queryByTestId("modal-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should apply correct container rootClassName when provided as prop", () => {
+    const { debug } = render(
+      <Modal isOpen={true} rootClassName="sample_class">
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-container-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should have default light theme when theme not provided as prop", () => {
+    const { debug } = render(
+      <Modal isOpen={true}>
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-container-root");
+    expect(component).toHaveClass("modal_container_theme_light");
+  });
+
+  test("should have dark theme when provided as prop", () => {
+    const { debug } = render(
+      <Modal isOpen={true} theme="dark">
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-container-root");
+    expect(component).toHaveClass("modal_container_theme_dark");
+  });
+
+  test("should have correct z-index layer style on backdrop when provided as prop", () => {
+    const { debug } = render(
+      <Modal isOpen={true} layer={2}>
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-backdrop");
+    expect(component).toHaveStyle("z-index: 12");
+  });
+
+  test("should have correct z-index layer style on modal-container when provided as prop", () => {
+    const { debug } = render(
+      <Modal isOpen={true} layer={2}>
+        <SampleComponent />
+      </Modal>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-container-root");
+    expect(component).toHaveStyle("z-index: 13");
+  });
+});

package/src/components/Modal/Modal-Container/index.ts

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

package/src/components/Modal/Modal-Container/stories/Modal-Container.stories.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Modal } from "@components/Modal";
+import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+
+const SampleChildComponent = () => {
+  return (
+    <div className="story_modal_child_sample" style={{ width: "320px" }}>
+      Test Child Modal
+    </div>
+  );
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Modal/Container",
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component to allow rendering of popup modals.
+
+            The parent of this component must have \`position:relative\`, hence should work well within our *View* component.
+
+            The child to the component should have \`width\` defined, so it can take the child's width.
+
+            It supports Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Modal>;
+
+export const Default = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal isOpen={showModal} pa={5}>
+          <button onClick={() => setShowModal(false)}>Close</button>
+          <SampleChildComponent />
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const WithContainerStyles = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal
+          isOpen={showModal}
+          rootStyles={{
+            border: "2px solid green",
+          }}
+          pa={5}
+        >
+          <button onClick={() => setShowModal(false)}>Close</button>
+          <SampleChildComponent />
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};

package/src/components/Modal/Modal-Container/stories/storiesStyle.scss

@@ -0,0 +1,5 @@
+.story_modal_child_sample {
+  height: 200px;
+  width: 200px;
+  border: 1px dotted grey;
+}

package/src/components/Modal/Modal-Container/styles/Modal-Container.layout.scss

@@ -0,0 +1,21 @@
+.modal_backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: $bg-backdrop;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal_container {
+  min-width: 240px;
+  max-width: 540px;
+  min-height: 180px;
+  border-radius: $border-radius-small;
+  overflow-y: overlay;
+  position: relative;
+}

package/src/components/Modal/Modal-Container/styles/Modal-Container.theme.scss

@@ -0,0 +1,3 @@
+.modal_container_theme_light {
+  @include use_theme($primary-grey-light, "light");
+}

package/src/components/Modal/Modal-Header/Modal-Header.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+import { Button } from "@components/Buttons/Button";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Modal-Header.layout.scss";
+import "./styles/Modal-Header.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IModalHeaderProps extends IComponent, IThemeProps {
+  title: string;
+  onClose: () => void;
+}
+
+export const ModalHeader = ({
+  onClose,
+  title = "Modal",
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IModalHeaderProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        modal_header: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("modal_header_theme_", theme)
+  );
+
+  const closeButtonClasses = createComponentStyles(
+    createLayoutStyles({
+      modal_header_closeButton: true,
+    }),
+    createThemeStyles("modal_closeButton_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="modal-header-root"
+    >
+      <span className="sub_heading no_select" data-testid="modal-header-title">
+        {title}
+      </span>
+      <Button
+        text="Close"
+        onClick={onClose}
+        rootClassName={closeButtonClasses}
+      />
+    </div>
+  );
+};