[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,125 +15,152 @@ 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} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
const stories = storiesOf('Avatar', module);
|
||||
|
||||
stories.add('Avatar by text', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Avatar by roomId', () => (
|
||||
<Avatar
|
||||
type='p'
|
||||
rid='devWBbYr7inwupPqK'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Avatar by url', () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Avatar by path', () => (
|
||||
<Avatar
|
||||
avatar='/avatar/diego.mello'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('With ETag', () => (
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
avatarETag='5ag8KffJcZj9m5rCv'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Without ETag', () => (
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Emoji', () => (
|
||||
<Avatar
|
||||
emoji='troll'
|
||||
getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })}
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Direct', () => (
|
||||
<Avatar
|
||||
text='diego.mello'
|
||||
server={server}
|
||||
type='d'
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Channel', () => (
|
||||
<Avatar
|
||||
text='general'
|
||||
server={server}
|
||||
type='c'
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Touchable', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
onPress={() => console.log('Pressed!')}
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Static', () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
isStatic
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
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}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Children', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
>
|
||||
<Status
|
||||
size={24}
|
||||
style={[sharedStyles.status, styles.status]}
|
||||
theme={_theme}
|
||||
/>
|
||||
<Separator title='Avatar by roomId' theme={theme} />
|
||||
<Avatar
|
||||
type='p'
|
||||
rid='devWBbYr7inwupPqK'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Avatar by url' theme={theme} />
|
||||
<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} />
|
||||
<Avatar
|
||||
avatar='/avatar/diego.mello'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='With ETag' theme={theme} />
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
avatarETag='5ag8KffJcZj9m5rCv'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Without ETag' theme={theme} />
|
||||
<Avatar
|
||||
type='d'
|
||||
text='djorkaeff.alexandre'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Emoji' theme={theme} />
|
||||
<Avatar
|
||||
emoji='troll'
|
||||
getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })}
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Direct' theme={theme} />
|
||||
<Avatar
|
||||
text='diego.mello'
|
||||
server={server}
|
||||
type='d'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Channel' theme={theme} />
|
||||
<Avatar
|
||||
text='general'
|
||||
server={server}
|
||||
type='c'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Touchable' theme={theme} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
onPress={() => console.log('Pressed!')}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Static' theme={theme} />
|
||||
<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} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
borderRadius={28}
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Children' theme={theme} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
>
|
||||
<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
|
||||
<Status
|
||||
size={20}
|
||||
status='online'
|
||||
/>
|
||||
</View>
|
||||
</Avatar>
|
||||
<Separator title='Wrong server' theme={theme} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server='https://google.com'
|
||||
size={56}
|
||||
/>
|
||||
<Separator title='Custom style' theme={theme} />
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
style={styles.custom}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
AvatarStories.propTypes = {
|
||||
theme: PropTypes.string
|
||||
};
|
||||
export default AvatarStories;
|
||||
</Avatar>
|
||||
));
|
||||
|
||||
stories.add('Wrong server', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server='https://google.com'
|
||||
size={56}
|
||||
/>
|
||||
));
|
||||
|
||||
stories.add('Custom style', () => (
|
||||
<Avatar
|
||||
text='Avatar'
|
||||
server={server}
|
||||
size={56}
|
||||
style={styles.custom}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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,258 +42,231 @@ 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} />
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||
</View>
|
||||
const stories = storiesOf('Markdown', module);
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Long Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Text', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg={sequentialEmptySpacesText}
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='Strong emphasis, aka bold, with **asterisks** or __underscores__'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Line Break Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Edited', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is edited'
|
||||
theme={theme}
|
||||
isEdited
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Sequential empty spaces' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={sequentialEmptySpacesText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Preview', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg={sequentialEmptySpacesText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown #general #unknown'
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
<Markdown
|
||||
msg='Testing: 😃 :+1: :marioparty:'
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Edited' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is edited'
|
||||
theme={theme}
|
||||
isEdited
|
||||
/>
|
||||
</View>
|
||||
stories.add('Mentions', () => (
|
||||
<ScrollView style={styles.container}>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
theme={theme}
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
theme={theme}
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
username='rocket.cat'
|
||||
useRealName
|
||||
/>
|
||||
</ScrollView>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Preview' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg={sequentialEmptySpacesText}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown #general #unknown'
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
<Markdown
|
||||
msg='Testing: 😃 :+1: :marioparty:'
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
numberOfLines={1}
|
||||
preview
|
||||
/>
|
||||
</View>
|
||||
stories.add('Hashtag', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='#test-channel #unknown'
|
||||
theme={theme}
|
||||
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Mentions' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
theme={theme}
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
</View>
|
||||
stories.add('Emoji', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||
<Markdown
|
||||
msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:'
|
||||
theme={theme}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
baseUrl={baseUrl}
|
||||
/>
|
||||
<Markdown
|
||||
msg='😃 :+1: :marioparty:'
|
||||
theme={theme}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
baseUrl={baseUrl}
|
||||
/>
|
||||
</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}
|
||||
mentions={[
|
||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
||||
{ _id: 'here', username: 'here' },
|
||||
{ _id: 'all', username: 'all' }
|
||||
]}
|
||||
username='rocket.cat'
|
||||
useRealName
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Hashtag' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='#test-channel #unknown'
|
||||
theme={theme}
|
||||
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Emoji' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||
<Markdown
|
||||
msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:'
|
||||
theme={theme}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
baseUrl={baseUrl}
|
||||
/>
|
||||
<Markdown
|
||||
msg='😃 :+1: :marioparty:'
|
||||
theme={theme}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
baseUrl={baseUrl}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Block Quote' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={`> This is block quote
|
||||
stories.add('Block quote', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={`> This is block quote
|
||||
this is a normal line`}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Links' theme={theme} />
|
||||
<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>
|
||||
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} />
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='' theme={theme} />
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Headers' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='# Header 1'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='## Header 2'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='### Header 3'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='#### Header 4'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='##### Header 5'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='###### Header 6'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Image', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Inline Code' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is `inline code`'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Headers', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='# Header 1'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='## Header 2'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='### Header 3'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='#### Header 4'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='##### Header 5'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='###### Header 6'
|
||||
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.
|
||||
stories.add('Code', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is `inline code`'
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg='Inline `code` has `back-ticks around` it.
|
||||
```
|
||||
Code block
|
||||
```'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Lists' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
stories.add('Lists', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'}
|
||||
theme={theme}
|
||||
/>
|
||||
<Markdown
|
||||
msg={'1. Open Source\n2. Rocket.Chat'}
|
||||
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} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='First Header | Second Header
|
||||
stories.add('Table', () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='First Header | Second Header
|
||||
------------ | -------------
|
||||
Content from cell 1 | Content from cell 2
|
||||
Content in the first column | Content in the second column'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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,98 +36,109 @@ 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' />
|
||||
<RoomItem />
|
||||
|
||||
<Separator title='User' />
|
||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||
<RoomItem
|
||||
name={longText}
|
||||
/>
|
||||
stories.add('Basic', () => (
|
||||
<RoomItem />
|
||||
));
|
||||
|
||||
<Separator title='Type' />
|
||||
<RoomItem type='d' />
|
||||
<RoomItem type='c' />
|
||||
<RoomItem type='p' />
|
||||
<RoomItem type='l' />
|
||||
<RoomItem type='discussion' />
|
||||
<RoomItem type='d' isGroupChat />
|
||||
<RoomItem type='&' />
|
||||
|
||||
<Separator title='User status' />
|
||||
<RoomItem status='online' />
|
||||
<RoomItem status='away' />
|
||||
<RoomItem status='busy' />
|
||||
<RoomItem status='offline' />
|
||||
<RoomItem status='loading' />
|
||||
<RoomItem status='wrong' />
|
||||
stories.add('User', () => (
|
||||
<>
|
||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||
<RoomItem
|
||||
name={longText}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Alerts' />
|
||||
<RoomItem alert />
|
||||
<RoomItem alert name='unread' unread={1} />
|
||||
<RoomItem alert name='unread' unread={1000} />
|
||||
<RoomItem alert name='user mentions' unread={1} userMentions={1} />
|
||||
<RoomItem alert name='group mentions' unread={1} groupMentions={1} />
|
||||
<RoomItem alert name='thread unread' tunread={[1]} />
|
||||
<RoomItem alert name='thread unread user' tunread={[1]} tunreadUser={[1]} />
|
||||
<RoomItem alert name='thread unread group' tunread={[1]} tunreadGroup={[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='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||
stories.add('Type', () => (
|
||||
<>
|
||||
<RoomItem type='d' />
|
||||
<RoomItem type='c' />
|
||||
<RoomItem type='p' />
|
||||
<RoomItem type='l' />
|
||||
<RoomItem type='discussion' />
|
||||
<RoomItem type='d' isGroupChat />
|
||||
<RoomItem type='&' />
|
||||
</>
|
||||
));
|
||||
|
||||
<Separator title='Last Message' />
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={{
|
||||
u: {
|
||||
username: 'rocket.chat'
|
||||
},
|
||||
msg: '2'
|
||||
}}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={{
|
||||
u: {
|
||||
username: 'diego.mello'
|
||||
},
|
||||
msg: '1'
|
||||
}}
|
||||
username='diego.mello'
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
unread={1}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
unread={1000}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
tunread={[1]}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
stories.add('User status', () => (
|
||||
<>
|
||||
<RoomItem status='online' />
|
||||
<RoomItem status='away' />
|
||||
<RoomItem status='busy' />
|
||||
<RoomItem status='offline' />
|
||||
<RoomItem status='loading' />
|
||||
<RoomItem status='wrong' />
|
||||
</>
|
||||
));
|
||||
|
||||
stories.add('Alerts', () => (
|
||||
<>
|
||||
<RoomItem alert />
|
||||
<RoomItem alert name='unread' unread={1} />
|
||||
<RoomItem alert name='unread' unread={1000} />
|
||||
<RoomItem alert name='user mentions' unread={1} userMentions={1} />
|
||||
<RoomItem alert name='group mentions' unread={1} groupMentions={1} />
|
||||
<RoomItem alert name='thread unread' tunread={[1]} />
|
||||
<RoomItem alert name='thread unread user' tunread={[1]} tunreadUser={[1]} />
|
||||
<RoomItem alert name='thread unread group' tunread={[1]} tunreadGroup={[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='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||
</>
|
||||
));
|
||||
|
||||
stories.add('Last Message', () => (
|
||||
<>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={{
|
||||
u: {
|
||||
username: 'rocket.chat'
|
||||
},
|
||||
msg: '2'
|
||||
}}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={{
|
||||
u: {
|
||||
username: 'diego.mello'
|
||||
},
|
||||
msg: '1'
|
||||
}}
|
||||
username='diego.mello'
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
unread={1}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
unread={1000}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
alert
|
||||
tunread={[1]}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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,426 +17,435 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
export default () => (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
<Separator title='Section' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
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 />);
|
||||
|
||||
const SectionMarkdownList = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: '*List*:\n1. Item'
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Markdown List', () => <SectionMarkdownList />);
|
||||
|
||||
const SectionOverflow = () => UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + Overflow'
|
||||
},
|
||||
accessory: {
|
||||
type: 'overflow',
|
||||
options: [
|
||||
{
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section'
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + Markdown List' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: '*List*:\n1. Item'
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + Overflow' />
|
||||
{
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + Overflow'
|
||||
},
|
||||
accessory: {
|
||||
type: 'overflow',
|
||||
options: [
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 1',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-0'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 2',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-1'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 3',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-2'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 4',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-3'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
<Separator title='Section + image' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + Image'
|
||||
},
|
||||
accessory: {
|
||||
type: 'image',
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'plants'
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + button' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + button'
|
||||
},
|
||||
accessory: {
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
}
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + Select' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + select'
|
||||
},
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
}
|
||||
}, {
|
||||
value: 2,
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'second button'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + DatePicker' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + DatePicker'
|
||||
},
|
||||
accessory: {
|
||||
type: 'datepicker',
|
||||
initial_date: '1990-04-28',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a date',
|
||||
emoji: true
|
||||
}
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Section + Multi Select' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + select'
|
||||
},
|
||||
accessory: {
|
||||
type: 'multi_static_select',
|
||||
options: [{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
},
|
||||
value: 1
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 1'
|
||||
},
|
||||
value: 2
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 2'
|
||||
},
|
||||
value: 3
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 3'
|
||||
},
|
||||
value: 4
|
||||
}]
|
||||
}
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Image' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'image',
|
||||
title: {
|
||||
type: 'plain_text',
|
||||
text: 'Example Image',
|
||||
text: 'Option 1',
|
||||
emoji: true
|
||||
},
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'Example Image'
|
||||
}])
|
||||
}
|
||||
|
||||
<Separator title='Context' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'context',
|
||||
elements: [{
|
||||
type: 'image',
|
||||
title: {
|
||||
type: 'plain_text',
|
||||
text: 'Example Image',
|
||||
emoji: true
|
||||
},
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'Example Image'
|
||||
value: 'value-0'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 2',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'mrkdwn',
|
||||
text: 'context'
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
value: 'value-1'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 3',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-2'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Option 4',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-3'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Overflow', () => <SectionOverflow />);
|
||||
|
||||
<Separator title='Action - Buttons' />
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Approve'
|
||||
},
|
||||
style: 'primary',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
const SectionImage = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + Image'
|
||||
},
|
||||
accessory: {
|
||||
type: 'image',
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'plants'
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + image', () => <SectionImage />);
|
||||
|
||||
<Separator title='Fields' />
|
||||
{
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
fields: [
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
}
|
||||
]
|
||||
}])
|
||||
}
|
||||
const SectionButton = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + button'
|
||||
},
|
||||
accessory: {
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
}
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + button', () => <SectionButton />);
|
||||
|
||||
<Separator title='Action - Select' />
|
||||
const SectionSelect = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + select'
|
||||
},
|
||||
accessory: {
|
||||
type: 'static_select',
|
||||
options: [
|
||||
{
|
||||
UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
type: 'conversations_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a conversation',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'channels_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a channel',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'users_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a user',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'static_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select an item',
|
||||
emoji: true
|
||||
},
|
||||
options: [
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Excellent item 1',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-0'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Fantastic item 2',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-1'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Nifty item 3',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-2'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Pretty good item 4',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}])
|
||||
value: 1,
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
}
|
||||
}, {
|
||||
value: 2,
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'second button'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Select', () => <SectionSelect />);
|
||||
|
||||
const SectionDatePicker = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + DatePicker'
|
||||
},
|
||||
accessory: {
|
||||
type: 'datepicker',
|
||||
initial_date: '1990-04-28',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a date',
|
||||
emoji: true
|
||||
}
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + DatePicker', () => <SectionDatePicker />);
|
||||
|
||||
const SectionMultiSelect = () => UiKitMessage([{
|
||||
type: 'section',
|
||||
text: {
|
||||
type: 'mrkdwn',
|
||||
text: 'Section + select'
|
||||
},
|
||||
accessory: {
|
||||
type: 'multi_static_select',
|
||||
options: [{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'button'
|
||||
},
|
||||
value: 1
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 1'
|
||||
},
|
||||
value: 2
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 2'
|
||||
},
|
||||
value: 3
|
||||
}, {
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'opt 3'
|
||||
},
|
||||
value: 4
|
||||
}]
|
||||
}
|
||||
}]);
|
||||
stories.add('Section + Multi Select', () => <SectionMultiSelect />);
|
||||
|
||||
const Image = () => UiKitMessage([{
|
||||
type: 'image',
|
||||
title: {
|
||||
type: 'plain_text',
|
||||
text: 'Example Image',
|
||||
emoji: true
|
||||
},
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'Example Image'
|
||||
}]);
|
||||
stories.add('Image', () => <Image />);
|
||||
|
||||
const Context = () => UiKitMessage([{
|
||||
type: 'context',
|
||||
elements: [{
|
||||
type: 'image',
|
||||
title: {
|
||||
type: 'plain_text',
|
||||
text: 'Example Image',
|
||||
emoji: true
|
||||
},
|
||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||
altText: 'Example Image'
|
||||
},
|
||||
{
|
||||
type: 'mrkdwn',
|
||||
text: 'context'
|
||||
}
|
||||
]
|
||||
}]);
|
||||
stories.add('Context', () => <Context />);
|
||||
|
||||
const ActionButton = () => UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Approve'
|
||||
},
|
||||
style: 'primary',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
emoji: true,
|
||||
text: 'Deny'
|
||||
},
|
||||
style: 'danger',
|
||||
value: 'click_me_123'
|
||||
}
|
||||
]
|
||||
}]);
|
||||
stories.add('Action - Buttons', () => <ActionButton />);
|
||||
|
||||
const Fields = () => UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
fields: [
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
},
|
||||
{
|
||||
type: 'plain_text',
|
||||
text: '*this is plain_text text*',
|
||||
emoji: true
|
||||
}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
]
|
||||
}]);
|
||||
stories.add('Fields', () => <Fields />);
|
||||
|
||||
const ActionSelect = () => UiKitMessage([{
|
||||
type: 'actions',
|
||||
elements: [
|
||||
{
|
||||
type: 'conversations_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a conversation',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'channels_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a channel',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'users_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select a user',
|
||||
emoji: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'static_select',
|
||||
placeholder: {
|
||||
type: 'plain_text',
|
||||
text: 'Select an item',
|
||||
emoji: true
|
||||
},
|
||||
options: [
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Excellent item 1',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-0'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Fantastic item 2',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-1'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Nifty item 3',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-2'
|
||||
},
|
||||
{
|
||||
text: {
|
||||
type: 'plain_text',
|
||||
text: 'Pretty good item 4',
|
||||
emoji: true
|
||||
},
|
||||
value: 'value-3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}]);
|
||||
stories.add('Action - Select', () => <ActionSelect />);
|
||||
|
||||
// stories.add('Section', () => UiKitMessage([{
|
||||
// type: 'section',
|
||||
// text: {
|
||||
// type: 'mrkdwn',
|
||||
// text: 'Section'
|
||||
// }
|
||||
// }]));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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