refactor(actions): port typescript (see notes)

the problem here is that when <Action> is used, it can be a <Button> or a <Link>
or it can be an obfuscated version of those (see `withObfucscation`). What
it becomes is dependent on the combination of props and its values that passed to
<Action>. i'm either not good enough at typescript to know what to do here or
maybe we would have to revisit this approach????

Author: louh

lib/ui/components/actions/Action.js renamed to lib/ui/components/actions/Action.tsx

@@ -1,31 +1,31 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { withTheme } from "styled-components";
 
 import Button from "./Button";
 import Link from "./Link";
 import withObfuscation from "./withObfuscation";
 
+interface ActionProps extends React.PropsWithChildren {
+  button: boolean
+  obfuscated: boolean
+}
+
 const ObfButton = withObfuscation(Button);
 const ObfLink = withObfuscation(Link);
 
-function Action(props) {
-  const { obfuscated, button, ...restProps } = props;
+const Action: React.FC<ActionProps> = ({ obfuscated = false, button = false, ...props }) => {
   if (obfuscated) {
     if (button) {
-      return <ObfButton {...restProps} />;
+      return <ObfButton {...props} />;
     }
-    return <ObfLink {...restProps} />;
+    return <ObfLink {...props} />;
   }
+
   if (button) {
-    return <Button {...restProps} />;
+    return <Button {...props} />;
   }
-  return <Link {...restProps} />;
-}
 
-Action.propTypes = {
-  button: PropTypes.bool,
-  obfuscated: PropTypes.bool
-};
+  return <Link {...props} />;
+}
 
 export default withTheme(Action);

lib/ui/components/actions/Button.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { Link as GatsbyButton } from "gatsby";
+import styled from "styled-components";
+
+import { defaultThm } from "ui/themes";
+import { font, time, track } from "ui/settings";
+import { setSpace } from "ui/mixins";
+
+interface ButtonElProps {
+  readonly $primary: boolean;
+  readonly $block: boolean;
+}
+
+interface ButtonProps extends React.PropsWithChildren {
+  href: string;
+  to: string;
+  primary?: boolean;
+  block?: boolean;
+  onClick: () => void;
+  theme?: {
+    actionColor: string;
+  };
+}
+
+const ButtonEl = styled.a<ButtonElProps>`
+  ${setSpace("pam")};
+  background-color: ${({ theme, $primary }) =>
+    $primary ? (theme.actionColor ?? defaultThm.actionColor) : `transparent`};
+  border: 2px solid ${({ theme }) => theme.decor};
+  color: ${({ $primary, theme }) =>
+    $primary
+      ? (theme.background ?? defaultThm.background)
+      : (theme.actionColor ?? defaultThm.actionColor)};
+  cursor: pointer;
+  display: inline-block;
+  font-family: ${font.sans};
+  font-size: inherit;
+  font-weight: 800;
+  letter-spacing: ${track.x};
+  line-height: 1em;
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    box-shadow ${time.s},
+    transform ${time.s};
+  white-space: nowrap;
+  width: ${({ $block }) => ($block ? `100%` : `auto`)};
+  &:hover {
+    box-shadow: 4px 4px 0 0 ${({ theme }) => theme.actionDecor};
+    transform: translateX(-1px) translateY(-1px);
+  }
+`;
+
+const Button: React.FC<ButtonProps> = ({
+  to,
+  onClick,
+  primary = false,
+  block = false,
+  ...props
+}) => {
+  if (to) {
+    return (
+      <ButtonEl
+        as={GatsbyButton}
+        to={to}
+        theme={undefined}
+        $primary={primary}
+        $block={block}
+        {...props}
+      />
+    );
+  }
+
+  if (onClick) {
+    return (
+      <ButtonEl
+        as="button"
+        type="button"
+        onClick={onClick}
+        $primary={primary}
+        $block={block}
+        {...props}
+      />
+    );
+  }
+
+  return <ButtonEl $primary={primary} $block={block} {...props} />;
+};
+
+export default Button;

lib/ui/components/actions/Button.tsx

@@ -1,17 +1,34 @@
-/* eslint jsx-a11y/anchor-has-content: 0 */
-import PropTypes from "prop-types";
-import { Link as GatsbyLink } from "gatsby";
 import React from "react";
+import { Link as GatsbyLink } from "gatsby";
 import styled from "styled-components";
 
 import { defaultThm } from "ui/themes";
 import { font, time, track } from "ui/settings";
 import { setSpace } from "ui/mixins";
 
-const LinkEl = styled.a`
+interface LinkElProps {
+  theme:
+    | {
+        actionColor: string;
+      }
+    | undefined;
+  readonly $isActive: boolean;
+}
+
+interface LinkProps extends React.PropsWithChildren {
+  href: string;
+  isActive: boolean;
+  theme?: {
+    actionColor: string;
+  };
+  onClick?: () => void;
+  to?: string;
+}
+
+const LinkEl = styled.a<LinkElProps>`
   ${setSpace("pvx")};
   background: transparent;
-  border-color: ${({ theme }) => theme.actionColorLt};
+  border-color: ${({ theme }) => theme.actionColorLt ?? null};
   border-style: solid;
   border-width: 0 0 2px;
   color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
@@ -24,44 +41,38 @@ const LinkEl = styled.a`
   line-height: inherit;
   text-align: center;
   text-transform: uppercase;
-  transition: border ${time.s}, transform ${time.s};
+  transition:
+    border ${time.s},
+    transform ${time.s};
   white-space: nowrap;
   &:hover {
     border-color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
     transform: translateX(-1px) translateY(-1px);
   }
   ${({ $isActive, theme }) =>
     $isActive
-      ? `
-        border-color: ${theme.actionColor ?? defaultThm.actionColor};
-  `
+      ? `border-color: ${theme.actionColor ?? defaultThm.actionColor};`
       : ``};
 `;
 
-function Link(props) {
-  const { onClick, to, isActive, ...restProps } = props;
+const Link: React.FC<LinkProps> = ({ to, onClick, isActive, ...props }) => {
   if (to) {
-    return <LinkEl to={to} as={GatsbyLink} $isActive={isActive} {...restProps} theme={null} />;
+    return (
+      <LinkEl
+        to={to}
+        as={GatsbyLink}
+        $isActive={isActive}
+        {...props}
+        theme={undefined}
+      />
+    );
   }
+
   if (onClick) {
-    return <LinkEl onClick={onClick} as="a" $isActive={isActive} {...restProps} />;
+    return <LinkEl onClick={onClick} as="a" $isActive={isActive} {...props} />;
   }
-  return <LinkEl $isActive={isActive} {...restProps} />;
-}
 
-Link.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object,
-    PropTypes.string
-  ]),
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  theme: PropTypes.shape({
-    actionColor: PropTypes.string
-  }),
-  to: PropTypes.string,
-  isActive: PropTypes.bool
+  return <LinkEl $isActive={isActive} {...props} />;
 };
 
 export default Link;