@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -1,21 +1,21 @@
-import { useEffect, 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 { DATE_FORMAT } from "@licklist/core/dist/Config";
-import { useTranslation } from "react-i18next";
-import { SupportedFrequency } from "./utils";
-import HTMLInputDateElement from "../types/static/HTMLInputDateElement";
+import { useEffect, 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 { DATE_FORMAT } from '@licklist/core/dist/Config'
+import { useTranslation } from 'react-i18next'
+import { SupportedFrequency } from './utils'
+import HTMLInputDateElement from '../types/static/HTMLInputDateElement'
 
 interface Props {
-  disabled?: boolean;
-  date: string; // yyyy-mm-ddThh:mm
-  minDate?: string; // should be in yyyy-mm-dd format
-  frequency: SupportedFrequency;
-  until?: string; // yyyy-mm-dd
-  count?: number;
-  onChange: (values: { until?: string; count?: number }) => void;
+  disabled?: boolean
+  date: string // yyyy-mm-ddThh:mm
+  minDate?: string // should be in yyyy-mm-dd format
+  frequency: SupportedFrequency
+  until?: string // yyyy-mm-dd
+  count?: number
+  onChange: (values: { until?: string; count?: number }) => void
 }
 
 function RecurrenceEndInput({
@@ -27,29 +27,29 @@ function RecurrenceEndInput({
   onChange,
   minDate,
 }: Props) {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
   // 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)
 
   useEffect(() => {
     const untilDatetime = DateTime.fromFormat(
       until ?? getUntil({ date, frequency }),
       DATE_FORMAT,
-    );
+    )
 
-    const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT);
+    const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT)
 
     if (minDatetime > untilDatetime) {
-      onChange({ until: minDate });
+      onChange({ until: minDate })
     }
-  }, [minDate, onChange, until, date, frequency]);
+  }, [minDate, onChange, until, date, frequency])
 
   return (
     <Form.Group>
-      <Form.Label>{t("ends")}</Form.Label>
+      <Form.Label>{t('ends')}</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -58,7 +58,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>{t("never")}</Form.Check.Label>
+        <Form.Check.Label>{t('never')}</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -72,7 +72,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("on")}</Form.Check.Label>
+            <Form.Check.Label>{t('on')}</Form.Check.Label>
           </Col>
           <Col>
             <Form.Control
@@ -81,7 +81,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 })}
@@ -101,7 +101,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("after")}</Form.Check.Label>
+            <Form.Check.Label>{t('after')}</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -117,14 +117,14 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
+                <InputGroup.Text>{t('occurences')}</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>
         </Row>
       </Form.Check>
     </Form.Group>
-  );
+  )
 }
 
 export const defaultOccurrences = {
@@ -132,24 +132,24 @@ export 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/recurrence-input/RecurrenceInput.stories.tsx

@@ -1,20 +1,20 @@
-import { Meta, Story } from "@storybook/react";
-import { DateTime } from "luxon";
-import { Card } from "react-bootstrap";
-import { RecurrenceInput, RecurrenceInputProps } from "./RecurrenceInput";
+import { Meta, Story } from '@storybook/react'
+import { DateTime } from 'luxon'
+import { Card } from 'react-bootstrap'
+import { RecurrenceInput, RecurrenceInputProps } from './RecurrenceInput'
 
 export default {
-  title: "RecurrenceInput",
+  title: 'RecurrenceInput',
   component: RecurrenceInput,
-} as Meta;
+} as Meta
 
 export const Default: Story<RecurrenceInputProps> = (args) => (
-  <Card style={{ maxWidth: "max-content" }}>
+  <Card style={{ maxWidth: 'max-content' }}>
     <Card.Body>
       <RecurrenceInput {...args} />
     </Card.Body>
   </Card>
-);
+)
 Default.args = {
   date: DateTime.now().toISODate(),
-};
+}

package/src/recurrence-input/RecurrenceInput.tsx

