@licklist/design 0.66.7-dev.8 → 0.66.7

package/src/tiptap-editor/TipTapMenu/components/TipTapMenuItem.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import clsx from "clsx";

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

@@ -65,7 +65,7 @@ const EMOTICON_REGEX = new RegExp(`(?:${emoticonsForRegex.join("|")})\\s$`);
 
 const EMOTICON_REGEX_PASTE = new RegExp(
   `(?:${emoticonsForRegex.join("|")})`,
-  "g",
+  "g"
 );
 
 /**

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

package/src/typeahead/Typeahead.tsx

@@ -1,3 +1,4 @@
+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 {
+import React, {
   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 = useRef(
+  const debouncedSearch = React.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,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { VenueMapSetCard, VenueMapSetCardProps } from "./VenueMapSetCard";

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
@@ -50,7 +50,7 @@ export function VenueMapSetCard({
                 id={popoverId}
                 className={clsx(
                   "venue-map-set-card-popover",
-                  !isOverlayVisibile && "d-none",
+                  !isOverlayVisibile && "d-none"
                 )}
               >
                 <Popover.Content

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

@@ -1,3 +1,4 @@
+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 { useEffect } from "react";
+import React, { 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,3 +1,4 @@
+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,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import clsx from "clsx";
 import Icon from "../../../static/Icon";
 
@@ -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"

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import React, { 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,3 +1,4 @@
+import React from "react";
 import { Modal, Button, Form, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
@@ -48,7 +49,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}
@@ -91,20 +92,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"),

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, Fragment } from "react";
+import React, { 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 { useContext, useEffect, useRef } from "react";
+import React, { 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 { useRef } from "react";
+import React, { useRef } from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   VirtualizedWindowScroller,

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useContext, useEffect } from "react";
+import React, { 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 { ReactNode, createContext, useMemo, useState } from "react";
+import React, { ReactNode, createContext, useMemo, useState } from "react";
 import { Grid } from "react-virtualized";
 
 export type VirtualizedContextProps = {

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

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

package/src/zone/card/ZoneCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
@@ -51,7 +51,7 @@ export function ZoneCard({
                 id={popoverId}
                 className={clsx(
                   "zone-card-popover",
-                  !isOverlayVisibile && "d-none",
+                  !isOverlayVisibile && "d-none"
                 )}
               >
                 <Popover.Content

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

@@ -1,3 +1,4 @@
+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 { useEffect } from "react";
+import React, { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Form, Row, Col, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,7 @@ export type ZoneFormProps = {
   onSubmit: (values: Partial<Zone>) => void;
   serverErrors?: ServerError;
   isLoading?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -25,7 +25,6 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
-  workHours,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +54,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl isLoading={isLoading} />
         <Row>
           <Col md={6} sm={12} />
           <Col

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

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

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

@@ -1,3 +1,4 @@
+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,3 +1,4 @@
+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,3 +1,4 @@
+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,3 +1,4 @@
+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,3 +1,4 @@
+import React from "react";
 import { Row, Col } from "react-bootstrap";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { NameControl } from "./NameControl";
@@ -10,15 +11,15 @@ import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
 };
 
-export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl workHours={workHours} />
+        <ZoneRecurrencesControl />
         <hr />
         <Row>
           <Col md={6} sm={6}>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import React, { 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(() => {

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import RRule from "rrule";