mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 12:18:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

WIP storybook upgrade

Browse source
This commit is contained in:
Gabe Kangas 2024-04-11 20:41:22 -07:00
parent d939d9f43d
commit f424fe6dae
59 changed files with 1452 additions and 6686 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/.storybook/main.js
View file

@ -3,12 +3,7 @@ module.exports = {
previewMdx2: true,
},
stories: [
'../.storybook/stories-category-doc-pages/**/*.stories.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/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', '../pages/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
@ -98,6 +93,7 @@ module.exports = {
],
},
},
'@chromatic-com/storybook'
],
webpackFinal: async (config, { configType }) => {

4
web/.storybook/preview.js
View file

@ -71,11 +71,11 @@ export const parameters = {
fetchMock: {
mocks: [],
},
actions: { argTypesRegex: '^on[A-Z].*' },
// actions: { argTypesRegex: '^on[A-Z].*' },
docs: {
container: DocsContainer,
},
actions: { argTypesRegex: '^on[A-Z].*' },
// actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
controls: {
matchers: {

15
web/.storybook/stories-category-doc-pages/Design.stories.mdx → web/.storybook/stories-category-doc-pages/Design.mdx
View file

@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Owncast Design Guidelines & Resources
@ -23,8 +23,8 @@ Read the detailed [product definition](https://github.com/owncast/owncast/blob/d
**We encourage you to:**
- Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
- Check out our [Contributor Guide](https://owncast.online/help) and
* Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
* Check out our [Contributor Guide](https://owncast.online/help) and
[Code of Conduct](https://github.com/owncast/owncast/blob/develop/CODE_OF_CONDUCT.md)
## 🎭 Target audience
@ -36,9 +36,9 @@ Owncast is a live streaming and chat server targeted to anybody who has live str
Owncast is a constantly moving project with features both old and new. This allows for design contributions to be both big or small.
You may not know how much time you can dedicate to the project, or if you'll be able to see something through to the end, so be honest about that. Take on projects that you'll be able to see completed.
- So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
- If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
- Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
* So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
* If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
* Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
## 💅 Design relevant materials
@ -72,4 +72,3 @@ All design work is licensed under the
[MIT](https://mit-license.org/)
[(Back to top)](#-table-of-contents)

33
web/.storybook/stories-category-doc-pages/Development.stories.mdx → web/.storybook/stories-category-doc-pages/Development.mdx
View file

@ -1,26 +1,27 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
***
---
title: "How to work on Owncast"
description: The technical details for those wishing to take part in Owncast development.
tags:
[
development,
contribute,
open-source,
github,
git,
go,
react,
typescript,
contributing,
]
aliases: [/docs/building]
\[
development,
contribute,
open-source,
github,
git,
go,
react,
typescript,
contributing,
]
aliases: \[/docs/building]
type: toc
toc: true
---
---------
<meta http-equiv="refresh" content="0; url=https://owncast.dev/owncast/Development-e9dda43167c048968a308c4dadac66c4" />

390
web/.storybook/stories-category-doc-pages/Emoji.mdx Normal file
View file

@ -0,0 +1,390 @@
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Built-in Custom Emoji
## Blob
<a href="img/emoji/blob/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="ablobattention.gif">
<img src="img/emoji/blob/ablobattention.gif" />
</IconItem>
<IconItem name="ablobaww.gif">
<img src="img/emoji/blob/ablobaww.gif" />
</IconItem>
<IconItem name="ablobblewobble.gif">
<img src="img/emoji/blob/ablobblewobble.gif" />
</IconItem>
<IconItem name="ablobcheer.gif">
<img src="img/emoji/blob/ablobcheer.gif" />
</IconItem>
<IconItem name="ablobcry.gif">
<img src="img/emoji/blob/ablobcry.gif" />
</IconItem>
<IconItem name="ablobdancer.gif">
<img src="img/emoji/blob/ablobdancer.gif" />
</IconItem>
<IconItem name="ablobgift.gif">
<img src="img/emoji/blob/ablobgift.gif" />
</IconItem>
<IconItem name="ablobgiggle.gif">
<img src="img/emoji/blob/ablobgiggle.gif" />
</IconItem>
<IconItem name="ablobparty.gif">
<img src="img/emoji/blob/ablobparty.gif" />
</IconItem>
<IconItem name="ablobsleep.gif">
<img src="img/emoji/blob/ablobsleep.gif" />
</IconItem>
<IconItem name="ablobthinking.gif">
<img src="img/emoji/blob/ablobthinking.gif" />
</IconItem>
<IconItem name="ablobwave.gif">
<img src="img/emoji/blob/ablobwave.gif" />
</IconItem>
<IconItem name="blobangry.png">
<img src="img/emoji/blob/blobangry.png" />
</IconItem>
<IconItem name="blobaww.png">
<img src="img/emoji/blob/blobaww.png" />
</IconItem>
<IconItem name="blobdancer.png">
<img src="img/emoji/blob/blobdancer.png" />
</IconItem>
<IconItem name="blobjam.png">
<img src="img/emoji/blob/blobjam.png" />
</IconItem>
<IconItem name="blobscream.png">
<img src="img/emoji/blob/blobscream.png" />
</IconItem>
<IconItem name="blobthanks.png">
<img src="img/emoji/blob/blobthanks.png" />
</IconItem>
<IconItem name="blobthinking.png">
<img src="img/emoji/blob/blobthinking.png" />
</IconItem>
<IconItem name="blobwave.png">
<img src="img/emoji/blob/blobwave.png" />
</IconItem>
<IconItem name="blobyes.png">
<img src="img/emoji/blob/blobyes.png" />
</IconItem>
<IconItem name="blobyum.png">
<img src="img/emoji/blob/blobyum.png" />
</IconItem>
</IconGallery>
## Conigliolo96
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="conigliolo1.gif">
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
</IconItem>
<IconItem name="conigliolo15.gif">
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
</IconItem>
<IconItem name="conigliolo17.gif">
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
</IconItem>
<IconItem name="conigliolo21.gif">
<img src="img/emoji/conigliolo96/conigliolo21.gif" />
</IconItem>
<IconItem name="conigliolo25.gif">
<img src="img/emoji/conigliolo96/conigliolo25.gif" />
</IconItem>
<IconItem name="conigliolo28.gif">
<img src="img/emoji/conigliolo96/conigliolo28.gif" />
</IconItem>
</IconGallery>
## Dog
<a href="img/emoji/dog/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="img001.svg">
<img src="img/emoji/dog/img001.svg" />
</IconItem>
<IconItem name="img091.svg">
<img src="img/emoji/dog/img091.svg" />
</IconItem>
<IconItem name="img093.svg">
<img src="img/emoji/dog/img093.svg" />
</IconItem>
<IconItem name="img203.svg">
<img src="img/emoji/dog/img203.svg" />
</IconItem>
<IconItem name="img288.svg">
<img src="img/emoji/dog/img288.svg" />
</IconItem>
<IconItem name="img327.svg">
<img src="img/emoji/dog/img327.svg" />
</IconItem>
<IconItem name="img346.svg">
<img src="img/emoji/dog/img346.svg" />
</IconItem>
<IconItem name="img347.svg">
<img src="img/emoji/dog/img347.svg" />
</IconItem>
<IconItem name="img352.svg">
<img src="img/emoji/dog/img352.svg" />
</IconItem>
</IconGallery>
## Mutant
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="8_ball.svg">
<img src="img/emoji/mutant/8_ball.svg" />
</IconItem>
<IconItem name="alien.svg">
<img src="img/emoji/mutant/alien.svg" />
</IconItem>
<IconItem name="american_football.svg">
<img src="img/emoji/mutant/american_football.svg" />
</IconItem>
<IconItem name="arms_in_the_air.svg">
<img src="img/emoji/mutant/arms_in_the_air.svg" />
</IconItem>
<IconItem name="artist.svg">
<img src="img/emoji/mutant/artist.svg" />
</IconItem>
<IconItem name="astronaut.svg">
<img src="img/emoji/mutant/astronaut.svg" />
</IconItem>
<IconItem name="back_of_hand_clw.svg">
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
</IconItem>
<IconItem name="back_of_hand_hoof.svg">
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
</IconItem>
<IconItem name="back_of_hand_paw.svg">
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
</IconItem>
<IconItem name="baseball.svg">
<img src="img/emoji/mutant/baseball.svg" />
</IconItem>
<IconItem name="basketball.svg">
<img src="img/emoji/mutant/basketball.svg" />
</IconItem>
<IconItem name="blep.svg">
<img src="img/emoji/mutant/blep.svg" />
</IconItem>
<IconItem name="bow_b3.svg">
<img src="img/emoji/mutant/bow_b3.svg" />
</IconItem>
<IconItem name="cat_crying.svg">
<img src="img/emoji/mutant/cat_crying.svg" />
</IconItem>
<IconItem name="cat_devious.svg">
<img src="img/emoji/mutant/cat_devious.svg" />
</IconItem>
<IconItem name="cat_grin.svg">
<img src="img/emoji/mutant/cat_grin.svg" />
</IconItem>
<IconItem name="cat_heart_eyes.svg">
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
</IconItem>
<IconItem name="cat_joy.svg">
<img src="img/emoji/mutant/cat_joy.svg" />
</IconItem>
<IconItem name="cat_kiss.svg">
<img src="img/emoji/mutant/cat_kiss.svg" />
</IconItem>
<IconItem name="cat_pouting.svg">
<img src="img/emoji/mutant/cat_pouting.svg" />
</IconItem>
<IconItem name="cat_scream.svg">
<img src="img/emoji/mutant/cat_scream.svg" />
</IconItem>
<IconItem name="cat_smile.svg">
<img src="img/emoji/mutant/cat_smile.svg" />
</IconItem>
<IconItem name="chef.svg">
<img src="img/emoji/mutant/chef.svg" />
</IconItem>
<IconItem name="detective.svg">
<img src="img/emoji/mutant/detective.svg" />
</IconItem>
<IconItem name="ear.svg">
<img src="img/emoji/mutant/ear.svg" />
</IconItem>
<IconItem name="eye.svg">
<img src="img/emoji/mutant/eye.svg" />
</IconItem>
<IconItem name="eyes.svg">
<img src="img/emoji/mutant/eyes.svg" />
</IconItem>
<IconItem name="facepalm.svg">
<img src="img/emoji/mutant/facepalm.svg" />
</IconItem>
<IconItem name="football.svg">
<img src="img/emoji/mutant/football.svg" />
</IconItem>
<IconItem name="ghost.svg">
<img src="img/emoji/mutant/ghost.svg" />
</IconItem>
<IconItem name="grumpy_block.svg">
<img src="img/emoji/mutant/grumpy_block.svg" />
</IconItem>
<IconItem name="hot_shit.svg">
<img src="img/emoji/mutant/hot_shit.svg" />
</IconItem>
<IconItem name="jack_o_lantern.svg">
<img src="img/emoji/mutant/jack_o_lantern.svg" />
</IconItem>
<IconItem name="long_pointed_ear.svg">
<img src="img/emoji/mutant/long_pointed_ear.svg" />
</IconItem>
<IconItem name="mechanical_arm.svg">
<img src="img/emoji/mutant/mechanical_arm.svg" />
</IconItem>
<IconItem name="no_good.svg">
<img src="img/emoji/mutant/no_good.svg" />
</IconItem>
<IconItem name="office_worker.svg">
<img src="img/emoji/mutant/office_worker.svg" />
</IconItem>
<IconItem name="ok_gesture.svg">
<img src="img/emoji/mutant/ok_gesture.svg" />
</IconItem>
<IconItem name="person_frowning.svg">
<img src="img/emoji/mutant/person_frowning.svg" />
</IconItem>
<IconItem name="raising_hand.svg">
<img src="img/emoji/mutant/raising_hand.svg" />
</IconItem>
<IconItem name="robot.svg">
<img src="img/emoji/mutant/robot.svg" />
</IconItem>
<IconItem name="shrug.svg">
<img src="img/emoji/mutant/shrug.svg" />
</IconItem>
<IconItem name="singer.svg">
<img src="img/emoji/mutant/singer.svg" />
</IconItem>
<IconItem name="skull.svg">
<img src="img/emoji/mutant/skull.svg" />
</IconItem>
<IconItem name="skull_and_crossbones.svg">
<img src="img/emoji/mutant/skull_and_crossbones.svg" />
</IconItem>
<IconItem name="softball.svg">
<img src="img/emoji/mutant/softball.svg" />
</IconItem>
<IconItem name="student.svg">
<img src="img/emoji/mutant/student.svg" />
</IconItem>
<IconItem name="studio_microphone.svg">
<img src="img/emoji/mutant/studio_microphone.svg" />
</IconItem>
<IconItem name="technologist.svg">
<img src="img/emoji/mutant/technologist.svg" />
</IconItem>
<IconItem name="tennis.svg">
<img src="img/emoji/mutant/tennis.svg" />
</IconItem>
<IconItem name="volleyball.svg">
<img src="img/emoji/mutant/volleyball.svg" />
</IconItem>
</IconGallery>

312
web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
View file

@ -1,312 +0,0 @@
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 }}} />
# Built-in Custom Emoji
## Blob
<a href="img/emoji/blob/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="ablobattention.gif">
<img src="img/emoji/blob/ablobattention.gif" />
</IconItem>
<IconItem name="ablobaww.gif">
<img src="img/emoji/blob/ablobaww.gif" />
</IconItem>
<IconItem name="ablobblewobble.gif">
<img src="img/emoji/blob/ablobblewobble.gif" />
</IconItem>
<IconItem name="ablobcheer.gif">
<img src="img/emoji/blob/ablobcheer.gif" />
</IconItem>
<IconItem name="ablobcry.gif">
<img src="img/emoji/blob/ablobcry.gif" />
</IconItem>
<IconItem name="ablobdancer.gif">
<img src="img/emoji/blob/ablobdancer.gif" />
</IconItem>
<IconItem name="ablobgift.gif">
<img src="img/emoji/blob/ablobgift.gif" />
</IconItem>
<IconItem name="ablobgiggle.gif">
<img src="img/emoji/blob/ablobgiggle.gif" />
</IconItem>
<IconItem name="ablobparty.gif">
<img src="img/emoji/blob/ablobparty.gif" />
</IconItem>
<IconItem name="ablobsleep.gif">
<img src="img/emoji/blob/ablobsleep.gif" />
</IconItem>
<IconItem name="ablobthinking.gif">
<img src="img/emoji/blob/ablobthinking.gif" />
</IconItem>
<IconItem name="ablobwave.gif">
<img src="img/emoji/blob/ablobwave.gif" />
</IconItem>
<IconItem name="blobangry.png">
<img src="img/emoji/blob/blobangry.png" />
</IconItem>
<IconItem name="blobaww.png">
<img src="img/emoji/blob/blobaww.png" />
</IconItem>
<IconItem name="blobdancer.png">
<img src="img/emoji/blob/blobdancer.png" />
</IconItem>
<IconItem name="blobjam.png">
<img src="img/emoji/blob/blobjam.png" />
</IconItem>
<IconItem name="blobscream.png">
<img src="img/emoji/blob/blobscream.png" />
</IconItem>
<IconItem name="blobthanks.png">
<img src="img/emoji/blob/blobthanks.png" />
</IconItem>
<IconItem name="blobthinking.png">
<img src="img/emoji/blob/blobthinking.png" />
</IconItem>
<IconItem name="blobwave.png">
<img src="img/emoji/blob/blobwave.png" />
</IconItem>
<IconItem name="blobyes.png">
<img src="img/emoji/blob/blobyes.png" />
</IconItem>
<IconItem name="blobyum.png">
<img src="img/emoji/blob/blobyum.png" />
</IconItem>
</IconGallery>
## Conigliolo96
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="conigliolo1.gif">
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
</IconItem>
<IconItem name="conigliolo15.gif">
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
</IconItem>
<IconItem name="conigliolo17.gif">
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
</IconItem>
<IconItem name="conigliolo21.gif">
<img src="img/emoji/conigliolo96/conigliolo21.gif" />
</IconItem>
<IconItem name="conigliolo25.gif">
<img src="img/emoji/conigliolo96/conigliolo25.gif" />
</IconItem>
<IconItem name="conigliolo28.gif">
<img src="img/emoji/conigliolo96/conigliolo28.gif" />
</IconItem>
</IconGallery>
## Dog
<a href="img/emoji/dog/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="img001.svg">
<img src="img/emoji/dog/img001.svg" />
</IconItem>
<IconItem name="img091.svg">
<img src="img/emoji/dog/img091.svg" />
</IconItem>
<IconItem name="img093.svg">
<img src="img/emoji/dog/img093.svg" />
</IconItem>
<IconItem name="img203.svg">
<img src="img/emoji/dog/img203.svg" />
</IconItem>
<IconItem name="img288.svg">
<img src="img/emoji/dog/img288.svg" />
</IconItem>
<IconItem name="img327.svg">
<img src="img/emoji/dog/img327.svg" />
</IconItem>
<IconItem name="img346.svg">
<img src="img/emoji/dog/img346.svg" />
</IconItem>
<IconItem name="img347.svg">
<img src="img/emoji/dog/img347.svg" />
</IconItem>
<IconItem name="img352.svg">
<img src="img/emoji/dog/img352.svg" />
</IconItem>
</IconGallery>
## Mutant
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="8_ball.svg">
<img src="img/emoji/mutant/8_ball.svg" />
</IconItem>
<IconItem name="alien.svg">
<img src="img/emoji/mutant/alien.svg" />
</IconItem>
<IconItem name="american_football.svg">
<img src="img/emoji/mutant/american_football.svg" />
</IconItem>
<IconItem name="arms_in_the_air.svg">
<img src="img/emoji/mutant/arms_in_the_air.svg" />
</IconItem>
<IconItem name="artist.svg">
<img src="img/emoji/mutant/artist.svg" />
</IconItem>
<IconItem name="astronaut.svg">
<img src="img/emoji/mutant/astronaut.svg" />
</IconItem>
<IconItem name="back_of_hand_clw.svg">
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
</IconItem>
<IconItem name="back_of_hand_hoof.svg">
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
</IconItem>
<IconItem name="back_of_hand_paw.svg">
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
</IconItem>
<IconItem name="baseball.svg">
<img src="img/emoji/mutant/baseball.svg" />
</IconItem>
<IconItem name="basketball.svg">
<img src="img/emoji/mutant/basketball.svg" />
</IconItem>
<IconItem name="blep.svg">
<img src="img/emoji/mutant/blep.svg" />
</IconItem>
<IconItem name="bow_b3.svg">
<img src="img/emoji/mutant/bow_b3.svg" />
</IconItem>
<IconItem name="cat_crying.svg">
<img src="img/emoji/mutant/cat_crying.svg" />
</IconItem>
<IconItem name="cat_devious.svg">
<img src="img/emoji/mutant/cat_devious.svg" />
</IconItem>
<IconItem name="cat_grin.svg">
<img src="img/emoji/mutant/cat_grin.svg" />
</IconItem>
<IconItem name="cat_heart_eyes.svg">
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
</IconItem>
<IconItem name="cat_joy.svg">
<img src="img/emoji/mutant/cat_joy.svg" />
</IconItem>
<IconItem name="cat_kiss.svg">
<img src="img/emoji/mutant/cat_kiss.svg" />
</IconItem>
<IconItem name="cat_pouting.svg">
<img src="img/emoji/mutant/cat_pouting.svg" />
</IconItem>
<IconItem name="cat_scream.svg">
<img src="img/emoji/mutant/cat_scream.svg" />
</IconItem>
<IconItem name="cat_smile.svg">
<img src="img/emoji/mutant/cat_smile.svg" />
</IconItem>
<IconItem name="chef.svg">
<img src="img/emoji/mutant/chef.svg" />
</IconItem>
<IconItem name="detective.svg">
<img src="img/emoji/mutant/detective.svg" />
</IconItem>
<IconItem name="ear.svg">
<img src="img/emoji/mutant/ear.svg" />
</IconItem>
<IconItem name="eye.svg">
<img src="img/emoji/mutant/eye.svg" />
</IconItem>
<IconItem name="eyes.svg">
<img src="img/emoji/mutant/eyes.svg" />
</IconItem>
<IconItem name="facepalm.svg">
<img src="img/emoji/mutant/facepalm.svg" />
</IconItem>
<IconItem name="football.svg">
<img src="img/emoji/mutant/football.svg" />
</IconItem>
<IconItem name="ghost.svg">
<img src="img/emoji/mutant/ghost.svg" />
</IconItem>
<IconItem name="grumpy_block.svg">
<img src="img/emoji/mutant/grumpy_block.svg" />
</IconItem>
<IconItem name="hot_shit.svg">
<img src="img/emoji/mutant/hot_shit.svg" />
</IconItem>
<IconItem name="jack_o_lantern.svg">
<img src="img/emoji/mutant/jack_o_lantern.svg" />
</IconItem>
<IconItem name="long_pointed_ear.svg">
<img src="img/emoji/mutant/long_pointed_ear.svg" />
</IconItem>
<IconItem name="mechanical_arm.svg">
<img src="img/emoji/mutant/mechanical_arm.svg" />
</IconItem>
<IconItem name="no_good.svg">
<img src="img/emoji/mutant/no_good.svg" />
</IconItem>
<IconItem name="office_worker.svg">
<img src="img/emoji/mutant/office_worker.svg" />
</IconItem>
<IconItem name="ok_gesture.svg">
<img src="img/emoji/mutant/ok_gesture.svg" />
</IconItem>
<IconItem name="person_frowning.svg">
<img src="img/emoji/mutant/person_frowning.svg" />
</IconItem>
<IconItem name="raising_hand.svg">
<img src="img/emoji/mutant/raising_hand.svg" />
</IconItem>
<IconItem name="robot.svg">
<img src="img/emoji/mutant/robot.svg" />
</IconItem>
<IconItem name="shrug.svg">
<img src="img/emoji/mutant/shrug.svg" />
</IconItem>
<IconItem name="singer.svg">
<img src="img/emoji/mutant/singer.svg" />
</IconItem>
<IconItem name="skull.svg">
<img src="img/emoji/mutant/skull.svg" />
</IconItem>
<IconItem name="skull_and_crossbones.svg">
<img src="img/emoji/mutant/skull_and_crossbones.svg" />
</IconItem>
<IconItem name="softball.svg">
<img src="img/emoji/mutant/softball.svg" />
</IconItem>
<IconItem name="student.svg">
<img src="img/emoji/mutant/student.svg" />
</IconItem>
<IconItem name="studio_microphone.svg">
<img src="img/emoji/mutant/studio_microphone.svg" />
</IconItem>
<IconItem name="technologist.svg">
<img src="img/emoji/mutant/technologist.svg" />
</IconItem>
<IconItem name="tennis.svg">
<img src="img/emoji/mutant/tennis.svg" />
</IconItem>
<IconItem name="volleyball.svg">
<img src="img/emoji/mutant/volleyball.svg" />
</IconItem>
</IconGallery>

31
web/.storybook/stories-category-doc-pages/Images.mdx Normal file
View file

@ -0,0 +1,31 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Images
<IconGallery>
<IconItem name="fediverse-black.png">
<img src="img/fediverse-black.png" />
</IconItem>
<IconItem name="fediverse-color.png">
<img src="img/fediverse-color.png" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/follow.svg" />
</IconItem>
<IconItem name="indieauth.png">
<img src="img/indieauth.png" />
</IconItem>
<IconItem name="like.svg">
<img src="img/like.svg" />
</IconItem>
<IconItem name="repost.svg">
<img src="img/repost.svg" />
</IconItem>
</IconGallery>

27
web/.storybook/stories-category-doc-pages/Images.stories.mdx
View file

@ -1,27 +0,0 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Images
<IconGallery>
<IconItem name="fediverse-black.png">
<img src="img/fediverse-black.png" />
</IconItem>
<IconItem name="fediverse-color.png">
<img src="img/fediverse-color.png" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/follow.svg" />
</IconItem>
<IconItem name="indieauth.png">
<img src="img/indieauth.png" />
</IconItem>
<IconItem name="like.svg">
<img src="img/like.svg" />
</IconItem>
<IconItem name="repost.svg">
<img src="img/repost.svg" />
</IconItem>
</IconGallery>

13
web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx → web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
View file

@ -1,11 +1,12 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Project Assets/Logos &amp; Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
<Meta title="owncast/Project Assets/Logos & Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
# Logos &amp; Graphics
# Logos & Graphics
<ImageRow images={[
<ImageRow
images={[
{src: "project/header.png", name: "header.png"},
{src: "project/kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png", name: "kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png"},
{src: "project/logo-glare-outlined.png", name: "logo-glare-outlined.png"},
@ -16,5 +17,5 @@ import { Image, ImageRow } from './ImageAsset';
{src: "project/owncast-background.png", name: "owncast-background.png"},
{src: "project/owncast-browser-mobile.png", name: "owncast-browser-mobile.png"},
{src: "project/sticker-bigtech-alt.png", name: "sticker-bigtech-alt.png"},
]}/>
]}
/>

90
web/.storybook/stories-category-doc-pages/ProductDefinition.mdx Normal file
View file

@ -0,0 +1,90 @@
import { Canvas, Meta, Story } from '@storybook/blocks';
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Owncast Product Definition
## Why
By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
\[TOC]
## Vision
> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
## Primary Goals
* Useful out of the box.
* Fast to get running.
* Self-contained.
* An alternative, not a competitor.
* For individuals, not service providers.
* Easy to integrate into other projects/products.
* Low barrier to entry.
* Empowering.
* Customizable and hackable.
## Primary Users
### The DIY Streamer
An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
**Needs**:
* Security/ownership of their own stream.
* Building an independent space.
* Personalization.
* Tools to manage a relationship with their audience.
**Pains**:
* Kicked off other streaming services.
* Feeling of inequality or bias.
* Their content has low visibility.
* Platform rules do not align with them.
* Do not agree with the forced ads, tracking and analytics.
### The Integrator
An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
**Needs**:
* Broadcasting without censorship.
* Full ownership of their brand.
* Embedding and 3rd party playback.
* Support private or invite-only streams.
* Independence.
**Pains**:
* Censorship.
* Rules.
* Ads.
* Risk of losing viewers from competitors and distractions.
**Desires**:
* Hosting events.
* Running their own broadcasting service.
## Secondary Users
### The Viewer
An audience member that is often, but not always, taking part in chat.
**Needs**:
* To watch high quality video.
* Ways to interact with the streamer. Chat, memes, emoji.
* Calls to actions, links, next steps.
**Pains**:
* Understanding the interface and knowing they're in the correct place.

91
web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
View file

@ -1,91 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
# Owncast Product Definition
## Why
By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
[TOC]
## Vision
> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
## Primary Goals
- Useful out of the box.
- Fast to get running.
- Self-contained.
- An alternative, not a competitor.
- For individuals, not service providers.
- Easy to integrate into other projects/products.
- Low barrier to entry.
- Empowering.
- Customizable and hackable.
## Primary Users
### The DIY Streamer
An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
**Needs**:
- Security/ownership of their own stream.
- Building an independent space.
- Personalization.
- Tools to manage a relationship with their audience.
**Pains**:
- Kicked off other streaming services.
- Feeling of inequality or bias.
- Their content has low visibility.
- Platform rules do not align with them.
- Do not agree with the forced ads, tracking and analytics.
### The Integrator
An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
**Needs**:
- Broadcasting without censorship.
- Full ownership of their brand.
- Embedding and 3rd party playback.
- Support private or invite-only streams.
- Independence.
**Pains**:
- Censorship.
- Rules.
- Ads.
- Risk of losing viewers from competitors and distractions.
**Desires**:
- Hosting events.
- Running their own broadcasting service.
## Secondary Users
### The Viewer
An audience member that is often, but not always, taking part in chat.
**Needs**:
- To watch high quality video.
- Ways to interact with the streamer. Chat, memes, emoji.
- Calls to actions, links, next steps.
**Pains**:
- Understanding the interface and knowing they're in the correct place.

131
web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx Normal file
View file

@ -0,0 +1,131 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Social Platform Images
<IconGallery>
<IconItem name="bandcamp.svg">
<img src="img/platformlogos/bandcamp.svg" />
</IconItem>
<IconItem name="default.svg">
<img src="img/platformlogos/default.svg" />
</IconItem>
<IconItem name="discord.svg">
<img src="img/platformlogos/discord.svg" />
</IconItem>
<IconItem name="donate.svg">
<img src="img/platformlogos/donate.svg" />
</IconItem>
<IconItem name="facebook.svg">
<img src="img/platformlogos/facebook.svg" />
</IconItem>
<IconItem name="fediverse.svg">
<img src="img/platformlogos/fediverse.svg" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/platformlogos/follow.svg" />
</IconItem>
<IconItem name="github.svg">
<img src="img/platformlogos/github.svg" />
</IconItem>
<IconItem name="gitlab.svg">
<img src="img/platformlogos/gitlab.svg" />
</IconItem>
<IconItem name="google.svg">
<img src="img/platformlogos/google.svg" />
</IconItem>
<IconItem name="instagram.svg">
<img src="img/platformlogos/instagram.svg" />
</IconItem>
<IconItem name="keyoxide.png">
<img src="img/platformlogos/keyoxide.png" />
</IconItem>
<IconItem name="ko-fi.svg">
<img src="img/platformlogos/ko-fi.svg" />
</IconItem>
<IconItem name="lbry.svg">
<img src="img/platformlogos/lbry.svg" />
</IconItem>
<IconItem name="liberapay.svg">
<img src="img/platformlogos/liberapay.svg" />
</IconItem>
<IconItem name="link.svg">
<img src="img/platformlogos/link.svg" />
</IconItem>
<IconItem name="linkedin.svg">
<img src="img/platformlogos/linkedin.svg" />
</IconItem>
<IconItem name="mastodon.svg">
<img src="img/platformlogos/mastodon.svg" />
</IconItem>
<IconItem name="matrix.svg">
<img src="img/platformlogos/matrix.svg" />
</IconItem>
<IconItem name="odysee.svg">
<img src="img/platformlogos/odysee.svg" />
</IconItem>
<IconItem name="patreon.svg">
<img src="img/platformlogos/patreon.svg" />
</IconItem>
<IconItem name="paypal.svg">
<img src="img/platformlogos/paypal.svg" />
</IconItem>
<IconItem name="snapchat.svg">
<img src="img/platformlogos/snapchat.svg" />
</IconItem>
<IconItem name="soundcloud.svg">
<img src="img/platformlogos/soundcloud.svg" />
</IconItem>
<IconItem name="spotify.svg">
<img src="img/platformlogos/spotify.svg" />
</IconItem>
<IconItem name="steam.svg">
<img src="img/platformlogos/steam.svg" />
</IconItem>
<IconItem name="tiktok.svg">
<img src="img/platformlogos/tiktok.svg" />
</IconItem>
<IconItem name="twitch.svg">
<img src="img/platformlogos/twitch.svg" />
</IconItem>
<IconItem name="twitter.svg">
<img src="img/platformlogos/twitter.svg" />
</IconItem>
<IconItem name="xmpp.svg">
<img src="img/platformlogos/xmpp.svg" />
</IconItem>
<IconItem name="youtube.svg">
<img src="img/platformlogos/youtube.svg" />
</IconItem>
</IconGallery>

102
web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
View file

@ -1,102 +0,0 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Social Platform Images
<IconGallery>
<IconItem name="bandcamp.svg">
<img src="img/platformlogos/bandcamp.svg" />
</IconItem>
<IconItem name="default.svg">
<img src="img/platformlogos/default.svg" />
</IconItem>
<IconItem name="discord.svg">
<img src="img/platformlogos/discord.svg" />
</IconItem>
<IconItem name="donate.svg">
<img src="img/platformlogos/donate.svg" />
</IconItem>
<IconItem name="facebook.svg">
<img src="img/platformlogos/facebook.svg" />
</IconItem>
<IconItem name="fediverse.svg">
<img src="img/platformlogos/fediverse.svg" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/platformlogos/follow.svg" />
</IconItem>
<IconItem name="github.svg">
<img src="img/platformlogos/github.svg" />
</IconItem>
<IconItem name="gitlab.svg">
<img src="img/platformlogos/gitlab.svg" />
</IconItem>
<IconItem name="google.svg">
<img src="img/platformlogos/google.svg" />
</IconItem>
<IconItem name="instagram.svg">
<img src="img/platformlogos/instagram.svg" />
</IconItem>
<IconItem name="keyoxide.png">
<img src="img/platformlogos/keyoxide.png" />
</IconItem>
<IconItem name="ko-fi.svg">
<img src="img/platformlogos/ko-fi.svg" />
</IconItem>
<IconItem name="lbry.svg">
<img src="img/platformlogos/lbry.svg" />
</IconItem>
<IconItem name="liberapay.svg">
<img src="img/platformlogos/liberapay.svg" />
</IconItem>
<IconItem name="link.svg">
<img src="img/platformlogos/link.svg" />
</IconItem>
<IconItem name="linkedin.svg">
<img src="img/platformlogos/linkedin.svg" />
</IconItem>
<IconItem name="mastodon.svg">
<img src="img/platformlogos/mastodon.svg" />
</IconItem>
<IconItem name="matrix.svg">
<img src="img/platformlogos/matrix.svg" />
</IconItem>
<IconItem name="odysee.svg">
<img src="img/platformlogos/odysee.svg" />
</IconItem>
<IconItem name="patreon.svg">
<img src="img/platformlogos/patreon.svg" />
</IconItem>
<IconItem name="paypal.svg">
<img src="img/platformlogos/paypal.svg" />
</IconItem>
<IconItem name="snapchat.svg">
<img src="img/platformlogos/snapchat.svg" />
</IconItem>
<IconItem name="soundcloud.svg">
<img src="img/platformlogos/soundcloud.svg" />
</IconItem>
<IconItem name="spotify.svg">
<img src="img/platformlogos/spotify.svg" />
</IconItem>
<IconItem name="steam.svg">
<img src="img/platformlogos/steam.svg" />
</IconItem>
<IconItem name="tiktok.svg">
<img src="img/platformlogos/tiktok.svg" />
</IconItem>
<IconItem name="twitch.svg">
<img src="img/platformlogos/twitch.svg" />
</IconItem>
<IconItem name="twitter.svg">
<img src="img/platformlogos/twitter.svg" />
</IconItem>
<IconItem name="xmpp.svg">
<img src="img/platformlogos/xmpp.svg" />
</IconItem>
<IconItem name="youtube.svg">
<img src="img/platformlogos/youtube.svg" />
</IconItem>
</IconGallery>

9
web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx → web/.storybook/stories-category-doc-pages/Tshirt.mdx
View file

@ -1,11 +1,12 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Project Assets/T-Shirt" parameters={{chromatic: { disableSnapshot: true }}} />
# T-shirt
<ImageRow images={[
<ImageRow
images={[
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png"},
@ -19,5 +20,5 @@ import { Image, ImageRow } from './ImageAsset';
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png", name: "all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png", name: "all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png"},
]}/>
]}
/>

17
web/.storybook/stories-category-doc-pages/Typography.stories.mdx → web/.storybook/stories-category-doc-pages/Typography.mdx
View file

@ -1,4 +1,4 @@
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/blocks';
<Meta
title="owncast/Styles/Typography"
@ -14,7 +14,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
These are the font families in use by Owncast.
---
***
export const bodyFont = {
type: {
@ -63,12 +63,7 @@ export const bodyFont = {
## Usage
<Canvas
columns={2}
withSource="open"
withToolbar
style={{ fontFamily: 'var(--theme-text-body-font-family)' }}
>
<Canvas columns={2} withSource="open" withToolbar style={{ fontFamily: 'var(--theme-text-body-font-family)' }}>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
</Canvas>
@ -128,11 +123,7 @@ export const displayFont = {
## Usage
<Canvas
columns={2}
withSource="open"
withToolbarstyle={{ fontFamily: 'var(--theme-text-display-font-family)' }}
>
<Canvas columns={2} withSource="open" withToolbarstyle={{ fontFamily: 'var(--theme-text-display-font-family)' }}>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
</Canvas>

7
web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx → web/.storybook/stories-category-doc-pages/WebComponents.mdx
View file

@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# How we develop components
@ -64,7 +64,7 @@ export const MyNewButton: FC<MyNewButtonProps> = ({ label, onClick }) => {
### Rationale
Since there's a lot of ways to create components, settling on one pattern helps maintain readability.
But why _this_ style?
But why *this* style?
See the discussion on the PR that introduced this pattern: [#2082](https://github.com/owncast/owncast/pull/2082).
@ -101,4 +101,3 @@ We use [Storybook](https://storybook.js.org/) to create a component library wher
Make sure to include a `.stories.tsx` file with each (exported) component you create, and to update the stories file when making changes to existing components.
You can run the Storybook server locally with `npm run storybook`.

75
web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx → web/.storybook/stories-category-doc-pages/colors/ComponentColors.mdx
View file

@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
import { ColorRow, getColor } from './Color';
<Meta
@ -22,6 +22,7 @@ These are the specific colors used for components in the web application. They p
...getColor('theme-color-components-text-on-dark'),
}}
/>
<ColorItem
title="Primary Button"
subtitle=""
@ -32,9 +33,9 @@ These are the specific colors used for components in the web application. They p
...getColor('theme-color-components-primary-button-text-disabled'),
...getColor('theme-color-components-primary-button-border')
}}
/>
/>
<ColorItem
<ColorItem
title="Secondary Button"
subtitle=""
colors={{
@ -44,37 +45,40 @@ These are the specific colors used for components in the web application. They p
...getColor('theme-color-components-secondary-button-text-disabled'),
...getColor('theme-color-components-secondary-button-border'),
}}
/>
/>
<ColorItem
title="Chat"
subtitle=""
colors={{
<ColorItem
title="Chat"
subtitle=""
colors={{
...getColor('theme-color-components-chat-background'),
...getColor('theme-color-components-chat-text'),
}}
/>
<ColorItem
title="Modals"
subtitle=""
colors={{
/>
<ColorItem
title="Modals"
subtitle=""
colors={{
...getColor('theme-color-components-modal-header-background'),
...getColor('theme-color-components-modal-header-text'),
...getColor('theme-color-components-modal-content-background'),
...getColor('theme-color-components-modal-content-text'),
}}
/>
<ColorItem
title="Page Content"
subtitle="Tabbed content"
colors={{
/>
<ColorItem
title="Page Content"
subtitle="Tabbed content"
colors={{
...getColor('theme-color-components-content-background'),
}}
/>
<ColorItem
title="Menus"
subtitle=""
colors={{
/>
<ColorItem
title="Menus"
subtitle=""
colors={{
...getColor('theme-color-components-menu-background'),
...getColor('theme-color-components-menu-item-text'),
...getColor('theme-color-components-menu-item-bg'),
@ -82,25 +86,26 @@ These are the specific colors used for components in the web application. They p
...getColor('theme-color-components-menu-item-hover-bg'),
...getColor('theme-color-components-menu-item-focus-bg'),
}}
/>
<ColorItem
title="Form Fields"
subtitle=""
colors={{
/>
<ColorItem
title="Form Fields"
subtitle=""
colors={{
...getColor('theme-color-components-form-field-background'),
...getColor('theme-color-components-form-field-placeholder'),
...getColor('theme-color-components-form-field-text'),
...getColor('theme-color-components-menu-item-text'),
...getColor('theme-color-components-form-field-border'),
}}
/>
<ColorItem
title="Video Player Status Bar"
subtitle="Displays duration and viewer count."
colors={{
/>
<ColorItem
title="Video Player Status Bar"
subtitle="Displays duration and viewer count."
colors={{
...getColor('theme-color-components-video-status-bar-background'),
...getColor('theme-color-components-video-status-bar-foreground'),
}}
/>
/>
</ColorPalette>

8
web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx → web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.mdx
View file

@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/blocks';
import { ColorRow, getColor } from './Color';
<Meta
@ -8,6 +8,7 @@ import { ColorRow, getColor } from './Color';
chromatic: { disableSnapshot: true },
}}
/>
## 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.
@ -25,6 +26,7 @@ These are the colors used across the web application. All the specific component
...getColor('theme-color-palette-5'),
}}
/>
<ColorItem
colors={{
...getColor('theme-color-palette-6'),
@ -34,8 +36,7 @@ These are the colors used across the web application. All the specific component
...getColor('theme-color-palette-10'),
...getColor('theme-color-palette-11'),
}}
/>
/>
<ColorItem
colors={{
@ -47,6 +48,7 @@ These are the colors used across the web application. All the specific component
...getColor('theme-color-palette-warning'),
}}
/>
<ColorItem
colors={{
...getColor('theme-color-background-light'),

10
web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx → web/.storybook/stories-category-doc-pages/colors/UserColors.mdx
View file

@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
import { ColorRow, getColor } from './Color';
<Meta
@ -8,48 +8,56 @@ import { ColorRow, getColor } from './Color';
chromatic: { disableSnapshot: true },
}}
/>
## 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
title="User Color 1"
colors={{
...getColor('theme-color-users-1'),
}}
/>
<ColorItem
title="User Color 2"
colors={{
...getColor('theme-color-users-2'),
}}
/>
<ColorItem
title="User Color 3"
colors={{
...getColor('theme-color-users-3'),
}}
/>
<ColorItem
title="User Color 4"
colors={{
...getColor('theme-color-users-4'),
}}
/>
<ColorItem
title="User Color 5"
colors={{
...getColor('theme-color-users-5'),
}}
/>
<ColorItem
title="User Color 6"
colors={{
...getColor('theme-color-users-6'),
}}
/>
<ColorItem
title="User Color 7"
colors={{

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser-landscape.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/Android Landscape/Stock Browser',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-offline.png"
alt="Android Browser offline"
height="1000px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-online.png"
alt="Android Browser offline"
height="1000px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/Android Landscape/Stock Browser"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-offline.png"
alt="Android Browser offline"
height="1000px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-online.png"
alt="Android Browser offline"
height="1000px"
/>
</Story>

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser-portrait.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/Android Portrait/Stock Browser',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
alt="Android Browser offline"
height="1000px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
alt="Android Browser offline"
height="1000px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/Android Portrait/Stock Browser"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
alt="Android Browser offline"
height="1000px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
alt="Android Browser offline"
height="1000px"
/>
</Story>

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/iPad Landscape/Safari',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="macOS Safari offline"
width="800px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="macOS Safari online"
width="800px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/iPad Landscape/Safari"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="macOS Safari offline"
width="800px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="macOS Safari online"
width="800px"
/>
</Story>

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/iPad Portrait/Safari',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
alt="macOS Safari offline"
width="800px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
alt="macOS Safari online"
width="800px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/iPad Portrait/Safari"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
alt="macOS Safari offline"
width="800px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
alt="macOS Safari online"
width="800px"
/>
</Story>

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/iPhone/Safari/Landscape',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="iPhone Safari offline"
height="1000px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="iPhone Safari online"
height="1000px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/iPhone/Safari/Landscape"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="iPhone Safari offline"
height="1000px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="iPhone Safari online"
height="1000px"
/>
</Story>

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

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/iPhone/Safari/Portrait',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="iPhone Safari offline"
height="1000px"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="iPhone Safari online"
height="1000px"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/iPhone/Safari/Portrait"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
alt="iPhone Safari offline"
height="1000px"
/>
</Story>
<Story name="Online">
<img
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
alt="iPhone Safari online"
height="1000px"
/>
</Story>

8
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.mdx Normal file
View file

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/macOS/Chrome',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
alt="macOS Chrome offline"
width="100%"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
alt="macOS Chrome online"
width="100%"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/macOS/Chrome"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
alt="macOS Chrome offline"
width="100%"
/>
</Story>
<Story name="Online">
<img
src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
alt="macOS Chrome online"
width="100%"
/>
</Story>

8
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.mdx Normal file
View file

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/macOS/Firefox',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
alt="macOS Chrome offline"
width="100%"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
alt="macOS Chrome online"
width="100%"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/macOS/Firefox"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
alt="macOS Chrome offline"
width="100%"
/>
</Story>
<Story name="Online">
<img
src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
alt="macOS Chrome online"
width="100%"
/>
</Story>

8
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.mdx Normal file
View file

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/macOS/Safari',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
alt="macOS Safari offline"
width="100%"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/os-x-ventura-safari-desktop-default-online.png"
alt="macOS Safari online"
width="100%"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/macOS/Safari"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
alt="macOS Safari offline"
width="100%"
/>
</Story>
<Story name="Online">
<img
src="screenshots/os-x-ventura-safari-desktop-default-online.png"
alt="macOS Safari online"
width="100%"
/>
</Story>

8
web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.mdx Normal file
View file

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/Windows/Chrome',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/windows-11-chrome-desktop-default-offline.png"
alt="Windows Chrome offline"
width="100%"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/windows-11-chrome-desktop-default-online.png"
alt="Windows Chrome online"
width="100%"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/Windows/Chrome"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/windows-11-chrome-desktop-default-offline.png"
alt="Windows Chrome offline"
width="100%"
/>
</Story>
<Story name="Online">
<img
src="screenshots/windows-11-chrome-desktop-default-online.png"
alt="Windows Chrome online"
width="100%"
/>
</Story>

8
web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.mdx Normal file
View file

@ -0,0 +1,8 @@
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} />

33
web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.stories.js Normal file
View file

@ -0,0 +1,33 @@
export default {
title: 'owncast/Screenshots/Windows/Firefox',
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
export const Offline = {
render: () => (
<img
src="screenshots/windows-10-firefox-desktop-default-offline.png"
alt="Windows Firefox offline"
width="100%"
/>
),
name: 'Offline',
};
export const Online = {
render: () => (
<img
src="screenshots/windows-10-firefox-desktop-default-online.png"
alt="Windows Firefox online"
width="100%"
/>
),
name: 'Online',
};

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

@ -1,26 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta
title="owncast/Screenshots/Windows/Firefox"
parameters={{ chromatic: { disableSnapshot: true } }}
/>
<Story name="Offline">
<img
src="screenshots/windows-10-firefox-desktop-default-offline.png"
alt="Windows Firefox offline"
width="100%"
/>
</Story>
<Story name="Online">
<img
src="screenshots/windows-10-firefox-desktop-default-online.png"
alt="Windows Firefox online"
width="100%"
/>
</Story>

0
web/.storybook/tools/Document.stories.mdx → web/.storybook/tools/Document.stories.mdx.broken
View file

0
web/.storybook/tools/Emoji.stories.mdx → web/.storybook/tools/Emoji.stories.mdx.broken
View file

0
web/.storybook/tools/Images.stories.mdx → web/.storybook/tools/Images.stories.mdx.broken
View file

0
web/.storybook/tools/ImagesLarge.stories.mdx → web/.storybook/tools/ImagesLarge.stories.mdx.broken
View file

21
web/doctor-storybook.log Normal file
View file

@ -0,0 +1,21 @@
🩺 The doctor is checking the health of your Storybook..
╭ Incompatible packages found ───────────────────────────────────────────────────╮
│ │
│ The following packages are incompatible with Storybook 8.0.8 as they │
│ depend on different major versions of Storybook packages: │
│ - @storybook/addon-postcss@2.0.0 │
│ - @storybook/addon-styling-webpack@0.0.6 │
│ │
│ │
│ Please consider updating your packages or contacting the maintainers for │
│ compatibility details. │
│ For more on Storybook 8 compatibility, see the linked GitHub issue: │
│ https://github.com/storybookjs/storybook/issues/26031 │
│ │
╰────────────────────────────────────────────────────────────────────────────────╯
You can always recheck the health of your project by running:
npx storybook doctor
Full logs are available in /home/gabek/src/webv2-merge/owncast/web/doctor-storybook.log

6003
web/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
web/package.json
View file

@ -26,8 +26,8 @@
"@fontsource/inter": "^5.0.0",
"@fontsource/poppins": "5.1.0",
"@next/bundle-analyzer": "^14.0.0",
"@uiw/codemirror-theme-bbedit": "4.23.5",
"@uiw/react-codemirror": "4.23.5",
"@uiw/codemirror-theme-bbedit": "4.23.4",
"@uiw/react-codemirror": "4.23.4",
"@xstate/react": "3.2.2",
"antd": "4.24.16",
"autoprefixer": "^10.4.14",