feat: add lunalink and enjoy route inference (#561)

Author: yoannfleurydev

package.json

@@ -42,6 +42,7 @@
     "*.{ts,tsx,js,jsx,json}": "prettier --write"
   },
   "dependencies": {
+    "@bearstudio/lunalink": "0.1.2",
     "@chakra-ui/anatomy": "2.2.2",
     "@chakra-ui/next-js": "2.2.0",
     "@chakra-ui/react": "2.8.2",

pnpm-lock.yaml

@@ -3,11 +3,11 @@ import { ROUTES_APP } from '@/features/app/routes';
 
 export const ROUTES_ACCOUNT = {
   app: {
-    root: () => `${ROUTES_APP.baseUrl()}/account`,
+    root: () => `${ROUTES_APP.baseUrl()}/account` as const,
   },
   admin: {
-    root: () => `${ROUTES_ADMIN.baseUrl()}/account`,
-    profile: () => `${ROUTES_ACCOUNT.admin.root()}/profile`,
-    email: () => `${ROUTES_ACCOUNT.admin.root()}/email`,
+    root: () => `${ROUTES_ADMIN.baseUrl()}/account` as const,
+    profile: () => `${ROUTES_ACCOUNT.admin.root()}/profile` as const,
+    email: () => `${ROUTES_ACCOUNT.admin.root()}/email` as const,
   },
 } as const;

src/features/account/routes.ts

@@ -1,7 +1,9 @@
 export const ROUTES_ADMIN = {
-  root: () => '/admin',
+  root: () => '/admin' as const,
   // This check seems useless at first but is not. It it a guard to avoid double
   // slash in the URL if it is changed one day or another. So don't remove it
   // and keep it this way.
-  baseUrl: () => (ROUTES_ADMIN.root() === '/' ? '' : ROUTES_ADMIN.root()),
+  baseUrl: () =>
+    // @ts-expect-error see comment above
+    ROUTES_ADMIN.root() === ('/' as const) ? '' : ROUTES_ADMIN.root(),
 } as const;

src/features/admin/routes.ts

@@ -1,7 +1,9 @@
 export const ROUTES_APP = {
-  root: () => '/app',
+  root: () => '/app' as const,
   // This check seems useless at first but is not. It it a guard to avoid double
   // slash in the URL if it is changed one day or another. So don't remove it
   // and keep it this way.
-  baseUrl: () => (ROUTES_APP.root() === '/' ? '' : ROUTES_APP.root()),
+  baseUrl: () =>
+    // @ts-expect-error see comment above
+    ROUTES_APP.root() === '/' ? ('' as const) : ROUTES_APP.root(),
 } as const;

src/features/app/routes.ts

@@ -2,6 +2,6 @@ import { ROUTES_ADMIN } from '@/features/admin/routes';
 
 export const ROUTES_MANAGEMENT = {
   admin: {
-    root: () => `${ROUTES_ADMIN.baseUrl()}/management`,
+    root: () => `${ROUTES_ADMIN.baseUrl()}/management` as const,
   },
 } as const;

src/features/management/routes.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { lunalink } from '@bearstudio/lunalink';
 import {
   Menu,
   MenuButton,
@@ -54,14 +55,18 @@ export const AdminRepositoryActions = ({
         <MenuList>
           <MenuItem
             as={Link}
-            href={ROUTES_REPOSITORIES.admin.repository({ id: repository.id })}
+            href={lunalink(ROUTES_REPOSITORIES.admin.repository(), {
+              id: repository.id,
+            })}
             icon={<Icon icon={LuEye} fontSize="lg" color="gray.400" />}
           >
             {t('repositories:list.actions.view')}
           </MenuItem>
           <MenuItem
             as={Link}
-            href={ROUTES_REPOSITORIES.admin.update({ id: repository.id })}
+            href={lunalink(ROUTES_REPOSITORIES.admin.update(), {
+              id: repository.id,
+            })}
             icon={<Icon icon={LuPenLine} fontSize="lg" color="gray.400" />}
           >
             {t('common:actions.edit')}

src/features/repositories/AdminRepositoryActions.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { lunalink } from '@bearstudio/lunalink';
 import {
   Button,
   Flex,
@@ -105,7 +106,7 @@ export default function PageAdminRepositories() {
                     <DataListText fontWeight="bold">
                       <LinkOverlay
                         as={Link}
-                        href={ROUTES_REPOSITORIES.admin.repository({
+                        href={lunalink(ROUTES_REPOSITORIES.admin.repository(), {
                           id: repository.id,
                         })}
                       >

src/features/repositories/PageAdminRepositories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { lunalink } from '@bearstudio/lunalink';
 import {
   Box,
   Card,
@@ -65,8 +66,8 @@ export default function PageAdminRepository() {
           <>
             <ResponsiveIconButton
               as={Link}
-              href={ROUTES_REPOSITORIES.admin.update({
-                id: params?.id?.toString() ?? 'unknown',
+              href={lunalink(ROUTES_REPOSITORIES.admin.update(), {
+                id: params.id?.toString() ?? 'unknown',
               })}
               isDisabled={!params?.id}
               icon={<LuPenLine />}

src/features/repositories/PageAdminRepository.tsx

@@ -3,14 +3,12 @@ import { ROUTES_APP } from '@/features/app/routes';
 
 export const ROUTES_REPOSITORIES = {
   app: {
-    root: () => `${ROUTES_APP.baseUrl()}/repositories`,
+    root: () => `${ROUTES_APP.baseUrl()}/repositories` as const,
   },
   admin: {
-    root: () => `${ROUTES_ADMIN.baseUrl()}/repositories`,
-    create: () => `${ROUTES_REPOSITORIES.admin.root()}/create`,
-    repository: (params: { id: string }) =>
-      `${ROUTES_REPOSITORIES.admin.root()}/${params.id}`,
-    update: (params: { id: string }) =>
-      `${ROUTES_REPOSITORIES.admin.root()}/${params.id}/update`,
+    root: () => `${ROUTES_ADMIN.baseUrl()}/repositories` as const,
+    create: () => `${ROUTES_REPOSITORIES.admin.root()}/create` as const,
+    repository: () => `${ROUTES_REPOSITORIES.admin.root()}/:id` as const,
+    update: () => `${ROUTES_REPOSITORIES.admin.root()}/:id/update` as const,
   },
 } as const;

src/features/repositories/routes.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { lunalink } from '@bearstudio/lunalink';
 import {
   Menu,
   MenuButton,
@@ -100,7 +101,7 @@ export const AdminUserActions = ({ user, ...rest }: AdminUserActionProps) => {
         <MenuList>
           <MenuItem
             as={Link}
-            href={ROUTES_USERS.admin.user({ id: user.id })}
+            href={lunalink(ROUTES_USERS.admin.user(), { id: user.id })}
             icon={<Icon icon={LuPenLine} fontSize="lg" color="gray.400" />}
           >
             {t('common:actions.edit')}

src/features/users/AdminUserActions.tsx

@@ -1,5 +1,6 @@
 import React, { ElementRef, useRef } from 'react';
 
+import { lunalink } from '@bearstudio/lunalink';
 import {
   Avatar,
   Button,
@@ -127,7 +128,9 @@ export default function PageAdminUsers() {
                       )}
                       <LinkOverlay
                         as={Link}
-                        href={ROUTES_USERS.admin.user({ id: user.id })}
+                        href={lunalink(ROUTES_USERS.admin.user(), {
+                          id: user.id,
+                        })}
                       >
                         {user.name ?? user.email}
                       </LinkOverlay>

src/features/users/PageAdminUsers.tsx

@@ -2,9 +2,8 @@ import { ROUTES_MANAGEMENT } from '@/features/management/routes';
 
 export const ROUTES_USERS = {
   admin: {
-    root: () => `${ROUTES_MANAGEMENT.admin.root()}/users`,
-    create: () => `${ROUTES_USERS.admin.root()}/create`,
-    user: (params: { id: string }) =>
-      `${ROUTES_USERS.admin.root()}/${params.id}`,
+    root: () => `${ROUTES_MANAGEMENT.admin.root()}/users` as const,
+    create: () => `${ROUTES_USERS.admin.root()}/create` as const,
+    user: () => `${ROUTES_USERS.admin.root()}/:id` as const,
   },
 } as const;