Add link component, make Button be isomorphic with react-aria

components/ui/Button/Button.tsx

@@ -1,5 +1,10 @@
 import cn from 'classnames'
-import React, { ButtonHTMLAttributes } from 'react'
+import React, {
+  ButtonHTMLAttributes,
+  JSXElementConstructor,
+  useRef,
+} from 'react'
+import { useButton } from 'react-aria'
 import s from './Button.module.css'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -8,47 +13,55 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'filled' | 'outlined' | 'flat' | 'none'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
+  Component?: string | JSXElementConstructor<any>
 }
 
-export default class Button extends React.Component<Props> {
-  public render() {
-    const {
-      className,
-      variant = 'filled',
-      children,
-      disabled = false,
-      href,
-      active,
-      ...rest
-    } = this.props
+const Button: React.FC<Props> = (props) => {
+  const {
+    className,
+    variant = 'filled',
+    children,
+    href,
+    active,
+    onClick,
+    disabled,
+    Component = 'button',
+    ...rest
+  } = props
+  const ref = useRef<typeof Component>(null)
+  const { buttonProps, isPressed } = useButton(
+    {
+      ...props,
+      // @ts-ignore onClick === onPress for our purposes
+      onPress: onClick,
+      isDisabled: disabled,
+      elementType: Component,
+    },
+    ref
+  )
 
-    let Component: React.ComponentType<
-      React.AnchorHTMLAttributes<
-        HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
-      > &
-        React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
-    > = 'a' as any
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.filled]: variant === 'filled',
+    },
+    className
+  )
 
-    // Catch for buttons / span / stc.
-
-    const rootClassName = cn(
-      s.root,
-      {
-        [s.filled]: variant === 'filled',
-      },
-      className
-    )
-
-    return (
-      <Component
-        className={rootClassName}
-        href={href}
-        aria-pressed={active}
-        data-variant={variant}
-        {...rest}
-      >
-        {children}
-      </Component>
-    )
-  }
+  return (
+    <Component
+      className={rootClassName}
+      href={href}
+      aria-pressed={active}
+      data-variant={variant}
+      ref={ref}
+      {...rest}
+      {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+    >
+      {children}
+    </Component>
+  )
 }
+
+export default Button