reso-ui 1.1.0

package/src/components/Containers/Flex/__test__/Flex.test.tsx

@@ -0,0 +1,359 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Flex } from "@components/Containers/Flex";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="flex-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Flex Container Component Unit Tests", () => {
+  const defaultProps = {};
+
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <Flex>
+        <SampleComponent />
+      </Flex>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toBeTruthy();
+
+    const child = screen.queryByTestId("flex-container-child-test");
+    expect(child).toBeTruthy();
+  });
+
+  test("should have class default classes when no props are passed", () => {
+    render(
+      <Flex>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_container");
+    expect(component).toHaveClass("flex_row");
+    expect(component).toHaveClass("flex_justify_space-between");
+    expect(component).toHaveClass("flex_align_center");
+    expect(component).toHaveClass("flex_shrink");
+    expect(component).not.toHaveClass("flex_wrap");
+    expect(component).not.toHaveClass("flex_grow");
+  });
+
+  test("should set class [flex_column] when passed as prop", () => {
+    render(
+      <Flex direction="column">
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_column");
+  });
+
+  test("should set class [flex_justify_start] when passed as prop", () => {
+    render(
+      <Flex justify="start">
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_justify_start");
+  });
+
+  test("should set class [flex_align_end] when passed as prop", () => {
+    render(
+      <Flex align="end">
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_align_end");
+  });
+
+  test("should have class [flex_wrap] when passed as prop", () => {
+    render(
+      <Flex wrap>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_wrap");
+  });
+
+  test("should set class [flex_no_shrink] when passed as prop", () => {
+    render(
+      <Flex shrink={false}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_no_shrink");
+  });
+
+  test("should set class [flex_grow] when passed as prop", () => {
+    render(
+      <Flex grow={true}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("flex_grow");
+  });
+
+  test("should have class [width_full] when passed as prop", () => {
+    render(
+      <Flex fullWidth>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("width_full");
+  });
+
+  test("should have class [width_fit_content] when passed as prop", () => {
+    render(
+      <Flex widthFitContent>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("width_fit_content");
+  });
+
+  test("should have custom className when passed as prop", () => {
+    render(
+      <Flex rootClassName="test_custom_className">
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("test_custom_className");
+  });
+
+  test("should set styles [flex-basis] when passed auto as prop", () => {
+    render(
+      <Flex basis={"auto"}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveStyle("flex-basis: auto");
+  });
+
+  test("should set styles [flex-basis] when passed string value as prop", () => {
+    render(
+      <Flex basis={"200px"}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveStyle("flex-basis: 200px");
+  });
+
+  test("should set styles [flex-basis] when passed falsy value as prop", () => {
+    render(
+      <Flex basis={false}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveStyle("flex-basis: 0");
+  });
+});
+
+describe("Flex Container Margins Unit Tests", () => {
+  test("should have class [spacing-ma-0] when passed as prop", () => {
+    render(
+      <Flex ma={0}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-ma-0");
+  });
+
+  test("should have class [spacing-ma-5] when passed as prop", () => {
+    render(
+      <Flex ma={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-ma-5");
+  });
+
+  test("should have class [spacing-mv-5] when passed as prop", () => {
+    render(
+      <Flex mv={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-mv-5");
+  });
+
+  test("should have class [spacing-mh-5] when passed as prop", () => {
+    render(
+      <Flex mh={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-mh-5");
+  });
+
+  test("should have class [spacing-mt-5] when passed as prop", () => {
+    render(
+      <Flex mt={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-mt-5");
+  });
+
+  test("should have class [spacing-mb-5] when passed as prop", () => {
+    render(
+      <Flex mb={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-mb-5");
+  });
+
+  test("should have class [spacing-mr-5] when passed as prop", () => {
+    render(
+      <Flex mr={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-mr-5");
+  });
+
+  test("should have class [spacing-ml-5] when passed as prop", () => {
+    render(
+      <Flex ml={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-ml-5");
+  });
+});
+
+describe("Flex Container Paddings Unit Tests", () => {
+  test("should have class [spacing-pa-0] when passed as prop", () => {
+    render(
+      <Flex pa={0}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pa-0");
+  });
+
+  test("should have class [spacing-pa-5] when passed as prop", () => {
+    render(
+      <Flex pa={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pa-5");
+  });
+
+  test("should have class [spacing-pv-5] when passed as prop", () => {
+    render(
+      <Flex pv={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pv-5");
+  });
+
+  test("should have class [spacing-ph-5] when passed as prop", () => {
+    render(
+      <Flex ph={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-ph-5");
+  });
+
+  test("should have class [spacing-pt-5] when passed as prop", () => {
+    render(
+      <Flex pt={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pt-5");
+  });
+
+  test("should have class [spacing-pb-5] when passed as prop", () => {
+    render(
+      <Flex pb={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pb-5");
+  });
+
+  test("should have class [spacing-pr-5] when passed as prop", () => {
+    render(
+      <Flex pr={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pr-5");
+  });
+
+  test("should have class [spacing-pl-5] when passed as prop", () => {
+    render(
+      <Flex pl={5}>
+        <SampleComponent />
+      </Flex>
+    );
+
+    const component = screen.queryByTestId("flex-container-root");
+    expect(component).toHaveClass("spacing-pl-5");
+  });
+});

package/src/components/Containers/Flex/index.ts

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

package/src/components/Containers/Flex/stories/Flex.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Flex } from "@components/Containers/Flex";
+import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+
+const SampleChildComponent = () => {
+  return <div className="story_test_box">Test Child</div>;
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Containers/Flex",
+  component: Flex,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component with Display Flex features enabled.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Flex>;
+
+const ComponentTemplate: ComponentStory<typeof Flex> = (args) => (
+  <Flex {...args}>
+    <>
+      <SampleChildComponent />
+      <SampleChildComponent />
+    </>
+  </Flex>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  borderColor: "blue",
+};
+
+export const DefaultWithPaddingAll = ComponentTemplate.bind({});
+DefaultWithPaddingAll.args = {
+  borderColor: "blue",
+  pa: 5,
+};
+
+export const DirectionColumn = ComponentTemplate.bind({});
+DirectionColumn.args = {
+  borderColor: "blue",
+  direction: "column",
+};
+
+export const JustifyStart = ComponentTemplate.bind({});
+JustifyStart.args = {
+  borderColor: "blue",
+  justify: "start",
+};
+
+export const CustomStylesAndAlign = ComponentTemplate.bind({});
+CustomStylesAndAlign.args = {
+  borderColor: "blue",
+  justify: "start",
+  rootStyles: { height: "300px" },
+  align: "end",
+};

package/src/components/Containers/Flex/stories/storiesStyle.scss

@@ -0,0 +1,6 @@
+.story_test_box {
+  height: 200px;
+  width: 200px;
+  border: 2px solid red;
+  background-color: yellow;
+}

package/src/components/Containers/Flex/styles/Flex.layout.scss

@@ -0,0 +1,54 @@
+.flex_container {
+  display: flex;
+  // min-height: $main_height;
+  // border: 2px solid blue;
+}
+.flex_row {
+  flex-direction: row;
+}
+.flex_column {
+  flex-direction: column;
+}
+.flex_justify_start {
+  justify-content: flex-start;
+}
+.flex_justify_end {
+  justify-content: flex-end;
+}
+.flex_justify_space-between {
+  justify-content: space-between;
+}
+.flex_justify_space-around {
+  justify-content: space-around;
+}
+.flex_justify_center {
+  justify-content: center;
+}
+.flex_align_start {
+  align-items: flex-start;
+}
+.flex_align_end {
+  align-items: flex-end;
+}
+.flex_align_center {
+  align-items: center;
+}
+.flex_grow {
+  flex-grow: 1;
+}
+.flex_shrink {
+  flex-shrink: 1;
+}
+.flex_no_shrink {
+  flex-shrink: 0;
+}
+.flex_wrap {
+  flex-wrap: wrap;
+}
+
+.flex_half {
+  flex: 0.48;
+}
+.flex_full {
+  flex: 1;
+}

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import { IPaddingProps, IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Horizontal-Scroll-Container.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IHSCProps extends IComponent, IPaddingProps, IMarginProps {
+  children: React.ReactNode;
+  inheritWidth?: boolean;
+}
+
+export const HorizontalScrollContainer = ({
+  children,
+  inheritWidth = false,
+  rootClassName,
+  rootStyles = {},
+  ...spacingsProps
+}: IHSCProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          hsc_container: true,
+          hsc_container_inheritWidth: inheritWidth,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    )
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="horizontal-scroll-container-root"
+    >
+      {children}
+    </div>
+  );
+};

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

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

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

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

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { HorizontalScrollContainer } from "@components/Containers/Horizontal-Scroll-Container";
+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 Container",
+  component: HorizontalScrollContainer,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component that enables horizontal arrangements of children, scrollable when overflown.
+
+            The children to this component must have \`display: inline-block\`. Alternatively, you can use the HorizontalScrollItem to wrap your children component.
+            
+            If you wish to have children with \`display: flex\`, you can wrap that component with the HorizontalScrollItem.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof HorizontalScrollContainer>;
+
+const ComponentTemplate: ComponentStory<typeof HorizontalScrollContainer> = (
+  args
+) => (
+  <HorizontalScrollContainer {...args}>
+    <HorizontalScrollItem mh={5}>
+      <div
+        style={{
+          width: "200px",
+          height: "200px",
+          border: "2px solid red",
+        }}
+      >
+        sample child
+      </div>
+    </HorizontalScrollItem>
+    <HorizontalScrollItem mh={5}>
+      <div
+        style={{
+          width: "200px",
+          height: "200px",
+          border: "2px solid red",
+        }}
+      >
+        sample child
+      </div>
+    </HorizontalScrollItem>
+    <HorizontalScrollItem mh={5}>
+      <div
+        style={{
+          width: "200px",
+          height: "200px",
+          border: "2px solid red",
+        }}
+      >
+        sample child
+      </div>
+    </HorizontalScrollItem>
+  </HorizontalScrollContainer>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  rootStyles: {
+    border: "2px solid blue",
+  },
+  pv: 3,
+};
+
+export const withPaddingProps = ComponentTemplate.bind({});
+withPaddingProps.args = {
+  rootStyles: {
+    border: "2px solid blue",
+  },
+  pa: 5,
+};

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

@@ -0,0 +1,12 @@
+.hsc_container {
+  // border: 2px solid $primary-grey-medium;
+  //   border-radius: 0 0 $border-radius-small $border-radius-small;
+  width: 540px;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.hsc_container_inheritWidth {
+  width: 100%;
+  min-width: inherit;
+}