[WIP] feat(Link): use Action internal component as a base

packages/react/src/components/Actions/Link/OneLink.tsx

@@ -1,69 +1,51 @@
-import { cva, type VariantProps } from "cva"
 import { forwardRef } from "react"
 import ExternalLink from "../../../icons/app/ExternalLink"
-import {
-  Link as BaseLink,
-  LinkProps as BaseLinkProps,
-} from "../../../lib/linkHandler"
-import { cn, focusRing } from "../../../lib/utils"
+import { Action, type ActionProps } from "../../../ui/Action/Action"
 import { Icon } from "../../Utilities/Icon"
 
-const linkVariants = cva({
-  base: "inline-flex flex-row items-center gap-1 text-base",
-  variants: {
-    variant: {
-      unstyled: "text-inherit no-underline",
-      link: "font-medium text-f1-foreground underline decoration-f1-border-hover decoration-1 underline-offset-[5px] transition-all visited:text-f1-foreground hover:text-f1-foreground hover:decoration-f1-border-bold active:text-f1-foreground",
-    },
-    disabled: {
-      true: "cursor-not-allowed opacity-30 hover:decoration-f1-border-hover",
-      false: "",
-    },
-  },
-  defaultVariants: {
-    variant: "link",
-  },
-})
+const privateProps = [
+  "className",
+  "append",
+  "prepend",
+  "appendOutside",
+  "prependOutside",
+  "pressed",
+] as const
 
