Reafactor/UI input and displays (#1544)

* WIP

* Text field

* URL

* Finished PhoneInput

* Refactored input sub-folders

* Boolean

* Fix lint

* Fix lint

* Fix useOutsideClick

---------

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

front/src/modules/ui/input/components/BooleanInput.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck, IconX } from '@/ui/icon';
+
+const StyledEditableBooleanFieldContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+`;
+
+const StyledEditableBooleanFieldValue = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+type OwnProps = {
+  value: boolean;
+  onToggle?: (newValue: boolean) => void;
+};
+
+export function BooleanInput({ value, onToggle }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  function handleClick() {
+    setInternalValue(!internalValue);
+    onToggle?.(!internalValue);
+  }
+
+  const theme = useTheme();
+
+  return (
+    <StyledEditableBooleanFieldContainer onClick={handleClick}>
+      {internalValue ? (
+        <IconCheck size={theme.icon.size.sm} />
+      ) : (
+        <IconX size={theme.icon.size.sm} />
+      )}
+      <StyledEditableBooleanFieldValue>
+        {internalValue ? 'True' : 'False'}
+      </StyledEditableBooleanFieldValue>
+    </StyledEditableBooleanFieldContainer>
+  );
+}

front/src/modules/ui/input/components/DoubleTextInputEdit.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
-import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
+import { StyledInput } from '@/ui/input/components/TextInput';
 import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
 
 export type DoubleTextInputEditProps = {

front/src/modules/ui/input/components/PhoneInput.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactPhoneNumberInput from 'react-phone-number-input';
+import styled from '@emotion/styled';
+
+import { useRegisterInputEvents } from '../hooks/useRegisterInputEvents';
+
+import 'react-phone-number-input/style.css';
+
+const StyledContainer = styled.div`
+  align-items: center;
+
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
+  --PhoneInput-color--focus: transparent;
+  --PhoneInputCountryFlag-borderColor--focus: transparent;
+  --PhoneInputCountrySelect-marginRight: ${({ theme }) => theme.spacing(2)};
+  --PhoneInputCountrySelectArrow-color: ${({ theme }) =>
+    theme.font.color.tertiary};
+  --PhoneInputCountrySelectArrow-opacity: 1;
+  font-family: ${({ theme }) => theme.font.family};
+  height: 32px;
+
+  .PhoneInputCountry {
+    --PhoneInputCountryFlag-height: 12px;
+    --PhoneInputCountryFlag-width: 16px;
+    border-right: 1px solid ${({ theme }) => theme.border.color.light};
+    display: flex;
+    justify-content: center;
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+
+  .PhoneInputCountryIcon {
+    background: none;
+    border-radius: ${({ theme }) => theme.border.radius.xs};
+    box-shadow: none;
+    margin-right: 1px;
+    overflow: hidden;
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .PhoneInputCountrySelectArrow {
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  .PhoneInputInput {
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    border: none;
+    color: ${({ theme }) => theme.font.color.primary};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${({ theme }) => theme.font.color.light};
+      font-family: ${({ theme }) => theme.font.family};
+      font-weight: ${({ theme }) => theme.font.weight.medium};
+    }
+
+    :focus {
+      outline: none;
+    }
+  }
+`;
+
+export type PhoneCellEditProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onEnter: (newText: string) => void;
+  onEscape: (newText: string) => void;
+  onTab?: (newText: string) => void;
+  onShiftTab?: (newText: string) => void;
+  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  hotkeyScope: string;
+};
+
+export function PhoneInput({
+  autoFocus,
+  value,
+  onEnter,
+  onEscape,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+  hotkeyScope,
+}: PhoneCellEditProps) {
+  const [internalValue, setInternalValue] = useState<string | undefined>(value);
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalValue ?? '',
+    onEnter,
+    onEscape,
+    onClickOutside,
+    onTab,
+    onShiftTab,
+    hotkeyScope,
+  });
+
+  return (
+    <StyledContainer ref={wrapperRef}>
+      <StyledCustomPhoneInput
+        autoFocus={autoFocus}
+        placeholder="Phone number"
+        value={value}
+        onChange={setInternalValue}
+      />
+    </StyledContainer>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/theme/constants/effects';
+
+import { useRegisterInputEvents } from '../hooks/useRegisterInputEvents';
+
+export const StyledInput = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;
+
+type OwnProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onEnter: (newText: string) => void;
+  onEscape: (newText: string) => void;
+  onTab?: (newText: string) => void;
+  onShiftTab?: (newText: string) => void;
+  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  hotkeyScope: string;
+};
+
+export function TextInput({
+  placeholder,
+  autoFocus,
+  value,
+  hotkeyScope,
+  onEnter,
+  onEscape,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+}: OwnProps) {
+  const [internalText, setInternalText] = useState(value);
+
+  const wrapperRef = useRef(null);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setInternalText(event.target.value);
+  }
+
+  useEffect(() => {
+    setInternalText(value);
+  }, [value]);
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalText,
+    onEnter,
+    onEscape,
+    onClickOutside,
+    onTab,
+    onShiftTab,
+    hotkeyScope,
+  });
+
+  return (
+    <StyledInput
+      autoComplete="off"
+      ref={wrapperRef}
+      placeholder={placeholder}
+      onChange={handleChange}
+      autoFocus={autoFocus}
+      value={internalText}
+    />
+  );
+}

front/src/modules/ui/input/hooks/useRegisterInputEvents.ts

@@ -0,0 +1,67 @@
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { isDefined } from '~/utils/isDefined';
+
+export function useRegisterInputEvents<T>({
+  inputRef,
+  inputValue,
+  onEscape,
+  onEnter,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+  hotkeyScope,
+}: {
+  inputRef: React.RefObject<any>;
+  inputValue: T;
+  onEscape: (inputValue: T) => void;
+  onEnter: (inputValue: T) => void;
+  onTab?: (inputValue: T) => void;
+  onShiftTab?: (inputValue: T) => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
+  hotkeyScope: string;
+}) {
+  useListenClickOutside({
+    refs: [inputRef],
+    callback: (event) => {
+      onClickOutside?.(event, inputValue);
+    },
+    enabled: isDefined(onClickOutside),
+  });
+
+  useScopedHotkeys(
+    'enter',
+    () => {
+      onEnter?.(inputValue);
+    },
+    hotkeyScope,
+    [onEnter, inputValue],
+  );
+
+  useScopedHotkeys(
+    'esc',
+    () => {
+      onEscape?.(inputValue);
+    },
+    hotkeyScope,
+    [onEscape, inputValue],
+  );
+
+  useScopedHotkeys(
+    'tab',
+    () => {
+      onTab?.(inputValue);
+    },
+    hotkeyScope,
+    [onTab, inputValue],
+  );
+
+  useScopedHotkeys(
+    'shift+tab',
+    () => {
+      onShiftTab?.(inputValue);
+    },
+    hotkeyScope,
+    [onShiftTab, inputValue],
+  );
+}

front/src/modules/ui/input/phone/components/PhoneInputDisplay.tsx

@@ -1,23 +0,0 @@
-import { MouseEvent } from 'react';
-import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
-
-import { ContactLink } from '@/ui/link/components/ContactLink';
-
-type OwnProps = {
-  value: string | null;
-};
-
-export function PhoneInputDisplay({ value }: OwnProps) {
-  return value && isValidPhoneNumber(value) ? (
-    <ContactLink
-      href={parsePhoneNumber(value, 'FR')?.getURI()}
-      onClick={(event: MouseEvent<HTMLElement>) => {
-        event.stopPropagation();
-      }}
-    >
-      {parsePhoneNumber(value, 'FR')?.formatInternational() || value}
-    </ContactLink>
-  ) : (
-    <ContactLink href="#">{value}</ContactLink>
-  );
-}

front/src/modules/ui/input/phone/components/__stories__/PhoneInputDisplay.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-
-import { PhoneInputDisplay } from '../PhoneInputDisplay'; // Adjust the import path as needed
-
-const meta: Meta = {
-  title: 'UI/Input/PhoneInputDisplay',
-  component: PhoneInputDisplay,
-  decorators: [ComponentWithRouterDecorator],
-  args: {
-    value: '+33788901234',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PhoneInputDisplay>;
-
-export const Default: Story = {};

front/src/modules/ui/input/text/components/TextInputDisplay.tsx

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledTextInputDisplay = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-`;
-
-export type TextInputDisplayProps = {
-  children: React.ReactNode;
-};
-
-export function TextInputDisplay({ children }: TextInputDisplayProps) {
-  return <StyledTextInputDisplay>{children}</StyledTextInputDisplay>;
-}

front/src/modules/ui/input/text/components/TextInputSettings.tsx

@@ -197,4 +197,4 @@ function TextInputComponent(
   );
 }
 
-export const TextInput = forwardRef(TextInputComponent);
+export const TextInputSettings = forwardRef(TextInputComponent);

front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx

@@ -6,28 +6,28 @@ import { userEvent, within } from '@storybook/testing-library';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { TextInput } from '../TextInput';
+import { TextInputSettings } from '../TextInputSettings';
 
 const changeJestFn = jest.fn();
 
-const meta: Meta<typeof TextInput> = {
+const meta: Meta<typeof TextInputSettings> = {
   title: 'UI/Input/TextInput',
-  component: TextInput,
+  component: TextInputSettings,
   decorators: [ComponentDecorator],
   args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
 };
 
 export default meta;
-type Story = StoryObj<typeof TextInput>;
+type Story = StoryObj<typeof TextInputSettings>;
 
 function FakeTextInput({
   onChange,
   value: initialValue,
   ...props
-}: React.ComponentProps<typeof TextInput>) {
+}: React.ComponentProps<typeof TextInputSettings>) {
   const [value, setValue] = useState(initialValue);
   return (
-    <TextInput
+    <TextInputSettings
       {...props}
       value={value}
       onChange={(text) => {

front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx

@@ -1,60 +0,0 @@
-import { MouseEvent } from 'react';
-import styled from '@emotion/styled';
-
-import { RoundedLink } from '@/ui/link/components/RoundedLink';
-import { LinkType, SocialLink } from '@/ui/link/components/SocialLink';
-
-const StyledRawLink = styled(RoundedLink)`
-  overflow: hidden;
-
-  a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
-type OwnProps = {
-  value: string;
-};
-
-const checkUrlType = (url: string) => {
-  if (
-    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
-      url,
-    )
-  ) {
-    return LinkType.LinkedIn;
-  }
-  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
-    return LinkType.Twitter;
-  }
-
-  return LinkType.Url;
-};
-
-export function InplaceInputURLDisplayMode({ value }: OwnProps) {
-  function handleClick(event: MouseEvent<HTMLElement>) {
-    event.stopPropagation();
-  }
-  const absoluteUrl = value
-    ? value.startsWith('http')
-      ? value
-      : 'https://' + value
-    : '';
-
-  const type = checkUrlType(absoluteUrl);
-
-  if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
-    return (
-      <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
-        {value}
-      </SocialLink>
-    );
-  }
-  return (
-    <StyledRawLink href={absoluteUrl} onClick={handleClick}>
-      {value}
-    </StyledRawLink>
-  );
-}