reso-ui 1.1.0

package/src/components/Panel/Panel-Title/stories/Panel-Title.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Panel } from "@components/Panel/";
+import { PanelTitle } from "@components/Panel/Panel-Title";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Panel/Panel Title",
+  component: PanelTitle,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A header component suited for the Panel container.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof PanelTitle>;
+
+const ComponentTemplate: ComponentStory<typeof PanelTitle> = (args) => (
+  <Panel>
+    <PanelTitle {...args} />
+  </Panel>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {
+  text: "Sample Title",
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  text: "Sample Title",
+  rootStyles: {
+    color: "green",
+    fontSize: "24px",
+  },
+};

package/src/components/Panel/Panel-Title/styles/Panel-Title.layout.scss

@@ -0,0 +1,7 @@
+.panel_title {
+  text-align: center;
+  font-size: $font-size-4;
+  margin-top: $margin-small;
+  margin-bottom: $margin-medium;
+  font-weight: 600;
+}

package/src/components/Panel/Panel-Title/styles/Panel-Title.theme.scss

@@ -0,0 +1,3 @@
+.panel_title_theme_light {
+  @include use_theme(unset, "light");
+}

package/src/components/Panel/index.ts

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export * from "./Panel-Container";
+export * from "./Panel-Title";
+export * from "./Panel-Row";

package/src/components/Quantity-Counter/Quantity-Counter.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import classnames from "classnames";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+import "./styles/Quantity-Counter.layout.scss";
+import "./styles/Quantity-Counter.theme.scss";
+
+export interface IQuantityCounter extends IComponent, IThemeProps {
+  value: number;
+  onChange: (val: number) => void;
+}
+
+export const QuantityCounter = ({
+  value = 1,
+  onChange,
+  rootClassName,
+  rootStyles = {},
+  theme,
+}: IQuantityCounter) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        quantityCounter_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("quantityCounter_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      data-testid="quantity-counter-root"
+      style={rootStyles}
+    >
+      <div
+        className="quantityCounter_counterBox"
+        onClick={() => {
+          if (value > 1) {
+            onChange(value - 1);
+          }
+        }}
+        role="button"
+        data-testid="quantity-counter-subtract"
+      >
+        {"-"}
+      </div>
+      <span data-testid="quantity-counter-value">{value}</span>
+      <div
+        className="quantityCounter_counterBox"
+        onClick={() => {
+          onChange(value + 1);
+        }}
+        role="button"
+        data-testid="quantity-counter-add"
+      >
+        {"+"}
+      </div>
+    </div>
+  );
+};
+
+export default QuantityCounter;