@@ -1,25 +1,25 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { DateTime } from "luxon";
-import { useEffect, useReducer } from "react";
-import RRule, { Frequency, Weekday } from "rrule";
-import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
-import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
-import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
-import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
+import { DateTime } from 'luxon'
+import { useEffect, useReducer } from 'react'
+import RRule, { Frequency, Weekday } from 'rrule'
+import RecurrenceEndInput, { defaultOccurrences } from './RecurrenceEndInput'
+import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
+import RecurrenceMonthlyRepeatByInput from './RecurrenceMonthlyRepeatByInput'
+import RecurrenceWeekdaysInput from './RecurrenceWeekdaysInput'
 import {
   getWeekdayForFrequency,
   parseAndValidateRRule,
   SupportedFrequency,
-} from "./utils";
+} from './utils'
 
 export interface RecurrenceInputProps {
-  disabled?: boolean;
-  date: string;
-  minDate?: string;
-  value?: string;
-  onChange: (value: string) => void;
-  initialFrequency?: Frequency;
+  disabled?: boolean
+  date: string
+  minDate?: string
+  value?: string
+  onChange: (value: string) => void
+  initialFrequency?: Frequency
 }
 
 export function RecurrenceInput({
@@ -33,19 +33,19 @@ export function RecurrenceInput({
   const [state, updateState] = useReducer(
     (state: State, action: Partial<State>) => ({ ...state, ...action }),
     getInitialState({ rrule: value, date, initialFrequency }),
-  );
+  )
 
   useEffect(
     // TODO: unhardcode timezone
     () =>
       onChange(
-        RRule.optionsToString({ ...state, tzid: "Europe/London" }).replace(
-          "RRULE:",
-          "",
+        RRule.optionsToString({ ...state, tzid: 'Europe/London' }).replace(
+          'RRULE:',
+          '',
         ),
       ),
     [state],
-  );
+  )
 
   return (
     <div>
@@ -62,7 +62,7 @@ export function RecurrenceInput({
                 : frequency === RRule.WEEKLY
                   ? [getWeekdayForFrequency({ date, frequency })]
                   : undefined,
-          });
+          })
         }}
         disabled={disabled}
       />
@@ -97,40 +97,40 @@ export function RecurrenceInput({
         disabled={disabled}
       />
     </div>
-  );
+  )
 }
 
 type State = {
-  interval: number;
-  freq: SupportedFrequency;
-  byweekday?: Weekday | Weekday[];
-  until?: Date;
-  count?: number;
-};
+  interval: number
+  freq: SupportedFrequency
+  byweekday?: Weekday | Weekday[]
+  until?: Date
+  count?: number
+}
 
 const getInitialState = ({
   rrule,
   date,
   initialFrequency = Frequency.WEEKLY,
 }: {
-  rrule?: string;
-  date: string;
-  initialFrequency: Frequency;
+  rrule?: string
+  date: string
+  initialFrequency: Frequency
 }): State => {
   const options = {
     interval: 1,
     freq: initialFrequency,
     ...(rrule && date && parseAndValidateRRule({ rrule, date })),
-  };
+  }
 
-  let byweekday: State["byweekday"] = options.byweekday;
+  let byweekday: State['byweekday'] = options.byweekday
 
   if (options.freq === Frequency.WEEKLY && !options.byweekday?.length) {
     // For weekly recurrence with no weekdays set, provide a default weekday
-    byweekday = [getWeekdayForFrequency({ date, frequency: options.freq })];
+    byweekday = [getWeekdayForFrequency({ date, frequency: options.freq })]
   } else if (options.freq === Frequency.MONTHLY && options.byweekday) {
     // For monthly recurrence with set weekday, extract it from the array
-    byweekday = options.byweekday[0];
+    byweekday = options.byweekday[0]
   }
 
   return {
@@ -140,5 +140,5 @@ const getInitialState = ({
         ? options.count
         : defaultOccurrences[options.freq],
     byweekday,
-  };
-};
+  }
+}

package/src/recurrence-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -1,19 +1,19 @@
-import { Col, Form, InputGroup } from "react-bootstrap";
-import RRule from "rrule";
-import { useTranslation } from "react-i18next";
+import { Col, Form, InputGroup } from 'react-bootstrap'
+import RRule from 'rrule'
+import { useTranslation } from 'react-i18next'
 
-import { SupportedFrequency } from "./utils";
+import { SupportedFrequency } from './utils'
 
