@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -1,46 +1,46 @@
-import { ReactNode, useContext, useEffect } from "react";
-import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
+import { ReactNode, useContext, useEffect } from 'react'
+import { useWindowDimensions } from '@licklist/plugins/dist/hooks/Media/useWindowDimensions'
 import {
   WindowScroller,
   WindowScrollerProps,
   WindowScrollerChildProps,
-} from "react-virtualized";
-import { VirtualizedContext, VirtualizedContextProvider } from "../context";
+} from 'react-virtualized'
+import { VirtualizedContext, VirtualizedContextProvider } from '../context'
 
 export type VirtualizedWindowScrollerChildProps = {
-  windowDimensions: { width: number; height: number };
-} & WindowScrollerChildProps;
+  windowDimensions: { width: number; height: number }
+} & WindowScrollerChildProps
 
 export type VirtualizedWindowScrollerProps = Omit<
   WindowScrollerProps,
-  "children"
+  'children'
 > & {
-  children: (props: VirtualizedWindowScrollerChildProps) => ReactNode;
-  onDataUpdate?: () => void;
-};
+  children: (props: VirtualizedWindowScrollerChildProps) => ReactNode
+  onDataUpdate?: () => void
+}
 
 export type WrappedVirtualizedWindowScrollerProps = Omit<
   WindowScrollerProps,
-  "children"
+  'children'
 > & {
-  children: VirtualizedWindowScrollerChildProps;
-};
+  children: VirtualizedWindowScrollerChildProps
+}
 
 const WrappedVirtualizedWindowScroller = ({
   scrollElement,
   children,
   onDataUpdate,
 }: VirtualizedWindowScrollerProps) => {
-  const windowDimensions = useWindowDimensions();
-  const { gridRef } = useContext(VirtualizedContext);
+  const windowDimensions = useWindowDimensions()
+  const { gridRef } = useContext(VirtualizedContext)
 
   useEffect(() => {
-    gridRef?.recomputeGridSize();
-    if (!onDataUpdate) return;
+    gridRef?.recomputeGridSize()
+    if (!onDataUpdate) return
 
-    onDataUpdate();
+    onDataUpdate()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [windowDimensions]);
+  }, [windowDimensions])
 
   return (
     <WindowScroller scrollElement={scrollElement}>
@@ -51,15 +51,13 @@ const WrappedVirtualizedWindowScroller = ({
         })
       }
     </WindowScroller>
-  );
-};
+  )
+}
 
 export const VirtualizedWindowScroller = (
   props: VirtualizedWindowScrollerProps,
-) => {
-  return (
-    <VirtualizedContextProvider>
-      <WrappedVirtualizedWindowScroller {...props} />
-    </VirtualizedContextProvider>
-  );
-};
+) => (
+  <VirtualizedContextProvider>
+    <WrappedVirtualizedWindowScroller {...props} />
+  </VirtualizedContextProvider>
+)

package/src/virtualized/context/VirtualizedContext.tsx

@@ -1,33 +1,34 @@
-import { ReactNode, createContext, useMemo, useState } from "react";
-import { Grid } from "react-virtualized";
+import { ReactNode, createContext, useMemo, useState } from 'react'
+import { Grid } from 'react-virtualized'
 
 export type VirtualizedContextProps = {
-  gridRef: Grid | null;
-  setGridRef: (element: Grid | null) => void;
-};
+  gridRef: Grid | null
+  setGridRef: (element: Grid | null) => void
+}
 
-export type VirtualizedContextProviderProps = { children?: ReactNode };
+export type VirtualizedContextProviderProps = { children?: ReactNode }
 
 export const VirtualizedContext = createContext<VirtualizedContextProps>({
   gridRef: null,
   setGridRef: () => undefined,
-});
+})
 
 export const VirtualizedContextProvider = ({
   children,
 }: VirtualizedContextProviderProps) => {
-  const [gridRef, setGridRef] = useState(null);
+  const [gridRef, setGridRef] = useState(null)
 
-  const memoedContextValues = useMemo(() => {
-    return {
+  const memoedContextValues = useMemo(
+    () => ({
       gridRef,
       setGridRef,
-    };
-  }, [gridRef]);
+    }),
+    [gridRef],
+  )
 
   return (
     <VirtualizedContext.Provider value={memoedContextValues}>
       {children}
     </VirtualizedContext.Provider>
-  );
-};
+  )
+}

package/src/virtualized/context/index.ts

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

package/src/virtualized/index.ts

@@ -1,3 +1,3 @@
-export * from "./components/VirtualizedGrid";
-export * from "./components/VirtualizedWindowScroller";
-export * from "./context";
+export * from './components/VirtualizedGrid'
+export * from './components/VirtualizedWindowScroller'
+export * from './context'

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

