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/content-display/components/PhoneDisplay.tsx

@@ -0,0 +1,23 @@
+import { MouseEvent } from 'react';
+import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
+
+import { ContactLink } from '@/ui/link/components/ContactLink';
+
+type OwnProps = {
+  value: string | null;
+};
+
+export function PhoneDisplay({ 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/content-display/components/TextDisplay.tsx

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

front/src/modules/ui/content-display/components/URLDisplay.tsx

@@ -0,0 +1,60 @@
+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 URLDisplay({ 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>
+  );
+}

front/src/modules/ui/content-display/components/__stories__/PhoneInputDisplay.stories.tsx

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