reso-ui 1.1.0

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ComponentError } from "@components/Errors/Component-Error";
+
+describe("Component Error Unit Tests", () => {
+  test("should render without crashing", () => {
+    const { debug } = render(
+      <div
+        data-testid="component-error-sample-parent"
+        style={{
+          height: "300px",
+          width: "300px",
+          position: "relative",
+        }}
+      >
+        <ComponentError />
+      </div>
+    );
+    // debug();
+    const component = screen.queryByTestId("component-error-root");
+    expect(component).toBeTruthy();
+  });
+
+  test("should render text when provided as prop", () => {
+    const { debug } = render(<ComponentError text="sample" />);
+    // debug();
+    const component = screen.queryByTestId("component-error-text");
+    expect(component).toBeTruthy();
+  });
+
+  test("should apply container rootClassName when provided as prop", () => {
+    const testProps = {
+      rootClassName: "component_error_sample_className",
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("component-error-root");
+    expect(component).toHaveClass("component_error_sample_className");
+  });
+
+  test("should apply container rootStyles when provided as prop", () => {
+    const testProps = {
+      rootStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("component-error-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply icon class when provided as prop", () => {
+    const testProps = {
+      iconClassName: "component_error_sample_icon",
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("component-error-icon");
+    expect(component).toHaveClass("component_error_sample_icon");
+  });
+
+  test("should apply container styles when provided as prop", () => {
+    const testProps = {
+      iconStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("component-error-icon");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply text class when provided as prop", () => {
+    const testProps = {
+      textClassName: "ComponentError_text_sample_className",
+      text: "sample",
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+
+    // debug();
+    const component = screen.queryByTestId("component-error-text");
+    expect(component).toHaveClass("ComponentError_text_sample_className");
+  });
+
+  test("should apply text styles when provided as prop", () => {
+    const testProps = {
+      textStyles: { border: "2px solid red" },
+      text: "sample",
+    };
+    const { debug } = render(<ComponentError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("component-error-text");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Errors/Component-Error/index.ts

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

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { ComponentError } from "@components/Errors/Component-Error";
+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: "Errors/Component Error",
+  component: ComponentError,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A component to show when there is an error occuring within a component.
+
+            It is absolute-positioned, hence require parent component to have \`position:relative\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ComponentError>;
+
+const ComponentTemplate: ComponentStory<typeof ComponentError> = (args) => (
+  <div
+    style={{
+      height: "300px",
+      width: "300px",
+      border: "1px solid black",
+      position: "relative",
+    }}
+  >
+    <ComponentError {...args} />
+  </div>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithText = ComponentTemplate.bind({});
+WithText.args = {
+  text: "Data failed to be fetched",
+};
+
+export const CustomContainerClassname = ComponentTemplate.bind({});
+CustomContainerClassname.args = {
+  rootClassName: "component_error_story_sample",
+};

package/src/components/Errors/Component-Error/stories/storiesStyle.scss

@@ -0,0 +1,4 @@
+.component_error_story_sample {
+  border: 2px solid green;
+  background-color: orange;
+}

package/src/components/Errors/Component-Error/styles/Component-Error.layout.scss

@@ -0,0 +1,27 @@
+.componentError_container {
+  opacity: 0.9;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.componentError_icon {
+  width: 55px;
+  height: 55px;
+  line-height: 55px;
+  text-align: center;
+  font-size: $font-size-8;
+  font-weight: bold;
+  border-radius: 100px;
+}
+
+.componentError_icon_margin {
+  margin-bottom: $margin-medium;
+}

package/src/components/Errors/Component-Error/styles/Component-Error.theme.scss

@@ -0,0 +1,12 @@
+.componentError_container_theme_light {
+  border: 1px solid $primary-grey-medium-light;
+  background-color: $bg-fullscreenloader;
+}
+.componentError_icon_theme_light {
+  border: 2px solid $red;
+  background-color: $bg-alert-banner-error;
+  color: $white;
+}
+.componentError_text_theme_light {
+  @include theme_nature("light");
+}

package/src/components/Errors/Full-Screen-Error/Full-Screen-Error.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Full-Screen-Error.layout.scss";
+import "./styles/Full-Screen-Error.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+import useDisableBodyScroll from "@hooks/useDisableBodyScroll";
+
+export interface IFullScreenErrorProps extends IComponent, IThemeProps {
+  text?: string;
+  textClassName?: string;
+  textStyles?: React.CSSProperties;
+  iconClassName?: string;
+  iconStyles?: React.CSSProperties;
+}
+
+export const FullScreenError = ({
+  text = "Oops, something went horribly wrong!",
+  rootClassName,
+  rootStyles = {},
+  textClassName,
+  textStyles = {},
+  iconClassName,
+  iconStyles = {},
+  theme = "light",
+}: IFullScreenErrorProps) => {
+  useDisableBodyScroll(true);
+
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        fullScreenError_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("fullScreenError_container_theme_", theme)
+  );
+
+  const iconClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        fullScreenError_icon: true,
+      },
+      iconClassName
+    ),
+    createThemeStyles("fullScreenError_icon_theme_", theme)
+  );
+
+  const textClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        loader_text: true,
+      },
+      textClassName
+    ),
+    createThemeStyles("fullScreenError_text_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="full-screen-error-root"
+    >
+      <div
+        className={iconClasses}
+        style={iconStyles}
+        data-testid="full-screen-error-icon"
+      >
+        !
+      </div>
+      <p
+        className={textClasses}
+        style={textStyles}
+        data-testid="full-screen-error-text"
+      >
+        {text}
+      </p>
+    </div>
+  );
+};

package/src/components/Errors/Full-Screen-Error/__test__/Full-Screen-Error.test.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { FullScreenError } from "@components/Errors/Full-Screen-Error";
+
+describe("Full Screen Error Unit Tests", () => {
+  test("should render without crashing with default text", () => {
+    const { debug } = render(<FullScreenError />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("Oops, something went horribly wrong!");
+  });
+
+  test("should render text when provided as prop", () => {
+    const { debug } = render(<FullScreenError text="test123" />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-text");
+    expect(component).toHaveTextContent("test123");
+  });
+
+  test("should apply container rootClassName when provided as prop", () => {
+    const testProps = {
+      rootClassName: "full_screen_error_sample_className",
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-root");
+    expect(component).toHaveClass("full_screen_error_sample_className");
+  });
+
+  test("should apply container rootStyles when provided as prop", () => {
+    const testProps = {
+      rootStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply icon class when provided as prop", () => {
+    const testProps = {
+      iconClassName: "full_screen_error_sample_icon",
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-icon");
+    expect(component).toHaveClass("full_screen_error_sample_icon");
+  });
+
+  test("should apply container styles when provided as prop", () => {
+    const testProps = {
+      iconStyles: { border: "2px solid red" },
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-icon");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply text class when provided as prop", () => {
+    const testProps = {
+      textClassName: "fullScreenError_text_sample_className",
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-text");
+    expect(component).toHaveClass("fullScreenError_text_sample_className");
+  });
+
+  test("should apply text styles when provided as prop", () => {
+    const testProps = {
+      textStyles: { border: "2px solid red" },
+      text: "sample",
+    };
+    const { debug } = render(<FullScreenError {...testProps} />);
+    // debug();
+    const component = screen.queryByTestId("full-screen-error-text");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Errors/Full-Screen-Error/index.ts

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

package/src/components/Errors/Full-Screen-Error/stories/Full-Screen-Error.stories.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { FullScreenError } from "@components/Errors/Full-Screen-Error";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Errors/Full Screen Error",
+  component: FullScreenError,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            An Error components that overlays everything in the browser, and prevents any further interaction by the user.
+
+            This is normally useful when you have critical system failure happening.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof FullScreenError>;
+
+export const Default = () => {
+  const [showFullScreenError, setShowFullScreenError] =
+    useState<boolean>(false);
+  return (
+    <>
+      {showFullScreenError && <FullScreenError />}
+      <button onClick={() => setShowFullScreenError(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const DefaultWithCustomText = () => {
+  const [showFullScreenError, setShowFullScreenError] =
+    useState<boolean>(false);
+  return (
+    <>
+      {showFullScreenError && <FullScreenError text="Something happened!" />}
+      <button onClick={() => setShowFullScreenError(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const DefaultWithCustomIconStyles = () => {
+  const [showFullScreenError, setShowFullScreenError] =
+    useState<boolean>(false);
+  return (
+    <>
+      {showFullScreenError && (
+        <FullScreenError
+          text="Something happened!"
+          iconStyles={{
+            background: "green",
+            borderColor: "yellow",
+          }}
+        />
+      )}
+      <button onClick={() => setShowFullScreenError(true)}>Show Modal</button>
+    </>
+  );
+};

package/src/components/Errors/Full-Screen-Error/styles/Full-Screen-Error.layout.scss

@@ -0,0 +1,26 @@
+.fullScreenError_container {
+  //   border: 2px solid green;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.fullScreenError_icon {
+  width: 55px;
+  height: 55px;
+  line-height: 55px;
+  text-align: center;
+  border-width: 2px;
+  border-style: solid;
+  margin-bottom: 40px;
+  font-size: $font-size-8;
+  font-weight: bold;
+  border-radius: 100px;
+}

package/src/components/Errors/Full-Screen-Error/styles/Full-Screen-Error.theme.scss

@@ -0,0 +1,7 @@
+.fullScreenError_container_theme_light {
+  @include use_theme($bg-fullscreenloader, "dark");
+}
+.fullScreenError_icon_theme_light {
+  border-color: $red;
+  @include use_theme($bg-alert-banner-error, "dark");
+}

package/src/components/Errors/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+export * from "./Component-Error";
+export * from "./Full-Screen-Error";

package/src/components/Example/Example.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// !! IMPORT OTHER COMPONENTS FIRST BEFORE IMPORTING STYLE FILES
+
+// styles
+import "./styles/Example.layout.scss";
+import "./styles/Example.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IExampleComponent extends IComponent, IThemeProps {
+  name: string;
+}
+
+export const Example = ({
+  theme,
+  name,
+  rootClassName,
+  rootStyles = {},
+}: IExampleComponent) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        example_component_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("exampleComponent_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      data-testid="example-component-root"
+      style={rootStyles}
+    >
+      <h1>Hello World!</h1>
+      <p>This is just an example component</p>
+      <p>Name: {name}</p>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Example } from "../Example";
+
+describe("Example Component", () => {
+  it("should render without crashing", () => {
+    const { debug } = render(<Example name="John" theme="light" />);
+    // debug();
+    const component = screen.queryByTestId("example-component-root");
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/Example/index.ts

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

package/src/components/Example/stories/Example.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Example } from "@components/Example";
+import "./storiesStyle.scss";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components/Example",
+  component: Example,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+} as ComponentMeta<typeof Example>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const ComponentTemplate: ComponentStory<typeof Example> = (args) => (
+  <Example {...args} />
+);
+
+export const DefaultNoTheme = ComponentTemplate.bind({});
+DefaultNoTheme.args = {
+  name: "John",
+};
+
+export const NoThemeWithClassname = ComponentTemplate.bind({});
+NoThemeWithClassname.args = {
+  name: "John",
+  rootClassName: "exampleComponent_story",
+};
+
+export const LightTheme = ComponentTemplate.bind({});
+LightTheme.args = { name: "Jane", theme: "light" };
+
+export const DarkTheme = ComponentTemplate.bind({});
+DarkTheme.args = {
+  name: "Jane",
+  theme: "dark",
+};
+
+export const OverrideThemeWithClassname = ComponentTemplate.bind({});
+OverrideThemeWithClassname.args = {
+  name: "Rob",
+  theme: "dark",
+  rootClassName: "exampleComponent_story",
+};

package/src/components/Example/stories/storiesStyle.scss

@@ -0,0 +1,4 @@
+.exampleComponent_story {
+  background-color: green;
+  color: white;
+}

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

@@ -0,0 +1,3 @@
+.example_component_container {
+  width: 100%;
+}

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

@@ -0,0 +1,8 @@
+// define themes here
+.exampleComponent_theme_light {
+  @include use_theme($primary-grey-light, "light");
+}
+
+.exampleComponent_theme_dark {
+  @include use_theme($primary-grey-dark, "dark");
+}