@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/custom-fields/field-set/CustomFieldSets.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
@@ -40,7 +40,7 @@ export type ExtendedFieldSet = Omit<
 export interface CustomFieldSetsProps extends HasPermissionProp {
   fieldSets: ExtendedFieldSet[];
   onFieldSetUpdate?: (
-    item: ExtendedFieldSet,
+    item: ExtendedFieldSet
   ) => Promise<FieldSet | null | void>;
   onFieldSetDelete?: (item: ExtendedFieldSet) => Promise<boolean | void>;
   setFieldSets?: (value: React.SetStateAction<ExtendedFieldSet[]>) => void;

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -1,4 +1,4 @@
-import { createElement, useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Form } from "react-bootstrap";
 import {
@@ -121,8 +121,8 @@ export const CustomFieldSet = ({
       sortedItems.filter((sortedItem) =>
         fieldSet.id === null
           ? sortedItem._sortableId !== fieldSet._sortableId
-          : sortedItem.id !== fieldSet.id,
-      ),
+          : sortedItem.id !== fieldSet.id
+      )
     );
   };
 
@@ -200,7 +200,7 @@ export const CustomFieldSet = ({
               key={fieldId}
               title={field.name}
               id={String(fieldId)}
-              body={createElement(Component, {
+              body={React.createElement(Component, {
                 fieldIndex: i,
                 fieldType: field.type,
                 fieldSetId: CUSTOM_FIELDS,

package/src/custom-fields/field-set/providers/CustomFieldSetsProvider.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import React, { FC, useState } from "react";
 import { CustomFieldSetsContext, ValuesType } from "../contexts";
 
 export const CustomFieldSetsProvider: FC = ({ children }) => {

package/src/custom-fields/forms/DropdownForm.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Button, Form, FormLabel } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import {
@@ -11,7 +12,7 @@ import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permi
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Option } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { FaPlus, FaTrashAlt } from "react-icons/fa";
+import { Icon } from "../../static";
 
 interface DropdownFormProps<T>
   extends FieldNamePrefixPath<T>,
@@ -101,7 +102,7 @@ export function DropdownForm<T>({
         <Form.Control.Feedback type="invalid">
           {HookFormService.hasError(
             errors?.[fieldSetId]?.[fieldIndex]?.name,
-            "required",
+            "required"
           ) &&
             t("Validation:fieldRequired", {
               attribute: t("Design:fieldName"),
@@ -141,28 +142,28 @@ export function DropdownForm<T>({
 
                         const sameValueElement = allOptions.find(
                           ({ title: optionTitle }: Option) =>
-                            title === optionTitle,
+                            title === optionTitle
                         );
 
                         return !sameValueElement;
                       },
-                    },
+                    }
                   )}
                   onChange={({ target: { value: nextValue } }) => {
                     setValue(
                       `${fieldSetId}.${fieldIndex}.options.${i}.title`,
-                      nextValue,
+                      nextValue
                     );
                     setValue(
                       `${fieldSetId}.${fieldIndex}.options.${i}.value`,
-                      nextValue,
+                      nextValue
                     );
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
                   {HookFormService.hasError(
                     errors?.[fieldSetId]?.[fieldIndex]?.options?.[i]?.title,
-                    "validate",
+                    "validate"
                   ) &&
                     t("Validation:fieldMustBeUnique", {
                       attribute: t("Design:title"),
@@ -178,7 +179,7 @@ export function DropdownForm<T>({
                     trigger();
                   }}
                 >
-                  <FaTrashAlt size={20} />
+                  <Icon type="trash-alt" height="1.2rem" />
                 </button>
               </Form.Group>
             </div>
@@ -196,7 +197,7 @@ export function DropdownForm<T>({
             resetOptionsError();
           }}
         >
-          <FaPlus size={18} />
+          <Icon type="plus" height="1.1rem" width=".8rem" />
         </Button>
       </div>
       <div className="manual-form-error">

package/src/custom-fields/forms/TextInputForm.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Button, Form } from "react-bootstrap";
 import { Path, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -52,7 +53,7 @@ export function TextInputForm<T>({
         <Form.Control.Feedback type="invalid">
           {HookFormService.hasError(
             formState.errors?.[fieldSetId]?.[fieldIndex]?.name,
-            "required",
+            "required"
           ) &&
             t("Validation:fieldRequired", {
               attribute: t("Design:fieldName"),

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
 

package/src/customers/components/filter/CustomerFilter.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { TextField } from "../../../static/TextField";

package/src/date-time-button/DateContent.tsx

@@ -8,6 +8,7 @@ import { getDayWithOrdinal } from "@licklist/plugins/dist/utils/formatDate";
 import clsx from "clsx";
 import { isToday, isTomorrow } from "date-fns";
 import { DateTime } from "luxon";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeButtonProps, Variant } from "./DateTimeButton";
 
@@ -45,7 +46,7 @@ export const DateContent = ({
         className={clsx(
           "descriptions",
           isSelected && "selected",
-          isDisabled && "disabled",
+          isDisabled && "disabled"
         )}
       >
         {`${getDayWithOrdinal(+day)} ${month}`}

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { DateTime } from "luxon";
 import { DateTimeButton, DateTimeButtonProps, Variant } from "./DateTimeButton";

package/src/date-time-button/DateTimeButton.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
 import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
@@ -70,7 +70,7 @@ export const DateTimeButton = ({
         isTimeVariant && "time-button",
         isTimeVariant && "only-time-container",
         !isTimeVariant && "today",
-        variant === Variant.month && "calendar-view",
+        variant === Variant.month && "calendar-view"
       )}
     >
       <DateContent
@@ -79,7 +79,9 @@ export const DateTimeButton = ({
         isSelected={isSelected}
         variant={variant}
       />
+
       {price && !isDisabled && <div className="price">{price}</div>}
+
       {showResources && resources && (
         <AvailabilityIndicator
           resources={resources}

package/src/error/Error.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { ErrorFallback, ErrorFallbackProps } from "./ErrorFallback";
 
 export default {

package/src/error/ErrorFallback.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 
 function ErrorFallback() {

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form } from "react-bootstrap";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
@@ -78,7 +78,7 @@ export function IntervalInput({
     const isOverridenProductSet = productSets.find(
       (productSet) =>
         (editedProductSet && productSet?.id === editedProductSet?.id) ||
-        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId),
+        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
     );
 
     setIsOverriden(Boolean(isOverridenProductSet));

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

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

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import {
   IMAGE_TYPE_IMAGE,
   IMAGE_TYPE_COVER,
@@ -122,7 +122,6 @@ export const EditEventForm = ({
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
   const productSetId = watch("productSetId");
-  const occurrenceStartAtDate = watch("start");
 
   const {
     images,
@@ -227,7 +226,7 @@ export const EditEventForm = ({
                 allowedExtensions={["jpg", "jpeg", "png"]}
                 enablePreview
                 defaultFiles={images?.filter(
-                  (image) => IMAGE_TYPE_MAP[image.imageType] === imageType,
+                  (image) => IMAGE_TYPE_MAP[image.imageType] === imageType
                 )}
                 onFilesChange={(files) => {
                   handleImageUploading(files, imageType);
@@ -404,7 +403,6 @@ export const EditEventForm = ({
             setEditProductSetId={setEditProductSetId}
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
-            occurrenceStartAtDate={occurrenceStartAtDate}
           />
 
           {hasPermission && !showEditProductSet && (
@@ -430,7 +428,7 @@ export const EditEventForm = ({
 };
 
 const sanitizeDefaultValues = (
-  values?: Partial<EditEventFormValues>,
+  values?: Partial<EditEventFormValues>
 ): Partial<EditEventFormValues> => {
   /**
    * Removes redundant info from ISO 8601 datetime string to make it comply with

package/src/events/edit-event-modal/component/EditEventForm/index.ts

@@ -1,2 +1 @@
-export { EditEventForm } from "./EditEventForm";
-export type { EditEventFormProps, EditEventFormValues } from "./EditEventForm";
+export { EditEventForm, EditEventFormValues } from "./EditEventForm";

package/src/events/edit-event-modal/component/ProductSetShortForm/ProductSetShortForm.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Form, Col, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useId } from "@react-aria/utils";

package/src/events/edit-event-modal/component/SaleDeadline/SaleDeadline.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext, Controller } from "react-hook-form";
@@ -30,14 +30,14 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
     formState: { errors },
   } = useFormContext<SaleDeadlineType>();
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
-    SALE_DEADLINE_BEFORE_TYPE,
+    SALE_DEADLINE_BEFORE_TYPE
   );
   const saleDeadline = watch("saleDeadline");
 
   useEffect(() => {
     if (saleDeadline) {
       setDeadlineType(
-        saleDeadline < 0 ? SALE_DEADLINE_BEFORE_TYPE : SALE_DEADLINE_AFTER_TYPE,
+        saleDeadline < 0 ? SALE_DEADLINE_BEFORE_TYPE : SALE_DEADLINE_AFTER_TYPE
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,31 +83,19 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
 
           const changeDays = (nextDaysValue: number) => {
             setSaleDeadlineValue(
-              EventService.fromTimeToSaleDeadline(
-                nextDaysValue,
-                hours,
-                minutes,
-              ),
+              EventService.fromTimeToSaleDeadline(nextDaysValue, hours, minutes)
             );
           };
 
           const changeHours = (nextHoursValue: number) => {
             setSaleDeadlineValue(
-              EventService.fromTimeToSaleDeadline(
-                days,
-                nextHoursValue,
-                minutes,
-              ),
+              EventService.fromTimeToSaleDeadline(days, nextHoursValue, minutes)
             );
           };
 
           const changeMinutes = (nextMinutesValue: number) => {
             setSaleDeadlineValue(
-              EventService.fromTimeToSaleDeadline(
-                days,
-                hours,
-                nextMinutesValue,
-              ),
+              EventService.fromTimeToSaleDeadline(days, hours, nextMinutesValue)
             );
           };
 

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Form } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
@@ -15,7 +15,6 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
-  occurrenceStartAtDate: string;
 }
 
 export const SelectEventProductSet = ({
@@ -24,7 +23,6 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
-  occurrenceStartAtDate,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -43,7 +41,7 @@ export const SelectEventProductSet = ({
   const editedProductSet = watch("editedProductSet");
 
   const selectedProductSet = productSets.find(
-    (productSet) => productSet.id === productSetId,
+    (productSet) => productSet.id === productSetId
   )?.parentMenuId;
 
   const onEditProductSet = useCallback(
@@ -52,7 +50,7 @@ export const SelectEventProductSet = ({
       setShowEditProductSet(true);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [productSetId],
+    [productSetId]
   );
 
   const revertEditProductSet = () => {
@@ -75,7 +73,7 @@ export const SelectEventProductSet = ({
 
   const onChangeProductSet = (
     value: number,
-    confirm: (action: () => void) => void,
+    confirm: (action: () => void) => void
   ) => {
     if (editedProductSet) {
       confirm(() => {
@@ -90,11 +88,8 @@ export const SelectEventProductSet = ({
     setValue("productSetId", value);
   };
 
-  const showOverrideProductSet = !showEditProductSet && productSetId;
-
-  const isOverrideProductSet = productSets.find(
-    (productSet) => productSet.id === productSetId,
-  )?.isOverride;
+  const showOverrideProductSet =
+    !showEditProductSet && productSetId && !selectedProductSet;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues["editedProductSet"]) => {
@@ -127,7 +122,7 @@ export const SelectEventProductSet = ({
                             onChange={(e) =>
                               onChangeProductSet(
                                 Number(e.target.value),
-                                confirm,
+                                confirm
                               )
                             }
                             isInvalid={Boolean(errors.productSetId)}
@@ -146,7 +141,7 @@ export const SelectEventProductSet = ({
                                   value={productSet.id}
                                 >
                                   {isCurrentEditedProductSet ||
-                                  productSet.isOverride
+                                  productSet?.parentMenuId
                                     ? `[${t("edited")}] ${
                                         isCurrentEditedProductSet
                                           ? editedProductSet?.name
@@ -177,9 +172,7 @@ export const SelectEventProductSet = ({
                           className="btn product-set-button "
                           onClick={onEditProductSet}
                         >
-                          {isOverrideProductSet
-                            ? t("editOverrides")
-                            : t("editProductSet")}
+                          {t("editProductSet")}
                         </Button>
                       )}
                       {showEditProductSet && (
@@ -213,13 +206,14 @@ export const SelectEventProductSet = ({
         </Form.Group>
       </div>
       {showEditProductSet && productSetId && (
-        <EditEventProductSet
-          onSubmit={onSubmit}
-          occurrenceStartAtDate={occurrenceStartAtDate}
-          defaultValues={
-            productSetId === editedProductSet?.id && editedProductSet
-          }
-        />
+        <>
+          <EditEventProductSet
+            onSubmit={onSubmit}
+            defaultValues={
+              productSetId === editedProductSet?.id && editedProductSet
+            }
+          />
+        </>
       )}
     </>
   );

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Button, Form } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 import { isEqual } from "lodash";
@@ -22,13 +22,11 @@ export interface EventDates {
 interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
-  occurrenceStartAtDate: string;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
-  occurrenceStartAtDate,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string;
@@ -78,7 +76,7 @@ export const EditEventProductSet = ({
 
   const feeInPercent = String(systemSettings?.feeInPercent || DEFAULT_FEE);
   const selectedCompany = companies?.find(
-    (company) => String(company?.id) === companyId,
+    (company) => String(company?.id) === companyId
   );
 
   const productGroupList = useMemo(() => {
@@ -113,11 +111,11 @@ export const EditEventProductSet = ({
           <ProductSetControl
             smsTemplates={getFilteredTemplates(
               smsTemplates,
-              formValues?.smsTemplates,
+              formValues?.smsTemplates
             )}
             emailTemplates={getFilteredTemplates(
               emailTemplates,
-              formValues?.emailTemplates,
+              formValues?.emailTemplates
             )}
             showEmailTemplate={!!emailTemplates}
             showSmsTemplate={!!smsTemplates}
@@ -127,8 +125,6 @@ export const EditEventProductSet = ({
             fee={feeInPercent}
             isEventEditProductSet
             isOverrides
-            occurrenceStartAtDate={occurrenceStartAtDate}
-            workHours={undefined}
           />
           <Button
             disabled={isLoading}

package/src/events/edit-event-modal/hooks/useFormattedDuration.tsx

@@ -13,7 +13,7 @@ export const useFormattedDuration = () => {
   const duration = useMemo(() => {
     const interval = Interval.fromDateTimes(
       DateTime.fromISO(start),
-      DateTime.fromISO(end),
+      DateTime.fromISO(end)
     ).toDuration(["days", "hours", "minutes"]);
 
     if (!interval.isValid) return undefined;
@@ -31,7 +31,7 @@ export const useFormattedDuration = () => {
 
     return formatList(
       units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" },
+      { style: "long", type: "unit" }
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [start, end]);

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -8,7 +8,7 @@ import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
   productSet?: ProductSet | null,
-  hasNoRecurrences?: boolean,
+  hasNoRecurrences?: boolean
 ): ProductSetFormValues => ({
   id: productSet?.id ?? 0,
   name: productSet?.name ?? "",
@@ -33,16 +33,19 @@ export const getDefaultValues = (
         productCategories?.map(({ products, ...productCategory }) => ({
           ...productCategory,
           products:
-            products?.map(({ subProducts, ...product }) => ({
+            products?.map(({ zoneId, subProducts, ...product }) => ({
               ...product,
-              subProducts: subProducts?.map(({ ...subProducts }) => ({
+              subProducts: subProducts?.map(({ zoneId, ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
+                zoneId,
               })),
               productCategoryId: undefined,
+              zoneId,
             })) ?? [],
         })) ?? [],
       venueMapSetId: step?.venueMapSet ? step?.venueMapSet?.id : null,
     })) ?? [],
-  menuRecurrences: hasNoRecurrences ? [] : (productSet?.menuRecurrences ?? []),
+  menuRecurrences: hasNoRecurrences ? [] : productSet?.menuRecurrences ?? [],
 });

package/src/events/edit-event-modal/utils/removeRruleCount.ts

@@ -2,7 +2,7 @@ import RRule from "rrule";
 
 export const removeRruleCount = (rrule: string) => {
   const options = RRule.parseString(
-    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
+    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule
   );
 
   if (options.count) {

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

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

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { Form, Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export const MODE_THIS_EVENT = "thisEvent";
 export const MODE_THIS_AND_FOLLOWING_EVENTS = "thisAndFollowingEvents";
@@ -21,7 +22,7 @@ export const RECURRENT_MODE_TYPES_LIST = {
   [MODE_ALL_EVENTS]: 3,
 };
 
-export type RecurrentEventMode = (typeof MODES)[number];
+export type RecurrentEventMode = typeof MODES[number];
 
 export type EditRecurrentEventModalValues = {
   mode: RecurrentEventMode;
@@ -62,7 +63,7 @@ export const EditRecurrentEventModal = ({
         <Modal.Header className="border-0">
           <Modal.Title as="h6">{title}</Modal.Title>
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <FaTimes size={16} />
+            <Icon type="times" height="1rem" />
           </Button>
         </Modal.Header>
         <Modal.Body className="p-0 ml-4">

package/src/events/event-card/EventCard.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { boolean } from "@storybook/addon-knobs";
 import { EventCard, EventCardProps } from "./EventCard";
 import { EventCardSkeleton } from "./EventCardSkeleton";