Storybook 8 fixes (#3937)

* Add globs for auto-generated CSF screenshot stories to main.js

* Remove unneeded mdx files for screenshots

* Glob for stories.js instead of just js files in the doc pages directory

* Might as well update it to 8.3 while we're at it

* Update knip config file to make it happy

* Fix linter warning

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/.knip.json

@@ -16,68 +16,35 @@
 	"ignoreDependencies": [
 		"@fontsource/inter",
 		"@fontsource/poppins",
-		"@next/bundle-analyzer",
-		"autoprefixer",
 		"yaml",
-		"postcss-flexbugs-fixes",
 		"sharp",
-		"next-with-less",
-		"next-pwa",
 		"workbox-precaching",
 		"workbox-window",
-		"@storybook/addon-a11y",
-		"@storybook/addon-actions",
-		"@storybook/addon-docs",
-		"@storybook/addon-essentials",
-		"@storybook/addon-links",
-		"@storybook/addon-postcss",
-		"@storybook/addon-viewport",
-		"@storybook/cli",
-		"@storybook/mdx2-csf",
-		"@storybook/preset-scss",
 		"@mdx-js/react",
-		"@storybook/testing-library",
 		"@svgr/webpack",
 		"@types/jest",
 		"@types/markdown-it",
 		"@types/prop-types",
-		"@typescript-eslint/eslint-plugin",
-		"@typescript-eslint/parser",
 		"babel-loader",
 		"chromatic",
-		"css-loader",
 		"cypress",
-		"eslint-config-airbnb",
-		"eslint-config-next",
-		"eslint-config-prettier",
-		"eslint-plugin-import",
-		"eslint-plugin-jsx-a11y",
-		"eslint-plugin-prettier",
-		"eslint-plugin-react",
-		"eslint-plugin-react-hooks",
-		"eslint-plugin-storybook",
 		"handlebars",
 		"html-webpack-plugin",
 		"install",
-		"less",
-		"less-loader",
 		"mdx-mermaid",
 		"mermaid",
-		"sass-loader",
 		"sb",
-		"storybook-addon-fetch-mock",
 		"storybook-preset-less",
-		"style-loader",
 		"ts-jest",
 		"stylelint-config-standard",
 		"postcss",
 		"stylelint",
 		"@babel/core",
-		"@storybook/addon-mdx-gfm",
+		"npm",
-		"@storybook/addon-styling-webpack",
+		"eslint-config-next",
-		"@storybook/nextjs",
+		"@storybook/addon-postcss",
-		"@storybook/react",
+		"@storybook/blocks",
-		"resolve-url-loader",
+		"@storybook/mdx2-csf",
-		"i18next-scanner"
+		"@storybook/cli"
 	]
 }

web/.storybook/main.js

@@ -3,7 +3,7 @@ module.exports = {
     previewMdx2: true,
   },
 