package/src/components/Quantity-Counter/__test__/Quantity-Counter.test.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { QuantityCounter } from "../Quantity-Counter";
+
+describe("Quantity Counter", () => {
+  const defaultProps = {
+    value: 5,
+    // tslint:disable-next-line: no-empty
+    onChange: () => {},
+  };
+
+  it("should render without crashing", () => {
+    render(<QuantityCounter {...defaultProps} />);
+
+    const component = screen.queryByTestId("quantity-counter-root");
+    expect(component).toBeTruthy();
+  });
+
+  it("should show correct value", () => {
+    render(<QuantityCounter {...defaultProps} />);
+
+    const component = screen.queryByTestId("quantity-counter-value");
+    expect(Number(component.textContent)).toBe(5);
+  });
+
+  it("should call onChange with correct value when adding", () => {
+    const onCounterChange = jest.fn();
+
+    const testProps = {
+      ...defaultProps,
+      onChange: onCounterChange,
+    };
+
+    render(<QuantityCounter {...testProps} />);
+
+    const addButton = screen.queryByTestId("quantity-counter-add");
+    addButton.click();
+
+    expect(onCounterChange).toHaveBeenCalled();
+    expect(onCounterChange).toHaveBeenCalledWith(6);
+  });
+
+  it("should call onChange with correct value when subtracting", () => {
+    const onCounterChange = jest.fn();
+
+    const testProps = {
+      ...defaultProps,
+      onChange: onCounterChange,
+    };
+
+    render(<QuantityCounter {...testProps} />);
+
+    const subtractButton = screen.queryByTestId("quantity-counter-subtract");
+    subtractButton.click();
+
+    expect(onCounterChange).toHaveBeenCalled();
+    expect(onCounterChange).toHaveBeenCalledWith(4);
+  });
+
+  it("should not call onChange when subtracting if value is equal to 1", () => {
+    const onCounterChange = jest.fn();
+
+    const testProps = {
+      value: 1,
+      onChange: onCounterChange,
+    };
+
+    render(<QuantityCounter {...testProps} />);
+
+    const subtractButton = screen.queryByTestId("quantity-counter-subtract");
+    subtractButton.click();
+
+    expect(onCounterChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/Quantity-Counter/index.ts

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

package/src/components/Quantity-Counter/stories/Quantity-Counter.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { QuantityCounter } from "@components/Quantity-Counter";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components/Quantity Counter",
+  component: QuantityCounter,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+} as ComponentMeta<typeof QuantityCounter>;
+
+export const Default = () => {
+  return (
+    <QuantityCounter
+      value={5}
+      onChange={(val) => {
+        alert(`Counter value updated to: ${val}`);
+      }}
+    />
+  );
+};

package/src/components/Quantity-Counter/styles/Quantity-Counter.layout.scss

@@ -0,0 +1,18 @@
+.quantityCounter_container {
+  width: 80px;
+  height: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.quantityCounter_counterBox {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: $border-radius-small;
+  border: 1px solid $primary-grey-medium;
+  cursor: pointer;
+}

package/src/components/Quantity-Counter/styles/Quantity-Counter.theme.scss

@@ -0,0 +1,3 @@
+.quantityCounter_theme_light {
+  // no theme
+}

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+
+export const useClickOutside = <T extends HTMLElement>(
+  ref: React.MutableRefObject<T>,
+  cb: () => void
+): void => {
+  useEffect(() => {
+    const handleClickOutside = (e: Event) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        // outside click
+        cb();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+};

package/src/hooks/useDisableBodyScroll.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+const useDisableBodyScroll = (isOpen: boolean) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+};
+
+export default useDisableBodyScroll;

package/src/icons/index.ts

@@ -0,0 +1,50 @@
+/* istanbul ignore file */
+import AboutIcon from "./svg/about.svg";
+import ChevronSingleLeft from "./svg/ChevronSingleLeft.svg";
+import ChevronSingleRight from "./svg/ChevronSingleRight.svg";
+import ChevronDoubleLeft from "./svg/ChevronDoubleLeft.svg";
+import ChevronDoubleRight from "./svg/ChevronDoubleRight.svg";
+import DashboardIcon from "./svg/dashboard.svg";
+import HomeIcon from "./svg/home.svg";
+import LogoutIcon from "./svg/logout.svg";
+import ProductsIcon from "./svg/products.svg";
+import ProfileIcon from "./svg/profile.svg";
+import SettingsIcon from "./svg/settings.svg";
+import UploadIcon from "./svg/upload.svg";
+import UsersIcon from "./svg/users.svg";
+import LoaderIcon from "./svg/loader.svg";
+import StarFullIcon from "./svg/star-full.svg";
+import StarHalf from "./svg/star-half.svg";
+import StarEmptyIcon from "./svg/star-empty.svg";
+import DropdownUp from "./svg/dropdown_up.svg";
+import DropdownDown from "./svg/dropdown_down.svg";
+import EditIcon from "./svg/edit.svg";
+import DeleteIcon from "./svg/delete.svg";
+import OrdersIcon from "./svg/orders.svg";
+import CartIcon from "./svg/cart.svg";
+
+export {
+  HomeIcon,
+  AboutIcon,
+  ChevronSingleLeft,
+  ChevronSingleRight,
+  ChevronDoubleLeft,
+  ChevronDoubleRight,
+  DashboardIcon,
+  LogoutIcon,
+  ProductsIcon,
+  ProfileIcon,
+  SettingsIcon,
+  UploadIcon,
+  UsersIcon,
+  LoaderIcon,
+  StarFullIcon,
+  StarEmptyIcon,
+  StarHalf,
+  DropdownDown,
+  DropdownUp,
+  EditIcon,
+  DeleteIcon,
+  OrdersIcon,
+  CartIcon,
+};

package/src/icons/svg/ChevronDoubleLeft.svg

@@ -0,0 +1,4 @@
+<svg width="current" height="current" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4852 3.41421L7.07099 2L1 8.07099L7.07099 14.142L8.4852 12.7278L3.82843 8.07099L8.4852 3.41421Z" fill="current"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4852 3.41421L12.071 2L6 8.07099L12.071 14.142L13.4852 12.7278L8.82843 8.07099L13.4852 3.41421Z" fill="current"/>
+</svg>

package/src/icons/svg/ChevronDoubleRight.svg

@@ -0,0 +1,4 @@
+<svg width="current" height="current" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5148 3.41421L8.92901 2L15 8.07099L8.92901 14.142L7.5148 12.7278L12.1716 8.07099L7.5148 3.41421Z" fill="current"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5148 3.41421L3.92901 2L10 8.07099L3.92901 14.142L2.5148 12.7278L7.17157 8.07099L2.5148 3.41421Z" fill="current"/>
+</svg>

package/src/icons/svg/ChevronSingleLeft.svg

@@ -0,0 +1,3 @@
+<svg width="current" height="current" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.07099 2L10.4852 3.41421L5.82843 8.07099L10.4852 12.7278L9.07099 14.142L3 8.07099L9.07099 2Z" fill="current"/>
+</svg>

package/src/icons/svg/ChevronSingleRight.svg

@@ -0,0 +1,3 @@
+<svg width="current" height="current" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.92901 2L5.5148 3.41421L10.1716 8.07099L5.5148 12.7278L6.92901 14.142L13 8.07099L6.92901 2Z" fill="current"/>
+</svg>

package/src/icons/svg/about.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9995 5C9.92521 5 5 9.92521 5 15.9995C5 22.0739 9.92521 27 15.9995 27C22.0739 27 27 22.0739 27 15.9995C27 9.92521 22.0739 5 15.9995 5ZM18.2894 22.0478C17.7232 22.2713 17.2725 22.4408 16.9345 22.5581C16.5974 22.6754 16.2053 22.7341 15.7593 22.7341C15.0739 22.7341 14.5403 22.5665 14.1604 22.2322C13.7804 21.8979 13.5914 21.4742 13.5914 20.9592C13.5914 20.759 13.6054 20.5541 13.6333 20.3455C13.6622 20.1369 13.7078 19.9023 13.7702 19.6387L14.4789 17.1356C14.5412 16.8954 14.5953 16.6672 14.6381 16.4549C14.6809 16.2407 14.7014 16.0442 14.7014 15.8654C14.7014 15.547 14.6353 15.3235 14.504 15.1978C14.3708 15.072 14.1203 15.0106 13.7469 15.0106C13.5644 15.0106 13.3763 15.0376 13.1835 15.0944C12.9926 15.1531 12.8269 15.2061 12.6909 15.2583L12.8781 14.4872C13.3418 14.2982 13.786 14.1362 14.2097 14.0021C14.6334 13.8661 15.0339 13.7991 15.411 13.7991C16.0917 13.7991 16.6169 13.9648 16.9866 14.2926C17.3545 14.6213 17.5398 15.0488 17.5398 15.574C17.5398 15.6829 17.5267 15.8748 17.5016 16.1485C17.4764 16.4232 17.429 16.6737 17.36 16.9037L16.6551 19.3994C16.5974 19.5996 16.5462 19.8287 16.4996 20.0848C16.454 20.3409 16.4316 20.5364 16.4316 20.6677C16.4316 20.9992 16.5052 21.2255 16.6542 21.3457C16.8013 21.4658 17.0593 21.5263 17.4243 21.5263C17.5966 21.5263 17.7893 21.4956 18.0072 21.436C18.2233 21.3764 18.3797 21.3233 18.4784 21.2777L18.2894 22.0478ZM18.1646 11.918C17.8359 12.2234 17.4401 12.3762 16.9773 12.3762C16.5154 12.3762 16.1169 12.2234 15.7854 11.918C15.4557 11.6126 15.289 11.241 15.289 10.8071C15.289 10.3741 15.4566 10.0016 15.7854 9.69333C16.1169 9.38417 16.5154 9.23052 16.9773 9.23052C17.4401 9.23052 17.8368 9.38417 18.1646 9.69333C18.4933 10.0016 18.6582 10.3741 18.6582 10.8071C18.6582 11.2419 18.4933 11.6126 18.1646 11.918Z" fill="current"/>
+</svg>

package/src/icons/svg/cart.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1882 21.834C19.6523 21.834 18.3859 23.0735 18.3859 24.6363C18.3859 26.1722 19.6254 27.4387 21.1882 27.4387C22.7241 27.4387 23.9906 26.1992 23.9906 24.6363C23.9636 23.1004 22.7241 21.834 21.1882 21.834Z" fill="current"/>
+<path d="M26.1194 8.46864C26.0655 8.46864 25.9846 8.4417 25.9038 8.4417H8.92804L8.65859 6.63634C8.49691 5.45073 7.47298 4.56152 6.26042 4.56152H4.07783C3.48502 4.56152 3 5.04655 3 5.63935C3 6.23215 3.48502 6.71718 4.07783 6.71718H6.26042C6.39515 6.71718 6.50294 6.82496 6.52988 6.95969L8.20051 18.3308C8.41608 19.7589 9.65558 20.8367 11.1106 20.8367H22.32C23.7212 20.8367 24.9338 19.8397 25.2302 18.4655L26.9816 9.70814C27.0894 9.14228 26.7122 8.57643 26.1194 8.46864Z" fill="current"/>
+<path d="M14.3172 24.5016C14.2633 23.0196 13.0238 21.834 11.5418 21.834C9.97894 21.9148 8.79333 23.2082 8.84723 24.7441C8.90112 26.2261 10.1137 27.4117 11.5957 27.4117H11.6496C13.1855 27.3309 14.398 26.0375 14.3172 24.5016Z" fill="current"/>
+</svg>

package/src/icons/svg/dashboard.svg

@@ -0,0 +1,13 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="current" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M24.5417 6H7.45833C6.65417 6 6 6.65417 6 7.45833V9.54167C6 10.3458 6.65417 11 7.45833 11H24.5417C25.3458 11 26 10.3458 26 9.54167V7.45833C26 6.65417 25.3458 6 24.5417 6Z" fill="current"/>
+<path d="M7.45833 25.9983H13.7083C14.5125 25.9983 15.1667 25.3441 15.1667 24.54V14.1234C15.1667 13.3192 14.5125 12.665 13.7083 12.665H7.45833C6.65417 12.665 6 13.3192 6 14.1234V24.54C6 25.3441 6.65417 25.9983 7.45833 25.9983Z" fill="current"/>
+<path d="M24.5417 12.665H18.2917C17.4875 12.665 16.8334 13.3192 16.8334 14.1234V17.04C16.8334 17.8442 17.4875 18.4984 18.2917 18.4984H24.5417C25.3459 18.4984 26 17.8442 26 17.04V14.1234C26 13.3192 25.3459 12.665 24.5417 12.665Z" fill="current"/>
+<path d="M24.5417 20.165H18.2917C17.4875 20.165 16.8334 20.8192 16.8334 21.6234V24.54C16.8334 25.3441 17.4875 25.9983 18.2917 25.9983H24.5417C25.3459 25.9983 26 25.3441 26 24.54V21.6234C26 20.8192 25.3459 20.165 24.5417 20.165Z" fill="current"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="20" height="20" fill="white" transform="translate(6 6)"/>
+</clipPath>
+</defs>
+</svg>

package/src/icons/svg/delete.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2C0 2.55228 0.447715 3 1 3H9C9.55229 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1H7C7 0.447715 6.55228 0 6 0H4ZM1.1405 5.12403C1.0659 4.52718 1.53128 4 2.13278 4H7.86722C8.46872 4 8.9341 4.52718 8.8595 5.12403L8.1095 11.124C8.04694 11.6245 7.62154 12 7.11722 12H2.88278C2.37846 12 1.95306 11.6245 1.8905 11.124L1.1405 5.12403Z" fill="#8B93A2"/>
+</svg>

package/src/icons/svg/dropdown_down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7H4L10 14L16 7Z" fill="#8B93A2"/>
+</svg>

package/src/icons/svg/dropdown_up.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 14H4L10 7L16 14Z" fill="#8B93A2"/>
+</svg>

package/src/icons/svg/edit.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="3" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 12.1567 2.12109)" fill="#8B93A2"/>
+<path d="M4.47253 9.80566L2.35121 7.68434L0.964355 11L4.47253 9.80566Z" fill="#8B93A2"/>
+</svg>

package/src/icons/svg/home.svg

@@ -0,0 +1,3 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.4064 14.5689C26.4059 14.5684 26.4054 14.5679 26.4049 14.5674L17.4306 5.59351C17.0481 5.21082 16.5395 5 15.9985 5C15.4576 5 14.949 5.21065 14.5663 5.59334L5.59673 14.5627C5.59371 14.5658 5.59069 14.5689 5.58767 14.572C4.80215 15.362 4.80349 16.6439 5.59153 17.4319C5.95156 17.7921 6.42707 18.0007 6.93548 18.0226C6.95612 18.0246 6.97694 18.0256 6.99792 18.0256H7.3556V24.6298C7.3556 25.9367 8.41891 27 9.7261 27H13.2371C13.5929 27 13.8816 26.7115 13.8816 26.3555V21.1777C13.8816 20.5814 14.3667 20.0963 14.9631 20.0963H17.034C17.6303 20.0963 18.1154 20.5814 18.1154 21.1777V26.3555C18.1154 26.7115 18.4039 27 18.7599 27H22.271C23.5781 27 24.6415 25.9367 24.6415 24.6298V18.0256H24.9731C25.5139 18.0256 26.0225 17.8149 26.4054 17.4322C27.1942 16.6429 27.1946 15.3588 26.4064 14.5689Z" fill="current"/>
+</svg>

package/src/icons/svg/loader.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" transform="matrix(-1 0 0 1 32 0)" fill="transparent"/>
+<path d="M5.54118 16C4.69001 16 3.9898 16.6928 4.09882 17.537C4.36786 19.6202 5.18056 21.606 6.46736 23.2889C8.06766 25.3819 10.3123 26.8899 12.8548 27.5805C15.3973 28.271 18.0964 28.1056 20.5356 27.1098C22.9748 26.114 25.0185 24.3432 26.3513 22.0705C27.6841 19.7979 28.2319 17.1498 27.9102 14.5349C27.5885 11.9199 26.4152 9.48357 24.5714 7.60171C22.7275 5.71984 20.3156 4.49709 17.7078 4.12214C15.6108 3.82065 13.481 4.0808 11.5315 4.86298C10.7416 5.17994 10.4787 6.12926 10.8942 6.87211V6.87211C11.3098 7.61497 12.2466 7.86603 13.0499 7.58446C14.3957 7.11267 15.8427 6.96803 17.2691 7.17312C19.2071 7.45175 20.9995 8.36043 22.3697 9.75891C23.74 11.1574 24.6119 12.968 24.8509 14.9112C25.09 16.8544 24.6829 18.8223 23.6924 20.5112C22.702 22.2001 21.1832 23.5161 19.3706 24.2561C17.5579 24.9961 15.5521 25.1191 13.6627 24.6059C11.7732 24.0927 10.1052 22.972 8.91593 21.4167C8.04059 20.2719 7.46046 18.9385 7.21519 17.5336C7.06881 16.6951 6.39234 16 5.54118 16V16Z" fill="current"/>
+<defs>
+<radialGradient id="paint0_angular" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(-180) scale(12)">
+<stop stop-color="#8B93A1"/>
+<stop offset="0.828125" stop-color="#8B93A1" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

package/src/icons/svg/logout.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" fill="none"/>
+<g clip-path="url(#clip0)">
+<path d="M19.9998 17.0003C19.4469 17.0003 18.9999 17.4484 18.9999 18.0002V22.0003C18.9999 22.5513 18.5519 23.0003 17.9998 23.0003H14.9998V8.00039C14.9998 7.14639 14.4558 6.3834 13.6379 6.09941L13.3418 6.00035H17.9998C18.5519 6.00035 18.9999 6.44932 18.9999 7.00046V10.0004C18.9999 10.5523 19.4469 11.0004 19.9998 11.0004C20.5528 11.0004 20.9998 10.5523 20.9998 10.0004V7.00046C20.9998 5.34648 19.6538 4.00049 17.9998 4.00049H7.24998C7.21189 4.00049 7.18003 4.01752 7.14304 4.02246C7.09489 4.01843 7.04893 4.00049 7.00004 4.00049C5.89702 4.00049 5 4.89733 5 6.00035V24.0002C5 24.8542 5.544 25.6172 6.36192 25.9012L12.38 27.9072C12.584 27.9702 12.7868 28.0003 13 28.0003C14.103 28.0003 14.9998 27.1032 14.9998 26.0002V25.0003H17.9998C19.6538 25.0003 20.9998 23.6543 20.9998 22.0003V18.0002C20.9998 17.4484 20.5528 17.0003 19.9998 17.0003Z" fill="current"/>
+<path d="M28.7069 13.2932L24.7068 9.29327C24.421 9.00726 23.9908 8.9212 23.6169 9.07611C23.244 9.2312 22.9999 9.59612 22.9999 10.0002V13.0002H19C18.4479 13.0002 17.9999 13.4481 17.9999 14.0001C17.9999 14.5522 18.4479 15.0001 19 15.0001H22.9999V18C22.9999 18.4041 23.244 18.7691 23.6169 18.9241C23.9908 19.0791 24.421 18.993 24.7068 18.7072L28.7069 14.7071C29.0978 14.3162 29.0978 13.6841 28.7069 13.2932Z" fill="current"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="current" transform="translate(5 4)"/>
+</clipPath>
+</defs>
+</svg>

package/src/icons/svg/orders.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6116 5.92292C11.648 5.40308 12.0804 5 12.6015 5H19.3647C19.8858 5 20.3182 5.40308 20.3546 5.92292L20.5404 8.57129H23.0664C24.1166 8.57129 24.988 9.38365 25.0615 10.4313L26.1439 25.8599C26.225 27.0167 25.3085 27.9999 24.1488 27.9999H8.35361C7.19393 27.9999 6.27736 27.0167 6.35852 25.8599L7.44091 10.4313C7.51441 9.38365 8.38576 8.57129 9.43601 8.57129H11.4258L11.6116 5.92292ZM18.6995 8.57129H13.3005L13.3616 7.6718C13.3872 7.29364 13.7015 7 14.0805 7H17.9195C18.2985 7 18.6128 7.29364 18.6384 7.6718L18.6995 8.57129ZM18.9639 15.2929C19.3544 14.9024 19.9876 14.9024 20.3781 15.2929C20.7686 15.6834 20.7686 16.3166 20.3781 16.7071L16.0911 20.9941C16.0394 21.0747 15.9751 21.1493 15.8985 21.2147C15.4786 21.5735 14.8474 21.5239 14.4887 21.104L12.2398 18.472C11.881 18.0521 11.9305 17.4209 12.3504 17.0622C12.7703 16.7034 13.4015 16.7529 13.7603 17.1728L15.2917 18.9651L18.9639 15.2929Z" fill="current"/>
+</svg>

package/src/icons/svg/products.svg

@@ -0,0 +1,11 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M11.5967 16.7617H20.7373C21.1584 16.7617 21.499 16.4209 21.499 15.9999V6.80858C21.499 6.38765 21.1584 6.04686 20.7373 6.04686H18.4521V5.28515C18.4521 4.02514 17.427 3 16.167 3C14.907 3 13.8818 4.02514 13.8818 5.28515V6.04686H11.5967C11.1757 6.04686 10.835 6.38765 10.835 6.80858V15.9999C10.835 16.4209 11.1757 16.7617 11.5967 16.7617ZM15.4053 5.28515C15.4053 4.86481 15.7474 4.52343 16.167 4.52343C16.5865 4.52343 16.9287 4.86481 16.9287 5.28515V6.04686H15.4053V5.28515Z" fill="current"/>
+<path d="M27.264 15.6057C27.1272 15.3781 26.8786 15.2383 26.6124 15.2383C25.2703 15.2383 24.039 15.9831 23.416 17.1719L21.0795 21.6312C20.6823 22.3869 19.9071 22.8555 19.0548 22.8555H13.8818C13.4609 22.8555 13.1201 22.5147 13.1201 22.0937C13.1201 21.6728 13.4609 21.332 13.8818 21.332H19.0546C19.3388 21.332 19.5977 21.1759 19.7302 20.9236C19.8621 20.6717 20.2606 19.9109 20.6032 19.2571C20.7111 19.0512 20.7036 18.8039 20.5831 18.6049C20.4625 18.4062 20.2469 18.2852 20.0144 18.2852H12.0966C11.079 18.2852 10.1238 18.6817 9.40377 19.4009L4.89894 23.9058C4.60139 24.2033 4.60139 24.6854 4.89894 24.9829L8.70752 28.7768C8.85629 28.9256 9.05128 29.0002 9.24608 29.0002C9.44087 29.0002 9.63586 28.9256 9.78463 28.7768L12.6738 25.9023H19.0546C21.0437 25.9023 22.8542 24.8074 23.7782 23.0451L27.2862 16.3541C27.4112 16.1182 27.4023 15.8342 27.264 15.6057Z" fill="current"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="26" height="26" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

package/src/icons/svg/profile.svg

@@ -0,0 +1,3 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.00098C9.37328 4.00098 4 9.3732 4 16.0004C4 22.6277 9.37275 27.9999 16 27.9999C22.6278 27.9999 28 22.6277 28 16.0004C28 9.3732 22.6278 4.00098 16 4.00098ZM16 7.58896C18.1927 7.58896 19.9696 9.36635 19.9696 11.558C19.9696 13.7503 18.1927 15.5271 16 15.5271C13.8083 15.5271 12.0315 13.7503 12.0315 11.558C12.0315 9.36635 13.8083 7.58896 16 7.58896ZM15.9974 24.8626C13.8104 24.8626 11.8074 24.0662 10.2625 22.7479C9.88615 22.4269 9.66898 21.9562 9.66898 21.4623C9.66898 19.2395 11.468 17.4605 13.6913 17.4605H18.3098C20.5336 17.4605 22.3257 19.2395 22.3257 21.4623C22.3257 21.9567 22.1096 22.4263 21.7328 22.7474C20.1884 24.0662 18.1848 24.8626 15.9974 24.8626Z" fill="current"/>
+</svg>

package/src/icons/svg/settings.svg

@@ -0,0 +1,3 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.903 14.4959C27.746 13.2849 26.485 12.4559 25.278 12.908C24.826 13.079 24.282 12.8249 24.078 12.3689C23.834 11.825 23.535 11.3039 23.187 10.82C22.877 10.3889 22.936 9.82494 23.321 9.50695C23.781 9.12895 24.038 8.56996 24.026 7.97493C24.014 7.36991 23.729 6.81295 23.244 6.44493C22.446 5.84095 21.576 5.33793 20.657 4.95093C20.409 4.84691 20.149 4.79395 19.884 4.79395C18.926 4.79395 18.118 5.47495 17.962 6.41296C17.88 6.90595 17.413 7.24096 16.887 7.18396C16.303 7.12195 15.695 7.12195 15.112 7.18396C14.588 7.24096 14.119 6.90595 14.037 6.41296C13.881 5.47495 13.073 4.79395 12.115 4.79395C11.85 4.79395 11.59 4.84696 11.343 4.95093C10.423 5.33793 9.553 5.83991 8.755 6.44493C8.27102 6.81295 7.98602 7.36991 7.97402 7.97394C7.96202 8.56996 8.21903 9.12796 8.67902 9.50793C9.06503 9.82494 9.12203 10.3889 8.81303 10.8189C8.46503 11.3029 8.16503 11.8239 7.92105 12.3679C7.71705 12.8239 7.21305 13.0919 6.71003 12.9029C6.49005 12.8209 6.26102 12.7789 6.02903 12.7789C5.05305 12.7789 4.22303 13.5169 4.09605 14.4959C4.033 14.9919 4 15.4989 4 15.9999C4 16.5009 4.033 17.0079 4.09698 17.5039C4.25298 18.7139 5.51298 19.5429 6.72198 19.0919C7.17297 18.9209 7.71798 19.1749 7.92198 19.6309C8.16597 20.1749 8.46498 20.6959 8.81298 21.1799C9.12297 21.6109 9.064 22.1749 8.67897 22.4929C8.21898 22.8709 7.96197 23.4299 7.97397 24.0249C7.98597 24.6299 8.27097 25.1869 8.75598 25.5549C9.55398 26.1589 10.424 26.6619 11.343 27.0489C11.591 27.1529 11.851 27.2059 12.116 27.2059C13.074 27.2059 13.882 26.5249 14.038 25.5869C14.12 25.0939 14.588 24.7639 15.113 24.8159C15.696 24.8779 16.304 24.8779 16.888 24.8159C17.414 24.7629 17.881 25.0939 17.963 25.5869C18.119 26.5249 18.927 27.2049 19.885 27.2059C20.15 27.2059 20.41 27.1529 20.657 27.0489C21.576 26.6619 22.447 26.1599 23.244 25.5549C23.728 25.1869 24.014 24.6299 24.026 24.0259C24.038 23.4299 23.781 22.8719 23.321 22.4919C22.935 22.1749 22.878 21.6109 23.187 21.1809C23.535 20.6969 23.835 20.1759 24.079 19.6319C24.283 19.175 24.7879 18.908 25.29 19.097C25.51 19.18 25.739 19.222 25.971 19.222C26.947 19.222 27.777 18.484 27.904 17.505C27.967 17.0029 28 16.4979 28 15.9999C28 15.5019 27.967 14.9969 27.903 14.4959ZM16 19.9999C13.794 19.9999 12 18.2059 12 15.9999C12 13.7939 13.794 11.9999 16 11.9999C18.206 11.9999 20 13.7939 20 15.9999C20 18.2059 18.206 19.9999 16 19.9999Z" fill="current"/>
+</svg>

package/src/icons/svg/star-empty.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L11.0206 6.21885H17.5595L12.2694 10.0623L14.2901 16.2812L9 12.4377L3.70993 16.2812L5.73056 10.0623L0.440492 6.21885H6.97937L9 0Z" fill="#D9D7D7"/>
+</svg>

package/src/icons/svg/star-full.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L11.0206 6.21885H17.5595L12.2694 10.0623L14.2901 16.2812L9 12.4377L3.70993 16.2812L5.73056 10.0623L0.440492 6.21885H6.97937L9 0Z" fill="#FFD868"/>
+</svg>

package/src/icons/svg/star-half.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55951 0L6.53888 6.21885H0L5.29007 10.0623L3.26944 16.2812L8.55951 12.4377V0Z" fill="#FFD868"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55945 12.4377V0L10.5801 6.21885H17.119L11.8289 10.0623L13.8495 16.2812L8.55945 12.4377Z" fill="#C4C4C4"/>
+</svg>

package/src/icons/svg/upload.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.3905 17.0928C23.5047 17.0928 22.7866 17.8109 22.7866 18.6966V22.7922H9.20764V18.6966C9.20764 17.8109 8.48956 17.0928 7.60382 17.0928C6.71808 17.0928 6 17.8109 6 18.6966V24.396C6 25.2817 6.71808 25.9998 7.60382 25.9998H24.3905C25.2762 25.9998 25.9943 25.2817 25.9943 24.396V18.6966C25.9943 17.8109 25.2762 17.0928 24.3905 17.0928Z" fill="#434B59"/>
+<path d="M12.603 13.2661L14.3933 11.4758V17.4514C14.3933 18.3371 15.1114 19.0552 15.9971 19.0552C16.8828 19.0552 17.6009 18.3371 17.6009 17.4514V11.4757L19.3912 13.266C19.7043 13.5792 20.1148 13.7358 20.5253 13.7358C20.9358 13.7358 21.3462 13.5792 21.6593 13.266C22.2857 12.6397 22.2857 11.6243 21.6593 10.9979L17.1312 6.4698C16.5049 5.8434 15.4893 5.8434 14.863 6.4698L10.3349 10.998C9.70853 11.6243 9.70853 12.6397 10.3349 13.2661C10.9612 13.8924 11.9767 13.8924 12.603 13.2661Z" fill="#434B59"/>
+</svg>

package/src/icons/svg/users.svg

@@ -0,0 +1,15 @@
+<svg width="current" height="current" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 13.686C18.2523 13.686 20.0781 11.8602 20.0781 9.60791C20.0781 7.35562 18.2523 5.52979 16 5.52979C13.7477 5.52979 11.9219 7.35562 11.9219 9.60791C11.9219 11.8602 13.7477 13.686 16 13.686Z" fill="current"/>
+<path d="M24.25 13.686C25.6739 13.686 26.8281 12.5318 26.8281 11.1079C26.8281 9.68405 25.6739 8.52979 24.25 8.52979C22.8261 8.52979 21.6719 9.68405 21.6719 11.1079C21.6719 12.5318 22.8261 13.686 24.25 13.686Z" fill="current"/>
+<path d="M7.75 13.686C9.17386 13.686 10.3281 12.5318 10.3281 11.1079C10.3281 9.68405 9.17386 8.52979 7.75 8.52979C6.32614 8.52979 5.17188 9.68405 5.17188 11.1079C5.17188 12.5318 6.32614 13.686 7.75 13.686Z" fill="current"/>
+<path d="M10.2902 16.0011C9.27531 15.1697 8.35623 15.2797 7.18281 15.2797C5.42781 15.2797 4 16.6991 4 18.4433V23.5625C4 24.32 4.61828 24.936 5.37859 24.936C8.66106 24.936 8.26562 24.9953 8.26562 24.7944C8.26562 21.1669 7.83597 18.5067 10.2902 16.0011Z" fill="current"/>
+<path d="M17.1161 15.2985C15.0665 15.1275 13.2851 15.3004 11.7485 16.5688C9.17703 18.6285 9.67189 21.4017 9.67189 24.7944C9.67189 25.692 10.4022 26.436 11.3135 26.436C21.2079 26.436 21.6017 26.7551 22.1885 25.4558C22.3809 25.0164 22.3281 25.156 22.3281 20.9525C22.3281 17.6138 19.4372 15.2985 17.1161 15.2985Z" fill="current"/>
+<path d="M24.8172 15.2801C23.6373 15.2801 22.7233 15.1712 21.7098 16.0015C24.1457 18.4885 23.7344 20.9672 23.7344 24.7948C23.7344 24.997 23.4061 24.9363 26.5722 24.9363C27.3597 24.9363 28 24.2984 28 23.5141V18.4437C28 16.6995 26.5722 15.2801 24.8172 15.2801Z" fill="current"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>

package/src/index.ts

@@ -0,0 +1,35 @@
+/* istanbul ignore file */
+
+// components
+export * from "@components/Containers";
+export * from "@components/Example";
+export * from "@components/Banners";
+export * from "@components/Buttons";
+export * from "@components/Card";
+export * from "@components/Modal";
+export * from "@components/Panel";
+export * from "@components/Images";
+export * from "@components/Loaders";
+export * from "@components/Quantity-Counter";
+export * from "@components/Icon";
+export * from "@components/Footer";
+export * from "@components/Dialog";
+export * from "@components/Errors";
+
+// form stuff
+export * from "@components/Form";
+export * from "@components/Date-Selector";
+
+// icons
+export * from "@icons";
+
+// types
+export * from "@interfaces/IComponent";
+export * from "@interfaces/IImageObject";
+export * from "@interfaces/ILink";
+export * from "@interfaces/ISpacingsProps";
+export * from "@interfaces/Theme";
+
+// hooks
+export * from "@hooks/useClickOutside";
+export * from "@hooks/useDisableBodyScroll";

package/src/index.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

package/src/pending_components/form/check-box/check-box.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+const CheckBox = ({
+  checked,
+  onChange = () => {},
+  required,
+  children,
+  id,
+  disabled = false,
+  style = {},
+}) => {
+  return (
+    <div style={{ ...style }} className="component_checkbox_container">
+      <input
+        id={id}
+        type="checkbox"
+        disabled={disabled}
+        required={required}
+        checked={checked ? checked : false}
+        className="component_checkbox_checkbox"
+        onChange={(event) => {
+          onChange(event);
+        }}
+      />
+      <div className="component_checkbox_children">{children}</div>
+    </div>
+  );
+};
+
+export default CheckBox;