@licklist/design 0.66.13 → 0.67.0

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/tiptap-editor/TiptapEditor.scss

@@ -2,7 +2,7 @@
   width: 100%;
   padding: 0.5rem;
   background-color: $white;
-  border-radius: 1rem 1rem 0  0;
+  border-radius: 1rem 1rem 0 0;
   border: 1px solid $gray-400;
   border-bottom: none;
   margin-left: 0;
@@ -24,14 +24,15 @@
     align-items: center;
     color: $black;
   }
-  
-  .icon-btn-active, .icon-btn:hover {
+
+  .icon-btn-active,
+  .icon-btn:hover {
     background-color: $gray-700;
     svg {
       color: $white;
     }
   }
-  
+
   .icon-btn:hover {
     cursor: pointer;
   }
@@ -46,7 +47,8 @@
   }
 }
 
-.editor.editor-disabled, .editor-menu-disabled {
+.editor.editor-disabled,
+.editor-menu-disabled {
   background-color: $gray-200;
 }
 
@@ -64,7 +66,7 @@
   > * + * {
     margin-top: 0.75em;
   }
-  
+
   img.emoji {
     width: 1.2rem;
     height: 1.2rem;
@@ -87,8 +89,8 @@
 
   pre {
     background: $black;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
+    color: #fff;
+    font-family: "JetBrainsMono", monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
 
@@ -127,7 +129,6 @@
       margin-top: 0;
     }
   }
-  
 }
 
 .ProseMirror:focus {

package/src/styles/tiptap-editor/_index.scss

@@ -1 +1 @@
-@import "./TiptapEditor.scss";
+@import "./TiptapEditor.scss";

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: -1 / 12
+  $alpha: calc(-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,12 +44,11 @@ $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: (24 / 14) !default;
+$venue-map-set-card-menu-item-text-line-height: calc(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;
@@ -62,7 +61,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;
     }
@@ -73,7 +72,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;
@@ -103,7 +102,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;
@@ -119,7 +118,6 @@ $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;
@@ -131,9 +129,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/venue-map-sets/VenueMapSetForm.scss

@@ -14,11 +14,10 @@
     width: 50%;
     justify-content: space-between;
 
-    color: #ED2C92;
+    color: #ed2c92;
     background-color: rgba(249, 37, 151, 0.2);
     border: 1px solid transparent;
 
-
     .name-wrapper {
       display: inline-flex;
       align-items: center;
@@ -37,7 +36,7 @@
       color: #fff;
       margin-right: 0.5rem;
 
-      background-color: #F92597;
+      background-color: #f92597;
     }
 
     &.is-invalid {
@@ -72,7 +71,7 @@
   .top-label-container {
     background-color: rgba(249, 37, 151, 0.2);
     span {
-      color: #ED2C92;
+      color: #ed2c92;
     }
   }
 
@@ -119,7 +118,7 @@
 @include media-breakpoint-down(sm) {
   .venue-map-element-control-btns {
     flex-direction: column;
-    
+
     .delete-btn {
       .btn {
         width: 100%;

package/src/styles/virtualized/_index.scss

@@ -1,3 +1,3 @@
 .virtualized-grid-container {
   width: 0;
-}
+}

package/src/styles/zones/ZoneCard.scss

@@ -15,9 +15,7 @@ $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(
@@ -27,7 +25,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: -1 / 12
+  $alpha: calc(-1 / 12)
 ) !default;
 $zone-card-menu-button-icon-size: sp(4) !default;
 $zone-card-menu-button-inset: sp(2) !default;
@@ -44,12 +42,11 @@ $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: (24 / 14) !default;
+$zone-card-menu-item-text-line-height: calc(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;
@@ -62,7 +59,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;
     }
@@ -73,13 +70,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;
@@ -114,7 +111,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;
@@ -130,7 +127,6 @@ $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;
@@ -142,7 +138,6 @@ $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

@@ -7,4 +7,4 @@
   justify-content: start;
   width: 95%;
   overflow: scroll;
-}
+}

package/src/styles/zones/ZoneRecurrencesControl.scss

@@ -1,10 +1,10 @@
 .zone-recurrences {
   .zone-recurrence {
     border: 1px solid #d4d4d4;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
 
     .zone-recurrence-icon-calendar {
-      margin-right: .5rem;
+      margin-right: 0.5rem;
     }
 
     .zone-recurrence-title {
@@ -12,16 +12,18 @@
     }
 
     .zone-recurrence-description {
-      font-size: .85rem;
+      font-size: 0.85rem;
     }
   }
 
   .zone-recurrence-icon-wrapper {
     font-weight: bold;
-    font-size: .95rem;
+    font-size: 0.95rem;
   }
 
-  .zone-recurrence-icon-add, .zone-recurrence-icon-calendar, .zone-recurrence-icon-more {
+  .zone-recurrence-icon-add,
+  .zone-recurrence-icon-calendar,
+  .zone-recurrence-icon-more {
     color: $primary;
   }
-}
+}

package/src/table/FilterHelperComponent.tsx

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

package/src/table/MenuButton.tsx

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

package/src/table/PaginationHelperComponent.tsx

@@ -1,12 +1,11 @@
-import React, { useCallback, useMemo } from "react";
+import { 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 { Icon } from "../static";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 export interface PaginationHelperComponentProps {
   displayShowingSection?: boolean;
@@ -28,7 +27,7 @@ function PaginationHelperComponent({
 
   const paginationService: PaginationService = useMemo(
     () => new PaginationService(paginator!),
-    [paginator]
+    [paginator],
   );
 
   const onPageChange = useCallback(
@@ -37,7 +36,7 @@ function PaginationHelperComponent({
         onPageChangeFn(page);
       }
     },
-    [onPageChangeFn]
+    [onPageChangeFn],
   );
 
   const renderShowingSection = useCallback(
@@ -47,7 +46,7 @@ function PaginationHelperComponent({
         {t("Table:of")} {paginator?.total} {t("Table:entries")}
       </div>
     ),
-    [paginator, t]
+    [paginator, t],
   );
 
   const renderPaginationSection = useCallback(
@@ -59,7 +58,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <Icon type="arrow-left" width="0.9rem" color="black" />
+          <FaArrowLeft size={14} color="black" />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -84,11 +83,11 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <Icon type="arrow-right" width="0.9rem" color="black" />
+          <FaArrowRight size={14} color="black" />
         </button>
       </Pagination>
     ),
-    [onPageChange, paginationService]
+    [onPageChange, paginationService],
   );
 
   if (!paginator || !paginationService.hasPages()) {
@@ -100,7 +99,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 React, { useState } from "react";
+import { 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 React, {
+import {
   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 React, { ReactNode } from "react";
+import { 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 React, { useRef } from "react";
+import { 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,