reso-ui 1.1.0

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// !! IMPORT OTHER COMPONENTS FIRST BEFORE IMPORTING STYLE FILES
+
+// styles
+import "./styles/Icon.layout.scss";
+// import "./styles/Example.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IIconProps extends IComponent, IThemeProps, IMarginProps {
+  SvgIcon: (props: React.SVGProps<SVGElement>) => React.ReactElement;
+  width?: number | string;
+  height?: number | string;
+  fill?: string;
+  stroke?: string;
+  inline?: boolean;
+}
+
+export const Icon = ({
+  SvgIcon,
+  width = 32,
+  height = 32,
+  inline = false,
+  fill = "#434B59",
+  stroke = "current",
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IIconProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          icon_container: true,
+          icon_container_inline: inline,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    )
+  );
+
+  return (
+    <div
+      data-testid="icon-root"
+      className={containerClasses}
+      style={rootStyles}
+    >
+      <SvgIcon
+        data-testid="icon-svg-icon"
+        width={width}
+        height={height}
+        fill={fill}
+        stroke={stroke}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Icon } from "@components/Icon";
+import { HomeIcon } from "@icons";
+
+describe("Icon Container Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<Icon SvgIcon={HomeIcon} />);
+
+    // debug();
+    const componentContainer = screen.queryByTestId("icon-root");
+    const componentSvg = screen.queryByTestId("icon-svg-icon");
+
+    expect(componentContainer).toBeInTheDocument();
+    expect(componentContainer).toContainElement(componentSvg);
+  });
+
+  test("should apply default className when provided as prop", () => {
+    const { debug } = render(<Icon SvgIcon={HomeIcon} />);
+
+    const component = screen.queryByTestId("icon-root");
+    expect(component).toHaveClass("icon_container");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      <Icon SvgIcon={HomeIcon} rootClassName="sample_class" />
+    );
+
+    const component = screen.queryByTestId("icon-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    const { debug } = render(
+      <Icon SvgIcon={HomeIcon} rootStyles={{ border: "2px solid red" }} />
+    );
+
+    const component = screen.queryByTestId("icon-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply margin classes when provided as prop", () => {
+    const { debug } = render(<Icon SvgIcon={HomeIcon} ma={5} />);
+
+    const component = screen.queryByTestId("icon-root");
+    expect(component).toHaveClass("spacing-ma-5");
+  });
+
+  test("should apply inline classes when provided as prop", () => {
+    const { debug } = render(<Icon SvgIcon={HomeIcon} inline />);
+
+    const component = screen.queryByTestId("icon-root");
+    expect(component).toHaveClass("icon_container_inline");
+  });
+});

package/src/components/Icon/index.ts

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

