@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/setting/dashboard/components/IpInput.tsx

@@ -98,7 +98,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
 
   return (
     <FormProvider {...form}>
-      <InputGroup className="mb-2" hasValidation>
+      <InputGroup className='mb-2' hasValidation>
         {IpDischargeFieldNames.map((name, i, arr) => {
           const { onChange, ...field } = register(name, {
             required: t('Validation:fieldRequired', {
@@ -125,12 +125,12 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
                 isInvalid={Boolean(formState.errors[name])}
               />
               {i !== arr.length - 1 && (
-                <InputGroup.Text className="ip-divider">.</InputGroup.Text>
+                <InputGroup.Text className='ip-divider'>.</InputGroup.Text>
               )}
             </Fragment>
           )
         })}
-        <InputGroup.Text className="ip-divider">:</InputGroup.Text>
+        <InputGroup.Text className='ip-divider'>:</InputGroup.Text>
         <FormControl
           {...register('ipPort', {
             validate: (value) =>
@@ -145,19 +145,19 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
           onPaste={handlePaste}
           isInvalid={Boolean(formState.errors.ipPort)}
         />
-        <InputGroup.Text className="ip-divider border-right">
+        <InputGroup.Text className='ip-divider border-right'>
           <Button
-            variant="light-outline"
-            size="sm"
-            className="btn-icon-popover rounded-circle d-inline-flex align-self-center pb-0"
-            aria-label="Remove IP address"
+            variant='light-outline'
+            size='sm'
+            className='btn-icon-popover rounded-circle d-inline-flex align-self-center pb-0'
+            aria-label='Remove IP address'
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <FaTimes size={14} color="red" />
+            <FaTimes size={14} color='red' />
           </Button>
         </InputGroup.Text>
-        <FormControl.Feedback type="invalid">
+        <FormControl.Feedback type='invalid'>
           {Object.values(formState.errors)[0]?.message}
         </FormControl.Feedback>
       </InputGroup>

package/src/setting/dashboard/payments/payments-form/PaymentsForm.tsx

@@ -24,23 +24,23 @@ export function PaymentsForm({
       }}
       onSubmit={form.handleSubmit(onSubmit)}
     >
-      <div className="d-flex justify-content-between mb-4">
+      <div className='d-flex justify-content-between mb-4'>
         <h5>Ryft Pay</h5>
         {accountId && <Form.Label>{accountId}</Form.Label>}
       </div>
       <Button
         disabled={isLoading}
-        type="submit"
-        className="mt-3 d-flex align-items-center"
+        type='submit'
+        className='mt-3 d-flex align-items-center'
       >
         {accountId ? t('Design:sync') : t('Design:connect')}
         {isLoading && (
           <Spinner
-            animation="border"
-            size="sm"
-            role="status"
-            aria-hidden="true"
-            className="ml-3"
+            animation='border'
+            size='sm'
+            role='status'
+            aria-hidden='true'
+            className='ml-3'
           />
         )}
       </Button>

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.tsx

@@ -31,10 +31,10 @@ export function PaymentsModal({
       {/* @ts-expect-error TS2345 */}
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <Modal.Body>
-          <Form.Group className="mb-3" controlId={emailId}>
+          <Form.Group className='mb-3' controlId={emailId}>
             <Form.Control
-              type="email"
-              placeholder="licklist@example.com"
+              type='email'
+              placeholder='licklist@example.com'
               {...register('email')}
               autoFocus
             />
@@ -42,7 +42,7 @@ export function PaymentsModal({
         </Modal.Body>
 
         <Modal.Footer>
-          <Button type="submit" variant="primary">
+          <Button type='submit' variant='primary'>
             {t('Design:connect')}
           </Button>
         </Modal.Footer>

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -22,13 +22,13 @@ export function SnippetTemplateCard({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && !isDefault && (
           <button
-            type="button"
-            className="snippet-template-card-button"
+            type='button'
+            className='snippet-template-card-button'
             onClick={onRemove}
           >
             <FaTrashAlt />
@@ -36,16 +36,16 @@ export function SnippetTemplateCard({
         )}
       </div>
       {isDefault && (
-        <div className="mt-4">
-          <p className="mb-1">{t('Design:default')}</p>
+        <div className='mt-4'>
+          <p className='mb-1'>{t('Design:default')}</p>
         </div>
       )}
-      <div className="snippet-template-card-color-container mt-5">
+      <div className='snippet-template-card-color-container mt-5'>
         {colors?.map((color, i) => (
           <div
             key={i}
             style={{ backgroundColor: color }}
-            className="snippet-template-card-color-block"
+            className='snippet-template-card-color-block'
           />
         ))}
       </div>

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