-export interface LinkProps
-  extends BaseLinkProps,
-    VariantProps<typeof linkVariants>,
-    DataAttributes {
+export type LinkProps = Omit<ActionProps, (typeof privateProps)[number]> & {
   stopPropagation?: boolean
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { className, children, variant, stopPropagation = false, ...props },
+  { children, stopPropagation = false, onClick, ...props },
   ref
 ) {
   const { target } = props
   const external = target === "_blank"
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (stopPropagation) {
+  const handleClick = (event?: React.MouseEvent<HTMLElement>) => {
+    if (stopPropagation && event) {
       event.stopPropagation()
     }
-    props.onClick?.(event)
+    if (onClick) {
+      onClick(event)
+    }
   }
 
+  const publicProps = privateProps.reduce((acc, key) => {
+    const { [key]: _, ...rest } = acc
+    return rest
+  }, props as ActionProps)
+
   return (
-    <BaseLink
+    <Action
       ref={ref}
-      {...props}
+      {...publicProps}
+      variant={publicProps.variant}
       onClick={handleClick}
-      rel={external ? "noopener noreferrer" : undefined}
-      className={cn(
-        linkVariants({
-          variant,
-          disabled: props.disabled,
-        }),
-        !props.disabled &&
-          focusRing("focus-visible:rounded-xs focus-visible:ring-offset-2"),
-        className
-      )}
+      append={external ? <Icon icon={ExternalLink} size="sm" /> : undefined}
     >
-      <span>{children}</span>
-      {external && <Icon icon={ExternalLink} size="sm" />}
-    </BaseLink>
+      {children}
+    </Action>
   )
 })

packages/react/src/components/Actions/Link/__stories__/index.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { ComponentProps } from "react"
-import { expect, within } from "storybook/test"
 import { Link } from ".."
 
 const meta = {
@@ -20,20 +19,14 @@ const meta = {
   args: {
     children: "Link",
     href: "/foo",
-    "data-test": "foo",
+    variant: "link",
   },
 } satisfies Meta<ComponentProps<typeof Link>>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    const link = canvas.getByRole("link")
-    await expect(link.dataset.test).toBe("foo")
-  },
   render: (args) => (
     <p>
       Do not click this <Link {...args} /> because it goes nowhere.
@@ -45,24 +38,22 @@ export const Variants: Story = {
   render: (args) => (
     <div className="[&>h3]:mt-5 [&>h3]:pb-2">
       <h3 className="!m-0">Basic usage</h3>
-      <Link {...args} variant="link" />
+      <Link {...args} />
+      <h3>As button</h3>
+      <Link {...args} variant="default" />
       <h3>External link</h3>
-      <Link {...args} variant="link" target="_blank" />
-      <h3>Unstyled</h3>
-      <Link {...args} variant="unstyled" />
+      <Link {...args} target="_blank" />
       <h3>Disabled</h3>
-      <Link {...args} variant="link" disabled />
+      <Link {...args} disabled />
     </div>
   ),
 }
 
 export const States: Story = {
   render: (args) => (
     <div className="flex flex-row items-center justify-center space-x-6">
-      <Link {...args} variant="link">
-        Default link
-      </Link>
-      <Link {...args} variant="link" disabled>
+      <Link {...args}>Default link</Link>
+      <Link {...args} disabled>
         Disabled link
       </Link>
     </div>
@@ -72,10 +63,10 @@ export const States: Story = {
 export const InteractiveExamples: Story = {
   render: (args) => (
     <div className="flex flex-row items-center justify-center space-x-6">
-      <Link {...args} variant="link" href="/internal">
+      <Link {...args} href="/internal">
         Internal link
       </Link>
-      <Link {...args} variant="link" href="https://example.com" target="_blank">
+      <Link {...args} href="https://example.com" target="_blank">
         External link
       </Link>
     </div>

packages/react/src/components/Actions/Link/__tests__/index.test.tsx

@@ -28,15 +28,6 @@ describe("Link", () => {
     expect(screen.getByRole("link").querySelector("svg")).toBeInTheDocument()
   })
 
-  it("applies custom className", () => {
-    render(
-      <Link href="/test" className="custom-class">
-        Click me
-      </Link>
-    )
-    expect(screen.getByRole("link")).toHaveClass("custom-class")
-  })
-
   it("applies active state when isActive returns true", () => {
     const { isActive } = vi.mocked(useNavigation)()
     vi.mocked(isActive).mockReturnValue(true)

packages/react/src/ui/Action/Action.tsx

@@ -0,0 +1,163 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { Spinner } from "@/icons/app"
+import { Link } from "@/lib/linkHandler"
+import { cn, focusRing } from "@/lib/utils"
+import { Skeleton } from "@/ui/skeleton"
+import type { VariantProps } from "cva"
+import { AnimatePresence, motion } from "motion/react"
+import React, { ReactNode } from "react"
+import {
+  actionVariants,
+  buttonSizeVariants,
+  iconVariants,
+  linkSizeVariants,
+} from "./variants"
+
+export interface ActionCommonProps {
+  children: ReactNode
+
+  prepend?: ReactNode
+  append?: ReactNode
+  prependOutside?: boolean
+  appendOutside?: boolean
+
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
+  onFocus?: (event?: React.FocusEvent<HTMLElement>) => void
+  onBlur?: (event?: React.FocusEvent<HTMLElement>) => void
+
+  disabled?: boolean
+  loading?: boolean
+  pressed?: boolean
+
+  className?: string
+  size?: "sm" | "md" | "lg"
+}
+
+export interface LinkActionProps {
+  href: string
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  title?: string
+}
+
+type ActionVariantProps = VariantProps<typeof actionVariants>
+
+export type ActionProps = ActionCommonProps &
+  Partial<LinkActionProps> &
+  ActionVariantProps
+
+export const Action = React.forwardRef<HTMLElement, ActionProps>(
+  (
+    {
+      children,
+      prepend,
+      append,
+      prependOutside,
+      appendOutside,
+      onClick,
+      onFocus,
+      onBlur,
+      disabled,
+      loading,
+      pressed,
+      className,
+      href,
+      target,
+      title,
+      variant,
+      size = "md",
+    },
+    ref
+  ) => {
+    const isLink = !!href
+    const defaultVariant = isLink ? variant || "link" : variant || "default"
+    const variantClasses = actionVariants({
+      variant: defaultVariant,
+      pressed,
+    })
+    const isLinkStyled =
+      defaultVariant === "link" || defaultVariant === "mention"
+    const sizeClasses = isLinkStyled
+      ? linkSizeVariants({ size })
+      : buttonSizeVariants({ size })
+
+    const innerContent = (
+      <>
+        <div
+          className={cn(
+            "main flex items-center justify-center gap-1",
+            loading && "opacity-0",
+            iconVariants({ variant: defaultVariant })
+          )}
+        >
+          {prepend && !prependOutside && prepend}
+          <span>{children}</span>
+          {append && !appendOutside && append}
+        </div>
+        <AnimatePresence>
+          {loading && !isLinkStyled && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.7 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.7 }}
+              transition={{ duration: 0.1, ease: "easeInOut" }}
+              className={cn(
+                "absolute inset-0 flex items-center justify-center",
+                iconVariants({ variant: defaultVariant, mode: "only" })
+              )}
+            >
+              <Icon icon={Spinner} className="animate-spin" />
+            </motion.div>
+          )}
+          {loading && isLinkStyled && (
+            <Skeleton className="absolute inset-0 my-auto h-full w-full" />
+          )}
+        </AnimatePresence>
+      </>
+    )
+
+    const CommonProps = {
+      onClick,
+      onFocus,
+      onBlur,
+      disabled,
+      className: cn(variantClasses, sizeClasses, focusRing(), className),
+      "aria-busy": loading,
+    }
+
+    const mainElement = isLink ? (
+      <Link
+        {...CommonProps}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        aria-disabled={disabled}
+        aria-label={title}
+      >
+        {innerContent}
+      </Link>
+    ) : (
+      <button
+        {...CommonProps}
+        ref={ref as React.Ref<HTMLButtonElement>}
+        data-pressed={pressed}
+      >
+        {innerContent}
+      </button>
+    )
+
+    if (prependOutside || appendOutside) {
+      return (
+        <div className="flex items-center">
+          {prependOutside && prepend}
+          {mainElement}
+          {appendOutside && append}
+        </div>
+      )
+    }
+
+    return mainElement
+  }
+)
+
+Action.displayName = "Action"