@licklist/design 0.68.5 → 0.68.6-dev.0

package/src/table/MenuButton.tsx

@@ -20,7 +20,7 @@ export const MenuButton = ({
 }: MenuButtonProps) => (
   <>
     <button
-      type="button"
+      type='button'
       onClick={(e) => {
         e.stopPropagation()
         onClick?.()

package/src/table/PaginationHelperComponent.tsx

@@ -41,7 +41,7 @@ function PaginationHelperComponent({
 
   const renderShowingSection = useCallback(
     () => (
-      <div className="pt-1">
+      <div className='pt-1'>
         {t('Table:showing')} {paginator?.from} {t('Table:to')} {paginator?.to}{' '}
         {t('Table:of')} {paginator?.total} {t('Table:entries')}
       </div>
@@ -53,12 +53,12 @@ function PaginationHelperComponent({
     () => (
       <Pagination>
         <button
-          type="button"
+          type='button'
           disabled={!paginationService.hasPrevPage()}
-          className="border-0"
+          className='border-0'
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <FaArrowLeft size={14} color="black" />
+          <FaArrowLeft size={14} color='black' />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -78,12 +78,12 @@ function PaginationHelperComponent({
         })}
 
         <button
-          type="button"
+          type='button'
           disabled={!paginationService.hasNextPage()}
-          className="border-0"
+          className='border-0'
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <FaArrowRight size={14} color="black" />
+          <FaArrowRight size={14} color='black' />
         </button>
       </Pagination>
     ),

package/src/table/PerPageHelperComponent.tsx

@@ -26,13 +26,13 @@ function PerPageHelperComponent(props: PerPageHelperComponentProps) {
 
   return (
     <>
-      <div className="per-page">
-        <label htmlFor="per-page">
+      <div className='per-page'>
+        <label htmlFor='per-page'>
           Show{' '}
           <select
-            id="per-page"
-            name="per_page"
-            className="form-control form-control-sm per-page-control"
+            id='per-page'
+            name='per_page'
+            className='form-control form-control-sm per-page-control'
             value={item}
             onChange={onChange}
           >

package/src/table/ReactTableHelperComponent.tsx

@@ -258,7 +258,7 @@ function WrappedReactTableHelperComponent<T extends object>(
         </Row>
         <Row>
           <Col>
-            <div className="table-responsive">
+            <div className='table-responsive'>
               <Table striped={striped} bordered={bordered} hover>
                 <thead>
                   {getHeaderGroups().map((headerGroup) => (

package/src/table/TableHelperComponent.tsx

@@ -319,7 +319,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         </Row>
         <Row>
           <Col>
-            <div className="table-responsive">
+            <div className='table-responsive'>
               <Table striped={striped} bordered={bordered} hover>
                 <thead>
                   <tr>

package/src/theme/Theme.stories.tsx

@@ -14,84 +14,84 @@ export const Basics = () => (
     >
       <p>Examples:</p>
       <p>
-        <Button variant="primary">Primary</Button>{' '}
-        <Button variant="secondary">Secondary</Button>{' '}
-        <Button variant="success">Success</Button>{' '}
-        <Button variant="warning">Warning</Button>{' '}
-        <Button variant="danger">Danger</Button>{' '}
-        <Button variant="info">Info</Button>{' '}
-        <Button variant="light">Light</Button>{' '}
-        <Button variant="dark">Dark</Button>{' '}
-        <Button variant="link">Link</Button>
+        <Button variant='primary'>Primary</Button>{' '}
+        <Button variant='secondary'>Secondary</Button>{' '}
+        <Button variant='success'>Success</Button>{' '}
+        <Button variant='warning'>Warning</Button>{' '}
+        <Button variant='danger'>Danger</Button>{' '}
+        <Button variant='info'>Info</Button>{' '}
+        <Button variant='light'>Light</Button>{' '}
+        <Button variant='dark'>Dark</Button>{' '}
+        <Button variant='link'>Link</Button>
       </p>
       <p>Outline buttons:</p>
       <p>
-        <Button variant="outline-primary">Primary</Button>{' '}
-        <Button variant="outline-secondary">Secondary</Button>{' '}
-        <Button variant="outline-success">Success</Button>{' '}
-        <Button variant="outline-warning">Warning</Button>{' '}
-        <Button variant="outline-danger">Danger</Button>{' '}
-        <Button variant="outline-info">Info</Button>{' '}
-        <Button variant="outline-light">Light</Button>{' '}
-        <Button variant="outline-dark">Dark</Button>
+        <Button variant='outline-primary'>Primary</Button>{' '}
+        <Button variant='outline-secondary'>Secondary</Button>{' '}
+        <Button variant='outline-success'>Success</Button>{' '}
+        <Button variant='outline-warning'>Warning</Button>{' '}
+        <Button variant='outline-danger'>Danger</Button>{' '}
+        <Button variant='outline-info'>Info</Button>{' '}
+        <Button variant='outline-light'>Light</Button>{' '}
+        <Button variant='outline-dark'>Dark</Button>
       </p>
       <p>Sizes</p>
       <p>
-        <div className="mb-2">
-          <Button variant="primary" size="lg">
+        <div className='mb-2'>
+          <Button variant='primary' size='lg'>
             Large button
           </Button>{' '}
-          <Button variant="secondary" size="lg">
+          <Button variant='secondary' size='lg'>
             Large button
           </Button>
         </div>
         <div>
-          <Button variant="primary" size="sm">
+          <Button variant='primary' size='sm'>
             Small button
           </Button>{' '}
-          <Button variant="secondary" size="sm">
+          <Button variant='secondary' size='sm'>
             Small button
           </Button>
         </div>
       </p>
       <p>
-        <Button variant="primary" size="lg" block>
+        <Button variant='primary' size='lg' block>
           Block level button
         </Button>
-        <Button variant="secondary" size="lg" block>
+        <Button variant='secondary' size='lg' block>
           Block level button
         </Button>
       </p>
       <p>Active state</p>
       <p>
-        <Button variant="primary" size="lg" active>
+        <Button variant='primary' size='lg' active>
           Primary button
         </Button>{' '}
-        <Button variant="secondary" size="lg" active>
+        <Button variant='secondary' size='lg' active>
           Button
         </Button>
       </p>
       <p>Disabled state</p>
       <p>
-        <Button variant="primary" size="lg" disabled>
+        <Button variant='primary' size='lg' disabled>
           Primary button
         </Button>{' '}
-        <Button variant="secondary" size="lg" disabled>
+        <Button variant='secondary' size='lg' disabled>
           Button
         </Button>{' '}
-        <Button href="#" variant="secondary" size="lg" disabled>
+        <Button href='#' variant='secondary' size='lg' disabled>
           Link
         </Button>
       </p>
       <p>Badges</p>
       <p>
-        <Badge variant="primary">Primary</Badge>{' '}
-        <Badge variant="secondary">Secondary</Badge>{' '}
-        <Badge variant="success">Success</Badge>{' '}
-        <Badge variant="warning">Warning</Badge>{' '}
-        <Badge variant="danger">Danger</Badge>{' '}
-        <Badge variant="info">Info</Badge> <Badge variant="light">Light</Badge>{' '}
-        <Badge variant="dark">Dark</Badge> <Badge variant="link">Link</Badge>
+        <Badge variant='primary'>Primary</Badge>{' '}
+        <Badge variant='secondary'>Secondary</Badge>{' '}
+        <Badge variant='success'>Success</Badge>{' '}
+        <Badge variant='warning'>Warning</Badge>{' '}
+        <Badge variant='danger'>Danger</Badge>{' '}
+        <Badge variant='info'>Info</Badge> <Badge variant='light'>Light</Badge>{' '}
+        <Badge variant='dark'>Dark</Badge> <Badge variant='link'>Link</Badge>
       </p>
     </div>
   </>

package/src/tiptap-editor/TipTapEditor.tsx

@@ -97,7 +97,7 @@ export function TipTapEditor({
         <TipTapMenu editor={editor} withEmoji={withEmoji} disabled={disabled} />
       )}
       <EditorContent
-        name="editor"
+        name='editor'
         className={clsx(
           !viewMode ? 'editor editor-with-menu' : 'editor-without-menu',
           disabled && 'editor-disabled',

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

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

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

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

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>
 )