reso-ui 1.1.0

package/src/components/Card/Card-Content/stories/Card-Content.stories.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Card } from "@components/Card";
+import { CardContent } from "@components/Card/Card-Content";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Card/Content",
+  component: Card,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component meant to wrap children of Card.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Card>;
+
+const ComponentTemplate: ComponentStory<typeof Card> = (args) => (
+  <Card pa={5}>
+    <CardContent {...args}>
+      content 1 this is a sample content for a card.
+    </CardContent>
+    <CardContent {...args}>content 2</CardContent>
+  </Card>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  rootStyles: {
+    border: "2px solid green",
+  },
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    background: "green",
+    color: "white",
+  },
+};
+
+export const DefaultWithTextOverflow = () => (
+  <Card pa={5}>
+    <CardContent rootStyles={{ border: "1px solid green" }} wrap={false}>
+      is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+      has been the industry's
+    </CardContent>
+  </Card>
+);

package/src/components/Card/Card-Content/styles/Card-Content.layout.scss

@@ -0,0 +1,12 @@
+.card_content_container {
+  //   border: 2px solid blue;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+}
+
+.card_content_container_wrap {
+  white-space: normal;
+}

package/src/components/Card/Card-Summary-Value/Card-Summary-Value.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+
+// styles
+import "./styles/Card-Summary-Value.layout.scss";
+
+// utils
+import { createComponentStyles, createLayoutStyles } from "@utils/styles";
+
+export interface ICardSummaryValueProps extends IComponent {
+  value: string | number;
+}
+
+export const CardSummaryValue = ({
+  value,
+  rootClassName,
+  rootStyles = {},
+}: ICardSummaryValueProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        card_summary_value: true,
+      },
+      rootClassName
+    )
+  );
+
+  return (
+    <span
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="card-summary-value"
+    >
+      {value}
+    </span>
+  );
+};

package/src/components/Card/Card-Summary-Value/__test__/Card-Summary-Value.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CardSummaryValue } from "@components/Card/Card-Summary-Value";
+
+describe("Card Summary Value Component Unit Tests", () => {
+  test("should render numerical value without error", () => {
+    const { debug } = render(<CardSummaryValue value={10} />);
+
+    // debug();
+    const component = screen.queryByTestId("card-summary-value");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveClass("card_summary_value");
+    expect(component).toHaveTextContent("10");
+  });
+
+  test("should render string value without error", () => {
+    const { debug } = render(<CardSummaryValue value={"hello"} />);
+
+    // debug();
+    const component = screen.queryByTestId("card-summary-value");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveClass("card_summary_value");
+    expect(component).toHaveTextContent("hello");
+  });
+
+  test("should have custom rootClassName when passed as prop", () => {
+    render(
+      <CardSummaryValue value={10} rootClassName="test_custom_className" />
+    );
+
+    const component = screen.queryByTestId("card-summary-value");
+    expect(component).toHaveClass("test_custom_className");
+  });
+
+  test("should have custom rootStyles when passed as prop", () => {
+    render(
+      <CardSummaryValue value={5} rootStyles={{ border: "2px solid red" }} />
+    );
+
+    const component = screen.queryByTestId("card-summary-value");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Card/Card-Summary-Value/index.ts

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

package/src/components/Card/Card-Summary-Value/stories/Card-Summary-Value.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Card } from "@components/Card";
+import { CardSummaryValue } from "@components/Card/Card-Summary-Value";
+
+import dedent from "ts-dedent";
+import { CardContent } from "@components/Card/Card-Content";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Card/Summary Value",
+  component: Card,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A text component meant to display Summary Values within a Card.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof CardSummaryValue>;
+
+const ComponentTemplate: ComponentStory<typeof CardSummaryValue> = (args) => (
+  <Card pa={5}>
+    <CardSummaryValue {...args} />
+  </Card>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  rootStyles: {
+    border: "2px solid green",
+  },
+  value: 10,
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    background: "green",
+    padding: "10px",
+    color: "white",
+  },
+  value: "$12.5k",
+};
+
+export const DefaultWithTextOverflow = () => (
+  <Card pa={5}>
+    <CardContent>
+      <CardSummaryValue value={"£12,500,000,000,000"} />
+    </CardContent>
+  </Card>
+);

package/src/components/Card/Card-Summary-Value/styles/Card-Summary-Value.layout.scss

@@ -0,0 +1,7 @@
+.card_summary_value {
+  font-weight: 500;
+  font-size: $font-size-7;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/Card/index.ts

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export * from "./Card-Container";
+export * from "./Card-Content";
+export * from "./Card-Summary-Value";

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+
+// styles
+import "./styles/Center-Container.layout.scss";
+
+// utils
+import { createLayoutStyles } from "@utils/styles";
+
+export interface ICenterContainerProps extends IComponent {
+  children: React.ReactNode;
+}
+
+// width and height will follow children
+export const CenterContainer = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+}: ICenterContainerProps) => {
+  const containerStyles = createLayoutStyles(
+    {
+      component_center_container: true,
+    },
+    rootClassName
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      data-testid="center-container-root"
+      style={rootStyles}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CenterContainer;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { CenterContainer } from "@components/Containers/Center-Container";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="center-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Center Container Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <CenterContainer>
+        <SampleComponent />
+      </CenterContainer>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("center-container-root");
+    expect(component).toBeTruthy();
+
+    const child = screen.queryByTestId("center-container-child-test");
+    expect(child).toBeTruthy();
+  });
+
+  test("should have custom rootClassName when passed as prop", () => {
+    render(
+      <CenterContainer rootClassName="test_custom_className">
+        <SampleComponent />
+      </CenterContainer>
+    );
+
+    const component = screen.queryByTestId("center-container-root");
+    expect(component).toHaveClass("test_custom_className");
+  });
+});

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

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

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { CenterContainer } from "@components/Containers/Center-Container";
+import "./storiesStyle.scss";
+
+const SampleChildComponent = () => {
+  return <div className="story_test_box">Test Child</div>;
+};
+
+export default {
+  title: "Containers/Center Container",
+  component: CenterContainer,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+} as ComponentMeta<typeof CenterContainer>;
+
+const ComponentTemplate: ComponentStory<typeof CenterContainer> = (args) => (
+  <CenterContainer {...args}>
+    <SampleChildComponent />
+  </CenterContainer>
+);
+
+export const DefaultWithBorder = ComponentTemplate.bind({});
+DefaultWithBorder.args = {
+  rootStyles: { border: "2px solid blue" },
+};
+
+export const WithCustomClassname = ComponentTemplate.bind({});
+WithCustomClassname.args = {
+  rootClassName: "centerContainer_story_sample",
+};