-const MAX_REPEATS_VALUE = 365;
+const MAX_REPEATS_VALUE = 365
 
 interface Props {
-  disabled?: boolean;
-  interval: number;
-  frequency: SupportedFrequency;
+  disabled?: boolean
+  interval: number
+  frequency: SupportedFrequency
   onChange: (values: {
-    interval: number;
-    frequency: SupportedFrequency;
-  }) => void;
+    interval: number
+    frequency: SupportedFrequency
+  }) => void
 }
 
 function RecurrenceIntervalAndFrequencyInput({
@@ -22,22 +22,22 @@ function RecurrenceIntervalAndFrequencyInput({
   frequency,
   onChange,
 }: Props) {
-  const { t } = useTranslation(["Design", "Notification", "App"]);
+  const { t } = useTranslation(['Design', 'Notification', 'App'])
 
   return (
     <Form.Group as={Col} className="align-items-center p-0">
       <Form.Label xs="auto" className="mt-4">
-        {t("Design:repeatsEvery")}
+        {t('Design:repeatsEvery')}
       </Form.Label>
       <InputGroup hasValidation>
         <Form.Control
           type="number"
           aria-label={`${
             {
-              [RRule.DAILY]: "Days",
-              [RRule.WEEKLY]: "Weeks",
-              [RRule.MONTHLY]: "Months",
-              [RRule.YEARLY]: "Years",
+              [RRule.DAILY]: 'Days',
+              [RRule.WEEKLY]: 'Weeks',
+              [RRule.MONTHLY]: 'Months',
+              [RRule.YEARLY]: 'Years',
             }[frequency]
           } to repeat`}
           min={1}
@@ -59,23 +59,23 @@ function RecurrenceIntervalAndFrequencyInput({
           }
           disabled={disabled}
         >
-          <option value={RRule.DAILY}>{t("Design:day").toLowerCase()}</option>
-          <option value={RRule.WEEKLY}>{t("Design:week").toLowerCase()}</option>
+          <option value={RRule.DAILY}>{t('Design:day').toLowerCase()}</option>
+          <option value={RRule.WEEKLY}>{t('Design:week').toLowerCase()}</option>
           <option value={RRule.MONTHLY}>
-            {t("Design:month").toLowerCase()}
+            {t('Design:month').toLowerCase()}
           </option>
-          <option value={RRule.YEARLY}>{t("Design:year").toLowerCase()}</option>
+          <option value={RRule.YEARLY}>{t('Design:year').toLowerCase()}</option>
         </Form.Control>
         <Form.Control.Feedback type="invalid">
           {interval > MAX_REPEATS_VALUE &&
-            t("Validation:fieldMaxNumber", {
-              attribute: t("Design:repeatsEvery"),
+            t('Validation:fieldMaxNumber', {
+              attribute: t('Design:repeatsEvery'),
               max: MAX_REPEATS_VALUE,
             })}
         </Form.Control.Feedback>
       </InputGroup>
     </Form.Group>
-  );
+  )
 }
 
-export default RecurrenceIntervalAndFrequencyInput;
+export default RecurrenceIntervalAndFrequencyInput

package/src/recurrence-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

package/src/recurrence-input/RecurrenceWeekdaysInput.tsx

@@ -1,13 +1,13 @@
-import { Info } from "luxon";
-import { Form, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { Frequency, Weekday } from "rrule";
-import { getWeekdayForFrequency } from "./utils";
+import { Info } from 'luxon'
+import { Form, ToggleButton, ToggleButtonGroup } 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
 }
 
 // TODO: support different week starts (e.g. Sunday or Saturday)
@@ -33,7 +33,7 @@ function RecurrenceWeekdaysInput({
           )
         }
       >
-        {Info.weekdays("short").map((weekday, i) => (
+        {Info.weekdays('short').map((weekday, i) => (
           <ToggleButton
             key={i}
             value={i}
@@ -46,7 +46,7 @@ function RecurrenceWeekdaysInput({
         ))}
       </ToggleButtonGroup>
     </Form.Group>
-  );
+  )
 }
 
-export default RecurrenceWeekdaysInput;
+export default RecurrenceWeekdaysInput

package/src/recurrence-input/index.ts

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

package/src/recurrence-input/utils.ts

@@ -1,14 +1,14 @@
-import { DateTime } from "luxon";
-import RRule, { Frequency, Weekday } from "rrule";
+import { DateTime } from 'luxon'
+import RRule, { Frequency, Weekday } from 'rrule'
 
 export const getWeekdayForFrequency = ({
   date,
   frequency,
 }: {
-  date: string;
-  frequency: Frequency;
+  date: string
+  frequency: Frequency
 }): Weekday => {
-  const parsedDate = DateTime.fromISO(date);
+  const parsedDate = DateTime.fromISO(date)
   return new Weekday(
     parsedDate.weekday - 1,
     frequency !== Frequency.MONTHLY
@@ -16,49 +16,49 @@ export const getWeekdayForFrequency = ({
       : parsedDate.day + 7 > parsedDate.daysInMonth
         ? -1
         : Math.floor(parsedDate.day / 7) + 1,
-  );
-};
+  )
+}
 
 export type SupportedFrequency =
   | Frequency.DAILY
   | Frequency.WEEKLY
   | Frequency.MONTHLY
-  | Frequency.YEARLY;
+  | Frequency.YEARLY
 
 export type ParsedRRuleOptions = {
-  interval?: number;
-  freq: SupportedFrequency;
-  byweekday?: Weekday[];
-  until?: Date;
-  count?: number;
-};
+  interval?: number
+  freq: SupportedFrequency
+  byweekday?: Weekday[]
+  until?: Date
+  count?: number
+}
 
 export const parseAndValidateRRule = ({
   rrule,
   date,
 }: {
-  rrule: string;
-  date: string;
+  rrule: string
+  date: string
 }) => {
-  const unsupportedErrorMessage = "Unsupported RRule";
+  const unsupportedErrorMessage = 'Unsupported RRule'
   const supportedParams = new Set([
-    "interval",
-    "freq",
-    "byweekday",
-    "until",
-    "count",
-  ]);
+    'interval',
+    'freq',
+    'byweekday',
+    'until',
+    'count',
+  ])
   const supportedFrequencies = new Set([
     Frequency.DAILY,
     Frequency.WEEKLY,
     Frequency.MONTHLY,
     Frequency.YEARLY,
-  ]);
+  ])
 
   // We need to make sure that given RRule:
   const options = RRule.parseString(
-    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
-  );
+    rrule.includes('EXDATE') ? rrule.split(';EXDATE=')[0] : rrule,
+  )
 
   if (
     // 1. Is within the supported spec scope
@@ -70,21 +70,21 @@ export const parseAndValidateRRule = ({
     // 4. Doesn't simultaneously define both UNTIL and COUNT
     (options.until && options.count)
   ) {
-    throw new Error(unsupportedErrorMessage);
+    throw new Error(unsupportedErrorMessage)
   }
   if (options.byweekday) {
-    const byweekday = options.byweekday as Weekday[];
+    const byweekday = options.byweekday as Weekday[]
     if (options.freq === Frequency.WEEKLY) {
       // 5. Doesn't use relative weekdays (e.g. "1st Tuesday", "last Friday")
       // with weekly recurrence
       if (byweekday.some((weekday) => weekday.n !== undefined)) {
-        throw new Error(unsupportedErrorMessage);
+        throw new Error(unsupportedErrorMessage)
       }
     } else if (options.freq === Frequency.MONTHLY) {
       const weekday = getWeekdayForFrequency({
         date,
         frequency: Frequency.MONTHLY,
-      });
+      })
       if (
         // 6. In case of monthly recurrence, has zero or one weekdays defined
         byweekday.length > 1 ||
@@ -93,12 +93,12 @@ export const parseAndValidateRRule = ({
         byweekday[0]?.weekday !== weekday.weekday ||
         byweekday[0]?.n !== weekday.n
       ) {
-        throw new Error(unsupportedErrorMessage);
+        throw new Error(unsupportedErrorMessage)
       }
     } else {
       // 8. If recurrence is neither weekly nor monthly,
       // it shouldn't have weekdays defined
-      throw new Error(unsupportedErrorMessage);
+      throw new Error(unsupportedErrorMessage)
     }
   }
   return {
@@ -107,5 +107,5 @@ export const parseAndValidateRRule = ({
     byweekday: options.byweekday,
     count: options.count,
     until: options.until,
-  } as ParsedRRuleOptions;
-};
+  } as ParsedRRuleOptions
+}