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.

## 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/)

## 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.


## Contributing

This is a standard React project so it makes it easy for **anybody to help!**