[TESTS] Markdown added to Storybook (#1812)
Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Sarthak Pranesh
GitHub
parent
e677c19ca4
commit
74cc75a928
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,279 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
|
||||
import Markdown from '../../app/containers/markdown';
|
||||
import StoriesSeparator from './StoriesSeparator';
|
||||
import { themes } from '../../app/constants/colors';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginHorizontal: 15
|
||||
},
|
||||
separator: {
|
||||
marginHorizontal: 10,
|
||||
marginVertical: 10
|
||||
}
|
||||
});
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
||||
const lineBreakText = `a
|
||||
b
|
||||
c
|
||||
|
||||
d
|
||||
|
||||
|
||||
e`;
|
||||
|
||||
const getCustomEmoji = (content) => {
|
||||
const customEmoji = {
|
||||
marioparty: { name: content, extension: 'gif' },
|
||||
react_rocket: { name: content, extension: 'png' },
|
||||
nyan_rocket: { name: content, extension: 'png' }
|
||||
}[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>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Long Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={longText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Line Break Text' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={lineBreakText}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Edited' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is edited'
|
||||
theme={theme}
|
||||
isEdited
|
||||
/>
|
||||
</View>
|
||||
|
||||
<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='@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} />
|
||||
<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>
|
||||
|
||||
<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
|
||||
this is a normal line`}
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Inline Code' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='This is `inline code`'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<StoriesSeparator style={styles.separator} title='Code Block' theme={theme} />
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='Inline `code` has `back-ticks around` it.
|
||||
```
|
||||
Code block
|
||||
```'
|
||||
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>
|
||||
|
||||
<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
|
||||
------------ | -------------
|
||||
Content from cell 1 | Content from cell 2
|
||||
Content in the first column | Content in the second column'
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
|
@ -8,6 +8,7 @@ import RoomItem from './RoomItem';
|
|||
import Message from './Message';
|
||||
import UiKitMessage from './UiKitMessage';
|
||||
import UiKitModal from './UiKitModal';
|
||||
import Markdown from './Markdown';
|
||||
// import RoomViewHeader from './RoomViewHeader';
|
||||
|
||||
// Change here to see themed storybook
|
||||
|
|
@ -35,6 +36,8 @@ storiesOf('UiKitMessage', module)
|
|||
.add('list uikitmessage', () => <UiKitMessage theme={theme} />);
|
||||
storiesOf('UiKitModal', module)
|
||||
.add('list UiKitModal', () => <UiKitModal theme={theme} />);
|
||||
storiesOf('Markdown', module)
|
||||
.add('list Markdown', () => <Markdown theme={theme} />);
|
||||
|
||||
// FIXME: I couldn't make these pass on jest :(
|
||||
// storiesOf('RoomViewHeader', module)
|
||||
|
|
|
|||
Loading…
Reference in New Issue