@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/tiptap-editor/TipTapMenu/TipTapMenu.tsx

@@ -38,25 +38,25 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
     <Row className={clsx('editor-menu', disabled && 'editor-menu-disabled')}>
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBold().run()}
-        type="Bold"
+        type='Bold'
         icon={<BoldSvg />}
         isActive={editor.isActive('bold')}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleItalic().run()}
-        type="Italic"
+        type='Italic'
         icon={<ItalicSvg />}
         isActive={editor.isActive('italic')}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleStrike().run()}
-        type="Strike"
+        type='Strike'
         icon={<StrikethroughSvg />}
         isActive={editor.isActive('strike')}
       />
       {withEmoji && (
         <>
-          <div className="divider" />
+          <div className='divider' />
           <TipTapMenuItem
             onClick={() =>
               editor
@@ -67,83 +67,83 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
                 )
                 .run()
             }
-            type="Emoji"
+            type='Emoji'
             icon={<FaSmile />}
           />
         </>
       )}
-      <div className="divider" />
+      <div className='divider' />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        type="Heading 1"
+        type='Heading 1'
         icon={<H1Svg />}
         isActive={editor.isActive('heading', { level: 1 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        type="Heading 2"
+        type='Heading 2'
         icon={<H2Svg />}
         isActive={editor.isActive('heading', { level: 2 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setParagraph().run()}
-        type="Paragraph"
+        type='Paragraph'
         icon={<ParagraphSvg />}
         isActive={editor.isActive('paragraph')}
       />
 
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        type="Bullet list"
+        type='Bullet list'
         icon={<FaList />}
         isActive={editor.isActive('bulletList')}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBulletList().run()}
-        type="Ordered list"
+        type='Ordered list'
         icon={<FaListOl />}
         isActive={editor.isActive('orderedList')}
       />
       <TipTapMenuItem
         onClick={() => editor.commands.toggleTaskList()}
-        type="Task list"
+        type='Task list'
         icon={<FaTasks />}
         isActive={editor.isActive('taskList')}
       />
-      <div className="divider" />
+      <div className='divider' />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        type="Blockquote"
+        type='Blockquote'
         icon={<DoubleQuotesLSvg />}
         isActive={editor.isActive('blockquote')}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
-        type="Horizontal Rule"
+        type='Horizontal Rule'
         icon={<SepatatorSvg />}
       />
-      <div className="divider" />
+      <div className='divider' />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHardBreak().run()}
-        type="Hard Break"
+        type='Hard Break'
         icon={<TextWrapSvg />}
       />
       <TipTapMenuItem
         onClick={() =>
           editor.chain().focus().unsetAllMarks().clearNodes().run()
         }
-        type="Clear Format"
+        type='Clear Format'
         icon={<FormatClearSvg />}
       />
-      <div className="divider" />
+      <div className='divider' />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().undo().run()}
-        type="Undo"
+        type='Undo'
         icon={<FaUndoAlt />}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().redo().run()}
-        type="Redo"
+        type='Redo'
         icon={<FaRedoAlt />}
       />
     </Row>

package/src/tiptap-editor/TipTapMenu/components/TipTapMenuItem.tsx

@@ -20,12 +20,12 @@ export const TipTapMenuItem = ({
 
   return (
     <OverlayTrigger
-      placement="top"
+      placement='top'
       delay={{ show: 450, hide: 550 }}
       overlay={<Tooltip id={toltipId}>{type}</Tooltip>}
     >
       <div
-        role="button"
+        role='button'
         tabIndex={-1}
         className={clsx('icon-btn', isActive && 'icon-btn-active')}
         onClick={onClick}

package/src/tiptap-editor/TipTapMenu/extensions/constants.ts

@@ -1 +1,2 @@
-export const EMOJI_URL = "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/";
+export const EMOJI_URL =
+  'https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/'

package/src/tiptap-editor/TipTapMenu/extensions/utils.ts

@@ -4,8 +4,8 @@ import { EMOJI_URL } from './constants'
 function parseTwemoji(emoji: string) {
   const [twemoji] = parse(emoji)
 
-  const emojiPathUrl = EMOJI_URL.concat(twemoji.url.split("/").slice(-1));
-  
+  const emojiPathUrl = EMOJI_URL.concat(twemoji.url.split('/').slice(-1))
+
   return {
     src: emojiPathUrl,
     alt: twemoji.text,

package/src/typeahead/Typeahead.stories.tsx

@@ -10,15 +10,15 @@ export const _Typeahead = () => {
   return (
     <FormProvider {...form}>
       <Typeahead
-        name="user"
+        name='user'
         isMultipleChoise
         options={[
           { id: 1, value: 'user1', label: 'User1' },
           { id: 2, value: 'user2', label: 'User2' },
           { id: 3, value: 'user3', label: 'User3' },
         ]}
-        placeholder="Select"
-        noOptionsMessage="No Options Found"
+        placeholder='Select'
+        noOptionsMessage='No Options Found'
       />
     </FormProvider>
   )

package/src/typeahead/Typeahead.tsx

@@ -12,10 +12,13 @@ export interface TypeaheadProps {
   placeholder: string
   isRequired?: boolean
   name: string
+  value?: TypeaheadOptions
   isMultipleChoise?: boolean
   noOptionsMessage: string
   isInvalid?: boolean
   isCouponForm?: boolean
+  containerStyles?: CSSObjectWithLabel
+  onChangeValue?: (value: TypeaheadOptions) => void
 }
 
 function Typeahead({
@@ -24,6 +27,9 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = '',
+  value,
+  onChangeValue,
+  containerStyles,
   isCouponForm = false,
   noOptionsMessage = '',
   isInvalid,
@@ -53,15 +59,23 @@ function Typeahead({
         render={({ field }) => (
           <Select
             placeholder={placeholder}
-            value={field.value}
+            value={value ?? field.value}
             isMulti={isMultipleChoise}
             styles={{
+              container: (base) => ({
+                ...base,
+                ...containerStyles,
+              }),
               control: (base) => ({
                 ...base,
                 ...getStyle(),
               }),
             }}
             onChange={(value) => {
+              if (onChangeValue) {
+                onChangeValue(value)
+                return
+              }
               field.onChange(value)
             }}
             options={options}

package/src/typeahead-helper/TypeaheadHelperComponent.tsx

@@ -154,7 +154,7 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
             <>
               {renderSuggestions()}
               {lastSuggestionItem && (
-                <Dropdown.Item key="lastSuggestionItem">
+                <Dropdown.Item key='lastSuggestionItem'>
                   <Highlighter>{lastSuggestionItem}</Highlighter>
                 </Dropdown.Item>
               )}
@@ -168,15 +168,15 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
   }
 
   return (
-    <div className="typeahead-helper-component">
+    <div className='typeahead-helper-component'>
       <FormControl
         ref={ref}
         onChange={handleChange}
         onFocus={handleFocus}
         placeholder={placeholder}
         value={search}
-        type="text"
-        autoComplete="off"
+        type='text'
+        autoComplete='off'
         disabled={isDisabled}
         isValid={isValid}
         isInvalid={isInvalid}

package/src/venue-map-sets/card/VenueMapSetCard.tsx

@@ -29,21 +29,21 @@ export function VenueMapSetCard({
 
   return (
     <div
-      role="button"
+      role='button'
       tabIndex={0}
-      className="border-0 venue-map-set-card-wrapper w-100 pb-0"
+      className='border-0 venue-map-set-card-wrapper w-100 pb-0'
       onClick={() => RouteService.redirectTo(href)}
       onKeyUp={() => RouteService.redirectTo(href)}
     >
       <div className={clsx('venue-map-set-card', className)}>
-        <div className="venue-map-set-card-link">{name}</div>
-        <div className="d-flex">
-          <div className="venue-map-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+        <div className='venue-map-set-card-link'>{name}</div>
+        <div className='d-flex'>
+          <div className='venue-map-set-card-menu-eye-container'>
+            <FaEye color='#0E8CE2' size={20} />
           </div>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -55,12 +55,12 @@ export function VenueMapSetCard({
               >
                 <Popover.Content
                   as={ListGroup}
-                  className="venue-map-set-card-menu"
-                  variant="flush"
+                  className='venue-map-set-card-menu'
+                  variant='flush'
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item action className='text-danger' as='div'>
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -71,7 +71,7 @@ export function VenueMapSetCard({
                                 }}
                                 name={t('remove')}
                                 icon={<FaTrashAlt size={12} />}
-                                className="venue-map-set-card-menu-item-text d-flex w-100 align-items-center"
+                                className='venue-map-set-card-menu-item-text d-flex w-100 align-items-center'
                                 rightIcon
                               />
                             )}
@@ -85,8 +85,8 @@ export function VenueMapSetCard({
             }
           >
             <button
-              type="button"
-              className="venue-map-set-card-menu-button"
+              type='button'
+              className='venue-map-set-card-menu-button'
               onClick={(e) => {
                 e.stopPropagation()
                 setIsOverlayVisible(true)

package/src/venue-map-sets/form/VenueMapSetForm.tsx

@@ -35,7 +35,7 @@ export const VenueMapSetForm = ({
     <FormProvider {...form}>
       <Form
         onSubmit={handleSubmit(onFormSubmit)}
-        className="venue-map-set-form"
+        className='venue-map-set-form'
       >
         <Row>
           <Col md={6} sm={12}>
@@ -55,8 +55,8 @@ export const VenueMapSetForm = ({
             sm={12}
           >
             <Button
-              className="mt-5 d-md-block"
-              type="submit"
+              className='mt-5 d-md-block'
+              type='submit'
               disabled={isLoading}
             >
               {t('saveAndClose')}

package/src/venue-map-sets/form/components/NameControl.tsx

@@ -54,7 +54,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/venue-map-sets/form/components/VenueMapControl.tsx

@@ -41,19 +41,19 @@ export const VenueMapControl = ({
         isInvalid && 'is-invalid',
       )}
       onClick={onClick}
-      type="button"
+      type='button'
       disabled={disabled}
     >
-      <div className="overflow-hidden name-wrapper w-100">
+      <div className='overflow-hidden name-wrapper w-100'>
         {!showMenu && (
-          <FaPlus size={20} className="rounded venue-map-zone-item-icon" />
+          <FaPlus size={20} className='rounded venue-map-zone-item-icon' />
         )}
-        <span className="name">{title || 'Name'}</span>
+        <span className='name'>{title || 'Name'}</span>
       </div>
       {!!showMenu && (
         <div
-          className="border-0 open-edit-right-modal-button"
-          role="button"
+          className='border-0 open-edit-right-modal-button'
+          role='button'
           tabIndex={0}
           onClick={(e) => {
             e.stopPropagation()
@@ -61,10 +61,10 @@ export const VenueMapControl = ({
           }}
           onKeyDown={(e) => e.stopPropagation()}
         >
-          <FaEllipsisH color="#0E8CE2" size={16} />
+          <FaEllipsisH color='#0E8CE2' size={16} />
         </div>
       )}
     </button>
-    <div className="manual-form-error">{errors}</div>
+    <div className='manual-form-error'>{errors}</div>
   </div>
 )

package/src/venue-map-sets/form/components/VenueMapImageControl.tsx

@@ -94,8 +94,8 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
   const mapUrl = venueMap?.image?.url || venueMap?.localImageBlobURL
 
   return (
-    <Col sm="6" md="6">
-      <Form.Group controlId="name">
+    <Col sm='6' md='6'>
+      <Form.Group controlId='name'>
         <Form.Control
           isInvalid={HookFormService.isInvalid(
             `venueMaps.${index}.image` as const,
@@ -106,7 +106,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
         <FileUpload
           onFilesChange={onFilesChange}
           allowedExtensions={['jpeg', 'jpg', 'png']}
-          subTitle=".jpeg    .jpg    .png"
+          subTitle='.jpeg    .jpg    .png'
           enablePreview
           onFileRemove={onImageRemove}
           defaultFiles={images}
@@ -114,7 +114,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
           withIcon
           title={t('Design:addImage')}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.getErrors(
             `venueMaps.${index}.image` as const,
             errors,
@@ -137,7 +137,7 @@ export const VenueMapImageControl = ({ index }: VenueMapImageControlProps) => {
           }
         >
           {(confirm) => (
-            <Button onClick={confirm} className="pt-3">
+            <Button onClick={confirm} className='pt-3'>
               {t('addPoints')}
             </Button>
           )}

package/src/venue-map-sets/form/components/VenueMapModal.tsx

@@ -45,25 +45,25 @@ export const VenueMapModal = ({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       show={showModal}
       className={clsx(
         'm-0 edit-product-set-element-modal edit-right-form-modal h-100',
       )}
-      dialogClassName="edit-venue-map-set-dialog edit-venue-map-dialog"
+      dialogClassName='edit-venue-map-set-dialog edit-venue-map-dialog'
       onHide={onModalHide}
     >
-      <div className="edit-step-modal-header">
+      <div className='edit-step-modal-header'>
         <button
-          className="p-0 cancel-add-step-btn border-0"
-          type="button"
+          className='p-0 cancel-add-step-btn border-0'
+          type='button'
           onClick={onModalHide}
         >
           <span>{t('Design:cancel')}</span>
         </button>
       </div>
-      <Modal.Body as="form" noValidate>
-        <div className="top-label-container">
+      <Modal.Body as='form' noValidate>
+        <div className='top-label-container'>
           <span>{t('Design:addANewVenueMap')}</span>
         </div>
         <Row>
@@ -81,7 +81,7 @@ export const VenueMapModal = ({
                     placeholder={t('Design:id')}
                     hidden
                   />
-                  <Form.Group controlId="name">
+                  <Form.Group controlId='name'>
                     <Form.Label>{t('Design:name')}*</Form.Label>
                     <Form.Control
                       {...register(`${key}.name` as const, {
@@ -94,7 +94,7 @@ export const VenueMapModal = ({
                         errors,
                       )}
                     />
-                    <Form.Control.Feedback type="invalid">
+                    <Form.Control.Feedback type='invalid'>
                       {HookFormService.hasError(
                         errors?.venueMaps?.[index]?.name,
                         'required',
@@ -128,10 +128,10 @@ export const VenueMapModal = ({
             )
           })}
         </Row>
-        <div className="d-flex venue-map-element-control-btns justify-content-between">
+        <div className='d-flex venue-map-element-control-btns justify-content-between'>
           <Button
-            className="venue-map-save-btn mt-4"
-            type="button"
+            className='venue-map-save-btn mt-4'
+            type='button'
             onClick={async () => {
               const isValid = await trigger(venueMapsKeys)
 
@@ -144,17 +144,17 @@ export const VenueMapModal = ({
           >
             {t('saveAndAdd')}
           </Button>
-          <div className="d-flex justify-content-end mt-4 delete-btn">
+          <div className='d-flex justify-content-end mt-4 delete-btn'>
             <ConfirmModal>
               {(confirm) => (
                 <Button
                   onClick={() => confirm(onModalDelete)}
-                  variant="outline-danger"
-                  className="d-flex align-items-center"
+                  variant='outline-danger'
+                  className='d-flex align-items-center'
                 >
                   <FaTrashAlt size={16} />
                   &nbsp;
-                  <span className="d-none d-sm-inline ml-2">{t('delete')}</span>
+                  <span className='d-none d-sm-inline ml-2'>{t('delete')}</span>
                 </Button>
               )}
             </ConfirmModal>

package/src/venue-map-sets/form/components/VenueMapsControl.tsx

@@ -162,7 +162,7 @@ export const VenueMapsControl = ({ isLoading }) => {
         }}
         disabled={isLoading}
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {errors.venueMaps && errors.venueMaps.message}
       </div>
     </>

package/src/virtualized/components/VirtualizedGrid.tsx

@@ -14,7 +14,7 @@ export const VirtualizedGrid = (props: VirtualizedGridProps) => {
   }, [gridRef.current, setGridRef])
 
   return (
-    <div className="virtualized-grid-container">
+    <div className='virtualized-grid-container'>
       <Grid ref={gridRef} {...props} />
     </div>
   )

package/src/zone/card/ZoneCard.tsx

@@ -30,21 +30,21 @@ export function ZoneCard({
 
   return (
     <div
-      role="button"
+      role='button'
       tabIndex={0}
-      className="border-0 zone-card-wrapper w-100 pb-0"
+      className='border-0 zone-card-wrapper w-100 pb-0'
       onClick={() => RouteService.redirectTo(href)}
       onKeyUp={() => RouteService.redirectTo(href)}
     >
       <div className={ZoneCardClasses}>
-        <div className="zone-card-link">{name}</div>
-        <div className="d-flex">
-          <div className="zone-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+        <div className='zone-card-link'>{name}</div>
+        <div className='d-flex'>
+          <div className='zone-card-menu-eye-container'>
+            <FaEye color='#0E8CE2' size={20} />
           </div>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -56,12 +56,12 @@ export function ZoneCard({
               >
                 <Popover.Content
                   as={ListGroup}
-                  className="zone-card-menu"
-                  variant="flush"
+                  className='zone-card-menu'
+                  variant='flush'
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item action className='text-danger' as='div'>
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -72,7 +72,7 @@ export function ZoneCard({
                                 }}
                                 name={t('remove')}
                                 icon={<FaTrashAlt size={12} />}
-                                className="zone-card-menu-item-text d-flex w-100 align-items-center"
+                                className='zone-card-menu-item-text d-flex w-100 align-items-center'
                                 rightIcon
                               />
                             )}
@@ -86,8 +86,8 @@ export function ZoneCard({
             }
           >
             <button
-              type="button"
-              className="zone-card-menu-button"
+              type='button'
+              className='zone-card-menu-button'
               onClick={(e) => {
                 e.stopPropagation()
                 setIsOverlayVisible(true)

package/src/zone/form/ZoneForm.tsx

@@ -65,13 +65,13 @@ export const ZoneForm = ({
         <Row>
           <Col md={6} sm={12} />
           <Col
-            className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
+            className='product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100'
             md={6}
             sm={12}
           >
             <Button
-              className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-              type="submit"
+              className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
+              type='submit'
               disabled={isLoading || !formValues.name}
             >
               {t('saveAndClose')}

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

@@ -92,11 +92,11 @@ export const AvailableTimesControl = forwardRef<
     return (
       <Form.Group controlId={nameId}>
         <Form.Label>{t('Design:startTimes')}</Form.Label>
-        <div className="zone-available-times">
+        <div className='zone-available-times'>
           {checkboxes.map((option) => (
             <Form.Check key={option} inline custom id={option}>
               <Form.Check.Input
-                type="checkbox"
+                type='checkbox'
                 value={option}
                 checked={availableTimes.includes(option)}
                 onChange={() => onChange(option)}
@@ -107,8 +107,8 @@ export const AvailableTimesControl = forwardRef<
           ))}
         </div>
 
-        <Form.Control type="hidden" {...register('availableTimes')} />
-        <div className="manual-form-error">
+        <Form.Control type='hidden' {...register('availableTimes')} />
+        <div className='manual-form-error'>
           {errors.availableTimes?.message || errorMessage}
         </div>
       </Form.Group>