Add a clone button to the popup (#13)

* Fix animations breaking links

* Implement a clone button for the preview page

* Bump up version

Author: SeriousBug

package.json

@@ -1,12 +1,12 @@
 {
   "name": "clone-with-devpod-extension",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
-    "preview": "PREVIEW=false vite dev",
+    "preview": "PREVIEW=true vite dev",
     "build": "tsc && vite build"
   },
   "dependencies": {

public/icon/devpod.svg src/icons/devpod.svgpublic/icon/devpod.svg renamed to src/icons/devpod.svg

@@ -1,15 +1,6 @@
-import LogoImage from "@public/icon/devpod.svg";
-import { DetailedHTMLProps, forwardRef } from "react";
+import { forwardRef } from "react";
 
-export const DevPodLogoImage = forwardRef<
-  HTMLImageElement,
-  DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
->((props, ref) => {
-  return <img ref={ref} src={LogoImage} {...props} />;
-});
-DevPodLogoImage.displayName = "DevPodLogoImage";
-
-export const DevPodLogoIcon = forwardRef<
+export const DevPodLogo = forwardRef<
   SVGSVGElement,
   React.SVGProps<SVGSVGElement>
 >((props, ref) => {
@@ -32,4 +23,4 @@ export const DevPodLogoIcon = forwardRef<
     </svg>
   );
 });
-DevPodLogoIcon.displayName = "DevPodLogoIcon";
+DevPodLogo.displayName = "DevPodLogo";

src/icons/devpod.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "@lib/utils/clsx";
 import { WithRequired } from "@lib/utils/typeUtils/WithRequired";
 import { HTMLMotionProps, motion, useAnimate } from "framer-motion";
-import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { forwardRef, useMemo } from "react";
 
 type ButtonStyleProps = {
   variant?: "solid" | "outline" | "link";
@@ -61,21 +61,17 @@ function useCommonProps<Type extends "a" | "button">(
       // 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 },
-        );
+        await animate(scope.current, { opacity: 0.95 }, { duration: 0.1 });
+        await animate(scope.current, { opacity: 0.8 }, { duration: 0.1 });
       },
-      initial: { backgroundColor: "#DB0082" },
-      whileHover: { backgroundColor: "#AC0067" },
-      whileFocus: { backgroundColor: "#AC0067" },
-      className: clsx(variantClasses(props), className, "cursor-pointer"),
+      initial: { opacity: 1 },
+      whileHover: { opacity: 0.8 },
+      whileFocus: { opacity: 0.8 },
+      className: clsx(
+        variantClasses(props),
+        className,
+        "cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+      ),
       ...props,
       ref: mergeRefs(ref, scope),
     }),
