@licklist/design 0.69.1 → 0.69.2

package/src/provider/company/user-form/UserForm.tsx

@@ -69,7 +69,7 @@ export const UserForm = ({
 
   return (
     /* @ts-expect-error 2345 */
-    <Form className="company-user-form" onSubmit={handleSubmit(onSubmit)}>
+    <Form className='company-user-form' onSubmit={handleSubmit(onSubmit)}>
       <Row>
         <Col xl={6} lg={6} sm={12}>
           <Form.Group>
@@ -83,7 +83,7 @@ export const UserForm = ({
               disabled={isLoading || Boolean(defaultValues.email)}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.hasError(errors.email, 'required') &&
                 t('Validation:fieldRequired', {
                   attribute: t('User:email'),
@@ -108,7 +108,7 @@ export const UserForm = ({
                 className={clsx('roles-form-group', !!error && 'is-invalid')}
               >
                 <Form.Label>{t('User:role')}*</Form.Label>
-                <div className="roles-wrapper">
+                <div className='roles-wrapper'>
                   {rolesOptions.map(
                     ({ value, label, description, component }) => (
                       <button
@@ -117,22 +117,22 @@ export const UserForm = ({
                         className={clsx('role', {
                           active: fieldValue === value,
                         })}
-                        type="button"
+                        type='button'
                       >
                         <Logo logo={component} />
-                        <p className="label">{label}</p>
-                        <p className="description">{description}</p>
+                        <p className='label'>{label}</p>
+                        <p className='description'>{description}</p>
                       </button>
                     ),
                   )}
                 </div>
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {error?.message}
                 </Form.Control.Feedback>
               </Form.Group>
             )}
             control={control}
-            name="role"
+            name='role'
             rules={{
               required: t('Validation:fieldRequired', {
                 fieldName: t('User:role'),
@@ -142,7 +142,7 @@ export const UserForm = ({
         </Col>
       </Row>
       {hasPermission && (
-        <Button type="submit" size="lg" disabled={isLoading}>
+        <Button type='submit' size='lg' disabled={isLoading}>
           {defaultValues.email ? t('User:submit') : t('Design:addUser')}
         </Button>
       )}

package/src/provider/location-input/LocationInput.tsx

@@ -21,33 +21,33 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
 
   return (
     <>
-      <input {...register('location.latitude')} type="hidden" />
-      <input {...register('location.longitude')} type="hidden" />
+      <input {...register('location.latitude')} type='hidden' />
+      <input {...register('location.longitude')} type='hidden' />
       <FormGroupControll
         error={errors?.location?.street}
-        name="location.street"
+        name='location.street'
         label={t('locationStreet')}
       />
       <FormGroupControll
         error={errors?.location?.city}
-        name="location.city"
+        name='location.city'
         label={t('locationCity')}
       />
       <FormGroupControll
         error={errors?.location?.state}
-        name="location.state"
+        name='location.state'
         label={t('locationState')}
       />
       <FormGroupControll
         error={errors?.location?.postcode}
-        name="location.postcode"
+        name='location.postcode'
         label={t('locationPostcode')}
       />
 
       <Form.Group controlId={countryId}>
         <Form.Label>{t('locationCountry')}</Form.Label>
         <CountryCodeSelect
-          fieldName="location.country"
+          fieldName='location.country'
           errorLabel={t('locationCountry')}
           error={errors?.location?.country?.message}
         />
@@ -56,7 +56,7 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
       {isLoading ? (
         <BlockLoader />
       ) : (
-        <Form.Group controlId="timeZoneId">
+        <Form.Group controlId='timeZoneId'>
           <Form.Label>{t('locationTimeZone')}</Form.Label>
           <Form.Control
             {...register('timeZoneId', {
@@ -64,11 +64,11 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
                 attribute: t('locationTimeZone'),
               }) as string,
             })}
-            as="select"
+            as='select'
             custom
             isInvalid={Boolean(errors?.timeZoneId?.message)}
           >
-            <option key="" value="" disabled>
+            <option key='' value='' disabled>
               {t('chooseTimeZone')}
             </option>
             {data.map((zone) => (
@@ -77,7 +77,7 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
               </option>
             ))}
           </Form.Control>
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors?.timeZoneId?.message}
           </Form.Control.Feedback>
         </Form.Group>

package/src/provider/location-input/LocationInputDescription.tsx

@@ -31,7 +31,7 @@ export function LocationInputDescription({ path }: { path: TimeZonePath }) {
     <div>
       <>
         {fields}
-        {timeZoneName && <div key="timeZone">{timeZoneName}</div>}
+        {timeZoneName && <div key='timeZone'>{timeZoneName}</div>}
       </>
     </div>
   )

package/src/provider/location-input/components/FormGroupControll.tsx

@@ -7,7 +7,7 @@ export const FormGroupControll = ({ name, label, error }) => {
     <Form.Group>
       <Form.Label>{label}</Form.Label>
       <Form.Control {...register(name)} isInvalid={!!error} />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {error?.message}
       </Form.Control.Feedback>
     </Form.Group>

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -64,11 +64,11 @@ export function ProviderDetailsInput({
               attribute: t('Design:name'),
             }) as string,
           })}
-          name="name"
+          name='name'
           required
           isInvalid={Boolean(errors.name)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -87,12 +87,12 @@ export function ProviderDetailsInput({
               return true
             },
           })}
-          as="textarea"
-          name="description"
+          as='textarea'
+          name='description'
           rows={6}
           isInvalid={Boolean(errors.description)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.description?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -111,12 +111,12 @@ export function ProviderDetailsInput({
               }),
             },
           })}
-          name="email"
-          type="email"
-          inputMode="email"
+          name='email'
+          type='email'
+          inputMode='email'
           isInvalid={Boolean(errors.email)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.email?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -129,12 +129,12 @@ export function ProviderDetailsInput({
               attribute: t('Design:phone'),
             }) as string,
           })}
-          name="phone"
-          type="tel"
-          inputMode="tel"
+          name='phone'
+          type='tel'
+          inputMode='tel'
           isInvalid={Boolean(errors.phone)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.phone?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -150,12 +150,12 @@ export function ProviderDetailsInput({
               }),
             },
           })}
-          name="website"
-          type="url"
-          inputMode="url"
+          name='website'
+          type='url'
+          inputMode='url'
           isInvalid={Boolean(errors.website)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.website?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -164,7 +164,7 @@ export function ProviderDetailsInput({
         <Form.Group controlId={companyId}>
           <Form.Label>{t('Design:company')}</Form.Label>
           <Typeahead
-            name="company"
+            name='company'
             options={companiesOptions}
             placeholder={t('App:select')}
             noOptionsMessage={t('App:noMatchesFound')}

package/src/provider/provider-form/ProviderForm.tsx

@@ -94,7 +94,7 @@ export function ProviderForm({
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -102,9 +102,9 @@ export function ProviderForm({
           linkTypes={linkTypes}
           companiesOptions={companiesOptions}
         />
-        <Accordion className="my-4">
+        <Accordion className='my-4'>
           <CollapsibleInputGroup
-            eventKey="location"
+            eventKey='location'
             label={t('location')}
             description={<LocationInputDescription path={path} />}
             error={errors?.location?.country?.message}
@@ -113,7 +113,7 @@ export function ProviderForm({
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup
-              eventKey="categories"
+              eventKey='categories'
               label={t('categories')}
               description={
                 <CategoriesInputDescription categories={categories} />
@@ -151,17 +151,17 @@ export function ProviderForm({
         })}
         {hasPermission && (
           <Button
-            type="submit"
+            type='submit'
             disabled={isSubmitting || isImagesLoading || isCoverImagesLoading}
-            className="d-flex align-items-center align-self-end"
+            className='d-flex align-items-center align-self-end'
           >
             {isSubmitting && (
               <Spinner
-                animation="border"
-                size="sm"
-                role="status"
-                aria-hidden="true"
-                className="mr-2"
+                animation='border'
+                size='sm'
+                role='status'
+                aria-hidden='true'
+                className='mr-2'
               />
             )}
             {t(intent)}

package/src/provider/provider-links-input/ProviderLinksInput.tsx

@@ -34,13 +34,13 @@ export function ProviderLinksInput({ linkTypes }: ProviderLinksInputProps) {
             <input
               {...register(`links.${index}.id` as const)}
               defaultValue={field.id}
-              type="hidden"
+              type='hidden'
             />
             <Form.Control
               {...register(`links.${index}.url` as const)}
               defaultValue={field.url}
-              type="url"
-              inputMode="url"
+              type='url'
+              inputMode='url'
             />
           </Form.Group>
         )
@@ -48,7 +48,7 @@ export function ProviderLinksInput({ linkTypes }: ProviderLinksInputProps) {
       {linkTypes.length > 0 && (
         <div>
           <DropdownButton
-            variant="outline-primary"
+            variant='outline-primary'
             title={t('addSocialMediaPage')}
           >
             {linkTypes.map((linkType) => (

package/src/provider/venue-form/VenueForm.tsx

@@ -125,7 +125,7 @@ export function VenueForm({
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -133,9 +133,9 @@ export function VenueForm({
           linkTypes={linkTypes}
           companiesOptions={companiesOptions}
         />
-        <Accordion className="my-4">
+        <Accordion className='my-4'>
           <CollapsibleInputGroup
-            eventKey="location"
+            eventKey='location'
             label={t('location')}
             description={<LocationInputDescription path={path} />}
             error={
@@ -149,7 +149,7 @@ export function VenueForm({
             <LocationInput path={path} />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
-            eventKey="workingHours"
+            eventKey='workingHours'
             label={t('workingHours')}
             description={<WorkingHoursInputDescription />}
             error={
@@ -164,7 +164,7 @@ export function VenueForm({
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup
-              eventKey="categories"
+              eventKey='categories'
               label={t('categories')}
               error={
                 errors?.categories?.message ||
@@ -209,22 +209,22 @@ export function VenueForm({
         })}
         {hasPermission && (
           <Button
-            type="submit"
+            type='submit'
             disabled={
               isLoading ||
               isSubmitting ||
               isImagesLoading ||
               isCoverImagesLoading
             }
-            className="d-flex align-items-center align-self-end"
+            className='d-flex align-items-center align-self-end'
           >
             {(isSubmitting || isLoading) && (
               <Spinner
-                animation="border"
-                size="sm"
-                role="status"
-                aria-hidden="true"
-                className="mr-2"
+                animation='border'
+                size='sm'
+                role='status'
+                aria-hidden='true'
+                className='mr-2'
               />
             )}
             {t(intent)}

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,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}