@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/styles/themes/bookedit/_variables.scss

@@ -296,7 +296,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
 $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
-$headings-margin-bottom: calc($spacer / 2) !default;
+$headings-margin-bottom: $spacer / 2 !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -583,9 +583,7 @@ $custom-radio-indicator-border-radius: 50% !default;
 $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius: calc(
-  $custom-control-indicator-size / 2
-) !default;
+$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
 $custom-switch-indicator-size: subtract(
   $custom-control-indicator-size,
   $custom-control-indicator-border-width * 4
@@ -737,11 +735,11 @@ $nav-pills-link-active-color: theme-color("primary");
 $nav-pills-link-active-bg: #d9efff;
 
 $nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: calc($spacer / 2) !default;
+$nav-divider-margin-y: $spacer / 2 !default;
 
 // Navbar
 
-$navbar-padding-y: calc($spacer / 2) !default;
+$navbar-padding-y: $spacer / 2 !default;
 $navbar-padding-x: $spacer !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
@@ -750,9 +748,7 @@ $navbar-brand-font-size: $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: calc(
-  ($nav-link-height - $navbar-brand-height) / 2
-) !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
@@ -875,7 +871,7 @@ $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: calc($grid-gutter-width / 2) !default;
+$card-group-margin: $grid-gutter-width / 2 !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;
@@ -957,9 +953,9 @@ $toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
 $badge-font-size: 87.5%;
 $badge-font-weight: $font-weight-semibold;
 $badge-padding-y: 0;
-$badge-padding-x: calc(6em / 7);
-$badge-line-height: calc(16 / 7);
-$badge-border-radius: calc(4em / 7);
+$badge-padding-x: 6em / 7;
+$badge-line-height: (16 / 7);
+$badge-border-radius: 4em / 7;
 $badge-letter-spacing: 0.1em;
 
 $badge-transition: $btn-transition !default;

package/src/styles/themes/licklist/_index.scss

@@ -0,0 +1,45 @@
+/*
+* Licklist
+*/
+
+@import "../../overrides/functions";
+@import "./fonts";
+@import "./variables";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+@import "../../packages";

package/src/styles/venue-map-sets/VenueMapSetCard.scss

@@ -27,7 +27,7 @@ $venue-map-set-card-menu-button-icon-color: adjust-color(
 $venue-map-set-card-menu-button-icon-color-hover: $venue-map-set-card-background-color !default;
 $venue-map-set-card-menu-button-icon-color-container-hover: adjust-color(
   theme-color("primary"),
-  $alpha: calc(-1 / 12)
+  $alpha: -1 / 12
 ) !default;
 $venue-map-set-card-menu-button-icon-size: sp(4) !default;
 $venue-map-set-card-menu-button-inset: sp(2) !default;
@@ -44,11 +44,12 @@ $venue-map-set-card-menu-padding-y: 0 !default;
 
 $venue-map-set-card-menu-item-text-font-size: sp(3.5) !default;
 $venue-map-set-card-menu-item-text-font-weight: $font-weight-semibold !default;
-$venue-map-set-card-menu-item-text-line-height: calc(24 / 14) !default;
+$venue-map-set-card-menu-item-text-line-height: (24 / 14) !default;
 
 $venue-map-set-card-menu-icon-margin: sp(8) !default;
 $venue-map-set-card-menu-icon-size: sp(3.5) !default;
 
+
 .venue-map-set-card-wrapper {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -61,7 +62,7 @@ $venue-map-set-card-menu-icon-size: sp(3.5) !default;
   &:hover {
     cursor: pointer;
     background-color: $venue-map-set-card-link-background-color-hover;
-
+    
     .venue-map-set-card-menu-eye-container {
       display: flex !important;
     }
@@ -72,7 +73,7 @@ $venue-map-set-card-menu-icon-size: sp(3.5) !default;
     justify-content: space-between;
     height: 3.4rem;
     transition: $venue-map-set-card-link-transition;
-    border-bottom: 2px solid #f2f2f2;
+    border-bottom: 2px solid #F2F2F2;
 
     &:focus {
       outline: 0;
@@ -102,7 +103,7 @@ $venue-map-set-card-menu-icon-size: sp(3.5) !default;
       border-radius: $venue-map-set-card-menu-button-border-radius;
       transition: $venue-map-set-card-menu-button-transition;
       z-index: 10;
-
+    
       &:hover {
         background-color: $venue-map-set-card-menu-button-background-color-hover;
         color: $venue-map-set-card-menu-button-icon-color-hover;
@@ -118,6 +119,7 @@ $venue-map-set-card-menu-icon-size: sp(3.5) !default;
       }
     }
   }
+  
 
   .venue-map-set-card-link:hover ~ .venue-map-set-card-menu-button {
     color: $venue-map-set-card-menu-button-icon-color-container-hover;
@@ -129,9 +131,9 @@ $venue-map-set-card-menu-icon-size: sp(3.5) !default;
   border: none;
   filter: $venue-map-set-card-popover-box-shadow-filter;
 
+
   .venue-map-set-card-menu {
-    padding: $venue-map-set-card-menu-padding-x
-      $venue-map-set-card-menu-padding-y;
+    padding: $venue-map-set-card-menu-padding-x $venue-map-set-card-menu-padding-y;
     border-radius: $venue-map-set-card-popover-border-radius;
 
     .list-group-item {

package/src/styles/zones/ZoneCard.scss

@@ -15,7 +15,9 @@ $zone-card-link-text-color-hover: theme-color("primary") !default;
 $zone-card-link-text-font-weight: $font-weight-normal !default;
 $zone-card-link-transition: $zone-card-transition !default;
 
-$zone-card-menu-button-background-color-hover: theme-color("primary") !default;
+$zone-card-menu-button-background-color-hover: theme-color(
+  "primary"
+) !default;
 $zone-card-menu-button-border-radius: $border-radius !default;
 $zone-card-menu-button-box-shadow-focus: $zone-card-box-shadow-focus !default;
 $zone-card-menu-button-icon-color: adjust-color(
@@ -25,7 +27,7 @@ $zone-card-menu-button-icon-color: adjust-color(
 $zone-card-menu-button-icon-color-hover: $zone-card-background-color !default;
 $zone-card-menu-button-icon-color-container-hover: adjust-color(
   theme-color("primary"),
-  $alpha: calc(-1 / 12)
+  $alpha: -1 / 12
 ) !default;
 $zone-card-menu-button-icon-size: sp(4) !default;
 $zone-card-menu-button-inset: sp(2) !default;
@@ -42,11 +44,12 @@ $zone-card-menu-padding-y: 0 !default;
 
 $zone-card-menu-item-text-font-size: sp(3.5) !default;
 $zone-card-menu-item-text-font-weight: $font-weight-semibold !default;
-$zone-card-menu-item-text-line-height: calc(24 / 14) !default;
+$zone-card-menu-item-text-line-height: (24 / 14) !default;
 
 $zone-card-menu-icon-margin: sp(8) !default;
 $zone-card-menu-icon-size: sp(3.5) !default;
 
+
 .zone-card-wrapper {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -59,7 +62,7 @@ $zone-card-menu-icon-size: sp(3.5) !default;
   &:hover {
     cursor: pointer;
     background-color: $zone-card-link-background-color-hover;
-
+    
     .zone-card-menu-eye-container {
       display: flex !important;
     }
@@ -70,13 +73,13 @@ $zone-card-menu-icon-size: sp(3.5) !default;
     justify-content: space-between;
     height: 3.4rem;
     transition: $zone-card-link-transition;
-    border-bottom: 2px solid #f2f2f2;
+    border-bottom: 2px solid #F2F2F2;
 
     a {
       color: $zone-card-link-text-color;
       font-size: 1rem;
       font-weight: $zone-card-link-text-font-weight;
-
+      
       &:hover {
         color: $zone-card-link-text-color-hover;
         text-decoration: none;
@@ -111,7 +114,7 @@ $zone-card-menu-icon-size: sp(3.5) !default;
       border-radius: $zone-card-menu-button-border-radius;
       transition: $zone-card-menu-button-transition;
       z-index: 10;
-
+    
       &:hover {
         background-color: $zone-card-menu-button-background-color-hover;
         color: $zone-card-menu-button-icon-color-hover;
@@ -127,6 +130,7 @@ $zone-card-menu-icon-size: sp(3.5) !default;
       }
     }
   }
+  
 
   .zone-card-link:hover ~ .zone-card-menu-button {
     color: $zone-card-menu-button-icon-color-container-hover;
@@ -138,6 +142,7 @@ $zone-card-menu-icon-size: sp(3.5) !default;
   border: none;
   filter: $zone-card-popover-box-shadow-filter;
 
+
   .zone-card-menu {
     padding: $zone-card-menu-padding-x $zone-card-menu-padding-y;
     border-radius: $zone-card-popover-border-radius;

package/src/styles/zones/ZoneForm.scss

@@ -1,5 +1,4 @@
 .zone-available-times {
-  overscroll-behavior: contain;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
@@ -8,4 +7,4 @@
   justify-content: start;
   width: 95%;
   overflow: scroll;
-}
+}

package/src/table/FilterHelperComponent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FormControl, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 

package/src/table/MenuButton.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import clsx from "clsx";
-import { ReactElement } from "react";
+import Icon from "../static/Icon";
 
 export type MenuButtonProps = {
   onClick?: () => void;
@@ -7,7 +8,8 @@ export type MenuButtonProps = {
   rightIcon?: boolean;
   name: string;
   className?: string;
-  icon?: ReactElement;
+  icon?: string;
+  iconWidth?: string;
 };
 
 export const MenuButton = ({
@@ -17,7 +19,10 @@ export const MenuButton = ({
   icon,
   leftIcon,
   rightIcon,
+  iconWidth = "12",
 }: MenuButtonProps) => {
+  const iconComponent = icon ? <Icon type={icon} width={iconWidth} /> : null;
+
   return (
     <>
       <button
@@ -28,16 +33,16 @@ export const MenuButton = ({
         }}
         className={clsx(className)}
       >
-        {leftIcon && icon}
+        {leftIcon && iconComponent}
         <span
           className={clsx(
             icon && leftIcon && "ml-3",
-            icon && rightIcon && "mr-3",
+            icon && rightIcon && "mr-3"
           )}
         >
           {name}
         </span>
-        {rightIcon && icon}
+        {rightIcon && iconComponent}
       </button>
     </>
   );

package/src/table/PaginationHelperComponent.tsx

@@ -1,11 +1,12 @@
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Row, Col, Pagination } from "react-bootstrap";
 import PageItem, { Ellipsis } from "react-bootstrap/PageItem";
 import { useTranslation } from "react-i18next";
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import PaginationService from "@licklist/plugins/dist/services/Table/PaginationService";
 import clsx from "clsx";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
+
+import { Icon } from "../static";
 
 export interface PaginationHelperComponentProps {
   displayShowingSection?: boolean;
@@ -27,7 +28,7 @@ function PaginationHelperComponent({
 
   const paginationService: PaginationService = useMemo(
     () => new PaginationService(paginator!),
-    [paginator],
+    [paginator]
   );
 
   const onPageChange = useCallback(
@@ -36,7 +37,7 @@ function PaginationHelperComponent({
         onPageChangeFn(page);
       }
     },
-    [onPageChangeFn],
+    [onPageChangeFn]
   );
 
   const renderShowingSection = useCallback(
@@ -46,7 +47,7 @@ function PaginationHelperComponent({
         {t("Table:of")} {paginator?.total} {t("Table:entries")}
       </div>
     ),
-    [paginator, t],
+    [paginator, t]
   );
 
   const renderPaginationSection = useCallback(
@@ -58,7 +59,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <FaArrowLeft size={14} color="black" />
+          <Icon type="arrow-left" width="0.9rem" color="black" />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -83,11 +84,11 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <FaArrowRight size={14} color="black" />
+          <Icon type="arrow-right" width="0.9rem" color="black" />
         </button>
       </Pagination>
     ),
-    [onPageChange, paginationService],
+    [onPageChange, paginationService]
   );
 
   if (!paginator || !paginationService.hasPages()) {
@@ -99,7 +100,7 @@ function PaginationHelperComponent({
       {displayShowingSection && <Col>{renderShowingSection()}</Col>}
       <Col
         className={clsx(
-          !displayShowingSection && "d-flex justify-content-center",
+          !displayShowingSection && "d-flex justify-content-center"
         )}
       >
         {paginator.last_page !== 1 && renderPaginationSection()}

package/src/table/PerPageHelperComponent.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import TableService from "@licklist/plugins/dist/services/Table/TableService";
 
 export interface PerPageHelperComponentProps {

package/src/table/ReactTableHelperComponent.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useEffect,
   useMemo,
   forwardRef,
@@ -53,7 +53,7 @@ export type ReactTableHelperComponentRef = {
  */
 function WrappedReactTableHelperComponent<T extends object>(
   props: ReactTableHelperComponentProps<T>,
-  ref: Ref<ReactTableHelperComponentRef>,
+  ref: Ref<ReactTableHelperComponentRef>
 ) {
   const {
     paginator,
@@ -100,7 +100,7 @@ function WrappedReactTableHelperComponent<T extends object>(
             className: TableService.getHeaderClasses(
               { isSortable, key: accessorKey, title: accessorKey },
               sortKey,
-              sortDirection,
+              sortDirection
             ),
             onClick: isSortable ? () => onSort(accessorKey!) : undefined,
           },
@@ -117,7 +117,7 @@ function WrappedReactTableHelperComponent<T extends object>(
             className: TableService.getHeaderClasses(
               header,
               sortKey,
-              sortDirection,
+              sortDirection
             ),
           },
         };
@@ -131,7 +131,7 @@ function WrappedReactTableHelperComponent<T extends object>(
           className: TableService.getHeaderClasses(
             header,
             sortKey,
-            sortDirection,
+            sortDirection
           ),
           style: { width: header?.width || "auto" },
         },
@@ -170,11 +170,11 @@ function WrappedReactTableHelperComponent<T extends object>(
       });
 
       RouteService.redirectTo(
-        [pathname, nextUrlSearchParams.toString()].join("?"),
+        [pathname, nextUrlSearchParams.toString()].join("?")
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pathname, options, externalFilters],
+    [pathname, options, externalFilters]
   );
 
   const onSort = (key: string) => {
@@ -184,7 +184,7 @@ function WrappedReactTableHelperComponent<T extends object>(
       setOptions((prevOptions) => {
         nextDirection = TableService.getSortDirection(
           prevOptions.sortDirection,
-          nextDirection,
+          nextDirection
         );
 
         return {
@@ -278,7 +278,7 @@ function WrappedReactTableHelperComponent<T extends object>(
                           >
                             {flexRender(
                               header.column.columnDef.header,
-                              header.getContext(),
+                              header.getContext()
                             )}
                           </th>
                         );
@@ -311,11 +311,11 @@ function WrappedReactTableHelperComponent<T extends object>(
 }
 
 const ReactTableHelperComponent = forwardRef(
-  WrappedReactTableHelperComponent,
+  WrappedReactTableHelperComponent
 ) as <T extends object>(
   props: ReactTableHelperComponentProps<T> & {
     ref?: Ref<ReactTableHelperComponentRef>;
-  },
+  }
 ) => ReactElement;
 
 export { ReactTableHelperComponent };

package/src/table/StaticTable.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { Table } from "react-bootstrap";
 
 export interface StaticTableColumn {

package/src/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import { Meta, Story } from "@storybook/react";
 import { range } from "lodash";
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Router } from "../auth/Router";
 import {
   FilterHelperComponent as FilterHelper,
@@ -32,7 +32,7 @@ export default {
 } as Meta;
 
 export const TableHelperComponent: Story<TableHelperComponentProps> = (
-  args,
+  args
 ) => (
   <>
     <Router>
@@ -41,7 +41,7 @@ export const TableHelperComponent: Story<TableHelperComponentProps> = (
   </>
 );
 export const FilterHelperComponent: Story<FilterHelperComponentProps> = (
-  args,
+  args
 ) => <FilterHelper {...args} />;
 
 export const PaginationHelperComponent: Story<
@@ -49,7 +49,7 @@ export const PaginationHelperComponent: Story<
 > = (args) => <PaginationHelper {...args} />;
 
 export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
-  args,
+  args
 ) => <PerPageHelper {...args} />;
 
 export const ReactTableHelperComponent: Story<
@@ -99,7 +99,7 @@ const getPaginator = (perPage, items = 100) =>
     last_page: 6,
     to: 24,
     total: 134,
-  }) as ILengthAwarePaginator<any>;
+  } as ILengthAwarePaginator<any>);
 
 TableHelperComponent.args = {
   isLoading: false,

package/src/table/TableHelperComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { SetStateAction, useEffect, useState } from "react";
+import React, { SetStateAction, useEffect, useState } from "react";
 import { Col, Row, Table } from "react-bootstrap";
 import { useLocation } from "react-router-dom";
 import { isEqual } from "lodash";
@@ -8,7 +8,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import TableService from "@licklist/plugins/dist/services/Table/TableService";
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
-import { ITableProps } from "@licklist/plugins/dist/types/services/Table/ITableProps";
+import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
 import { LoaderIndicator } from "../static/loader/LoaderIndicator";
 import { FilterHelperComponent } from "./FilterHelperComponent";
 import { PaginationHelperComponent } from "./PaginationHelperComponent";
@@ -71,13 +71,13 @@ function TableHelperComponent(props: TableHelperComponentProps) {
 
   const page = Number(getFilterOptionsValue(query, initialOptions, "page"));
   const perPage = Number(
-    getFilterOptionsValue(query, initialOptions, "perPage"),
+    getFilterOptionsValue(query, initialOptions, "perPage")
   );
   const sortKey = String(
-    getFilterOptionsValue(query, initialOptions, "sortKey"),
+    getFilterOptionsValue(query, initialOptions, "sortKey")
   );
   const sortDirection = String(
-    getFilterOptionsValue(query, initialOptions, "sortDirection"),
+    getFilterOptionsValue(query, initialOptions, "sortDirection")
   );
 
   const filter = String(getFilterOptionsValue(query, initialOptions, "filter"));
@@ -91,9 +91,8 @@ function TableHelperComponent(props: TableHelperComponentProps) {
     filter,
   });
   const [refreshedAt, setRefreshedAt] = useState<number>(0);
-  const [cachedExtFilters, setCachedExtFilters] = useState<{
-    [key: string]: any;
-  }>(externalFilters);
+  const [cachedExtFilters, setCachedExtFilters] =
+    useState<{ [key: string]: any }>(externalFilters);
 
   // Redirect to the URL with a new parameters
   // ONLY: if any option or external filters has changed
@@ -124,11 +123,11 @@ function TableHelperComponent(props: TableHelperComponentProps) {
             `filter=${escape(options.filter!)}`,
             new URLSearchParams(externalFilters).toString(),
           ].join("&"),
-        ].join("?"),
+        ].join("?")
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pathname, options, onRefreshFn, filteredOrdersOptions, externalFilters],
+    [pathname, options, onRefreshFn, filteredOrdersOptions, externalFilters]
   );
 
   // Refresh table's content on manual trigger
@@ -151,7 +150,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         filteredOrdersOptions((prevOptions) => {
           nextDirection = TableService.getSortDirection(
             prevOptions.sortDirection,
-            nextDirection,
+            nextDirection
           );
 
           return {
@@ -164,7 +163,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         setOptions((prevOptions) => {
           nextDirection = TableService.getSortDirection(
             prevOptions.sortDirection,
-            nextDirection,
+            nextDirection
           );
 
           return {
@@ -262,7 +261,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
           className={TableService.getHeaderClasses(
             header,
             sortKey,
-            sortDirection,
+            sortDirection
           )}
         >
           {header}
@@ -281,7 +280,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
           className={TableService.getHeaderClasses(
             header,
             sortKey,
-            sortDirection,
+            sortDirection
           )}
           style={styles}
           onClick={() => header.isSortable && onSort(header.key!)}
@@ -324,7 +323,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
                 <thead>
                   <tr>
                     {headers.map((header: ITableHeader) =>
-                      formatHeader(header),
+                      formatHeader(header)
                     )}
                   </tr>
                 </thead>
@@ -332,7 +331,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
                 <tbody>
                   {paginator
                     ? paginator.data.map((item: any, index: number) =>
-                        renderItemFn(item, index),
+                        renderItemFn(item, index)
                       )
                     : null}
                 </tbody>