fix(chromatic): generate webpack-stats.json with vite (#229)

Chromatic's TurboSnap feature has been failing for awhile now, or perhaps never worked correctly? This small PR dug around to figure out why, and it looks like it's a problem with the creation of the `preview-stats.json` file. The passed command line option `--webpack-stats-json` to `build-storybook` in the `package.json` appears to be correct for webpack not vite. This PR uses [Chromatic's recommended plugin](https://www.chromatic.com/docs/turbosnap/#github-pullrequest-triggers:~:text=(for%20experimental%20Vite,)) `vite-plugin-turbosnap` to create the stats file. Take a look at the screenshots and commits for a history of attempted solutions.

Resolves issue #219 

## Changes

- removes dead code `--webpack-stats-json` from `build-storybook`
- add and configure `vite-plugin-turbosnap`

## How to test this PR

This PR fixes the turbosnap configuration, but it still needs to run again with these updated deps to do diffs. I'm not sure if this is the only fix required, but it's definitely a start.

1. Does Chromatic no longer error due to a [missing webpack-stats.json file](https://github.com/cfpb/design-system-react/actions/runs/6720471476/job/18264108900#step:5:120)? Should now only be stating that it is [disabled due to deps changes](https://github.com/cfpb/design-system-react/actions/runs/6726430803/job/18282666371#step:5:57).

## Screenshots

*Before Fix*: errors in GitHub action due to missing `webpack-stats.json file`
<img width="681" alt="Screenshot 2023-11-01 at 6 11 37 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/e4b09cf9-8cd3-44a1-bf33-09713d751134">

*Before Fix*: error in parsing file locally even [when forcing `webpack-stats.json` file](c5f38b3) via `WebpackStats()` in vite. Error persists [after name change](b490e65). Parsing error tracked down to the fact that Chromatic expects a different format for the file than what vite normally produces.
<img width="1073" alt="Screenshot 2023-11-01 at 8 12 08 AM" src="https://github.com/cfpb/design-system-react/assets/19983248/b8c35327-757b-466c-b3cd-27b82c572f61">

*After Fix*: Configured the plugin, and TurboSnap is ready to go!

<img width="833" alt="Screenshot 2023-11-01 at 6 20 00 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/f83dcaff-3de5-4d5d-b08b-7f3b66abcdc0">

.storybook/main.js

@@ -1,3 +1,5 @@
+import turbosnap from 'vite-plugin-turbosnap';
+
 module.exports = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../src/assets/'],
@@ -27,6 +29,13 @@ module.exports = {
       plugin => plugin.name !== 'vite:dts'
     );
 
+    // load Chromatic's recommended vite plugin for dist builds to create preview-stats.json
+    config.plugins = config.plugins.concat(
+      turbosnap({
+        rootDir: config.root ?? process.cwd()
+      })
+    );
+
     // return the customized config
     return config;
   }

package.json

@@ -41,7 +41,7 @@
     "validate": "run-p lint test:ci test:e2e:headless",
     "start": "yarn storybook",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o dist-storybook --webpack-stats-json",
+    "build-storybook": "storybook build -o dist-storybook",
     "chromatic": "chromatic --storybook-build-dir dist-storybook --only-changed"
   },
   "dependencies": {
@@ -125,6 +125,7 @@
     "vite-plugin-dts": "^2.2.0",
     "vite-plugin-pwa": "^0.14.7",
     "vite-plugin-react-remove-attributes": "^1.0.3",
+    "vite-plugin-turbosnap": "^1.0.3",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "3.5.2",
     "vitest": "0.25.2",

yarn.lock

@@ -7944,6 +7944,7 @@ __metadata:
     vite-plugin-dts: ^2.2.0
     vite-plugin-pwa: ^0.14.7
     vite-plugin-react-remove-attributes: ^1.0.3
+    vite-plugin-turbosnap: ^1.0.3
     vite-svg-loader: ^4.0.0
     vite-tsconfig-paths: 3.5.2
     vitest: 0.25.2
@@ -16791,6 +16792,13 @@ display-element-css@cfpb/storybook-addon-display-element-css:
   languageName: node
   linkType: hard
 
+"vite-plugin-turbosnap@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "vite-plugin-turbosnap@npm:1.0.3"
+  checksum: a66d09ecafef293e78a2bfceed133c3436556f8407c55be2796b5ed6ff6f80a85e1961e67382aa4e3a971f03fa33d7ee318706acc5a6c289bb7ce6a1a49293bc
+  languageName: node
+  linkType: hard
+
 "vite-svg-loader@npm:^4.0.0":
   version: 4.0.0
   resolution: "vite-svg-loader@npm:4.0.0"