adding FigmaImage component

Author: lukasoppermann

content/FigmaImageSources.json

@@ -0,0 +1,3 @@
+{
+  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4": "https://user-images.githubusercontent.com/97200987/176713532-b80d0221-fc01-4bbc-bb5d-0a152bf127d2.png"
+}

content/components/avatar.mdx

@@ -13,6 +13,7 @@ import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
 import {AccessibilityLink} from '~/src/components/accessibility-link'
+import {FigmaImage} from '~/src/components/FigmaImage'
 
 <img
   width="960"
@@ -37,7 +38,7 @@ Avatars start at 16px and increment by base-4 until 32px. At 32px, the scale swi
   src="https://user-images.githubusercontent.com/586552/207139770-429f7327-c3e5-4e38-aa58-185a03d82304.png"
 />
 
-<img
+<FigmaImage
   width="960"
   alt="Demo"
   src="https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4"

scripts/getFigmaImages.js

@@ -31,7 +31,7 @@ const run = async () => {
   // get all files that match the file glob
   const files = await fastGlob([fileGlob])
   // define the regex pattern to search
-  const pattern = /<img\s+[^>]*src="([^"]+)"[^>]*>/g
+  const pattern = /<FigmaImage\s+[^>]*src="([^"]+)"[^>]*>/g
   // find matches in find
   const matches = await findMatches(pattern, files)
   // output result

src/components/figma-image.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Images from '../../content/FigmaImageSources.json';
+
+
+type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string
+}
+
+export const FigmaImage: React.FC<FigmaImageProps> = ({src, ...props}) => {
+  // check for missing prop
+  if(src === undefined) throw new Error("src is required on FigmaImage component");
+  // get real image url
+  const realImageSrc = Images[src]
+  if (realImageSrc === undefined) throw new Error(`Image with src ${src} not found in FigmaImageSources.json`);
+  // return image component
+  return (<img src={realImageSrc} {...props}/>)
+}