reso-ui 1.1.0

package/src/components/Images/Multi-Image-Viewer/__test__/Multi-Image-Viewer.test.tsx

@@ -0,0 +1,317 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MultiImageViewer } from "@components/Images/Multi-Image-Viewer";
+
+// import from index does not work for jest.spyOn
+import * as ImageModule from "@components/Images/Image/Image";
+import * as HSC from "@components/Containers/Horizontal-Scroll-Container/Horizontal-Scroll-Container";
+
+const sampleImageObjects = [
+  {
+    path: "image-example.jpg",
+  },
+  {
+    path: "image-example-2.jpg",
+  },
+  {
+    path: "image-example-3.jpg",
+  },
+  {
+    path: "image-example.jpg",
+  },
+];
+
+describe("Image Component Unit Tests", () => {
+  beforeEach(() => {
+    jest
+      .spyOn(ImageModule, "Image")
+      .mockImplementation(({ rootClassName, rootStyles, onClick, src }) => {
+        return (
+          <div className={rootClassName} style={rootStyles} onClick={onClick}>
+            <img src={src} />
+          </div>
+        );
+      });
+
+    jest
+      .spyOn(HSC, "HorizontalScrollContainer")
+      .mockImplementation(({ rootClassName, rootStyles, children }) => {
+        return (
+          <div
+            className={rootClassName}
+            style={rootStyles}
+            data-testid="multi-image-viewer-scrollbox"
+          >
+            {children}
+          </div>
+        );
+      });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const defaultProps = {
+    src: "image-example.jpg",
+  };
+
+  test("should render container and scrollbox without crashing", () => {
+    const { debug } = render(
+      <MultiImageViewer imageObjects={sampleImageObjects} />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("multi-image-viewer-root");
+    expect(component).toBeInTheDocument();
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    expect(scrollbox).toBeInTheDocument();
+  });
+
+  test("should render correct number of mini images", () => {
+    const { debug } = render(
+      <MultiImageViewer imageObjects={sampleImageObjects} />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+    // console.log(scrollBoxChildren);
+    expect(scrollBoxChildren.length).toEqual(sampleImageObjects.length);
+  });
+
+  test("should apply selected styles on the correct mini image", () => {
+    const { debug } = render(
+      <MultiImageViewer imageObjects={sampleImageObjects} />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+
+    fireEvent.click(scrollBoxChildren[2]);
+
+    const scrollboxUpdated = screen.queryByTestId(
+      "multi-image-viewer-scrollbox"
+    );
+    const scrollBoxUpdatedChildren = scrollboxUpdated.childNodes;
+
+    // debug();
+    scrollBoxUpdatedChildren.forEach((e, idx) => {
+      if (idx === 2) {
+        expect(e).toHaveClass("multiImageViewer_miniImage_selected");
+        expect(e).toHaveClass(
+          "multiImageViewer_miniImage_selected_theme_light"
+        );
+      } else {
+        expect(e).not.toHaveClass("multiImageViewer_miniImage_selected");
+        expect(e).not.toHaveClass(
+          "multiImageViewer_miniImage_selected_theme_light"
+        );
+      }
+    });
+  });
+
+  test("should show correct image when the mini version is clicked", () => {
+    const { debug } = render(
+      <MultiImageViewer imageObjects={sampleImageObjects} />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+
+    fireEvent.click(scrollBoxChildren[2]);
+
+    const container = screen.queryByTestId("multi-image-viewer-root");
+    const mainImageDiv = container.firstChild;
+    const mainImageImg = mainImageDiv.firstChild;
+
+    expect(mainImageImg).toHaveAttribute("src", sampleImageObjects[2].path);
+  });
+
+  test("should call onClickImage when main image is clicked and provided as prop", () => {
+    const onClickSpy = jest.fn();
+
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        onClickImage={onClickSpy}
+      />
+    );
+
+    const container = screen.queryByTestId("multi-image-viewer-root");
+    const mainImageDiv = container.firstChild;
+
+    fireEvent.click(mainImageDiv);
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  test("should call getMiniImagePath when mini images are rendered and provided as prop", () => {
+    const getMiniPathSpy = jest.fn().mockImplementation(() => "");
+
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        getMiniImagePath={getMiniPathSpy}
+      />
+    );
+
+    expect(getMiniPathSpy).toHaveBeenCalledTimes(sampleImageObjects.length);
+  });
+
+  test("should call setIndexOverride when the mini version is clicked and provided as prop", () => {
+    const setIndexOverrideSpy = jest.fn();
+
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        setIndexOverride={setIndexOverrideSpy}
+      />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+
+    fireEvent.click(scrollBoxChildren[2]);
+
+    expect(setIndexOverrideSpy).toHaveBeenCalledWith(2);
+  });
+
+  test("should apply container class when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        rootClassName={"sample_class"}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply container styles when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        rootStyles={{ border: "2px solid brown" }}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-root");
+    expect(component).toHaveStyle("border: 2px solid brown");
+  });
+
+  test("should apply main Image class when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        mainImageClassName={"sample_class"}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-root");
+    const mainImageDiv = component.firstChild;
+    expect(mainImageDiv).toHaveClass("sample_class");
+  });
+
+  test("should apply main Image styles when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        mainImageStyles={{ border: "2px solid brown" }}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-root");
+    const mainImageDiv = component.firstChild;
+    expect(mainImageDiv).toHaveStyle("border: 2px solid brown");
+  });
+
+  test("should apply mini Image class when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        miniImageClassname={"sample_mini_class"}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const miniImages = component.childNodes;
+
+    miniImages.forEach((mini) => {
+      expect(mini).toHaveClass("sample_mini_class");
+    });
+  });
+
+  test("should apply mini Image styles when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        miniImageStyles={{ border: "2px solid brown" }}
+      />
+    );
+
+    const component = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const miniImages = component.childNodes;
+
+    miniImages.forEach((mini) => {
+      expect(mini).toHaveStyle("border: 2px solid brown");
+    });
+  });
+
+  test("should apply custom selected class on the correct mini image when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        miniImageSelectedClassName="sample_selected_mini_image_className"
+      />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+
+    fireEvent.click(scrollBoxChildren[2]);
+
+    const scrollboxUpdated = screen.queryByTestId(
+      "multi-image-viewer-scrollbox"
+    );
+    const scrollBoxUpdatedChildren = scrollboxUpdated.childNodes;
+
+    // debug();
+    scrollBoxUpdatedChildren.forEach((e, idx) => {
+      if (idx === 2) {
+        expect(e).toHaveClass("sample_selected_mini_image_className");
+      } else {
+        expect(e).not.toHaveClass("sample_selected_mini_image_className");
+      }
+    });
+  });
+
+  test("should apply custom selected styles on the correct mini image when provided as prop", () => {
+    const { debug } = render(
+      <MultiImageViewer
+        imageObjects={sampleImageObjects}
+        miniImageSelectedStyles={{ border: "2px solid green" }}
+      />
+    );
+
+    const scrollbox = screen.queryByTestId("multi-image-viewer-scrollbox");
+    const scrollBoxChildren = scrollbox.childNodes;
+
+    fireEvent.click(scrollBoxChildren[2]);
+
+    const scrollboxUpdated = screen.queryByTestId(
+      "multi-image-viewer-scrollbox"
+    );
+    const scrollBoxUpdatedChildren = scrollboxUpdated.childNodes;
+
+    // debug();
+    scrollBoxUpdatedChildren.forEach((e, idx) => {
+      if (idx === 2) {
+        expect(e).toHaveStyle("border: 2px solid green");
+      } else {
+        expect(e).not.toHaveStyle("border: 2px solid green");
+      }
+    });
+  });
+});