@@ -1,14 +1,14 @@
-import { Meta, Story } from "@storybook/react";
-import { ZoneCard, ZoneCardProps } from "./ZoneCard";
+import { Meta, Story } from '@storybook/react'
+import { ZoneCard, ZoneCardProps } from './ZoneCard'
 
 export default {
-  title: "Zone/Card",
+  title: 'Zone/Card',
   component: ZoneCard,
-} as Meta;
+} as Meta
 
-export const Default: Story<ZoneCardProps> = (args) => <ZoneCard {...args} />;
+export const Default: Story<ZoneCardProps> = (args) => <ZoneCard {...args} />
 
 Default.args = {
-  name: "Zone 1",
+  name: 'Zone 1',
   hasPermission: true,
-};
+}

package/src/zone/card/ZoneCard.tsx

@@ -1,32 +1,32 @@
-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 { MenuButton } from "../../table/MenuButton";
+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 { MenuButton } from '../../table/MenuButton'
 
 export interface ZoneCardProps extends HasPermissionProp {
-  name: string;
-  href: string;
-  onRemove: () => void;
-  className?: string;
+  name: string
+  href: string
+  onRemove: () => void
+  className?: string
 }
 
 export function ZoneCard({
   name,
   href,
   onRemove,
-  className = "",
+  className = '',
   hasPermission = true,
 }: ZoneCardProps) {
-  const { t } = useTranslation("Design");
-  const popoverId = useId();
-  const ZoneCardClasses = `zone-card ${className}`;
-  const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
+  const { t } = useTranslation('Design')
+  const popoverId = useId()
+  const ZoneCardClasses = `zone-card ${className}`
+  const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
   return (
     <div
@@ -50,8 +50,8 @@ export function ZoneCard({
               <Popover
                 id={popoverId}
                 className={clsx(
-                  "zone-card-popover",
-                  !isOverlayVisibile && "d-none",
+                  'zone-card-popover',
+                  !isOverlayVisibile && 'd-none',
                 )}
               >
                 <Popover.Content
@@ -67,10 +67,10 @@ export function ZoneCard({
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
-                                  setIsOverlayVisible(false);
-                                  confirm(onRemove);
+                                  setIsOverlayVisible(false)
+                                  confirm(onRemove)
                                 }}
-                                name={t("remove")}
+                                name={t('remove')}
                                 icon={<FaTrashAlt size={12} />}
                                 className="zone-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
@@ -89,8 +89,8 @@ export function ZoneCard({
               type="button"
               className="zone-card-menu-button"
               onClick={(e) => {
-                e.stopPropagation();
-                setIsOverlayVisible(true);
+                e.stopPropagation()
+                setIsOverlayVisible(true)
               }}
             >
               <FaEllipsisH />
@@ -99,5 +99,5 @@ export function ZoneCard({
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/zone/card/index.ts

@@ -1,2 +1,2 @@
-export { ZoneCard } from "./ZoneCard";
-export type { ZoneCardProps } from "./ZoneCard";
+export { ZoneCard } from './ZoneCard'
+export type { ZoneCardProps } from './ZoneCard'

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

@@ -1,20 +1,20 @@
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { ZoneForm, ZoneFormProps } from "./ZoneForm";
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
+import { ZoneForm, ZoneFormProps } from './ZoneForm'
 
 export default {
-  title: "Zone/Form",
+  title: 'Zone/Form',
   component: ZoneForm,
-} as Meta;
+} as Meta
 
 export const Default: Story<ZoneFormProps> = (args) => {
-  const isLoading = boolean("isLoading", false);
-  return <ZoneForm {...args} isLoading={isLoading} />;
-};
+  const isLoading = boolean('isLoading', false)
+  return <ZoneForm {...args} isLoading={isLoading} />
+}
 
 Default.args = {
   defaultValues: {
-    name: "Zone 1",
+    name: 'Zone 1',
     zoneRecurrences: [],
   },
-};
+}

package/src/zone/form/ZoneForm.tsx

@@ -1,25 +1,25 @@
-import { useEffect } from "react";
-import { useForm, FormProvider } from "react-hook-form";
-import { Form, Row, Col, Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { ZoneControl } from "./components/ZoneControl";
+import { useEffect } from 'react'
+import { useForm, FormProvider } from 'react-hook-form'
+import { Form, Row, Col, Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
+import { ZoneControl } from './components/ZoneControl'
 
 export type ZoneFormProps = {
-  defaultValues?: Partial<Zone>;
-  onSubmit: (values: Partial<Zone>) => void;
-  serverErrors?: ServerError;
-  isLoading?: boolean;
-  workHours: WorkHour[] | undefined;
-  timeZone: string;
-};
+  defaultValues?: Partial<Zone>
+  onSubmit: (values: Partial<Zone>) => void
+  serverErrors?: ServerError
+  isLoading?: boolean
+  workHours: WorkHour[] | undefined
+  timeZone: string
+}
 
 export type ZoneFormValues = Partial<Zone> & {
-  localImageBlobURL?: string;
-};
+  localImageBlobURL?: string
+}
 
 export const ZoneForm = ({
   defaultValues,
@@ -29,30 +29,30 @@ export const ZoneForm = ({
   workHours,
   timeZone,
 }: ZoneFormProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
   const form = useForm<ZoneFormValues>({
-    mode: "onChange",
+    mode: 'onChange',
     defaultValues: { zoneRecurrences: [] },
-  });
+  })
 
-  const { reset, setError, handleSubmit, watch } = form;
-  const formValues = watch();
+  const { reset, setError, handleSubmit, watch } = form
+  const formValues = watch()
 
   const onFormSubmit = ({ localImageBlobURL, ...values }: ZoneFormValues) => {
-    onSubmit(values);
-  };
+    onSubmit(values)
+  }
 
   useEffect(() => {
-    if (!defaultValues) return;
+    if (!defaultValues) return
 
-    reset(defaultValues);
-  }, [defaultValues, reset]);
+    reset(defaultValues)
+  }, [defaultValues, reset])
 
   useEffect(() => {
-    if (!serverErrors) return;
+    if (!serverErrors) return
 
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
   return (
     <FormProvider {...form}>
@@ -74,11 +74,11 @@ export const ZoneForm = ({
               type="submit"
               disabled={isLoading || !formValues.name}
             >
-              {t("saveAndClose")}
+              {t('saveAndClose')}
             </Button>
           </Col>
         </Row>
       </Form>
     </FormProvider>
-  );
-};
+  )
+}

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

@@ -1,28 +1,28 @@
-import { forwardRef, useEffect, useMemo, useImperativeHandle } from "react";
-import { useTranslation } from "react-i18next";
-import { Form } from "react-bootstrap";
-import { UseFormSetError, useForm } from "react-hook-form";
-import { useId } from "@react-aria/utils";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { getCheckboxesByWorkHours } from "../utils/dates";
+import { forwardRef, useEffect, useMemo, useImperativeHandle } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Form } from 'react-bootstrap'
+import { UseFormSetError, useForm } from 'react-hook-form'
+import { useId } from '@react-aria/utils'
+import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
+import { getCheckboxesByWorkHours } from '../utils/dates'
 
 export type AvailableTimesControlRef = {
-  trigger: () => Promise<boolean>;
-  getValues: () => { availableTimes: string[] };
-  setError: UseFormSetError<AvailableTimesForm>;
-};
+  trigger: () => Promise<boolean>
+  getValues: () => { availableTimes: string[] }
+  setError: UseFormSetError<AvailableTimesForm>
+}
 
 type AvailableTimesControlProps = {
-  isLoading: boolean;
-  workHours?: WorkHour[];
-  defaultValues?: string[];
-  startTime?: string;
-  endTime?: string;
-  errorMessage?: string;
-  clearErrorMessage: () => void;
-};
+  isLoading: boolean
+  workHours?: WorkHour[]
+  defaultValues?: string[]
+  startTime?: string
+  endTime?: string
+  errorMessage?: string
+  clearErrorMessage: () => void
+}
 
-type AvailableTimesForm = { availableTimes: string[] };
+type AvailableTimesForm = { availableTimes: string[] }
 
 export const AvailableTimesControl = forwardRef<
   AvailableTimesControlRef,
@@ -38,8 +38,8 @@ export const AvailableTimesControl = forwardRef<
     },
     ref,
   ) => {
-    const nameId = useId();
-    const { t } = useTranslation(["Design", "Validation"]);
+    const nameId = useId()
+    const { t } = useTranslation(['Design', 'Validation'])
 
     const {
       register,
@@ -50,72 +50,68 @@ export const AvailableTimesControl = forwardRef<
       setValue,
       watch,
       setError,
-    } = useForm<AvailableTimesForm>({ mode: "onChange" });
+    } = useForm<AvailableTimesForm>({ mode: 'onChange' })
 
