@licklist/design 0.68.6-dev.1 → 0.68.6

package/dist/tiptap-editor/TipTapMenu/extensions/utils.js

@@ -1,5 +1,4 @@
 import { parse } from 'twemoji-parser';
-import { EMOJI_URL } from './constants.js';
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -49,9 +48,8 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 function parseTwemoji(emoji) {
     var _parse = _sliced_to_array(parse(emoji), 1), twemoji = _parse[0];
-    var emojiPathUrl = EMOJI_URL.concat(twemoji.url.split("/").slice(-1));
     return {
-        src: emojiPathUrl,
+        src: twemoji.url,
         alt: twemoji.text,
         class: 'emoji',
         draggable: 'false'

package/dist/typeahead/Typeahead.d.ts

@@ -1,4 +1,3 @@
-import { CSSObjectWithLabel } from 'react-select';
 export type TypeaheadOptions = {
     id: number | string;
     value: any;
@@ -9,14 +8,11 @@ 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;
 }
-declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, value, onChangeValue, containerStyles, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
 export { Typeahead };
 //# sourceMappingURL=Typeahead.d.ts.map

package/dist/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAGzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,kBAAkB,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAClD;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,KAAK,EACL,aAAa,EACb,eAAe,EACf,YAAoB,EACpB,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,2CAoDhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,YAAoB,EACpB,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,2CA4ChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/typeahead/Typeahead.js

@@ -31,7 +31,7 @@ function _object_spread(target) {
     return target;
 }
 function Typeahead(param) {
-    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? '' : _param_name, value = param.value, onChangeValue = param.onChangeValue, containerStyles = param.containerStyles, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? '' : _param_noOptionsMessage, isInvalid = param.isInvalid;
+    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? '' : _param_name, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? '' : _param_noOptionsMessage, isInvalid = param.isInvalid;
     var control = useFormContext().control;
     var getStyle = function() {
         var couponFormStyle = isCouponForm ? {
@@ -53,21 +53,14 @@ function Typeahead(param) {
                 var field = param.field;
                 return /*#__PURE__*/ jsx(Select, {
                     placeholder: placeholder,
-                    value: value !== null && value !== void 0 ? value : field.value,
+                    value: field.value,
                     isMulti: isMultipleChoise,
                     styles: {
-                        container: function(base) {
-                            return _object_spread({}, base, containerStyles);
-                        },
                         control: function(base) {
                             return _object_spread({}, base, getStyle());
                         }
                     },
                     onChange: function(value) {
-                        if (onChangeValue) {
-                            onChangeValue(value);
-                            return;
-                        }
                         field.onChange(value);
                     },
                     options: options,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.68.6-dev.1",
+  "version": "0.68.6",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.1",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.0-dev.0",
+    "@licklist/plugins": "0.33.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,11 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.1",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.0-dev.0",
-    "@mantine/core": "6.0.22",
-    "@mantine/hooks": "6.0.22",
+    "@licklist/plugins": "0.33.1",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -162,21 +160,15 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@vitejs/plugin-react": "4.3.1",
-    "autoprefixer": "10.4.20",
     "babel-loader": "8.2.2",
     "css-loader": "5.1.1",
-    "cssnano": "7.0.6",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "7.0.4",
     "lint-staged": "12.3.2",
-    "postcss": "8.4.47",
-    "postcss-preset-mantine": "1.17.0",
-    "postcss-simple-vars": "7.0.1",
     "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "3.29.4",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.5.0",
@@ -187,7 +179,6 @@
     "sass": "1.77.8",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
-    "tailwindcss": "3.4.13",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
     "vite": "5.3.5",
@@ -202,10 +193,8 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  },
-  "stableVersion": "0.66.7-dev.5"
+  }
 }

package/rollup.config.js

@@ -33,7 +33,6 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
-          { src: './src/root.css', dest: './dist' },
         ],
       }),
 

package/src/affiliate/card/AffiliateCard.tsx

@@ -35,7 +35,7 @@ export function AffiliateCard({
 
   return (
     <div
-      role='button'
+      role="button"
       tabIndex={0}
       aria-disabled={isHeader}
       className={[
@@ -46,23 +46,23 @@ export function AffiliateCard({
       onKeyUp={onClick}
     >
       <div className={affiliateClass}>
-        <div className='affiliate-card-link'>{name}</div>
+        <div className="affiliate-card-link">{name}</div>
 
-        <div className='d-flex'>
+        <div className="d-flex">
           {(sales || sales === 0) && (
-            <div className='affilates-statistic'>{sales}</div>
+            <div className="affilates-statistic">{sales}</div>
           )}
           {(views || views === 0) && (
-            <div className='affilates-statistic'>{views}</div>
+            <div className="affilates-statistic">{views}</div>
           )}
           <div className={['d-flex', isHeader ? 'invisible' : ''].join(' ')}>
-            <div className='affiliate-card-menu-eye-container'>
-              <FaEye color='#0E8CE2' size={20} />
+            <div className="affiliate-card-menu-eye-container">
+              <FaEye color="#0E8CE2" size={20} />
             </div>
 
             <OverlayTrigger
-              trigger='click'
-              placement='bottom'
+              trigger="click"
+              placement="bottom"
               rootClose
               overlay={
                 <Popover
@@ -74,12 +74,12 @@ export function AffiliateCard({
                 >
                   <Popover.Content
                     as={ListGroup}
-                    className='affiliate-card-menu'
-                    variant='flush'
+                    className="affiliate-card-menu"
+                    variant="flush"
                   >
                     {!isHeader && hasPermission && (
                       <>
-                        <ListGroup.Item action className='text-danger' as='div'>
+                        <ListGroup.Item action className="text-danger" as="div">
                           {Boolean(onRemove) && (
                             <ConfirmModal>
                               {(confirm) => (
@@ -90,7 +90,7 @@ export function AffiliateCard({
                                   }}
                                   name={t('remove')}
                                   icon={<FaTrashAlt size={12} />}
-                                  className='affiliate-card-menu-item-text d-flex w-100 align-items-center'
+                                  className="affiliate-card-menu-item-text d-flex w-100 align-items-center"
                                   rightIcon
                                 />
                               )}
@@ -104,8 +104,8 @@ export function AffiliateCard({
               }
             >
               <button
-                type='button'
-                className='affiliate-card-menu-button'
+                type="button"
+                className="affiliate-card-menu-button"
                 onClick={(e) => {
                   e.stopPropagation()
                   setIsOverlayVisible(true)

package/src/affiliate/form/AffiliateControl.tsx

@@ -36,8 +36,8 @@ export const AffiliateControl = ({
   }, [generateLink, targetLink, setValue])
 
   return (
-    <div className='affiliate-control'>
-      <Form.Group controlId={nameId} className='mb-5'>
+    <div className="affiliate-control">
+      <Form.Group controlId={nameId} className="mb-5">
         <Form.Label>{t('Design:name')}</Form.Label>
         <Form.Control
           {...register('name', {
@@ -49,11 +49,11 @@ export const AffiliateControl = ({
           placeholder={t('Design:placeholderAffiliateName')}
           isInvalid={Boolean(errors.name)}
         />
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
-      <Form.Group controlId={targetId} className='target-link-container'>
+      <Form.Group controlId={targetId} className="target-link-container">
         <Form.Label>{t('Design:targetLink')}</Form.Label>
         <Form.Control
           {...register('targetLink', {
@@ -66,13 +66,13 @@ export const AffiliateControl = ({
           placeholder={t('Design:placeholderTargetLink')}
           isInvalid={Boolean(errors.name)}
         />
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
       <Button
-        className='affiliate-save-btn mb-4'
-        type='button'
+        className="affiliate-save-btn mb-4"
+        type="button"
         disabled={isLoading || !!errors.targetLink || !targetLink}
         onClick={handleGenerateLink}
       >
@@ -86,7 +86,7 @@ export const AffiliateControl = ({
           }) as string,
           maxLength: 255,
         })}
-        type='text'
+        type="text"
         disabled
       />
     </div>

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,7 +76,6 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
-
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>
@@ -89,18 +88,18 @@ export const AffiliateForm = ({
         />
         <AffiliateControl isLoading={isLoading} generateLink={generateLink} />
 
-        <div className='button-container'>
+        <div className="button-container">
           <Button
-            className='affiliate-save-btn mt-5 ml-5 d-no dne d-md-block'
-            type='button'
+            className="affiliate-save-btn mt-5 ml-5 d-no dne d-md-block"
+            type="button"
             disabled={isLoading || !formValues.link}
             onClick={copyToClipboard}
           >
             {t('Design:copyToClipboard')}
           </Button>
           <Button
-            className='affiliate-save-btn mt-5 ml-2 d-no dne d-md-block'
-            type='submit'
+            className="affiliate-save-btn mt-5 ml-2 d-no dne d-md-block"
+            type="submit"
             disabled={
               isLoading ||
               !formValues.name ||

package/src/auth/AccessDenied/AccessDenied.tsx

@@ -18,18 +18,18 @@ export const AccessDenied = () => {
   }
 
   return (
-    <div className='d-flex align-items-center justify-content-center flex-column text-center access-denied h-100'>
-      <div className='col-8'>
-        <div className='icon-wrapper mb-5'>
+    <div className="d-flex align-items-center justify-content-center flex-column text-center access-denied h-100">
+      <div className="col-8">
+        <div className="icon-wrapper mb-5">
           <FaLock size={80} />
         </div>
-        <h3 className='mb-3'>{t('accessDenied')}</h3>
-        <h6 className='mb-3'>{t('youDontHavePermissions')}</h6>
-        <h6 className='mb-5'>{t('contactAnAdministrator')}</h6>
-        <Button className='d-block mx-auto' onClick={onGoToHomepage}>
+        <h3 className="mb-3">{t('accessDenied')}</h3>
+        <h6 className="mb-3">{t('youDontHavePermissions')}</h6>
+        <h6 className="mb-5">{t('contactAnAdministrator')}</h6>
+        <Button className="d-block mx-auto" onClick={onGoToHomepage}>
           {t('goToHomepage')}
         </Button>
-        <Button className='d-block mx-auto mt-5' onClick={logOutHandler}>
+        <Button className="d-block mx-auto mt-5" onClick={logOutHandler}>
           {t('logOut')}
         </Button>
       </div>

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -63,11 +63,11 @@ function ChangePasswordComponent() {
 
   return (
     <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+      <Row className="justify-content-center">
+        <Col xs sm={12} md={7} lg={6} xl={5} className="align-self-center">
           <>
-            <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
-            <h3 className='text-center'>{t('User:forEmail', { email })}</h3>
+            <h1 className="text-center">{t('User:resetPasswordTitle')}</h1>
+            <h3 className="text-center">{t('User:forEmail', { email })}</h3>
 
             <FormCard>
               <ChangePasswordFormComponent

package/src/auth/ChangePassword/ChangePasswordFormComponent.tsx

@@ -48,8 +48,8 @@ export const ChangePasswordFormComponent = ({
     <>
       <Form onSubmit={handleSubmit(onFormSubmit)} noValidate>
         <Form.Control
-          type='email'
-          name='email'
+          type="email"
+          name="email"
           placeholder={t('User:email')}
           isValid={!errors.email && formState.isValid}
           isInvalid={!!errors.email}
@@ -61,7 +61,7 @@ export const ChangePasswordFormComponent = ({
           hidden
         />
         <Form.Control
-          name='token'
+          name="token"
           placeholder={t('User:tokene')}
           isValid={!errors.token && formState.isValid}
           isInvalid={!!errors.token}
@@ -71,11 +71,11 @@ export const ChangePasswordFormComponent = ({
           disabled={isLoading}
           hidden
         />
-        <Form.Group controlId='formGroupNewPassword'>
+        <Form.Group controlId="formGroupNewPassword">
           <Form.Label>{t('User:newPassword')}</Form.Label>
           <Form.Control
-            type='password'
-            name='password'
+            type="password"
+            name="password"
             placeholder={t('User:newPassword')}
             isValid={!errors.password && formState.isValid}
             isInvalid={!!errors.password}
@@ -86,7 +86,7 @@ export const ChangePasswordFormComponent = ({
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.password, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:newPassword'),
@@ -98,11 +98,11 @@ export const ChangePasswordFormComponent = ({
               })}
           </Form.Control.Feedback>
         </Form.Group>
-        <Form.Group controlId='formGroupPasswordConfirmation'>
+        <Form.Group controlId="formGroupPasswordConfirmation">
           <Form.Label>{t('User:confirmPassword')}</Form.Label>
           <Form.Control
-            type='password'
-            name='password_confirmation'
+            type="password"
+            name="password_confirmation"
             placeholder={t('User:confirmPassword')}
             isValid={!errors.password_confirmation && formState.isValid}
             isInvalid={!!errors.password_confirmation}
@@ -115,7 +115,7 @@ export const ChangePasswordFormComponent = ({
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(
               errors.password_confirmation,
               'required',
@@ -144,9 +144,9 @@ export const ChangePasswordFormComponent = ({
         </Form.Group>
 
         <Button
-          variant='primary'
-          type='submit'
-          className='rounded-pill text-uppercase'
+          variant="primary"
+          type="submit"
+          className="rounded-pill text-uppercase"
           block
           disabled={isLoading}
         >

package/src/auth/Layout/AuthNavComponent.tsx

@@ -8,16 +8,16 @@ function AuthNavComponent() {
 
   return (
     <Router>
-      <Link to='/login'>
-        <StyledButton size='sm' className='rounded-pill mr-2'>
+      <Link to="/login">
+        <StyledButton size="sm" className="rounded-pill mr-2">
           {t('login')}
         </StyledButton>
       </Link>
-      <Link to='/register'>
+      <Link to="/register">
         <StyledButton
-          size='sm'
-          className='rounded-pill'
-          variant='outline-secondary'
+          size="sm"
+          className="rounded-pill"
+          variant="outline-secondary"
         >
           {t('register')}
         </StyledButton>

package/src/auth/Layout/UserNavComponent.tsx

@@ -14,8 +14,8 @@ function UserNavComponent(props: UserNavComponentProps) {
 
   return (
     <>
-      <Dropdown className='user-nav-container'>
-        <Dropdown.Toggle as={DropDownToggle} id='dropdown-user-components'>
+      <Dropdown className="user-nav-container">
+        <Dropdown.Toggle as={DropDownToggle} id="dropdown-user-components">
           <UserNavDropDownToggle user={user} />
         </Dropdown.Toggle>
 

package/src/auth/Layout/UserNavDropDown.tsx

@@ -15,7 +15,7 @@ function UserNavDropDown() {
 
   return (
     <>
-      <Dropdown.Item eventKey='1' onClick={onLogoutHandler}>
+      <Dropdown.Item eventKey="1" onClick={onLogoutHandler}>
         {t('logout')}
       </Dropdown.Item>
     </>

package/src/auth/Layout/UserNavDropDownToggle.tsx

@@ -12,14 +12,14 @@ function UserNavDropDownToggle(props: UserNavDropDownToggleProps) {
 
   return (
     <>
-      <span className='header-user-name mr-2 d-none d-lg-inline text-gray-600 small'>
-        <Trans t={t} i18nKey='userPromo'>
+      <span className="header-user-name mr-2 d-none d-lg-inline text-gray-600 small">
+        <Trans t={t} i18nKey="userPromo">
           Hi, {{ name: user?.first_name }}
         </Trans>
       </span>
 
       <DefaultUserImage
-        className='header-user-image img-profile rounded-circle tw-ring-white'
+        className="header-user-image img-profile rounded-circle"
         alt={user?.last_name}
         roundedCircle
       />

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     })
   }
 
@@ -100,19 +100,19 @@ const LoginComponent = ({
 
   return (
     <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+      <Row className="justify-content-center">
+        <Col xs sm={12} md={7} lg={6} xl={5} className="align-self-center">
           <>
-            <h1 className='text-center'>{t('User:loginTitle')}</h1>
+            <h1 className="text-center">{t('User:loginTitle')}</h1>
 
-            <div className='login d-flex pb-4 justify-content-center'>
+            <div className="login d-flex pb-4 justify-content-center">
               <Logo logo={<BookeditLogoSvg />} />
             </div>
 
             {!hideSignUpLink && (
-              <h6 className='text-center'>
-                <Trans t={t} i18nKey='loginPromo'>
-                  Don&apos;t have account? <Link to='/register'>Sign up</Link>.
+              <h6 className="text-center">
+                <Trans t={t} i18nKey="loginPromo">
+                  Don&apos;t have account? <Link to="/register">Sign up</Link>.
                 </Trans>
               </h6>
             )}
@@ -125,7 +125,7 @@ const LoginComponent = ({
                     setIsLoading={setIsLoading}
                   />
 
-                  <hr className='mb-2' />
+                  <hr className="mb-2" />
                 </>
               )}
 

package/src/auth/Login/LoginFormComponent.tsx

@@ -72,10 +72,10 @@ function LoginFormComponent(props: LoginFormComponentProps) {
   return (
     <>
       <Form onSubmit={handleSubmit(onFormSubmit)} noValidate>
-        <Form.Group controlId='formGroupEmail'>
+        <Form.Group controlId="formGroupEmail">
           <Form.Control
-            type='email'
-            name='email'
+            type="email"
+            name="email"
             placeholder={t('User:email')}
             onChange={handleChange}
             isValid={isFieldValid('email')}
@@ -87,7 +87,7 @@ function LoginFormComponent(props: LoginFormComponentProps) {
             disabled={isLoading || Boolean(defaultValues().email)}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -99,10 +99,10 @@ function LoginFormComponent(props: LoginFormComponentProps) {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId='formGroupPassword'>
+        <Form.Group controlId="formGroupPassword">
           <Form.Control
-            type='password'
-            name='password'
+            type="password"
+            name="password"
             placeholder={t('User:password')}
             onChange={handleChange}
             isValid={!errors.password && formState.isValid}
@@ -114,7 +114,7 @@ function LoginFormComponent(props: LoginFormComponentProps) {
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.password, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:password'),
@@ -129,26 +129,26 @@ function LoginFormComponent(props: LoginFormComponentProps) {
 
         <Form.Control
           hidden
-          name='invitation_hash'
+          name="invitation_hash"
           {...register('invitation_hash')}
           disabled
         />
 
         <Button
-          variant='primary'
-          type='submit'
-          className='rounded-pill text-uppercase'
+          variant="primary"
+          type="submit"
+          className="rounded-pill text-uppercase"
           block
           disabled={isLoading}
         >
           {t('User:login')}
         </Button>
 
-        <p className='text-center mb-0 mt-3'>
-          <Trans t={t} i18nKey='User:resetPromo'>
+        <p className="text-center mb-0 mt-3">
+          <Trans t={t} i18nKey="User:resetPromo">
             Forgot your password?{' '}
             <Link
-              to='/forgot-password'
+              to="/forgot-password"
               className={[isLoading && 'disabled'].join(' ')}
             >
               Reset