Rocket.Chat.ReactNative/app/containers/markdown/new/NewMarkdown.stories.tsx

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import NewMarkdownComponent from '.';
import { themes } from '../../../lib/constants';
import { longText } from '../../../../.storybook/utils';

export default {
	title: 'NewMarkdown',
	decorators: [
		(Story: any) => (
			<NavigationContainer>
				<Story />
			</NavigationContainer>
		)
	]
};

const theme = 'light';

const styles = StyleSheet.create({
	container: {
		marginHorizontal: 15,
		backgroundColor: themes[theme].backgroundColor,
		marginVertical: 50
	}
});

const getCustomEmoji = (content: string) => {
	const customEmoji = {
		marioparty: { name: content, extension: 'gif' },
		nyan_rocket: { name: content, extension: 'png' }
	}[content];
	return customEmoji;
};
const baseUrl = 'https://open.rocket.chat';

const NewMarkdown = ({ ...props }) => (
	<NewMarkdownComponent baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} username='rocket.cat' {...props} />
);

const simpleTextMsg = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'PLAIN_TEXT',
				value: 'This is Rocket.Chat'
			}
		]
	}
];

const longTextMsg = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'PLAIN_TEXT',
				value: longText
			}
		]
	}
];

const lineBreakMsg = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'PLAIN_TEXT',
				value: 'a'
			},
			{
				type: 'PLAIN_TEXT',
				value: 'b'
			},
			{
				type: 'PLAIN_TEXT',
				value: 'c'
			},
			{
				type: 'PLAIN_TEXT',
				value: ''
			},
			{
				type: 'PLAIN_TEXT',
				value: 'd'
			},
			{
				type: 'PLAIN_TEXT',
				value: ''
			},
			{
				type: 'PLAIN_TEXT',
				value: ''
			},
			{
				type: 'PLAIN_TEXT',
				value: 'e'
			}
		]
	}
];

const sequentialEmptySpacesMsg = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'PLAIN_TEXT',
				value: 'a       b                                                                             c'
			}
		]
	}
];

export const Text = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={simpleTextMsg} />
		<NewMarkdown tokens={longTextMsg} />
		<NewMarkdown tokens={lineBreakMsg} />
		<NewMarkdown tokens={sequentialEmptySpacesMsg} />
		<NewMarkdown tokens={[...simpleTextMsg, ...longTextMsg]} />
	</View>
);

const allMentionTokens = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'rocket.cat'
				}
			}
		]
	}
];

const multipleMentionTokens = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'name'
				}
			},
			{
				type: 'PLAIN_TEXT',
				value: ' '
			},
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'rocket.cat'
				}
			},
			{
				type: 'PLAIN_TEXT',
				value: ' '
			},
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'not_a_user'
				}
			},
			{
				type: 'PLAIN_TEXT',
				value: ' '
			},
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'here'
				}
			},
			{
				type: 'PLAIN_TEXT',
				value: ' '
			},
			{
				type: 'MENTION_USER',
				value: {
					type: 'PLAIN_TEXT',
					value: 'all'
				}
			}
		]
	}
];

const allMentions = [
	{
		_id: 'rocket.cat',
		username: 'rocket.cat'
	}
];

const multipleMentions = [
	{
		_id: 'name',
		username: 'name'
	},
	{
		_id: 'rocket.cat',
		username: 'rocket.cat'
	},
	{
		_id: 'here',
		username: 'here'
	},
	{
		_id: 'all',
		username: 'all'
	}
];

export const Mentions = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} />
		<NewMarkdown tokens={multipleMentionTokens} mentions={multipleMentions} navToRoomInfo={() => {}} style={[]} />
	</View>
);

const channelTokens = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'MENTION_CHANNEL',
				value: {
					type: 'PLAIN_TEXT',
					value: 'text_channel'
				}
			},
			{
				type: 'PLAIN_TEXT',
				value: ' and '
			},
			{
				type: 'MENTION_CHANNEL',
				value: {
					type: 'PLAIN_TEXT',
					value: 'not_a_channel'
				}
			}
		]
	}
];

const channelMention = [
	{
		_id: 'text_channel',
		name: 'text_channel'
	}
];

export const Hashtag = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={channelTokens} channels={channelMention} navToRoomInfo={() => {}} />
	</View>
);

const bigEmojiTokens = [
	{
		type: 'BIG_EMOJI',
		value: [
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'green_heart'
				}
			},
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'joy'
				}
			},
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'grin'
				}
			}
		]
	}
];

const emojiTokens = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'rocket'
				}
			},
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'facepalm'
				}
			},
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'nyan_rocket'
				}
			},
			{
				type: 'EMOJI',
				value: {
					type: 'PLAIN_TEXT',
					value: 'marioparty'
				}
			}
		]
	}
];

export const Emoji = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={bigEmojiTokens} />
		<NewMarkdown tokens={emojiTokens} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
	</View>
);

const blockQuoteTokens = [
	{
		type: 'QUOTE',
		value: [
			{
				type: 'PARAGRAPH',
				value: [
					{
						type: 'PLAIN_TEXT',
						value: 'Rocket.Chat to the moon'
					}
				]
			}
		]
	},
	{
		type: 'QUOTE',
		value: [
			{
				type: 'PARAGRAPH',
				value: [
					{
						type: 'PLAIN_TEXT',
						value: longText
					}
				]
			}
		]
	}
];

