verdnatura-chat/storybook/stories/UiKitModal.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 { UiKitComponent, UiKitModal } from '../../app/containers/UIKit';
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
import MessageContext from '../../app/containers/message/Context';
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('UiKitModal', module)
	.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
	.addDecorator(story => (
		<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
			{story()}
		</ScrollView>
	))
	.addDecorator(messageDecorator);

const ModalSectionSelects = () =>
	UiKitModal([
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Rocket.Chat is free, unlimited and open source* 🚀\nIf you have any doubt ask to @rocketcat'
			}
		},
		{
			type: 'divider'
		},
		{
			type: 'section',
			fields: [
				{
					type: 'mrkdwn',
					text: '*Text 1*\nDescription, Mussum Ipsum, cacilds vidis litro'
				},
				{
					type: 'mrkdwn',
					text: '*Text 2*\nDescription, Mussum Ipsum, cacilds vidis litro'
				}
			]
		},
		{
			type: 'section',
			fields: [
				{
					type: 'mrkdwn',
					text: '*Text 3*\nDescription, Mussum Ipsum, cacilds vidis litro'
				},
				{
					type: 'mrkdwn',
					text: '*Text 4*\nDescription, Mussum Ipsum, cacilds vidis litro'
				}
			]
		}
	]);
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);

const ModalSectionAccessories = () =>
	UiKitModal([
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Bruno Quadros*,\nPlease review your details for your *travel expense*.\nExpense no. *DA921*.'
			},
			accessory: {
				type: 'image',
				imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
			}
		},
		{
			type: 'divider'
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Date:*\n11/02/2020'
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Category:*\nTravel'
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Cost:*\n$150.00 USD'
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Notes:*\nWebSummit Conference'
			}
		}
	]);
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);

const ModalFormInput = () =>
	UiKitModal([
		{
			type: 'input',
			element: {
				type: 'plain_text_input'
			},
			label: {
				type: 'plain_text',
				text: 'Outgoing Title',
				emoji: true
			},
			hint: {
				type: 'plain_text',
				text: 'Pick something unique!',
				emoji: true
			}
		},
		{
			type: 'input',
			element: {
				type: 'datepicker',
				initial_date: '1990-04-28',
				placeholder: {
					type: 'plain_text',
					text: 'Select a date',
					emoji: true
				}
			},
			label: {
				type: 'plain_text',
				text: 'Set a date',
				emoji: true
			}
		},
		{
			type: 'input',
			element: {
				type: 'multi_static_select',
				options: [
					{
						text: {
							type: 'plain_text',
							text: 'John'
						},
						value: 1
					},
					{
						text: {
							type: 'plain_text',
							text: 'Dog'
						},
						value: 2
					}
				]
			},
			label: {
				type: 'plain_text',
				text: 'Share with...',
				emoji: true
			}
		}
	]);
stories.add('Modal - Form Input', () => <ModalFormInput />);

const ModalFormTextArea = () =>
	UiKitModal([
		{
			type: 'context',
			elements: [
				{
					type: 'mrkdwn',
					text: 'Task: ZOL-994'
				}
			]
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'Update Spec final assets'
			},
			accessory: {
				type: 'button',
				text: {
					type: 'plain_text',
					text: 'Change'
				}
			}
		},
		{
			type: 'divider'
		},
		{
			type: 'input',
			element: {
				type: 'plain_text_input',
				multiline: true
			},
			placeholder: {
				type: 'plain_text',
				text: 'Write Something',
				emoji: true
			},
			label: {
				type: 'plain_text',
				text: 'Notes',
				emoji: true
			},
			hint: {
				type: 'plain_text',
				text: 'Please take the time to compose something short',
				emoji: true
			},
			description: {
				type: 'plain_text',
				text: 'Describe your update',
				emoji: true
			}
		}
	]);
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);

const ModalImages = () =>
	UiKitModal([
		{
			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',
			alt_text: 'Example Image'
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'How could be the life in Mars?'
			}
		},
		{
			type: 'context',
			elements: [
				{
					type: 'image',
					imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
				},
				{
					type: 'mrkdwn',
					text: 'November 25, 2019'
				}
			]
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: '*Next stop, Mars!*\nMussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.'
			}
		}
	]);
stories.add('Modal - Images', () => <ModalImages />);

