refactor(stories): co-locate stories with components (#2078)
* refactor: move ActionButton component * refactor: move BanUserButton component * refactor: move ChatActionMessage component * refactor: move ChatContainer component * refactor: move AuthModal component * refactor: move BrowserNotifyModal component * refactor: move ChatUserMessage component * refactor: move ChatJoinMessage component * refactor: move ChatTextField component * refactor: move ChatUserBadge component * refactor: move FollowerCollection and SingleFollower components * fix: bad import path * refactor: move FollowModal component * refactor: move Modal component * refactor: move ContentHeader component * refactor: move ChatSystemMessage component * refactor: move Header component * refactor: move Footer component * refactor: move StatusBar component * refactor: move OfflineBanner component * refactor: move OwncastPlayer component * refactor: move IndieAuthModal component * refactor: move SocialLinks component * refactor: move VideoPoster component * refactor: move FollowModal component * refactor: move FediAuthModal.tsx component * refactor: move UserDropdown component * refactor: move ChatSocialMessage component * refactor: move Logo component * refactor: move NotifyReminderPopup component * refactor: move NameChangeModal component * refactor: move FatalErrorStateModal component * refactor: move ChatModeratorNotification component * refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components * refactor: move CustomPageContent component * refactor: move storybook Introduction file * refactor: update storybook story import path * refactor: move storybook preview styles * refactor: move storybook doc pages * refactor: move Color and ImageAsset components * fix: bad import path * fix: bad import path in story file
This commit is contained in:
James Young
@@ -3,9 +3,9 @@ module.exports = {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
stories: [
|
||||
'../stories/Introduction.stories.mdx',
|
||||
'../stories/**/*.stories.mdx',
|
||||
'../.storybook/stories-category-doc-pages/**/*.stories.mdx',
|
||||
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../components/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import '../styles/variables.css';
|
||||
import '../styles/global.less';
|
||||
import '../styles/theme.less';
|
||||
import '../stories/preview.scss';
|
||||
import './preview.scss';
|
||||
import { themes } from '@storybook/theming';
|
||||
import { DocsContainer } from './storybook-theme';
|
||||
|
||||
|
||||
2
web/.storybook/preview.scss
Normal file
2
web/.storybook/preview.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import '../styles/globals';
|
||||
@import '../styles/ant-overrides';
|
||||
76
web/.storybook/stories-category-doc-pages/Chat.stories.mdx
Normal file
76
web/.storybook/stories-category-doc-pages/Chat.stories.mdx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Typography } from 'antd';
|
||||
import UserChatMessage from '../../components/chat/ChatUserMessage';
|
||||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
<Meta title="Owncast/Documentation/Chat" />
|
||||
|
||||
<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Chat</Typography.Title>
|
||||
|
||||
The Owncast chat is a websocket service that is authenticated with an access token.
|
||||
|
||||
The chat user interface has a handful of different states.
|
||||
|
||||
# App states
|
||||
|
||||
## Offline (stream is not live)
|
||||
|
||||
- The entire chat UI is hidden.
|
||||
|
||||
## Online (stream is live)
|
||||
|
||||
- The chat interface is visible.
|
||||
|
||||
### Online + chat is disconnected
|
||||
|
||||
- Show a loading state within the chat component.
|
||||
- Disable the text input box.
|
||||
|
||||
## Banned from chat
|
||||
|
||||
- The entire chat UI is hidden.
|
||||
|
||||
|
||||
## Stream ended
|
||||
|
||||
- Chat is visible for the next 5 minutes to allow viewers to say goodbye.
|
||||
- Also allows for chat to stay active in case the streamer wants to quickly
|
||||
restart their stream or there's a network blip.
|
||||
|
||||
## Chat Disconnected
|
||||
|
||||
If chat server is not available (websocket disconnects/not available for some reason)
|
||||
then the chat input box should become disabled and placeholder should say chat is not availble.
|
||||
|
||||
# Message types
|
||||
|
||||
## User chat message
|
||||
|
||||
The message that is displayed when a chat user sends a message.
|
||||
|
||||
## System message
|
||||
|
||||
A message sent from the server. Is commonly used for
|
||||
|
||||
- Welcome message.
|
||||
- An external script or integration sending a message on behalf of the server.
|
||||
|
||||
## Action message
|
||||
|
||||
A message saying an action has taken place. Is commonly used for
|
||||
|
||||
- User joined.
|
||||
- User was banned.
|
||||
- User changed name.
|
||||
- Stream is starting.
|
||||
- Stream is ending.
|
||||
- An external script or integration sending an action.
|
||||
|
||||
## Federated action message
|
||||
|
||||
A message stating that somebody on the Fediverse performed an action.
|
||||
It is used for:
|
||||
|
||||
- User "liked" that the steam went live.
|
||||
- User followed the instance.
|
||||
- User shared the instance to their followers.
|
||||
111
web/.storybook/stories-category-doc-pages/Colors.stories.mdx
Normal file
111
web/.storybook/stories-category-doc-pages/Colors.stories.mdx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Color, ColorRow } from '../../components/Color';
|
||||
|
||||
<Meta title="owncast/Style Guide/Default Theme" />
|
||||
|
||||
# Default theme colors
|
||||
|
||||
These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/webv2/web/style-definitions/tokens/color) files
|
||||
and get reflected here as they change. run `npm run build-styles` to regenerate.
|
||||
|
||||
## Default Theme
|
||||
|
||||
These color names are assigned to specific component variables. They can be overwritten via CSS.
|
||||
|
||||
<ColorRow
|
||||
colors={[
|
||||
'theme-color-palette-0',
|
||||
'theme-color-palette-1',
|
||||
'theme-color-palette-2',
|
||||
'theme-color-palette-3',
|
||||
'theme-color-palette-4',
|
||||
'theme-color-palette-5',
|
||||
'theme-color-palette-6',
|
||||
'theme-color-palette-7',
|
||||
'theme-color-palette-8',
|
||||
'theme-color-palette-9',
|
||||
'theme-color-palette-10',
|
||||
'theme-color-palette-11',
|
||||
'theme-color-palette-12',
|
||||
'theme-color-palette-13',
|
||||
'theme-color-palette-error',
|
||||
'theme-color-palette-warning',
|
||||
'theme-color-background-main',
|
||||
'theme-color-background-header',
|
||||
'theme-color-action',
|
||||
'theme-color-action-hover',
|
||||
'theme-color-action-disabled',
|
||||
]}
|
||||
/>
|
||||
|
||||
## Component Colors
|
||||
|
||||
<ColorRow
|
||||
colors={[
|
||||
'theme-color-components-text-on-light',
|
||||
'theme-color-components-text-on-dark',
|
||||
'theme-color-components-primary-button-background',
|
||||
'theme-color-components-primary-button-background-disabled',
|
||||
'theme-color-components-primary-button-text',
|
||||
'theme-color-components-primary-button-text-disabled',
|
||||
'theme-color-components-primary-button-border',
|
||||
'theme-color-components-secondary-button-background',
|
||||
'theme-color-components-secondary-button-background-disabled',
|
||||
'theme-color-components-secondary-button-text',
|
||||
'theme-color-components-secondary-button-text-disabled',
|
||||
'theme-color-components-secondary-button-border',
|
||||
'theme-color-components-chat-background',
|
||||
'theme-color-components-chat-text',
|
||||
'theme-color-components-modal-header-background',
|
||||
'theme-color-components-modal-header-text',
|
||||
'theme-color-components-modal-content-background',
|
||||
'theme-color-components-modal-content-text',
|
||||
'theme-color-components-menu-background',
|
||||
'theme-color-components-menu-item-text',
|
||||
'theme-color-components-menu-item-bg',
|
||||
'theme-color-components-menu-item-hover-bg',
|
||||
'theme-color-components-menu-item-focus-bg',
|
||||
'theme-color-components-form-field-background',
|
||||
'theme-color-components-form-field-placeholder',
|
||||
'theme-color-components-form-field-text',
|
||||
'theme-color-components-form-field-border',
|
||||
]}
|
||||
/>
|
||||
|
||||
## Default Palette
|
||||
|
||||
These are the core colors for the default, out of the box, Owncast web application theme.
|
||||
They should not be overwritten, instead the theme variables should be overwritten.
|
||||
|
||||
<ColorRow
|
||||
colors={[
|
||||
'color-owncast-palette-0',
|
||||
'color-owncast-palette-1',
|
||||
'color-owncast-palette-2',
|
||||
'color-owncast-palette-3',
|
||||
'color-owncast-palette-4',
|
||||
'color-owncast-palette-5',
|
||||
'color-owncast-palette-6',
|
||||
'color-owncast-palette-7',
|
||||
'color-owncast-palette-9',
|
||||
'color-owncast-palette-10',
|
||||
'color-owncast-palette-11',
|
||||
'color-owncast-palette-12',
|
||||
'color-owncast-palette-13',
|
||||
]}
|
||||
/>
|
||||
|
||||
## User Colors
|
||||
|
||||
<ColorRow
|
||||
colors={[
|
||||
'theme-color-users-0',
|
||||
'theme-color-users-1',
|
||||
'theme-color-users-2',
|
||||
'theme-color-users-3',
|
||||
'theme-color-users-4',
|
||||
'theme-color-users-5',
|
||||
'theme-color-users-6',
|
||||
'theme-color-users-7',
|
||||
]}
|
||||
/>
|
||||
52
web/.storybook/stories-category-doc-pages/Images.stories.mdx
Normal file
52
web/.storybook/stories-category-doc-pages/Images.stories.mdx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Image, ImageRow } from '../../components/ImageAsset';
|
||||
|
||||
import Logo from '../../assets/images/logo.svg';
|
||||
import FediverseColor from '../../assets/images/fediverse-color.png';
|
||||
import FediverseBlack from '../../assets/images/fediverse-black.png';
|
||||
import Moderator from '../../assets/images/moderator.svg';
|
||||
import IndieAuth from '../../assets/images/indieauth.png';
|
||||
import IsBot from '../../assets/images/bot.svg';
|
||||
|
||||
<Meta title="owncast/Style Guide/Images+Icons" />
|
||||
|
||||
export const images = [
|
||||
{
|
||||
src: Logo,
|
||||
name: 'Logo',
|
||||
},
|
||||
];
|
||||
|
||||
# Images
|
||||
|
||||
## TODO: Determine the icon style/images for v2 of the web UI.
|
||||
|
||||
|
||||
<ImageRow images={images} />
|
||||
|
||||
## App Icons
|
||||
|
||||
export const icons = [
|
||||
{
|
||||
src: FediverseColor,
|
||||
name: 'Fediverse Color',
|
||||
},
|
||||
{
|
||||
src: FediverseBlack,
|
||||
name: 'Fediverse Black',
|
||||
},
|
||||
{
|
||||
src: Moderator,
|
||||
name: 'Moderator',
|
||||
},
|
||||
{
|
||||
src: IndieAuth,
|
||||
name: 'IndieAuth',
|
||||
},
|
||||
{
|
||||
src: IsBot,
|
||||
name: 'Bot Flag',
|
||||
},
|
||||
];
|
||||
|
||||
<ImageRow images={icons} />
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Typography } from 'antd';
|
||||
|
||||
<Meta title="Owncast/Readme" />
|
||||
|
||||
<Typography.Title style={{ color: 'var(--primary-color)' }}>Owncast Web UI v2</Typography.Title>
|
||||
|
||||
Owncast is going through a complete rewrite of the web app frontend.
|
||||
|
||||
Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project.
|
||||
|
||||
## Quick Links
|
||||
|
||||
- [Redesign project](https://github.com/owncast/owncast/milestone/18)
|
||||
- [Proposed redesign Figma](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A17)
|
||||
- [Currently defined colors](/story/owncast-style-guide-colors--page)
|
||||
- [Owncast Frontend Chat](https://owncast.rocket.chat/group/frontend-dev)
|
||||
|
||||
## Why?
|
||||
|
||||
- Moving to a full React Component workflow allows the project to be more productive and build features faster.
|
||||
- Share code between the web frontend UI and the existing admin.
|
||||
- Address feedback from users.
|
||||
- Better accessibility.
|
||||
- Better mobile experience.
|
||||
- Updated [design](https://www.figma.com/proto/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A646&scaling=min-zoom&page-id=643%3A17&starting-point-node-id=643%3A44).
|
||||
- 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.
|
||||
|
||||
## What
|
||||
|
||||
- [Next.js](https://nextjs.org/)
|
||||
- [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/proto/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A646&scaling=min-zoom&page-id=643%3A17&starting-point-node-id=643%3A44) 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.
|
||||
And that's what this interface lets us do. On this page we see all the different components still needing to be worked on, and have a place to document the functionality of these pieces.
|
||||
|
||||
## What about the Admin?
|
||||
|
||||
The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible except where needed to share code and styles.
|
||||
|
||||
## What is this page?
|
||||
|
||||
This is called [_Storybook_](https://storybook.js.org/docs/react/get-started/introduction).
|
||||
Storybook is a tool for UI development. It makes development faster and easier by isolating components.
|
||||
This allows you to work on one component at a time. You can develop entire UIs without needing to start
|
||||
up a complex dev stack, force certain data into your database, or navigate around your application.
|
||||
|
||||
For example a button may have a disabled state that requires a specific scenario to take place in real-world use,
|
||||
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.
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Style Guide/Typography" />
|
||||
|
||||
## Body
|
||||
|
||||
<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-body-font-family)' }}>
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</div>
|
||||
|
||||
<Canvas
|
||||
style={{ color: 'var(--theme-text-secondary)', fontFamily: 'var(--theme-text-body-font-family)' }}
|
||||
>
|
||||
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
|
||||
</Canvas>
|
||||
|
||||
## Display
|
||||
|
||||
<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-display-font-family)' }}>
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</div>
|
||||
<Canvas
|
||||
style={{
|
||||
color: 'var(--theme-text-secondary)',
|
||||
fontFamily: 'var(--theme-text-display-font-family)',
|
||||
}}
|
||||
>
|
||||
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
|
||||
</Canvas>
|
||||
Reference in New Issue
Block a user