Upgrade Storybook@9, [email protected], [email protected] LTS (#1357)

Brings Storybook to 9.x which has a lot of improvements we could be utilizing, but also one further for other upgrades. Also remove dead, unused Figma extension.

```
Storybook 9 improves performance, compatibility, and stability. Its key features include:

    🔋 Storybook Test, a batteries-included testing tool in your Storybook
    🧪 Component testing
    ♿️ Accessibility testing
    🛡️ Test coverage
    🪶 48% lighter bundle
    ⚛️ React Native for device and web
    🏷️ Tags-based story organization
```

Also upgrades to the latest LTS Node and Yarn releases (I have a matching update for the RS after this is cut at 7.0)

Fixes js-yaml dependabots
* https://github.com/user-interviews/ui-design-system/security/dependabot/138
* https://github.com/user-interviews/ui-design-system/security/dependabot/139
* https://github.com/user-interviews/ui-design-system/security/dependabot/140

Author: jeffbax

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 *.mp4
 /DS/.idea
 /junit.xml
+/debug-storybook.log

.node-version

@@ -1 +1 @@
-22.14.0
+24.11.1

.storybook/main.js

@@ -7,7 +7,7 @@ const config = {
         configFile: true
       }
     }
-  }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-webpack5-compiler-babel', ({
+  }, '@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-webpack5-compiler-babel', ({
     name: "@storybook/addon-styling-webpack",
 
     options: {
@@ -28,8 +28,7 @@ const config = {
     }
   })],
   docs: {
-    autodocs: true,
-    defaultName: 'Docs',
+    defaultName: 'Docs'
   },
   stories: [
     '../stories/Intro.stories.jsx',

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 import userInterviewsTheme from './user-interviews-theme';
 

.storybook/preview.js

@@ -11,35 +11,46 @@ const preview = {
       </div>
     ),
   ],
+
   parameters: {
     backgrounds: {
-      default: '--ux-white',
-      values: [
-        {
+      options: {
+        "--ux-white": {
           name: '--ux-white',
           value: colors.UX_WHITE,
         },
-        {
+
+        "--ux-cream": {
           name: '--ux-cream',
           value: colors.UX_CREAM,
         },
-        {
+
+        "--ux-emerald-600": {
           name: '--ux-emerald-600',
           value: colors.UX_EMERALD_600,
         },
-        {
+
+        "--ux-neutral-800": {
           name: '--ux-neutral-800',
           value: colors.UX_NEUTRAL_800,
         }
-      ],
+      }
     },
     options: {
       storySort: {
         method: 'alphabetical',
         order: ['Foundations', 'Components'],
       },
     },
-  }
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: '--ux-white'
+    }
+  },
+
+  tags: ['autodocs']
 };
 
 export default preview;

.storybook/user-interviews-theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 import UILogo from '../public/ui-design-system-light.svg';
 
 export default create({