@licklist/design 0.68.6 → 0.68.7-dev.1

package/src/zone/form/components/DescriptionControl.tsx

@@ -37,9 +37,9 @@ export const DescriptionControl = ({ isLoading }: DescriptionControlProps) => {
         )}
         rules={{ required: true }}
         control={control}
-        name="description"
+        name='description'
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {HookFormService.hasError(errors.description, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:description'),

package/src/zone/form/components/GameDurationControl.tsx

@@ -24,16 +24,17 @@ export const GameDurationControl = ({
     <Form.Group controlId={nameId}>
       <Form.Label>{t('Design:defaultGameDuration')}</Form.Label>
       <Form.Control
-        type="number"
+        type='number'
         {...register('defaultDuration', {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:duration')}
         isInvalid={Boolean(errors.defaultDuration)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.defaultDuration, 'min') &&
           t('Validation:fieldMinNumber', {
             attribute: t('Design:defaultGameDuration').toLowerCase(),

package/src/zone/form/components/NameControl.tsx

@@ -30,7 +30,7 @@ export const NameControl = ({ isLoading }: NameControlProps) => {
         isInvalid={Boolean(errors.name)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.name, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:name'),

package/src/zone/form/components/SortControl.tsx

@@ -22,16 +22,17 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
     <Form.Group controlId={nameId}>
       <Form.Label>{t('Design:ordering')}</Form.Label>
       <Form.Control
-        type="number"
+        type='number'
         {...register('sort', {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.sort, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:ordering'),

package/src/zone/form/components/ZoneControl.tsx

@@ -20,7 +20,7 @@ export const ZoneControl = ({
   timeZone,
 }: ZoneControlProps) => (
   <Row>
-    <Col md={6} sm={12} className="pr-5">
+    <Col md={6} sm={12} className='pr-5'>
       <NameControl isLoading={isLoading} />
       <ZoneRecurrencesControl workHours={workHours} timeZone={timeZone} />
       <hr />

package/src/zone/form/components/ZoneImageControl.tsx

@@ -78,7 +78,7 @@ export const ZoneImageControl = ({
   }, [images])
 
   return (
-    <Form.Group controlId="name">
+    <Form.Group controlId='name'>
       <Form.Control
         isInvalid={HookFormService.isInvalid('image', errors)}
         hidden
@@ -86,7 +86,7 @@ export const ZoneImageControl = ({
       <FileUpload
         onFilesChange={onFilesChange}
         allowedExtensions={['jpeg', 'jpg', 'png']}
-        subTitle=".jpeg    .jpg    .png"
+        subTitle='.jpeg    .jpg    .png'
         enablePreview
         onFileRemove={onImageRemove}
         defaultFiles={images}
@@ -95,7 +95,7 @@ export const ZoneImageControl = ({
         title={t('Design:addImage')}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.getErrors('image', errors)}
       </Form.Control.Feedback>
     </Form.Group>

package/src/zone/form/components/ZoneRecurrenceControl.tsx

@@ -28,7 +28,7 @@ export const ZoneRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root"
+      className='sortable-tree-root'
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -36,16 +36,16 @@ export const ZoneRecurrenceControl = ({
       {...attributes}
       {...listeners}
       ref={setNodeRef}
-      role="button"
+      role='button'
       tabIndex={0}
     >
       <div
         key={zoneRecurrence.rrule}
-        className="zone-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
+        className='zone-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
       >
-        <span className="d-flex flex-row align-items-center">
-          <FaCalendar size={16} className="zone-recurrence-icon-calendar" />
-          <span className="zone-recurrence-title d-flex flex-grow-1">
+        <span className='d-flex flex-row align-items-center'>
+          <FaCalendar size={16} className='zone-recurrence-icon-calendar' />
+          <span className='zone-recurrence-title d-flex flex-grow-1'>
             {t('from')}{' '}
             {formatDate(zoneRecurrence.startDate, {
               dateStyle: 'medium',
@@ -57,16 +57,16 @@ export const ZoneRecurrenceControl = ({
           </span>
 
           <div
-            className="d-inline-flex"
-            role="button"
+            className='d-inline-flex'
+            role='button'
             tabIndex={0}
             onClick={() => onEdit(zoneRecurrence)}
             onKeyDown={() => onEdit(zoneRecurrence)}
           >
-            <FaEllipsisH size={16} className="zone-recurrence-icon-more" />
+            <FaEllipsisH size={16} className='zone-recurrence-icon-more' />
           </div>
         </span>
-        <span className="zone-recurrence-description">
+        <span className='zone-recurrence-description'>
           {getHumanReadableDate(zoneRecurrence)}
         </span>
       </div>

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -157,8 +157,8 @@ export const ZoneRecurrencesControl = ({
       <OverlayTrigger
         show={isDatePopoverVisible}
         overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
+          <Popover id={popoverId} className='rounded'>
+            <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
               <RecurringDatePickerInput
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
@@ -170,11 +170,11 @@ export const ZoneRecurrencesControl = ({
             </Popover.Content>
           </Popover>
         }
-        trigger="click"
-        placement="bottom"
+        trigger='click'
+        placement='bottom'
         popperConfig={{ modifiers: [sameWidthPopperModifier] }}
       >
-        <div className="zone-recurrences">
+        <div className='zone-recurrences'>
           <DndContext onDragEnd={handleOnDragEnd}>
             <SortableContext
               items={
@@ -194,18 +194,18 @@ export const ZoneRecurrencesControl = ({
           </DndContext>
 
           <div
-            className="zone-recurrence-icon-wrapper"
-            role="button"
+            className='zone-recurrence-icon-wrapper'
+            role='button'
             tabIndex={0}
             onClick={handleOnAdd}
             onKeyDown={handleOnAdd}
           >
-            <FaPlusCircle size={16} className="zone-recurrence-icon-add mr-2" />
+            <FaPlusCircle size={16} className='zone-recurrence-icon-add mr-2' />
             {t('addDates')}
           </div>
 
           <Form.Control
-            type="hidden"
+            type='hidden'
             {...register('zoneRecurrences', {
               required: {
                 value: true,
@@ -217,7 +217,7 @@ export const ZoneRecurrencesControl = ({
             })}
           />
 
-          <div className="manual-form-error">
+          <div className='manual-form-error'>
             {errors.zoneRecurrences?.message}
           </div>
         </div>

package/src/zone/form/components/ZoneTypeControl.tsx

@@ -25,7 +25,7 @@ export const ZoneTypeControl = ({ isLoading }: ZoneTypeControlProps) => {
     <Form.Group controlId={nameId}>
       <Form.Label>{t('Design:zoneType')}</Form.Label>
       <Form.Control
-        as="select"
+        as='select'
         {...register('type', {
           required: true,
         })}
@@ -39,7 +39,7 @@ export const ZoneTypeControl = ({ isLoading }: ZoneTypeControlProps) => {
           </option>
         ))}
       </Form.Control>
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.type, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:name'),

package/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  prefix: 'tw-',
+  // @TODO: remove this after removing bootstrap from a project
+  corePlugins: {
+    preflight: false,
+  },
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}