Gabe Kangas
2 years ago
12 changed files with 30 additions and 117 deletions
@ -1,69 +0,0 @@
@@ -1,69 +0,0 @@
|
||||
import { Meta } from '@storybook/addon-docs'; |
||||
import { Typography } from 'antd'; |
||||
|
||||
<Meta title="Owncast/Documentation/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) |
||||
- [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. |
||||
- 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. |
||||
|
||||
For more details about building React components read [this document](https://github.com/owncast/owncast/blob/webv2/web/components/_COMPONENT_HOW_TO.md) with specifics. |
||||
|
||||
<img src="https://user-images.githubusercontent.com/9563255/187112334-e6c73bad-72df-42fc-9ee2-8d36ba615275.png"/> |
||||
Loading…
Reference in new issue