@licklist/design 0.68.1 → 0.68.2-dev.1

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

@@ -1,20 +1,20 @@
-import { Info } from "luxon";
-import { Form, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { Frequency, Weekday } from "rrule";
-import { useFormContext } from "react-hook-form";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-import { getWeekdayForFrequency } from "./utils";
+import { Info } from 'luxon'
+import { Form, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { Frequency, Weekday } from 'rrule'
+import { useFormContext } from 'react-hook-form'
+import { RecurringDatePickerInputValues } from './RecurringDatePickerInput'
+import { getWeekdayForFrequency } from './utils'
 
 interface Props {
-  disabled?: boolean;
-  date: string;
+  disabled?: boolean
+  date: string
 }
 
 function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
   const { getValues, setValue } =
-    useFormContext<RecurringDatePickerInputValues>();
+    useFormContext<RecurringDatePickerInputValues>()
 
-  const value = getValues("byweekday");
+  const value = getValues('byweekday')
 
   return (
     <Form.Group className="d-flex flex-column">
@@ -25,7 +25,7 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
         className="d-flex flex-wrap"
         onChange={(value) =>
           setValue(
-            "byweekday",
+            'byweekday',
             value.length
               ? value
                   .map((weekday) => new Weekday(weekday))
@@ -34,7 +34,7 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
           )
         }
       >
-        {Info.weekdays("long").map((weekday, i) => (
+        {Info.weekdays('long').map((weekday, i) => (
           <ToggleButton
             key={i}
             value={i}
@@ -48,7 +48,7 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
         ))}
       </ToggleButtonGroup>
     </Form.Group>
-  );
+  )
 }
 
-export default RecurrenceWeekdaysInput;
+export default RecurrenceWeekdaysInput

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -1,53 +1,53 @@
-import { Meta, Story } from "@storybook/react";
-import { Card } from "react-bootstrap";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
+import { Meta, Story } from '@storybook/react'
+import { Card } from 'react-bootstrap'
+import { DateTime } from 'luxon'
+import { DATE_FORMAT, TIME_FORMAT } from '@licklist/core/dist/Config/Date'
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputProps,
-} from "./RecurringDatePickerInput";
+} from './RecurringDatePickerInput'
 
 export default {
-  title: "RecurringDatePickerInput",
+  title: 'RecurringDatePickerInput',
   component: RecurringDatePickerInput,
-} as Meta;
+} as Meta
 
 export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
-    <Card style={{ maxWidth: "max-content" }}>
+    <Card style={{ maxWidth: 'max-content' }}>
       <Card.Body>
         <RecurringDatePickerInput {...args} />
       </Card.Body>
     </Card>
-  );
-};
+  )
+}
 export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
-    <Card style={{ maxWidth: "max-content" }}>
+    <Card style={{ maxWidth: 'max-content' }}>
       <Card.Body>
         <RecurringDatePickerInput {...args} />
       </Card.Body>
     </Card>
-  );
-};
+  )
+}
 Default.args = {
-  onChange: (data) => console.log("onSubmit", data),
+  onChange: (data) => console.log('onSubmit', data),
   workHours: [
-    { start: "20:00", end: "04:00", day: 0, description: "" },
-    { start: "20:00", end: "04:00", day: 1, description: "" },
-    { start: "20:00", end: "04:00", day: 2, description: "" },
-    { start: "20:00", end: "12:00", day: 3, description: "" },
-    { start: "20:00", end: "23:00", day: 4, description: "" },
-    { start: "08:00", end: "12:00", day: 5, description: "" },
-    { start: "10:00", end: "16:00", day: 6, description: "" },
+    { start: '20:00', end: '04:00', day: 0, description: '' },
+    { start: '20:00', end: '04:00', day: 1, description: '' },
+    { start: '20:00', end: '04:00', day: 2, description: '' },
+    { start: '20:00', end: '12:00', day: 3, description: '' },
+    { start: '20:00', end: '23:00', day: 4, description: '' },
+    { start: '08:00', end: '12:00', day: 5, description: '' },
+    { start: '10:00', end: '16:00', day: 6, description: '' },
   ],
-};
+}
 Valid.args = {
-  onChange: (data) => console.log("onSubmit", data),
+  onChange: (data) => console.log('onSubmit', data),
   defaultValues: {
     startDate: DateTime.now().toFormat(DATE_FORMAT),
     endDate: DateTime.now().toFormat(DATE_FORMAT),
     startTime: DateTime.now().toFormat(TIME_FORMAT),
     endTime: DateTime.now().plus({ hour: 3 }).toFormat(TIME_FORMAT),
   },
-};
+}

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

