From ab8c2279e3d16898da9edd44063b0c0f9e006ca6 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 25 Oct 2023 21:39:19 -0700
Subject: [PATCH] fix(storybook): update stories to support mdx2

---
 web/.knip.json                                   |  8 +++++++-
 web/.storybook/main.js                           | 16 +---------------
 .../stories-category-doc-pages/Emoji.stories.mdx | 14 +-------------
 .../colors/ComponentColors.stories.mdx           |  6 +-----
 .../colors/OwncastColorPalette.stories.mdx       |  5 -----
 .../colors/UserColors.stories.mdx                |  7 +------
 .../BasicInfrastructureExamples.stories.mdx      | 15 +--------------
 .../CDN+S3InfrastructureExamples.stories.mdx     |  6 +-----
 .../CDNInfrastructureExamples.stories.mdx        |  5 +----
 .../S3InfrastructureExamples.stories.mdx         |  5 +----
 web/.storybook/tools/Emoji.stories.mdx           |  5 +----
 11 files changed, 16 insertions(+), 76 deletions(-)

diff --git a/web/.knip.json b/web/.knip.json
index 168139382..14699af16 100644
--- a/web/.knip.json
+++ b/web/.knip.json
@@ -75,6 +75,12 @@
 		"stylelint-config-standard",
 		"stylelint-config-standard-scss",
 		"postcss",
-		"stylelint"
+		"stylelint",
+		"@babel/core",
+		"@storybook/addon-mdx-gfm",
+		"@storybook/addon-styling-webpack",
+		"@storybook/nextjs",
+		"@storybook/react",
+		"resolve-url-loader",
 	]
 }
\ No newline at end of file
diff --git a/web/.storybook/main.js b/web/.storybook/main.js
index add1d485b..4806267cc 100644
--- a/web/.storybook/main.js
+++ b/web/.storybook/main.js
@@ -110,20 +110,6 @@ module.exports = {
       use: ['@svgr/webpack'],
     });
 
-    // config.module.rules.push({
-    //   test: /\.less$/,
-    //   use: [
-    //     require.resolve('style-loader'),
-    //     require.resolve('css-loader'),
-    //     {
-    //       loader: require.resolve('less-loader'),
-    //       options: {
-    //         lessOptions: { javascriptEnabled: true },
-    //       },
-    //     },
-    //   ],
-    // });
-
     return config;
   },
 
@@ -135,6 +121,6 @@ module.exports = {
   staticDirs: ['../public', '../../static', './story-assets'],
 
   docs: {
-    autodocs: true,
+    autodocs: false,
   },
 };
diff --git a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
index c3874b988..b2b6ae433 100644
--- a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
 import { Image, ImageRow } from './ImageAsset';
 
 <Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
@@ -6,14 +6,11 @@ import { Image, ImageRow } from './ImageAsset';
 # Built-in Custom Emoji
 
 
-<Description
-  markdown={`
 ## Blob
 
 <a href="img/emoji/blob/LICENSE.md" target="_blank">
   LICENSE
 </a>
-`} />
 
     <IconGallery>
     			<IconItem name="ablobattention.gif">
@@ -85,14 +82,11 @@ import { Image, ImageRow } from './ImageAsset';
     	</IconGallery>
 
 
-<Description
-  markdown={`
 ## Conigliolo96
 
 <a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
   LICENSE
 </a>
-`} />
 
     <IconGallery>
     			<IconItem name="conigliolo1.gif">
@@ -116,14 +110,11 @@ import { Image, ImageRow } from './ImageAsset';
     	</IconGallery>
 
 
-<Description
-  markdown={`
 ## Dog
 
 <a href="img/emoji/dog/LICENSE.md" target="_blank">
   LICENSE
 </a>
-`} />
 
     <IconGallery>
     			<IconItem name="img001.svg">
@@ -156,14 +147,11 @@ import { Image, ImageRow } from './ImageAsset';
     	</IconGallery>
 
 
-<Description
-  markdown={`
 ## Mutant
 
 <a href="img/emoji/mutant/LICENSE.md" target="_blank">
   LICENSE
 </a>
-`} />
 
     <IconGallery>
     			<IconItem name="8_ball.svg">
diff --git a/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
index 5ef40e736..b8c4e058e 100644
--- a/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
 import { ColorRow, getColor } from './Color';
 
 <Meta
@@ -9,14 +9,10 @@ import { ColorRow, getColor } from './Color';
   }}
 />
 
-<Description markdown={`
-  
 ## Component Colors
 
 These are the specific colors used for components in the web application. They point to colors in the Owncast color palette but CSS variable names can be overwritten for customizing the theme.
 
-`}/>
-
 <ColorPalette>
   <ColorItem
     title="Text"
