@@ -11,7 +12,23 @@ const Example = () => (
export default {
title: 'owncast/Modals/Follow',
component: FollowModal,
- parameters: {},
+ parameters: {
+ design: {
+ type: 'image',
+ url: FollowModalMock,
+ scale: 0.5,
+ },
+ docs: {
+ description: {
+ component: `The Follow modal allows an end user to type in their Fediverse account information to follow this Owncast instance. It must:
+
+- Validate the input to make sure it's a valid looking account.
+- Handle errors that come back from the server.
+- Perform the redirect to the remote server when the backend response is received.
+`,
+ },
+ },
+ },
} as ComponentMeta
;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/stories/IndieAuthModal.stories.tsx b/web/stories/IndieAuthModal.stories.tsx
index 660ea0c4b..6b46d12bd 100644
--- a/web/stories/IndieAuthModal.stories.tsx
+++ b/web/stories/IndieAuthModal.stories.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import IndieAuthModal from '../components/modals/IndieAuthModal';
+import Mock from './assets/mocks/indieauth-modal.png';
const Example = () => (
@@ -11,7 +12,13 @@ const Example = () => (
export default {
title: 'owncast/Modals/IndieAuth',
component: IndieAuthModal,
- parameters: {},
+ parameters: {
+ design: {
+ type: 'image',
+ url: Mock,
+ scale: 0.5,
+ },
+ },
} as ComponentMeta;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/stories/Introduction.stories.mdx b/web/stories/Introduction.stories.mdx
index c5ccf1305..3ddec11d7 100644
--- a/web/stories/Introduction.stories.mdx
+++ b/web/stories/Introduction.stories.mdx
@@ -16,6 +16,7 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
- Address feedback from users.
- Better accessibility.
- Better mobile experience.
+- Updated [design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=528%3A18).
- Standardize styling across the project by using a single design language and style guide.
- Allows more people to contribute to the project if we use popular frameworks.
@@ -25,6 +26,21 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
- [React](https://reactjs.org/)
- [Ant Design](https://ant.design/)
+
+## Contributing
+
+1. Find a component that hasn't yet been worked on by looking through the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18)
+and the sidebar of components to the left.
+1. See if you can have an example of this functionality in action via the [Owncast Demo Server](https://watch.owncast.online) or [Owncast Nightly Build](https://nightly.owncast.online) so you know how it's supposed to work if it's interactive.
+1. Visit the `Docs` tab to read any specific documentation that may have been written about how this component works.
+1. Go to the `Canvas` tab of the component you selected and see if there's a Design attached to it.
+1. If there is a design, then that's a starting point you can use to start building out the component.
+1. If there isn't, then visit the [Owncast Demo Server](https://watch.owncast.online), the [Owncast Nightly Build](https://nightly.owncast.online), or the proposed [v2 design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=0%3A1) for some ways to start.
+1. If no design exists, then you can ask around the Owncast chat for help, for come up with your own ideas!
+1. No designs are stuck in stone, and we're using this as an opportunity to level up the UI of Owncast, so all ideas are welcome.
+
+
+
## How?
This rewrite is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
@@ -45,9 +61,3 @@ For example a button may have a disabled state that requires a specific scenario
but here we you can just toggle the state to verify things are working as expected.
This means [new components should have a corresponding story added](https://storybook.js.org/docs/react/get-started/whats-a-story) to make it easier to maintain the project.
-
-
-## Contributing
-
-This is a standard React project so it makes it easy for **anybody to help!**
-
diff --git a/web/stories/Modal.stories.tsx b/web/stories/Modal.stories.tsx
index 50fd40e97..99d53c593 100644
--- a/web/stories/Modal.stories.tsx
+++ b/web/stories/Modal.stories.tsx
@@ -5,7 +5,13 @@ import Modal from '../components/ui/Modal/Modal';
export default {
title: 'owncast/Modals/Container',
component: Modal,
- parameters: {},
+ parameters: {
+ docs: {
+ description: {
+ component: `This is the popup modal container that all modal content is rendered inside. It can be passed content nodes to render, or a URL to show an iframe.`,
+ },
+ },
+ },
} as ComponentMeta;
const Template: ComponentStory = args => {
diff --git a/web/stories/NotifyReminder.stories.tsx b/web/stories/NotifyReminder.stories.tsx
new file mode 100644
index 000000000..758133068
--- /dev/null
+++ b/web/stories/NotifyReminder.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NotifyReminder from '../components/ui/NotifyReminderPopup/NotifyReminderPopup';
+import Mock from './assets/mocks/notify-popup.png';
+
+export default {
+ title: 'owncast/Notify Reminder',
+ component: NotifyReminder,
+ parameters: {
+ design: {
+ type: 'image',
+ url: Mock,
+ },
+ docs: {
+ description: {
+ component: `After visiting the page three times this popup reminding you that you can register for live stream notifications shows up.
+Clicking it will make the notificaiton modal display. Clicking the "X" will hide the modal and make it never show again.`,
+ },
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = args => ;
+
+export const Example = Template.bind({});
+Example.args = {};
diff --git a/web/stories/assets/mocks/chatinput-mock.png b/web/stories/assets/mocks/chatinput-mock.png
new file mode 100644
index 000000000..09342cf9f
Binary files /dev/null and b/web/stories/assets/mocks/chatinput-mock.png differ
diff --git a/web/stories/assets/mocks/chatmessage-action.png b/web/stories/assets/mocks/chatmessage-action.png
new file mode 100644
index 000000000..95c064dac
Binary files /dev/null and b/web/stories/assets/mocks/chatmessage-action.png differ
diff --git a/web/stories/assets/mocks/chatmessage-system.png b/web/stories/assets/mocks/chatmessage-system.png
new file mode 100644
index 000000000..e5e2ea97d
Binary files /dev/null and b/web/stories/assets/mocks/chatmessage-system.png differ
diff --git a/web/stories/assets/mocks/chatmessage-user.png b/web/stories/assets/mocks/chatmessage-user.png
new file mode 100644
index 000000000..d0a30f384
Binary files /dev/null and b/web/stories/assets/mocks/chatmessage-user.png differ
diff --git a/web/stories/assets/mocks/fediauth-modal.png b/web/stories/assets/mocks/fediauth-modal.png
new file mode 100644
index 000000000..39188b547
Binary files /dev/null and b/web/stories/assets/mocks/fediauth-modal.png differ
diff --git a/web/stories/assets/mocks/follow-modal.png b/web/stories/assets/mocks/follow-modal.png
new file mode 100644
index 000000000..4c6a3b26a
Binary files /dev/null and b/web/stories/assets/mocks/follow-modal.png differ
diff --git a/web/stories/assets/mocks/indieauth-modal.png b/web/stories/assets/mocks/indieauth-modal.png
new file mode 100644
index 000000000..b598bdf9b
Binary files /dev/null and b/web/stories/assets/mocks/indieauth-modal.png differ
diff --git a/web/stories/assets/mocks/notify-modal.png b/web/stories/assets/mocks/notify-modal.png
new file mode 100644
index 000000000..6508c1aac
Binary files /dev/null and b/web/stories/assets/mocks/notify-modal.png differ
diff --git a/web/stories/assets/mocks/notify-popup.png b/web/stories/assets/mocks/notify-popup.png
new file mode 100644
index 000000000..e116e8520
Binary files /dev/null and b/web/stories/assets/mocks/notify-popup.png differ