package/src/components/Images/Multi-Image-Viewer/index.ts

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

package/src/components/Images/Multi-Image-Viewer/stories/Multi-Image-Viewer.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { View } from "@components/Containers/View";
+import {
+  IMultiImageViewerProps,
+  MultiImageViewer,
+} from "@components/Images/Multi-Image-Viewer";
+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: "Images/Multi Image Viewer",
+  component: MultiImageViewer,
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A component to view multiple images. 
+            
+            It utilizes the Image and HorizontalScrollContainer components, but with local state management features.
+
+            It supports Margin props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof MultiImageViewer>;
+
+const ComponentTemplate: ComponentStory<typeof MultiImageViewer> = (args) => {
+  const templateArgs = {
+    mb: 5,
+    imageObjects: [
+      {
+        path: "image-example.jpg",
+      },
+      {
+        path: "image-example-2.jpg",
+      },
+      {
+        path: "image-example-3.jpg",
+      },
+      {
+        path: "image-example.jpg",
+      },
+    ],
+    defaultImagePath: "fallback-image-example.jpg",
+    ...args,
+  } as IMultiImageViewerProps;
+  return <MultiImageViewer {...templateArgs} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithOnClick = ComponentTemplate.bind({});
+WithOnClick.args = {
+  clickable: "zoomIn",
+  onClickImage: () => {
+    alert("Main Image has been clicked");
+  },
+};
+
+export const WithContainerClass = ComponentTemplate.bind({});
+WithContainerClass.args = {
+  rootClassName: "multiImageViewer_story_sample",
+};
+
+export const WithContainerStyles = ComponentTemplate.bind({});
+WithContainerStyles.args = {
+  rootStyles: {
+    border: "2px solid grey",
+    borderRadius: "14px",
+  },
+};
+
+export const UsingCustomWidthViaStyles = ComponentTemplate.bind({});
+UsingCustomWidthViaStyles.args = {
+  rootStyles: {
+    border: "2px solid grey",
+    borderRadius: "14px",
+    width: "420px",
+  },
+};
+
+export const WithMiniImageStyles = ComponentTemplate.bind({});
+WithMiniImageStyles.args = {
+  miniImageStyles: {
+    border: "2px solid red",
+  },
+};
+
+export const WithMiniSelectedImageStyles = ComponentTemplate.bind({});
+WithMiniSelectedImageStyles.args = {
+  miniImageSelectedStyles: {
+    border: "3px solid green",
+    borderRadius: "25px",
+  },
+};
+
+export const WithMiniSelectedImageClassName = ComponentTemplate.bind({});
+WithMiniSelectedImageClassName.args = {
+  miniImageSelectedClassName: "multiImageViewer_story_sample_selected",
+};
+
+export const NavigationViaExternalComponent = () => {
+  const imageObjs = [
+    {
+      path: "image-example.jpg",
+    },
+    {
+      path: "image-example-2.jpg",
+    },
+    {
+      path: "image-example-3.jpg",
+    },
+    {
+      path: "image-example.jpg",
+    },
+  ];
+  const [viewedIndex, setViewedIndex] = useState<number>(0);
+  return (
+    <View>
+      <h3>Current viewed index: {viewedIndex}</h3>
+      <button
+        onClick={() => {
+          if (viewedIndex > 0) {
+            setViewedIndex(viewedIndex - 1);
+          }
+        }}
+      >
+        Prev
+      </button>
+      <button
+        onClick={() => {
+          if (viewedIndex < imageObjs.length - 1) {
+            setViewedIndex(viewedIndex + 1);
+          }
+        }}
+      >
+        Next
+      </button>
+      <MultiImageViewer
+        mv={5}
+        imageObjects={imageObjs}
+        indexOverride={viewedIndex}
+        setIndexOverride={setViewedIndex}
+        defaultImagePath="fallback-image-example.jpg"
+      />
+    </View>
+  );
+};

package/src/components/Images/Multi-Image-Viewer/stories/storiesStyle.scss

@@ -0,0 +1,8 @@
+.multiImageViewer_story_sample {
+  border: 2px solid red;
+}
+
+.multiImageViewer_story_sample_selected {
+  border: 3px solid orange;
+  border-radius: 25px;
+}

package/src/components/Images/Multi-Image-Viewer/styles/Multi-Image-Viewer.layout.scss

@@ -0,0 +1,29 @@
+.multiImageViewer_container {
+  // border: 2px solid red;
+  overflow: hidden;
+  padding: $padding-xxxsmall;
+  width: 364px;
+}
+
+.multiImageViewer_mainImage {
+  // border: 2px solid blue;
+  // width is inherited
+  height: 320px;
+}
+
+.multiImageViewer_mainImage_multi {
+  border-bottom: none;
+}
+
+.multiImageViewer_miniImage {
+  //   border: 1px solid green;
+  display: inline-block;
+  width: 104px;
+  height: 92px;
+}
+
+.multiImageViewer_miniImage_selected {
+  border-style: solid;
+  border-width: 3px;
+  cursor: default;
+}

package/src/components/Images/Multi-Image-Viewer/styles/Multi-Image-Viewer.theme.scss

@@ -0,0 +1,3 @@
+.multiImageViewer_miniImage_selected_theme_light {
+  border-color: $primary-grey-dark;
+}

package/src/components/Images/index.ts

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export * from "./Hero";
+export * from "./Image";
+export * from "./Multi-Image-Viewer";

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

@@ -0,0 +1,77 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Component-Loader.layout.scss";
+import "./styles/Component-Loader.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export type LoaderSize = "small" | "medium" | "large";
+
+export interface ILoaderProps extends IComponent, IThemeProps {
+  type?: "default" | "fullscreen";
+  text?: string;
+  size?: LoaderSize;
+  iconContainerClassName?: string;
+  iconContainerStyles?: React.CSSProperties;
+}
+
+export const Loader = ({
+  type = "default",
+  text,
+  size = "small",
+  rootClassName,
+  iconContainerClassName,
+  rootStyles = {},
+  iconContainerStyles,
+  theme = "light",
+}: ILoaderProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        componentLoader_container: true,
+        componentLoader_container_fullscreen: type === "fullscreen",
+      },
+      rootClassName
+    ),
+    createThemeStyles("componentLoader_container_theme_", theme)
+  );
+
+  const loaderStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        componentLoader_icon_container: true,
+        componentLoader_icon_container_mb:
+          typeof text === "string" && text !== "",
+        spin: true,
+        [`componentLoader_icon_size_${size}`]: true,
+      },
+      iconContainerClassName
+    ),
+    createThemeStyles("componentLoader_loader_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="component-loader-root"
+    >
+      <div
+        className={loaderStyles}
+        style={iconContainerStyles}
+        data-testid="component-loader-icon-container"
+      />
+      {text && <p>{text}</p>}
+    </div>
+  );
+};

