Migrate to twenty-ui - navigation/link

[gitstart-app]

This PR was created by GitStart to address the requirements from this ticket: TWNTY-7535.

---

Description.

Migrate link components to twenty-ui

Fixes #7535

[greptile-apps]

PR Summary

This pull request migrates various link components to the 'twenty-ui' library across multiple files in the twentyhq/twenty repository. Here's a concise summary of the key changes:

• Updated import statements to use 'twenty-ui' for components like UndecoratedLink, ActionLink, RoundedLink, and Toggle
• Removed local imports for these components and replaced them with 'twenty-ui' imports
• Maintained existing functionality while standardizing UI components
• Minor adjustments to component usage and prop names in some cases
• Removed unnecessary React imports in some files

Key points to consider:

• Ensure consistent usage of 'twenty-ui' components across the codebase
• Review any TODO comments left in the code, particularly in PhoneDisplay.tsx
• Verify that all migrated components maintain their original functionality
• Consider updating documentation to reflect the new 'twenty-ui' usage

_{30 file(s) reviewed, 15 comment(s)
Edit PR Review Bot Settings | Greptile}

[charlesBochet]

@gitstart-twenty could you rebase this one?

[charlesBochet]

@gitstart-twenty I have rebased your PR, could you fix the stories

[charlesBochet]

@Devessier could you take a look at this branch (we actually have the problem on main but let's solve it here to avoid fixing conflicts)

• we have refactored the Toggle to wrap it in a internally
• on CalendarSettings page we want the label to actually be the whole row to trigger the switch

The issue is that the click event is bubbled twice

I guess the recommended way would be to remove the additional onClick on the row and to rely on labels. Curious to see how you would solve this

[Devessier]

@Devessier could you take a look at this branch (we actually have the problem on main but let's solve it here to avoid fixing conflicts)

• we have refactored the Toggle to wrap it in a internally
• on CalendarSettings page we want the label to actually be the whole row to trigger the switch

The issue is that the click event is bubbled twice

I guess the recommended way would be to remove the additional onClick on the row and to rely on labels. Curious to see how you would solve this

Below, I list the things I asked myself or thought while reading the code:

• When developers find themselves writing <div onClick={} />, they should think about it twice. I'm not an accessibility expert, and sometimes it's easier to have two versions coexist, one accessible and the other not. That's to say that clickable divs should be prohibited most of the time, but they are exceptions, and I'm open to discussing them.
• We don't wait for the Toggle's onChange event here. The input element should be the single source of truth.

  twenty/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

  Lines 81 to 84 in 933210a

  	<StyledToggle
  	value={calendarChannel.isContactAutoCreationEnabled}
  	/>
  	</SettingsOptionCardContent>

• A simple approach is only to toggle the input when the text describing the input best is clicked. Example: GitHub
  
• We could render a <label> element for the <Section />. That way, the whole element would toggle the input easily. The issue is that <label> elements can only contain phrasing content, that is, no <div>.
• Another solution would be to create a <label> element that we style to take the all height and width. That's a trick I often use for links: https://stackoverflow.com/a/74063425. In Tailwind-like code:

<div class="relative">
  <label for="autocreation">
    Auto-creation

    <span class="absolute inset-0"><span>
  </label>

  <!-- ... -->

  <Toggle id="autocreation" />
</div>

I would go with the latest solution, as shown here: 346433a. It works as expected:

CleanShot.2024-10-22.at.16.17.58.mp4

What is essential is that the label has a meaningful name. Using "Auto-creation" would be good. There are more evolved solutions, but I would only be willing to use them if I rely on an a11y library. These solutions are helpful when you want to build truly custom inputs.