From 1875a394c6eb364d82be976760232d6450117a46 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 9 Oct 2024 16:14:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20simplify=20butto?=
 =?UTF-8?q?n=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In object-oriented terms, the previous implementation violated the Liskov
Substitution Principle. Props between these two components (Button and Link)
were not substitutable.

This led to TypeScript errors and increased overall complexity without
significant DX gains. To address this, the LinkButton has been extracted
into a dedicated component.
---
 src/frontend/src/components/Feedback.tsx   |  6 +++---
 src/frontend/src/primitives/Button.tsx     | 17 +----------------
 src/frontend/src/primitives/LinkButton.tsx | 22 ++++++++++++++++++++++
 src/frontend/src/primitives/index.ts       |  1 +
 4 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 src/frontend/src/primitives/LinkButton.tsx

diff --git a/src/frontend/src/components/Feedback.tsx b/src/frontend/src/components/Feedback.tsx
index 7d995e5c..3929da9e 100644
--- a/src/frontend/src/components/Feedback.tsx
+++ b/src/frontend/src/components/Feedback.tsx
@@ -1,12 +1,12 @@
-import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { LinkButton } from '@/primitives'
 
 export const Feedback = () => {
   const { t } = useTranslation()
   return (
-    <Button
+    <LinkButton
       href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
       variant="success"
       target="_blank"
@@ -20,6 +20,6 @@ export const Feedback = () => {
         className={css({ marginLeft: 0.5 })}
         aria-hidden="true"
       />
-    </Button>
+    </LinkButton>
   )
 }
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index 6b3d4ec9..ab2a46bf 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -1,8 +1,6 @@
 import {
   Button as RACButton,
   type ButtonProps as RACButtonsProps,
-  Link,
-  LinkProps,
 } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
@@ -12,25 +10,12 @@ export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
   TooltipWrapperProps
 
-type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
-  LinkProps &
-  TooltipWrapperProps
-
-type ButtonOrLinkProps = ButtonProps | LinkButtonProps
-
 export const Button = ({
   tooltip,
   tooltipType = 'instant',
   ...props
-}: ButtonOrLinkProps) => {
+}: ButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-  if ((props as LinkButtonProps).href !== undefined) {
-    return (
-      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-        <Link className={buttonRecipe(variantProps)} {...componentProps} />
-      </TooltipWrapper>
-    )
-  }
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
diff --git a/src/frontend/src/primitives/LinkButton.tsx b/src/frontend/src/primitives/LinkButton.tsx
new file mode 100644
index 00000000..1397da5c
--- /dev/null
+++ b/src/frontend/src/primitives/LinkButton.tsx
@@ -0,0 +1,22 @@
+import { Link, LinkProps } from 'react-aria-components'
+import { type RecipeVariantProps } from '@/styled-system/css'
+import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
+import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+
+type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
+  LinkProps &
+  TooltipWrapperProps
+
+export const LinkButton = ({
+  tooltip,
+  tooltipType = 'instant',
+  ...props
+}: LinkButtonProps) => {
+  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
+  return (
+    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+    </TooltipWrapper>
+  )
+}
diff --git a/src/frontend/src/primitives/index.ts b/src/frontend/src/primitives/index.ts
index 16a0ffc0..44d68b9c 100644
--- a/src/frontend/src/primitives/index.ts
+++ b/src/frontend/src/primitives/index.ts
@@ -9,6 +9,7 @@ export { Badge } from './Badge'
 export { Bold } from './Bold'
 export { Box } from './Box'
 export { Button } from './Button'
+export { LinkButton } from './LinkButton'
 export { useCloseDialog } from './useCloseDialog'
 export { Dialog, type DialogProps } from './Dialog'
 export { Div } from './Div'