@licklist/design 0.68.5 → 0.68.6-dev.1

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -35,9 +35,9 @@ export const CalendarSelect = ({
       id={PAGE_CALENDAR_SELECT_WRAPPER}
     >
       <Form.Control
-        as="select"
+        as='select'
         onChange={onValueChange}
-        className="calendar-select"
+        className='calendar-select'
         value={value}
         ref={selectRef}
       >

package/src/calendar/components/CalendarWeekdays/CalendarWeekdays.tsx

@@ -14,9 +14,9 @@ export const CalendarWeekdays = () => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="calendar-weekdays">
+    <div className='calendar-weekdays'>
       {WEEKDAYS.map(({ key }) => (
-        <div key={key} className="calendar-weekday">
+        <div key={key} className='calendar-weekday'>
           {t(key)}
         </div>
       ))}

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -31,16 +31,16 @@ export function CollapsibleInputGroup({
   const isInvalid = Boolean(error)
 
   return (
-    <Card className="rounded-0">
+    <Card className='rounded-0'>
       <Accordion.Toggle
         as={Card.Header}
         eventKey={eventKey}
         alwaysopen={alwaysOpen}
-        role="button"
+        role='button'
         className={clsx('accordion-form-control', isInvalid && 'is-invalid')}
       >
-        <div className="accordion-form-control-header">
-          <h5 className="mb-0 pl-3">{label}</h5>
+        <div className='accordion-form-control-header'>
+          <h5 className='mb-0 pl-3'>{label}</h5>
           {currentEventKey === eventKey ? (
             <FaChevronUp size={20} />
           ) : (
@@ -48,10 +48,10 @@ export function CollapsibleInputGroup({
           )}
         </div>
         <Collapse in={currentEventKey !== eventKey}>
-          <div className="pl-3">{description}</div>
+          <div className='pl-3'>{description}</div>
         </Collapse>
         {isInvalid && (
-          <Form.Control.Feedback type="invalid" className="pl-3">
+          <Form.Control.Feedback type='invalid' className='pl-3'>
             {error}
           </Form.Control.Feedback>
         )}

package/src/custom-fields/CustomFields.stories.tsx

@@ -194,5 +194,5 @@ WithDefault.args = {
 }
 
 export function Item() {
-  return <FieldItem icon="font" label="Text" onClick={() => null} />
+  return <FieldItem icon='font' label='Text' onClick={() => null} />
 }

package/src/custom-fields/field/FieldItem.tsx

@@ -11,7 +11,7 @@ interface FieldItemProps {
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
-    <div className="custom-field-item" onClick={onClick}>
+    <div className='custom-field-item' onClick={onClick}>
       {icon}
       <h6>{label}</h6>
     </div>

package/src/custom-fields/field/SelectFieldModal.tsx

@@ -18,14 +18,14 @@ export function SelectFieldModal({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       centered
       show={isVisible}
       onHide={onHide}
-      className="p-3 border-0"
+      className='p-3 border-0'
     >
-      <h5 className="mt-5 p-2 ml-3">Select Field</h5>
-      <div className="d-flex flex-row flex-wrap p-3 my-3">
+      <h5 className='mt-5 p-2 ml-3'>Select Field</h5>
+      <div className='d-flex flex-row flex-wrap p-3 my-3'>
         {allFieldTypes.map((fieldKey) => {
           const { label, icon } = FIELD_TYPES[fieldKey]
           const id = uniqueId(fieldKey)

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -152,11 +152,11 @@ export const CustomFieldSet = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onSubmit)}>
-        <Form.Control type="hidden" {...register('id')} />
+        <Form.Control type='hidden' {...register('id')} />
         <Form.Group>
           <Form.Label>{t('fieldSetName')}</Form.Label>
           <Form.Control
-            type="fieldSetName"
+            type='fieldSetName'
             placeholder={t('fieldSetName')}
             isInvalid={!!errors.name}
             {...register('name', {
@@ -178,7 +178,7 @@ export const CustomFieldSet = ({
             })}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.name, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('fieldSetName'),
@@ -223,18 +223,18 @@ export const CustomFieldSet = ({
               title={t('addField')}
               onClick={() => setVisibleModal(true)}
             />
-            <div className="manual-form-error">
+            <div className='manual-form-error'>
               {errors[CUSTOM_FIELDS] && errors[CUSTOM_FIELDS].message}
             </div>
-            <div className="d-flex justify-content-between">
+            <div className='d-flex justify-content-between'>
               <Button
-                variant="primary"
+                variant='primary'
                 disabled={Object.keys(errors).length > 0}
-                type="submit"
+                type='submit'
               >
                 {t('save')}
               </Button>
-              <Button variant="danger" onClick={removeFieldSet}>
+              <Button variant='danger' onClick={removeFieldSet}>
                 {t('delete')}
               </Button>
             </div>

package/src/custom-fields/forms/DropdownForm.tsx

@@ -67,7 +67,7 @@ export function DropdownForm<T>({
   return (
     <>
       <Form.Control
-        type="hidden"
+        type='hidden'
         defaultValue={id}
         {...register(`${fieldSetId}.${fieldIndex}.id` as Path<T>)}
       />
@@ -75,7 +75,7 @@ export function DropdownForm<T>({
       <Form.Group>
         <Form.Label>{t('Design:fieldName')}</Form.Label>
         <Form.Control
-          type="text"
+          type='text'
           defaultValue={name}
           placeholder={t('Design:fieldName')}
           isInvalid={errors?.[fieldSetId]?.[fieldIndex]?.name}
@@ -98,7 +98,7 @@ export function DropdownForm<T>({
             },
           })}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.hasError(
             errors?.[fieldSetId]?.[fieldIndex]?.name,
             'required',
@@ -110,8 +110,8 @@ export function DropdownForm<T>({
       </Form.Group>
       <Form.Group>
         <Form.Check
-          type="checkbox"
-          label="Required"
+          type='checkbox'
+          label='Required'
           defaultChecked={isRequired}
           {...register(`${fieldSetId}.${fieldIndex}.isRequired` as Path<T>)}
         />
@@ -122,12 +122,12 @@ export function DropdownForm<T>({
         />
       </Form.Group>
       <FormLabel>{t('Design:dropdownOptions')}</FormLabel>
-      <div className="w-100">
+      <div className='w-100'>
         {fields?.map((field: FieldValues, i) => (
-          <div key={field.id} className="dropdown-option">
-            <Form.Group className="input">
+          <div key={field.id} className='dropdown-option'>
+            <Form.Group className='input'>
               <Form.Control
-                type="text"
+                type='text'
                 placeholder={t('Design:title')}
                 isInvalid={optionErrors?.[i]?.title}
                 {...register(
@@ -158,7 +158,7 @@ export function DropdownForm<T>({
                   )
                 }}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {HookFormService.hasError(
                   errors?.[fieldSetId]?.[fieldIndex]?.options?.[i]?.title,
                   'validate',
@@ -170,8 +170,8 @@ export function DropdownForm<T>({
             </Form.Group>
             <Form.Group>
               <button
-                type="button"
-                className="btn"
+                type='button'
+                className='btn'
                 onClick={() => {
                   remove(i)
                   trigger()
@@ -183,8 +183,8 @@ export function DropdownForm<T>({
           </div>
         ))}
         <Button
-          className="rounded-circle mb-5 d-flex"
-          size="sm"
+          className='rounded-circle mb-5 d-flex'
+          size='sm'
           onClick={() => {
             append({ title: '', value: '' } as FieldArray<FieldValues, Path<T>>)
 
@@ -194,11 +194,11 @@ export function DropdownForm<T>({
           <FaPlus size={18} />
         </Button>
       </div>
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {optionErrors && optionErrors.message}
       </div>
       {hasPermission && (
-        <Button variant="danger" onClick={onRemove}>
+        <Button variant='danger' onClick={onRemove}>
           {t('Design:delete')}
         </Button>
       )}

package/src/custom-fields/forms/TextInputForm.tsx

@@ -33,7 +33,7 @@ export function TextInputForm<T>({
   return (
     <>
       <Form.Control
-        type="hidden"
+        type='hidden'
         defaultValue={id}
         {...register(`${fieldSetId}.${fieldIndex}.id` as Path<T>)}
       />
@@ -41,7 +41,7 @@ export function TextInputForm<T>({
       <Form.Group>
         <Form.Label>{t('Design:fieldName')}</Form.Label>
         <Form.Control
-          type="text"
+          type='text'
           defaultValue={name}
           placeholder={t('Design:fieldName')}
           isInvalid={!!formState.errors?.[fieldSetId]?.[fieldIndex]?.name}
@@ -49,7 +49,7 @@ export function TextInputForm<T>({
             required: true,
           })}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.hasError(
             formState.errors?.[fieldSetId]?.[fieldIndex]?.name,
             'required',
@@ -61,8 +61,8 @@ export function TextInputForm<T>({
       </Form.Group>
       <Form.Group>
         <Form.Check
-          type="checkbox"
-          label="Required"
+          type='checkbox'
+          label='Required'
           defaultChecked={isRequired}
           {...register(`${fieldSetId}.${fieldIndex}.isRequired` as Path<T>)}
         />
@@ -73,7 +73,7 @@ export function TextInputForm<T>({
         />
       </Form.Group>
       {hasPermission && (
-        <Button variant="danger" onClick={onRemove}>
+        <Button variant='danger' onClick={onRemove}>
           {t('Design:delete')}
         </Button>
       )}

package/src/customers/components/filter/CustomerFilter.tsx

@@ -23,8 +23,8 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
   const { t } = useTranslation(['Design'])
 
   return (
-    <div className="customers-filter d-flex">
-      <div className="d-flex customers-filter-items">
+    <div className='customers-filter d-flex'>
+      <div className='d-flex customers-filter-items'>
         {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
           const label = t(FILTER_FIELDS[filterKeyName])
 
@@ -32,7 +32,7 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
             <TextField
               key={filterKeyName}
               className={clsx('mb-0', 'col-4', 'customer-filter')}
-              type="text"
+              type='text'
               label={label}
               value={values[filterKeyName]}
               onChange={(event) =>

package/src/date-time-button/DateContent.tsx

@@ -39,7 +39,7 @@ export const DateContent = ({
   const label = t(getDate(date))
 
   return (
-    <div className="weekday-info">
+    <div className='weekday-info'>
       <div>{label}</div>
       <div
         className={clsx(

package/src/date-time-button/DateTimeButton.tsx

@@ -46,7 +46,7 @@ export const DateTimeButton = ({
 
   return (
     <button
-      type="button"
+      type='button'
       onClick={() => onSelect(date)}
       disabled={isDisabled}
       className={clsx(
@@ -66,7 +66,7 @@ export const DateTimeButton = ({
         isSelected={isSelected}
         variant={variant}
       />
-      {price && !isDisabled && <div className="price">{price}</div>}
+      {price && !isDisabled && <div className='price'>{price}</div>}
       {showResources && resources && (
         <AvailabilityIndicator
           resources={resources}

package/src/error/ErrorFallback.tsx

@@ -4,7 +4,7 @@ function ErrorFallback() {
   const { t } = useTranslation('Design')
 
   return (
-    <div role="alert" className="error-fallback">
+    <div role='alert' className='error-fallback'>
       <div>
         <h1>{t('somethingWrong')}</h1>
         <p>{t('somethingWrongMessage')}</p>

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -90,22 +90,22 @@ export function IntervalInput({
   }
 
   const onChangeRecurrent = (checked: boolean) => {
-    setRecurrent(checked);
+    setRecurrent(checked)
     if (!checked) {
-      setValue("rrule", null);
+      setValue('rrule', null)
     }
-  };
+  }
 
   return (
     <>
-      <Form.Row className="interval-container">
-        <Form.Group as={Col} controlId="start">
+      <Form.Row className='interval-container'>
+        <Form.Group as={Col} controlId='start'>
           <Form.Label>{t('start')}</Form.Label>
           <Form.Control
-            type="datetime-local"
+            type='datetime-local'
             {...register('start', validationOptions.start)}
             value={start}
-            name="start"
+            name='start'
             required
             isInvalid={Boolean(errors.start)}
             onChange={updateEndDate}
@@ -113,18 +113,18 @@ export function IntervalInput({
             ref={startDateInput}
             disabled={disabled}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.start?.message}
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group as={Col} controlId="end">
+        <Form.Group as={Col} controlId='end'>
           <Form.Label>{t('end')}</Form.Label>
           <Form.Control
-            type="datetime-local"
+            type='datetime-local'
             {...register('end', validationOptions.end)}
             value={end}
-            name="end"
+            name='end'
             onChange={({ target: { value: nextEndtDate } }) =>
               onChangeEndDate(nextEndtDate)
             }
@@ -136,7 +136,7 @@ export function IntervalInput({
             disabled={disabled}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.end?.message}
           </Form.Control.Feedback>
           <Form.Text muted>
@@ -147,11 +147,11 @@ export function IntervalInput({
       {start && (
         <Form.Group controlId={recurrentId}>
           <Form.Check
-            label="Recurrent"
+            label='Recurrent'
             custom
             checked={recurrent}
             onChange={({ target: { checked } }) => {
-              onChangeRecurrent(checked);
+              onChangeRecurrent(checked)
             }}
             disabled={disabled || Boolean(editedProductSet)}
           />
@@ -169,7 +169,7 @@ export function IntervalInput({
         <Form.Group>
           <Controller
             control={control}
-            name="rrule"
+            name='rrule'
             render={({ field: { value, onChange } }) => (
               <RecurrenceInput
                 value={value}

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

@@ -1066,12 +1066,12 @@ export const Default: Story<EditEventFormProps> = (args) => {
   const hasPermission = boolean('hasPermission', true)
   const [editProductSetId, setEditProductSetId] = useState<string>()
   return (
-    <div className="edit-event-dialog">
+    <div className='edit-event-dialog'>
       <EventEditProductSetContext.Provider value={contextValue}>
         <EditEventForm
           {...args}
           isExternalPaymentLinkEnabled
-          title="Create new event"
+          title='Create new event'
           categories={categories}
           setEditProductSetId={setEditProductSetId}
           editProductSetId={editProductSetId}

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -186,16 +186,16 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      <h5 className="edit-event-modal-title highlited-primary-title">
+      <h5 className='edit-event-modal-title highlited-primary-title'>
         {title}
       </h5>
       <FormProvider {...form}>
         <Modal.Body
-          as="form"
+          as='form'
           noValidate
           onSubmit={handleSubmit(onSaveEvent, onErrorSubmit)}
         >
-          <Form.Group controlId="name">
+          <Form.Group controlId='name'>
             <Form.Label>{t('nameOfEvent')}</Form.Label>
             <Form.Control
               {...register('name', {
@@ -210,12 +210,12 @@ export const EditEventForm = ({
                   }),
                 },
               })}
-              name="name"
+              name='name'
               required
               isInvalid={Boolean(errors.name)}
               disabled={disabled}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -256,14 +256,13 @@ export const EditEventForm = ({
             <Controller
               render={({ field }) => (
                 <TipTapEditor
-                  withEmoji={false}
                   viewMode={false}
                   onUpdate={field.onChange}
                   content={field.value}
                   disabled={disabled}
                 />
               )}
-              name="description"
+              name='description'
             />
           </Form.Group>
           {/* key is used as a hack to make sure rrule is rendered correctly */}
@@ -278,7 +277,7 @@ export const EditEventForm = ({
             <Form.Group>
               <Accordion>
                 <CollapsibleInputGroup
-                  eventKey="categories"
+                  eventKey='categories'
                   label={t('categories')}
                   description={
                     <CategoriesInputDescription categories={categories} />
@@ -304,7 +303,7 @@ export const EditEventForm = ({
                   disabled={disabled}
                 />
               )}
-              name="termsAndConditions"
+              name='termsAndConditions'
             />
           </Form.Group>
 
@@ -320,25 +319,25 @@ export const EditEventForm = ({
                     return validateURL(url, t('Design:externalPaymentLink'))
                   },
                 })}
-                name="externalPaymentLink"
-                type="url"
-                inputMode="url"
+                name='externalPaymentLink'
+                type='url'
+                inputMode='url'
                 disabled={disabled}
                 isInvalid={Boolean(errors.externalPaymentLink)}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.externalPaymentLink?.message}
               </Form.Control.Feedback>
             </Form.Group>
           )}
 
-          <Form.Group controlId={visibilityId} className="mt-5">
+          <Form.Group controlId={visibilityId} className='mt-5'>
             <Form.Label>
               {t('public')} / {t('private')}
             </Form.Label>
             <Controller
               control={control}
-              name="visible"
+              name='visible'
               rules={{
                 validate: (value) => {
                   if (typeof value !== 'boolean') {
@@ -356,20 +355,20 @@ export const EditEventForm = ({
                 return (
                   <>
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={({ target: { value } }) => {
                         field.onChange(!value ? value : value === 'true')
                       }}
                       isInvalid={invalid}
-                      defaultValue=""
+                      defaultValue=''
                       value={fieldValue}
                       disabled={disabled}
                     >
-                      <option value="">{t('Design:pleaseChooseOne')}</option>
-                      <option value="false">{t('Design:private')}</option>
-                      <option value="true">{t('Design:public')}</option>
+                      <option value=''>{t('Design:pleaseChooseOne')}</option>
+                      <option value='false'>{t('Design:private')}</option>
+                      <option value='true'>{t('Design:public')}</option>
                     </Form.Control>
-                    <Form.Control.Feedback type="invalid">
+                    <Form.Control.Feedback type='invalid'>
                       {error?.message}
                     </Form.Control.Feedback>
                   </>
@@ -388,12 +387,12 @@ export const EditEventForm = ({
                   validate: (url) =>
                     validateURL(url, t('Design:integrationUrl')),
                 })}
-                name="integrationUrl"
+                name='integrationUrl'
                 isInvalid={Boolean(errors.integrationUrl)}
                 placeholder={t('Design:integrationUrl')}
                 disabled={disabled}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.integrationUrl?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -416,8 +415,8 @@ export const EditEventForm = ({
                 isImagesLoading ||
                 isCoverImagesLoading
               }
-              className="save-event"
-              type="submit"
+              className='save-event'
+              type='submit'
             >
               {formState.isSubmitting
                 ? `${t('saveAndAdd')}...`

package/src/events/edit-event-modal/component/ProductSetShortForm/ProductSetShortForm.tsx

@@ -37,7 +37,7 @@ export const ProductSetShortForm = ({
   const nameId = useId()
 
   return (
-    <Col md={12} sm={12} className="p-0 mt-5">
+    <Col md={12} sm={12} className='p-0 mt-5'>
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(onSubmit)}>
           <Form.Group controlId={nameId}>
@@ -49,7 +49,7 @@ export const ProductSetShortForm = ({
               placeholder={t('Design:placeholderProductSetName')}
               isInvalid={!!errors.name}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.hasError(errors.name, 'required') &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:name'),
@@ -61,7 +61,7 @@ export const ProductSetShortForm = ({
           {/* <DateAndRecurrenceInput /> */}
 
           {hasPermission && (
-            <Button disabled={formState.isSubmitting} type="submit">
+            <Button disabled={formState.isSubmitting} type='submit'>
               {formState.isSubmitting ? `${t('save')}...` : t('save')}
             </Button>
           )}