@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/provider/working-hours-input/WorkingHoursInput.tsx

@@ -16,8 +16,8 @@ export function WorkingHoursInput() {
 
   return (
     <div>
-      <Form.Row className="d-none d-lg-flex mb-4">
-        <Col className="text-right" xs="2">
+      <Form.Row className='d-none d-lg-flex mb-4'>
+        <Col className='text-right' xs='2'>
           {t('Design:day')}
         </Col>
         <Col>{t('Design:from')}</Col>
@@ -41,7 +41,7 @@ export function WorkingHoursInput() {
             return undefined
           },
         })}
-        type="hidden"
+        type='hidden'
       />
 
       {weekdays.map((name, i) => (
@@ -51,17 +51,17 @@ export function WorkingHoursInput() {
          * which miscalculates alignment for empty inputs.
          * Otherwise placeholders should not be used.
          */
-        <Form.Row key={name} className="align-items-baseline">
+        <Form.Row key={name} className='align-items-baseline'>
           <Col
-            className="h5 text-lg-right text-nowrap mb-4 mb-lg-0"
-            xs="12"
-            lg="2"
+            className='h5 text-lg-right text-nowrap mb-4 mb-lg-0'
+            xs='12'
+            lg='2'
           >
             {name}
           </Col>
 
           <Form.Group as={Col}>
-            <Form.Label className="d-lg-none">{t('Design:from')}</Form.Label>
+            <Form.Label className='d-lg-none'>{t('Design:from')}</Form.Label>
             <Form.Control
               {...register(`workingHours.${i}.start`, {
                 validate: (nextStartValue) => {
@@ -72,22 +72,22 @@ export function WorkingHoursInput() {
                   return undefined
                 },
               })}
-              type="time"
+              type='time'
               placeholder={t('Design:from')}
             />
           </Form.Group>
 
           <Form.Group as={Col}>
-            <Form.Label className="d-lg-none">{t('Design:until')}</Form.Label>
+            <Form.Label className='d-lg-none'>{t('Design:until')}</Form.Label>
             <Form.Control
               {...register(`workingHours.${i}.end`)}
-              type="time"
+              type='time'
               placeholder={t('Design:until')}
             />
           </Form.Group>
 
-          <Form.Group as={Col} xs="12" lg>
-            <Form.Label className="d-lg-none">
+          <Form.Group as={Col} xs='12' lg>
+            <Form.Label className='d-lg-none'>
               {t('Design:description')}
             </Form.Label>
             <Form.Control

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -16,7 +16,7 @@ export function WorkingHoursInputDescription() {
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i).map((i) => (
         <Row key={i}>
-          <Col xs="auto">{weekdays[i]}:</Col>
+          <Col xs='auto'>{weekdays[i]}:</Col>
           <Col>
             {t('timeInterval', {
               start: values?.[i]?.start ?? '00:00',

package/src/radio-card/RadioCard.tsx

@@ -31,9 +31,9 @@ export const RadioCard = <FormModel,>({
   return (
     <Form.Check className={clsx('radio-card', isInvalid && 'invalid')}>
       <Form.Check.Label>
-        <div className="radio-card-controls">
+        <div className='radio-card-controls'>
           <Form.Check.Input
-            type="radio"
+            type='radio'
             isInvalid={isInvalid}
             value={value}
             {...register(name, rules)}
@@ -42,7 +42,7 @@ export const RadioCard = <FormModel,>({
           <span>{label}</span>
         </div>
 
-        <p className="radio-card-description">{description}</p>
+        <p className='radio-card-description'>{description}</p>
       </Form.Check.Label>
     </Form.Check>
   )

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -51,9 +51,9 @@ function RecurrenceEndInput({
     <Form.Group>
       <Form.Label>{t('ends')}</Form.Label>
 
-      <Form.Check type="radio" id={neverId} custom className="mt-3">
+      <Form.Check type='radio' id={neverId} custom className='mt-3'>
         <Form.Check.Input
-          type="radio"
+          type='radio'
           checked={!until && count === 500}
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
@@ -61,11 +61,11 @@ function RecurrenceEndInput({
         <Form.Check.Label>{t('never')}</Form.Check.Label>
       </Form.Check>
 
-      <Form.Check type="radio" id={onId} custom className="mt-3">
-        <Row className="align-items-center">
+      <Form.Check type='radio' id={onId} custom className='mt-3'>
+        <Row className='align-items-center'>
           <Col xs={2}>
             <Form.Check.Input
-              type="radio"
+              type='radio'
               checked={Boolean(until) && !count}
               onChange={() =>
                 onChange({ until: getUntil({ date, frequency }) })
@@ -76,10 +76,10 @@ function RecurrenceEndInput({
           </Col>
           <Col>
             <Form.Control
-              type="date"
+              type='date'
               min={minDate}
               disabled={disabled || !until}
-              aria-label="Date on which the recurrence ends"
+              aria-label='Date on which the recurrence ends'
               value={until ?? getUntil({ date, frequency })}
               className={until && 'date-input-with-value'}
               ref={dateInput}
@@ -90,11 +90,11 @@ function RecurrenceEndInput({
         </Row>
       </Form.Check>
 
-      <Form.Check type="radio" id={afterId} custom className="mt-3">
-        <Row className="align-items-center">
+      <Form.Check type='radio' id={afterId} custom className='mt-3'>
+        <Row className='align-items-center'>
           <Col xs={2}>
             <Form.Check.Input
-              type="radio"
+              type='radio'
               checked={count < 500 && !until}
               onChange={() =>
                 onChange({ count: defaultOccurrences[frequency] })
@@ -106,11 +106,12 @@ function RecurrenceEndInput({
           <Col>
             <InputGroup>
               <Form.Control
-                type="number"
+                type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
-                aria-label="Occurrence count"
+                aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}
                 onChange={({ target: { value } }) =>
                   onChange({ count: Number(value) })

package/src/recurrence-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -25,13 +25,13 @@ function RecurrenceIntervalAndFrequencyInput({
   const { t } = useTranslation(['Design', 'Notification', 'App'])
 
   return (
-    <Form.Group as={Col} className="align-items-center p-0">
-      <Form.Label xs="auto" className="mt-4">
+    <Form.Group as={Col} className='align-items-center p-0'>
+      <Form.Label xs='auto' className='mt-4'>
         {t('Design:repeatsEvery')}
       </Form.Label>
       <InputGroup hasValidation>
         <Form.Control
-          type="number"
+          type='number'
           aria-label={`${
             {
               [RRule.DAILY]: 'Days',
@@ -50,8 +50,8 @@ function RecurrenceIntervalAndFrequencyInput({
           disabled={disabled}
         />
         <Form.Control
-          as="select"
-          aria-label="Frequency"
+          as='select'
+          aria-label='Frequency'
           custom
           value={frequency}
           onChange={({ target: { value } }) =>
@@ -66,7 +66,7 @@ function RecurrenceIntervalAndFrequencyInput({
           </option>
           <option value={RRule.YEARLY}>{t('Design:year').toLowerCase()}</option>
         </Form.Control>
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {interval > MAX_REPEATS_VALUE &&
             t('Validation:fieldMaxNumber', {
               attribute: t('Design:repeatsEvery'),

package/src/recurrence-input/RecurrenceMonthlyRepeatByInput.tsx

@@ -23,8 +23,8 @@ function RecurrenceMonthlyRepeatByInput({
   return (
     <Form.Group>
       <Form.Control
-        as="select"
-        aria-label="Repeat by"
+        as='select'
+        aria-label='Repeat by'
         custom
         value={value ? 'weekday' : 'day'}
         onChange={({ target: { value } }) =>
@@ -32,8 +32,8 @@ function RecurrenceMonthlyRepeatByInput({
         }
         disabled={disabled}
       >
-        <option value="day">Monthly on day {weekday.weekday + 1}</option>
-        <option value="weekday">
+        <option value='day'>Monthly on day {weekday.weekday + 1}</option>
+        <option value='weekday'>
           Monthly on the{' '}
           {
             { '-1': 'last', 1: 'first', 2: 'second', 3: 'third', 4: 'fourth' }[

package/src/recurrence-input/RecurrenceWeekdaysInput.tsx

@@ -18,10 +18,10 @@ function RecurrenceWeekdaysInput({
   onChange,
 }: Props) {
   return (
-    <Form.Group className="d-flex flex-column">
+    <Form.Group className='d-flex flex-column'>
       <Form.Label>Repeats on</Form.Label>
       <ToggleButtonGroup
-        type="checkbox"
+        type='checkbox'
         value={value.map(({ weekday }) => weekday)}
         onChange={(value) =>
           onChange(
@@ -37,8 +37,8 @@ function RecurrenceWeekdaysInput({
           <ToggleButton
             key={i}
             value={i}
-            variant="outline-primary"
-            size="sm"
+            variant='outline-primary'
+            size='sm'
             disabled={disabled}
           >
             {weekday}

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

@@ -75,11 +75,11 @@ export function DatePickerInput({
 
         {children}
 
-        <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t('Design:apply')}</Button>
+        <div className='d-inline-flex align-items-center w-100'>
+          <Button type='submit'>{t('Design:apply')}</Button>
 
           {defaultValues && (
-            <div className="d-flex justify-content-end delete-btn">
+            <div className='d-flex justify-content-end delete-btn'>
               <ConfirmModal>
                 {(confirm) => (
                   <DeleteFieldButton onDelete={() => confirm(onDelete)} />

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

@@ -59,7 +59,7 @@ function RecurrenceAndFrequencyInput({
           <Form.Group>
             <Form.Label>{startDateLabel ?? t('Design:date')}</Form.Label>
             <Form.Control
-              type="date"
+              type='date'
               {...register('startDate', { required: true })}
               defaultValue={startDate}
               className={startDate && 'date-input-with-value'}
@@ -67,7 +67,7 @@ function RecurrenceAndFrequencyInput({
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.startDate?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -81,14 +81,14 @@ function RecurrenceAndFrequencyInput({
               {startTimeLabel ?? t('Design:availableFrom')}
             </Form.Label>
             <Form.Control
-              type="time"
+              type='time'
               {...register('startTime', { required: false, ...startTimeRules })}
-              placeholder="hh:mm"
+              placeholder='hh:mm'
               defaultValue={startTime}
               disabled={disabled}
               isInvalid={Boolean(errors.startTime)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.startTime?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -98,7 +98,7 @@ function RecurrenceAndFrequencyInput({
           <Form.Group>
             <Form.Label>{endTimeLabel ?? t('Design:availableTo')}</Form.Label>
             <Form.Control
-              type="time"
+              type='time'
               {...register('endTime', {
                 required: false,
                 validate: (time) => {
@@ -118,12 +118,12 @@ function RecurrenceAndFrequencyInput({
                 },
                 ...endTimeRules,
               })}
-              placeholder="hh:mm"
+              placeholder='hh:mm'
               defaultValue={endTime}
               disabled={disabled}
               isInvalid={Boolean(errors.endTime)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.endTime?.message}
             </Form.Control.Feedback>
           </Form.Group>

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

@@ -34,9 +34,9 @@ function RecurrenceEndInput({
     <Form.Group>
       <Form.Label>Ends</Form.Label>
 
-      <Form.Check type="radio" id={neverId} custom className="mt-3">
+      <Form.Check type='radio' id={neverId} custom className='mt-3'>
         <Form.Check.Input
-          type="radio"
+          type='radio'
           checked={!until && count === 500}
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
@@ -44,11 +44,11 @@ function RecurrenceEndInput({
         <Form.Check.Label>Never</Form.Check.Label>
       </Form.Check>
 
-      <Form.Check type="radio" id={onId} custom className="mt-3">
-        <Row className="align-items-center">
+      <Form.Check type='radio' id={onId} custom className='mt-3'>
+        <Row className='align-items-center'>
           <Col xs={2}>
             <Form.Check.Input
-              type="radio"
+              type='radio'
               checked={Boolean(until) && !count}
               onChange={() =>
                 onChange({ until: getUntil({ date, frequency }) })
@@ -59,9 +59,9 @@ function RecurrenceEndInput({
           </Col>
           <Col>
             <Form.Control
-              type="date"
+              type='date'
               disabled={disabled || !until}
-              aria-label="Date on which the recurrence ends"
+              aria-label='Date on which the recurrence ends'
               value={until ?? getUntil({ date, frequency })}
               className={until && 'date-input-with-value'}
               ref={dateInput}
@@ -72,11 +72,11 @@ function RecurrenceEndInput({
         </Row>
       </Form.Check>
 
-      <Form.Check type="radio" id={afterId} custom className="mt-3">
-        <Row className="align-items-center">
+      <Form.Check type='radio' id={afterId} custom className='mt-3'>
+        <Row className='align-items-center'>
           <Col xs={2}>
             <Form.Check.Input
-              type="radio"
+              type='radio'
               checked={count < 500 && !until}
               onChange={() =>
                 onChange({ count: defaultOccurrences[frequency] })
@@ -88,11 +88,12 @@ function RecurrenceEndInput({
           <Col>
             <InputGroup>
               <Form.Control
-                type="number"
+                type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
-                aria-label="Occurrence count"
+                aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}
                 onChange={({ target: { value } }) =>
                   onChange({ count: Number(value) })

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

@@ -83,7 +83,7 @@ function RecurrenceIntervalAndFrequencyInput({
           <Form.Group>
             <Form.Label>{startDateLabel ?? t('Design:fromDate')}</Form.Label>
             <Form.Control
-              type="date"
+              type='date'
               {...register('startDate', { required: true })}
               defaultValue={startDate}
               className={startDate && 'date-input-with-value'}
@@ -91,7 +91,7 @@ function RecurrenceIntervalAndFrequencyInput({
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.startDate?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -101,7 +101,7 @@ function RecurrenceIntervalAndFrequencyInput({
           <Form.Group>
             <Form.Label>{endDateLabel ?? t('Design:toDate')}</Form.Label>
             <Form.Control
-              type="date"
+              type='date'
               {...register('endDate', {
                 required: true,
                 validate: (date) => {
@@ -125,7 +125,7 @@ function RecurrenceIntervalAndFrequencyInput({
               min={startDate || undefined}
               isInvalid={Boolean(errors.endDate)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.endDate?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -139,14 +139,14 @@ function RecurrenceIntervalAndFrequencyInput({
               {startTimeLabel ?? t('Design:availableFrom')}
             </Form.Label>
             <Form.Control
-              type="time"
+              type='time'
               {...register('startTime', { required: false, ...startTimeRules })}
-              placeholder="hh:mm"
+              placeholder='hh:mm'
               defaultValue={startTime}
               disabled={disabled}
               isInvalid={Boolean(errors.startTime)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.startTime?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -156,7 +156,7 @@ function RecurrenceIntervalAndFrequencyInput({
           <Form.Group>
             <Form.Label>{endTimeLabel ?? t('Design:availableTo')}</Form.Label>
             <Form.Control
-              type="time"
+              type='time'
               {...register('endTime', {
                 required: false,
                 ...endTimeRules,
@@ -182,12 +182,12 @@ function RecurrenceIntervalAndFrequencyInput({
                   },
                 },
               })}
-              placeholder="hh:mm"
+              placeholder='hh:mm'
               defaultValue={endTime}
               disabled={disabled}
               isInvalid={Boolean(errors.endTime)}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.endTime?.message}
             </Form.Control.Feedback>
           </Form.Group>

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

@@ -23,8 +23,8 @@ function RecurrenceMonthlyRepeatByInput({
   return (
     <Form.Group>
       <Form.Control
-        as="select"
-        aria-label="Repeat by"
+        as='select'
+        aria-label='Repeat by'
         custom
         value={value ? 'weekday' : 'day'}
         onChange={({ target: { value } }) =>
@@ -32,8 +32,8 @@ function RecurrenceMonthlyRepeatByInput({
         }
         disabled={disabled}
       >
-        <option value="day">Monthly on day {weekday.weekday + 1}</option>
-        <option value="weekday">
+        <option value='day'>Monthly on day {weekday.weekday + 1}</option>
+        <option value='weekday'>
           Monthly on the{' '}
           {
             { '-1': 'last', 1: 'first', 2: 'second', 3: 'third', 4: 'fourth' }[

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

@@ -17,12 +17,12 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
   const value = getValues('byweekday')
 
   return (
-    <Form.Group className="d-flex flex-column">
+    <Form.Group className='d-flex flex-column'>
       <Form.Label />
       <ToggleButtonGroup
-        type="checkbox"
+        type='checkbox'
         defaultValue={value ? value.map(({ weekday }) => weekday) : undefined}
-        className="d-flex flex-wrap"
+        className='d-flex flex-wrap'
         onChange={(value) =>
           setValue(
             'byweekday',
@@ -38,10 +38,10 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
           <ToggleButton
             key={i}
             value={i}
-            variant="outline-primary"
-            size="sm"
+            variant='outline-primary'
+            size='sm'
             disabled={disabled}
-            className="flex mr-3 mb-3 rounded-sm flex-grow-0"
+            className='flex mr-3 mb-3 rounded-sm flex-grow-0'
           >
             {weekday}
           </ToggleButton>

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

@@ -230,16 +230,16 @@ export function RecurringDatePickerInput({
         {/*  disabled={disabled} */}
         {/* /> */}
 
-        <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t('Design:apply')}</Button>
-          <div className="d-flex flex-grow-1 text-muted mx-3 flex-column">
+        <div className='d-inline-flex align-items-center w-100'>
+          <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 */}
             {/* <div className="text-dark">{getHumanReadableDate(rrule)}</div> */}
           </div>
 
           {defaultValues && (
-            <div className="d-flex justify-content-end delete-btn">
+            <div className='d-flex justify-content-end delete-btn'>
               <ConfirmModal>
                 {(confirm) => (
                   <DeleteFieldButton onDelete={() => confirm(onDelete)} />

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

@@ -127,12 +127,12 @@ export const useWorkHoursValidation = (
   if (!_workHours) return {}
 
   const workHours: WorkHour[] = Array.from({ length: 7 }, (_, i) => {
-    if (_workHours?.[i]) {
-      return _workHours[i]
-    }
+    const existing = _workHours.find(({ day }) => day === i)
+
+    if (existing) return existing
 
     return {
-      day: (i + 1) as Day,
+      day: i as Day,
       start: '00:00',
       end: '23:59',
       description: '',

package/src/report/DataFieldsSelector/DataFieldsSelector.tsx

@@ -30,18 +30,18 @@ export const DataFieldsSelector = ({
   return (
     <>
       {isLoading && (
-        <div className="report-fields-loader">
+        <div className='report-fields-loader'>
           <LoaderIndicator />
         </div>
       )}
 
       {!isLoading && (
         <>
-          <Form.Label className="mt-4">{t('dataFields')}</Form.Label>
+          <Form.Label className='mt-4'>{t('dataFields')}</Form.Label>
           <Row>
             <Controller
-              name="reportFieldValues"
-              data-testid="report-field-values-select"
+              name='reportFieldValues'
+              data-testid='report-field-values-select'
               control={control}
               rules={{
                 validate: (value) => {
@@ -76,7 +76,7 @@ export const DataFieldsSelector = ({
           {errors.reportFieldValues?.message && (
             <Row>
               <Col>
-                <div className="invalid-feedback field-values-error">
+                <div className='invalid-feedback field-values-error'>
                   {errors.reportFieldValues?.message}
                 </div>
               </Col>
@@ -99,7 +99,7 @@ const Checkbox = ({ onChange, value, label, checked }: CheckboxProps) => {
   const checkboxId = useId()
 
   return (
-    <Form.Group controlId={checkboxId} className="custom-checkbox">
+    <Form.Group controlId={checkboxId} className='custom-checkbox'>
       <Form.Check
         label={label}
         value={value}