@licklist/design 0.66.13 → 0.67.1

package/src/tiptap-editor/TipTapMenu/extensions/EmojiReplacer.ts

@@ -125,7 +125,7 @@ const EmojiReplacer = Node.create({
             range.to,
             this.type.create({
               emoji: match[0].trim(),
-            })
+            }),
           );
         },
       }),
@@ -139,7 +139,7 @@ const EmojiReplacer = Node.create({
             range.to,
             this.type.create({
               emoji: match[0].trim(),
-            })
+            }),
           );
         },
       }),

package/src/typeahead/Typeahead.stories.tsx

@@ -1,9 +1,11 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module).add("Typeahead", () => {
+export default {
+  title: "Typeahead",
+};
+
+export const _Typeahead = () => {
   const form = useForm();
   return (
     <FormProvider {...form}>
@@ -20,4 +22,4 @@ storiesOf("Typeahead", module).add("Typeahead", () => {
       />
     </FormProvider>
   );
-});
+};

package/src/typeahead/Typeahead.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Select, { CSSObjectWithLabel } from "react-select";
 import { Controller, useFormContext } from "react-hook-form";
 

package/src/typeahead-helper/TypeaheadHelperComponent.tsx

@@ -1,5 +1,5 @@
 import Dropdown from "react-bootstrap/Dropdown";
-import React, {
+import {
   ChangeEvent,
   ReactNode,
   Ref,
@@ -38,7 +38,7 @@ export type TypeaheadItem = {
 };
 
 function TypeaheadHelperComponent<Item extends TypeaheadItem>(
-  props: Props<Item>
+  props: Props<Item>,
 ) {
   const {
     items,
@@ -69,10 +69,10 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
     disabled: !show,
   });
 
-  const debouncedSearch = React.useRef(
+  const debouncedSearch = useRef(
     debounce(async (query) => {
       await handleSearchCallback(query);
-    }, delay)
+    }, delay),
   ).current;
 
   // Cleanup a debounce
@@ -89,7 +89,7 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
         onSearch(query);
       }
     },
-    [onSearch]
+    [onSearch],
   );
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

package/src/types/iframe.ts

@@ -1,5 +1,5 @@
 import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 
 export type SetOrderFn = (
-  val: OrderItems | ((prevVar: OrderItems) => OrderItems)
+  val: OrderItems | ((prevVar: OrderItems) => OrderItems),
 ) => void;

package/src/typings.d.ts

@@ -37,5 +37,5 @@ interface WindowOrWorkerGlobalScope {
 }
 declare function structuredClone(
   value: any,
-  options?: StructuredSerializeOptions
+  options?: StructuredSerializeOptions,
 ): any;

package/src/venue-map-sets/card/VenueMapCard.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { VenueMapSetCard, VenueMapSetCardProps } from "./VenueMapSetCard";

package/src/venue-map-sets/card/VenueMapSetCard.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import { FaEye, FaEllipsisH, FaTrashAlt } from "react-icons/fa";
 import { MenuButton } from "../../table/MenuButton";
 import { ConfirmModal } from "../../modals";
