[CHORE] Improve stories (#3028)
* [CHORE] Improve stories * Refactor Avatar and UIKitModal * fixed undefined 'name' * Remove commented stories * Remove Markdown from stories/index, update Markdown test file and remove markdown stories from Message stories * Remove StoriesSeparator * Refactor Markdown * Remove commented lines of code * Small refactor * Re-add stories Co-authored-by: Gerzon Z <gerzonzcanario@gmail.com> Co-authored-by: Gerzon Z <gerzonc@icloud.com> Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Gung Wah
GitHub
parent
21b587749c
commit
ff1da46ef7
|
|
@ -46,6 +46,7 @@ module.exports = {
|
|||
"react/forbid-prop-types": 0,
|
||||
"jsx-quotes": [2, "prefer-single"],
|
||||
"jsx-a11y/href-no-hash": 0,
|
||||
"jsx-a11y/aria-role": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"import/no-cycle": 0,
|
||||
"camelcase": 0,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,11 +1,10 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import { themes } from '../../app/constants/colors';
|
||||
import Avatar from '../../app/containers/Avatar/Avatar';
|
||||
import Status from '../../app/containers/Status/Status';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
import sharedStyles from '../../app/views/Styles';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
|
@ -16,40 +15,44 @@ const styles = StyleSheet.create({
|
|||
|
||||
const server = 'https://open.rocket.chat';
|
||||
|
||||
const Separator = ({ title, theme }) => <StoriesSeparator title={title} theme={theme} />;
|
||||
Separator.propTypes = {
|
||||
title: PropTypes.string,
|
||||
theme: PropTypes.string
|
||||
};
|
||||
const _theme = 'light';
|
||||
|
||||
const AvatarStories = ({ theme }) => (
|
||||
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
|
||||
<Separator title='Avatar by text' theme={theme} />
|
||||
const stories = storiesOf('Avatar', module);
|
||||
|
||||
stories.add('Avatar by text', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Avatar by roomId' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Avatar by roomId', () => (
|
||||
<Avatar
|
||||
type='p'
|
||||
rid='devWBbYr7inwupPqK'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Avatar by url' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Avatar by url', () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Avatar by path' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Avatar by path', () => (
|
||||
<Avatar
|
||||
avatar='/avatar/diego.mello'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='With ETag' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('With ETag', () => (
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
|
|
@ -57,84 +60,107 @@ const AvatarStories = ({ theme }) => (
|
|||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Without ETag' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Without ETag', () => (
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Emoji' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Emoji', () => (
|
||||
<Avatar
|
||||
emoji='troll'
|
||||
getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })}
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Direct' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Direct', () => (
|
||||
<Avatar
|
||||
text='diego.mello'
|
||||
server={server}
|
||||
type='d'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Channel' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Channel', () => (
|
||||
<Avatar
|
||||
text='general'
|
||||
server={server}
|
||||
type='c'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Touchable' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Touchable', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
onPress={() => console.log('Pressed!')}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Static' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Static', () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
isStatic
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Custom borderRadius' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Avatar by roomId', () => (
|
||||
<Avatar
|
||||
type='p'
|
||||
rid='devWBbYr7inwupPqK'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Custom borderRadius', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
borderRadius={28}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Children' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Children', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
>
|
||||
<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
|
||||
<Status
|
||||
size={20}
|
||||
status='online'
|
||||
size={24}
|
||||
style={[sharedStyles.status, styles.status]}
|
||||
theme={_theme}
|
||||
/>
|
||||
</View>
|
||||
</Avatar>
|
||||
<Separator title='Wrong server' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Wrong server', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server='https://google.com'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Custom style' theme={theme} />
|
||||
));
|
||||
|
||||
stories.add('Custom style', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
style={styles.custom}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
AvatarStories.propTypes = {
|
||||
theme: PropTypes.string
|
||||
};
|
||||
export default AvatarStories;
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import Markdown from '../../app/containers/markdown';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
|
||||
const theme = 'light';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginHorizontal: 15
|
||||
marginHorizontal: 15,
|
||||
backgroundColor: themes[theme].backgroundColor,
|
||||
marginVertical: 50
|
||||
},
|
||||
separator: {
|
||||
marginHorizontal: 10,
|
||||
|
|
@ -37,48 +42,31 @@ const getCustomEmoji = (content) => {
|
|||
return customEmoji;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line arrow-body-style
|
||||
export default ({ theme }) => {
|
||||
return (
|
||||
<ScrollView
|
||||
style={{
|
||||
backgroundColor: themes[theme].backgroundColor,
|
||||
marginVertical: 50
|
||||
}}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: 50
|
||||
}}
|
||||
>
|
||||
<StoriesSeparator style={styles.separator} title='Short Text' theme={theme} />
|
||||
const stories = storiesOf('Markdown', module);
|
||||
|
||||
stories.add('Text', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Long Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Line Break Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Sequential empty spaces' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={sequentialEmptySpacesText}
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='Strong emphasis, aka bold, with **asterisks** or __underscores__'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Edited' theme={theme} />
|
||||
stories.add('Edited', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is edited'
|
||||
|
|
@ -86,8 +74,9 @@ export default ({ theme }) => {
|
|||
isEdited
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Preview' theme={theme} />
|
||||
stories.add('Preview', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
|
|
@ -129,9 +118,10 @@ export default ({ theme }) => {
|
|||
preview
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Mentions' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
stories.add('Mentions', () => (
|
||||
<ScrollView style={styles.container}>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
theme={theme}
|
||||
|
|
@ -143,10 +133,6 @@ export default ({ theme }) => {
|
|||
]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Mentions with Real Name' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
theme={theme}
|
||||
|
|
@ -159,9 +145,10 @@ export default ({ theme }) => {
|
|||
username='rocket.cat'
|
||||
useRealName
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Hashtag' theme={theme} />
|
||||
stories.add('Hashtag', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='#test-channel #unknown'
|
||||
|
|
@ -169,8 +156,9 @@ export default ({ theme }) => {
|
|||
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Emoji' theme={theme} />
|
||||
stories.add('Emoji', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||
|
|
@ -187,8 +175,9 @@ export default ({ theme }) => {
|
|||
baseUrl={baseUrl}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Block Quote' theme={theme} />
|
||||
stories.add('Block quote', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={`> This is block quote
|
||||
|
|
@ -196,19 +185,23 @@ this is a normal line`}
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Links' theme={theme} />
|
||||
stories.add('Links', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' theme={theme} />
|
||||
<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Image' theme={theme} />
|
||||
|
||||
stories.add('Image', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Headers' theme={theme} />
|
||||
stories.add('Headers', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='# Header 1'
|
||||
|
|
@ -235,17 +228,14 @@ this is a normal line`}
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Inline Code' theme={theme} />
|
||||
stories.add('Code', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is `inline code`'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Code Block' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='Inline `code` has `back-ticks around` it.
|
||||
```
|
||||
|
|
@ -254,32 +244,22 @@ Code block
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Lists' theme={theme} />
|
||||
stories.add('Lists', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Numbered Lists' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={'1. Open Source\n2. Rocket.Chat'}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Emphasis' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='Strong emphasis, aka bold, with **asterisks** or __underscores__'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Table' theme={theme} />
|
||||
stories.add('Table', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='First Header | Second Header
|
||||
|
|
@ -289,6 +269,4 @@ Content in the first column | Content in the second column'
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet } from 'react-native';
|
||||
import { StyleSheet, ScrollView } from 'react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
// import moment from 'moment';
|
||||
|
||||
import MessageComponent from '../../app/containers/message/Message';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
import messagesStatus from '../../app/constants/messagesStatus';
|
||||
import MessageSeparator from '../../app/views/RoomView/Separator';
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
|
||||
import { themes } from '../../app/constants/colors';
|
||||
import { store } from './index';
|
||||
|
||||
let _theme = 'light';
|
||||
const _theme = 'light';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
separator: {
|
||||
marginTop: 30,
|
||||
marginBottom: 0
|
||||
}
|
||||
});
|
||||
|
||||
const user = {
|
||||
|
|
@ -40,6 +40,26 @@ const getCustomEmoji = (content) => {
|
|||
return customEmoji;
|
||||
};
|
||||
|
||||
const messageDecorator = story => (
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
baseUrl,
|
||||
onPress: () => {},
|
||||
onLongPress: () => {},
|
||||
reactionInit: () => {},
|
||||
onErrorPress: () => {},
|
||||
replyBroadcast: () => {},
|
||||
onReactionPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onReactionLongPress: () => {},
|
||||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
const Message = props => (
|
||||
<MessageComponent
|
||||
baseUrl={baseUrl}
|
||||
|
|
@ -54,22 +74,22 @@ const Message = props => (
|
|||
/>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Separator = ({ title, theme }) => <StoriesSeparator title={title} theme={theme} style={styles.separator} />;
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export default ({ theme }) => {
|
||||
_theme = theme;
|
||||
return (
|
||||
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
|
||||
|
||||
<Separator title='Simple' theme={theme} />
|
||||
const stories = storiesOf('Message', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>)
|
||||
.addDecorator(messageDecorator);
|
||||
|
||||
stories.add('Basic', () => (
|
||||
<>
|
||||
<Message msg='Message' />
|
||||
|
||||
<Separator title='Long message' theme={theme} />
|
||||
<Message msg={longText} />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Grouped messages' theme={theme} />
|
||||
stories.add('Grouped messages', () => (
|
||||
<>
|
||||
<Message msg='...' />
|
||||
<Message
|
||||
msg='Different user'
|
||||
|
|
@ -81,11 +101,15 @@ export default ({ theme }) => {
|
|||
<Message msg='This is the third message' isHeader={false} />
|
||||
<Message msg='This is the second message' isHeader={false} />
|
||||
<Message msg='This is the first message' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Without header' theme={theme} />
|
||||
stories.add('Without header', () => (
|
||||
<Message msg='Message' isHeader={false} />
|
||||
));
|
||||
|
||||
<Separator title='With alias' theme={theme} />
|
||||
stories.add('With alias', () => (
|
||||
<>
|
||||
<Message msg='Message' alias='Diego Mello' />
|
||||
<Message
|
||||
msg='Message'
|
||||
|
|
@ -95,11 +119,15 @@ export default ({ theme }) => {
|
|||
}}
|
||||
alias='Diego Mello'
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Edited' theme={theme} />
|
||||
stories.add('Edited', () => (
|
||||
<Message msg='Message' edited />
|
||||
));
|
||||
|
||||
<Separator title='Encrypted' theme={theme} />
|
||||
stories.add('Encrypted', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Message'
|
||||
type='e2e'
|
||||
|
|
@ -113,13 +141,13 @@ export default ({ theme }) => {
|
|||
msg='Message Encrypted with Reactions'
|
||||
reactions={[{
|
||||
emoji: ':joy:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':marioparty:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':thinking:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}]}
|
||||
onReactionPress={() => {}}
|
||||
type='e2e'
|
||||
|
|
@ -162,28 +190,33 @@ export default ({ theme }) => {
|
|||
isHeader={false}
|
||||
type='e2e'
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Block Quote' theme={theme} />
|
||||
stories.add('Block Quote', () => (
|
||||
<>
|
||||
<Message msg='> Testing block quote' />
|
||||
<Message msg={'> Testing block quote\nTesting block quote'} />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Lists' theme={theme} />
|
||||
stories.add('Lists', () => (
|
||||
<>
|
||||
<Message msg={'* Dogs\n * cats\n - cats'} />
|
||||
|
||||
<Separator title='Numerated lists' theme={theme} />
|
||||
<Message msg={'1. Dogs \n 2. Cats'} />
|
||||
|
||||
<Separator title='Numerated lists in separated messages' theme={theme} />
|
||||
<Message msg='1. Dogs' />
|
||||
<Message msg='2. Cats' isHeader={false} />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Static avatar' theme={theme} />
|
||||
stories.add('Static avatar', () => (
|
||||
<Message
|
||||
msg='Message'
|
||||
avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg'
|
||||
/>
|
||||
));
|
||||
|
||||
<Separator title='Full name' theme={theme} />
|
||||
stories.add('Full name', () => (
|
||||
<Message
|
||||
msg='Message'
|
||||
author={{
|
||||
|
|
@ -193,8 +226,10 @@ export default ({ theme }) => {
|
|||
}}
|
||||
useRealName
|
||||
/>
|
||||
));
|
||||
|
||||
<Separator title='Mentions' theme={theme} />
|
||||
stories.add('Mentions', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='@rocket.cat @diego.mello @all @here #general'
|
||||
mentions={[{
|
||||
|
|
@ -225,76 +260,77 @@ export default ({ theme }) => {
|
|||
name: 'general'
|
||||
}]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Emojis' theme={theme} />
|
||||
stories.add('Emojis', () => (
|
||||
<>
|
||||
<Message msg='👊🤙👏' />
|
||||
|
||||
<Separator title='Single Emoji' theme={theme} />
|
||||
<Message msg='👏' />
|
||||
|
||||
<Separator title='Custom Emojis' theme={theme} />
|
||||
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
||||
|
||||
<Separator title='Single Custom Emojis' theme={theme} />
|
||||
<Message msg=':react_rocket:' />
|
||||
|
||||
<Separator title='Normal Emoji + Custom Emojis' theme={theme} />
|
||||
<Message msg='🤙:react_rocket:' />
|
||||
|
||||
<Separator title='Four emoji' theme={theme} />
|
||||
<Message msg='🤙:react_rocket:🤙🤙' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Time format' theme={theme} />
|
||||
stories.add('Time format', () => (
|
||||
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
||||
));
|
||||
|
||||
<Separator title='Reactions' theme={theme} />
|
||||
stories.add('Reactions', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Reactions'
|
||||
reactions={[{
|
||||
emoji: ':joy:',
|
||||
usernames: [{ value: 'username' }, { value: 'rocket.cat' }, { value: 'diego.mello' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':marioparty:',
|
||||
usernames: [{ value: 'username' }, { value: 'rocket.cat' }, { value: 'diego.mello' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }]
|
||||
usernames: new Array(99)
|
||||
}, {
|
||||
emoji: ':thinking:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: new Array(999)
|
||||
}, {
|
||||
emoji: ':thinking:',
|
||||
usernames: new Array(9999)
|
||||
}]}
|
||||
onReactionPress={() => {}}
|
||||
/>
|
||||
|
||||
<Separator title='Multiple reactions' theme={theme} />
|
||||
<Message
|
||||
msg='Multiple Reactions'
|
||||
reactions={[{
|
||||
emoji: ':marioparty:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':react_rocket:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':nyan_rocket:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':heart:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':dog:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':grinning:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':grimacing:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}, {
|
||||
emoji: ':grin:',
|
||||
usernames: [{ value: 'username' }]
|
||||
usernames: [user.username]
|
||||
}]}
|
||||
onReactionPress={() => {}}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Intercalated users' theme={theme} />
|
||||
stories.add('Date and Unread separators', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Fourth message'
|
||||
author={{
|
||||
|
|
@ -302,27 +338,9 @@ export default ({ theme }) => {
|
|||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<MessageSeparator ts={date} unread theme={_theme} />
|
||||
<Message msg='Third message' />
|
||||
<Message
|
||||
msg='Second message'
|
||||
author={{
|
||||
...author,
|
||||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<Message msg='First message' />
|
||||
|
||||
<Separator title='Date and Unread separators' theme={theme} />
|
||||
<Message
|
||||
msg='Fourth message'
|
||||
author={{
|
||||
...author,
|
||||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<MessageSeparator ts={date} unread theme={theme} />
|
||||
<Message msg='Third message' />
|
||||
<MessageSeparator unread theme={theme} />
|
||||
<MessageSeparator unread theme={_theme} />
|
||||
<Message
|
||||
msg='Second message'
|
||||
author={{
|
||||
|
|
@ -338,10 +356,13 @@ export default ({ theme }) => {
|
|||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<MessageSeparator ts={date} theme={theme} />
|
||||
<MessageSeparator ts={date} theme={_theme} />
|
||||
<Message msg='First message' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='With image' theme={theme} />
|
||||
stories.add('With image', () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
|
|
@ -356,8 +377,11 @@ export default ({ theme }) => {
|
|||
image_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='With video' theme={theme} />
|
||||
stories.add('With video', () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
|
|
@ -371,8 +395,11 @@ export default ({ theme }) => {
|
|||
video_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='With audio' theme={theme} />
|
||||
stories.add('With audio', () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
|
|
@ -403,8 +430,11 @@ export default ({ theme }) => {
|
|||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='With file' theme={theme} />
|
||||
stories.add('With file', () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[{
|
||||
text: 'File.pdf',
|
||||
|
|
@ -418,16 +448,18 @@ export default ({ theme }) => {
|
|||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Message with reply' theme={theme} />
|
||||
stories.add('Message with reply', () => (
|
||||
<>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
attachments={[{
|
||||
author_name: 'I\'m a very long long title and I\'ll break',
|
||||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
text: 'How are you?',
|
||||
message_link: 'http:///example.com'
|
||||
text: 'How are you?'
|
||||
}]}
|
||||
/>
|
||||
<Message
|
||||
|
|
@ -436,12 +468,14 @@ export default ({ theme }) => {
|
|||
author_name: 'rocket.cat',
|
||||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
text: 'How are you? :nyan_rocket:',
|
||||
message_link: 'http:///example.com'
|
||||
text: 'How are you? :nyan_rocket:'
|
||||
}]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Message with read receipt' theme={theme} />
|
||||
stories.add('Message with read receipt', () => (
|
||||
<>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
isReadReceiptEnabled
|
||||
|
|
@ -464,8 +498,11 @@ export default ({ theme }) => {
|
|||
read
|
||||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Message with thread' theme={theme} />
|
||||
stories.add('Message with thread', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='How are you?'
|
||||
tcount={1}
|
||||
|
|
@ -483,12 +520,6 @@ export default ({ theme }) => {
|
|||
tmsg='Thread with emoji :) :joy:'
|
||||
isThreadReply
|
||||
/>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
tmid='1'
|
||||
tmsg='Markdown: [link](http://www.google.com/) ```block code```'
|
||||
isThreadReply
|
||||
/>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
tmid='1'
|
||||
|
|
@ -517,8 +548,11 @@ export default ({ theme }) => {
|
|||
}]}
|
||||
isThreadReply
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Sequential thread messages following thread button' theme={theme} />
|
||||
stories.add('Sequential thread messages following thread button', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='How are you?'
|
||||
tcount={1}
|
||||
|
|
@ -543,8 +577,11 @@ export default ({ theme }) => {
|
|||
tmid='1'
|
||||
isThreadSequential
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Sequential thread messages following thread reply' theme={theme} />
|
||||
stories.add('Sequential thread messages following thread reply', () => (
|
||||
<>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
tmid='1'
|
||||
|
|
@ -570,29 +607,11 @@ export default ({ theme }) => {
|
|||
tmid='1'
|
||||
isThreadSequential
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
{/* <Message
|
||||
msg='How are you?'
|
||||
tcount={9999}
|
||||
tlm={moment().subtract(1, 'hour')}
|
||||
/>
|
||||
<Message
|
||||
msg='How are you?'
|
||||
tcount={9999}
|
||||
tlm={moment().subtract(1, 'day')}
|
||||
/>
|
||||
<Message
|
||||
msg='How are you?'
|
||||
tcount={9999}
|
||||
tlm={moment().subtract(5, 'day')}
|
||||
/>
|
||||
<Message
|
||||
msg='How are you?'
|
||||
tcount={9999}
|
||||
tlm={moment().subtract(30, 'day')}
|
||||
/> */}
|
||||
|
||||
<Separator title='Discussion' theme={theme} />
|
||||
stories.add('Discussion', () => (
|
||||
<>
|
||||
<Message
|
||||
type='discussion-created'
|
||||
drid='aisduhasidhs'
|
||||
|
|
@ -621,37 +640,11 @@ export default ({ theme }) => {
|
|||
dlm={date}
|
||||
msg='This is a discussion'
|
||||
/>
|
||||
{/* <Message
|
||||
type='discussion-created'
|
||||
drid='aisduhasidhs'
|
||||
dcount={1000}
|
||||
dlm={moment().subtract(1, 'hour')}
|
||||
msg='This is a discussion'
|
||||
/>
|
||||
<Message
|
||||
type='discussion-created'
|
||||
drid='aisduhasidhs'
|
||||
dcount={1000}
|
||||
dlm={moment().subtract(1, 'day')}
|
||||
msg='This is a discussion'
|
||||
/>
|
||||
<Message
|
||||
type='discussion-created'
|
||||
drid='aisduhasidhs'
|
||||
dcount={1000}
|
||||
dlm={moment().subtract(5, 'day')}
|
||||
msg='This is a discussion'
|
||||
/>
|
||||
<Message
|
||||
type='discussion-created'
|
||||
drid='aisduhasidhs'
|
||||
dcount={1000}
|
||||
dlm={moment().subtract(30, 'day')}
|
||||
msg='This is a discussion'
|
||||
/> */}
|
||||
</>
|
||||
));
|
||||
|
||||
|
||||
<Separator title='URL' theme={theme} />
|
||||
stories.add('URL', () => (
|
||||
<>
|
||||
<Message
|
||||
urls={[{
|
||||
url: 'https://rocket.chat',
|
||||
|
|
@ -680,8 +673,11 @@ export default ({ theme }) => {
|
|||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Custom fields' theme={theme} />
|
||||
stories.add('Custom fields', () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Message'
|
||||
attachments={[{
|
||||
|
|
@ -689,7 +685,6 @@ export default ({ theme }) => {
|
|||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
text: 'Custom fields',
|
||||
message_link: 'http:///example.com',
|
||||
fields: [{
|
||||
title: 'Field 1',
|
||||
value: 'Value 1'
|
||||
|
|
@ -708,8 +703,10 @@ export default ({ theme }) => {
|
|||
}]
|
||||
}]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Two short custom fields with markdown' theme={theme} />
|
||||
stories.add('Two short custom fields with markdown', () => (
|
||||
<Message
|
||||
msg='Message'
|
||||
attachments={[{
|
||||
|
|
@ -717,7 +714,6 @@ export default ({ theme }) => {
|
|||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
text: 'Custom fields',
|
||||
message_link: 'http:///example.com',
|
||||
fields: [{
|
||||
title: 'Field 1',
|
||||
value: 'Value 1',
|
||||
|
|
@ -732,7 +728,6 @@ export default ({ theme }) => {
|
|||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
text: 'Custom fields 2',
|
||||
message_link: 'http:///example.com',
|
||||
fields: [{
|
||||
title: 'Field 1',
|
||||
value: 'Value 1',
|
||||
|
|
@ -744,8 +739,9 @@ export default ({ theme }) => {
|
|||
}]
|
||||
}]}
|
||||
/>
|
||||
));
|
||||
|
||||
<Separator title='Colored attachments' theme={theme} />
|
||||
stories.add('Colored attachments', () => (
|
||||
<Message
|
||||
attachments={[{
|
||||
color: 'red',
|
||||
|
|
@ -780,41 +776,37 @@ export default ({ theme }) => {
|
|||
value: 'Value 2',
|
||||
short: true
|
||||
}]
|
||||
}, {
|
||||
color: 'ASDASD',
|
||||
fields: [{
|
||||
title: 'Invalid color',
|
||||
short: true
|
||||
}]
|
||||
}]}
|
||||
/>
|
||||
));
|
||||
|
||||
<Separator title='Broadcast' theme={theme} />
|
||||
stories.add('Broadcast', () => (
|
||||
<Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />
|
||||
));
|
||||
|
||||
<Separator title='Archived' theme={theme} />
|
||||
stories.add('Archived', () => (
|
||||
<Message msg='This message is inside an archived room' archived />
|
||||
));
|
||||
|
||||
<Separator title='Error' theme={theme} />
|
||||
stories.add('Error', () => (
|
||||
<>
|
||||
<Message hasError msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
|
||||
<Message hasError msg='This message has error too' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} isHeader={false} />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Temp' theme={theme} />
|
||||
stories.add('Temp', () => (
|
||||
<Message msg='Temp message' status={messagesStatus.TEMP} isTemp />
|
||||
));
|
||||
|
||||
<Separator title='Editing' theme={theme} />
|
||||
stories.add('Editing', () => (
|
||||
<Message msg='Message being edited' editing />
|
||||
));
|
||||
|
||||
<Separator title='Removed' theme={theme} />
|
||||
stories.add('System messages', () => (
|
||||
<>
|
||||
<Message type='rm' isInfo />
|
||||
|
||||
<Separator title='Joined' theme={theme} />
|
||||
<Message type='uj' isInfo />
|
||||
|
||||
<Separator title='Room name changed' theme={theme} />
|
||||
<Message msg='New name' type='r' isInfo />
|
||||
|
||||
<Separator title='Message pinned' theme={theme} />
|
||||
<Message
|
||||
msg='New name'
|
||||
type='message_pinned'
|
||||
|
|
@ -823,104 +815,40 @@ export default ({ theme }) => {
|
|||
author_name: 'rocket.cat',
|
||||
ts: date,
|
||||
timeFormat: 'LT',
|
||||
message_link: 'http:///example.com',
|
||||
text: 'First message'
|
||||
}]}
|
||||
/>
|
||||
|
||||
<Separator title='Has left the channel' theme={theme} />
|
||||
<Message type='ul' isInfo />
|
||||
|
||||
<Separator title='User removed' theme={theme} />
|
||||
<Message msg='rocket.cat' type='ru' isInfo />
|
||||
|
||||
<Separator title='User added' theme={theme} />
|
||||
<Message msg='rocket.cat' type='au' isInfo />
|
||||
|
||||
<Separator title='User muted' theme={theme} />
|
||||
<Message msg='rocket.cat' type='user-muted' isInfo />
|
||||
|
||||
<Separator title='User unmuted' theme={theme} />
|
||||
<Message msg='rocket.cat' type='user-unmuted' isInfo />
|
||||
|
||||
<Separator title='Role added' theme={theme} />
|
||||
<Message
|
||||
msg='rocket.cat'
|
||||
role='admin' // eslint-disable-line
|
||||
role='admin'
|
||||
type='subscription-role-added'
|
||||
isInfo
|
||||
/>
|
||||
|
||||
<Separator title='Role removed' theme={theme} />
|
||||
<Message
|
||||
msg='rocket.cat'
|
||||
role='admin' // eslint-disable-line
|
||||
role='admin'
|
||||
type='subscription-role-removed'
|
||||
isInfo
|
||||
/>
|
||||
|
||||
<Separator title='Changed description' theme={theme} />
|
||||
<Message msg='New name' type='r' isInfo />
|
||||
<Message msg='new description' type='room_changed_description' isInfo />
|
||||
|
||||
<Separator title='Changed announcement' theme={theme} />
|
||||
<Message msg='new announcement' type='room_changed_announcement' isInfo />
|
||||
|
||||
<Separator title='Changed topic' theme={theme} />
|
||||
<Message msg='new topic' type='room_changed_topic' isInfo />
|
||||
|
||||
<Separator title='Changed type' theme={theme} />
|
||||
<Message msg='public' type='room_changed_privacy' isInfo />
|
||||
|
||||
<Separator title='Toggle e2e encryption' theme={theme} />
|
||||
<Message type='room_e2e_disabled' isInfo />
|
||||
<Message type='room_e2e_enabled' isInfo />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Ignored' theme={theme} />
|
||||
stories.add('Ignored', () => (
|
||||
<Message isIgnored />
|
||||
));
|
||||
|
||||
<Separator title='Custom style' theme={theme} />
|
||||
stories.add('Custom style', () => (
|
||||
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
||||
|
||||
<Separator title='Markdown emphasis' theme={theme} />
|
||||
<Message msg='Italic with single _underscore_ or double __underscores__. Bold with single *asterisk* or double **asterisks**. Strikethrough with single ~Strikethrough~ or double ~~Strikethrough~~' />
|
||||
|
||||
<Separator title='Markdown headers' theme={theme} />
|
||||
<Message
|
||||
msg='# H1
|
||||
## H2
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6'
|
||||
/>
|
||||
|
||||
<Separator title='Markdown links' theme={theme} />
|
||||
<Message msg='Support <http://google.com|Google> [I`m an inline-style link](https://www.google.com) https://google.com' />
|
||||
|
||||
<Separator title='Starting with empty link' theme={theme} />
|
||||
<Message msg='[ ](https://www.google.com) <- No link should render' />
|
||||
|
||||
<Separator title='Markdown image' theme={theme} />
|
||||
<Message msg='' />
|
||||
|
||||
<Separator title='Markdown code' theme={theme} />
|
||||
<Message
|
||||
msg='Inline `code` has `back-ticks around` it.
|
||||
```
|
||||
Code block
|
||||
```'
|
||||
/>
|
||||
|
||||
<Separator title='Markdown quote' theme={theme} />
|
||||
<Message msg='> Quote' />
|
||||
|
||||
<Separator title='Markdown table' theme={theme} />
|
||||
<Message
|
||||
msg='First Header | Second Header
|
||||
------------ | -------------
|
||||
Content from cell 1 | Content from cell 2
|
||||
Content in the first column | Content in the second column'
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, Dimensions } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
// import moment from 'moment';
|
||||
|
||||
import { themes } from '../../app/constants/colors';
|
||||
import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
|
||||
import { longText } from '../utils';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
import { store } from './index';
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
const { width } = Dimensions.get('window');
|
||||
let _theme = 'light';
|
||||
const _theme = 'light';
|
||||
const lastMessage = {
|
||||
u: {
|
||||
username: 'diego.mello'
|
||||
|
|
@ -22,7 +25,6 @@ const updatedAt = {
|
|||
|
||||
const RoomItem = props => (
|
||||
<RoomItemComponent
|
||||
rid='abc'
|
||||
type='d'
|
||||
name='rocket.cat'
|
||||
avatar='rocket.cat'
|
||||
|
|
@ -34,24 +36,27 @@ const RoomItem = props => (
|
|||
/>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme={_theme} />;
|
||||
const stories = storiesOf('Room Item', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>);
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export default ({ theme }) => {
|
||||
_theme = theme;
|
||||
return (
|
||||
<ScrollView style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
|
||||
<Separator title='Basic' />
|
||||
|
||||
stories.add('Basic', () => (
|
||||
<RoomItem />
|
||||
));
|
||||
|
||||
<Separator title='User' />
|
||||
|
||||
stories.add('User', () => (
|
||||
<>
|
||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||
<RoomItem
|
||||
name={longText}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Type' />
|
||||
stories.add('Type', () => (
|
||||
<>
|
||||
<RoomItem type='d' />
|
||||
<RoomItem type='c' />
|
||||
<RoomItem type='p' />
|
||||
|
|
@ -59,16 +64,22 @@ export default ({ theme }) => {
|
|||
<RoomItem type='discussion' />
|
||||
<RoomItem type='d' isGroupChat />
|
||||
<RoomItem type='&' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='User status' />
|
||||
stories.add('User status', () => (
|
||||
<>
|
||||
<RoomItem status='online' />
|
||||
<RoomItem status='away' />
|
||||
<RoomItem status='busy' />
|
||||
<RoomItem status='offline' />
|
||||
<RoomItem status='loading' />
|
||||
<RoomItem status='wrong' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Alerts' />
|
||||
stories.add('Alerts', () => (
|
||||
<>
|
||||
<RoomItem alert />
|
||||
<RoomItem alert name='unread' unread={1} />
|
||||
<RoomItem alert name='unread' unread={1000} />
|
||||
|
|
@ -80,8 +91,11 @@ export default ({ theme }) => {
|
|||
<RoomItem name='user mentions priority 1' alert unread={1} userMentions={1} groupMentions={1} tunread={[1]} />
|
||||
<RoomItem name='group mentions priority 2' alert unread={1} groupMentions={1} tunread={[1]} />
|
||||
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Last Message' />
|
||||
stories.add('Last Message', () => (
|
||||
<>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
/>
|
||||
|
|
@ -126,6 +140,5 @@ export default ({ theme }) => {
|
|||
tunread={[1]}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
</>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Text, StyleSheet } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
marginLeft: 10,
|
||||
fontSize: 20,
|
||||
fontWeight: '300'
|
||||
}
|
||||
});
|
||||
|
||||
const Separator = ({ title, style, theme }) => (
|
||||
<Text
|
||||
style={[
|
||||
styles.separator,
|
||||
{
|
||||
color: themes[theme].titleText
|
||||
},
|
||||
style
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
);
|
||||
|
||||
Separator.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
theme: PropTypes.string,
|
||||
style: PropTypes.object
|
||||
};
|
||||
|
||||
export default Separator;
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
|
||||
import { UiKitMessage } from '../../app/containers/UIKit';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme='light' />;
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
@ -17,34 +17,58 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
export default () => (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
<Separator title='Section' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const user = {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||
};
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
|
||||
const messageDecorator = story => (
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
baseUrl,
|
||||
onPress: () => {},
|
||||
onLongPress: () => {},
|
||||
reactionInit: () => {},
|
||||
onErrorPress: () => {},
|
||||
replyBroadcast: () => {},
|
||||
onReactionPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onReactionLongPress: () => {},
|
||||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
const stories = storiesOf('UiKitMessage', module)
|
||||
.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
|
||||
.addDecorator(story => <ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>{story()}</ScrollView>)
|
||||
.addDecorator(messageDecorator);
|
||||
|
||||
const Section = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section'
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section', () => <Section />);
|
||||
|
||||
<Separator title='Section + Markdown List' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionMarkdownList = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: '*List*:\n1. Item'
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Markdown List', () => <SectionMarkdownList />);
|
||||
|
||||
<Separator title='Section + Overflow' />
|
||||
{
|
||||
UiKitMessage([
|
||||
const SectionOverflow = () => UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
|
|
@ -89,12 +113,10 @@ export default () => (
|
|||
]
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Overflow', () => <SectionOverflow />);
|
||||
|
||||
<Separator title='Section + image' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionImage = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
|
|
@ -105,12 +127,10 @@ export default () => (
|
|||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'plants'
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + image', () => <SectionImage />);
|
||||
|
||||
<Separator title='Section + button' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionButton = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
|
|
@ -123,12 +143,10 @@ export default () => (
|
|||
text: 'button'
|
||||
}
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + button', () => <SectionButton />);
|
||||
|
||||
<Separator title='Section + Select' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionSelect = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
|
|
@ -151,12 +169,10 @@ export default () => (
|
|||
}
|
||||
}]
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Select', () => <SectionSelect />);
|
||||
|
||||
<Separator title='Section + DatePicker' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionDatePicker = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
|
|
@ -171,12 +187,10 @@ export default () => (
|
|||
emoji: true
|
||||
}
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + DatePicker', () => <SectionDatePicker />);
|
||||
|
||||
<Separator title='Section + Multi Select' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const SectionMultiSelect = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
|
|
@ -210,12 +224,10 @@ export default () => (
|
|||
value: 4
|
||||
}]
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Multi Select', () => <SectionMultiSelect />);
|
||||
|
||||
<Separator title='Image' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const Image = () => UiKitMessage([{
|
||||
type: 'image',
|
||||
title: {
|
||||
type: 'plain_text',
|
||||
|
|
@ -224,12 +236,10 @@ export default () => (
|
|||
},
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'Example Image'
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Image', () => <Image />);
|
||||
|
||||
<Separator title='Context' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const Context = () => UiKitMessage([{
|
||||
type: 'context',
|
||||
elements: [{
|
||||
type: 'image',
|
||||
|
|
@ -246,12 +256,10 @@ export default () => (
|
|||
text: 'context'
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Context', () => <Context />);
|
||||
|
||||
<Separator title='Action - Buttons' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const ActionButton = () => UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
|
|
@ -325,12 +333,10 @@ export default () => (
|
|||
value: 'click_me_123'
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Action - Buttons', () => <ActionButton />);
|
||||
|
||||
<Separator title='Fields' />
|
||||
{
|
||||
UiKitMessage([
|
||||
const Fields = () => UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
fields: [
|
||||
|
|
@ -360,12 +366,10 @@ export default () => (
|
|||
emoji: true
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Fields', () => <Fields />);
|
||||
|
||||
<Separator title='Action - Select' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
const ActionSelect = () => UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
|
|
@ -435,8 +439,13 @@ export default () => (
|
|||
]
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}]);
|
||||
stories.add('Action - Select', () => <ActionSelect />);
|
||||
|
||||
// stories.add('Section', () => UiKitMessage([{
|
||||
// type: 'section',
|
||||
// text: {
|
||||
// type: 'mrkdwn',
|
||||
// text: 'Section'
|
||||
// }
|
||||
// }]));
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import { UiKitModal, UiKitComponent } from '../../app/containers/UIKit';
|
||||
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme='light' />;
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
@ -18,12 +18,40 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
export default () => (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
<Separator title='Modal - Section and Selects' />
|
||||
{
|
||||
UiKitModal([
|
||||
const user = {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||
};
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
|
||||
const messageDecorator = story => (
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
baseUrl,
|
||||
onPress: () => {},
|
||||
onLongPress: () => {},
|
||||
reactionInit: () => {},
|
||||
onErrorPress: () => {},
|
||||
replyBroadcast: () => {},
|
||||
onReactionPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onReactionLongPress: () => {},
|
||||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
const stories = storiesOf('UiKitModal', module)
|
||||
.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
|
||||
.addDecorator(story => <ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>{story()}</ScrollView>)
|
||||
.addDecorator(messageDecorator);
|
||||
|
||||
const ModalSectionSelects = () => UiKitModal([
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
|
|
@ -60,12 +88,10 @@ export default () => (
|
|||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);
|
||||
|
||||
<Separator title='Modal - Section Accessories' />
|
||||
{
|
||||
UiKitModal([
|
||||
const ModalSectionAccessories = () => UiKitModal([
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
|
|
@ -108,12 +134,10 @@ export default () => (
|
|||
text: '*Notes:*\nWebSummit Conference'
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);
|
||||
|
||||
<Separator title='Modal - Form Input' />
|
||||
{
|
||||
UiKitModal([
|
||||
const ModalFormInput = () => UiKitModal([
|
||||
{
|
||||
type: 'input',
|
||||
element: {
|
||||
|
|
@ -171,12 +195,10 @@ export default () => (
|
|||
emoji: true
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Form Input', () => <ModalFormInput />);
|
||||
|
||||
<Separator title='Modal - Form TextArea' />
|
||||
{
|
||||
UiKitModal([
|
||||
const ModalFormTextArea = () => UiKitModal([
|
||||
{
|
||||
type: 'context',
|
||||
elements: [{
|
||||
|
|
@ -228,12 +250,10 @@ export default () => (
|
|||
emoji: true
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);
|
||||
|
||||
<Separator title='Modal - Images' />
|
||||
{
|
||||
UiKitModal([
|
||||
const ModalImages = () => UiKitModal([
|
||||
{
|
||||
type: 'image',
|
||||
title: {
|
||||
|
|
@ -271,12 +291,10 @@ export default () => (
|
|||
text: '*Next stop, Mars!*\nMussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.'
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Images', () => <ModalImages />);
|
||||
|
||||
<Separator title='Modal - Actions' />
|
||||
{
|
||||
UiKitModal([{
|
||||
const ModalActions = () => UiKitModal([{
|
||||
type: 'input',
|
||||
element: {
|
||||
type: 'plain_text_input'
|
||||
|
|
@ -286,15 +304,15 @@ export default () => (
|
|||
text: 'Title',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Details'
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
|
|
@ -313,8 +331,8 @@ export default () => (
|
|||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
|
|
@ -333,8 +351,8 @@ export default () => (
|
|||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
|
|
@ -353,8 +371,8 @@ export default () => (
|
|||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
|
|
@ -373,8 +391,8 @@ export default () => (
|
|||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
element: {
|
||||
type: 'plain_text_input',
|
||||
|
|
@ -390,12 +408,10 @@ export default () => (
|
|||
text: 'Description',
|
||||
emoji: true
|
||||
}
|
||||
}])
|
||||
}
|
||||
}]);
|
||||
stories.add('Modal - Actions', () => <ModalActions />);
|
||||
|
||||
<Separator title='Modal - Contexts and Dividers' />
|
||||
{
|
||||
UiKitModal([
|
||||
const ModalContextsDividers = () => UiKitModal([
|
||||
{
|
||||
type: 'context',
|
||||
elements: [{
|
||||
|
|
@ -493,10 +509,10 @@ export default () => (
|
|||
]
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Contexts and Dividers', () => <ModalContextsDividers />);
|
||||
|
||||
<Separator title='Modal - Input with error' />
|
||||
const ModalInputWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -514,8 +530,10 @@ export default () => (
|
|||
}]}
|
||||
/>
|
||||
</KitContext.Provider>
|
||||
);
|
||||
stories.add('Modal - Input with error', () => <ModalInputWithError />);
|
||||
|
||||
<Separator title='Modal - Multilne with error' />
|
||||
const ModalMultilneWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -534,8 +552,10 @@ export default () => (
|
|||
}]}
|
||||
/>
|
||||
</KitContext.Provider>
|
||||
);
|
||||
stories.add('Modal - Multilne with error', () => <ModalMultilneWithError />);
|
||||
|
||||
<Separator title='Modal - DatePicker with error' />
|
||||
const ModalDatePickerWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -559,6 +579,5 @@ export default () => (
|
|||
}]}
|
||||
/>
|
||||
</KitContext.Provider>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
stories.add('Modal - DatePicker with error', () => <ModalDatePickerWithError />);
|
||||
|
|
|
|||
|
|
@ -1,37 +1,22 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore, combineReducers } from 'redux';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import RoomItem from './RoomItem';
|
||||
import './RoomItem';
|
||||
import './List';
|
||||
import './ServerItem';
|
||||
import Message from './Message';
|
||||
import UiKitMessage from './UiKitMessage';
|
||||
import UiKitModal from './UiKitModal';
|
||||
import Markdown from './Markdown';
|
||||
import './Message';
|
||||
import './UiKitMessage';
|
||||
import './UiKitModal';
|
||||
import './Markdown';
|
||||
import './HeaderButtons';
|
||||
import './UnreadBadge';
|
||||
import '../../app/views/ThreadMessagesView/Item.stories.js';
|
||||
import './Avatar';
|
||||
import '../../app/containers/BackgroundContainer/index.stories.js';
|
||||
import '../../app/containers/RoomHeader/RoomHeader.stories.js';
|
||||
import Avatar from './Avatar';
|
||||
// import RoomViewHeader from './RoomViewHeader';
|
||||
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
// MessageProvider
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
const user = {
|
||||
id: '',
|
||||
username: 'diego.mello',
|
||||
token: ''
|
||||
};
|
||||
|
||||
// Change here to see themed storybook
|
||||
const theme = 'light';
|
||||
export const theme = 'light';
|
||||
|
||||
const reducers = combineReducers({
|
||||
settings: () => ({}),
|
||||
|
|
@ -52,47 +37,4 @@ const reducers = combineReducers({
|
|||
meteor: () => ({ connected: true }),
|
||||
activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
|
||||
});
|
||||
const store = createStore(reducers);
|
||||
|
||||
const messageDecorator = story => (
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
baseUrl,
|
||||
onPress: () => {},
|
||||
onLongPress: () => {},
|
||||
reactionInit: () => {},
|
||||
onErrorPress: () => {},
|
||||
replyBroadcast: () => {},
|
||||
onReactionPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onReactionLongPress: () => {},
|
||||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
storiesOf('RoomItem', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.add('list roomitem', () => <RoomItem theme={theme} />);
|
||||
storiesOf('Message', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(messageDecorator)
|
||||
.add('list message', () => <Message theme={theme} />);
|
||||
|
||||
storiesOf('UiKitMessage', module)
|
||||
.addDecorator(messageDecorator)
|
||||
.add('list uikitmessage', () => <UiKitMessage theme={theme} />);
|
||||
storiesOf('UiKitModal', module)
|
||||
.addDecorator(messageDecorator)
|
||||
.add('list UiKitModal', () => <UiKitModal theme={theme} />);
|
||||
storiesOf('Markdown', module)
|
||||
.add('list Markdown', () => <Markdown theme={theme} />);
|
||||
storiesOf('Avatar', module)
|
||||
.add('list Avatar', () => <Avatar theme={theme} />);
|
||||
|
||||
// FIXME: I couldn't make these pass on jest :(
|
||||
// storiesOf('RoomViewHeader', module)
|
||||
// .add('list', () => <RoomViewHeader theme='black' />);
|
||||
export const store = createStore(reducers);
|
||||
|
|
|
|||
Loading…
Reference in New Issue