feat: add download flow image

Author: thedaviddias

app/_components/decision-flow/download-button.tsx

@@ -0,0 +1,68 @@
+import { toPng } from 'html-to-image'
+import { Download } from 'lucide-react'
+import {
+  Panel,
+  useReactFlow
+} from 'reactflow'
+
+interface DownloadButtonProps {
+  title?: string
+}
+
+const DownloadButton = ({ title = 'Decision Flow - UX Patterns for Devs' }: DownloadButtonProps) => {
+  const reactFlowInstance = useReactFlow()
+
+  const onClick = () => {
+    // Store the current viewport state
+    const currentViewport = reactFlowInstance.getViewport()
+
+    // Get the viewport element
+    const viewportElement = document.querySelector('.react-flow__viewport') as HTMLElement
+    if (!viewportElement) return
+
+    // Get the flow wrapper element for dimensions
+    const flowWrapper = document.querySelector('.react-flow') as HTMLElement
+    if (!flowWrapper) return
+
+    // Check if dark mode is active
+    const isDarkMode = document.documentElement.classList.contains('dark')
+
+    const rect = flowWrapper.getBoundingClientRect()
+
+    toPng(viewportElement, {
+      backgroundColor: isDarkMode ? 'rgb(17 24 39)' : 'rgb(255 255 255)',
+      width: rect.width,
+      height: rect.height,
+      style: {
+        width: rect.width + 'px',
+        height: rect.height + 'px',
+        transform: `translate(${currentViewport.x}px, ${currentViewport.y}px) scale(${currentViewport.zoom})`
+      },
+      filter: (node) => {
+        // Skip download button and controls in the image
+        const className = node?.className?.toString() || ''
+        return !className.includes('download-btn') && !className.includes('react-flow__controls')
+      },
+    }).then((dataUrl) => {
+      const a = document.createElement('a')
+      a.setAttribute('download', `${title}${` - UX Patterns for Devs`}.png`)
+      a.setAttribute('href', dataUrl)
+      a.click()
+    })
+  }
+
+  return (
+    <Panel position="top-right" className="download-btn">
+      <button
+        type="button"
+        onClick={onClick}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 rounded-md shadow-sm border border-gray-200 dark:border-gray-700 transition-colors"
+      >
+        <Download className="w-4 h-4" />
+        Download as PNG
+      </button>
+    </Panel>
+  )
+}
+
+export default DownloadButton

app/_components/decision-flow/index.tsx

@@ -13,6 +13,7 @@ import ReactFlow, {
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 
+import DownloadButton from './download-button'
 import { ConsiderationNode } from './nodes/ConsiderationNode'
 import { PatternNode } from './nodes/PatternNode'
 import { QuestionNode } from './nodes/QuestionNode'
@@ -99,7 +100,12 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
   return { nodes: layoutedNodes, edges: styledEdges }
 }
 
-export function DecisionFlow({ nodes: initialNodes, edges: initialEdges, className = '' }: DecisionFlowProps) {
+export function DecisionFlow({
+  nodes: initialNodes,
+  edges: initialEdges,
+  className = '',
+  title
+}: DecisionFlowProps) {
   // Layout the nodes on first render
   const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
     initialNodes,
@@ -126,11 +132,12 @@ export function DecisionFlow({ nodes: initialNodes, edges: initialEdges, classNa
         fitView
         minZoom={0.5}
         maxZoom={1.5}
-        defaultViewport={{ x: 0, y: 0, zoom: 0.7 }} // Reduced default zoom
+        defaultViewport={{ x: 0, y: 0, zoom: 0.7 }}
         attributionPosition="bottom-left"
       >
         <Background color="var(--flow-background-dots)" gap={16} />
         <Controls className="bg-white dark:bg-gray-800" />
+        <DownloadButton title={title} />
       </ReactFlow>
     </div>
   )

app/_components/decision-flow/types.ts

@@ -25,4 +25,5 @@ export interface DecisionFlowProps {
   nodes: DecisionNode[];
   edges: DecisionEdge[];
   className?: string;
+  title?: string; // Optional title for the download filename
 }

app/_components/pattern-comparison/decision-flow-section.tsx

@@ -4,11 +4,12 @@ import { DecisionFlow } from '@app/_components/decision-flow'
 import type { DecisionEdge, DecisionNode } from '@app/_components/decision-flow/types'
 
 interface DecisionFlowSectionProps {
+  title: string
   nodes: DecisionNode[]
   edges: DecisionEdge[]
 }
 
-export function DecisionFlowSection({ nodes, edges }: DecisionFlowSectionProps) {
+export function DecisionFlowSection({ title, nodes, edges }: DecisionFlowSectionProps) {
   return (
     <div className="mb-16">
       <h2 className="text-2xl font-bold mb-6">Interactive Decision Flow</h2>
@@ -17,6 +18,7 @@ export function DecisionFlowSection({ nodes, edges }: DecisionFlowSectionProps)
           nodes={nodes}
           edges={edges}
           className="rounded-xl"
+          title={title}
         />
       </div>
     </div>

content/en/pattern-assistant/choosing-input-types.mdx

@@ -30,7 +30,7 @@ import { PatternNextSteps } from "@app/_components/pattern-comparison/pattern-ne
 
   </div>
 
-  <DecisionFlowSection nodes={inputTypeNodes} edges={inputTypeEdges} />
+  <DecisionFlowSection nodes={inputTypeNodes} edges={inputTypeEdges} title="Input Types Decision Flow" />
   <ComparisonGrid patterns={comparisonData.patterns} />
   <ImplementationMetrics patterns={implementationData.patterns} />
   <ExamplesGrid examples={examplesData.examples} />
@@ -42,7 +42,7 @@ export const comparisonData = {
     {
       title: "Text Input",
       subtitle: "Best for single-line text entry and basic data collection",
-      href: "/patterns/forms/text-input",
+      href: "/patterns/forms/text-field",
       icon: "Input",
       theme: "pattern",
       criteria: [
@@ -70,7 +70,7 @@ export const comparisonData = {
     {
       title: "Select",
       subtitle: "Perfect for choosing from predefined options",
-      href: "/patterns/forms/select",
+      href: "/patterns/forms/selection-input",
       icon: "ListBox",
       theme: "pattern",
       criteria: [
@@ -413,5 +413,3 @@ export const nextStepsData = {
     },
   ],
 };
-
-;

content/en/pattern-assistant/pagination-vs-infinite-scroll.mdx

@@ -34,7 +34,7 @@ import { PerformanceComparison } from "@app/_components/pattern-comparison/perfo
 
   </div>
 
-  <DecisionFlowSection nodes={nodes} edges={edges} />
+  <DecisionFlowSection nodes={nodes} edges={edges} title="Pagination vs Infinite Scroll Decision Flow" />
   <ComparisonGrid patterns={comparisonData.patterns} />
   <PerformanceComparison patterns={performanceData.patterns} />
   <ExamplesGrid examples={examplesData.examples} />
@@ -144,7 +144,7 @@ export const examplesData = {
         {
           title: "Pinterest Board",
           description: "Visual content discovery",
-          imageUrl: "/examples/pinterest-infinite.webp",
+          imageUrl: "/examples/pinterest-infinite.gif",
         },
         {
           title: "Facebook News Feed",

package.json

@@ -38,6 +38,7 @@
     "clsx": "^2.1.1",
     "dagre": "^0.8.5",
     "gray-matter": "^4.0.3",
+    "html-to-image": "^1.11.11",
     "lucide-react": "^0.474.0",
     "markdown-to-jsx": "^7.7.3",
     "next": "^15.1.6",