@@ -1,52 +1,52 @@
-import { useEffect, useMemo, PropsWithChildren } from "react";
-import RRule, { Frequency, Weekday } from "rrule";
-import { useTranslation } from "react-i18next";
-import Button from "react-bootstrap/Button";
-import { DateTime, Interval, WeekdayNumbers } from "luxon";
-import { useIntl } from "react-intl";
+import { useEffect, useMemo, PropsWithChildren } from 'react'
+import RRule, { Frequency, Weekday } from 'rrule'
+import { useTranslation } from 'react-i18next'
+import Button from 'react-bootstrap/Button'
+import { DateTime, Interval, WeekdayNumbers } from 'luxon'
+import { useIntl } from 'react-intl'
 import {
   DATE_TIME_FORMAT,
   DATE_TIME_FULL_FORMAT,
   TIME_FULL_FORMAT,
-} from "@licklist/core/dist/Config/Date";
-import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
-import { FormProvider, useForm } from "react-hook-form";
-import { Form } from "react-bootstrap";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
-import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
+} from '@licklist/core/dist/Config/Date'
+import { usePreviousValue } from '@licklist/plugins/dist/hooks/Value/usePreviousValue'
+import { FormProvider, useForm } from 'react-hook-form'
+import { Form } from 'react-bootstrap'
+import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
+import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
+import RecurrenceWeekdaysInput from './RecurrenceWeekdaysInput'
 import {
   parseAndValidateRRule,
   SupportedFrequency,
   useWorkHoursValidation,
-} from "./utils";
-import { ConfirmModal } from "../modals";
-import { DeleteFieldButton } from "../product-set/elements";
+} from './utils'
+import { ConfirmModal } from '../modals'
+import { DeleteFieldButton } from '../product-set/elements'
 
 export interface RecurringDatePickerInputProps {
-  disabled?: boolean;
-  defaultValues?: Partial<RecurringDatePickerInputValues>;
-  onChange: (state: RecurringDatePickerInputValues) => void;
-  onDelete: () => void;
-  initialFrequency?: Frequency;
-  setInitialStartDateAfterSelect?: boolean;
-  minDate?: string;
-  workHours: WorkHour[] | undefined;
-  timeZone: string;
+  disabled?: boolean
+  defaultValues?: Partial<RecurringDatePickerInputValues>
+  onChange: (state: RecurringDatePickerInputValues) => void
+  onDelete: () => void
+  initialFrequency?: Frequency
+  setInitialStartDateAfterSelect?: boolean
+  minDate?: string
+  workHours: WorkHour[] | undefined
+  timeZone: string
 }
 
 export interface RecurringDatePickerInputValues {
-  rrule?: string;
-  startDate: string;
-  endDate: string;
-  startTime: string;
-  endTime: string;
-  interval: number;
-  freq: SupportedFrequency;
-  byweekday?: Weekday[];
-  until?: Date;
-  count?: number;
-  withOutEndDate?: boolean;
+  rrule?: string
+  startDate: string
+  endDate: string
+  startTime: string
+  endTime: string
+  interval: number
+  freq: SupportedFrequency
+  byweekday?: Weekday[]
+  until?: Date
+  count?: number
+  withOutEndDate?: boolean
 }
 
 export function RecurringDatePickerInput({
@@ -61,29 +61,29 @@ export function RecurringDatePickerInput({
   workHours,
   timeZone,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
-  const { t } = useTranslation(["Design"]);
+  const { t } = useTranslation(['Design'])
 
   const form = useForm<RecurringDatePickerInputValues>({
     defaultValues: getInitialState({
-      rrule: defaultValues?.rrule ?? "",
-      startDate: defaultValues?.startDate ?? "",
-      endDate: defaultValues?.endDate ?? "",
-      startTime: defaultValues?.startTime ?? "",
-      endTime: defaultValues?.endTime ?? "",
+      rrule: defaultValues?.rrule ?? '',
+      startDate: defaultValues?.startDate ?? '',
+      endDate: defaultValues?.endDate ?? '',
+      startTime: defaultValues?.startTime ?? '',
+      endTime: defaultValues?.endTime ?? '',
       initialFrequency: defaultValues?.freq ?? initialFrequency,
     }),
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const { watch, setValue, handleSubmit } = form;
+  const { watch, setValue, handleSubmit } = form
 
-  const startDate = watch("startDate");
-  const endDate = watch("endDate");
-  const startTime = watch("startTime");
-  const endTime = watch("endTime");
-  const byWeekDay = watch("byweekday");
+  const startDate = watch('startDate')
+  const endDate = watch('endDate')
+  const startTime = watch('startTime')
+  const endTime = watch('endTime')
+  const byWeekDay = watch('byweekday')
 
-  const previousStartDate = usePreviousValue(startDate);
+  const previousStartDate = usePreviousValue(startDate)
 
   const formattedDuration = useFormattedDuration({
     startDate,
@@ -91,12 +91,12 @@ export function RecurringDatePickerInput({
     startTime,
     endTime,
     byWeekDay,
-  });
+  })
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours, timeZone);
+  const validator = useWorkHoursValidation(byWeekDay, workHours, timeZone)
 
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
-    const end = getDateTimeObject(endDate, endTime || "23:59:59");
+    const end = getDateTimeObject(endDate, endTime || '23:59:59')
 
     // Sometimes ge get there an object of Weekday
     // but it not have instance of RRule.Weekday.
@@ -105,19 +105,19 @@ export function RecurringDatePickerInput({
     const byWeekday = Array.isArray(nextState.byweekday)
       ? nextState.byweekday.map((weekDay) => {
           if (weekDay instanceof Weekday) {
-            return weekDay;
+            return weekDay
           }
 
           return new Weekday(
             (weekDay as { weekday: number })?.weekday as number,
-          );
+          )
         })
-      : nextState.byweekday;
+      : nextState.byweekday
 
     const endTimeNextState = nextState?.endTime
       ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
-    const endDateNextState = nextState?.endDate ?? "";
+      : ''
+    const endDateNextState = nextState?.endDate ?? ''
 
     const rrule = RRule.optionsToString({
       // @TODO: investigate if we need these fields
@@ -129,15 +129,15 @@ export function RecurringDatePickerInput({
       // @TODO: adjust for the full recurrence
       freq: byWeekday?.length ? Frequency.WEEKLY : Frequency.DAILY,
       interval: nextState.interval,
-    }).replace("RRULE:", "");
+    }).replace('RRULE:', '')
 
     onChange({
       ...nextState,
       endDate: endDateNextState,
       endTime: endTimeNextState,
       rrule,
-    });
-  };
+    })
+  }
 
   // @TODO: We need this effect to apply start date
   // when user choose day of week when startDate
@@ -155,33 +155,33 @@ export function RecurringDatePickerInput({
       !byWeekDay.length ||
       Number.isNaN(byWeekDay[0]?.weekday)
     )
-      return;
+      return
 
     // Luxon use standard ISO calendar but in that case
     // first weekday from weekdays array start from 0 index.
     // We need to add 1 to it to show correct data
-    const currentWeekDay = (byWeekDay[0]?.weekday + 1) as WeekdayNumbers;
+    const currentWeekDay = (byWeekDay[0]?.weekday + 1) as WeekdayNumbers
 
-    const currentDate = DateTime.local();
+    const currentDate = DateTime.local()
 
     const currentDateWithSelectedWeekday = DateTime.local().set({
       weekday: currentWeekDay,
-    });
+    })
 
     if (
       currentDateWithSelectedWeekday >= currentDate ||
       currentWeekDay === currentDate.weekday
     ) {
-      setValue("startDate", currentDateWithSelectedWeekday.toSQLDate());
-      return;
+      setValue('startDate', currentDateWithSelectedWeekday.toSQLDate())
+      return
     }
 
     setValue(
-      "startDate",
+      'startDate',
       currentDateWithSelectedWeekday.plus({ week: 1 }).toSQLDate(),
-    );
+    )
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [byWeekDay, setInitialStartDateAfterSelect]);
+  }, [byWeekDay, setInitialStartDateAfterSelect])
 
   return (
     <FormProvider {...form}>
@@ -189,9 +189,9 @@ export function RecurringDatePickerInput({
         noValidate
         onSubmit={(event) => {
           // prevents parent form submitting
-          event.preventDefault();
-          event.stopPropagation();
-          return handleSubmit(onSubmit)(event);
+          event.preventDefault()
+          event.stopPropagation()
+          return handleSubmit(onSubmit)(event)
         }}
       >
         <RecurrenceWeekdaysInput date={startDate} disabled={disabled} />
@@ -231,7 +231,7 @@ export function RecurringDatePickerInput({
         {/* /> */}
 
         <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t("Design:apply")}</Button>
+          <Button type="submit">{t('Design:apply')}</Button>
           <div className="d-flex flex-grow-1 text-muted mx-3 flex-column">
             <div>{formattedDuration && `lasts ${formattedDuration}`}</div>
             {/* @TODO: fix issues with RRULE */}
@@ -250,7 +250,7 @@ export function RecurringDatePickerInput({
         </div>
       </Form>
     </FormProvider>
-  );
+  )
 }
 
 const getInitialState = ({
@@ -261,23 +261,21 @@ const getInitialState = ({
   endTime,
   initialFrequency = Frequency.DAILY,
 }: {
-  rrule?: string;
-  startDate: string;
-  endDate: string;
-  startTime: string;
-  endTime: string;
-  initialFrequency: Frequency;
-}): RecurringDatePickerInputValues => {
-  return {
-    startDate,
-    endDate,
-    startTime,
-    endTime,
-    interval: 1,
-    freq: initialFrequency,
-    ...(rrule && parseAndValidateRRule({ rrule, date: startDate })),
-  };
-};
+  rrule?: string
+  startDate: string
+  endDate: string
+  startTime: string
+  endTime: string
+  initialFrequency: Frequency
+}): RecurringDatePickerInputValues => ({
+  startDate,
+  endDate,
+  startTime,
+  endTime,
+  interval: 1,
+  freq: initialFrequency,
+  ...(rrule && parseAndValidateRRule({ rrule, date: startDate })),
+})
 
 const useFormattedDuration = ({
   startDate,
@@ -286,91 +284,93 @@ const useFormattedDuration = ({
   endTime,
   byWeekDay = [],
 }: {
-  startDate: string;
-  endDate: string;
-  startTime: string;
-  endTime: string;
-  byWeekDay: Weekday[];
+  startDate: string
+  endDate: string
+  startTime: string
+  endTime: string
+  byWeekDay: Weekday[]
 }) => {
-  const start = getDateTimeObject(startDate, startTime || "00:00:00");
-  const end = getDateTimeObject(endDate, endTime || "23:59:59");
+  const start = getDateTimeObject(startDate, startTime || '00:00:00')
+  const end = getDateTimeObject(endDate, endTime || '23:59:59')
 
-  const { formatList, formatNumber } = useIntl();
+  const { formatList, formatNumber } = useIntl()
 
   return useMemo(() => {
     if (!(start instanceof DateTime) || !(end instanceof DateTime))
-      return undefined;
-    if (!start.isValid || !end.isValid) return undefined;
+      return undefined
+    if (!start.isValid || !end.isValid) return undefined
 
     const interval = Interval.fromDateTimes(
       start.set({ second: 0 }),
       end.set({ second: 0 }),
-    ).toDuration(["days", "hours", "minutes"]);
+    ).toDuration(['days', 'hours', 'minutes'])
 
-    if (!interval.isValid) return undefined;
+    if (!interval.isValid) return undefined
 
     const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
+      formatNumber(value, { style: 'unit', unit, unitDisplay: 'long' })
 
     const subIntervals = Interval.fromDateTimes(
       start.minus({ second: 1 }),
       end.plus({ second: 1 }),
     ).splitBy({
       days: 1,
-    });
+    })
 
     const occurrences = byWeekDay.length
-      ? subIntervals.reduce((occurrences, subInt) => {
-          return byWeekDay.some(
-            (weekday) => weekday.weekday + 1 === subInt.start.weekday,
-          )
-            ? occurrences + 1
-            : occurrences;
-        }, 0)
-      : 1;
-
-    if (!occurrences) return formatUnit(0, "minute");
+      ? subIntervals.reduce(
+          (occurrences, subInt) =>
+            byWeekDay.some(
+              (weekday) => weekday.weekday + 1 === subInt.start.weekday,
+            )
+              ? occurrences + 1
+              : occurrences,
+          0,
+        )
+      : 1
+
+    if (!occurrences) return formatUnit(0, 'minute')
 
     const units = (
       [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
+        [interval.days, 'day'],
+        [interval.hours, 'hour'],
+        [interval.minutes, 'minute'],
       ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
+    ).filter(([value]) => value)
 
     if (!units.length) {
-      units.push([0, "minute"]);
+      units.push([0, 'minute'])
     }
 
     return formatList(
       units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" },
-    );
-  }, [start, end, byWeekDay, formatList, formatNumber]);
-};
+      { style: 'long', type: 'unit' },
+    )
+  }, [start, end, byWeekDay, formatList, formatNumber])
+}
 
 export const getDateTimeObject = (
   date: string,
   time: string,
 ): DateTime | string => {
-  const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT);
+  const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT)
 
   if (dateTime.isValid) {
-    return dateTime;
+    return dateTime
   }
 
   const dateTimeFull = DateTime.fromFormat(
     `${date} ${time}`,
     DATE_TIME_FULL_FORMAT,
-  );
+  )
 
   if (dateTimeFull.isValid) {
-    return dateTimeFull;
+    return dateTimeFull
   }
 
-  return "";
-};
+  return ''
+}
 
 // @TODO: Resolve issues with RRULE first
 // const getHumanReadableDate = (rrule: string) => {

package/src/recurring-date-picker-input/index.ts

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