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

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import { storiesOf } from '@storybook/react-native';

import MessageContext from '../../app/containers/message/Context';
import { UiKitMessage } from '../../app/containers/UIKit';
import { themes } from '../../app/lib/constants';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff'
	},
	padding: {
		paddingHorizontal: 16
	}
});

const user = {
	id: 'y8bd77ptZswPj3EW8',
	username: 'diego.mello',
	token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
};

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: {
							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'
					}
				]
			}
		}
	]);
stories.add('Section + Overflow', () => <SectionOverflow />);

const SectionImage = () =>
	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'
			}
		}
	]);
stories.add('Section + image', () => <SectionImage />);

const SectionButton = () =>
	UiKitMessage([
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'Section + button'
			},
			accessory: {
				type: 'button',
				text: {
					type: 'plain_text',
					text: 'button'
				}
			}
		}
	]);
stories.add('Section + button', () => <SectionButton />);

const SectionSelect = () =>
	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'
						}
					}
				]
			}
		}
	]);
stories.add('Section + Select', () => <SectionSelect />);

const SectionDatePicker = () =>
	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
				}
			}
		}
	]);
stories.add('Section + DatePicker', () => <SectionDatePicker />);

const SectionMultiSelect = () =>
	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
					}
				]
			}
		}
	]);
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
				}
			]
		}
	]);
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'
// 	}
// }]));