LogalDeveloper/owncast
0
Fork 0
Code Activity

Refactor component stories to be documents to reduce story snapshots

Browse Source
This commit is contained in:
Gabe Kangas
2023-02-14 17:03:10 -08:00
parent 566369837c
commit d5c0d25084
17 changed files with 641 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/.storybook/tools/Document.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/{{title}}" parameters=\{{chromatic: { disableSnapshot: true }}}/>
<Meta title="owncast/Documentation/{{title}}" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
{{content}}

30
web/.storybook/tools/Emoji.stories.mdx
View File

@@ -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';
<Meta title="owncast/Frontend Assets/Emoji" parameters=\{{chromatic: { disableSnapshot: true }}} />
<Meta title="owncast/Frontend Assets/Emoji" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Built-in Custom Emoji
{{#each emojiCollections}}
<Description
markdown={`
## {{capitalize this.name}}
<Story
name="{{capitalize this.name}}"
>
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{{#each this.images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>
</Story>
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<IconGallery>
{{#each images}}
<IconItem name="{{this.name}}">
<img src="{{this.src}}" />
</IconItem>
{{/each}}
</IconGallery>
{{/each}}

17
web/.storybook/tools/Images.stories.mdx
View File

@@ -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';
<Meta title="{{category}}" parameters=\{{chromatic: { disableSnapshot: true }}} />
<Meta title="{{category}}" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# {{capitalize title}}
<ImageRow images={[
{{#each images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>
<IconGallery>
{{#each images}}
<IconItem name="{{this.name}}">
<img src="{{this.src}}" />
</IconItem>
{{/each}}
</IconGallery>

12
web/.storybook/tools/ImagesLarge.stories.mdx Normal file
View File

@@ -0,0 +1,12 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="{{category}}" parameters=\{{chromatic: { disableSnapshot: true }}} />
# {{capitalize title}}
<ImageRow images={[
{{#each images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>

4
web/.storybook/tools/generate-image-story.mjs
View File

@@ -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 <dir> <title> <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);

4
web/.storybook/tools/generate-stories.sh
View File

@@ -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