-  stories: ['../.storybook/stories-category-doc-pages/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', '../pages/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../.storybook/stories-category-doc-pages/**/*.@(mdx|stories.js)', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', '../pages/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -117,7 +117,5 @@ module.exports = {
 
   staticDirs: ['../public', '../../static', './story-assets'],
 
-  docs: {
+  docs: {},
-    autodocs: false,
-  },
 };

web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser-landscape.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsAndroidStockBrowserLandscapeStories from './Screenshots-android-stock-browser-landscape.stories';
-
-<Meta of={ScreenshotsAndroidStockBrowserLandscapeStories} />
-
-<Story of={ScreenshotsAndroidStockBrowserLandscapeStories.Offline} />
-
-<Story of={ScreenshotsAndroidStockBrowserLandscapeStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser-portrait.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsAndroidStockBrowserPortraitStories from './Screenshots-android-stock-browser-portrait.stories';
-
-<Meta of={ScreenshotsAndroidStockBrowserPortraitStories} />
-
-<Story of={ScreenshotsAndroidStockBrowserPortraitStories.Offline} />
-
-<Story of={ScreenshotsAndroidStockBrowserPortraitStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsIPadLandscapeSafariStories from './Screenshots-iPad-landscape-safari.stories';
-
-<Meta of={ScreenshotsIPadLandscapeSafariStories} />
-
-<Story of={ScreenshotsIPadLandscapeSafariStories.Offline} />
-
-<Story of={ScreenshotsIPadLandscapeSafariStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsIPadPortraitSafariStories from './Screenshots-iPad-portrait-safari.stories';
-
-<Meta of={ScreenshotsIPadPortraitSafariStories} />
-
-<Story of={ScreenshotsIPadPortraitSafariStories.Offline} />
-
-<Story of={ScreenshotsIPadPortraitSafariStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsIPhoneSafariLandscapeStories from './Screenshots-iPhone-safari-landscape.stories';
-
-<Meta of={ScreenshotsIPhoneSafariLandscapeStories} />
-
-<Story of={ScreenshotsIPhoneSafariLandscapeStories.Offline} />
-
-<Story of={ScreenshotsIPhoneSafariLandscapeStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsIPhoneSafariPortraitStories from './Screenshots-iPhone-safari-portrait.stories';
-
-<Meta of={ScreenshotsIPhoneSafariPortraitStories} />
-
-<Story of={ScreenshotsIPhoneSafariPortraitStories.Offline} />
-
-<Story of={ScreenshotsIPhoneSafariPortraitStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsMacOsChromeStories from './Screenshots-macOS-chrome.stories';
-
-<Meta of={ScreenshotsMacOsChromeStories} />
-
-<Story of={ScreenshotsMacOsChromeStories.Offline} />
-
-<Story of={ScreenshotsMacOsChromeStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsMacOsFirefoxStories from './Screenshots-macOS-firefox.stories';
-
-<Meta of={ScreenshotsMacOsFirefoxStories} />
-
-<Story of={ScreenshotsMacOsFirefoxStories.Offline} />
-
-<Story of={ScreenshotsMacOsFirefoxStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsMacOsSafariStories from './Screenshots-macOS-safari.stories';
-
-<Meta of={ScreenshotsMacOsSafariStories} />
-
-<Story of={ScreenshotsMacOsSafariStories.Offline} />
-
-<Story of={ScreenshotsMacOsSafariStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsWindowsChromeStories from './Screenshots-windows-chrome.stories';
-
-<Meta of={ScreenshotsWindowsChromeStories} />
-
-<Story of={ScreenshotsWindowsChromeStories.Offline} />
-
-<Story of={ScreenshotsWindowsChromeStories.Online} />

web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as ScreenshotsWindowsFirefoxStories from './Screenshots-windows-firefox.stories';
-
-<Meta of={ScreenshotsWindowsFirefoxStories} />
-
-<Story of={ScreenshotsWindowsFirefoxStories.Offline} />
-
-<Story of={ScreenshotsWindowsFirefoxStories.Online} />

web/components/ui/OfflineEmbed/OfflineEmbed.tsx

@@ -94,7 +94,7 @@ export const OfflineEmbed: FC<OfflineEmbedProps> = ({
         <Spin spinning={loading}>
           <div className={styles.content}>
             <div className={styles.heading}>This stream is not currently live.</div>
-            <div className={styles.message} dangerouslySetInnerHTML={{ __html: subtitle }}></div>
+            <div className={styles.message} dangerouslySetInnerHTML={{ __html: subtitle }} />
 
             <div className={styles.pageLogo} style={{ backgroundImage: `url(${image})` }} />
             <div className={styles.pageName}>{streamName}</div>

web/package.json

@@ -23,7 +23,7 @@
     "@fontsource/inter": "^5.0.0",
     "@fontsource/poppins": "5.0.13",
     "@next/bundle-analyzer": "^14.0.0",
-    "@storybook/test": "^8.0.8",
+    "@storybook/test": "^8.3.3",
     "@uiw/codemirror-theme-bbedit": "4.21.25",
     "@uiw/react-codemirror": "4.21.25",
     "@xstate/react": "3.2.2",
@@ -62,23 +62,24 @@
   },
   "devDependencies": {
     "@babel/core": "7.24.4",
-    "@chromatic-com/storybook": "^1.3.2",
+    "@chromatic-com/storybook": "^2.0.2",
     "@mdx-js/react": "3.0.1",
-    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-a11y": "^8.3.3",
-    "@storybook/addon-actions": "^8.0.8",
+    "@storybook/addon-actions": "^8.3.3",
-    "@storybook/addon-docs": "^8.0.8",
+    "@storybook/addon-docs": "^8.3.3",
-    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-links": "^8.3.3",
-    "@storybook/addon-mdx-gfm": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.3.3",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling-webpack": "^0.0.6",
+    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-viewport": "^8.0.8",
+    "@storybook/addon-viewport": "^8.3.3",
-    "@storybook/blocks": "^8.0.8",
+    "@storybook/blocks": "^8.3.3",
-    "@storybook/cli": "^8.0.8",
+    "@storybook/cli": "^8.3.3",
     "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/nextjs": "^8.0.8",
+    "@storybook/nextjs": "^8.3.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.0.8",
+    "@storybook/react": "^8.3.3",
+    "@storybook/theming": "^8.3.3",
     "@svgr/webpack": "8.1.0",
     "@types/chart.js": "2.9.41",
     "@types/classnames": "2.3.1",
@@ -106,7 +107,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "handlebars": "^4.7.7",
     "html-webpack-plugin": "5.6.0",
     "install": "^0.13.0",
@@ -121,8 +122,8 @@
     "resolve-url-loader": "^5.0.0",
     "sass": "1.74.1",
     "sass-loader": "^14.0.0",
-    "storybook": "^8.0.8",
+    "storybook": "^8.3.3",
-    "storybook-addon-fetch-mock": "1.0.1",
+    "storybook-addon-fetch-mock": "^2.0.1",
     "storybook-preset-less": "1.1.3",
     "style-dictionary": "3.9.2",
     "style-loader": "3.3.4",