@licklist/design 0.68.1-dev.0 → 0.68.1

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,5 +1,5 @@
-import { useContext, useEffect, useMemo } from 'react'
-import { Col, Form, Row } from 'react-bootstrap'
+import React, { useContext, useEffect, useMemo } from "react";
+import { Col, Form, Row } from "react-bootstrap";
 import {
   ArrayPath,
   Controller,
@@ -8,32 +8,32 @@ import {
   UnpackNestedValue,
   useFormContext,
   useWatch,
-} from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import {
   CategoryType,
   CATEGORY_TYPE_FIXED_DURATION,
   CATEGORY_TYPE_GAME,
-} from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
+} from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
 import {
   FieldNamePrefixPath,
   FormValues,
-} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
-import { HookFormService } from '@licklist/plugins'
-import { ProductZone } from '@licklist/core/dist/DataMapper/Product/ProductZoneDataMapper'
-import { ProductDurationControl } from '../product/duration/ProductDurationControl'
-import { FormNumberInput } from '../../static/form-number-input'
-import { FixedDurationOptions } from '../product/fixed-duration-fields'
-import { ProductSetLoadingContext } from '../form/context'
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { HookFormService } from "@licklist/plugins";
+import { ProductZone } from "@licklist/core/dist/DataMapper/Product/ProductZoneDataMapper";
+import { ProductDurationControl } from "../product/duration/ProductDurationControl";
+import { FormNumberInput } from "../../static/form-number-input";
+import { FixedDurationOptions } from "../product/fixed-duration-fields";
+import { ProductSetLoadingContext } from "../form/context";
 
 export interface ProductZoneControlValues extends FormValues, ProductZone {
-  id: number | null
+  id: number | null;
 }
 
 interface ProductZoneProps<T> extends FieldNamePrefixPath<T> {
-  isOverrides: boolean
-  categoryType?: CategoryType
-  productZonesFieldName: ArrayPath<T>
+  isOverrides: boolean;
+  categoryType?: CategoryType;
+  productZonesFieldName: ArrayPath<T>;
 }
 
 export const ProductZoneControl = <T extends FormValues>({
@@ -42,31 +42,31 @@ export const ProductZoneControl = <T extends FormValues>({
   fieldNamePrefix,
   productZonesFieldName,
 }: ProductZoneProps<T>) => {
-  const { t } = useTranslation(['Design', 'Validation', 'ProductSet'])
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const {
     trigger,
     control,
     setValue,
     clearErrors,
     formState: { errors },
-  } = useFormContext()
+  } = useFormContext();
 
   const productZones = useWatch({
     control,
     name: productZonesFieldName,
-  }) as ProductZoneControlValues[]
+  }) as ProductZoneControlValues[];
 
   const { capacity, zoneId } = useWatch({
     control,
     name: `${fieldNamePrefix}`,
-  })
-  const disabledDuration = capacity === '0' || !capacity
+  });
+  const disabledDuration = capacity === "0" || !capacity;
 
   const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext,
-  )
+    ProductSetLoadingContext
+  );
 
