[TESTS] Markdown added to Storybook (#1812)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

storybook/stories/Markdown.js

@@ -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='![alt text](https://play.google.com/intl/en_us/badges/images/badge_new.png)' 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>
+	);
+};

storybook/stories/index.js

@@ -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)