feat: serve Storybook avatar images from local static directory

.gitignore

@@ -19,6 +19,8 @@ node_modules
 
 # Gatsby
 public/
+# Allow Storybook's static assets directory
+!packages/react/.storybook/public/
 
 # Storybook
 storybook-static

e2e/test-helpers/storybook.ts

@@ -59,11 +59,6 @@ async function visit(page: Page, options: Options) {
     url.searchParams.set('globals', params)
   }
 
-  /** Mock live avatar urls to make them stable for visual diffing (vrt) */
-  await page.route('https://github.com/*.png', async route => {
-    await route.continue({url: 'https://github.com/primer.png'})
-  })
-
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
   await page.waitForSelector('#storybook-root > *', {state: 'attached'})

packages/react/.storybook/main.ts

@@ -1,4 +1,5 @@
 // This file has been automatically migrated to valid ESM format by Storybook.
+import {fileURLToPath} from 'node:url'
 import {createRequire} from 'node:module'
 import path from 'node:path'
 import react from '@vitejs/plugin-react'
@@ -11,6 +12,8 @@ const require = createRequire(import.meta.url)
 const {DEPLOY_ENV = 'development'} = process.env
 
 const config: StorybookConfig = {
+  staticDirs: [path.join(path.dirname(fileURLToPath(import.meta.url)), 'public')],
+
   stories:
     DEPLOY_ENV === 'development'
       ? ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -201,7 +201,7 @@ export const ActionbarToggle = () => {
     <div className={classes.ActionBarToggleContainer}>
       <div className={classes.ActionBarToggleTop}>
         <div>
-          <Avatar src={`https://github.com/${loginName}.png`} size={30} />
+          <Avatar src={`/avatars/${loginName}.png`} size={30} />
           <Text as="strong" className={classes.ActionBarToggleUser}>
             {loginName}
           </Text>

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -55,7 +55,7 @@ export const GroupWithSubtleTitleOldAPI = () => {
               onSelect={() => toggleAssignee(user)}
             >
               <ActionList.LeadingVisual>
-                <Avatar src={`https://github.com/${user.login}.png`} />
+                <Avatar src={`/avatars/${user.login}.png`} />
               </ActionList.LeadingVisual>
               {user.login}
               <ActionList.Description>{user.name}</ActionList.Description>
@@ -95,7 +95,7 @@ export const GroupWithFilledTitleOldAPI = () => {
               onSelect={() => toggleAssignee(user)}
             >
               <ActionList.LeadingVisual>
-                <Avatar src={`https://github.com/${user.login}.png`} />
+                <Avatar src={`/avatars/${user.login}.png`} />
               </ActionList.LeadingVisual>
               {user.login}
               <ActionList.Description>{user.name}</ActionList.Description>

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -194,7 +194,7 @@ export const WithAvatars = () => (
     {users.map(user => (
       <ActionList.Item key={user.login}>
         <ActionList.LeadingVisual>
-          <Avatar src={`https://github.com/${user.login}.png`} />
+          <Avatar src={`/avatars/${user.login}.png`} />
         </ActionList.LeadingVisual>
         {user.login}
       </ActionList.Item>
@@ -225,7 +225,7 @@ export const InlineDescription = () => (
     {users.map(user => (
       <ActionList.Item key={user.login}>
         <ActionList.LeadingVisual>
-          <Avatar src={`https://github.com/${user.login}.png`} />
+          <Avatar src={`/avatars/${user.login}.png`} />
         </ActionList.LeadingVisual>
         {user.login}
         <ActionList.Description>{user.name}</ActionList.Description>
@@ -239,7 +239,7 @@ export const BlockDescription = () => (
     {users.map(user => (
       <ActionList.Item key={user.login}>
         <ActionList.LeadingVisual>
-          <Avatar src={`https://github.com/${user.login}.png`} />
+          <Avatar src={`/avatars/${user.login}.png`} />
         </ActionList.LeadingVisual>
         {user.login}
         <ActionList.Description variant="block">{user.name}</ActionList.Description>
@@ -644,9 +644,9 @@ export const ConditionalChildren = () => {
         <ActionList.Item key={index}>
           <ActionList.LeadingVisual>
             {reviewer.type === 'team' ? (
-              <Avatar src={`https://avatars.githubusercontent.com/t/${reviewer.id}`} />
+              <Avatar src={`/avatars/t-${reviewer.id!}.png`} />
             ) : (
-              <Avatar src={`https://avatars.githubusercontent.com/${reviewer.login}`} />
+              <Avatar src={`/avatars/${reviewer.login!}.png`} />
             )}
           </ActionList.LeadingVisual>
           {reviewer.login || reviewer.slug}
@@ -687,7 +687,7 @@ export const ChildWithSideEffects = () => {
     <ActionList selectionVariant="multiple" role="listbox" aria-label="Assignees">
       <ActionList.Item selected={selected} onSelect={() => setSelected(!selected)} role="option">
         <ActionList.LeadingVisual>
-          <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />
+          <Avatar src={`/avatars/${user.login}.png`} />
         </ActionList.LeadingVisual>
         {user.login}
         <ActionList.Description>
@@ -758,7 +758,7 @@ export const GroupWithSubtleTitle = () => {
             onSelect={() => toggleAssignee(user)}
           >
             <ActionList.LeadingVisual>
-              <Avatar src={`https://github.com/${user.login}.png`} />
+              <Avatar src={`/avatars/${user.login}.png`} />
             </ActionList.LeadingVisual>
             {user.login}
             <ActionList.Description>{user.name}</ActionList.Description>
@@ -792,7 +792,7 @@ export const GroupWithFilledTitle = () => {
             onSelect={() => toggleAssignee(user)}
           >
             <ActionList.LeadingVisual>
-              <Avatar src={`https://github.com/${user.login}.png`} />
+              <Avatar src={`/avatars/${user.login}.png`} />
             </ActionList.LeadingVisual>
             {user.login}
             <ActionList.Description>{user.name}</ActionList.Description>

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

@@ -21,7 +21,7 @@ export default {
 const hoverCard = (
   <Stack gap="condensed" style={{padding: '16px'}}>
     <Stack direction="horizontal" gap="condensed" justify="space-between">
-      <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" size={48} />
+      <Avatar src="/avatars/mona.png" size={48} />
       <Button size="small">Follow</Button>
     </Stack>
     <Stack direction="horizontal" gap="none">

packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx

@@ -18,7 +18,7 @@ export default {
 const hoverCard = (
   <Stack gap="condensed" style={{padding: '16px'}}>
     <Stack direction="horizontal" gap="condensed" justify="space-between">
-      <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" size={48} />
+      <Avatar src="/avatars/mona.png" size={48} />
       <Button size="small">Follow</Button>
     </Stack>
     <Stack direction="horizontal" gap="none">

packages/react/src/Avatar/Avatar.features.stories.tsx

@@ -6,76 +6,36 @@ export default {
   component: Avatar,
 } as Meta<typeof Avatar>
 
-export const Square = () => <Avatar square alt="primer" src="https://avatars.githubusercontent.com/primer" />
+export const Square = () => <Avatar square alt="primer" src="/avatars/primer.png" />
 
 export const Size = () => (
   <div>
-    <Avatar size={4} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={8} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={12} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={16} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={20} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={24} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={28} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={32} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={40} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={48} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={56} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar size={64} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+    <Avatar size={4} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={8} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={12} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={16} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={20} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={24} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={28} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={32} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={40} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={48} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={56} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={64} alt="mona" src="/avatars/mona.png" />
   </div>
 )
 
 export const SizeResponsive = () => (
   <div>
-    <Avatar
-      size={{narrow: 4, regular: 8, wide: 12}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 8, regular: 12, wide: 16}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 12, regular: 16, wide: 20}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 16, regular: 20, wide: 24}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 20, regular: 24, wide: 28}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 24, regular: 28, wide: 32}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 28, regular: 32, wide: 40}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 32, regular: 40, wide: 48}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 40, regular: 48, wide: 56}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
-    <Avatar
-      size={{narrow: 48, regular: 56, wide: 64}}
-      alt="mona"
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-    />
+    <Avatar size={{narrow: 4, regular: 8, wide: 12}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 8, regular: 12, wide: 16}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 12, regular: 16, wide: 20}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 16, regular: 20, wide: 24}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 20, regular: 24, wide: 28}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 24, regular: 28, wide: 32}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 28, regular: 32, wide: 40}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 32, regular: 40, wide: 48}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 40, regular: 48, wide: 56}} alt="mona" src="/avatars/mona.png" />
+    <Avatar size={{narrow: 48, regular: 56, wide: 64}} alt="mona" src="/avatars/mona.png" />
   </div>
 )

packages/react/src/Avatar/Avatar.stories.tsx

@@ -15,17 +15,10 @@ type Args = {
   sizeAtWide?: number
 } & Omit<AvatarProps, 'size'>
 
-export const Default = () => <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+export const Default = () => <Avatar src="/avatars/mona.png" />
 
 export const Playground: StoryFn<Args> = args => {
-  return (
-    <Avatar
-      size={parseSizeFromArgs(args)}
-      square={args.square}
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-      alt="mona"
-    />
-  )
+  return <Avatar size={parseSizeFromArgs(args)} square={args.square} src="/avatars/mona.png" alt="mona" />
 }
 
 Playground.args = {

packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx

@@ -11,16 +11,16 @@ export default {
 export const WithLinkWrappers = () => (
   <AvatarStack>
     <Link aria-label="Primer is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
-      <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+      <Avatar alt="Primer logo" src="/avatars/primer.png" />
     </Link>
     <Link aria-label="GitHub is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
-      <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+      <Avatar alt="GitHub logo" src="/avatars/github.png" />
     </Link>
     <Link aria-label="Atom is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
-      <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+      <Avatar alt="Atom logo" src="/avatars/atom.png" />
     </Link>
     <Link aria-label="GitHub Desktop is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
-      <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+      <Avatar alt="GitHub Desktop logo" src="/avatars/desktop.png" />
     </Link>
   </AvatarStack>
 )