@licklist/design 0.69.1-dev.4 → 0.69.1

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

package/src/auth/Logout/Logout.stories.tsx

@@ -16,8 +16,8 @@ export const LogoutComponent: Story = () => (
     <UserProvider>
       <MemoryRouter initialIndex={0} initialEntries={['/', '/logout']}>
         <Switch>
-          <Route path='/' exact component={LoggedPage} />
-          <Route path='/logout' component={LogoutWrapper} />
+          <Route path="/" exact component={LoggedPage} />
+          <Route path="/logout" component={LogoutWrapper} />
         </Switch>
       </MemoryRouter>
     </UserProvider>

package/src/auth/Register/BirthDateFormComponent.tsx

@@ -120,11 +120,11 @@ function BirthDateFormComponent({
 
   return (
     <Row>
-      <Col xs={12} sm={3} className='pr-sm-1'>
-        <Form.Group controlId='formGroupDay'>
+      <Col xs={12} sm={3} className="pr-sm-1">
+        <Form.Group controlId="formGroupDay">
           <Form.Control
-            type='number'
-            name='day'
+            type="number"
+            name="day"
             placeholder={t('User:day')}
             {...register('day', {
               max: 31,
@@ -138,11 +138,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={4} className='px-sm-1'>
-        <Form.Group controlId='formGroupMonth'>
+      <Col xs={12} sm={4} className="px-sm-1">
+        <Form.Group controlId="formGroupMonth">
           <Form.Control
-            as='select'
-            name='month'
+            as="select"
+            name="month"
             custom
             {...register('month', {
               pattern: monthRule,
@@ -151,7 +151,7 @@ function BirthDateFormComponent({
             isInvalid={!!errors.month && getValues('month')}
             disabled={disabled}
           >
-            <option value=''>{t('User:month')}</option>
+            <option value="">{t('User:month')}</option>
             {Object.keys(MONTHS).map((key) => (
               <option key={key} value={key}>
                 {t(`Design:${MONTHS[key]}`)}
@@ -159,7 +159,7 @@ function BirthDateFormComponent({
             ))}
           </Form.Control>
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.month, 'pattern') &&
               t('Validation:fieldValidMonth', {
                 attribute: t('User:month'),
@@ -168,11 +168,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={5} className='pl-sm-1'>
-        <Form.Group controlId='formGroupYear'>
+      <Col xs={12} sm={5} className="pl-sm-1">
+        <Form.Group controlId="formGroupYear">
           <Form.Control
-            type='number'
-            name='year'
+            type="number"
+            name="year"
             placeholder={t('User:year')}
             {...register('year')}
             isValid={isValidYear && getValues('year')}
@@ -180,14 +180,14 @@ function BirthDateFormComponent({
             disabled={disabled}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {!isAdult && t('Validation:fieldValidYear')}
           </Form.Control.Feedback>
         </Form.Group>
 
         <Form.Control
-          type='hidden'
-          name='birthday'
+          type="hidden"
+          name="birthday"
           {...register('birthday', {
             validate: () => isAdult && isValidDate,
           })}

package/src/auth/Register/RegisterComponent.tsx

@@ -97,15 +97,15 @@ function RegisterComponent({
 
   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('registerTitle')}</h1>
+            <h1 className="text-center">{t('registerTitle')}</h1>
 
-            <h6 className='text-center'>
-              <Trans t={t} i18nKey='registerPromo'>
+            <h6 className="text-center">
+              <Trans t={t} i18nKey="registerPromo">
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
-                . Already signed up? Then just <Link to='/login'>Log in</Link>.
+                . Already signed up? Then just <Link to="/login">Log in</Link>.
               </Trans>
             </h6>
 
@@ -117,7 +117,7 @@ function RegisterComponent({
                     setIsLoading={setIsLoading}
                   />
 
-                  <hr className='mb-2' />
+                  <hr className="mb-2" />
                 </>
               )}