@licklist/design 0.68.7-dev.0 → 0.68.7

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -31,22 +31,22 @@ export function SnippetCard({
 
   return (
     <div
-      className='border-0 product-set-card-wrapper w-100 pb-0'
-      role='button'
+      className="border-0 product-set-card-wrapper w-100 pb-0"
+      role="button"
       tabIndex={0}
       onClick={() => RouteService.redirectTo(href)}
       onKeyUp={() => RouteService.redirectTo(href)}
     >
-      <div className='product-set-card'>
-        <div className='product-set-card-link'>{name}</div>
-        <div className='d-flex align-items-center'>
-          {isDefault && <div className='mr-4'>{t('Design:default')}</div>}
-          <div className='product-set-card-menu-eye-container'>
-            <FaEye color='#0E8CE2' size={20} />
+      <div className="product-set-card">
+        <div className="product-set-card-link">{name}</div>
+        <div className="d-flex align-items-center">
+          {isDefault && <div className="mr-4">{t('Design:default')}</div>}
+          <div className="product-set-card-menu-eye-container">
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
-            trigger='click'
-            placement='bottom'
+            trigger="click"
+            placement="bottom"
             rootClose
             overlay={
               <Popover
@@ -58,10 +58,10 @@ export function SnippetCard({
               >
                 <Popover.Content
                   as={ListGroup}
-                  className='product-set-card-menu'
-                  variant='flush'
+                  className="product-set-card-menu"
+                  variant="flush"
                 >
-                  <ListGroup.Item action className='text-danger' as='div'>
+                  <ListGroup.Item action className="text-danger" as="div">
                     <ConfirmModal>
                       {(confirm) => (
                         <MenuButton
@@ -71,7 +71,7 @@ export function SnippetCard({
                           }}
                           name={t('remove')}
                           icon={<FaTrashAlt size={12} />}
-                          className='product-set-card-menu-item-text d-flex w-100 align-items-center'
+                          className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
                       )}
@@ -82,8 +82,8 @@ export function SnippetCard({
             }
           >
             <button
-              type='button'
-              className='product-set-card-menu-button'
+              type="button"
+              className="product-set-card-menu-button"
               disabled={!isDeletingAllowed}
               onClick={(e) => {
                 e.stopPropagation()

package/src/setting/system/SystemSettingForm.tsx

@@ -32,7 +32,7 @@ export function SystemSettingForm(props: SystemSettingFormProps) {
 
   return (
     <Form
-      className='d-flex flex-column'
+      className="d-flex flex-column"
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -41,17 +41,17 @@ export function SystemSettingForm(props: SystemSettingFormProps) {
       </FormProvider>
       {hasPermission && (
         <Button
-          type='submit'
+          type="submit"
           disabled={isLoading}
-          className='d-flex align-items-center align-self-end mt-5'
+          className="d-flex align-items-center align-self-end mt-5"
         >
           {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('update')}

package/src/sidebar/elements/Elements.stories.tsx

@@ -8,7 +8,7 @@ export default {
 export const ReturnBack: Story<ReturnBackProps> = (args) => {
   return (
     <>
-      <div className='mb-2' style={{ width: 200 }}>
+      <div className="mb-2" style={{ width: 200 }}>
         <ReturnBackComponent {...args} />
       </div>
       <div style={{ width: 350 }}>

package/src/sidebar/elements/ReturnBack.tsx

@@ -10,10 +10,10 @@ function ReturnBack({ onClick }: ReturnBackProps) {
   const { t } = useTranslation(['Design'])
 
   return (
-    <div className='sidebar-return-back-container'>
-      <Button onClick={onClick} variant='outline-primary'>
+    <div className="sidebar-return-back-container">
+      <Button onClick={onClick} variant="outline-primary">
         <FaChevronLeft />
-        <span className='sidebar-return-back__title'>{t('backToCompany')}</span>
+        <span className="sidebar-return-back__title">{t('backToCompany')}</span>
       </Button>
     </div>
   )

package/src/slide-curtain/SlideCurtain.stories.tsx

@@ -9,7 +9,7 @@ export default {
 export const Default: Story = () => {
   return (
     <SlideCurtain>
-      <button className='hello'>Click</button>
+      <button className="hello">Click</button>
     </SlideCurtain>
   )
 }

package/src/slide-curtain/SlideCurtain.tsx

@@ -41,20 +41,20 @@ export function SlideCurtain({ children }) {
 
   return (
     <div
-      className='slide-form'
+      className="slide-form"
       ref={formBodyRef}
       style={{
         bottom: expanded ? 0 : bottomOffset,
       }}
     >
       <div
-        className='slide-form__swipe-trigger'
+        className="slide-form__swipe-trigger"
         {...handlers}
         ref={passRefToSwieable}
       >
-        <FaEllipsisH size={24} className='slide-form__swipe-trigger__icon' />
+        <FaEllipsisH size={24} className="slide-form__swipe-trigger__icon" />
       </div>
-      <div className='slide-form__content'>{children}</div>
+      <div className="slide-form__content">{children}</div>
     </div>
   )
 }

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,16 +44,16 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className='d-flex flex-column-reverse flex-sm-row overflow-auto'
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
-            <div className='d-flex flex-grow-1'>
+            <div className="d-flex flex-grow-1">
               <Preview
                 onSettingClick={onSettingClick}
                 providerHasMap={providerHasMap}
               />
             </div>
 
-            <div className='d-flex flex-column flex-grow-0 mx-4 mb-4'>
+            <div className="d-flex flex-column flex-grow-0 mx-4 mb-4">
               <SnippetTemplateForm
                 isLoading={isLoading}
                 onSubmit={onSubmit}

package/src/snippet/snippet-template/context/snippetTemplate.tsx

@@ -58,7 +58,7 @@ export function SnippetTemplateContextProvider({
       value={{ template, actions: actionsRef.current }}
     >
       <div
-        className='w-100 h-100'
+        className="w-100 h-100"
         style={
           {
             '--snippet-page-background-color': template?.backgroundColor,
@@ -181,7 +181,7 @@ export function SnippetTemplateContextProvider({
               template?.activePointFontColor,
           } as React.CSSProperties
         }
-        id='snippet-template-context'
+        id="snippet-template-context"
       >
         {children}
       </div>

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -59,10 +59,10 @@ export function PropertyControl<T>({
   }
 
   return (
-    <Form.Group className='position-relative color-picker'>
-      <Form.Label className='mt-2'>{label}</Form.Label>
+    <Form.Group className="position-relative color-picker">
+      <Form.Label className="mt-2">{label}</Form.Label>
 
-      <div className='position-relative'>
+      <div className="position-relative">
         <Form.Control
           {...register(item, {
             required: {
@@ -79,18 +79,18 @@ export function PropertyControl<T>({
         />
 
         <div
-          className='color-picker__color'
+          className="color-picker__color"
           style={{ backgroundColor: String(value) ?? '' }}
         />
       </div>
 
       {isActive && (
-        <div className='color-picker__popover'>
+        <div className="color-picker__popover">
           <div
-            className='color-picker__cover vh-100 vw-100'
+            className="color-picker__cover vh-100 vw-100"
             onClick={toggleIsActive}
             onKeyPress={toggleIsActive}
-            role='button'
+            role="button"
             tabIndex={0}
           />
           <TwitterPicker
@@ -103,7 +103,7 @@ export function PropertyControl<T>({
           />
         </div>
       )}
-      <Form.Control.Feedback type='invalid'>
+      <Form.Control.Feedback type="invalid">
         {HookFormService.getErrors<T>(item, errors)}
       </Form.Control.Feedback>
     </Form.Group>

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -79,13 +79,13 @@ export function SnippetTemplateForm({
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
-        <h2 className='mb-2 pb-1 border-bottom border-secondary'>
+        <h2 className="mb-2 pb-1 border-bottom border-secondary">
           {t('designSettings')}
         </h2>
 
         <Row>
           <Form.Group
-            className='mt-5'
+            className="mt-5"
             as={Col}
             controlId={nameId}
             xs
@@ -105,7 +105,7 @@ export function SnippetTemplateForm({
               isValid={isFieldValid('name')}
               isInvalid={Boolean(errors.name)}
             />
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -115,7 +115,7 @@ export function SnippetTemplateForm({
             <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
               <Form.Label>{t('widgetType')}</Form.Label>
               <Form.Control
-                as='select'
+                as="select"
                 {...register('type', {
                   required: t('Validation:fieldRequired', {
                     attribute: t('widgetType'),
@@ -136,7 +136,7 @@ export function SnippetTemplateForm({
 
         <hr />
 
-        <h5 className='mb-1'>{t(view)}</h5>
+        <h5 className="mb-1">{t(view)}</h5>
 
         {view &&
           view in properties &&
@@ -151,8 +151,8 @@ export function SnippetTemplateForm({
 
         {hasPermission && (
           <Button
-            className='mt-5 d-no dne d-md-block'
-            type='submit'
+            className="mt-5 d-no dne d-md-block"
+            type="submit"
             disabled={isLoading}
           >
             {t('save')}

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -59,23 +59,23 @@ export function Preview({
   const calendarDates = getMonthCalendarDates(currentDate)
 
   return (
-    <div className='w-100 h-100 snippet-template-preview'>
+    <div className="w-100 h-100 snippet-template-preview">
       <Page
         headerBlock={
-          <div className='d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header'>
+          <div className="d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header">
             <SettingButton
-              view='pageHeaderSteps'
+              view="pageHeaderSteps"
               onClick={handleOnClick}
-              className='m-0'
+              className="m-0"
             >
               <SettingButton
-                view='pageHeader'
+                view="pageHeader"
                 onClick={handleOnClick}
-                className='m-0 snippet-template-button-left'
-                containerClassName='mr-5 asd'
+                className="m-0 snippet-template-button-left"
+                containerClassName="mr-5 asd"
               />
-              <div className='header-block mt-5 pt-5'>
-                <div className='mt-5 pt-5 external-header'>
+              <div className="header-block mt-5 pt-5">
+                <div className="mt-5 pt-5 external-header">
                   <PageHeader showCloseButton showBackButton>
                     <Timer timer={600} />
                     <MemoryRouter initialEntries={['/step1', '/step2']}>
@@ -93,54 +93,54 @@ export function Preview({
           </div>
         }
       >
-        <div className='page-body pb-5 mb-5 pt-3 mt-3'>
+        <div className="page-body pb-5 mb-5 pt-3 mt-3">
           <SettingButton
-            view='page'
+            view="page"
             onClick={handleOnClick}
-            className='snippet-template-body-button'
+            className="snippet-template-body-button"
           />
         </div>
         <PageBody
-          className='snippet-template'
+          className="snippet-template"
           leftBlock={
             <SettingButton
-              view='pageBodyLeftBlock'
+              view="pageBodyLeftBlock"
               onClick={handleOnClick}
-              className='mr-4'
+              className="mr-4"
             >
-              <PageBody.LeftBlock title='About this event'>
+              <PageBody.LeftBlock title="About this event">
                 <SettingButton
-                  view='elements'
+                  view="elements"
                   onClick={handleOnClick}
-                  className='mt-5 m-0'
-                  containerClassName='mt-5 pt-5'
+                  className="mt-5 m-0"
+                  containerClassName="mt-5 pt-5"
                 >
-                  <div className='mt-3'>
+                  <div className="mt-3">
                     <h3>{t('elements')}</h3>
                   </div>
-                  <div className='mt-5'>
+                  <div className="mt-5">
                     <h4>{t('Texts')}</h4>
                     <p>XXXX</p>
                   </div>
 
-                  <div className='mt-5'>
+                  <div className="mt-5">
                     <h4>{t('form')}</h4>
-                    <div className='d-flex flex-column w-100'>
-                      <div className='w-100'>
-                        <div className='form-row'>
-                          <div className='form-group col-12'>
-                            <label className='form-label'>
+                    <div className="d-flex flex-column w-100">
+                      <div className="w-100">
+                        <div className="form-row">
+                          <div className="form-group col-12">
+                            <label className="form-label">
                               {t('firstName')}
                             </label>
                             <input
-                              type='text'
-                              className='form-control'
+                              type="text"
+                              className="form-control"
                               placeholder={t('firstName')}
                             />
                           </div>
                         </div>
-                        <div className='form-row'>
-                          <button type='button' className='btn btn-link'>
+                        <div className="form-row">
+                          <button type="button" className="btn btn-link">
                             {t('iHaveAccount')}
                           </button>
                         </div>
@@ -148,9 +148,9 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className='mt-5'>
+                  <div className="mt-5">
                     <h4>{t('Number input')}</h4>
-                    <div className='d-flex flex-column w-100'>
+                    <div className="d-flex flex-column w-100">
                       <NumberInput
                         value={value}
                         onChange={(nextValue) => setValue(nextValue)}
@@ -162,17 +162,17 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className='mt-5'>
+                  <div className="mt-5">
                     <h4>{t('Dropdown')}</h4>
-                    <div className='d-flex flex-column w-100'>
-                      <div className='w-100'>
-                        <div className='form-row'>
-                          <div className='form-group col-12'>
-                            <label className='form-label'>
+                    <div className="d-flex flex-column w-100">
+                      <div className="w-100">
+                        <div className="form-row">
+                          <div className="form-group col-12">
+                            <label className="form-label">
                               {t('dayOfBirthShort')}
                             </label>
                             <select
-                              className='form-control'
+                              className="form-control"
                               placeholder={t('firstName')}
                             >
                               <option>2022</option>
@@ -184,23 +184,23 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className='mt-5 snippet-template__form'>
+                  <div className="mt-5 snippet-template__form">
                     <h4>{t('Button')}</h4>
-                    <div className='d-flex flex-column w-100'>
-                      <Button size='sm'>Submit</Button>
+                    <div className="d-flex flex-column w-100">
+                      <Button size="sm">Submit</Button>
                     </div>
                   </div>
                 </SettingButton>
 
                 {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
                   <>
-                    <div className='pt-4'>
+                    <div className="pt-4">
                       <h4>{t('Calendar')}</h4>
                       <SettingButton
-                        view='calendar'
+                        view="calendar"
                         onClick={handleOnClick}
-                        className='mt-3 m-0'
-                        containerClassName='mt-5 pt-5'
+                        className="mt-3 m-0"
+                        containerClassName="mt-5 pt-5"
                       >
                         <Calendar
                           currentDate={currentDate}
@@ -218,15 +218,15 @@ export function Preview({
                         />
                       </SettingButton>
                     </div>
-                    <div className='pt-4'>
+                    <div className="pt-4">
                       <SettingButton
-                        view='productSet'
+                        view="productSet"
                         onClick={handleOnClick}
-                        className='mt-3 m-0'
-                        containerClassName='mt-5 pt-5'
+                        className="mt-3 m-0"
+                        containerClassName="mt-5 pt-5"
                       >
                         <h4>{t('Product Sets')}</h4>
-                        <div className='pt-5 mt-5'>
+                        <div className="pt-5 mt-5">
                           <EventProductSets
                             productSets={[
                               {
@@ -248,19 +248,19 @@ export function Preview({
                         </div>
                       </SettingButton>
                     </div>
-                    <div className='pt-4'>
-                      <form className='category-steps-form pt-4 mt-4'>
+                    <div className="pt-4">
+                      <form className="category-steps-form pt-4 mt-4">
                         <h4>{t('Venue Map')}</h4>
-                        <div className='position-relative pt-4 mt-4'>
+                        <div className="position-relative pt-4 mt-4">
                           <SettingButton
-                            view='venueMap'
+                            view="venueMap"
                             onClick={handleOnClick}
-                            className='mt-n6 m-0'
-                            containerClassName='mt-5 pt-5'
+                            className="mt-n6 m-0"
+                            containerClassName="mt-5 pt-5"
                           >
                             <IframeEventVenueMap
                               // eslint-disable-next-line max-len
-                              url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
+                              url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
                               usedInIframe
                               pointProducts={[
                                 {
@@ -307,7 +307,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -316,8 +315,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -336,7 +333,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -345,8 +341,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -374,21 +368,21 @@ export function Preview({
           rightBlock={
             <PageBody.RightBlock bottomBlock={<BookingSummaryFooter />}>
               <SettingButton
-                view='pageBodyRightBlock'
+                view="pageBodyRightBlock"
                 onClick={handleOnClick}
-                containerClassName='snippet-template-button-fixed-height'
-                className='m-0'
+                containerClassName="snippet-template-button-fixed-height"
+                className="m-0"
               />
 
               <BookingSummary.Accordion showTitleOnlyOnMobile>
                 <IframeEventCard
                   imageSrc={DEFAULT_IMAGE}
-                  title='XXXX'
-                  type='Party Doors 22:00 - 03:00'
+                  title="XXXX"
+                  type="Party Doors 22:00 - 03:00"
                   cost={6}
-                  date='Sat 2nd May'
+                  date="Sat 2nd May"
                   goToDetails={() => null}
-                  shortDate='07/03/2023'
+                  shortDate="07/03/2023"
                 />
               </BookingSummary.Accordion>
             </PageBody.RightBlock>

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -21,8 +21,8 @@ export const SettingButton = ({
     {children}
 
     <Button
-      type='button'
-      variant='primary'
+      type="button"
+      variant="primary"
       className={clsx('snippet-template__setting d-inline', className)}
       onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
     >

package/src/sortable-fields/SortableFieldItem.tsx

@@ -38,7 +38,7 @@ export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
 
   return (
     <SortableItemContext.Provider value={context}>
-      <div ref={setNodeRef} className='sortable-field-list' style={style}>
+      <div ref={setNodeRef} className="sortable-field-list" style={style}>
         {children}
       </div>
     </SortableItemContext.Provider>
@@ -50,7 +50,7 @@ export function DragHandle() {
 
   return (
     <div {...listeners} ref={ref}>
-      <div className='icon-container'>
+      <div className="icon-container">
         <div />
         <div />
         <div />

package/src/sortable-list/CreateSortableListItem.tsx

@@ -11,12 +11,12 @@ export function CreateSortableListItem({
 }: CreateSortableListItemProps) {
   return (
     <button
-      className='rounded sortable-list-item-wrapper mb-5 mt-2'
+      className="rounded sortable-list-item-wrapper mb-5 mt-2"
       onClick={onClick}
-      type='button'
+      type="button"
     >
       <span>{title}</span>
-      <FaPlus size={32} className='rounded sortable-list-item-icon p-2' />
+      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
     </button>
   )
 }