@licklist/design 0.68.1 → 0.68.2-dev.1

package/src/recurring-date-picker-input/DatePickerInput.tsx

@@ -1,30 +1,30 @@
-import { PropsWithChildren } from "react";
-import { Frequency } from "rrule";
-import { useTranslation } from "react-i18next";
-import Button from "react-bootstrap/Button";
-import { DateTime } from "luxon";
-import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
-import { FormProvider, useForm } from "react-hook-form";
-import { Form } from "react-bootstrap";
-import { ConfirmModal } from "../modals";
-import { DeleteFieldButton } from "../product-set/elements";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
+import { PropsWithChildren } from 'react'
+import { Frequency } from 'rrule'
+import { useTranslation } from 'react-i18next'
+import Button from 'react-bootstrap/Button'
+import { DateTime } from 'luxon'
+import { TIME_FULL_FORMAT } from '@licklist/core/dist/Config/Date'
+import { FormProvider, useForm } from 'react-hook-form'
+import { Form } from 'react-bootstrap'
+import { ConfirmModal } from '../modals'
+import { DeleteFieldButton } from '../product-set/elements'
+import { RecurringDatePickerInputValues } from './RecurringDatePickerInput'
+import RecurrenceAndFrequencyInput from './RecurrenceAndFrequencyInput'
 
 export interface RecurringDatePickerInputProps {
-  disabled?: boolean;
-  defaultValues?: Partial<RecurringDatePickerInputValues>;
-  onChange: (state: RecurringDatePickerInputValues) => void;
-  onDelete: () => void;
-  initialFrequency?: Frequency;
-  setInitialStartDateAfterSelect?: boolean;
-  minDate?: string;
+  disabled?: boolean
+  defaultValues?: Partial<RecurringDatePickerInputValues>
+  onChange: (state: RecurringDatePickerInputValues) => void
+  onDelete: () => void
+  initialFrequency?: Frequency
+  setInitialStartDateAfterSelect?: boolean
+  minDate?: string
 }
 
 export interface DatePickerInputValues {
-  startDate: string;
-  startTime: string;
-  endTime: string;
+  startDate: string
+  startTime: string
+  endTime: string
 }
 
 export function DatePickerInput({
@@ -35,29 +35,29 @@ export function DatePickerInput({
   children,
   minDate,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
-  const { t } = useTranslation(["Design"]);
+  const { t } = useTranslation(['Design'])
 
   const form = useForm<DatePickerInputValues>({
     defaultValues: {
-      startDate: defaultValues?.startDate ?? "",
-      startTime: defaultValues?.startTime ?? "",
-      endTime: defaultValues?.endTime ?? "",
+      startDate: defaultValues?.startDate ?? '',
+      startTime: defaultValues?.startTime ?? '',
+      endTime: defaultValues?.endTime ?? '',
     },
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const { handleSubmit } = form;
+  const { handleSubmit } = form
 
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const endTimeNextState = nextState?.endTime
       ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
+      : ''
 
     onChange({
       ...nextState,
       endTime: endTimeNextState,
-    });
-  };
+    })
+  }
 
   return (
     <FormProvider {...form}>
@@ -65,10 +65,10 @@ export function DatePickerInput({
         noValidate
         onSubmit={(event) => {
           // prevents parent form submitting
-          event.preventDefault();
-          event.stopPropagation();
+          event.preventDefault()
+          event.stopPropagation()
           /* @ts-expect-error 2345 */
-          return handleSubmit(onSubmit)(event);
+          return handleSubmit(onSubmit)(event)
         }}
       >
         <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
@@ -76,7 +76,7 @@ export function DatePickerInput({
         {children}
 
         <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t("Design:apply")}</Button>
+          <Button type="submit">{t('Design:apply')}</Button>
 
           {defaultValues && (
             <div className="d-flex justify-content-end delete-btn">
@@ -90,5 +90,5 @@ export function DatePickerInput({
         </div>
       </Form>
     </FormProvider>
-  );
+  )
 }

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -1,25 +1,25 @@
-import { useEffect } from "react";
-import { DateTime } from "luxon";
-import { Col, Form, Row } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { RegisterOptions, useFormContext } from "react-hook-form";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+import { useEffect } from 'react'
+import { DateTime } from 'luxon'
+import { Col, Form, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { RegisterOptions, useFormContext } from 'react-hook-form'
+import { RecurringDatePickerInputValues } from './RecurringDatePickerInput'
 
 interface RecurrenceIntervalAndFrequencyInputProps {
-  disabled?: boolean;
-  minDate?: string;
-  startDateLabel?: string;
-  startTimeLabel?: string;
-  endDateLabel?: string;
-  endTimeLabel?: string;
+  disabled?: boolean
+  minDate?: string
+  startDateLabel?: string
+  startTimeLabel?: string
+  endDateLabel?: string
+  endTimeLabel?: string
   startTimeRules?: Pick<
     RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
+    'max' | 'min' | 'validate' | 'required' | 'pattern'
+  >
   endTimeRules?: Pick<
     RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
+    'max' | 'min' | 'validate' | 'required' | 'pattern'
+  >
 }
 
 function RecurrenceAndFrequencyInput({
@@ -31,38 +31,38 @@ function RecurrenceAndFrequencyInput({
   startTimeRules,
   endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
-  const { t } = useTranslation(["Design", "Notification", "App"]);
+  const { t } = useTranslation(['Design', 'Notification', 'App'])
 
   const {
     getValues,
     formState: { errors },
     register,
     trigger,
-  } = useFormContext<RecurringDatePickerInputValues>();
+  } = useFormContext<RecurringDatePickerInputValues>()
 
-  const startDate = getValues("startDate");
-  const startTime = getValues("startTime");
-  const endTime = getValues("endTime");
+  const startDate = getValues('startDate')
+  const startTime = getValues('startTime')
+  const endTime = getValues('endTime')
 
   useEffect(() => {
     if (!startTime || !endTime) {
-      return;
+      return
     }
-    trigger("endTime");
+    trigger('endTime')
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime]);
+  }, [startTime])
 
   return (
     <>
       <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:date")}</Form.Label>
+            <Form.Label>{startDateLabel ?? t('Design:date')}</Form.Label>
             <Form.Control
               type="date"
-              {...register("startDate", { required: true })}
+              {...register('startDate', { required: true })}
               defaultValue={startDate}
-              className={startDate && "date-input-with-value"}
+              className={startDate && 'date-input-with-value'}
               disabled={disabled}
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
@@ -78,11 +78,11 @@ function RecurrenceAndFrequencyInput({
         <Col xs={12} sm={6}>
           <Form.Group>
             <Form.Label>
-              {startTimeLabel ?? t("Design:availableFrom")}
+              {startTimeLabel ?? t('Design:availableFrom')}
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
+              {...register('startTime', { required: false, ...startTimeRules })}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
@@ -96,25 +96,25 @@ function RecurrenceAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
+            <Form.Label>{endTimeLabel ?? t('Design:availableTo')}</Form.Label>
             <Form.Control
               type="time"
-              {...register("endTime", {
+              {...register('endTime', {
                 required: false,
                 validate: (time) => {
                   if (!startTime || !time) {
-                    return true;
+                    return true
                   }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
+                  const currentStartTime = DateTime.fromISO(startTime)
+                  const currentEndTime = DateTime.fromISO(time)
 
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                  return currentEndTime?.diff(currentStartTime, ['minutes'])
                     ?.minutes >= 0
                     ? true
                     : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
+                        attribute: t('Design:endTimeSmall'),
+                        min: t('Design:startTimeSmall'),
+                      })}`
                 },
                 ...endTimeRules,
               })}
@@ -130,7 +130,7 @@ function RecurrenceAndFrequencyInput({
         </Col>
       </Row>
     </>
-  );
+  )
 }
 
-export default RecurrenceAndFrequencyInput;
+export default RecurrenceAndFrequencyInput

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -1,19 +1,19 @@
-import { useRef } from "react";
-import { useId } from "@react-aria/utils";
-import { DateTime, DurationUnit } from "luxon";
-import { Col, Form, InputGroup, Row } from "react-bootstrap";
-import RRule from "rrule";
+import { useRef } from 'react'
+import { useId } from '@react-aria/utils'
+import { DateTime, DurationUnit } from 'luxon'
+import { Col, Form, InputGroup, Row } from 'react-bootstrap'
+import RRule from 'rrule'
 
-import { SupportedFrequency } from "./utils";
-import HTMLInputDateElement from "../types/static/HTMLInputDateElement";
+import { SupportedFrequency } from './utils'
+import HTMLInputDateElement from '../types/static/HTMLInputDateElement'
 
 interface Props {
-  disabled?: boolean;
-  date: string;
-  frequency: SupportedFrequency;
-  until?: string;
-  count?: number;
-  onChange: (values: { until?: string; count?: number }) => void;
+  disabled?: boolean
+  date: string
+  frequency: SupportedFrequency
+  until?: string
+  count?: number
+  onChange: (values: { until?: string; count?: number }) => void
 }
 
 function RecurrenceEndInput({
@@ -25,10 +25,10 @@ function RecurrenceEndInput({
   onChange,
 }: Props) {
   // unique ids for radios
-  const neverId = useId();
-  const onId = useId();
-  const afterId = useId();
-  const dateInput = useRef<HTMLInputDateElement | null>(null);
+  const neverId = useId()
+  const onId = useId()
+  const afterId = useId()
+  const dateInput = useRef<HTMLInputDateElement | null>(null)
 
   return (
     <Form.Group>
@@ -63,7 +63,7 @@ function RecurrenceEndInput({
               disabled={disabled || !until}
               aria-label="Date on which the recurrence ends"
               value={until ?? getUntil({ date, frequency })}
-              className={until && "date-input-with-value"}
+              className={until && 'date-input-with-value'}
               ref={dateInput}
               onClick={() => dateInput?.current?.showPicker()}
               onChange={({ target: { value } }) => onChange({ until: value })}
@@ -106,7 +106,7 @@ function RecurrenceEndInput({
         </Row>
       </Form.Check>
     </Form.Group>
-  );
+  )
 }
 
 const defaultOccurrences = {
@@ -114,24 +114,24 @@ const defaultOccurrences = {
   [RRule.WEEKLY]: 13,
   [RRule.MONTHLY]: 12,
   [RRule.YEARLY]: 5,
-};
+}
 
 const getUntil = ({
   date,
   frequency,
 }: {
-  date: string;
-  frequency: SupportedFrequency;
+  date: string
+  frequency: SupportedFrequency
 }) => {
   const unit: DurationUnit = {
-    [RRule.DAILY]: "days" as const,
-    [RRule.WEEKLY]: "weeks" as const,
-    [RRule.MONTHLY]: "months" as const,
-    [RRule.YEARLY]: "years" as const,
-  }[frequency];
+    [RRule.DAILY]: 'days' as const,
+    [RRule.WEEKLY]: 'weeks' as const,
+    [RRule.MONTHLY]: 'months' as const,
+    [RRule.YEARLY]: 'years' as const,
+  }[frequency]
   return DateTime.fromISO(date)
     .plus({ [unit]: defaultOccurrences[frequency] })
-    .toISODate();
-};
+    .toISODate()
+}
 
-export default RecurrenceEndInput;
+export default RecurrenceEndInput

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -1,33 +1,33 @@
-import { useEffect } from "react";
-import { DateTime } from "luxon";
-import { Col, Form, Row } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
+import { useEffect } from 'react'
+import { DateTime } from 'luxon'
+import { Col, Form, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
 import {
   RegisterOptions,
   useFormContext,
   useWatch,
   Validate,
-} from "react-hook-form";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import { fromIso } from "@licklist/core/dist/Services";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+} from 'react-hook-form'
+import { TIME_FORMAT } from '@licklist/core/dist/Config'
+import { fromIso } from '@licklist/core/dist/Services'
+import { RecurringDatePickerInputValues } from './RecurringDatePickerInput'
 
 interface RecurrenceIntervalAndFrequencyInputProps {
-  disabled?: boolean;
-  minDate?: string;
-  startDateLabel?: string;
-  startTimeLabel?: string;
-  endDateLabel?: string;
-  endTimeLabel?: string;
+  disabled?: boolean
+  minDate?: string
+  startDateLabel?: string
+  startTimeLabel?: string
+  endDateLabel?: string
+  endTimeLabel?: string
   startTimeRules?: Pick<
     RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
+    'max' | 'min' | 'validate' | 'required' | 'pattern'
+  >
   endTimeRules?: Pick<
     RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-  timeZone: string;
+    'max' | 'min' | 'validate' | 'required' | 'pattern'
+  >
+  timeZone: string
 }
 
 function RecurrenceIntervalAndFrequencyInput({
@@ -41,52 +41,52 @@ function RecurrenceIntervalAndFrequencyInput({
   endTimeRules,
   timeZone,
 }: RecurrenceIntervalAndFrequencyInputProps) {
-  const { t } = useTranslation(["Design", "Notification", "App"]);
+  const { t } = useTranslation(['Design', 'Notification', 'App'])
 
   const {
     formState: { errors },
     register,
     trigger,
     control,
-  } = useFormContext<RecurringDatePickerInputValues>();
+  } = useFormContext<RecurringDatePickerInputValues>()
 
-  const startDate = useWatch({ control, name: "startDate" });
-  const endDate = useWatch({ control, name: "endDate" });
+  const startDate = useWatch({ control, name: 'startDate' })
+  const endDate = useWatch({ control, name: 'endDate' })
 
-  const _startTime = useWatch({ control, name: "startTime" });
+  const _startTime = useWatch({ control, name: 'startTime' })
   const startTime =
-    _startTime && fromIso(_startTime, timeZone).toFormat(TIME_FORMAT);
+    _startTime && fromIso(_startTime, timeZone).toFormat(TIME_FORMAT)
 
-  const _endTime = useWatch({ control, name: "endTime" });
-  const endTime = _endTime && fromIso(_endTime, timeZone).toFormat(TIME_FORMAT);
+  const _endTime = useWatch({ control, name: 'endTime' })
+  const endTime = _endTime && fromIso(_endTime, timeZone).toFormat(TIME_FORMAT)
 
   useEffect(() => {
     if (!startDate || !endDate) {
-      return;
+      return
     }
-    trigger(`endDate`);
+    trigger(`endDate`)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startDate]);
+  }, [startDate])
 
   useEffect(() => {
     if (!startTime || !endTime) {
-      return;
+      return
     }
-    trigger("endTime");
+    trigger('endTime')
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime]);
+  }, [startTime])
 
   return (
     <>
       <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
+            <Form.Label>{startDateLabel ?? t('Design:fromDate')}</Form.Label>
             <Form.Control
               type="date"
-              {...register("startDate", { required: true })}
+              {...register('startDate', { required: true })}
               defaultValue={startDate}
-              className={startDate && "date-input-with-value"}
+              className={startDate && 'date-input-with-value'}
               disabled={disabled}
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
@@ -99,28 +99,28 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
+            <Form.Label>{endDateLabel ?? t('Design:toDate')}</Form.Label>
             <Form.Control
               type="date"
-              {...register("endDate", {
+              {...register('endDate', {
                 required: true,
                 validate: (date) => {
                   if (!startDate || !date) {
-                    return true;
+                    return true
                   }
-                  const currentStartDate = fromIso(startDate, timeZone);
-                  const currentEndDate = fromIso(date, timeZone);
-                  return currentEndDate.diff(currentStartDate, ["days"]).days >=
+                  const currentStartDate = fromIso(startDate, timeZone)
+                  const currentEndDate = fromIso(date, timeZone)
+                  return currentEndDate.diff(currentStartDate, ['days']).days >=
                     0
                     ? true
                     : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endDateSmall"),
-                        min: t("Design:startDateSmall"),
-                      })}`;
+                        attribute: t('Design:endDateSmall'),
+                        min: t('Design:startDateSmall'),
+                      })}`
                 },
               })}
               defaultValue={endDate}
-              className={endDate && "date-input-with-value"}
+              className={endDate && 'date-input-with-value'}
               disabled={disabled}
               min={startDate || undefined}
               isInvalid={Boolean(errors.endDate)}
@@ -136,11 +136,11 @@ function RecurrenceIntervalAndFrequencyInput({
         <Col xs={12} sm={6}>
           <Form.Group>
             <Form.Label>
-              {startTimeLabel ?? t("Design:availableFrom")}
+              {startTimeLabel ?? t('Design:availableFrom')}
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
+              {...register('startTime', { required: false, ...startTimeRules })}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
@@ -154,10 +154,10 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
+            <Form.Label>{endTimeLabel ?? t('Design:availableTo')}</Form.Label>
             <Form.Control
               type="time"
-              {...register("endTime", {
+              {...register('endTime', {
                 required: false,
                 ...endTimeRules,
                 validate: {
@@ -167,18 +167,18 @@ function RecurrenceIntervalAndFrequencyInput({
                     : () => true,
                   time: (time) => {
                     if (!startTime || !time) {
-                      return true;
+                      return true
                     }
-                    const currentStartTime = DateTime.fromISO(startTime);
-                    const currentEndTime = DateTime.fromISO(time);
+                    const currentStartTime = DateTime.fromISO(startTime)
+                    const currentEndTime = DateTime.fromISO(time)
 
-                    return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    return currentEndTime?.diff(currentStartTime, ['minutes'])
                       ?.minutes >= 0
                       ? true
                       : `${t(`Validation:fieldLaterDate`, {
-                          attribute: t("Design:endTimeSmall"),
-                          min: t("Design:startTimeSmall"),
-                        })}`;
+                          attribute: t('Design:endTimeSmall'),
+                          min: t('Design:startTimeSmall'),
+                        })}`
                   },
                 },
               })}
@@ -194,7 +194,7 @@ function RecurrenceIntervalAndFrequencyInput({
         </Col>
       </Row>
     </>
-  );
+  )
 }
 
-export default RecurrenceIntervalAndFrequencyInput;
+export default RecurrenceIntervalAndFrequencyInput

package/src/recurring-date-picker-input/RecurrenceMonthlyRepeatByInput.tsx

@@ -1,13 +1,13 @@
-import { Info } from "luxon";
-import { Form } from "react-bootstrap";
-import { Frequency, Weekday } from "rrule";
-import { getWeekdayForFrequency } from "./utils";
+import { Info } from 'luxon'
+import { Form } from 'react-bootstrap'
+import { Frequency, Weekday } from 'rrule'
+import { getWeekdayForFrequency } from './utils'
 
 interface Props {
-  disabled?: boolean;
-  date: string;
-  value?: Weekday;
-  onChange: (value?: Weekday) => void;
+  disabled?: boolean
+  date: string
+  value?: Weekday
+  onChange: (value?: Weekday) => void
 }
 
 function RecurrenceMonthlyRepeatByInput({
@@ -19,32 +19,32 @@ function RecurrenceMonthlyRepeatByInput({
   const weekday = getWeekdayForFrequency({
     date,
     frequency: Frequency.MONTHLY,
-  });
+  })
   return (
     <Form.Group>
       <Form.Control
         as="select"
         aria-label="Repeat by"
         custom
-        value={value ? "weekday" : "day"}
+        value={value ? 'weekday' : 'day'}
         onChange={({ target: { value } }) =>
-          onChange(value === "weekday" ? weekday : undefined)
+          onChange(value === 'weekday' ? weekday : undefined)
         }
         disabled={disabled}
       >
         <option value="day">Monthly on day {weekday.weekday + 1}</option>
         <option value="weekday">
-          Monthly on the{" "}
+          Monthly on the{' '}
           {
-            { "-1": "last", 1: "first", 2: "second", 3: "third", 4: "fourth" }[
+            { '-1': 'last', 1: 'first', 2: 'second', 3: 'third', 4: 'fourth' }[
               weekday.n!
             ]
-          }{" "}
-          {Info.weekdays("long")[weekday.weekday]}
+          }{' '}
+          {Info.weekdays('long')[weekday.weekday]}
         </option>
       </Form.Control>
     </Form.Group>
-  );
+  )
 }
 
-export default RecurrenceMonthlyRepeatByInput;
+export default RecurrenceMonthlyRepeatByInput