Organize stories and populate readme
This commit is contained in:
Gabe Kangas
parent
ed50016bfc
commit
d427c0ad70
@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ActionButton from '../components/action-buttons/ActionButton';
|
||||
|
||||
export default {
|
||||
title: 'owncast/External action button',
|
||||
title: 'owncast/Action Buttons/Single button',
|
||||
component: ActionButton,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ActionButton>;
|
||||
|
||||
@ -4,7 +4,7 @@ import ActionButtonRow from '../components/action-buttons/ActionButtonRow';
|
||||
import ActionButton from '../components/action-buttons/ActionButton';
|
||||
|
||||
export default {
|
||||
title: 'owncast/External action button row',
|
||||
title: 'owncast/Action Buttons/Row',
|
||||
component: ActionButtonRow,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ActionButtonRow>;
|
||||
|
||||
@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import SingleFollower from '../components/Follower';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Follower',
|
||||
title: 'owncast/Followers/Single Follower',
|
||||
component: SingleFollower,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof SingleFollower>;
|
||||
|
||||
@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import FollowerCollection from '../components/FollowersCollection';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Followers collection',
|
||||
title: 'owncast/Followers/Followers collection',
|
||||
component: FollowerCollection,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof FollowerCollection>;
|
||||
|
||||
@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import Footer from '../components/ui/Footer/Footer';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Footer',
|
||||
title: 'owncast/Layout/Footer',
|
||||
component: Footer,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Footer>;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import Header from '../components/ui/Header/Header';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import Header from '../components/ui/Header/Header';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Header',
|
||||
title: 'owncast/Layout/Header',
|
||||
component: Header,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Header>;
|
||||
|
||||
@ -1,117 +1,23 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import Direction from './assets/direction.svg';
|
||||
import { Typography } from 'antd';
|
||||
|
||||
<Meta title="Owncast/Readme" />
|
||||
|
||||
<style>{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
.link-list {
|
||||
row-gap: 20px;
|
||||
column-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
.link-list {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 1fr;
|
||||
-ms-grid-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: block;
|
||||
padding: 20px 30px 20px 15px;
|
||||
border: 1px solid #00000010;
|
||||
border-radius: 5px;
|
||||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
border-color: #1EA7FD50;
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
||||
}
|
||||
|
||||
.link-item:active {
|
||||
border-color: #1EA7FD;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.link-item strong {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.link-item img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 15px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.link-item span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #E7FDD8;
|
||||
color: #66BF3C;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tip-wrapper code {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
`}</style>
|
||||
|
||||
# Owncast web UI v2
|
||||
<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. Please take a look and see if there's anything you can help with. Even just grabbing one component is a huge help!
|
||||
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
|
||||
|
||||
@ -119,21 +25,29 @@ Visit the [uiv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
|
||||
- [React](https://reactjs.org/)
|
||||
- [Ant Design](https://ant.design/)
|
||||
|
||||
## Why?
|
||||
|
||||
- Moving to a full React Component workflow allows the project to be more productive and build features faster.
|
||||
- Better accessibility.
|
||||
- Better mobile experience.
|
||||
|
||||
## How?
|
||||
|
||||
This 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.
|
||||
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.
|
||||
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!**
|
||||
|
||||
More documentation about things should go here.
|
||||
@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import Modal from '../components/ui/Modal/Modal';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modal container',
|
||||
title: 'owncast/Modals/Container',
|
||||
component: Modal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Modal>;
|
||||
|
||||
@ -4,7 +4,7 @@ import { subHours } from 'date-fns';
|
||||
import Statusbar from '../components/ui/Statusbar/Statusbar';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Status bar',
|
||||
title: 'owncast/Player/Status bar',
|
||||
component: Statusbar,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Statusbar>;
|
||||
|
||||
@ -9,7 +9,7 @@ const streams = {
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'owncast/Player',
|
||||
title: 'owncast/Player/Player',
|
||||
component: OwncastPlayer,
|
||||
argTypes: {
|
||||
source: {
|
||||
|
||||
@ -3,9 +3,20 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import VideoPoster from '../components/video/VideoPoster';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Video poster',
|
||||
title: 'owncast/Player/Video poster',
|
||||
component: VideoPoster,
|
||||
parameters: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
- Sits on top of the video player when playback is not taking place.
|
||||
- Shows the instance logo when the video is offline.
|
||||
- Initial image is the logo when online.
|
||||
- When the stream is online, will transition, via cross-fades, through the thumbnail.
|
||||
- Will be removed when playback starts.`,
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof VideoPoster>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
|
||||
Loading…
Reference in New Issue
Block a user