[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,
|
"react/forbid-prop-types": 0,
|
||||||
"jsx-quotes": [2, "prefer-single"],
|
"jsx-quotes": [2, "prefer-single"],
|
||||||
"jsx-a11y/href-no-hash": 0,
|
"jsx-a11y/href-no-hash": 0,
|
||||||
|
"jsx-a11y/aria-role": 0,
|
||||||
"import/prefer-default-export": 0,
|
"import/prefer-default-export": 0,
|
||||||
"import/no-cycle": 0,
|
"import/no-cycle": 0,
|
||||||
"camelcase": 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 React from 'react';
|
||||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
import PropTypes from 'prop-types';
|
import { storiesOf } from '@storybook/react-native';
|
||||||
|
|
||||||
import { themes } from '../../app/constants/colors';
|
|
||||||
import Avatar from '../../app/containers/Avatar/Avatar';
|
import Avatar from '../../app/containers/Avatar/Avatar';
|
||||||
import Status from '../../app/containers/Status/Status';
|
import Status from '../../app/containers/Status/Status';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
|
||||||
import sharedStyles from '../../app/views/Styles';
|
import sharedStyles from '../../app/views/Styles';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
|
@ -16,40 +15,44 @@ const styles = StyleSheet.create({
|
||||||
|
|
||||||
const server = 'https://open.rocket.chat';
|
const server = 'https://open.rocket.chat';
|
||||||
|
|
||||||
const Separator = ({ title, theme }) => <StoriesSeparator title={title} theme={theme} />;
|
const _theme = 'light';
|
||||||
Separator.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
theme: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
const AvatarStories = ({ theme }) => (
|
const stories = storiesOf('Avatar', module);
|
||||||
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
|
|
||||||
<Separator title='Avatar by text' theme={theme} />
|
stories.add('Avatar by text', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Avatar by roomId' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Avatar by roomId', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
type='p'
|
type='p'
|
||||||
rid='devWBbYr7inwupPqK'
|
rid='devWBbYr7inwupPqK'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Avatar by url' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Avatar by url', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Avatar by path' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Avatar by path', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
avatar='/avatar/diego.mello'
|
avatar='/avatar/diego.mello'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='With ETag' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('With ETag', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
type='d'
|
type='d'
|
||||||
text='djorkaeff.alexandre'
|
text='djorkaeff.alexandre'
|
||||||
|
|
@ -57,84 +60,107 @@ const AvatarStories = ({ theme }) => (
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Without ETag' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Without ETag', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
type='d'
|
type='d'
|
||||||
text='djorkaeff.alexandre'
|
text='djorkaeff.alexandre'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Emoji' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Emoji', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
emoji='troll'
|
emoji='troll'
|
||||||
getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })}
|
getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })}
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Direct' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Direct', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='diego.mello'
|
text='diego.mello'
|
||||||
server={server}
|
server={server}
|
||||||
type='d'
|
type='d'
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Channel' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Channel', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='general'
|
text='general'
|
||||||
server={server}
|
server={server}
|
||||||
type='c'
|
type='c'
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Touchable' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Touchable', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server={server}
|
server={server}
|
||||||
onPress={() => console.log('Pressed!')}
|
onPress={() => console.log('Pressed!')}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Static' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Static', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||||
server={server}
|
server={server}
|
||||||
isStatic
|
isStatic
|
||||||
size={56}
|
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
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server={server}
|
server={server}
|
||||||
borderRadius={28}
|
borderRadius={28}
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Children' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Children', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
>
|
>
|
||||||
<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
|
|
||||||
<Status
|
<Status
|
||||||
size={20}
|
size={24}
|
||||||
status='online'
|
style={[sharedStyles.status, styles.status]}
|
||||||
|
theme={_theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<Separator title='Wrong server' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Wrong server', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server='https://google.com'
|
server='https://google.com'
|
||||||
size={56}
|
size={56}
|
||||||
/>
|
/>
|
||||||
<Separator title='Custom style' theme={theme} />
|
));
|
||||||
|
|
||||||
|
stories.add('Custom style', () => (
|
||||||
<Avatar
|
<Avatar
|
||||||
text='Avatar'
|
text='Avatar'
|
||||||
server={server}
|
server={server}
|
||||||
size={56}
|
size={56}
|
||||||
style={styles.custom}
|
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 React from 'react';
|
||||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||||
|
import { storiesOf } from '@storybook/react-native';
|
||||||
|
|
||||||
import Markdown from '../../app/containers/markdown';
|
import Markdown from '../../app/containers/markdown';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
|
||||||
import { themes } from '../../app/constants/colors';
|
import { themes } from '../../app/constants/colors';
|
||||||
|
|
||||||
|
|
||||||
|
const theme = 'light';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
marginHorizontal: 15
|
marginHorizontal: 15,
|
||||||
|
backgroundColor: themes[theme].backgroundColor,
|
||||||
|
marginVertical: 50
|
||||||
},
|
},
|
||||||
separator: {
|
separator: {
|
||||||
marginHorizontal: 10,
|
marginHorizontal: 10,
|
||||||
|
|
@ -37,48 +42,31 @@ const getCustomEmoji = (content) => {
|
||||||
return customEmoji;
|
return customEmoji;
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line arrow-body-style
|
const stories = storiesOf('Markdown', module);
|
||||||
export default ({ theme }) => {
|
|
||||||
return (
|
stories.add('Text', () => (
|
||||||
<ScrollView
|
|
||||||
style={{
|
|
||||||
backgroundColor: themes[theme].backgroundColor,
|
|
||||||
marginVertical: 50
|
|
||||||
}}
|
|
||||||
contentContainerStyle={{
|
|
||||||
paddingBottom: 50
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<StoriesSeparator style={styles.separator} title='Short Text' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Long Text' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={longText}
|
msg={longText}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Line Break Text' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={lineBreakText}
|
msg={lineBreakText}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Sequential empty spaces' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={sequentialEmptySpacesText}
|
msg={sequentialEmptySpacesText}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
|
<Markdown
|
||||||
|
msg='Strong emphasis, aka bold, with **asterisks** or __underscores__'
|
||||||
|
theme={theme}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Edited' theme={theme} />
|
stories.add('Edited', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='This is edited'
|
msg='This is edited'
|
||||||
|
|
@ -86,8 +74,9 @@ export default ({ theme }) => {
|
||||||
isEdited
|
isEdited
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Preview' theme={theme} />
|
stories.add('Preview', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={longText}
|
msg={longText}
|
||||||
|
|
@ -129,9 +118,10 @@ export default ({ theme }) => {
|
||||||
preview
|
preview
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Mentions' theme={theme} />
|
stories.add('Mentions', () => (
|
||||||
<View style={styles.container}>
|
<ScrollView style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='@rocket.cat @name1 @all @here @unknown'
|
msg='@rocket.cat @name1 @all @here @unknown'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
|
|
@ -143,10 +133,6 @@ export default ({ theme }) => {
|
||||||
]}
|
]}
|
||||||
username='rocket.cat'
|
username='rocket.cat'
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Mentions with Real Name' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='@rocket.cat @name1 @all @here @unknown'
|
msg='@rocket.cat @name1 @all @here @unknown'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
|
|
@ -159,9 +145,10 @@ export default ({ theme }) => {
|
||||||
username='rocket.cat'
|
username='rocket.cat'
|
||||||
useRealName
|
useRealName
|
||||||
/>
|
/>
|
||||||
</View>
|
</ScrollView>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Hashtag' theme={theme} />
|
stories.add('Hashtag', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='#test-channel #unknown'
|
msg='#test-channel #unknown'
|
||||||
|
|
@ -169,8 +156,9 @@ export default ({ theme }) => {
|
||||||
channels={[{ _id: '123', name: 'test-channel' }]}
|
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Emoji' theme={theme} />
|
stories.add('Emoji', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||||
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||||
|
|
@ -187,8 +175,9 @@ export default ({ theme }) => {
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Block Quote' theme={theme} />
|
stories.add('Block quote', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={`> This is block quote
|
msg={`> This is block quote
|
||||||
|
|
@ -196,19 +185,23 @@ this is a normal line`}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Links' theme={theme} />
|
stories.add('Links', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' theme={theme} />
|
<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' theme={theme} />
|
||||||
<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
|
<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Image' theme={theme} />
|
|
||||||
|
stories.add('Image', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown msg='' theme={theme} />
|
<Markdown msg='' theme={theme} />
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Headers' theme={theme} />
|
stories.add('Headers', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='# Header 1'
|
msg='# Header 1'
|
||||||
|
|
@ -235,17 +228,14 @@ this is a normal line`}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Inline Code' theme={theme} />
|
stories.add('Code', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='This is `inline code`'
|
msg='This is `inline code`'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Code Block' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='Inline `code` has `back-ticks around` it.
|
msg='Inline `code` has `back-ticks around` it.
|
||||||
```
|
```
|
||||||
|
|
@ -254,32 +244,22 @@ Code block
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Lists' theme={theme} />
|
stories.add('Lists', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'}
|
msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Numbered Lists' theme={theme} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={'1. Open Source\n2. Rocket.Chat'}
|
msg={'1. Open Source\n2. Rocket.Chat'}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Emphasis' theme={theme} />
|
stories.add('Table', () => (
|
||||||
<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} />
|
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='First Header | Second Header
|
msg='First Header | Second Header
|
||||||
|
|
@ -289,6 +269,4 @@ Content in the first column | Content in the second column'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
));
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
import React from 'react';
|
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 moment from 'moment';
|
||||||
|
|
||||||
import MessageComponent from '../../app/containers/message/Message';
|
import MessageComponent from '../../app/containers/message/Message';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
|
||||||
import messagesStatus from '../../app/constants/messagesStatus';
|
import messagesStatus from '../../app/constants/messagesStatus';
|
||||||
import MessageSeparator from '../../app/views/RoomView/Separator';
|
import MessageSeparator from '../../app/views/RoomView/Separator';
|
||||||
|
import MessageContext from '../../app/containers/message/Context';
|
||||||
|
|
||||||
import { themes } from '../../app/constants/colors';
|
import { themes } from '../../app/constants/colors';
|
||||||
|
import { store } from './index';
|
||||||
|
|
||||||
let _theme = 'light';
|
const _theme = 'light';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
separator: {
|
|
||||||
marginTop: 30,
|
|
||||||
marginBottom: 0
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const user = {
|
const user = {
|
||||||
|
|
@ -40,6 +40,26 @@ const getCustomEmoji = (content) => {
|
||||||
return customEmoji;
|
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 => (
|
const Message = props => (
|
||||||
<MessageComponent
|
<MessageComponent
|
||||||
baseUrl={baseUrl}
|
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' />
|
<Message msg='Message' />
|
||||||
|
|
||||||
<Separator title='Long message' theme={theme} />
|
|
||||||
<Message msg={longText} />
|
<Message msg={longText} />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Grouped messages' theme={theme} />
|
stories.add('Grouped messages', () => (
|
||||||
|
<>
|
||||||
<Message msg='...' />
|
<Message msg='...' />
|
||||||
<Message
|
<Message
|
||||||
msg='Different user'
|
msg='Different user'
|
||||||
|
|
@ -81,11 +101,15 @@ export default ({ theme }) => {
|
||||||
<Message msg='This is the third message' isHeader={false} />
|
<Message msg='This is the third message' isHeader={false} />
|
||||||
<Message msg='This is the second message' isHeader={false} />
|
<Message msg='This is the second message' isHeader={false} />
|
||||||
<Message msg='This is the first message' />
|
<Message msg='This is the first message' />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Without header' theme={theme} />
|
stories.add('Without header', () => (
|
||||||
<Message msg='Message' isHeader={false} />
|
<Message msg='Message' isHeader={false} />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='With alias' theme={theme} />
|
stories.add('With alias', () => (
|
||||||
|
<>
|
||||||
<Message msg='Message' alias='Diego Mello' />
|
<Message msg='Message' alias='Diego Mello' />
|
||||||
<Message
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
|
|
@ -95,11 +119,15 @@ export default ({ theme }) => {
|
||||||
}}
|
}}
|
||||||
alias='Diego Mello'
|
alias='Diego Mello'
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Edited' theme={theme} />
|
stories.add('Edited', () => (
|
||||||
<Message msg='Message' edited />
|
<Message msg='Message' edited />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Encrypted' theme={theme} />
|
stories.add('Encrypted', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
type='e2e'
|
type='e2e'
|
||||||
|
|
@ -113,13 +141,13 @@ export default ({ theme }) => {
|
||||||
msg='Message Encrypted with Reactions'
|
msg='Message Encrypted with Reactions'
|
||||||
reactions={[{
|
reactions={[{
|
||||||
emoji: ':joy:',
|
emoji: ':joy:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':marioparty:',
|
emoji: ':marioparty:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':thinking:',
|
emoji: ':thinking:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}]}
|
}]}
|
||||||
onReactionPress={() => {}}
|
onReactionPress={() => {}}
|
||||||
type='e2e'
|
type='e2e'
|
||||||
|
|
@ -162,28 +190,33 @@ export default ({ theme }) => {
|
||||||
isHeader={false}
|
isHeader={false}
|
||||||
type='e2e'
|
type='e2e'
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Block Quote' theme={theme} />
|
stories.add('Block Quote', () => (
|
||||||
|
<>
|
||||||
<Message msg='> Testing block quote' />
|
<Message msg='> Testing block quote' />
|
||||||
<Message msg={'> Testing block quote\nTesting 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'} />
|
<Message msg={'* Dogs\n * cats\n - cats'} />
|
||||||
|
|
||||||
<Separator title='Numerated lists' theme={theme} />
|
|
||||||
<Message msg={'1. Dogs \n 2. Cats'} />
|
<Message msg={'1. Dogs \n 2. Cats'} />
|
||||||
|
|
||||||
<Separator title='Numerated lists in separated messages' theme={theme} />
|
|
||||||
<Message msg='1. Dogs' />
|
<Message msg='1. Dogs' />
|
||||||
<Message msg='2. Cats' isHeader={false} />
|
<Message msg='2. Cats' isHeader={false} />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Static avatar' theme={theme} />
|
stories.add('Static avatar', () => (
|
||||||
<Message
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg'
|
avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg'
|
||||||
/>
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Full name' theme={theme} />
|
stories.add('Full name', () => (
|
||||||
<Message
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
author={{
|
author={{
|
||||||
|
|
@ -193,8 +226,10 @@ export default ({ theme }) => {
|
||||||
}}
|
}}
|
||||||
useRealName
|
useRealName
|
||||||
/>
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Mentions' theme={theme} />
|
stories.add('Mentions', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='@rocket.cat @diego.mello @all @here #general'
|
msg='@rocket.cat @diego.mello @all @here #general'
|
||||||
mentions={[{
|
mentions={[{
|
||||||
|
|
@ -225,76 +260,77 @@ export default ({ theme }) => {
|
||||||
name: 'general'
|
name: 'general'
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Emojis' theme={theme} />
|
stories.add('Emojis', () => (
|
||||||
|
<>
|
||||||
<Message msg='👊🤙👏' />
|
<Message msg='👊🤙👏' />
|
||||||
|
|
||||||
<Separator title='Single Emoji' theme={theme} />
|
|
||||||
<Message msg='👏' />
|
<Message msg='👏' />
|
||||||
|
|
||||||
<Separator title='Custom Emojis' theme={theme} />
|
|
||||||
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
||||||
|
|
||||||
<Separator title='Single Custom Emojis' theme={theme} />
|
|
||||||
<Message msg=':react_rocket:' />
|
<Message msg=':react_rocket:' />
|
||||||
|
|
||||||
<Separator title='Normal Emoji + Custom Emojis' theme={theme} />
|
|
||||||
<Message msg='🤙:react_rocket:' />
|
<Message msg='🤙:react_rocket:' />
|
||||||
|
|
||||||
<Separator title='Four emoji' theme={theme} />
|
|
||||||
<Message msg='🤙:react_rocket:🤙🤙' />
|
<Message msg='🤙:react_rocket:🤙🤙' />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Time format' theme={theme} />
|
stories.add('Time format', () => (
|
||||||
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Reactions' theme={theme} />
|
stories.add('Reactions', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='Reactions'
|
msg='Reactions'
|
||||||
reactions={[{
|
reactions={[{
|
||||||
emoji: ':joy:',
|
emoji: ':joy:',
|
||||||
usernames: [{ value: 'username' }, { value: 'rocket.cat' }, { value: 'diego.mello' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':marioparty:',
|
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:',
|
emoji: ':thinking:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: new Array(999)
|
||||||
|
}, {
|
||||||
|
emoji: ':thinking:',
|
||||||
|
usernames: new Array(9999)
|
||||||
}]}
|
}]}
|
||||||
onReactionPress={() => {}}
|
onReactionPress={() => {}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Separator title='Multiple reactions' theme={theme} />
|
|
||||||
<Message
|
<Message
|
||||||
msg='Multiple Reactions'
|
msg='Multiple Reactions'
|
||||||
reactions={[{
|
reactions={[{
|
||||||
emoji: ':marioparty:',
|
emoji: ':marioparty:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':react_rocket:',
|
emoji: ':react_rocket:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':nyan_rocket:',
|
emoji: ':nyan_rocket:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':heart:',
|
emoji: ':heart:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':dog:',
|
emoji: ':dog:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':grinning:',
|
emoji: ':grinning:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':grimacing:',
|
emoji: ':grimacing:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}, {
|
}, {
|
||||||
emoji: ':grin:',
|
emoji: ':grin:',
|
||||||
usernames: [{ value: 'username' }]
|
usernames: [user.username]
|
||||||
}]}
|
}]}
|
||||||
onReactionPress={() => {}}
|
onReactionPress={() => {}}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Intercalated users' theme={theme} />
|
stories.add('Date and Unread separators', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='Fourth message'
|
msg='Fourth message'
|
||||||
author={{
|
author={{
|
||||||
|
|
@ -302,27 +338,9 @@ export default ({ theme }) => {
|
||||||
username: 'rocket.cat'
|
username: 'rocket.cat'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<MessageSeparator ts={date} unread theme={_theme} />
|
||||||
<Message msg='Third message' />
|
<Message msg='Third message' />
|
||||||
<Message
|
<MessageSeparator unread theme={_theme} />
|
||||||
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} />
|
|
||||||
<Message
|
<Message
|
||||||
msg='Second message'
|
msg='Second message'
|
||||||
author={{
|
author={{
|
||||||
|
|
@ -338,10 +356,13 @@ export default ({ theme }) => {
|
||||||
username: 'rocket.cat'
|
username: 'rocket.cat'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<MessageSeparator ts={date} theme={theme} />
|
<MessageSeparator ts={date} theme={_theme} />
|
||||||
<Message msg='First message' />
|
<Message msg='First message' />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='With image' theme={theme} />
|
stories.add('With image', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
attachments={[{
|
attachments={[{
|
||||||
title: 'This is a title',
|
title: 'This is a title',
|
||||||
|
|
@ -356,8 +377,11 @@ export default ({ theme }) => {
|
||||||
image_url: '/dummypath'
|
image_url: '/dummypath'
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='With video' theme={theme} />
|
stories.add('With video', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
attachments={[{
|
attachments={[{
|
||||||
title: 'This is a title',
|
title: 'This is a title',
|
||||||
|
|
@ -371,8 +395,11 @@ export default ({ theme }) => {
|
||||||
video_url: '/dummypath'
|
video_url: '/dummypath'
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='With audio' theme={theme} />
|
stories.add('With audio', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
attachments={[{
|
attachments={[{
|
||||||
title: 'This is a title',
|
title: 'This is a title',
|
||||||
|
|
@ -403,8 +430,11 @@ export default ({ theme }) => {
|
||||||
}]}
|
}]}
|
||||||
isHeader={false}
|
isHeader={false}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='With file' theme={theme} />
|
stories.add('With file', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
attachments={[{
|
attachments={[{
|
||||||
text: 'File.pdf',
|
text: 'File.pdf',
|
||||||
|
|
@ -418,16 +448,18 @@ export default ({ theme }) => {
|
||||||
}]}
|
}]}
|
||||||
isHeader={false}
|
isHeader={false}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Message with reply' theme={theme} />
|
stories.add('Message with reply', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg="I'm fine!"
|
msg="I'm fine!"
|
||||||
attachments={[{
|
attachments={[{
|
||||||
author_name: 'I\'m a very long long title and I\'ll break',
|
author_name: 'I\'m a very long long title and I\'ll break',
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
text: 'How are you?',
|
text: 'How are you?'
|
||||||
message_link: 'http:///example.com'
|
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
<Message
|
<Message
|
||||||
|
|
@ -436,12 +468,14 @@ export default ({ theme }) => {
|
||||||
author_name: 'rocket.cat',
|
author_name: 'rocket.cat',
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
text: 'How are you? :nyan_rocket:',
|
text: 'How are you? :nyan_rocket:'
|
||||||
message_link: 'http:///example.com'
|
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Message with read receipt' theme={theme} />
|
stories.add('Message with read receipt', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg="I'm fine!"
|
msg="I'm fine!"
|
||||||
isReadReceiptEnabled
|
isReadReceiptEnabled
|
||||||
|
|
@ -464,8 +498,11 @@ export default ({ theme }) => {
|
||||||
read
|
read
|
||||||
isHeader={false}
|
isHeader={false}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Message with thread' theme={theme} />
|
stories.add('Message with thread', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='How are you?'
|
msg='How are you?'
|
||||||
tcount={1}
|
tcount={1}
|
||||||
|
|
@ -483,12 +520,6 @@ export default ({ theme }) => {
|
||||||
tmsg='Thread with emoji :) :joy:'
|
tmsg='Thread with emoji :) :joy:'
|
||||||
isThreadReply
|
isThreadReply
|
||||||
/>
|
/>
|
||||||
<Message
|
|
||||||
msg="I'm fine!"
|
|
||||||
tmid='1'
|
|
||||||
tmsg='Markdown: [link](http://www.google.com/) ```block code```'
|
|
||||||
isThreadReply
|
|
||||||
/>
|
|
||||||
<Message
|
<Message
|
||||||
msg="I'm fine!"
|
msg="I'm fine!"
|
||||||
tmid='1'
|
tmid='1'
|
||||||
|
|
@ -517,8 +548,11 @@ export default ({ theme }) => {
|
||||||
}]}
|
}]}
|
||||||
isThreadReply
|
isThreadReply
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Sequential thread messages following thread button' theme={theme} />
|
stories.add('Sequential thread messages following thread button', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='How are you?'
|
msg='How are you?'
|
||||||
tcount={1}
|
tcount={1}
|
||||||
|
|
@ -543,8 +577,11 @@ export default ({ theme }) => {
|
||||||
tmid='1'
|
tmid='1'
|
||||||
isThreadSequential
|
isThreadSequential
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Sequential thread messages following thread reply' theme={theme} />
|
stories.add('Sequential thread messages following thread reply', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg="I'm fine!"
|
msg="I'm fine!"
|
||||||
tmid='1'
|
tmid='1'
|
||||||
|
|
@ -570,29 +607,11 @@ export default ({ theme }) => {
|
||||||
tmid='1'
|
tmid='1'
|
||||||
isThreadSequential
|
isThreadSequential
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
{/* <Message
|
stories.add('Discussion', () => (
|
||||||
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} />
|
|
||||||
<Message
|
<Message
|
||||||
type='discussion-created'
|
type='discussion-created'
|
||||||
drid='aisduhasidhs'
|
drid='aisduhasidhs'
|
||||||
|
|
@ -621,37 +640,11 @@ export default ({ theme }) => {
|
||||||
dlm={date}
|
dlm={date}
|
||||||
msg='This is a discussion'
|
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'
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
|
stories.add('URL', () => (
|
||||||
<Separator title='URL' theme={theme} />
|
<>
|
||||||
<Message
|
<Message
|
||||||
urls={[{
|
urls={[{
|
||||||
url: 'https://rocket.chat',
|
url: 'https://rocket.chat',
|
||||||
|
|
@ -680,8 +673,11 @@ export default ({ theme }) => {
|
||||||
}]}
|
}]}
|
||||||
isHeader={false}
|
isHeader={false}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Custom fields' theme={theme} />
|
stories.add('Custom fields', () => (
|
||||||
|
<>
|
||||||
<Message
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
attachments={[{
|
attachments={[{
|
||||||
|
|
@ -689,7 +685,6 @@ export default ({ theme }) => {
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
text: 'Custom fields',
|
text: 'Custom fields',
|
||||||
message_link: 'http:///example.com',
|
|
||||||
fields: [{
|
fields: [{
|
||||||
title: 'Field 1',
|
title: 'Field 1',
|
||||||
value: 'Value 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
|
<Message
|
||||||
msg='Message'
|
msg='Message'
|
||||||
attachments={[{
|
attachments={[{
|
||||||
|
|
@ -717,7 +714,6 @@ export default ({ theme }) => {
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
text: 'Custom fields',
|
text: 'Custom fields',
|
||||||
message_link: 'http:///example.com',
|
|
||||||
fields: [{
|
fields: [{
|
||||||
title: 'Field 1',
|
title: 'Field 1',
|
||||||
value: 'Value 1',
|
value: 'Value 1',
|
||||||
|
|
@ -732,7 +728,6 @@ export default ({ theme }) => {
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
text: 'Custom fields 2',
|
text: 'Custom fields 2',
|
||||||
message_link: 'http:///example.com',
|
|
||||||
fields: [{
|
fields: [{
|
||||||
title: 'Field 1',
|
title: 'Field 1',
|
||||||
value: 'Value 1',
|
value: 'Value 1',
|
||||||
|
|
@ -744,8 +739,9 @@ export default ({ theme }) => {
|
||||||
}]
|
}]
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Colored attachments' theme={theme} />
|
stories.add('Colored attachments', () => (
|
||||||
<Message
|
<Message
|
||||||
attachments={[{
|
attachments={[{
|
||||||
color: 'red',
|
color: 'red',
|
||||||
|
|
@ -780,41 +776,37 @@ export default ({ theme }) => {
|
||||||
value: 'Value 2',
|
value: 'Value 2',
|
||||||
short: true
|
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!')} />
|
<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 />
|
<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' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
|
||||||
<Message hasError msg='This message has error too' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} isHeader={false} />
|
<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 />
|
<Message msg='Temp message' status={messagesStatus.TEMP} isTemp />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Editing' theme={theme} />
|
stories.add('Editing', () => (
|
||||||
<Message msg='Message being edited' editing />
|
<Message msg='Message being edited' editing />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Removed' theme={theme} />
|
stories.add('System messages', () => (
|
||||||
|
<>
|
||||||
<Message type='rm' isInfo />
|
<Message type='rm' isInfo />
|
||||||
|
|
||||||
<Separator title='Joined' theme={theme} />
|
|
||||||
<Message type='uj' isInfo />
|
<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
|
<Message
|
||||||
msg='New name'
|
msg='New name'
|
||||||
type='message_pinned'
|
type='message_pinned'
|
||||||
|
|
@ -823,104 +815,40 @@ export default ({ theme }) => {
|
||||||
author_name: 'rocket.cat',
|
author_name: 'rocket.cat',
|
||||||
ts: date,
|
ts: date,
|
||||||
timeFormat: 'LT',
|
timeFormat: 'LT',
|
||||||
message_link: 'http:///example.com',
|
|
||||||
text: 'First message'
|
text: 'First message'
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Separator title='Has left the channel' theme={theme} />
|
|
||||||
<Message type='ul' isInfo />
|
<Message type='ul' isInfo />
|
||||||
|
|
||||||
<Separator title='User removed' theme={theme} />
|
|
||||||
<Message msg='rocket.cat' type='ru' isInfo />
|
<Message msg='rocket.cat' type='ru' isInfo />
|
||||||
|
|
||||||
<Separator title='User added' theme={theme} />
|
|
||||||
<Message msg='rocket.cat' type='au' isInfo />
|
<Message msg='rocket.cat' type='au' isInfo />
|
||||||
|
|
||||||
<Separator title='User muted' theme={theme} />
|
|
||||||
<Message msg='rocket.cat' type='user-muted' isInfo />
|
<Message msg='rocket.cat' type='user-muted' isInfo />
|
||||||
|
|
||||||
<Separator title='User unmuted' theme={theme} />
|
|
||||||
<Message msg='rocket.cat' type='user-unmuted' isInfo />
|
<Message msg='rocket.cat' type='user-unmuted' isInfo />
|
||||||
|
|
||||||
<Separator title='Role added' theme={theme} />
|
|
||||||
<Message
|
<Message
|
||||||
msg='rocket.cat'
|
msg='rocket.cat'
|
||||||
role='admin' // eslint-disable-line
|
role='admin'
|
||||||
type='subscription-role-added'
|
type='subscription-role-added'
|
||||||
isInfo
|
isInfo
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Separator title='Role removed' theme={theme} />
|
|
||||||
<Message
|
<Message
|
||||||
msg='rocket.cat'
|
msg='rocket.cat'
|
||||||
role='admin' // eslint-disable-line
|
role='admin'
|
||||||
type='subscription-role-removed'
|
type='subscription-role-removed'
|
||||||
isInfo
|
isInfo
|
||||||
/>
|
/>
|
||||||
|
<Message msg='New name' type='r' isInfo />
|
||||||
<Separator title='Changed description' theme={theme} />
|
|
||||||
<Message msg='new description' type='room_changed_description' 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 />
|
<Message msg='new announcement' type='room_changed_announcement' isInfo />
|
||||||
|
|
||||||
<Separator title='Changed topic' theme={theme} />
|
|
||||||
<Message msg='new topic' type='room_changed_topic' isInfo />
|
<Message msg='new topic' type='room_changed_topic' isInfo />
|
||||||
|
|
||||||
<Separator title='Changed type' theme={theme} />
|
|
||||||
<Message msg='public' type='room_changed_privacy' isInfo />
|
<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_disabled' isInfo />
|
||||||
<Message type='room_e2e_enabled' isInfo />
|
<Message type='room_e2e_enabled' isInfo />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Ignored' theme={theme} />
|
stories.add('Ignored', () => (
|
||||||
<Message isIgnored />
|
<Message isIgnored />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Custom style' theme={theme} />
|
stories.add('Custom style', () => (
|
||||||
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
<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 React from 'react';
|
||||||
import { ScrollView, Dimensions } from 'react-native';
|
import { ScrollView, Dimensions } from 'react-native';
|
||||||
|
import { storiesOf } from '@storybook/react-native';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
// import moment from 'moment';
|
// import moment from 'moment';
|
||||||
|
|
||||||
import { themes } from '../../app/constants/colors';
|
import { themes } from '../../app/constants/colors';
|
||||||
import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
|
import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
|
||||||
import { longText } from '../utils';
|
import { longText } from '../utils';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
import { store } from './index';
|
||||||
|
|
||||||
const baseUrl = 'https://open.rocket.chat';
|
const baseUrl = 'https://open.rocket.chat';
|
||||||
const { width } = Dimensions.get('window');
|
const { width } = Dimensions.get('window');
|
||||||
let _theme = 'light';
|
const _theme = 'light';
|
||||||
const lastMessage = {
|
const lastMessage = {
|
||||||
u: {
|
u: {
|
||||||
username: 'diego.mello'
|
username: 'diego.mello'
|
||||||
|
|
@ -22,7 +25,6 @@ const updatedAt = {
|
||||||
|
|
||||||
const RoomItem = props => (
|
const RoomItem = props => (
|
||||||
<RoomItemComponent
|
<RoomItemComponent
|
||||||
rid='abc'
|
|
||||||
type='d'
|
type='d'
|
||||||
name='rocket.cat'
|
name='rocket.cat'
|
||||||
avatar='rocket.cat'
|
avatar='rocket.cat'
|
||||||
|
|
@ -34,24 +36,27 @@ const RoomItem = props => (
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
// eslint-disable-next-line react/prop-types
|
const stories = storiesOf('Room Item', module)
|
||||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme={_theme} />;
|
.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 }) => {
|
stories.add('Basic', () => (
|
||||||
_theme = theme;
|
|
||||||
return (
|
|
||||||
<ScrollView style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
|
|
||||||
<Separator title='Basic' />
|
|
||||||
<RoomItem />
|
<RoomItem />
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='User' />
|
|
||||||
|
stories.add('User', () => (
|
||||||
|
<>
|
||||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||||
<RoomItem
|
<RoomItem
|
||||||
name={longText}
|
name={longText}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Type' />
|
stories.add('Type', () => (
|
||||||
|
<>
|
||||||
<RoomItem type='d' />
|
<RoomItem type='d' />
|
||||||
<RoomItem type='c' />
|
<RoomItem type='c' />
|
||||||
<RoomItem type='p' />
|
<RoomItem type='p' />
|
||||||
|
|
@ -59,16 +64,22 @@ export default ({ theme }) => {
|
||||||
<RoomItem type='discussion' />
|
<RoomItem type='discussion' />
|
||||||
<RoomItem type='d' isGroupChat />
|
<RoomItem type='d' isGroupChat />
|
||||||
<RoomItem type='&' />
|
<RoomItem type='&' />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='User status' />
|
stories.add('User status', () => (
|
||||||
|
<>
|
||||||
<RoomItem status='online' />
|
<RoomItem status='online' />
|
||||||
<RoomItem status='away' />
|
<RoomItem status='away' />
|
||||||
<RoomItem status='busy' />
|
<RoomItem status='busy' />
|
||||||
<RoomItem status='offline' />
|
<RoomItem status='offline' />
|
||||||
<RoomItem status='loading' />
|
<RoomItem status='loading' />
|
||||||
<RoomItem status='wrong' />
|
<RoomItem status='wrong' />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Alerts' />
|
stories.add('Alerts', () => (
|
||||||
|
<>
|
||||||
<RoomItem alert />
|
<RoomItem alert />
|
||||||
<RoomItem alert name='unread' unread={1} />
|
<RoomItem alert name='unread' unread={1} />
|
||||||
<RoomItem alert name='unread' unread={1000} />
|
<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='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='group mentions priority 2' alert unread={1} groupMentions={1} tunread={[1]} />
|
||||||
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Last Message' />
|
stories.add('Last Message', () => (
|
||||||
|
<>
|
||||||
<RoomItem
|
<RoomItem
|
||||||
showLastMessage
|
showLastMessage
|
||||||
/>
|
/>
|
||||||
|
|
@ -126,6 +140,5 @@ export default ({ theme }) => {
|
||||||
tunread={[1]}
|
tunread={[1]}
|
||||||
lastMessage={lastMessage}
|
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 React from 'react';
|
||||||
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
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 { UiKitMessage } from '../../app/containers/UIKit';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
import { themes } from '../../app/constants/colors';
|
||||||
|
|
||||||
// eslint-disable-next-line react/prop-types
|
|
||||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme='light' />;
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
|
|
@ -17,34 +17,58 @@ const styles = StyleSheet.create({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default () => (
|
const user = {
|
||||||
<SafeAreaView style={styles.container}>
|
id: 'y8bd77ptZswPj3EW8',
|
||||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
username: 'diego.mello',
|
||||||
<Separator title='Section' />
|
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||||
{
|
};
|
||||||
UiKitMessage([{
|
|
||||||
|
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',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
text: 'Section'
|
text: 'Section'
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section', () => <Section />);
|
||||||
|
|
||||||
<Separator title='Section + Markdown List' />
|
const SectionMarkdownList = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
text: '*List*:\n1. Item'
|
text: '*List*:\n1. Item'
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + Markdown List', () => <SectionMarkdownList />);
|
||||||
|
|
||||||
<Separator title='Section + Overflow' />
|
const SectionOverflow = () => UiKitMessage([
|
||||||
{
|
|
||||||
UiKitMessage([
|
|
||||||
{
|
{
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
|
|
@ -89,12 +113,10 @@ export default () => (
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
}
|
stories.add('Section + Overflow', () => <SectionOverflow />);
|
||||||
|
|
||||||
<Separator title='Section + image' />
|
const SectionImage = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
|
|
@ -105,12 +127,10 @@ export default () => (
|
||||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||||
altText: 'plants'
|
altText: 'plants'
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + image', () => <SectionImage />);
|
||||||
|
|
||||||
<Separator title='Section + button' />
|
const SectionButton = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
|
|
@ -123,12 +143,10 @@ export default () => (
|
||||||
text: 'button'
|
text: 'button'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + button', () => <SectionButton />);
|
||||||
|
|
||||||
<Separator title='Section + Select' />
|
const SectionSelect = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
|
|
@ -151,12 +169,10 @@ export default () => (
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + Select', () => <SectionSelect />);
|
||||||
|
|
||||||
<Separator title='Section + DatePicker' />
|
const SectionDatePicker = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
|
|
@ -171,12 +187,10 @@ export default () => (
|
||||||
emoji: true
|
emoji: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + DatePicker', () => <SectionDatePicker />);
|
||||||
|
|
||||||
<Separator title='Section + Multi Select' />
|
const SectionMultiSelect = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'mrkdwn',
|
type: 'mrkdwn',
|
||||||
|
|
@ -210,12 +224,10 @@ export default () => (
|
||||||
value: 4
|
value: 4
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Section + Multi Select', () => <SectionMultiSelect />);
|
||||||
|
|
||||||
<Separator title='Image' />
|
const Image = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'image',
|
type: 'image',
|
||||||
title: {
|
title: {
|
||||||
type: 'plain_text',
|
type: 'plain_text',
|
||||||
|
|
@ -224,12 +236,10 @@ export default () => (
|
||||||
},
|
},
|
||||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||||
altText: 'Example Image'
|
altText: 'Example Image'
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Image', () => <Image />);
|
||||||
|
|
||||||
<Separator title='Context' />
|
const Context = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'context',
|
type: 'context',
|
||||||
elements: [{
|
elements: [{
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
@ -246,12 +256,10 @@ export default () => (
|
||||||
text: 'context'
|
text: 'context'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Context', () => <Context />);
|
||||||
|
|
||||||
<Separator title='Action - Buttons' />
|
const ActionButton = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'actions',
|
type: 'actions',
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
|
|
@ -325,12 +333,10 @@ export default () => (
|
||||||
value: 'click_me_123'
|
value: 'click_me_123'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Action - Buttons', () => <ActionButton />);
|
||||||
|
|
||||||
<Separator title='Fields' />
|
const Fields = () => UiKitMessage([
|
||||||
{
|
|
||||||
UiKitMessage([
|
|
||||||
{
|
{
|
||||||
type: 'section',
|
type: 'section',
|
||||||
fields: [
|
fields: [
|
||||||
|
|
@ -360,12 +366,10 @@ export default () => (
|
||||||
emoji: true
|
emoji: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Fields', () => <Fields />);
|
||||||
|
|
||||||
<Separator title='Action - Select' />
|
const ActionSelect = () => UiKitMessage([{
|
||||||
{
|
|
||||||
UiKitMessage([{
|
|
||||||
type: 'actions',
|
type: 'actions',
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
|
|
@ -435,8 +439,13 @@ export default () => (
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Action - Select', () => <ActionSelect />);
|
||||||
</ScrollView>
|
|
||||||
</SafeAreaView>
|
// 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 React from 'react';
|
||||||
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
||||||
|
import { storiesOf } from '@storybook/react-native';
|
||||||
|
|
||||||
import { UiKitModal, UiKitComponent } from '../../app/containers/UIKit';
|
import { UiKitModal, UiKitComponent } from '../../app/containers/UIKit';
|
||||||
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
||||||
import StoriesSeparator from './StoriesSeparator';
|
import MessageContext from '../../app/containers/message/Context';
|
||||||
|
import { themes } from '../../app/constants/colors';
|
||||||
// eslint-disable-next-line react/prop-types
|
|
||||||
const Separator = ({ title }) => <StoriesSeparator title={title} theme='light' />;
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
|
|
@ -18,12 +18,40 @@ const styles = StyleSheet.create({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default () => (
|
const user = {
|
||||||
<SafeAreaView style={styles.container}>
|
id: 'y8bd77ptZswPj3EW8',
|
||||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
username: 'diego.mello',
|
||||||
<Separator title='Modal - Section and Selects' />
|
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||||
{
|
};
|
||||||
UiKitModal([
|
|
||||||
|
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',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
|
|
@ -60,12 +88,10 @@ export default () => (
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
}
|
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);
|
||||||
|
|
||||||
<Separator title='Modal - Section Accessories' />
|
const ModalSectionAccessories = () => UiKitModal([
|
||||||
{
|
|
||||||
UiKitModal([
|
|
||||||
{
|
{
|
||||||
type: 'section',
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
|
|
@ -108,12 +134,10 @@ export default () => (
|
||||||
text: '*Notes:*\nWebSummit Conference'
|
text: '*Notes:*\nWebSummit Conference'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
}
|
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);
|
||||||
|
|
||||||
<Separator title='Modal - Form Input' />
|
const ModalFormInput = () => UiKitModal([
|
||||||
{
|
|
||||||
UiKitModal([
|
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
element: {
|
element: {
|
||||||
|
|
@ -171,12 +195,10 @@ export default () => (
|
||||||
emoji: true
|
emoji: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
}
|
stories.add('Modal - Form Input', () => <ModalFormInput />);
|
||||||
|
|
||||||
<Separator title='Modal - Form TextArea' />
|
const ModalFormTextArea = () => UiKitModal([
|
||||||
{
|
|
||||||
UiKitModal([
|
|
||||||
{
|
{
|
||||||
type: 'context',
|
type: 'context',
|
||||||
elements: [{
|
elements: [{
|
||||||
|
|
@ -228,12 +250,10 @@ export default () => (
|
||||||
emoji: true
|
emoji: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
}
|
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);
|
||||||
|
|
||||||
<Separator title='Modal - Images' />
|
const ModalImages = () => UiKitModal([
|
||||||
{
|
|
||||||
UiKitModal([
|
|
||||||
{
|
{
|
||||||
type: 'image',
|
type: 'image',
|
||||||
title: {
|
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.'
|
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' />
|
const ModalActions = () => UiKitModal([{
|
||||||
{
|
|
||||||
UiKitModal([{
|
|
||||||
type: 'input',
|
type: 'input',
|
||||||
element: {
|
element: {
|
||||||
type: 'plain_text_input'
|
type: 'plain_text_input'
|
||||||
|
|
@ -390,12 +408,10 @@ export default () => (
|
||||||
text: 'Description',
|
text: 'Description',
|
||||||
emoji: true
|
emoji: true
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
}
|
stories.add('Modal - Actions', () => <ModalActions />);
|
||||||
|
|
||||||
<Separator title='Modal - Contexts and Dividers' />
|
const ModalContextsDividers = () => UiKitModal([
|
||||||
{
|
|
||||||
UiKitModal([
|
|
||||||
{
|
{
|
||||||
type: 'context',
|
type: 'context',
|
||||||
elements: [{
|
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' } }}>
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||||
<UiKitComponent
|
<UiKitComponent
|
||||||
render={UiKitModal}
|
render={UiKitModal}
|
||||||
|
|
@ -514,8 +530,10 @@ export default () => (
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
</KitContext.Provider>
|
</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' } }}>
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||||
<UiKitComponent
|
<UiKitComponent
|
||||||
render={UiKitModal}
|
render={UiKitModal}
|
||||||
|
|
@ -534,8 +552,10 @@ export default () => (
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
</KitContext.Provider>
|
</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' } }}>
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||||
<UiKitComponent
|
<UiKitComponent
|
||||||
render={UiKitModal}
|
render={UiKitModal}
|
||||||
|
|
@ -559,6 +579,5 @@ export default () => (
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
</KitContext.Provider>
|
</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 */
|
/* 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 { createStore, combineReducers } from 'redux';
|
||||||
import { storiesOf } from '@storybook/react-native';
|
|
||||||
|
|
||||||
import RoomItem from './RoomItem';
|
import './RoomItem';
|
||||||
import './List';
|
import './List';
|
||||||
import './ServerItem';
|
import './ServerItem';
|
||||||
import Message from './Message';
|
import './Message';
|
||||||
import UiKitMessage from './UiKitMessage';
|
import './UiKitMessage';
|
||||||
import UiKitModal from './UiKitModal';
|
import './UiKitModal';
|
||||||
import Markdown from './Markdown';
|
import './Markdown';
|
||||||
import './HeaderButtons';
|
import './HeaderButtons';
|
||||||
import './UnreadBadge';
|
import './UnreadBadge';
|
||||||
import '../../app/views/ThreadMessagesView/Item.stories.js';
|
import '../../app/views/ThreadMessagesView/Item.stories.js';
|
||||||
|
import './Avatar';
|
||||||
import '../../app/containers/BackgroundContainer/index.stories.js';
|
import '../../app/containers/BackgroundContainer/index.stories.js';
|
||||||
import '../../app/containers/RoomHeader/RoomHeader.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
|
// Change here to see themed storybook
|
||||||
const theme = 'light';
|
export const theme = 'light';
|
||||||
|
|
||||||
const reducers = combineReducers({
|
const reducers = combineReducers({
|
||||||
settings: () => ({}),
|
settings: () => ({}),
|
||||||
|
|
@ -52,47 +37,4 @@ const reducers = combineReducers({
|
||||||
meteor: () => ({ connected: true }),
|
meteor: () => ({ connected: true }),
|
||||||
activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
|
activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
|
||||||
});
|
});
|
||||||
const store = createStore(reducers);
|
export 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' />);
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue