feat: add screenshot functionality to Toolbar and integrate modern-screenshot library

Author: rjvim

package-lock.json

@@ -114,11 +114,11 @@ export function PreviewWrapper({
                   breakpointTitle={currentBreakpoint?.title}
                   availableBreakpoints={availableBreakpoints}
                   onBreakpointChange={(value) => {
-                    console.log("value", value);
                     if (resizablePanelRef?.current) {
                       resizablePanelRef.current.resize(parseFloat(value));
                     }
                   }}
+                  panelRef={panelContentRef} // Add this line
                 />
               )}
             </div>

packages/responsive-preview-react/lib/PreviewWrapper.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/base/lib/utils";
+
+const buttonVariants = cva(
+  "rpr-inline-flex rpr-items-center rpr-justify-center rpr-gap-2 rpr-whitespace-nowrap rpr-rounded-md rpr-text-sm rpr-font-medium rpr-transition-colors focus-visible:rpr-outline-none focus-visible:rpr-ring-1 focus-visible:rpr-ring-ring disabled:rpr-pointer-events-none disabled:rpr-opacity-50 [&_svg]:rpr-pointer-events-none [&_svg]:rpr-size-4 [&_svg]:rpr-shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "rpr-bg-primary rpr-text-primary-foreground rpr-shadow hover:rpr-bg-primary/90",
+        destructive:
+          "rpr-bg-destructive rpr-text-destructive-foreground rpr-shadow-sm hover:rpr-bg-destructive/90",
+        outline:
+          "rpr-border rpr-border-input rpr-bg-background rpr-shadow-sm hover:rpr-bg-accent hover:rpr-text-accent-foreground",
+        secondary:
+          "rpr-bg-secondary rpr-text-secondary-foreground rpr-shadow-sm hover:rpr-bg-secondary/80",
+        ghost: "hover:rpr-bg-accent hover:rpr-text-accent-foreground",
+        link: "rpr-text-primary rpr-underline-offset-4 hover:rpr-underline",
+      },
+      size: {
+        default: "rpr-h-9 rpr-px-4 rpr-py-2",
+        sm: "rpr-h-8 rpr-rounded-md rpr-px-3 rpr-text-xs",
+        lg: "rpr-h-10 rpr-rounded-md rpr-px-8",
+        icon: "rpr-h-9 rpr-w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/responsive-preview-react/lib/base/components/ui/button.tsx

@@ -9,6 +9,7 @@ import {
   ToggleGroupItem,
 } from "@/base/components/ui/toggle-group";
 import {
+  Camera,
   ChevronLeft,
   ChevronRight,
   MaximizeIcon,
@@ -17,13 +18,15 @@ import {
 } from "lucide-react";
 import type { Breakpoint } from "../breakpoints";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { domToPng } from "modern-screenshot"; // Add this import
 
 interface ToolbarProps {
   width: number;
   maxWidth: number;
   breakpointTitle?: string;
   availableBreakpoints: Breakpoint[];
   onBreakpointChange: (value: string) => void;
+  panelRef: React.RefObject<HTMLDivElement>;
 }
 
 export function Toolbar({
@@ -32,13 +35,28 @@ export function Toolbar({
   breakpointTitle,
   availableBreakpoints,
   onBreakpointChange,
+  panelRef,
 }: ToolbarProps) {
   const [isPlaying, setIsPlaying] = useState(false);
   const intervalRef = useRef<NodeJS.Timeout>();
   const currentIndex = availableBreakpoints.findIndex(
     (bp) => bp.title === breakpointTitle
   );
 
+  const handleScreenshot = async () => {
+    if (panelRef.current) {
+      try {
+        const dataUrl = await domToPng(panelRef.current);
+        const link = document.createElement("a");
+        link.download = `preview-${width}px.png`;
+        link.href = dataUrl;
+        link.click();
+      } catch (err) {
+        console.error("Screenshot failed:", err);
+      }
+    }
+  };
+
   const handlePrevBreakpoint = () => {
     if (currentIndex > 0) {
       const prevBp = availableBreakpoints[currentIndex - 1];
@@ -158,6 +176,22 @@ export function Toolbar({
                 </TooltipContent>
               </Tooltip>
             </ToggleGroupItem>
+
+            <ToggleGroupItem
+              value="screenshot"
+              onClick={handleScreenshot}
+              data-state="off"
+              className="rpr-h-[22px] rpr-w-[22px] rpr-min-w-0 rpr-rounded-sm rpr-p-0"
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Camera className="rpr-h-3.5 rpr-w-3.5" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Take Screenshot</p>
+                </TooltipContent>
+              </Tooltip>
+            </ToggleGroupItem>
           </ToggleGroup>
         </TooltipProvider>
 

packages/responsive-preview-react/lib/components/Toolbar.tsx

@@ -73,10 +73,12 @@
     "@radix-ui/react-hover-card": "^1.1.5",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.5",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.6"
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "modern-screenshot": "^4.5.5"
   }
 }