LogalDeveloper/owncast
0
Fork 0
Code Activity

Fix web project build errors

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-11 23:31:31 -07:00
parent b66617961d
commit 72c01e1b9a
86 changed files with 863 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/stories/ActionButtonRow.stories.tsx
View File

@@ -10,9 +10,10 @@ export default {
} as ComponentMeta<typeof ActionButtonRow>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof ActionButtonRow> = args => (
<ActionButtonRow>{args.buttons}</ActionButtonRow>
);
const Template: ComponentStory<typeof ActionButtonRow> = args => {
const { buttons } = args as any;
return <ActionButtonRow>{buttons}</ActionButtonRow>;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const actions = [

1
web/stories/BrowserNotifyModal.stories.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
import AuthModal from '../components/modals/AuthModal';
const Example = () => (
<div>

2
web/stories/ChatActionMessage.stories.tsx
View File

@@ -9,7 +9,7 @@ export default {
} as ComponentMeta<typeof ChatActionMessage>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage />;
const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage {...args} />;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Basic = Template.bind({});

2
web/stories/ChatSocialMessage.stories.tsx
View File

@@ -9,7 +9,7 @@ export default {
} as ComponentMeta<typeof ChatSocialMessage>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof ChatSocialMessage> = args => <ExamChatSocialMessageple />;
const Template: ComponentStory<typeof ChatSocialMessage> = args => <ChatSocialMessage {...args} />;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Basic = Template.bind({});

3
web/stories/ChatSystemMessage.stories.tsx
View File

@@ -8,8 +8,7 @@ export default {
parameters: {},
} as ComponentMeta<typeof ChatSystemMessage>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage />;
const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Basic = Template.bind({});

9
web/stories/Color.tsx
View File

@@ -25,7 +25,6 @@ export function Color(props) {
const colorDescriptionStyle = {
margin: '5px',
textAlign: 'center',
color: 'gray',
fontSize: '0.8em',
};
@@ -33,7 +32,9 @@ export function Color(props) {
return (
<figure style={containerStyle}>
<div style={colorBlockStyle} />
<figcaption style={colorDescriptionStyle}>{color}</figcaption>
<figcaption>
<span style={colorDescriptionStyle}>{color}</span>
</figcaption>
</figure>
);
}
@@ -44,8 +45,8 @@ Color.propTypes = {
const rowStyle = {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
flexDirection: 'row' as 'row',
flexWrap: 'wrap' as 'wrap',
// justifyContent: 'space-around',
alignItems: 'center',
};

3
web/stories/Form.stories.tsx
View File

@@ -12,6 +12,7 @@ import {
TreeSelect,
Switch,
} from 'antd';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
const FormExample = () => {
const [componentSize, setComponentSize] = useState('default');
@@ -33,7 +34,7 @@ const FormExample = () => {
size: componentSize,
}}
onValuesChange={onFormLayoutChange}
size={componentSize}
size={componentSize as SizeType}
>
<Form.Item label="Form Size" name="size">
<Radio.Group>

25
web/stories/ImageAsset.tsx
View File

@@ -1,6 +1,4 @@
import PropTypes from 'prop-types';
export function ImageAsset(props) {
export function ImageAsset(props: ImageAssetProps) {
const { name, src } = props;
const containerStyle = {
@@ -23,7 +21,7 @@ export function ImageAsset(props) {
};
const colorDescriptionStyle = {
textAlign: 'center',
textAlign: 'center' as 'center',
color: 'gray',
fontSize: '0.8em',
};
@@ -48,19 +46,20 @@ export function ImageAsset(props) {
);
}
Image.propTypes = {
name: PropTypes.string.isRequired,
};
interface ImageAssetProps {
name: string;
src: string;
}
const rowStyle = {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
flexDirection: 'row' as 'row',
flexWrap: 'wrap' as 'wrap',
// justifyContent: 'space-around',
alignItems: 'center',
};
export function ImageRow(props) {
export function ImageRow(props: ImageRowProps) {
const { images } = props;
return (
@@ -72,6 +71,6 @@ export function ImageRow(props) {
);
}
ImageRow.propTypes = {
images: PropTypes.arrayOf(PropTypes.object).isRequired,
};
interface ImageRowProps {
images: ImageAssetProps[];
}

114
web/stories/StyleGuide.stories.mdx
View File

@@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import {Color, ColorRow} from './Color';
import {Image, ImageRow} from './ImageAsset';
import { Color, ColorRow } from './Color';
import { Image, ImageRow } from './ImageAsset';
import Logo from '../assets/images/logo.svg';
import FediverseColor from '../assets/images/fediverse-color.png';
@@ -16,73 +16,113 @@ import IsBot from '../assets/images/bot.svg';
`}</style>
export const images = [{
src: Logo,
name: 'Logo',
}, {
src: FediverseColor,
name: 'Fediverse Color',
},{
src: FediverseBlack,
name: 'Fediverse Black',
}, {
src: Moderator,
name: 'Moderator',
}, {
src: IndieAuth,
name: 'IndieAuth',
}, {
src: IsBot,
name: 'Bot Flag',
}];
export const images = [
{
src: Logo,
name: 'Logo',
},
{
src: FediverseColor,
name: 'Fediverse Color',
},
{
src: FediverseBlack,
name: 'Fediverse Black',
},
{
src: Moderator,
name: 'Moderator',
},
{
src: IndieAuth,
name: 'IndieAuth',
},
{
src: IsBot,
name: 'Bot Flag',
},
];
# Colors
<Story name="Colors">
</Story>
<Story name="Colors"></Story>
<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
## Text
<ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} />
## Backgrounds
<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
## Status
<ColorRow colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']} />
<ColorRow
colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']}
/>
## Gray
<ColorRow colors={['color-owncast-gray-100', 'color-owncast-gray-300', 'color-owncast-gray-500', 'color-owncast-gray-700', 'color-owncast-gray-900']} />
<ColorRow
colors={[
'color-owncast-gray-100',
'color-owncast-gray-300',
'color-owncast-gray-500',
'color-owncast-gray-700',
'color-owncast-gray-900',
]}
/>
## Purple
<ColorRow colors={['color-owncast-purple-100', 'color-owncast-purple-300', 'color-owncast-purple-500', 'color-owncast-purple-700', 'color-owncast-purple-900']} />
<ColorRow
colors={[
'color-owncast-purple-100',
'color-owncast-purple-300',
'color-owncast-purple-500',
'color-owncast-purple-700',
'color-owncast-purple-900',
]}
/>
## Green
<ColorRow colors={['color-owncast-green-100', 'color-owncast-green-300', 'color-owncast-green-500', 'color-owncast-green-700', 'color-owncast-green-900']} />
<ColorRow
colors={[
'color-owncast-green-100',
'color-owncast-green-300',
'color-owncast-green-500',
'color-owncast-green-700',
'color-owncast-green-900',
]}
/>
## Orange
<ColorRow colors={['color-owncast-orange-100', 'color-owncast-orange-300', 'color-owncast-orange-500', 'color-owncast-orange-700', 'color-owncast-orange-900']} />
<ColorRow
colors={[
'color-owncast-orange-100',
'color-owncast-orange-300',
'color-owncast-orange-500',
'color-owncast-orange-700',
'color-owncast-orange-900',
]}
/>
# Font
[Inter font](https://rsms.me/inter/)
<Story name="Fonts">
<Canvas style={{color: 'var(--theme-text-color-secondary)'}}>
<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
</Canvas>
</Story>
# Images
<Story name="Images and Icons">
</Story>
<Story name="Images and Icons"></Story>
<ImageRow images={images} />

66
web/stories/Tabs.stories.tsx
View File

@@ -1,66 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Tabs, Radio } from 'antd';
import { ComponentStory, ComponentMeta } from '@storybook/react';
const { TabPane } = Tabs;
class TabsExample extends React.Component {
constructor(props) {
super(props);
this.state = { size: 'small' };
}
onChange = e => {
this.setState({ size: e.target.value });
};
render() {
const { size } = this.state;
const { type } = this.props;
return (
<div>
<Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }}>
<Radio.Button value="small">Small</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
</Radio.Group>
<Tabs defaultActiveKey="1" type={type} size={size}>
<TabPane tab="Card Tab 1" key="1">
Content of card tab 1
</TabPane>
<TabPane tab="Card Tab 2" key="2">
Content of card tab 2
</TabPane>
<TabPane tab="Card Tab 3" key="3">
Content of card tab 3
</TabPane>
</Tabs>
</div>
);
}
}
export default {
title: 'example/Tabs',
component: Tabs,
} as ComponentMeta<typeof Tabs>;
const Template: ComponentStory<typeof Tabs> = args => <TabsExample {...args} />;
export const Card = Template.bind({});
Card.args = { type: 'card' };
export const Basic = Template.bind({});
Basic.args = { type: '' };
TabsExample.propTypes = {
type: PropTypes.string,
};
TabsExample.defaultProps = {
type: '',
};