reso-ui 1.1.0

package/src/components/Containers/Horizontal-Scroll-Item/Horizontal-Scroll-Item.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IPaddingProps, IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Horizontal-Scroll-Item.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IHSIProps extends IComponent, IPaddingProps, IMarginProps {
+  children: React.ReactNode;
+}
+
+export const HorizontalScrollItem = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+  ...spacingsProps
+}: IHSIProps) => {
+  const ItemStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          hsi_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    )
+  );
+
+  return (
+    <div
+      className={ItemStyles}
+      style={rootStyles}
+      data-testid="horizontal-scroll-item-root"
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Containers/Horizontal-Scroll-Item/__test__/Horizontal-Scroll-Item.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { HorizontalScrollItem } from "@components/Containers/Horizontal-Scroll-Item";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="hsi-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Horizontal Scoll Item Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <HorizontalScrollItem>
+        <SampleComponent />
+      </HorizontalScrollItem>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("horizontal-scroll-item-root");
+    expect(component).toBeTruthy();
+
+    const child = screen.queryByTestId("hsi-container-child-test");
+    expect(child).toBeTruthy();
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <HorizontalScrollItem rootClassName="sample_class">
+        <SampleComponent />
+      </HorizontalScrollItem>
+    );
+
+    const component = screen.queryByTestId("horizontal-scroll-item-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <HorizontalScrollItem rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </HorizontalScrollItem>
+    );
+
+    const component = screen.queryByTestId("horizontal-scroll-item-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Containers/Horizontal-Scroll-Item/index.ts

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

package/src/components/Containers/Horizontal-Scroll-Item/stories/Horizontal-Scroll-Item.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { HorizontalScrollItem } from "@components/Containers/Horizontal-Scroll-Item";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Containers/Horizontal Scroll Item",
+  component: HorizontalScrollItem,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component suited for the Horizontal Scroll Container.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof HorizontalScrollItem>;
+
+const ComponentTemplate: ComponentStory<typeof HorizontalScrollItem> = (
+  args
+) => (
+  <HorizontalScrollItem {...args}>
+    <div
+      style={{
+        width: "200px",
+        height: "200px",
+        border: "2px solid red",
+      }}
+    >
+      sample child
+    </div>
+  </HorizontalScrollItem>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  rootStyles: {
+    border: "2px solid blue",
+  },
+};
+
+export const withPaddingProps = ComponentTemplate.bind({});
+withPaddingProps.args = {
+  rootStyles: {
+    border: "2px solid blue",
+  },
+  pa: 5,
+};

package/src/components/Containers/Horizontal-Scroll-Item/styles/Horizontal-Scroll-Item.layout.scss

@@ -0,0 +1,5 @@
+.hsi_container {
+  // border: 2px solid green;
+  display: inline-block;
+  width: fit-content;
+}

package/src/components/Containers/Loading-Container/Loading-Container.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+import { Loader } from "@components/Loaders/Loader";
+import { ComponentError } from "@components/Errors/Component-Error";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Loading-Container.layout.scss";
+
+// utils
+import { createComponentStyles, createLayoutStyles } from "@utils/styles";
+
+export interface ILoadingContainerProps extends IComponent, IThemeProps {
+  type: "layer" | "conditional";
+  loading?: boolean;
+  children: React.ReactNode;
+  error?: string;
+  minHeight?: string;
+  componentLoaderClassName?: string;
+  componentLoaderStyles?: React.CSSProperties;
+  componentErrorClassName?: string;
+  componentErrorStyles?: React.CSSProperties;
+}
+
+export const LoadingContainer = ({
+  type,
+  loading = false,
+  children,
+  error,
+  minHeight = "fit-content",
+  rootClassName,
+  rootStyles = {},
+  componentLoaderClassName,
+  componentLoaderStyles = {},
+  componentErrorClassName,
+  componentErrorStyles = {},
+  theme,
+}: ILoadingContainerProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        [`loadingContainer_container_${type}`]: true,
+      },
+      rootClassName,
+      { position_relative: true }
+    )
+  );
+
+  const containerMinHeight = type === "layer" ? minHeight : "inherit";
+
+  return (
+    <div
+      className={containerStyles}
+      style={{ ...rootStyles, minHeight: containerMinHeight }}
+      data-testid="loading-container-root"
+    >
+      {type === "layer" ? (
+        <>
+          {loading ? (
+            <Loader
+              theme={theme}
+              rootClassName={componentLoaderClassName}
+              rootStyles={componentLoaderStyles}
+            />
+          ) : error ? (
+            <ComponentError
+              theme={theme}
+              text={error}
+              rootClassName={componentErrorClassName}
+              rootStyles={componentErrorStyles}
+            />
+          ) : null}
+          {children}
+        </>
+      ) : (
+        <>
+          {error ? (
+            <ComponentError
+              theme={theme}
+              text={error}
+              rootClassName={componentErrorClassName}
+              rootStyles={componentErrorStyles}
+            />
+          ) : loading ? (
+            <Loader
+              theme={theme}
+              rootClassName={componentLoaderClassName}
+              rootStyles={componentLoaderStyles}
+            />
+          ) : (
+            children
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/Containers/Loading-Container/__test__/Loading-Container.test.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { LoadingContainer } from "@components/Containers/Loading-Container";
+import * as ComponentLoaderModule from "@components/Loaders/Loader/Loader";
+import * as ComponentErrorModule from "@components/Errors/Component-Error/Component-Error";
+
+const SampleChildComponent = () => {
+  return (
+    <div data-testid="loading-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Loading Container Component Unit Tests", () => {
+  beforeEach(() => {
+    jest.spyOn(ComponentLoaderModule, "Loader").mockImplementation((props) => {
+      const { rootClassName, rootStyles } = props;
+
+      return (
+        <div
+          data-testid="loading-container-loader-mock"
+          className={rootClassName}
+          style={rootStyles}
+        >
+          Loader Mock
+        </div>
+      );
+    });
+
+    jest
+      .spyOn(ComponentErrorModule, "ComponentError")
+      .mockImplementation((props) => {
+        const { rootClassName, rootStyles, text } = props;
+
+        return (
+          <div
+            data-testid="loading-container-error-mock"
+            className={rootClassName}
+            style={rootStyles}
+          >
+            {text && text}
+          </div>
+        );
+      });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("ClassName and Styles", () => {
+    test("should render itself with correct className when passed as prop", () => {
+      const { debug } = render(
+        <LoadingContainer
+          type="layer"
+          loading={true}
+          rootClassName="sample_class_name"
+        >
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toHaveClass("sample_class_name");
+    });
+
+    test("should render itself with styles when passed as prop", () => {
+      const { debug } = render(
+        <LoadingContainer
+          type="layer"
+          loading={true}
+          rootStyles={{ border: "2px solid red" }}
+        >
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+  });
+
+  describe("Layer Type", () => {
+    test("should render correct component type based on className", () => {
+      const { debug } = render(
+        <LoadingContainer type="layer" loading={true}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toHaveClass("loadingContainer_container_layer");
+    });
+
+    test("should render itself and children, and show loader without error", () => {
+      const { debug } = render(
+        <LoadingContainer type="layer" loading={true}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toBeInTheDocument();
+
+      const child = screen.queryByTestId("loading-container-child-test");
+      expect(child).toBeInTheDocument();
+
+      const loader = screen.queryByTestId("loading-container-loader-mock");
+      expect(loader).toBeInTheDocument();
+
+      const error = screen.queryByTestId("loading-container-error-mock");
+      expect(error).not.toBeInTheDocument();
+    });
+
+    test("should render itself and children, and show error without loader", () => {
+      const { debug } = render(
+        <LoadingContainer type="layer" error={"Oops"}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toBeInTheDocument();
+
+      const child = screen.queryByTestId("loading-container-child-test");
+      expect(child).toBeInTheDocument();
+
+      const loader = screen.queryByTestId("loading-container-loader-mock");
+      expect(loader).not.toBeInTheDocument();
+
+      const error = screen.queryByTestId("loading-container-error-mock");
+      expect(error).toBeInTheDocument();
+    });
+  });
+
+  describe("Conditional Type", () => {
+    test("should render correct component type based on className", () => {
+      const { debug } = render(
+        <LoadingContainer type="conditional" loading={true}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toHaveClass("loadingContainer_container_conditional");
+    });
+
+    test("should render itself and show loader without error and without rendering children", () => {
+      const { debug } = render(
+        <LoadingContainer type="conditional" loading={true}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toBeInTheDocument();
+
+      const loader = screen.queryByTestId("loading-container-loader-mock");
+      expect(loader).toBeInTheDocument();
+
+      const child = screen.queryByTestId("loading-container-child-test");
+      expect(child).not.toBeInTheDocument();
+
+      const error = screen.queryByTestId("loading-container-error-mock");
+      expect(error).not.toBeInTheDocument();
+    });
+
+    test("should render itself and show error without loader and without rendering children", () => {
+      const { debug } = render(
+        <LoadingContainer type="conditional" error={"Oops"}>
+          <SampleChildComponent />
+        </LoadingContainer>
+      );
+
+      // debug();
+      const component = screen.queryByTestId("loading-container-root");
+      expect(component).toBeInTheDocument();
+
+      const error = screen.queryByTestId("loading-container-error-mock");
+      expect(error).toBeInTheDocument();
+
+      const child = screen.queryByTestId("loading-container-child-test");
+      expect(child).not.toBeInTheDocument();
+
+      const loader = screen.queryByTestId("loading-container-loader-mock");
+      expect(loader).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/Containers/Loading-Container/index.ts

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

package/src/components/Containers/Loading-Container/stories/Loading-Container.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { LoadingContainer } from "@components/Containers/Loading-Container";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Containers/Loading Container",
+  component: LoadingContainer,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A wrapper component that shows a \`ComponentLoader\` when the child component is fetching some data,
+            and \`ComponentError\` when there is an error with the fetching.
+
+            It has two types:
+
+            ## 1. Layer
+            
+            1. The Loader/Error is placed *ON TOP* of the child component. This is suitable if you are loading a Table or Grid.
+
+            2. The Width and Height of this wrapper type takes the width and height of its *CHILD*. (aka \`width: fit-content\`)
+
+            ## 2. Conditional
+            
+            1. The Loader/Error *REPLACES* the child component. This is suitable when you are loading a Page.
+
+            2. The Width and Height of this wrapper type takes the width and height of its *PARENT*. (aka \`width: inherit\`).
+            This is therefore advisable to have a View or a Body element enclosing this wrapper type.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof LoadingContainer>;
+
+const ComponentTemplateLayer: ComponentStory<typeof LoadingContainer> = (
+  args
+) => (
+  <LoadingContainer {...args}>
+    <div
+      style={{
+        border: "2px solid red",
+        width: "300px",
+        height: "300px",
+      }}
+    >
+      Sample Component Underneath
+    </div>
+  </LoadingContainer>
+);
+
+const ComponentTemplateConditional: ComponentStory<typeof LoadingContainer> = (
+  args
+) => (
+  <div style={{ width: "100%", height: "420px" }}>
+    <LoadingContainer {...args}>
+      <div
+        style={{
+          border: "2px solid red",
+          width: "300px",
+          height: "300px",
+          margin: "0 auto",
+        }}
+      >
+        Sample Component Underneath
+      </div>
+    </LoadingContainer>
+  </div>
+);
+
+export const LayeringALoadingComponent = ComponentTemplateLayer.bind({});
+LayeringALoadingComponent.args = {
+  type: "layer",
+  loading: true,
+};
+
+export const LayeringAnErronousComponent = ComponentTemplateLayer.bind({});
+LayeringAnErronousComponent.args = {
+  type: "layer",
+  error: "Oops Something went wrong",
+};
+
+export const LayeringALoadingComponentWithMinHeight =
+  ComponentTemplateLayer.bind({});
+LayeringALoadingComponentWithMinHeight.args = {
+  type: "layer",
+  loading: true,
+  minHeight: "320px",
+};
+
+export const ConditionalLoadingComponent = ComponentTemplateConditional.bind(
+  {}
+);
+ConditionalLoadingComponent.args = {
+  type: "conditional",
+  loading: true,
+};
+
+export const ConditionalErronousComponent = ComponentTemplateConditional.bind(
+  {}
+);
+ConditionalErronousComponent.args = {
+  type: "conditional",
+  error: "Oops Something went wrong",
+};

package/src/components/Containers/Loading-Container/styles/Loading-Container.layout.scss

@@ -0,0 +1,13 @@
+.loadingContainer_container_layer {
+  width: fit-content;
+}
+
+.loadingContainer_container_conditional {
+  width: inherit;
+  min-width: inherit;
+  max-width: inherit;
+
+  height: inherit;
+  min-height: inherit;
+  max-height: inherit;
+}

package/src/components/Containers/View/View.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IPaddingProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/View.layout.scss";
+import "./styles/View.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+import IThemeProps from "@interfaces/Theme";
+
+export interface IViewProps extends IComponent, IPaddingProps, IThemeProps {
+  children: React.ReactNode;
+}
+
+export const View = ({
+  rootClassName,
+  children,
+  rootStyles = {},
+  theme = "light",
+  ...paddingProps
+}: IViewProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          viewContainer_container: true,
+        },
+        paddingProps
+      ),
+      rootClassName,
+      {
+        position_relative: true,
+        width_full: true,
+      }
+    ),
+    createThemeStyles("viewContainer_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="view-container-root"
+    >
+      {children}
+    </div>
+  );
+};