Add animations to the buttons (#12)

Author: SeriousBug

src/lib/components/Button.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "@lib/utils/clsx";
 import { WithRequired } from "@lib/utils/typeUtils/WithRequired";
-import { HTMLMotionProps, motion } from "framer-motion";
-import { forwardRef } from "react";
+import { HTMLMotionProps, motion, useAnimate } from "framer-motion";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 
 type ButtonStyleProps = {
   variant?: "solid" | "outline" | "link";
@@ -33,23 +33,60 @@ function variantClasses({
   }
 }
 
-function commonProps<Type extends "a" | "button">({
-  className,
-  ...props
-}: Type extends "a" ? LinkProps : ButtonProps): (Type extends "a"
-  ? LinkProps
-  : ButtonProps) & { className: string } {
-  // @ts-expect-error These types do match, but TypeScript doesn't seem to like it
-  return {
-    className: clsx(variantClasses(props), className, "cursor-pointer"),
-    ...props,
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
   };
 }
 
+function useCommonProps<Type extends "a" | "button">(
+  { className, ...props }: Type extends "a" ? LinkProps : ButtonProps,
+  ref: Type extends "a"
+    ? React.Ref<HTMLAnchorElement>
+    : React.Ref<HTMLButtonElement>,
+): (Type extends "a" ? LinkProps : ButtonProps) & { className: string } {
+  const [scope, animate] = useAnimate();
+
+  // @ts-expect-error These types do match, but TypeScript doesn't seem to like it
+  return useMemo(
+    () => ({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onClick: async (e: any) => {
+        props.onClick?.(e);
+        await animate(
+          scope.current,
+          { backgroundColor: "#FF00A6" },
+          { duration: 0.1 },
+        );
+        await animate(
+          scope.current,
+          { backgroundColor: "#DB0082" },
+          { duration: 0.1 },
+        );
+      },
+      initial: { backgroundColor: "#DB0082" },
+      whileHover: { backgroundColor: "#AC0067" },
+      whileFocus: { backgroundColor: "#AC0067" },
+      className: clsx(variantClasses(props), className, "cursor-pointer"),
+      ...props,
+      ref: mergeRefs(ref, scope),
+    }),
+    [animate, className, props, ref, scope],
+  );
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, ...props }, ref) => {
     return (
-      <motion.button ref={ref} {...commonProps<"button">(props)}>
+      <motion.button {...useCommonProps<"button">(props, ref)}>
         {children}
       </motion.button>
     );
@@ -59,8 +96,10 @@ Button.displayName = "Button";
 
 export const ButtonLink = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ children, ...props }, ref) => {
+    const common = useCommonProps<"a">(props);
+
     return (
-      <motion.a ref={ref} {...commonProps<"a">(props)}>
+      <motion.a ref={ref} {...common}>
         {children}
       </motion.a>
     );
@@ -71,7 +110,10 @@ ButtonLink.displayName = "ButtonLink";
 export const Link = forwardRef<HTMLAnchorElement, Omit<LinkProps, "variant">>(
   ({ children, ...props }, ref) => {
     return (
-      <motion.a ref={ref} {...commonProps<"a">({ variant: "link", ...props })}>
+      <motion.a
+        ref={ref}
+        {...useCommonProps<"a">({ variant: "link", ...props })}
+      >
         {children}
       </motion.a>
     );

src/lib/integrations/index.ts

@@ -1,7 +1,8 @@
 import { Github } from "./github";
 import { GitLab } from "./gitlab";
+import { Preview } from "./preview";
 
-const INTEGRATIONS = [Github, GitLab] as const;
+const INTEGRATIONS = [Github, GitLab, Preview] as const;
 
 export function getSupportedIntegration(url: string | URL) {
   return INTEGRATIONS.find((integration) => integration.supports(url));

src/lib/integrations/preview.ts

@@ -0,0 +1,29 @@
+import { Integration } from "./core";
+
+/** A dummy integration just for testing and development.
+ *
+ * This is always supported on every page on dev, and never on production.
+ */
+export const Preview: Integration = {
+  platform: "Github",
+  supports() {
+    return NODE_ENV === "development";
+  },
+  getButtonTarget(document: Document) {
+    return document.body;
+  },
+  getRepo({ url }) {
+    const u = new URL(url);
+    if (u.searchParams.has("repo")) {
+      return u.searchParams.get("repo")!;
+    }
+    return "github/choosealicense.com";
+  },
+  getBranch({ url }) {
+    const u = new URL(url);
+    if (u.searchParams.has("branch")) {
+      return u.searchParams.get("branch")!;
+    }
+    return "spdx-license-templates";
+  },
+};

src/pages/PreviewContent.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@lib/components/Button";
+import { CloneButton } from "./content/CloneButton";
+
+export function Preview() {
+  return (
+    <div className="w-full min-h-svh top-0 absolute flex justify-center items-center bg-slate-200">
+      <div className="m-4 bg-white p-8 rounded flex flex-col gap-4">
+        <CloneButton portal={document.body} />
+        <Button>Test</Button>
+      </div>
+    </div>
+  );
+}

src/pages/preview.tsx

@@ -1,15 +1,6 @@
-import { attachShadow } from "@lib/utils/dom/shadow";
 import { createRoot } from "react-dom/client";
-import { CloneButton } from "./content/CloneButton";
+import "../tailwind.css";
+import { Preview } from "./PreviewContent";
 
-function init() {
-  const { shadow: rootContainer } = attachShadow(
-    document.getElementById("root"),
-  );
-  const { shadow: portalContainer } = attachShadow(document.body);
-  const root = createRoot(rootContainer);
-
-  root.render(<CloneButton portal={portalContainer} />);
-}
-
-init();
+const root = createRoot(document.body);
+root.render(<Preview />);

src/vite-env.d.ts

@@ -2,3 +2,4 @@
 
 declare const APP_VERSION: string;
 declare const PREVIEW: boolean;
+declare const NODE_ENV: "development" | "production";

tailwind.config.js

@@ -7,8 +7,19 @@ module.exports = {
         DEFAULT: "1rem",
       },
       colors: {
-        primary: "#ba50ff",
-        "primary-contrast": "#fff",
+        primary: {
+          DEFAULT: "#DB0082", // Set 500 as the default primary color
+          100: "#FFD5EE",
+          200: "#FF97D5",
+          300: "#FF59BD",
+          400: "#FF1BA4",
+          500: "#DB0082",
+          600: "#AC0067",
+          700: "#7D004B",
+          800: "#4E002F",
+          900: "#1F0013",
+          contrast: "#fff",
+        },
         text: "#000",
         background: "#fff",
       },

vite.config.ts

@@ -42,5 +42,6 @@ export default defineConfig({
   define: {
     APP_VERSION: JSON.stringify(pkg.version),
     PREVIEW: JSON.stringify(process.env.PREVIEW !== '"false"'),
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
   },
 });