Add validation on onboarding flow inputs (#556)

* feat: wip react-hook-form

* feat: use react-hook-form for password login

* feat: clean regex

* feat: add react-hook-form on create workspace

* feat: add react-hook-form on create profile page

* fix: clean rebased code

* fix: rebase issue

* fix: add new stories to go over 65%

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/components/accessories/__stories__/SoonPill.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { SoonPill } from '../SoonPill';
+
+const meta: Meta<typeof SoonPill> = {
+  title: 'UI/Accessories/SoonPill',
+  component: SoonPill,
+};
+
+export default meta;
+type Story = StoryObj<typeof SoonPill>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(<SoonPill />),
+};

front/src/modules/ui/components/action-bar/__stories__/ActionBar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { ActionBar } from '../ActionBar';
+
+const meta: Meta<typeof ActionBar> = {
+  title: 'UI/ActionBar/ActionBar',
+  component: ActionBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <ActionBar children={<div />} selectedIds={[]} />,
+  ),
+};

front/src/modules/ui/components/inputs/TextInput.tsx

@@ -1,6 +1,13 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  useRef,
+  useState,
+} from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconAlertCircle } from '@tabler/icons-react';
 import { Key } from 'ts-key-enum';
 
 import { usePreviousHotkeysScope } from '@/hotkeys/hooks/internal/usePreviousHotkeysScope';
@@ -8,18 +15,17 @@ import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { IconEye, IconEyeOff } from '@/ui/icons/index';
 
-type OwnProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'onChange'
-> & {
+type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
+  error?: string;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
   display: flex;
   flex-direction: column;
+  width: ${({ fullWidth, theme }) => (fullWidth ? `100%` : 'auto')};
 `;
 
 const StyledLabel = styled.span`
@@ -30,19 +36,28 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
-const StyledInput = styled.input<{ fullWidth: boolean }>`
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+`;
+
+const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
   background-color: ${({ theme }) => theme.background.tertiary};
   border: none;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-grow: 1;
   font-family: ${({ theme }) => theme.font.family};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
 
+  font-weight: ${({ theme }) => theme.font.weight.regular};
   outline: none;
   padding: ${({ theme }) => theme.spacing(2)};
-  width: ${({ fullWidth, theme }) =>
-    fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
+
+  width: 100%;
 
   &::placeholder,
   &::-webkit-input-placeholder {
@@ -52,28 +67,46 @@ const StyledInput = styled.input<{ fullWidth: boolean }>`
   }
 `;
 
-const StyledIconContainer = styled.div`
-  align-items: center;
-  display: flex;
-  position: relative;
+const StyledErrorHelper = styled.div`
+  color: ${({ theme }) => theme.color.red};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledIcon = styled.div`
+const StyledTrailingIconContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTrailingIcon = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
-  position: absolute;
-  right: ${({ theme }) => theme.spacing(2)};
+  display: flex;
+  justify-content: center;
 `;
 
+const INPUT_TYPE_PASSWORD = 'password';
+
 export function TextInput({
   label,
   value,
   onChange,
+  onFocus,
+  onBlur,
   fullWidth,
+  error,
+  required,
   type,
   ...props
 }: OwnProps): JSX.Element {
+  const theme = useTheme();
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const {
@@ -81,13 +114,15 @@ export function TextInput({
     setHotkeysScopeAndMemorizePreviousScope,
   } = usePreviousHotkeysScope();
 
-  function handleFocus() {
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    onFocus?.(e);
     setHotkeysScopeAndMemorizePreviousScope(InternalHotkeysScope.TextInput);
-  }
+  };
 
-  function handleBlur() {
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
     goBackToPreviousHotkeysScope();
-  }
+  };
 
   useScopedHotkeys(
     [Key.Enter, Key.Escape],
@@ -103,19 +138,17 @@ export function TextInput({
     setPasswordVisible(!passwordVisible);
   };
 
-  const theme = useTheme();
-
   return (
-    <StyledContainer>
-      {label && <StyledLabel>{label}</StyledLabel>}
-      <StyledIconContainer>
+    <StyledContainer fullWidth={fullWidth ?? false}>
+      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
+      <StyledInputContainer>
         <StyledInput
           ref={inputRef}
           tabIndex={props.tabIndex ?? 0}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          fullWidth={fullWidth ?? false}
           value={value}
+          required={required}
           type={passwordVisible ? 'text' : type}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             if (onChange) {
@@ -124,19 +157,27 @@ export function TextInput({
           }}
           {...props}
         />
-        {type === 'password' && ( // only show the icon for password inputs
-          <StyledIcon
-            onClick={handleTogglePasswordVisibility}
-            data-testid="reveal-password-button"
-          >
-            {passwordVisible ? (
-              <IconEyeOff size={theme.icon.size.md} />
-            ) : (
-              <IconEye size={theme.icon.size.md} />
-            )}
-          </StyledIcon>
-        )}
-      </StyledIconContainer>
+        <StyledTrailingIconContainer>
+          {error && (
+            <StyledTrailingIcon>
+              <IconAlertCircle size={16} color={theme.color.red} />
+            </StyledTrailingIcon>
+          )}
+          {!error && type === INPUT_TYPE_PASSWORD && (
+            <StyledTrailingIcon
+              onClick={handleTogglePasswordVisibility}
+              data-testid="reveal-password-button"
+            >
+              {passwordVisible ? (
+                <IconEyeOff size={theme.icon.size.md} />
+              ) : (
+                <IconEye size={theme.icon.size.md} />
+              )}
+            </StyledTrailingIcon>
+          )}
+        </StyledTrailingIconContainer>
+      </StyledInputContainer>
+      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
     </StyledContainer>
   );
 }

front/src/modules/ui/icons/index.ts

@@ -35,5 +35,6 @@ export { IconNotes } from '@tabler/icons-react';
 export { IconCirclePlus } from '@tabler/icons-react';
 export { IconCheckbox } from '@tabler/icons-react';
 export { IconTimelineEvent } from '@tabler/icons-react';
+export { IconAlertCircle } from '@tabler/icons-react';
 export { IconEye } from '@tabler/icons-react';
 export { IconEyeOff } from '@tabler/icons-react';