-    const availableTimes = watch("availableTimes") || [];
+    const availableTimes = watch('availableTimes') || []
 
     const checkboxes = useMemo(
       () => getCheckboxesByWorkHours(workHours),
       [workHours],
-    );
+    )
 
-    useImperativeHandle(ref, () => {
-      return {
-        trigger,
-        getValues,
-        setError,
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      trigger,
+      getValues,
+      setError,
+    }))
 
     const onChange = (option: string) => {
-      const isAlreadyChecked = availableTimes.includes(option);
+      const isAlreadyChecked = availableTimes.includes(option)
       if (errorMessage) {
-        clearErrorMessage();
+        clearErrorMessage()
       }
       if (isAlreadyChecked) {
         setValue(
-          "availableTimes",
+          'availableTimes',
           availableTimes.filter((value) => value !== option),
-        );
+        )
 
-        return;
+        return
       }
 
-      setValue("availableTimes", [...availableTimes, option]);
-    };
+      setValue('availableTimes', [...availableTimes, option])
+    }
 
     useEffect(() => {
-      if (!defaultValues) return;
+      if (!defaultValues) return
 
-      reset({ availableTimes: defaultValues });
+      reset({ availableTimes: defaultValues })
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues]);
+    }, [defaultValues])
 
     return (
       <Form.Group controlId={nameId}>
-        <Form.Label>{t("Design:startTimes")}</Form.Label>
+        <Form.Label>{t('Design:startTimes')}</Form.Label>
         <div className="zone-available-times">
-          {checkboxes.map((option) => {
-            return (
-              <Form.Check key={option} inline custom id={option}>
-                <Form.Check.Input
-                  type="checkbox"
-                  value={option}
-                  checked={availableTimes.includes(option)}
-                  onChange={() => onChange(option)}
-                  disabled={isLoading}
-                />
-                <Form.Check.Label>{option}</Form.Check.Label>
-              </Form.Check>
-            );
-          })}
+          {checkboxes.map((option) => (
+            <Form.Check key={option} inline custom id={option}>
+              <Form.Check.Input
+                type="checkbox"
+                value={option}
+                checked={availableTimes.includes(option)}
+                onChange={() => onChange(option)}
+                disabled={isLoading}
+              />
+              <Form.Check.Label>{option}</Form.Check.Label>
+            </Form.Check>
+          ))}
         </div>
 
-        <Form.Control type="hidden" {...register("availableTimes")} />
+        <Form.Control type="hidden" {...register('availableTimes')} />
         <div className="manual-form-error">
           {errors.availableTimes?.message || errorMessage}
         </div>
       </Form.Group>
-    );
+    )
   },