package/src/components/Containers/Center-Container/stories/storiesStyle.scss

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

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

@@ -0,0 +1,6 @@
+.component_center_container {
+  margin: $margin-center;
+  padding: $padding-xlarge $padding-xxlarge;
+  min-height: inherit;
+  max-width: $max-width-screen-lg;
+}

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

@@ -0,0 +1,93 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+
+// styles
+import "./styles/Flex.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+import { ISpacingsProps } from "@interfaces/ISpacingsProps";
+import { hasValue } from "@utils/validations";
+
+export interface IFlexProps extends IComponent, ISpacingsProps {
+  direction?: "row" | "column";
+  justify?: "space-between" | "start" | "end" | "space-around" | "center";
+  align?: "center" | "start" | "end";
+  grow?: boolean;
+  shrink?: boolean;
+  basis?: "auto" | boolean | string;
+  wrap?: boolean;
+  children: React.ReactNode;
+  fullWidth?: boolean;
+  widthFitContent?: boolean;
+  className?: string;
+  borderColor?: string;
+}
+
+// BEWARE
+// when using this component you need to set specific height
+// 100% height would not work with flex
+
+export const Flex = ({
+  direction = "row",
+  justify = "space-between",
+  align = "center",
+  grow = false,
+  shrink = true,
+  basis = "auto",
+  wrap = false,
+  fullWidth = false,
+  widthFitContent = false,
+  children,
+  rootClassName,
+  borderColor = null,
+  rootStyles = {},
+  ...spacingsProps
+}: IFlexProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          flex_container: true,
+          [`flex_${direction}`]: true,
+          [`flex_justify_${justify}`]: true,
+          [`flex_align_${align}`]: true,
+          [`flex_grow`]: grow,
+          [`flex_shrink`]: shrink,
+          [`flex_no_shrink`]: !shrink,
+          [`flex_wrap`]: wrap,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        width_full: fullWidth,
+        width_fit_content: widthFitContent,
+      }
+    )
+  );
+
+  const flexBasis =
+    basis && basis === "auto" ? "auto" : typeof basis === "string" ? basis : 0;
+
+  return (
+    <div
+      data-testid="flex-container-root"
+      style={{
+        border: borderColor ? `2px solid ${borderColor}` : null,
+        flexBasis,
+        ...rootStyles,
+      }}
+      className={containerStyles}
+    >
+      {children}
+    </div>
+  );
+};