Migrate to twenty-ui - navigation/link (#7837)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7535](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7535).

 --- 

### Description.  

Migrate link components to `twenty-ui` \
\
Fixes #7535

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx

@@ -0,0 +1,82 @@
+import { Decorator } from '@storybook/react';
+import {
+  createMemoryRouter,
+  createRoutesFromElements,
+  Outlet,
+  Route,
+  RouterProvider,
+} from 'react-router-dom';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+interface StrictArgs {
+  [name: string]: unknown;
+}
+export type RouteParams = {
+  [param: string]: string;
+};
+
+export const isRouteParams = (obj: any): obj is RouteParams => {
+  if (typeof obj !== 'object' || obj === null) {
+    return false;
+  }
+
+  return Object.keys(obj).every((key) => typeof obj[key] === 'string');
+};
+
+export const computeLocation = (
+  routePath: string,
+  routeParams?: RouteParams,
+) => {
+  return {
+    pathname: routePath.replace(
+      /:(\w+)/g,
+      (paramName) => routeParams?.[paramName] ?? '',
+    ),
+  };
+};
+
+const Providers = () => (
+  <ComponentStorybookLayout>
+    <Outlet />
+  </ComponentStorybookLayout>
+);
+
+const createRouter = ({
+  Story,
+  args,
+  initialEntries,
+  initialIndex,
+}: {
+  Story: () => JSX.Element;
+  args: StrictArgs;
+  initialEntries?: {
+    pathname: string;
+  }[];
+  initialIndex?: number;
+}) =>
+  createMemoryRouter(
+    createRoutesFromElements(
+      <Route element={<Providers />}>
+        <Route path={(args.routePath as string) ?? '*'} element={<Story />} />
+      </Route>,
+    ),
+    { initialEntries, initialIndex },
+  );
+
+export const ComponentWithRouterDecorator: Decorator = (Story, { args }) => {
+  return (
+    <RouterProvider
+      router={createRouter({
+        Story,
+        args,
+        initialEntries:
+          args.routePath &&
+          typeof args.routePath === 'string' &&
+          (args.routeParams === undefined || isRouteParams(args.routeParams))
+            ? [computeLocation(args.routePath, args.routeParams)]
+            : [{ pathname: '/' }],
+      })}
+    />
+  );
+};

packages/twenty-ui/src/testing/index.ts

@@ -1,6 +1,7 @@
 export * from './ComponentStorybookLayout';
 export * from './decorators/CatalogDecorator';
 export * from './decorators/ComponentDecorator';
+export * from './decorators/ComponentWithRouterDecorator';
 export * from './decorators/RouterDecorator';
 export * from './mocks/avatarUrlMock';
 export * from './types/CatalogStory';