owncast/web/stories/Introduction.stories.mdx

54 lines
2.3 KiB
Plaintext
Raw Normal View History

2022-04-18 03:50:39 +02:00
import { Meta } from '@storybook/addon-docs';
2022-05-13 02:59:40 +02:00
import { Typography } from 'antd';
2022-04-18 03:50:39 +02:00
2022-04-27 04:29:13 +02:00
<Meta title="Owncast/Readme" />
2022-04-18 03:50:39 +02:00
2022-05-13 02:59:40 +02:00
<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Web UI v2</Typography.Title>
2022-04-18 03:50:39 +02:00
2022-05-13 00:41:54 +02:00
Owncast is going through a complete rewrite of the web app frontend.
2022-04-18 03:50:39 +02:00
2022-05-13 02:59:40 +02:00
Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project.
2022-04-18 03:50:39 +02:00
2022-05-13 00:41:54 +02:00
## Why?
2022-04-18 03:50:39 +02:00
2022-05-13 00:41:54 +02:00
- Moving to a full React Component workflow allows the project to be more productive and build features faster.
2022-05-13 02:59:40 +02:00
- Share code between the web frontend UI and the existing admin.
- Address feedback from users.
2022-05-13 00:41:54 +02:00
- Better accessibility.
- Better mobile experience.
2022-05-13 02:59:40 +02:00
- 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/)
2022-05-13 00:41:54 +02:00
## How?
2022-05-13 02:59:40 +02:00
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.
2022-05-13 00:41:54 +02:00
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?
2022-05-13 02:59:40 +02:00
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.
## Contributing
2022-05-13 00:41:54 +02:00
2022-05-13 02:59:40 +02:00
This is a standard React project so it makes it easy for **anybody to help!**
2022-05-13 00:41:54 +02:00