diff --git a/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
index ffde7464c..532700917 100644
--- a/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
@@ -8,15 +8,10 @@ import { ColorRow, getColor } from './Color';
     chromatic: { disableSnapshot: true },
   }}
 />
-
-<Description markdown={`
-  
 ## Theme Color Palette
 
 These are the colors used across the web application. All the specific component colors point to colors in this palette. If you override one of these colors all usage of that color will be updated.
 
-`}/>
-
 <ColorPalette>
   <ColorItem
     title="Theme color palette"
diff --git a/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
index 120f17ab0..550a9bc58 100644
--- a/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
 import { ColorRow, getColor } from './Color';
 
 <Meta
@@ -8,15 +8,10 @@ import { ColorRow, getColor } from './Color';
     chromatic: { disableSnapshot: true },
   }}
 />
-
-<Description markdown={`
-  
 ## User Colors
 
 These are the colors available for assigning to chat users for display purposes. The CSS variables can be overwritten for customizing the theme.
 
-`}/>
-
 <ColorPalette>
   <ColorItem title="User Color 0" colors={{ ...getColor('theme-color-users-0') }} />
   <ColorItem
diff --git a/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
index fe1150998..bc42fdf4b 100644
--- a/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
@@ -1,5 +1,5 @@
 import { Mermaid } from 'mdx-mermaid/Mermaid';
-import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title="owncast/Documentation/Infrastructure Examples/Basic Example"
@@ -9,12 +9,9 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
   }}
 />
 
-<Description
-  markdown={`
 ## Basic
 
 This is the most basic Owncast setup and is what you get when you run it without any additional services.
-`} />
 
 <Mermaid
   chart={`graph TD
@@ -34,13 +31,10 @@ This is the most basic Owncast setup and is what you get when you run it without
 `}
 />
 
-<Description
-  markdown={`
 ## S3 Object Storage
 
 If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
 Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
-`} />
 
 <Mermaid
   chart={`graph TD
@@ -74,15 +68,11 @@ Instead of video players pulling the stream from your Owncast server it would in
 `}
 />
 
-<Description
-  markdown={`
 ## CDN in front of S3 Object Storage
 
 If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
 This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
 
-`} />
-
 <Mermaid
   chart={`flowchart TD
     subgraph Video Assets
@@ -119,12 +109,9 @@ This leads to not only your server not serving any video traffic, but the video
 `}
 />
 
-<Description
-  markdown={`
 ## CDN in front of Owncast
 
 If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
-`} />
 
 <Mermaid
   chart={`flowchart TD
diff --git a/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
index 97b44f7ea..5e8344ea3 100644
--- a/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
@@ -1,5 +1,5 @@
 import { Mermaid } from 'mdx-mermaid/Mermaid';
-import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title="owncast/Documentation/Infrastructure Examples/S3 With CDN Example"
@@ -9,15 +9,11 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
   }}
 />
 
-<Description
-  markdown={`
 ## CDN in front of S3 Object Storage
 
 If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
 This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
 
-`} />
-
 <Mermaid
   chart={`flowchart TD
     subgraph Video Assets
diff --git a/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
index 28a298ddb..0bd15e4fb 100644
--- a/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
@@ -1,5 +1,5 @@
 import { Mermaid } from 'mdx-mermaid/Mermaid';
-import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title="owncast/Documentation/Infrastructure Examples/CDN Example"
@@ -9,12 +9,9 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
   }}
 />
 
-<Description
-  markdown={`
 ## CDN in front of Owncast
 
 If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
-`} />
 
 <Mermaid
   chart={`flowchart TD
diff --git a/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
index 34a9da1c9..42ca3eae6 100644
--- a/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
@@ -1,5 +1,5 @@
 import { Mermaid } from 'mdx-mermaid/Mermaid';
-import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title="owncast/Documentation/Infrastructure Examples/S3 Example"
@@ -9,13 +9,10 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
   }}
 />
 
-<Description
-  markdown={`
 ## S3 Object Storage
 
 If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
 Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
-`} />
 
 <Mermaid
   chart={`graph TD
diff --git a/web/.storybook/tools/Emoji.stories.mdx b/web/.storybook/tools/Emoji.stories.mdx
index 25633ebf6..3fed96e53 100644
--- a/web/.storybook/tools/Emoji.stories.mdx
+++ b/web/.storybook/tools/Emoji.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
 import { Image, ImageRow } from './ImageAsset';
 
 <Meta title="owncast/Frontend Assets/Emoji" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
@@ -7,14 +7,11 @@ import { Image, ImageRow } from './ImageAsset';
 
 {{#each emojiCollections}}
 
-<Description
-  markdown={`
 ## {{capitalize this.name}}
 
 <a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
   LICENSE
 </a>
-`} />
 
     <IconGallery>
     		{{#each images}}