[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,125 +15,152 @@ 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}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
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>
|
||||||
<Avatar
|
));
|
||||||
type='p'
|
|
||||||
rid='devWBbYr7inwupPqK'
|
stories.add('Wrong server', () => (
|
||||||
server={server}
|
<Avatar
|
||||||
size={56}
|
text='Avatar'
|
||||||
/>
|
server='https://google.com'
|
||||||
<Separator title='Avatar by url' theme={theme} />
|
size={56}
|
||||||
<Avatar
|
/>
|
||||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
));
|
||||||
server={server}
|
|
||||||
size={56}
|
stories.add('Custom style', () => (
|
||||||
/>
|
<Avatar
|
||||||
<Separator title='Avatar by path' theme={theme} />
|
text='Avatar'
|
||||||
<Avatar
|
server={server}
|
||||||
avatar='/avatar/diego.mello'
|
size={56}
|
||||||
server={server}
|
style={styles.custom}
|
||||||
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;
|
|
||||||
|
|
|
||||||
|
|
@ -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,258 +42,231 @@ const getCustomEmoji = (content) => {
|
||||||
return customEmoji;
|
return customEmoji;
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line arrow-body-style
|
const stories = storiesOf('Markdown', module);
|
||||||
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>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Long Text' theme={theme} />
|
stories.add('Text', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||||
msg={longText}
|
<Markdown
|
||||||
theme={theme}
|
msg={longText}
|
||||||
/>
|
theme={theme}
|
||||||
</View>
|
/>
|
||||||
|
<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} />
|
stories.add('Edited', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={lineBreakText}
|
msg='This is edited'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
isEdited
|
||||||
</View>
|
/>
|
||||||
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Sequential empty spaces' theme={theme} />
|
stories.add('Preview', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={sequentialEmptySpacesText}
|
msg={longText}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
numberOfLines={1}
|
||||||
</View>
|
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} />
|
stories.add('Mentions', () => (
|
||||||
<View style={styles.container}>
|
<ScrollView style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='This is edited'
|
msg='@rocket.cat @name1 @all @here @unknown'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
isEdited
|
mentions={[
|
||||||
/>
|
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
||||||
</View>
|
{ _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} />
|
stories.add('Hashtag', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={longText}
|
msg='#test-channel #unknown'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
numberOfLines={1}
|
channels={[{ _id: '123', name: 'test-channel' }]}
|
||||||
preview
|
/>
|
||||||
/>
|
</View>
|
||||||
<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='Mentions' theme={theme} />
|
stories.add('Emoji', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||||
msg='@rocket.cat @name1 @all @here @unknown'
|
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||||
theme={theme}
|
<Markdown
|
||||||
mentions={[
|
msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:'
|
||||||
{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
|
theme={theme}
|
||||||
{ _id: 'random2', name: 'Name', username: 'name1' },
|
getCustomEmoji={getCustomEmoji}
|
||||||
{ _id: 'here', username: 'here' },
|
baseUrl={baseUrl}
|
||||||
{ _id: 'all', username: 'all' }
|
/>
|
||||||
]}
|
<Markdown
|
||||||
username='rocket.cat'
|
msg='😃 :+1: :marioparty:'
|
||||||
/>
|
theme={theme}
|
||||||
</View>
|
getCustomEmoji={getCustomEmoji}
|
||||||
|
baseUrl={baseUrl}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Mentions with Real Name' theme={theme} />
|
stories.add('Block quote', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='@rocket.cat @name1 @all @here @unknown'
|
msg={`> This is block quote
|
||||||
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
|
|
||||||
this is a normal line`}
|
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} />
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Markdown msg='' theme={theme} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Headers' theme={theme} />
|
stories.add('Image', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown msg='' theme={theme} />
|
||||||
msg='# Header 1'
|
</View>
|
||||||
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='Inline Code' theme={theme} />
|
stories.add('Headers', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='This is `inline code`'
|
msg='# Header 1'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
<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} />
|
stories.add('Code', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg='Inline `code` has `back-ticks around` it.
|
msg='This is `inline code`'
|
||||||
|
theme={theme}
|
||||||
|
/>
|
||||||
|
<Markdown
|
||||||
|
msg='Inline `code` has `back-ticks around` it.
|
||||||
```
|
```
|
||||||
Code block
|
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>
|
<Markdown
|
||||||
|
msg={'1. Open Source\n2. Rocket.Chat'}
|
||||||
|
theme={theme}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
<StoriesSeparator style={styles.separator} title='Numbered Lists' theme={theme} />
|
stories.add('Table', () => (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={'1. Open Source\n2. Rocket.Chat'}
|
msg='First Header | Second Header
|
||||||
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
|
|
||||||
------------ | -------------
|
------------ | -------------
|
||||||
Content from cell 1 | Content from cell 2
|
Content from cell 1 | Content from cell 2
|
||||||
Content in the first column | Content in the second column'
|
Content in the first column | Content in the second column'
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
));
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
|
||||||
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 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,98 +36,109 @@ 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 }) => {
|
|
||||||
_theme = theme;
|
|
||||||
return (
|
|
||||||
<ScrollView style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
|
|
||||||
<Separator title='Basic' />
|
|
||||||
<RoomItem />
|
|
||||||
|
|
||||||
<Separator title='User' />
|
stories.add('Basic', () => (
|
||||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
<RoomItem />
|
||||||
<RoomItem
|
));
|
||||||
name={longText}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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' />
|
stories.add('User', () => (
|
||||||
<RoomItem status='online' />
|
<>
|
||||||
<RoomItem status='away' />
|
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||||
<RoomItem status='busy' />
|
<RoomItem
|
||||||
<RoomItem status='offline' />
|
name={longText}
|
||||||
<RoomItem status='loading' />
|
/>
|
||||||
<RoomItem status='wrong' />
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
<Separator title='Alerts' />
|
stories.add('Type', () => (
|
||||||
<RoomItem alert />
|
<>
|
||||||
<RoomItem alert name='unread' unread={1} />
|
<RoomItem type='d' />
|
||||||
<RoomItem alert name='unread' unread={1000} />
|
<RoomItem type='c' />
|
||||||
<RoomItem alert name='user mentions' unread={1} userMentions={1} />
|
<RoomItem type='p' />
|
||||||
<RoomItem alert name='group mentions' unread={1} groupMentions={1} />
|
<RoomItem type='l' />
|
||||||
<RoomItem alert name='thread unread' tunread={[1]} />
|
<RoomItem type='discussion' />
|
||||||
<RoomItem alert name='thread unread user' tunread={[1]} tunreadUser={[1]} />
|
<RoomItem type='d' isGroupChat />
|
||||||
<RoomItem alert name='thread unread group' tunread={[1]} tunreadGroup={[1]} />
|
<RoomItem type='&' />
|
||||||
<RoomItem name='user mentions priority 1' alert unread={1} userMentions={1} groupMentions={1} tunread={[1]} />
|
</>
|
||||||
<RoomItem name='group mentions priority 2' alert unread={1} groupMentions={1} tunread={[1]} />
|
));
|
||||||
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
|
||||||
|
|
||||||
<Separator title='Last Message' />
|
stories.add('User status', () => (
|
||||||
<RoomItem
|
<>
|
||||||
showLastMessage
|
<RoomItem status='online' />
|
||||||
/>
|
<RoomItem status='away' />
|
||||||
<RoomItem
|
<RoomItem status='busy' />
|
||||||
showLastMessage
|
<RoomItem status='offline' />
|
||||||
lastMessage={{
|
<RoomItem status='loading' />
|
||||||
u: {
|
<RoomItem status='wrong' />
|
||||||
username: 'rocket.chat'
|
</>
|
||||||
},
|
));
|
||||||
msg: '2'
|
|
||||||
}}
|
stories.add('Alerts', () => (
|
||||||
/>
|
<>
|
||||||
<RoomItem
|
<RoomItem alert />
|
||||||
showLastMessage
|
<RoomItem alert name='unread' unread={1} />
|
||||||
lastMessage={{
|
<RoomItem alert name='unread' unread={1000} />
|
||||||
u: {
|
<RoomItem alert name='user mentions' unread={1} userMentions={1} />
|
||||||
username: 'diego.mello'
|
<RoomItem alert name='group mentions' unread={1} groupMentions={1} />
|
||||||
},
|
<RoomItem alert name='thread unread' tunread={[1]} />
|
||||||
msg: '1'
|
<RoomItem alert name='thread unread user' tunread={[1]} tunreadUser={[1]} />
|
||||||
}}
|
<RoomItem alert name='thread unread group' tunread={[1]} tunreadGroup={[1]} />
|
||||||
username='diego.mello'
|
<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
|
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||||
showLastMessage
|
</>
|
||||||
lastMessage={lastMessage}
|
));
|
||||||
/>
|
|
||||||
<RoomItem
|
stories.add('Last Message', () => (
|
||||||
showLastMessage
|
<>
|
||||||
alert
|
<RoomItem
|
||||||
unread={1}
|
showLastMessage
|
||||||
lastMessage={lastMessage}
|
/>
|
||||||
/>
|
<RoomItem
|
||||||
<RoomItem
|
showLastMessage
|
||||||
showLastMessage
|
lastMessage={{
|
||||||
alert
|
u: {
|
||||||
unread={1000}
|
username: 'rocket.chat'
|
||||||
lastMessage={lastMessage}
|
},
|
||||||
/>
|
msg: '2'
|
||||||
<RoomItem
|
}}
|
||||||
showLastMessage
|
/>
|
||||||
alert
|
<RoomItem
|
||||||
tunread={[1]}
|
showLastMessage
|
||||||
lastMessage={lastMessage}
|
lastMessage={{
|
||||||
/>
|
u: {
|
||||||
</ScrollView>
|
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 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,426 +17,435 @@ 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([{
|
|
||||||
type: 'section',
|
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: {
|
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',
|
type: 'plain_text',
|
||||||
text: 'Example Image',
|
text: 'Option 1',
|
||||||
emoji: true
|
emoji: true
|
||||||
},
|
},
|
||||||
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
value: 'value-0'
|
||||||
altText: 'Example Image'
|
},
|
||||||
}])
|
{
|
||||||
}
|
text: {
|
||||||
|
type: 'plain_text',
|
||||||
<Separator title='Context' />
|
text: 'Option 2',
|
||||||
{
|
emoji: true
|
||||||
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-1'
|
||||||
type: 'mrkdwn',
|
},
|
||||||
text: 'context'
|
{
|
||||||
}
|
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' />
|
const SectionImage = () => UiKitMessage([{
|
||||||
{
|
type: 'section',
|
||||||
UiKitMessage([{
|
text: {
|
||||||
type: 'actions',
|
type: 'mrkdwn',
|
||||||
elements: [
|
text: 'Section + Image'
|
||||||
{
|
},
|
||||||
type: 'button',
|
accessory: {
|
||||||
text: {
|
type: 'image',
|
||||||
type: 'plain_text',
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
||||||
emoji: true,
|
altText: 'plants'
|
||||||
text: 'Approve'
|
}
|
||||||
},
|
}]);
|
||||||
style: 'primary',
|
stories.add('Section + image', () => <SectionImage />);
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}])
|
|
||||||
}
|
|
||||||
|
|
||||||
<Separator title='Fields' />
|
const SectionButton = () => UiKitMessage([{
|
||||||
{
|
type: 'section',
|
||||||
UiKitMessage([
|
text: {
|
||||||
{
|
type: 'mrkdwn',
|
||||||
type: 'section',
|
text: 'Section + button'
|
||||||
fields: [
|
},
|
||||||
{
|
accessory: {
|
||||||
type: 'plain_text',
|
type: 'button',
|
||||||
text: '*this is plain_text text*',
|
text: {
|
||||||
emoji: true
|
type: 'plain_text',
|
||||||
},
|
text: 'button'
|
||||||
{
|
}
|
||||||
type: 'plain_text',
|
}
|
||||||
text: '*this is plain_text text*',
|
}]);
|
||||||
emoji: true
|
stories.add('Section + button', () => <SectionButton />);
|
||||||
},
|
|
||||||
{
|
|
||||||
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
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}])
|
|
||||||
}
|
|
||||||
|
|
||||||
<Separator title='Action - Select' />
|
const SectionSelect = () => UiKitMessage([{
|
||||||
|
type: 'section',
|
||||||
|
text: {
|
||||||
|
type: 'mrkdwn',
|
||||||
|
text: 'Section + select'
|
||||||
|
},
|
||||||
|
accessory: {
|
||||||
|
type: 'static_select',
|
||||||
|
options: [
|
||||||
{
|
{
|
||||||
UiKitMessage([{
|
value: 1,
|
||||||
type: 'actions',
|
text: {
|
||||||
elements: [
|
type: 'plain_text',
|
||||||
{
|
text: 'button'
|
||||||
type: 'conversations_select',
|
}
|
||||||
placeholder: {
|
}, {
|
||||||
type: 'plain_text',
|
value: 2,
|
||||||
text: 'Select a conversation',
|
text: {
|
||||||
emoji: true
|
type: 'plain_text',
|
||||||
}
|
text: 'second button'
|
||||||
},
|
}
|
||||||
{
|
}]
|
||||||
type: 'channels_select',
|
}
|
||||||
placeholder: {
|
}]);
|
||||||
type: 'plain_text',
|
stories.add('Section + Select', () => <SectionSelect />);
|
||||||
text: 'Select a channel',
|
|
||||||
emoji: true
|
const SectionDatePicker = () => UiKitMessage([{
|
||||||
}
|
type: 'section',
|
||||||
},
|
text: {
|
||||||
{
|
type: 'mrkdwn',
|
||||||
type: 'users_select',
|
text: 'Section + DatePicker'
|
||||||
placeholder: {
|
},
|
||||||
type: 'plain_text',
|
accessory: {
|
||||||
text: 'Select a user',
|
type: 'datepicker',
|
||||||
emoji: true
|
initial_date: '1990-04-28',
|
||||||
}
|
placeholder: {
|
||||||
},
|
type: 'plain_text',
|
||||||
{
|
text: 'Select a date',
|
||||||
type: 'static_select',
|
emoji: true
|
||||||
placeholder: {
|
}
|
||||||
type: 'plain_text',
|
}
|
||||||
text: 'Select an item',
|
}]);
|
||||||
emoji: true
|
stories.add('Section + DatePicker', () => <SectionDatePicker />);
|
||||||
},
|
|
||||||
options: [
|
const SectionMultiSelect = () => UiKitMessage([{
|
||||||
{
|
type: 'section',
|
||||||
text: {
|
text: {
|
||||||
type: 'plain_text',
|
type: 'mrkdwn',
|
||||||
text: 'Excellent item 1',
|
text: 'Section + select'
|
||||||
emoji: true
|
},
|
||||||
},
|
accessory: {
|
||||||
value: 'value-0'
|
type: 'multi_static_select',
|
||||||
},
|
options: [{
|
||||||
{
|
text: {
|
||||||
text: {
|
type: 'plain_text',
|
||||||
type: 'plain_text',
|
text: 'button'
|
||||||
text: 'Fantastic item 2',
|
},
|
||||||
emoji: true
|
value: 1
|
||||||
},
|
}, {
|
||||||
value: 'value-1'
|
text: {
|
||||||
},
|
type: 'plain_text',
|
||||||
{
|
text: 'opt 1'
|
||||||
text: {
|
},
|
||||||
type: 'plain_text',
|
value: 2
|
||||||
text: 'Nifty item 3',
|
}, {
|
||||||
emoji: true
|
text: {
|
||||||
},
|
type: 'plain_text',
|
||||||
value: 'value-2'
|
text: 'opt 2'
|
||||||
},
|
},
|
||||||
{
|
value: 3
|
||||||
text: {
|
}, {
|
||||||
type: 'plain_text',
|
text: {
|
||||||
text: 'Pretty good item 4',
|
type: 'plain_text',
|
||||||
emoji: true
|
text: 'opt 3'
|
||||||
},
|
},
|
||||||
value: 'value-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 */
|
/* 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