@@ -96,24 +92,17 @@ Button.displayName = "Button";
 
 export const ButtonLink = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ children, ...props }, ref) => {
-    const common = useCommonProps<"a">(props);
+    const common = useCommonProps<"a">(props, ref);
 
-    return (
-      <motion.a ref={ref} {...common}>
-        {children}
-      </motion.a>
-    );
+    return <motion.a {...common}>{children}</motion.a>;
   },
 );
 ButtonLink.displayName = "ButtonLink";
 
 export const Link = forwardRef<HTMLAnchorElement, Omit<LinkProps, "variant">>(
   ({ children, ...props }, ref) => {
     return (
-      <motion.a
-        ref={ref}
-        {...useCommonProps<"a">({ variant: "link", ...props })}
-      >
+      <motion.a {...useCommonProps<"a">({ variant: "link", ...props }, ref)}>
         {children}
       </motion.a>
     );

src/lib/components/Button.tsx

@@ -2,12 +2,13 @@ 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.
+ * This is always supported on every page in preview mode, and never on production.
  */
 export const Preview: Integration = {
   platform: "Github",
   supports() {
-    return NODE_ENV === "development";
+    console.log("PREVIEW", PREVIEW);
+    return !!PREVIEW;
   },
   getButtonTarget(document: Document) {
     return document.body;

src/lib/integrations/preview.ts

@@ -4,7 +4,11 @@ import { EError } from "../utils/error";
 import { Modal } from "@lib/components/Modal";
 import { Button, Link } from "@lib/components/Button";
 
-function Fallback({ error, resetErrorBoundary }: FallbackProps) {
+function FallbackContent({
+  error,
+  resetErrorBoundary,
+  dismiss,
+}: FallbackProps & { dismiss?: () => void }) {
   const { errorEncoded, message, serialized } = useMemo(() => {
     return {
       errorEncoded: EError.encode(error),
@@ -15,22 +19,16 @@ function Fallback({ error, resetErrorBoundary }: FallbackProps) {
   const onCopy = useCallback(() => {
     navigator.clipboard.writeText(errorEncoded);
   }, [errorEncoded]);
-  const [dismissed, setDismissed] = useState(false);
-  const dismiss = useCallback(() => {
-    setDismissed(true);
-  }, []);
 
   return (
-    <Modal
-      isOpen={!dismissed}
-      onClose={dismiss}
-      className="text-text flex flex-col gap-4 max-w-[80vw] lg:max-w-2xl z-50"
-    >
+    <>
       <div className="flex flex-row w-full justify-between">
         <h2 className="font-bold text-xl">Error: {message}</h2>
-        <Button variant="outline" onClick={dismiss}>
-          X
-        </Button>
+        {dismiss ? (
+          <Button variant="outline" onClick={dismiss}>
+            X
+          </Button>
+        ) : null}
       </div>
       <p>
         Please send the following code along with a description of what you were
@@ -94,10 +92,55 @@ function Fallback({ error, resetErrorBoundary }: FallbackProps) {
       <Button variant="outline" onClick={resetErrorBoundary}>
         Retry
       </Button>
+    </>
+  );
+}
+
+function FallbackModal({ error, resetErrorBoundary }: FallbackProps) {
+  const [dismissed, setDismissed] = useState(false);
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+  }, []);
+
+  return (
+    <Modal
+      isOpen={!dismissed}
+      onClose={dismiss}
+      className="text-text flex flex-col gap-4 max-w-[80vw] lg:max-w-2xl z-50"
+    >
+      <FallbackContent
+        error={error}
+        resetErrorBoundary={resetErrorBoundary}
+        dismiss={dismiss}
+      />
     </Modal>
   );
 }
 
-export function ErrorBoundaryProvider({ children }: { children: ReactNode }) {
-  return <ErrorBoundary FallbackComponent={Fallback}>{children}</ErrorBoundary>;
+function FallbackInline({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div className="p-8">
+      <FallbackContent error={error} resetErrorBoundary={resetErrorBoundary} />
+    </div>
+  );
+}
+
+export function InlineErrorBoundaryProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <ErrorBoundary FallbackComponent={FallbackInline}>{children}</ErrorBoundary>
+  );
+}
+
+export function ModalErrorBoundaryProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <ErrorBoundary FallbackComponent={FallbackModal}>{children}</ErrorBoundary>
+  );
 }

src/lib/wrappers/ErrorBoundary.tsx

@@ -20,7 +20,7 @@
     "{{chrome}}.service_worker": "src/background.ts",
     "{{firefox}}.scripts": ["src/background.ts"]
   },
-  "permissions": ["webNavigation", "storage"],
+  "permissions": ["webNavigation", "storage", "activeTab"],
   "content_scripts": [
     {
       "matches": ["https://github.com/*", "https://gitlab.com/*"],

src/manifest.json

@@ -1,4 +1,4 @@
-import { Button } from "@lib/components/Button";
+import { Button, Link } from "@lib/components/Button";
 import { CloneButton } from "./content/CloneButton";
 
 export function Preview() {
@@ -7,6 +7,7 @@ export function Preview() {
       <div className="m-4 bg-white p-8 rounded flex flex-col gap-4">
         <CloneButton portal={document.body} />
         <Button>Test</Button>
+        <Link href="/src/popup.html">Preview Popup</Link>
       </div>
     </div>
   );

src/pages/Popup.tsx

@@ -5,12 +5,12 @@ import { EIntegrationParseError } from "@lib/integrations/error";
 import { clsx } from "@lib/utils/clsx";
 import { PortalProps } from "@lib/utils/dom/portal";
 import { EError, ENoIntegrationError } from "@lib/utils/error";
-import { ErrorBoundaryProvider } from "@lib/wrappers/ErrorBoundary";
-import { DevPodLogoIcon } from "@src/icons/devpod";
+import { ModalErrorBoundaryProvider } from "@lib/wrappers/ErrorBoundary";
+import { DevPodLogo } from "@src/icons/devpod";
 import { StrictMode } from "react";
 import { createPortal } from "react-dom";
 
-function getDevPodUrl(url: string) {
+export function getDevPodUrl(url: string) {
   try {
     const integration = getSupportedIntegration(url);
     if (!integration) {
@@ -57,10 +57,7 @@ function CloneButtonInner({
         {...bindTarget}
         className={className}
       >
-        <DevPodLogoIcon
-          aria-label=""
-          className="w-6 h-6 text-primary-contrast"
-        />{" "}
+        <DevPodLogo aria-label="" className="w-6 h-6 text-primary-contrast" />{" "}
         DevPod
       </ButtonLink>
       {createPortal(
@@ -85,9 +82,9 @@ export function CloneButton({
 }: PortalProps & { className?: string }) {
   return (
     <StrictMode>
-      <ErrorBoundaryProvider>
+      <ModalErrorBoundaryProvider>
         <CloneButtonInner className={className} portal={portal} />
-      </ErrorBoundaryProvider>
+      </ModalErrorBoundaryProvider>
     </StrictMode>
   );
 }