-);
+)

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

@@ -1,28 +1,28 @@
-import { useTranslation } from "react-i18next";
-import { Form } from "react-bootstrap";
-import { useFormContext, Controller } from "react-hook-form";
-import { useId } from "@react-aria/utils";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-import clsx from "clsx";
-import { TipTapEditor } from "../../../tiptap-editor";
+import { useTranslation } from 'react-i18next'
+import { Form } from 'react-bootstrap'
+import { useFormContext, Controller } from 'react-hook-form'
+import { useId } from '@react-aria/utils'
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
+import clsx from 'clsx'
+import { TipTapEditor } from '../../../tiptap-editor'
 
 type DescriptionControlProps = {
-  isLoading: boolean;
-};
+  isLoading: boolean
+}
 
 export const DescriptionControl = ({ isLoading }: DescriptionControlProps) => {
-  const descriptionId = useId();
-  const { t } = useTranslation(["Design", "Validation"]);
+  const descriptionId = useId()
+  const { t } = useTranslation(['Design', 'Validation'])
 
   const {
     formState: { errors },
     control,
-  } = useFormContext<Pick<Zone, "description">>();
+  } = useFormContext<Pick<Zone, 'description'>>()
 
   return (
     <Form.Group controlId={descriptionId}>
-      <Form.Label>{t("Design:description")}*</Form.Label>
+      <Form.Label>{t('Design:description')}*</Form.Label>
 
       <Controller
         render={({ field: { value, onChange } }) => (
@@ -32,7 +32,7 @@ export const DescriptionControl = ({ isLoading }: DescriptionControlProps) => {
             onUpdate={onChange}
             content={value as string}
             disabled={isLoading}
-            className={clsx(errors.description && "is-invalid")}
+            className={clsx(errors.description && 'is-invalid')}
           />
         )}
         rules={{ required: true }}
@@ -40,11 +40,11 @@ export const DescriptionControl = ({ isLoading }: DescriptionControlProps) => {
         name="description"
       />
       <div className="manual-form-error">
-        {HookFormService.hasError(errors.description, "required") &&
-          t("Validation:fieldRequired", {
-            attribute: t("Design:description"),
+        {HookFormService.hasError(errors.description, 'required') &&
+          t('Validation:fieldRequired', {
+            attribute: t('Design:description'),
           })}
       </div>
     </Form.Group>
-  );
-};
+  )
+}