@licklist/design 0.68.5-dev.0 → 0.68.6-dev.0

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,11 @@ function RecurrenceEndInput({
           <Col>
             <InputGroup>
               <Form.Control
-                type="number"
+                type='number'
                 min={1}
                 max={500}
                 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,11 @@ function RecurrenceEndInput({
           <Col>
             <InputGroup>
               <Form.Control
-                type="number"
+                type='number'
                 min={1}
                 max={500}
                 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/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}

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -98,12 +98,12 @@ export const ReportRunnerModal = ({
     <Modal
       show={show}
       onHide={onClose}
-      className="report-runner-modal"
+      className='report-runner-modal'
       centered
     >
       <header>
         <h5>{t('generateReport')}</h5>
-        <Button variant="" data-testid="cancel-button" onClick={onClose}>
+        <Button variant='' data-testid='cancel-button' onClick={onClose}>
           {t('cancel')}
         </Button>
       </header>
@@ -112,9 +112,9 @@ export const ReportRunnerModal = ({
 
       {!isLoading && (
         <div>
-          <div className="report-type-label">{capitalize(report?.type)}</div>
+          <div className='report-type-label'>{capitalize(report?.type)}</div>
           <div>{report?.name}</div>
-          <div className="data-fields">
+          <div className='data-fields'>
             {report?.reportFieldValues.map((fieldValue) => {
               const field = reportFields?.find(
                 (field) => field.id === fieldValue.reportFieldId,
@@ -125,10 +125,10 @@ export const ReportRunnerModal = ({
           </div>
 
           <Button
-            className="edit-button"
-            type="button"
-            variant=""
-            data-testid="edit-button"
+            className='edit-button'
+            type='button'
+            variant=''
+            data-testid='edit-button'
             onClick={onEdit}
           >
             {t('Design:edit')}
@@ -140,13 +140,13 @@ export const ReportRunnerModal = ({
                 errors.periodBy?.message && 'border-danger border rounded'
               }`}
             >
-              <div className="period-by">
+              <div className='period-by'>
                 {PERIOD_BY_TYPES.map((type) => (
                   <div key={type}>
                     <Form.Check
                       inline
                       label={t(labelByPeriodType[type])}
-                      type="radio"
+                      type='radio'
                       id={type}
                       required
                       value={type}
@@ -160,18 +160,18 @@ export const ReportRunnerModal = ({
                 ))}
               </div>
               {errors.periodBy?.message && (
-                <div className="iframe-event__message-error justify-content-start mb-1">
+                <div className='iframe-event__message-error justify-content-start mb-1'>
                   {errors.periodBy?.message}
                 </div>
               )}
             </div>
 
-            <div className="controls mt-4">
-              <Form.Group controlId="from-input">
+            <div className='controls mt-4'>
+              <Form.Group controlId='from-input'>
                 <Form.Label>{t('Design:from')}</Form.Label>
                 <Form.Control
-                  type="datetime-local"
-                  data-testid="date-from-input"
+                  type='datetime-local'
+                  data-testid='date-from-input'
                   isInvalid={!!errors.dateFrom}
                   {...register('dateFrom', {
                     required: {
@@ -182,16 +182,16 @@ export const ReportRunnerModal = ({
                     },
                   })}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.dateFrom?.message}
                 </Form.Control.Feedback>
               </Form.Group>
 
-              <Form.Group controlId="to-input">
+              <Form.Group controlId='to-input'>
                 <Form.Label>{t('Design:to')}</Form.Label>
                 <Form.Control
-                  type="datetime-local"
-                  data-testid="date-to-input"
+                  type='datetime-local'
+                  data-testid='date-to-input'
                   isInvalid={!!errors.dateTo}
                   {...register('dateTo', {
                     required: `${t('Validation:fieldRequired', {
@@ -204,18 +204,18 @@ export const ReportRunnerModal = ({
                     },
                   })}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.dateTo?.message}
                 </Form.Control.Feedback>
               </Form.Group>
             </div>
 
-            <div className="controls">
-              <Button data-testid="download-button" onClick={onDownload}>
+            <div className='controls'>
+              <Button data-testid='download-button' onClick={onDownload}>
                 {t('generateDownload')}
               </Button>
 
-              <Button data-testid="view-button" onClick={onViewOnline}>
+              <Button data-testid='view-button' onClick={onViewOnline}>
                 {t('generateView')}
               </Button>
             </div>