package/src/components/Icon/stories/Icon.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Icon } from "@components/Icon";
+import { HomeIcon } from "@icons";
+import { Flex } from "@components/Containers/Flex";
+// 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: "Components/Icon",
+  component: Icon,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A wrapper for an icon SVG.
+
+            It supports Margin props.
+
+            It requires an SVG Functional Component for the [SvgIcon] prop. You can use our built-in icons, or provide your own.
+
+            If you are using Typescript and svgr/webpack, the SVG is normally imported like this:
+
+            \`import HomeIcon from "./svg/home.svg";\`
+
+            or if you are not on Typescript, they are normally imported like this:
+
+            \`import { ReactComponent as HomeIcon } from "./svg/home.svg";\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Icon>;
+
+const ComponentTemplate: ComponentStory<typeof Icon> = (args) => {
+  const storyProps = {
+    SvgIcon: HomeIcon,
+    ...args,
+  };
+  return <Icon {...storyProps} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithCustomDimensions = ComponentTemplate.bind({});
+WithCustomDimensions.args = {
+  rootStyles: {
+    border: "2px solid blue",
+  },
+  width: 42,
+  height: 42,
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    border: "2px solid blue",
+    background: "yellow",
+  },
+};
+
+export const PassingSvgIcon = () => {
+  // import { HomeIcon } from "src/icons/your path";
+  return <Icon SvgIcon={HomeIcon} />;
+};
+
+export const InlineIcon = () => {
+  // container
+  // import { Flex } from "@components/Containers/Flex";
+
+  // Icon
+  // import { Icon } from "@components/Icon";
+  // import { HomeIcon } from "@icons";
+  return (
+    <Flex
+      justify="start"
+      ph={2}
+      rootStyles={{
+        width: "200px",
+        height: "42px",
+        border: "2px solid grey",
+        borderRadius: "5px",
+      }}
+    >
+      <Icon SvgIcon={HomeIcon} inline mr={2} />
+      Example
+    </Flex>
+  );
+};

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

@@ -0,0 +1,8 @@
+.icon_container {
+  // border: 1px solid red;
+  display: block;
+}
+
+.icon_container_inline {
+  display: inline-block;
+}

package/src/components/Images/Hero/Hero.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { Image } from "@components/Images/Image";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Hero.layout.scss";
+
+// utils
+import { createComponentStyles, createLayoutStyles } from "@utils/styles";
+
+export interface IHeroProps extends IComponent, IMarginProps {
+  src: string;
+  alt?: string;
+  fullWidth?: boolean;
+  imgClassName?: string;
+  imgStyles?: React.CSSProperties;
+}
+
+export const Hero = ({
+  src,
+  alt = "RESO Hero Image",
+  fullWidth = false,
+  rootClassName,
+  imgClassName,
+  rootStyles = {},
+  imgStyles = {},
+  ...spacingsProps
+}: IHeroProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        hero_container: true,
+        hero_container_fullWidth: fullWidth,
+      },
+      rootClassName,
+      {
+        position_relative: true,
+        // width_full does not work here because both [Image] and [Hero] styles overrides the global [width] style
+      }
+    )
+  );
+
+  return (
+    <Image
+      rootClassName={containerStyles}
+      rootStyles={rootStyles}
+      src={src}
+      alt={alt}
+      imgClassName={imgClassName}
+      imgStyles={imgStyles}
+      mh={fullWidth ? 0 : "center"}
+      {...spacingsProps}
+    />
+  );
+};

package/src/components/Images/Hero/__test__/Hero.test.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Hero } from "@components/Images/Hero";
+
+// import from index does not work for jest.spyOn
+import * as ImageModule from "@components/Images/Image/Image";
+
+describe("Hero Component Unit Tests", () => {
+  beforeEach(() => {
+    jest.spyOn(ImageModule, "Image").mockImplementation((props) => {
+      const { src, alt, rootClassName, imgClassName, rootStyles, imgStyles } =
+        props;
+
+      return (
+        <div
+          data-testid="hero-component-container-mock"
+          className={rootClassName}
+          style={rootStyles}
+        >
+          <img
+            data-testid="hero-component-img-mock"
+            src={src}
+            alt={alt}
+            className={imgClassName}
+            style={imgStyles}
+          />
+        </div>
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const defaultProps = {
+    src: "image-example.jpg",
+  };
+
+  test("should render without crashing", () => {
+    const { debug } = render(<Hero {...defaultProps} />);
+    // debug();
+    const component = screen.queryByTestId("hero-component-container-mock");
+    expect(component).toBeTruthy();
+  });
+
+  test("should apply container class when provided as prop", () => {
+    const testProps = {
+      ...defaultProps,
+      rootClassName: "hero_sample_className",
+    };
+    const { debug } = render(<Hero {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("hero-component-container-mock");
+    expect(component).toHaveClass("hero_sample_className");
+  });
+
+  test("should apply container styles when provided as prop", () => {
+    const testProps = {
+      ...defaultProps,
+      rootStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<Hero {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("hero-component-container-mock");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply fullWidth class when provided as prop", () => {
+    const testProps = {
+      ...defaultProps,
+      fullWidth: true,
+    };
+    const { debug } = render(<Hero {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("hero-component-container-mock");
+    expect(component).toHaveClass("hero_container_fullWidth");
+  });
+
+  test("should apply img class when provided as prop", () => {
+    const testProps = {
+      ...defaultProps,
+      imgClassName: "hero_img_sample_className",
+    };
+    const { debug } = render(<Hero {...testProps} />);
+
+    // debug();
+    const component = screen.queryByTestId("hero-component-img-mock");
+    expect(component).toHaveClass("hero_img_sample_className");
+  });
+
+  test("should apply img styles when provided as prop", () => {
+    const testProps = {
+      ...defaultProps,
+      imgStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<Hero {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("hero-component-img-mock");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Images/Hero/index.ts

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

package/src/components/Images/Hero/stories/Hero.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Hero } from "@components/Images/Hero";
+import "./storyStyles.scss";
+
+import dedent from "ts-dedent";
+
+export default {
+  title: "Images/Hero",
+  component: Hero,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A Hero image component, basically a styled \`Image\` component.
+
+            By default, it has a max-width of 1280px. If you wish to extend it to full width of browser,
+            you can use the *fullWidth* prop.
+
+            The parent of this component must have \`display: block\`, and NOT \`display: flex\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Hero>;
+
+const ComponentTemplate: ComponentStory<typeof Hero> = (args) => (
+  <Hero {...args} />
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {
+  src: "/hero-example.jpg",
+};
+
+export const WithContainerClass = ComponentTemplate.bind({});
+WithContainerClass.args = {
+  src: "/hero-example.jpg",
+  rootClassName: "hero_custom_story",
+};
+
+export const FullWidth = ComponentTemplate.bind({});
+FullWidth.args = {
+  src: "/hero-example.jpg",
+  fullWidth: true,
+};

package/src/components/Images/Hero/stories/storyStyles.scss

@@ -0,0 +1,3 @@
+.hero_custom_story {
+  border: 2px solid green;
+}

package/src/components/Images/Hero/styles/Hero.layout.scss

@@ -0,0 +1,13 @@
+.hero_container {
+  width: unset;
+  max-width: $max-width-screen-lg;
+  min-height: 320px;
+  // min-height is required to enable
+  // ComponentLoader to show correctly
+  max-height: 410px;
+}
+
+.hero_container_fullWidth {
+  max-width: none;
+  width: 100%;
+}

package/src/components/Images/Image/Image.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+
+import { Loader, LoaderSize } from "@components/Loaders/Loader";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+import ImageClickable from "@interfaces/ImageClickable";
+
+// styles
+import "./styles/Image.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+import { methodHasValue } from "@utils/validations";
+
+export interface IImageProps extends IComponent, IMarginProps {
+  onClick?: () => void;
+  clickable?: ImageClickable;
+  loaderSize?: LoaderSize;
+  src: string;
+  imgClassName?: string;
+  imgStyles?: React.CSSProperties;
+  inheritWidth?: boolean;
+  objectFit?: "cover" | "contain" | "fill";
+  alt?: string;
+  fallbacks?: string[];
+}
+
+export const Image = ({
+  onClick,
+  clickable,
+  loaderSize = "small",
+  src,
+  alt = "RESO Image",
+  imgClassName,
+  objectFit = "fill",
+  rootClassName,
+  rootStyles = {},
+  fallbacks = [],
+  imgStyles = {},
+  inheritWidth = false,
+  ...spacingsProps
+}: IImageProps) => {
+  const [fallbackIndex, setFallbackIndex] = useState(-1);
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [error, setError] = useState<boolean>(false);
+
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          image_container: true,
+          image_container_inheritWidth: inheritWidth,
+          [`image_container_clickable_${clickable}`]: !!clickable,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        position_relative: true,
+      }
+    )
+  );
+
+  const imgClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        image_img: true,
+        [`image_img_fit-${objectFit}`]: true,
+      },
+
+      imgClassName
+    )
+  );
+
+  const hasFallbacks = fallbacks && fallbacks.length > 0;
+  const imgSource =
+    hasFallbacks && fallbackIndex > -1 ? fallbacks[fallbackIndex] : src;
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      onClick={() => {
+        if (onClick && methodHasValue(onClick)) {
+          onClick();
+        }
+      }}
+      data-testid="image-component-root"
+    >
+      {error ? (
+        <p data-testid="image-component-error">{`Unable to load ${alt}`}</p>
+      ) : (
+        <>
+          {!loaded && <Loader size={loaderSize} />}
+          {
+            <img
+              data-testid="image-component-img"
+              style={
+                loaded ? { ...imgStyles } : { ...imgStyles, display: "none" }
+              }
+              alt={alt}
+              src={imgSource}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
+              onError={() => {
+                if (hasFallbacks) {
+                  setLoaded(false);
+                  if (fallbackIndex < fallbacks.length - 1) {
+                    setFallbackIndex(fallbackIndex + 1);
+                  } else {
+                    setLoaded(true);
+                    setError(true);
+                  }
+                } else {
+                  setLoaded(true);
+                  setError(true);
+                }
+              }}
+              className={imgClasses}
+            />
+          }
+        </>
+      )}
+    </div>
+  );
+};