Rocket.Chat.ReactNative/storybook/stories/Markdown.js

/* 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 { themes } from '../../app/constants/colors';

const theme = 'light';

const styles = StyleSheet.create({
	container: {
		marginHorizontal: 15,
		backgroundColor: themes[theme].backgroundColor,
		marginVertical: 50
	},
	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 sequentialEmptySpacesText = 'a       b                                                                             c';

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;
};

const stories = storiesOf('Markdown', module);

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

stories.add('Edited', () => (
	<View style={styles.container}>
		<Markdown msg='This is edited' theme={theme} isEdited />
	</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 />
		<Markdown
			msg='Fallback from new md to old'
			getCustomEmoji={getCustomEmoji}
			theme={theme}
			numberOfLines={1}
			preview
			md={[
				{
					type: 'PARAGRAPH',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: 'This is Rocket.Chat'
						}
					]
				}
			]}
		/>
	</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>
));

stories.add('Hashtag', () => (
	<View style={styles.container}>
		<Markdown msg='#test-channel #unknown' theme={theme} channels={[{ _id: '123', name: 'test-channel' }]} />
	</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>
));

stories.add('Block quote', () => (
	<View style={styles.container}>
		<Markdown
			msg={`> This is block quote
this is a normal line`}
			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>
));

stories.add('Image', () => (
	<View style={styles.container}>
		<Markdown msg='![alt text](https://play.google.com/intl/en_us/badges/images/badge_new.png)' 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>
));

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

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

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