Rocket.Chat.ReactNative/app/views/ThreadMessagesView/Item.stories.js

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { ScrollView } from 'react-native';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';

import Item from './Item';
import * as List from '../../containers/List';
import { themes } from '../../constants/colors';
import { ThemeContext } from '../../theme';

const author = {
	_id: 'userid',
	username: 'rocket.cat',
	name: 'Rocket Cat'
};
const baseUrl = 'https://open.rocket.chat';
const date = new Date(2020, 10, 10, 10);
const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const defaultItem = {
	msg: 'Message content',
	tcount: 1,
	replies: [1],
	ts: date,
	tlm: date,
	u: author,
	attachments: []
};

const BaseItem = ({ item, ...props }) => (
	<Item
		baseUrl={baseUrl}
		item={{
			...defaultItem,
			...item
		}}
		onPress={() => alert('pressed')}
		{...props}
	/>
);

const listDecorator = story => (
	<ScrollView>
		<List.Separator />
		{story()}
		<List.Separator />
	</ScrollView>
);

const reducers = combineReducers({
	login: () => ({
		user: {
			id: 'abc',
			username: 'rocket.cat',
			name: 'Rocket Cat'
		}
	}),
	share: () => ({
		server: 'https://open.rocket.chat'
	}),
	settings: () => ({
		blockUnauthenticatedAccess: false
	})
});
const store = createStore(reducers);

const stories = storiesOf('Thread Messages.Item', module)
	.addDecorator(listDecorator)
	.addDecorator(story => <Provider store={store}>{story()}</Provider>);

stories.add('content', () => (
	<>
		<BaseItem />
		<List.Separator />
		<BaseItem
			item={{
				msg: longText
			}}
		/>
		<List.Separator />
		<BaseItem
			item={{
				tcount: 1000,
				replies: [...new Array(1000)]
			}}
		/>
		<List.Separator />
		<BaseItem
			item={{
				msg: '',
				attachments: [{ title: 'Attachment title' }]
			}}
		/>
		<List.Separator />
		<BaseItem useRealName />
	</>
));

stories.add('badge', () => (
	<>
		<BaseItem
			badgeColor={themes.light.mentionMeBackground}
		/>
		<List.Separator />
		<BaseItem
			badgeColor={themes.light.mentionGroupBackground}
		/>
		<List.Separator />
		<BaseItem
			badgeColor={themes.light.tunreadBackground}
		/>
		<BaseItem
			item={{
				msg: longText
			}}
			badgeColor={themes.light.tunreadBackground}
		/>
	</>
));

const ThemeStory = ({ theme }) => (
	<ThemeContext.Provider
		value={{ theme }}
	>
		<BaseItem
			badgeColor={themes[theme].mentionMeBackground}
		/>
	</ThemeContext.Provider>
);

stories.add('themes', () => (
	<>
		<ThemeStory theme='light' />
		<ThemeStory theme='dark' />
		<ThemeStory theme='black' />
	</>
));