package/src/components/Loaders/Loader/__test__/Loader.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Loader } from "@components/Loaders/Loader";
+
+describe("Generic Loader Unit Tests", () => {
+  test("should render parent and itself without error", () => {
+    const { debug } = render(
+      <div
+        data-testid="component-loader-parent-test"
+        style={{ width: "200px", height: "200px", position: "relative" }}
+      >
+        <Loader />
+        <p>This is a sample component</p>
+      </div>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("component-loader-root");
+    expect(component).toBeTruthy();
+
+    const loader = screen.queryByTestId("component-loader-icon-container");
+    expect(loader).toBeTruthy();
+
+    const parent = screen.queryByTestId("component-loader-parent-test");
+    expect(parent).toBeTruthy();
+  });
+
+  test("should have custom container rootClassName when passed as props", () => {
+    render(
+      <div style={{ width: "200px", height: "200px", position: "relative" }}>
+        <Loader rootClassName="custom_loader_class_test" />
+        <p>This is a sample component</p>
+      </div>
+    );
+
+    const component = screen.queryByTestId("component-loader-root");
+    expect(component).toHaveClass("custom_loader_class_test");
+  });
+
+  test("should have custom icon container classname when passed as props", () => {
+    render(
+      <div style={{ width: "200px", height: "200px", position: "relative" }}>
+        <Loader iconContainerClassName="custom_icon_container_class_test" />
+        <p>This is a sample component</p>
+      </div>
+    );
+
+    const component = screen.queryByTestId("component-loader-icon-container");
+    expect(component).toHaveClass("custom_icon_container_class_test");
+  });
+});

package/src/components/Loaders/Loader/index.ts

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