const ModalActions = () =>
	UiKitModal([
		{
			type: 'input',
			element: {
				type: 'plain_text_input'
			},
			label: {
				type: 'plain_text',
				text: 'Title',
				emoji: true
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'Details'
			}
		},
		{
			type: 'section',
			accessory: {
				type: 'static_select',
				options: [
					{
						value: 1,
						text: {
							type: 'plain_text',
							text: 'TypeL Task'
						}
					},
					{
						value: 2,
						text: {
							type: 'plain_text',
							text: 'second button'
						}
					}
				]
			}
		},
		{
			type: 'section',
			accessory: {
				type: 'static_select',
				options: [
					{
						value: 1,
						text: {
							type: 'plain_text',
							text: 'Project: Space (winter)'
						}
					},
					{
						value: 2,
						text: {
							type: 'plain_text',
							text: 'second button'
						}
					}
				]
			}
		},
		{
			type: 'section',
			accessory: {
				type: 'static_select',
				options: [
					{
						value: 1,
						text: {
							type: 'plain_text',
							text: 'Priority (optional)'
						}
					},
					{
						value: 2,
						text: {
							type: 'plain_text',
							text: 'second button'
						}
					}
				]
			}
		},
		{
			type: 'section',
			accessory: {
				type: 'static_select',
				options: [
					{
						value: 1,
						text: {
							type: 'plain_text',
							text: 'Assinee (optional)'
						}
					},
					{
						value: 2,
						text: {
							type: 'plain_text',
							text: 'second button'
						}
					}
				]
			}
		},
		{
			type: 'input',
			element: {
				type: 'plain_text_input',
				multiline: true
			},
			placeholder: {
				type: 'plain_text',
				text: 'Write Something',
				emoji: true
			},
			label: {
				type: 'plain_text',
				text: 'Description',
				emoji: true
			}
		}
	]);
stories.add('Modal - Actions', () => <ModalActions />);

const ModalContextsDividers = () =>
	UiKitModal([
		{
			type: 'context',
			elements: [
				{
					type: 'mrkdwn',
					text: 'Due today'
				}
			]
		},
		{
			type: 'divider'
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'Finish interface componests (3 hours)'
			},
			accessory: {
				blockId: 'overflow-1',
				type: 'overflow',
				options: [
					{
						text: {
							type: 'plain_text',
							text: 'Details',
							emoji: true
						},
						value: 'value-0'
					},
					{
						text: {
							type: 'plain_text',
							text: 'Remove',
							emoji: true
						},
						value: 'value-1'
					}
				]
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'English Class (1 hour)'
			},
			accessory: {
				blockId: 'overflow-2',
				type: 'overflow',
				options: [
					{
						text: {
							type: 'plain_text',
							text: 'Details',
							emoji: true
						},
						value: 'value-0'
					},
					{
						text: {
							type: 'plain_text',
							text: 'Remove',
							emoji: true
						},
						value: 'value-1'
					}
				]
			}
		},
		{
			type: 'section',
			text: {
				type: 'mrkdwn',
				text: 'Send an email to John (15min)'
			},
			accessory: {
				blockId: 'overflow-3',
				type: 'overflow',
				options: [
					{
						text: {
							type: 'plain_text',
							text: 'Details',
							emoji: true
						},
						value: 'value-0'
					},
					{
						text: {
							type: 'plain_text',
							text: 'Remove',
							emoji: true
						},
						value: 'value-1'
					}
				]
			}
		}
	]);
stories.add('Modal - Contexts and Dividers', () => <ModalContextsDividers />);

const ModalInputWithError = () => (
	<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
		<UiKitComponent
			render={UiKitModal}
			blocks={[
				{
					type: 'input',
					element: {
						type: 'plain_text_input',
						actionId: 'input-test'
					},
					label: {
						type: 'plain_text',
						text: 'Label',
						emoji: true
					}
				}
			]}
		/>
	</KitContext.Provider>
);
stories.add('Modal - Input with error', () => <ModalInputWithError />);

const ModalMultilneWithError = () => (
	<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
		<UiKitComponent
			render={UiKitModal}
			blocks={[
				{
					type: 'input',
					element: {
						type: 'plain_text_input',
						multiline: true,
						actionId: 'input-test'
					},
					label: {
						type: 'plain_text',
						text: 'Label',
						emoji: true
					}
				}
			]}
		/>
	</KitContext.Provider>
);
stories.add('Modal - Multilne with error', () => <ModalMultilneWithError />);

const ModalDatePickerWithError = () => (
	<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
		<UiKitComponent
			render={UiKitModal}
			blocks={[
				{
					type: 'input',
					element: {
						type: 'datepicker',
						initial_date: '1990-04-28',
						actionId: 'input-test',
						placeholder: {
							type: 'plain_text',
							text: 'Select a date',
							emoji: true
						}
					},
					label: {
						type: 'plain_text',
						text: 'Label',
						emoji: true
					}
				}
			]}
		/>
	</KitContext.Provider>
);
stories.add('Modal - DatePicker with error', () => <ModalDatePickerWithError />);