export const BlockQuote = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={blockQuoteTokens} />
	</View>
);

const rocketChatLink = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'LINK',
				value: {
					src: {
						type: 'PLAIN_TEXT',
						value: 'https://rocket.chat'
					},
					label: {
						type: 'PLAIN_TEXT',
						value: 'https://rocket.chat'
					}
				}
			}
		]
	}
];

const markdownLink = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'LINK',
				value: {
					src: {
						type: 'PLAIN_TEXT',
						value: 'https://rocket.chat'
					},
					label: {
						type: 'PLAIN_TEXT',
						value: 'Markdown link'
					}
				}
			}
		]
	}
];

export const Links = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={rocketChatLink} />
		<NewMarkdown tokens={markdownLink} />
	</View>
);

export const Headers = () => (
	<View style={styles.container}>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '# Header 1'
						}
					],
					level: 1
				}
			]}
		/>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '## Header 2'
						}
					],
					level: 2
				}
			]}
		/>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '### Header 3'
						}
					],
					level: 3
				}
			]}
		/>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '#### Header 4'
						}
					],
					level: 4
				}
			]}
		/>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '##### Header 5'
						}
					],
					level: 5
				}
			]}
		/>
		<NewMarkdown
			tokens={[
				{
					type: 'HEADING',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: '###### Header 6'
						}
					],
					level: 6
				}
			]}
		/>
	</View>
);

const inlineCodeToken = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'INLINE_CODE',
				value: {
					type: 'PLAIN_TEXT',
					value: 'inline code'
				}
			}
		]
	}
];

const multilineCodeToken = [
	{
		type: 'CODE',
		language: 'none',
		value: [
			{
				type: 'CODE_LINE',
				value: {
					type: 'PLAIN_TEXT',
					value: 'Multi \nLine \nCode'
				}
			}
		]
	}
];

export const Code = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={inlineCodeToken} style={[]} />
		<NewMarkdown tokens={multilineCodeToken} style={[]} />
	</View>
);

const items = [
	[
		{
			type: 'PLAIN_TEXT',
			value: 'Plain text '
		},
		{
			type: 'EMOJI',
			value: {
				type: 'PLAIN_TEXT',
				value: 'bulb'
			}
		},
		{
			type: 'ITALIC',
			value: [
				{
					type: 'PLAIN_TEXT',
					value: ' italic '
				}
			]
		},
		{
			type: 'BOLD',
			value: [
				{
					type: 'PLAIN_TEXT',
					value: ' bold '
				}
			]
		},
		{
			type: 'STRIKE',
			value: [
				{
					type: 'PLAIN_TEXT',
					value: ' strike '
				}
			]
		},
		{
			type: 'MENTION_CHANNEL',
			value: {
				type: 'PLAIN_TEXT',
				value: 'general'
			}
		},
		{
			type: 'LINK',
			value: {
				src: {
					type: 'PLAIN_TEXT',
					value: 'https://google.com'
				},
				label: {
					type: 'PLAIN_TEXT',
					value: ' link '
				}
			}
		},
		{
			type: 'MENTION_USER',
			value: {
				type: 'PLAIN_TEXT',
				value: 'rocket.cat'
			}
		},
		{
			type: 'INLINE_CODE',
			value: {
				type: 'PLAIN_TEXT',
				value: ' inline code'
			}
		}
	],
	[
		{
			type: 'PLAIN_TEXT',
			value: longText
		}
	]
];

const listItems = [
	{
		type: 'LIST_ITEM',
		value: items[0]
	},
	{
		type: 'LIST_ITEM',
		value: items[1]
	}
];

const unorederedListToken = [
	{
		type: 'UNORDERED_LIST',
		value: listItems
	}
];

const orderedListToken = [
	{
		type: 'ORDERED_LIST',
		value: listItems
	}
];

const listMentions = [
	{
		_id: 'rocket.cat',
		username: 'rocket.cat'
	}
];

const listChannels = [
	{
		_id: 'general',
		name: 'general'
	}
];

const tasks = [
	{
		type: 'TASKS',
		value: [
			{
				type: 'TASK',
				status: true,
				value: items[0]
			},
			{
				type: 'TASK',
				status: false,
				value: items[1]
			}
		]
	}
];

export const Lists = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={unorederedListToken} mentions={listMentions} channels={listChannels} />
		<NewMarkdown tokens={orderedListToken} mentions={listMentions} channels={listChannels} />
		<NewMarkdown tokens={tasks} mentions={listMentions} channels={listChannels} />
	</View>
);

const katex = [
	{
		type: 'KATEX',
		value: ' f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi '
	}
];

const inlineKatex = [
	{
		type: 'PARAGRAPH',
		value: [
			{
				type: 'INLINE_KATEX',
				value: 'This text includes math notations and should be wrapped correctly for $\\alpha$ and $\\beta$ within the view.'
			},
			{
				type: 'INLINE_KATEX',
				value: "The following formula shouldn't be inline:$$x_{1,2} = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$$"
			},
			{
				type: 'INLINE_KATEX',
				value: 'However the following formula should be inline with the text: \\( a^2 + b^2 = c^2 \\)'
			}
		]
	}
];

export const Katex = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={katex} />
	</View>
);

export const InlineKatex = () => (
	<View style={styles.container}>
		<NewMarkdown tokens={inlineKatex} />
	</View>
);