From d5c0d250840dea34e28b953d55823a759bfcc011 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 14 Feb 2023 17:03:10 -0800 Subject: [PATCH] Refactor component stories to be documents to reduce story snapshots --- .../Design.stories.mdx | 2 +- .../Development.stories.mdx | 2 +- .../Emoji.stories.mdx | 428 ++++++++++++------ .../Images.stories.mdx | 33 +- .../ProductDefinition.stories.mdx | 2 +- .../SocialPlatformImages.stories.mdx | 133 ++++-- .../WebComponents.stories.mdx | 2 +- .../BasicInfrastructureExamples.stories.mdx} | 38 +- .../CDN+S3InfrastructureExamples.stories.mdx | 55 +++ .../CDNInfrastructureExamples.stories.mdx | 45 ++ .../S3InfrastructureExamples.stories.mdx | 50 ++ web/.storybook/tools/Document.stories.mdx | 2 +- web/.storybook/tools/Emoji.stories.mdx | 30 +- web/.storybook/tools/Images.stories.mdx | 17 +- web/.storybook/tools/ImagesLarge.stories.mdx | 12 + web/.storybook/tools/generate-image-story.mjs | 4 +- web/.storybook/tools/generate-stories.sh | 4 +- 17 files changed, 641 insertions(+), 218 deletions(-) rename web/.storybook/stories-category-doc-pages/{InfrastructureExamples.stories.mdx => examples/BasicInfrastructureExamples.stories.mdx} (89%) create mode 100644 web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx create mode 100644 web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx create mode 100644 web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx create mode 100644 web/.storybook/tools/ImagesLarge.stories.mdx diff --git a/web/.storybook/stories-category-doc-pages/Design.stories.mdx b/web/.storybook/stories-category-doc-pages/Design.stories.mdx index ca5b63b67..d8985f12a 100644 --- a/web/.storybook/stories-category-doc-pages/Design.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Design.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + # Owncast Design Guidelines & Resources diff --git a/web/.storybook/stories-category-doc-pages/Development.stories.mdx b/web/.storybook/stories-category-doc-pages/Development.stories.mdx index e2776cae6..df8413b9b 100644 --- a/web/.storybook/stories-category-doc-pages/Development.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Development.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + --- title: "How to work on Owncast" diff --git a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx index 9cc3721af..c3874b988 100644 --- a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx @@ -1,148 +1,324 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs'; import { Image, ImageRow } from './ImageAsset'; - + # Built-in Custom Emoji + - - LICENSE - - - + + LICENSE + +`} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - LICENSE - - - + + LICENSE + +`} /> + + + + + + + + + + + + + + + + + + + + + + - - LICENSE - - - + + LICENSE + +`} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - LICENSE - - - + + LICENSE + +`} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/.storybook/stories-category-doc-pages/Images.stories.mdx b/web/.storybook/stories-category-doc-pages/Images.stories.mdx index 736a3fa20..dcf0efdc7 100644 --- a/web/.storybook/stories-category-doc-pages/Images.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Images.stories.mdx @@ -1,16 +1,27 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Image, ImageRow } from './ImageAsset'; +import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs'; - + # Images - + + + + + + + + + + + + + + + + + + + + diff --git a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx b/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx index 02dfa27bc..956af1841 100644 --- a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + # Owncast Product Definition diff --git a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx index 9f18b5a45..7fcdd02f1 100644 --- a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx @@ -1,41 +1,102 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Image, ImageRow } from './ImageAsset'; +import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs'; - + # Social Platform Images - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx index e97c9732b..beeb45a1d 100644 --- a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + # How we develop components diff --git a/web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx similarity index 89% rename from web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx rename to web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx index 68b32c4e3..fe1150998 100644 --- a/web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx @@ -1,14 +1,20 @@ import { Mermaid } from 'mdx-mermaid/Mermaid'; -import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Canvas, Meta, Story, Description } from '@storybook/addon-docs'; - + - - - + - - - + + - - - + - - 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 new file mode 100644 index 000000000..97b44f7ea --- /dev/null +++ b/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx @@ -0,0 +1,55 @@ +import { Mermaid } from 'mdx-mermaid/Mermaid'; +import { Canvas, Meta, Story, Description } from '@storybook/addon-docs'; + + + + + +S3 + Owncast--Web-->WebPlayer + Owncast<--Chat-->WebPlayer + Owncast--Web-->Embeds + + CDN--Download\\nVideo-->WebPlayer + CDN--Download\\nVideo-->Embeds + CDN--Download\\nVideo-->MobileApps + CDN--Download\\nVideo-->SmartTV + CDN--Download\\nVideo-->VLC + + S3 --- CDN + +`} +/> diff --git a/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx new file mode 100644 index 000000000..28a298ddb --- /dev/null +++ b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx @@ -0,0 +1,45 @@ +import { Mermaid } from 'mdx-mermaid/Mermaid'; +import { Canvas, Meta, Story, Description } from '@storybook/addon-docs'; + + + + + +WebPlayer + Owncast<--Chat-->WebPlayer + CDN--Web-->Embeds + + CDN--Download\\nVideo-->WebPlayer + CDN--Download\\nVideo-->Embeds + CDN--Download\\nVideo-->MobileApps + CDN--Download\\nVideo-->SmartTV + CDN--Download\\nVideo-->VLC + + CDN --- Owncast + +`} +/> diff --git a/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx new file mode 100644 index 000000000..34a9da1c9 --- /dev/null +++ b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx @@ -0,0 +1,50 @@ +import { Mermaid } from 'mdx-mermaid/Mermaid'; +import { Canvas, Meta, Story, Description } from '@storybook/addon-docs'; + + + + + +S3 + + subgraph Video Assets + S3[fa:fa-hard-drive S3 Object Storage] + end + + subgraph Clients + WebPlayer[fa:fa-window-maximize Web App] + Embeds[fa:fa-window-restore Embeds] + MobileApps[fa:fa-mobile-screen Mobile Apps] + SmartTV[fa:fa-tv Smart TV] + VLC[fa:fa-shapes VLC] + end + + Owncast--Web-->WebPlayer + Owncast--Web-->Embeds + Owncast<--Chat-->WebPlayer + S3--Download\\nVideo-->WebPlayer + S3--Download\\nVideo-->Embeds + S3--Download\\nVideo-->MobileApps + S3--Download\\nVideo-->SmartTV + S3--Download\\nVideo-->VLC + +`} +/> diff --git a/web/.storybook/tools/Document.stories.mdx b/web/.storybook/tools/Document.stories.mdx index 1186c7e45..21cec82df 100644 --- a/web/.storybook/tools/Document.stories.mdx +++ b/web/.storybook/tools/Document.stories.mdx @@ -1,5 +1,5 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + {{content}} diff --git a/web/.storybook/tools/Emoji.stories.mdx b/web/.storybook/tools/Emoji.stories.mdx index c0c969d21..25633ebf6 100644 --- a/web/.storybook/tools/Emoji.stories.mdx +++ b/web/.storybook/tools/Emoji.stories.mdx @@ -1,25 +1,27 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs'; import { Image, ImageRow } from './ImageAsset'; - + # Built-in Custom Emoji {{#each emojiCollections}} + - - LICENSE - - - + + LICENSE + +`} /> + + + {{#each images}} + + + + {{/each}} + {{/each}} diff --git a/web/.storybook/tools/Images.stories.mdx b/web/.storybook/tools/Images.stories.mdx index ad6a60b03..c0a986954 100644 --- a/web/.storybook/tools/Images.stories.mdx +++ b/web/.storybook/tools/Images.stories.mdx @@ -1,12 +1,13 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Image, ImageRow } from './ImageAsset'; +import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs'; - + # {{capitalize title}} - + + {{#each images}} + + + + {{/each}} + diff --git a/web/.storybook/tools/ImagesLarge.stories.mdx b/web/.storybook/tools/ImagesLarge.stories.mdx new file mode 100644 index 000000000..ad6a60b03 --- /dev/null +++ b/web/.storybook/tools/ImagesLarge.stories.mdx @@ -0,0 +1,12 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Image, ImageRow } from './ImageAsset'; + + + +# {{capitalize title}} + + diff --git a/web/.storybook/tools/generate-image-story.mjs b/web/.storybook/tools/generate-image-story.mjs index a3280b831..d58a45144 100644 --- a/web/.storybook/tools/generate-image-story.mjs +++ b/web/.storybook/tools/generate-image-story.mjs @@ -13,6 +13,7 @@ const dir = args[2]; const title = args[3]; const category = args[4]; const publicPath = args[5]; +const useLarge = args[6]; if (args.length < 6) { console.error('Usage: generate-image-story.mjs <category> <webpublicpath>'); @@ -30,7 +31,8 @@ const images = readdirSync(dir) }) .filter(Boolean); -const template = fs.readFileSync('./Images.stories.mdx', 'utf8'); +const templateFile = useLarge ? './ImagesLarge.stories.mdx' : './Images.stories.mdx'; +const template = fs.readFileSync(templateFile, 'utf8'); let t = handlebars.compile(template); let output = t({ images, title, category }); console.log(output); diff --git a/web/.storybook/tools/generate-stories.sh b/web/.storybook/tools/generate-stories.sh index 96949a2ce..845fed1ba 100755 --- a/web/.storybook/tools/generate-stories.sh +++ b/web/.storybook/tools/generate-stories.sh @@ -13,5 +13,5 @@ node generate-document-stories.mjs node generate-image-story.mjs ../../public/img/ Images "owncast/Frontend Assets/Images" "img" >../stories-category-doc-pages/Images.stories.mdx node generate-image-story.mjs ../../public/img/platformlogos/ "Social Platform Images" "owncast/Frontend Assets/Social Platform Images" "img/platformlogos" >../stories-category-doc-pages/SocialPlatformImages.stories.mdx -node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "project" >../stories-category-doc-pages/LogosAndGraphics.stories.mdx -node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" >../stories-category-doc-pages/Tshirt.stories.mdx +node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "project" --large >../stories-category-doc-pages/LogosAndGraphics.stories.mdx +node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" --large >../stories-category-doc-pages/Tshirt.stories.mdx