Storybook builds deployed to github pages don't display USWDS images

[rocketnova]

I deployed #89 to WIC MT Demo Project in order to get our storybook deployed using github pages. I just found an issue where the images weren't displaying properly and made a PR for it: navapbc/wic-mt-demo-project-eligibility-screener#168

See also Slack discussion: https://nava.slack.com/archives/C03G1SWD9H7/p1669820652173809

I deployed the template's storybook to github pages to see if the issue is also in the template: https://github.com/navapbc/template-application-nextjs/actions/runs/3633298101. However, the template's storybook doesn't use any components that rely on USWDS css, so I'm still troubleshooting.

[rocketnova]

Ok I inspected the generated github action artifact and confirmed that we are currently correctly prepending the BASE_PATH to any relative paths in storybook that begin with url(/. However, USWDS also uses this syntax url("/ and our regex doesn't catch that.

[sawyerh]

Similar image issue reported by @brandon-lent:

I seemed to have stumbled on another issue here, where storybook wouldn’t render certain images from USWDS. I think it has to do with the next.js Image component’s automatic optimization, but I’m not 100%.

In order to render certain images, (ex: us_flag_small.png), I needed to pass the unoptimized attribute to the next image component.

I applied the fix Rocket suggested, but it still appears that it didn’t work for the the image issues I’ve had.
I did find a fix for this, which is to override the Next image component in the .storybook/preview.js file as such which adds the unoptimized prop:

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />
})

I’ve attached an image of a banner component with the US Flag where the one that was able to be rendered was with the unoptimized prop.