-  const currentZoneData = zones.find((zone) => zone.id === Number(zoneId))
+  const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
 
   const availableZones = useMemo(
     () =>
@@ -75,45 +75,45 @@ export const ProductZoneControl = <T extends FormValues>({
           !productZones.find(
             (productZone) =>
               Number(productZone.zoneId) === zone.id &&
-              productZone.zoneId !== zoneId,
-          ),
+              productZone.zoneId !== zoneId
+          )
       ),
-    [zones, productZones, zoneId],
-  )
+    [zones, productZones, zoneId]
+  );
 
   useEffect(() => {
     if (!disabledDuration) {
-      trigger(`${fieldNamePrefix}.duration` as Path<T>)
-      return
+      trigger(`${fieldNamePrefix}.duration` as Path<T>);
+      return;
     }
     setValue(
       `${fieldNamePrefix}.duration` as Path<T>,
       /* @ts-expect-error 6385 */
-      0 as UnpackNestedValue<PathValue<T, Path<T>>>,
-    )
-    clearErrors(`${fieldNamePrefix}.duration` as Path<T>)
+      0 as UnpackNestedValue<PathValue<T, Path<T>>>
+    );
+    clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabledDuration])
+  }, [disabledDuration]);
 
   const onChangeGameCapacity = (value: number) => {
     if (!currentZoneData?.defaultDuration) {
-      return
+      return;
     }
     setValue(
       `${fieldNamePrefix}.duration` as Path<T>,
       /* @ts-expect-error 6385 */
       (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
         PathValue<T, Path<T>>
-      >,
-    )
-  }
+      >
+    );
+  };
   return (
     <>
       <>
         <Row>
           <Col>
             <Form.Group>
-              <Form.Label>{t('Design:zone')}</Form.Label>
+              <Form.Label>{t("Design:zone")}</Form.Label>
               <Controller
                 control={control}
                 name={`${fieldNamePrefix}.zoneId`}
@@ -123,11 +123,11 @@ export const ProductZoneControl = <T extends FormValues>({
                     disabled={isOverrides}
                     isInvalid={HookFormService.isInvalid(
                       `${fieldNamePrefix}.zoneId`,
-                      errors,
+                      errors
                     )}
                     {...field}
                   >
-                    <option value={null}>{t('Design:choose')}</option>
+                    <option value={null}>{t("Design:choose")}</option>
                     {availableZones.map((zone) => (
                       <option key={zone.id} value={zone.id}>
                         {zone.name}
@@ -138,8 +138,8 @@ export const ProductZoneControl = <T extends FormValues>({
                 rules={{
                   required: {
                     value: providerHasBookingManagement,
-                    message: t('Validation:fieldRequired', {
-                      attribute: t('zone'),
+                    message: t("Validation:fieldRequired", {
+                      attribute: t("zone"),
                     }),
                   },
                 }}
@@ -147,7 +147,7 @@ export const ProductZoneControl = <T extends FormValues>({
               <Form.Control.Feedback type="invalid">
                 {HookFormService.getErrors(
                   `${fieldNamePrefix}.zoneId` as Path<T>,
-                  errors,
+                  errors
                 )}
               </Form.Control.Feedback>
             </Form.Group>
@@ -164,13 +164,13 @@ export const ProductZoneControl = <T extends FormValues>({
           <Col lg={4} md={4}>
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
-              label={t('capacity')}
+              label={t("capacity")}
               disabled={isOverrides}
               rules={{
                 min: {
                   value: 0,
-                  message: t('Validation:fieldMinNumber', {
-                    attribute: t('capacity'),
+                  message: t("Validation:fieldMinNumber", {
+                    attribute: t("capacity"),
                     min: 0,
                   }) as string,
                 },
@@ -179,7 +179,7 @@ export const ProductZoneControl = <T extends FormValues>({
           </Col>
           {disabledDuration && (
             <div className="duration-hint duration-capacity-container">
-              {t('Design:forDurationEditing')}
+              {t("Design:forDurationEditing")}
             </div>
           )}
         </Row>
@@ -191,14 +191,14 @@ export const ProductZoneControl = <T extends FormValues>({
             <Col lg={4} md={4}>
               <FormNumberInput
                 fieldName={`${fieldNamePrefix}.capacity`}
-                label={t('capacity')}
+                label={t("capacity")}
                 onChange={onChangeGameCapacity}
                 disabled={isOverrides}
                 rules={{
                   min: {
                     value: 0,
-                    message: t('Validation:fieldMinNumber', {
-                      attribute: t('capacity'),
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: t("capacity"),
                       min: 1,
                     }) as string,
                   },
@@ -208,23 +208,23 @@ export const ProductZoneControl = <T extends FormValues>({
             <Col lg={4} md={4}>
               <FormNumberInput
                 fieldName={`${fieldNamePrefix}.duration`}
-                label={t('durationMinutes')}
+                label={t("durationMinutes")}
                 disabled={disabledDuration || isOverrides}
                 rules={{
                   min: {
                     value: 0,
-                    message: t('Validation:fieldMinNumber', {
-                      attribute: t('duration'),
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: t("duration"),
                       min: 0,
                     }) as string,
                   },
                   validate: (val) => {
                     if (!disabledDuration && (!val || val < 1)) {
-                      return t('Validation:fieldRequired', {
-                        attribute: t('duration'),
-                      }) as string
+                      return t("Validation:fieldRequired", {
+                        attribute: t("duration"),
+                      }) as string;
                     }
-                    return true
+                    return true;
                   },
                 }}
               />
@@ -232,7 +232,7 @@ export const ProductZoneControl = <T extends FormValues>({
           </Row>
           {disabledDuration && (
             <div className="duration-hint pl-0">
-              {t('Design:forDurationEditing')}
+              {t("Design:forDurationEditing")}
             </div>
           )}
         </>
@@ -243,5 +243,5 @@ export const ProductZoneControl = <T extends FormValues>({
         isOverrides={isOverrides}
       />
     </>
-  )
-}
+  );
+};

package/src/product-set/product-zone/index.ts

@@ -1 +1 @@
-export * from './ProductZoneControl'
+export * from "./ProductZoneControl";

package/src/product-set/step/Step.stories.tsx

@@ -1,57 +1,61 @@
-import { DndContext } from '@dnd-kit/core'
+import { DndContext } from "@dnd-kit/core";
 import {
   arrayMove,
   SortableContext,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
-import { Meta, Story } from '@storybook/react'
-import { useState } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
-import Badge from 'react-bootstrap/Badge'
-import { SortableTree } from '../../sortable-tree'
-import { StepControl, StepControlProps, StepControlValues } from './StepControl'
-import { ProductSetLoadingContext } from '../form/context'
+} from "@dnd-kit/sortable";
+import { Meta, Story } from "@storybook/react";
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import Badge from "react-bootstrap/Badge";
+import { SortableTree } from "../../sortable-tree";
+import {
+  StepControl,
+  StepControlProps,
+  StepControlValues,
+} from "./StepControl";
+import { ProductSetLoadingContext } from "../form/context";
 
 const defaultValues = {
-  name: 'Step #1',
-}
+  name: "Step #1",
+};
 
 export default {
-  title: 'Product Set/Step Control',
+  title: "Product Set/Step Control",
   component: StepControl,
-} as Meta
+} as Meta;
 
 const contextValue = {
   providerHasMap: true,
   isLoading: false,
   setLoading: () => undefined,
-}
+};
 
 export const Default: Story<StepControlProps> = (args) => {
-  const form = useForm<StepControlValues>({ mode: 'onChange' })
+  const form = useForm<StepControlValues>({ mode: "onChange" });
   return (
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <StepControl {...args} />
       </FormProvider>
     </ProductSetLoadingContext.Provider>
-  )
-}
+  );
+};
 
 export const WithData: Story<StepControlProps> = (args) => {
-  const form = useForm<StepControlValues>({ mode: 'onChange', defaultValues })
+  const form = useForm<StepControlValues>({ mode: "onChange", defaultValues });
   return (
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <StepControl {...args} />
       </FormProvider>
     </ProductSetLoadingContext.Provider>
-  )
-}
+  );
+};
 
 export const WithSortable: Story<StepControlProps> = (args) => {
-  const [items, setItems] = useState(['1', '2', '3'])
-  const form = useForm<StepControlValues>({ mode: 'onChange', defaultValues })
+  const [items, setItems] = useState(["1", "2", "3"]);
+  const form = useForm<StepControlValues>({ mode: "onChange", defaultValues });
 
   return (
     <ProductSetLoadingContext.Provider value={contextValue}>
@@ -71,30 +75,30 @@ export const WithSortable: Story<StepControlProps> = (args) => {
         </FormProvider>
       </DndContext>
     </ProductSetLoadingContext.Provider>
-  )
+  );
 
   function handleDragEnd(event) {
-    const { active, over } = event
+    const { active, over } = event;
 
     if (active.id !== over.id) {
       setItems((items) => {
-        const prevIndex = items.indexOf(active.id)
-        const nextIndex = items.indexOf(over.id)
+        const prevIndex = items.indexOf(active.id);
+        const nextIndex = items.indexOf(over.id);
 
-        return arrayMove(items, prevIndex, nextIndex)
-      })
+        return arrayMove(items, prevIndex, nextIndex);
+      });
     }
   }
-}
+};
 
 Default.args = {
   isLoading: true,
-}
+};
 
 WithData.args = {
   isLoading: false,
-}
+};
 
 WithSortable.args = {
   isLoading: false,
-}
+};

package/src/product-set/step/StepControl.tsx

@@ -1,32 +1,32 @@
-import { useContext } from 'react'
-import { Form, Col, Row } from 'react-bootstrap'
-import { Controller, useFormContext } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
-import { useId } from '@react-aria/utils'
-import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
-import { ProductSetFormValues } from '../form/ProductSetForm'
-import { IsDeletableEvent, ProductCategory } from '../types'
-import { ProductSetLoadingContext } from '../form/context'
-import { BooleanSwitch } from '../../static/switch/BooleanSwitch'
+import { useContext } from "react";
+import { Form, Col, Row } from "react-bootstrap";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { useId } from "@react-aria/utils";
+import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
+import { ProductSetFormValues } from "../form/ProductSetForm";
+import { IsDeletableEvent, ProductCategory } from "../types";
+import { ProductSetLoadingContext } from "../form/context";
+import { BooleanSwitch } from "../../static/switch/BooleanSwitch";
 
 export interface StepControlValues extends FormValues {
-  name: string
-  weight?: number
-  termsAndConditions?: string
-  productCategories?: ProductCategory[]
-  hasMap: boolean
-  venueMapSetId: null | number
-  pointProducts?: Partial<PointProduct>[]
+  name: string;
+  weight?: number;
+  termsAndConditions?: string;
+  productCategories?: ProductCategory[];
+  hasMap: boolean;
+  venueMapSetId: null | number;
+  pointProducts?: Partial<PointProduct>[];
 }
 
 export interface StepControlProps extends IsDeletableEvent {
-  isLoading: boolean
-  stepIndex: number
-  stepName: string
-  onStepNameChange: (args: any) => void
-  isOverrides?: boolean
+  isLoading: boolean;
+  stepIndex: number;
+  stepName: string;
+  onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -36,30 +36,30 @@ export function StepControl({
   onStepNameChange,
   isOverrides = false,
 }: StepControlProps) {
-  const { providerHasMap } = useContext(ProductSetLoadingContext)
+  const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
     control,
     formState: { errors },
     clearErrors,
     watch,
-  } = useFormContext<ProductSetFormValues>()
-  const { t } = useTranslation('Design')
-  const fieldName = `steps.${stepIndex}.name` as const
+  } = useFormContext<ProductSetFormValues>();
+  const { t } = useTranslation("Design");
+  const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
-    `steps.${stepIndex}.productCategories` as const
+    `steps.${stepIndex}.productCategories` as const;
 
-  const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories
-  const hasMap = watch(`steps.${stepIndex}.hasMap` as const) || false
+  const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories;
+  const hasMap = watch(`steps.${stepIndex}.hasMap` as const) || false;
 
-  const nameId = useId()
-  const hasMapId = useId()
+  const nameId = useId();
+  const hasMapId = useId();
 
   return (
     <>
       <Row>
         <Col xs sm={6} md lg>
           <Form.Group controlId={nameId}>
-            <Form.Label>{t('name')}</Form.Label>
+            <Form.Label>{t("name")}</Form.Label>
             <Controller
               render={({ field: { name, ref } }) => (
                 <Form.Control
@@ -67,7 +67,7 @@ export function StepControl({
                   value={stepName}
                   onChange={onStepNameChange}
                   name={name}
-                  placeholder={t('name')}
+                  placeholder={t("name")}
                   isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                     fieldName,
                     errors,
@@ -78,18 +78,18 @@ export function StepControl({
               control={control}
               name={fieldName}
               rules={{
-                required: t('Validation:fieldRequired', {
-                  attribute: t('name'),
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
                 }) as string,
                 validate: () => {
                   if (
                     productCategoriesErrors?.type ===
                     HookFormService.manualErrorType
                   ) {
-                    clearErrors(productCategoriesFieldName)
+                    clearErrors(productCategoriesFieldName);
                   }
 
-                  return true
+                  return true;
                 },
               }}
             />
@@ -106,7 +106,7 @@ export function StepControl({
                   controlId={hasMapId}
                   className="d-flex mb-3 align-items-center"
                 >
-                  <Form.Label className="mr-5 m-0">{t('hasAMap')}</Form.Label>
+                  <Form.Label className="mr-5 m-0">{t("hasAMap")}</Form.Label>
 
                   <div>
                     <Controller
@@ -125,7 +125,7 @@ export function StepControl({
                 </Form.Group>
                 {hasMap && (
                   <p className="mt-5 info">
-                    {t('toUseAMapPleaseAddProductsFirst')}
+                    {t("toUseAMapPleaseAddProductsFirst")}
                   </p>
                 )}
               </div>
@@ -134,5 +134,5 @@ export function StepControl({
         </Col>
       </Row>
     </>
-  )
+  );
 }

package/src/product-set/step/index.ts

@@ -1 +1 @@
-export * from './StepControl'
+export * from "./StepControl";

package/src/product-set/tabs/ProductSetTab.tsx

@@ -1,23 +1,23 @@
 /* eslint-disable react/function-component-definition */
-import { useId } from '@react-aria/utils'
-import { FunctionComponent } from 'react'
-import { Tab } from 'react-bootstrap'
+import { useId } from "@react-aria/utils";
+import { FunctionComponent } from "react";
+import { Tab } from "react-bootstrap";
 
 export type ProductSetTabProps = {
-  eventKey?: string
-  title?: string
-}
+  eventKey?: string;
+  title?: string;
+};
 
 export const ProductSetTab: FunctionComponent<ProductSetTabProps> = ({
   eventKey,
   title,
   children,
 }) => {
-  const tabId = useId()
+  const tabId = useId();
 
   return (
     <Tab key={tabId} id={tabId} eventKey={eventKey} title={title}>
       {children}
     </Tab>
-  )
-}
+  );
+};

package/src/product-set/tabs/ProductSetTabs.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta } from '@storybook/react'
-import { ProductSetTabs } from './ProductSetTabs'
+import { Meta } from "@storybook/react";
+import { ProductSetTabs } from "./ProductSetTabs";
 
 export default {
-  title: 'Product Set/Tabs',
+  title: "Product Set/Tabs",
   component: ProductSetTabs,
-} as Meta
+} as Meta;
 
 const mockChildren = (
   <>
@@ -13,7 +13,7 @@ const mockChildren = (
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.
   </>
-)
+);
 
 export function Default(args) {
   return (
@@ -28,9 +28,9 @@ export function Default(args) {
         {mockChildren}
       </ProductSetTabs.Tab>
     </ProductSetTabs>
-  )
+  );
 }
 
 Default.args = {
-  defaultActiveKey: 'first',
-}
+  defaultActiveKey: "first",
+};

package/src/product-set/tabs/ProductSetTabs.tsx

@@ -1,17 +1,17 @@
-import { useId } from '@react-aria/utils'
-import { PropsWithChildren } from 'react'
-import { Tabs } from 'react-bootstrap'
-import { ProductSetTab } from './ProductSetTab'
+import { useId } from "@react-aria/utils";
+import { PropsWithChildren } from "react";
+import { Tabs } from "react-bootstrap";
+import { ProductSetTab } from "./ProductSetTab";
 
 export type ProductSetTabsProps = {
-  defaultActiveKey?: string
-}
+  defaultActiveKey?: string;
+};
 
 export function ProductSetTabs({
   defaultActiveKey,
   children,
 }: PropsWithChildren<ProductSetTabsProps>) {
-  const tabsId = useId()
+  const tabsId = useId();
 
   return (
     <Tabs
@@ -21,7 +21,7 @@ export function ProductSetTabs({
     >
       {children}
     </Tabs>
-  )
+  );
 }
 
-ProductSetTabs.Tab = ProductSetTab
+ProductSetTabs.Tab = ProductSetTab;