-import { Icon } from "../../static";
 
 export interface VenueMapSetCardProps extends HasPermissionProp {
   name: string;
@@ -39,7 +39,7 @@ export function VenueMapSetCard({
         <div className="venue-map-set-card-link">{name}</div>
         <div className="d-flex">
           <div className="venue-map-set-card-menu-eye-container">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -50,7 +50,7 @@ export function VenueMapSetCard({
                 id={popoverId}
                 className={clsx(
                   "venue-map-set-card-popover",
-                  !isOverlayVisibile && "d-none"
+                  !isOverlayVisibile && "d-none",
                 )}
               >
                 <Popover.Content
@@ -70,7 +70,7 @@ export function VenueMapSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 className="venue-map-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -92,7 +92,7 @@ export function VenueMapSetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/venue-map-sets/form/VenueMapSetForm.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { VenueMapSetForm } from "./VenueMapSetForm";

package/src/venue-map-sets/form/VenueMapSetForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Form, Col, Row, Button } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -49,7 +49,7 @@ export const VenueMapSetForm = ({
           <Col
             className={clsx(
               "pl-md-4 d-flex",
-              "justify-content-sm-center justify-content-md-start submit-form-buttons"
+              "justify-content-sm-center justify-content-md-start submit-form-buttons",
             )}
             md={6}
             sm={12}

package/src/venue-map-sets/form/components/NameControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/venue-map-sets/form/components/VenueMapControl.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import clsx from "clsx";
-import Icon from "../../../static/Icon";
+import { FaEllipsisH, FaPlus } from "react-icons/fa";
 
 type MainControlProps = {
   title: string;
@@ -39,7 +39,7 @@ export const VenueMapControl = ({
       <button
         className={clsx(
           "venue-map-zone-item-wrapper w-100 mb-3",
-          isInvalid && "is-invalid"
+          isInvalid && "is-invalid",
         )}
         onClick={onClick}
         type="button"
@@ -47,12 +47,7 @@ export const VenueMapControl = ({
       >
         <div className="overflow-hidden name-wrapper w-100">
           {!showMenu && (
-            <Icon
-              type="plus"
-              height="1.25rem"
-              width="1.25rem"
-              className="rounded venue-map-zone-item-icon"
-            />
+            <FaPlus size={20} className="rounded venue-map-zone-item-icon" />
           )}
           <span className="name">{title || "Name"}</span>
         </div>
@@ -67,7 +62,7 @@ export const VenueMapControl = ({
             }}
             onKeyDown={(e) => e.stopPropagation()}
           >
-            <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+            <FaEllipsisH color="#0E8CE2" size={16} />
           </div>
         )}
       </button>

package/src/venue-map-sets/form/components/VenueMapImageControl.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { Col, Button, Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
@@ -41,11 +41,11 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
 
       setValue(
         `venueMaps.${index}.localImageBlobURL` as const,
-        uploadedFiles[0] as never
+        uploadedFiles[0] as never,
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleImageUploading]
+    [handleImageUploading],
   );
 
   const onImageRemove = useCallback(
@@ -53,11 +53,11 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
       handleImageRemove(id, path);
       setValue(
         `venueMaps.${index}.localImageBlobURL` as const,
-        undefined as never
+        undefined as never,
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleImageRemove]
+    [handleImageRemove],
   );
 
   const onPointsChange = useCallback(
@@ -65,7 +65,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
       setValue(`venueMaps.${index}.points` as const, nextPoints as never);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [],
   );
 
   useEffect(() => {
@@ -99,7 +99,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
         <Form.Control
           isInvalid={HookFormService.isInvalid(
             `venueMaps.${index}.image` as const,
-            errors
+            errors,
           )}
           hidden
         />
@@ -117,7 +117,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
         <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors(
             `venueMaps.${index}.image` as const,
-            errors
+            errors,
           )}
         </Form.Control.Feedback>
       </Form.Group>

package/src/venue-map-sets/form/components/VenueMapModal.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { Modal, Button, Form, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../../modals/confirmation";
-import Icon from "../../../static/Icon";
 import { VenueMapWithLocalBlob } from "../types";
 import { VenueMapImageControl } from "./VenueMapImageControl";
 import { getVenueMapsRequiredKeys } from "../utils";
@@ -49,7 +48,7 @@ export const VenueMapModal = ({
       size="lg"
       show={showModal}
       className={clsx(
-        "m-0 edit-product-set-element-modal edit-right-form-modal h-100"
+        "m-0 edit-product-set-element-modal edit-right-form-modal h-100",
       )}
       dialogClassName="edit-venue-map-set-dialog edit-venue-map-dialog"
       onHide={onModalHide}
@@ -92,20 +91,20 @@ export const VenueMapModal = ({
                       placeholder={t("Design:name")}
                       isInvalid={HookFormService.isInvalid(
                         `${key}.name` as const,
-                        errors
+                        errors,
                       )}
                     />
                     <Form.Control.Feedback type="invalid">
                       {HookFormService.hasError(
                         errors?.venueMaps?.[index]?.name,
-                        "required"
+                        "required",
                       ) &&
                         t("Validation:fieldRequired", {
                           attribute: t("Design:name"),
                         })}
                       {HookFormService.hasError(
                         errors?.venueMaps?.[index]?.name,
-                        "maxLength"
+                        "maxLength",
                       ) &&
                         t("Validation:fieldMaxLength", {
                           attribute: t("Design:name"),
@@ -153,7 +152,7 @@ export const VenueMapModal = ({
                   variant="outline-danger"
                   className="d-flex align-items-center"
                 >
-                  <Icon type="trash" height="1rem" />
+                  <FaTrashAlt size={16} />
                   &nbsp;
                   <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
                 </Button>

package/src/venue-map-sets/form/components/VenueMapsControl.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, Fragment } from "react";
+import { useCallback, useEffect, useState, Fragment } from "react";
 import { uniqueId } from "lodash";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -58,7 +58,7 @@ export const VenueMapsControl = ({ isLoading }) => {
       points: [],
       image: undefined,
     }),
-    []
+    [],
   );
 
   useEffect(() => {
@@ -100,17 +100,17 @@ export const VenueMapsControl = ({ isLoading }) => {
 
       {fields.map((venueMap, index) => {
         const venueMapData: VenueMapWithLocalBlob = getValues(
-          `venueMaps.${index}` as const
+          `venueMaps.${index}` as const,
         );
 
         const isVenueMapInvalid =
           HookFormService.isInvalid(
             `venueMaps.${index}.name` as const,
-            errors
+            errors,
           ) ||
           HookFormService.isInvalid(
             `venueMaps.${index}.image` as const,
-            errors
+            errors,
           );
 
         return (
@@ -126,14 +126,14 @@ export const VenueMapsControl = ({ isLoading }) => {
                 <>
                   {HookFormService.hasError(
                     errors?.venueMaps?.[index]?.name,
-                    "required"
+                    "required",
                   ) &&
                     t("Validation:fieldRequired", {
                       attribute: t("Design:name"),
                     })}
                   {HookFormService.hasError(
                     errors?.venueMaps?.[index]?.name,
-                    "maxLength"
+                    "maxLength",
                   ) &&
                     t("Validation:fieldMaxLength", {
                       attribute: t("Design:name"),
@@ -142,7 +142,7 @@ export const VenueMapsControl = ({ isLoading }) => {
                   &nbsp;
                   {HookFormService.getErrors(
                     `venueMaps.${index}.image` as const,
-                    errors
+                    errors,
                   )}
                 </>
               }

package/src/venue-map-sets/form/utils/index.ts

@@ -10,7 +10,7 @@ export const transformFormValues = (nextValues: VenueMapSetFormValuesProps) => {
   const nextVenueMaps = venueMaps.reduce(
     (
       prevVenueMapsValues: VenueMapSetFormValuesProps["venueMaps"],
-      currentVenueMap: VenueMapWithLocalBlob
+      currentVenueMap: VenueMapWithLocalBlob,
     ) => {
       const { localImageBlobURL, image, points, id, ...venueMapValues } =
         currentVenueMap;
@@ -41,14 +41,14 @@ export const transformFormValues = (nextValues: VenueMapSetFormValuesProps) => {
         },
       ];
     },
-    []
+    [],
   );
 
   return { ...values, venueMaps: nextVenueMaps } as Partial<VenueMapSet>;
 };
 
 export const getVenueMapsRequiredKeys = (
-  venueMaps: VenueMapWithLocalBlob[] = []
+  venueMaps: VenueMapWithLocalBlob[] = [],
 ) =>
   venueMaps.reduce((prevVenueMapsKeys: readonly string[], _venueMap, index) => {
     return [

package/src/virtualized/components/VirtualizedGrid.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { Grid, GridProps, GridState } from "react-virtualized";
 import { VirtualizedContext } from "../context";
 

package/src/virtualized/components/VirtualizedWindowScroller.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   VirtualizedWindowScroller,

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useEffect } from "react";
+import { ReactNode, useContext, useEffect } from "react";
 import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
 import {
   WindowScroller,
@@ -55,7 +55,7 @@ const WrappedVirtualizedWindowScroller = ({
 };
 
 export const VirtualizedWindowScroller = (
-  props: VirtualizedWindowScrollerProps
+  props: VirtualizedWindowScrollerProps,
 ) => {
   return (
     <VirtualizedContextProvider>

package/src/virtualized/context/VirtualizedContext.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, createContext, useMemo, useState } from "react";
+import { ReactNode, createContext, useMemo, useState } from "react";
 import { Grid } from "react-virtualized";
 
 export type VirtualizedContextProps = {

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vite/types/importMeta.d.ts" />
+/// <reference types="vite-plugin-svgr/client" />

package/src/zone/card/ZoneCard.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { ZoneCard, ZoneCardProps } from "./ZoneCard";
 

package/src/zone/card/ZoneCard.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { useId } from "@react-aria/utils";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
-import { Icon } from "../../static";
 import { MenuButton } from "../../table/MenuButton";
 
 export interface ZoneCardProps extends HasPermissionProp {
@@ -40,7 +40,7 @@ export function ZoneCard({
         <div className="zone-card-link">{name}</div>
         <div className="d-flex">
           <div className="zone-card-menu-eye-container">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -51,7 +51,7 @@ export function ZoneCard({
                 id={popoverId}
                 className={clsx(
                   "zone-card-popover",
-                  !isOverlayVisibile && "d-none"
+                  !isOverlayVisibile && "d-none",
                 )}
               >
                 <Popover.Content
@@ -71,7 +71,7 @@ export function ZoneCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 className="zone-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -93,7 +93,7 @@ export function ZoneCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/zone/form/ZoneForm.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { ZoneForm, ZoneFormProps } from "./ZoneForm";

package/src/zone/form/ZoneForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Form, Row, Col, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useMemo,
-  useImperativeHandle,
-} from "react";
+import { forwardRef, useEffect, useMemo, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { UseFormSetError, useForm } from "react-hook-form";
@@ -41,7 +36,7 @@ export const AvailableTimesControl = forwardRef<
       errorMessage,
       clearErrorMessage,
     },
-    ref
+    ref,
   ) => {
     const nameId = useId();
     const { t } = useTranslation(["Design", "Validation"]);
@@ -61,7 +56,7 @@ export const AvailableTimesControl = forwardRef<
 
     const checkboxes = useMemo(
       () => getCheckboxesByWorkHours(workHours),
-      [workHours]
+      [workHours],
     );
 
     useImperativeHandle(ref, () => {
@@ -80,7 +75,7 @@ export const AvailableTimesControl = forwardRef<
       if (isAlreadyChecked) {
         setValue(
           "availableTimes",
-          availableTimes.filter((value) => value !== option)
+          availableTimes.filter((value) => value !== option),
         );
 
         return;
@@ -122,5 +117,5 @@ export const AvailableTimesControl = forwardRef<
         </div>
       </Form.Group>
     );
-  }
+  },
 );

package/src/zone/form/components/DescriptionControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext, Controller } from "react-hook-form";

package/src/zone/form/components/GameDurationControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/zone/form/components/NameControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/zone/form/components/SortControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/zone/form/components/ZoneControl.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Row, Col } from "react-bootstrap";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { NameControl } from "./NameControl";

package/src/zone/form/components/ZoneImageControl.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
@@ -42,7 +42,7 @@ export const ZoneImageControl = ({
       setValue("localImageBlobURL", URL.createObjectURL(files[0]) as never);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleImageUploading]
+    [handleImageUploading],
   );
 
   const onImageRemove = useCallback(
@@ -51,7 +51,7 @@ export const ZoneImageControl = ({
       setValue("localImageBlobURL", undefined as never);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleImageRemove]
+    [handleImageRemove],
   );
 
   useEffect(() => {