verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Update Storybook libs to v6 (#4439)

This commit is contained in:
Diego Mello 2022-08-19 16:53:40 -03:00 committed by GitHub
parent fa72d4cc76
commit e723990e82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
99 changed files with 4402 additions and 3853 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore
View File

@ -23,6 +23,8 @@ SECURITY.md
npm-debug.log
yarn-error.log
.storybook/
app/i18n/locales/
app/containers/CustomIcon/mappedIcons.js
app/containers/CustomIcon/selection.json

17
.storybook/index.js Normal file
View File

@ -0,0 +1,17 @@
import { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';
import RNBootSplash from 'react-native-bootsplash';
import { selectServerRequest } from '../app/actions/server';
import { mockedStore as store } from '../app/reducers/mockedStore';
import database from '../app/lib/database';
RNBootSplash.hide();
const baseUrl = 'https://open.rocket.chat';
store.dispatch(selectServerRequest(baseUrl));
database.setActiveDB(baseUrl);
const StorybookUIRoot = getStorybookUI({});
export default StorybookUIRoot;

4
.storybook/main.js Normal file
View File

@ -0,0 +1,4 @@
module.exports = {
stories: ['../app/**/*.stories.?(ts|tsx|js|jsx)'],
addons: []
};

34
.storybook/preview.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { Provider } from 'react-redux';
import { themes } from '../app/lib/constants';
import MessageContext from '../app/containers/message/Context';
import { mockedStore as store } from '../app/reducers/mockedStore';
export const decorators = [
Story => (
<Provider store={store}>
<MessageContext.Provider
value={{
user: {
id: 'y8bd77ptZswPj3EW8',
username: 'diego.mello',
token: 'abc'
},
baseUrl: 'https://open.rocket.chat',
onPress: () => {},
onLongPress: () => {},
reactionInit: () => {},
onErrorPress: () => {},
replyBroadcast: () => {},
onReactionPress: () => {},
onDiscussionPress: () => {},
onReactionLongPress: () => {},
threadBadgeColor: themes.light.tunreadColor
}}
>
<Story />
</MessageContext.Provider>
</Provider>
)
];

47
.storybook/storybook.requires.js Normal file
View File

@ -0,0 +1,47 @@
/* do not change this file, it is auto generated by storybook. */
import {
configure,
addDecorator,
addParameters,
addArgsEnhancer,
} from "@storybook/react-native";
import { decorators, parameters } from "./preview";
if (decorators) {
decorators.forEach((decorator) => addDecorator(decorator));
}
if (parameters) {
addParameters(parameters);
}
const getStories = () => {
return [
require("../app/containers/Avatar/Avatar.stories.tsx"),
require("../app/containers/BackgroundContainer/index.stories.tsx"),
require("../app/containers/Button/Button.stories.tsx"),
require("../app/containers/HeaderButton/HeaderButtons.stories.tsx"),
require("../app/containers/List/List.stories.tsx"),
require("../app/containers/LoginServices/LoginServices.stories.tsx"),
require("../app/containers/markdown/Markdown.stories.tsx"),
require("../app/containers/markdown/new/NewMarkdown.stories.tsx"),
require("../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.tsx"),
require("../app/containers/message/Message.stories.tsx"),
require("../app/containers/RoomHeader/RoomHeader.stories.tsx"),
require("../app/containers/RoomItem/RoomItem.stories.tsx"),
require("../app/containers/SearchBox/SearchBox.stories.tsx"),
require("../app/containers/ServerItem/ServerItem.stories.tsx"),
require("../app/containers/TextInput/TextInput.stories.tsx"),
require("../app/containers/UIKit/UiKitMessage.stories.tsx"),
require("../app/containers/UIKit/UiKitModal.stories.tsx"),
require("../app/containers/UnreadBadge/UnreadBadge.stories.tsx"),
require("../app/views/CannedResponsesListView/CannedResponseItem.stories.tsx"),
require("../app/views/DiscussionsView/Item.stories.tsx"),
require("../app/views/RoomView/LoadMore/LoadMore.stories.tsx"),
require("../app/views/ThreadMessagesView/Item.stories.tsx"),
];
};
configure(getStories, module, false);

0
storybook/utils.js → .storybook/utils.ts
View File

16
storybook/stories/__snapshots__/Avatar.storyshot → __tests__/containers/Avatar/__snapshots__/Avatar.stories.storyshot
View File

@ -1,20 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Avatar Avatar by path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar Path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar by roomId 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar Room Id 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar by text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar by url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Avatar Url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"theme\\":\\"light\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#cbced1\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#f5455c\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
exports[`Storyshots Avatar Custom borderRadius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Custom Border Radius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Custom style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Custom Style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
@ -28,4 +28,4 @@ exports[`Storyshots Avatar With ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":
exports[`Storyshots Avatar Without E Tag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Wrong server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Wrong Server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;

16
app/containers/BackgroundContainer/__snapshots__/index.stories.storyshot → __tests__/containers/BackgroundContainer/__snapshots__/index.stories.storyshot
View File

@ -1,17 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots BackgroundContainer basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots BackgroundContainer Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots BackgroundContainer black theme - loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer Black Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer black theme - text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer Black Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer dark theme - loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer Dark Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer dark theme - text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer Dark Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer long text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Text here\\"]}]}"`;
exports[`Storyshots BackgroundContainer Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Text here\\"]}]}"`;

13
__tests__/containers/Button/__snapshots__/Button.stories.storyshot Normal file
View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button Custom Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"purple\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"yellow\\",\\"fontSize\\":18},[{\\"textAlign\\":\\"left\\"}]],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Disabled Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Disabled Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button Primary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Secondary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;

11
__tests__/containers/HeaderButton/__snapshots__/HeaderButtons.stories.storyshot Normal file
View File

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots HeaderButtons Badge 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots HeaderButtons Common 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots HeaderButtons Icons 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots HeaderButtons Themes 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots HeaderButtons Title 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;

29
__tests__/containers/List/__snapshots__/List.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

5
__tests__/containers/LoginServices/__snapshots__/LoginServices.stories.storyshot Normal file
View File

@ -0,0 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Login Services Separators 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"More options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"More options\\"},\\"children\\":[\\"More options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Less options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Less options\\"},\\"children\\":[\\"Less options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]}]"`;
exports[`Storyshots Login Services Service List 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]"`;

13
__tests__/containers/RoomHeader/__snapshots__/RoomHeader.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

25
__tests__/containers/RoomItem/__snapshots__/RoomItem.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

3
__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot Normal file
View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;

6
storybook/stories/__snapshots__/ServerItem.storyshot → __tests__/containers/ServerItem/__snapshots__/ServerItem.stories.storyshot
View File

File diff suppressed because one or more lines are too long

3
__tests__/containers/TextInput/__snapshots__/TextInput.stories.storyshot Normal file
View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots TextInput Short And Long 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;

27
__tests__/containers/UIKit/__snapshots__/UiKitMessage.stories.storyshot Normal file
View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UIKit/UiKitMessage Action - Buttons 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Action - Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Context 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Fields 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + DatePicker 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + Markdown List 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + Multi Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + Overflow 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + button 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section + image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitMessage Section 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;

21
__tests__/containers/UIKit/__snapshots__/UiKitModal.stories.storyshot Normal file
View File

@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UIKit/UiKitModal Modal - Actions 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Contexts and Dividers 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - DatePicker with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Form Input 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Form TextArea 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Images 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Input with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Multilne with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Section and Accessories 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
exports[`Storyshots UIKit/UiKitModal Modal - Section and Selects 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;

10
storybook/stories/__snapshots__/UnreadBadge.storyshot → __tests__/containers/UnreadBadge/__snapshots__/UnreadBadge.stories.storyshot
View File

File diff suppressed because one or more lines are too long

25
__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

23
__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

3
__tests__/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot Normal file
View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots CollapsibleQuote Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;

83
__tests__/containers/message/__snapshots__/Message.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

0
__tests__/Storyshots.test.js → __tests__/storybook.test.js
View File

0
app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot → __tests__/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot
View File

5
__tests__/views/DiscussionsView/__snapshots__/Item.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

9
__tests__/views/RoomView/LoadMore/__snapshots__/LoadMore.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

7
__tests__/views/ThreadMessagesView/__snapshots__/Item.stories.storyshot Normal file
View File

File diff suppressed because one or more lines are too long

17
app/ReactotronConfig.js → app/ReactotronConfig.ts
View File

@ -1,23 +1,24 @@
/* eslint-disable */
import AsyncStorage from '@react-native-community/async-storage';
import { NativeModules } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NativeModules, LogBox } from 'react-native';
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';
if (__DEV__) {
const scriptURL = NativeModules.SourceCode.scriptURL;
const { scriptURL } = NativeModules.SourceCode;
const scriptHostname = scriptURL.split('://')[1].split(':')[0];
Reactotron.setAsyncStorageHandler(AsyncStorage)
Reactotron.setAsyncStorageHandler?.(AsyncStorage)
.configure({ host: scriptHostname })
.useReactNative()
.use(reactotronRedux())
.use(sagaPlugin())
.use(sagaPlugin({}))
.connect();
// Running on android device
// $ adb reverse tcp:9090 tcp:9090
Reactotron.clear();
Reactotron.clear?.();
// @ts-ignore
console.warn = Reactotron.log;
// @ts-ignore
console.log = Reactotron.log;
console.disableYellowBox = true;
LogBox.ignoreAllLogs(true);
}

69
app/containers/Avatar/Avatar.stories.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import Status from '../Status/Status';
import sharedStyles from '../../views/Styles';
import Avatar from './Avatar';
const styles = StyleSheet.create({
custom: {
padding: 16
}
});
const server = 'https://open.rocket.chat';
export default {
title: 'Avatar'
};
export const AvatarText = () => <Avatar text='Avatar' server={server} size={56} />;
export const AvatarRoomId = () => <Avatar type='p' rid='devWBbYr7inwupPqK' server={server} size={56} />;
export const AvatarUrl = () => (
<Avatar
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
server={server}
size={56}
/>
);
export const AvatarPath = () => <Avatar avatar='/avatar/diego.mello' server={server} size={56} />;
export const WithETag = () => (
<Avatar type='d' text='djorkaeff.alexandre' avatarETag='5ag8KffJcZj9m5rCv' server={server} size={56} />
);
export const WithoutETag = () => <Avatar type='d' text='djorkaeff.alexandre' server={server} size={56} />;
export const Emoji = () => (
<Avatar emoji='troll' getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })} server={server} size={56} />
);
export const Direct = () => <Avatar text='diego.mello' server={server} type='d' size={56} />;
export const Channel = () => <Avatar text='general' server={server} type='c' size={56} />;
export const Touchable = () => <Avatar text='Avatar' server={server} onPress={() => console.log('Pressed!')} size={56} />;
export const Static = () => (
<Avatar
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
server={server}
isStatic
size={56}
/>
);
export const CustomBorderRadius = () => <Avatar text='Avatar' server={server} borderRadius={28} size={56} />;
export const Children = () => (
<Avatar text='Avatar' server={server} size={56}>
<Status size={24} style={[sharedStyles.status]} status='busy' />
</Avatar>
);
export const WrongServer = () => <Avatar text='Avatar' server='https://google.com' size={56} />;
export const CustomStyle = () => <Avatar text='Avatar' server={server} size={56} style={styles.custom} />;

32
app/containers/BackgroundContainer/index.stories.js
View File

@ -1,32 +0,0 @@
/* 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 { ThemeContext } from '../../theme';
import { longText } from '../../../storybook/utils';
import { themes } from '../../lib/constants';
import BackgroundContainer from '.';
const stories = storiesOf('BackgroundContainer', module);
stories.add('basic', () => <BackgroundContainer />);
stories.add('loading', () => <BackgroundContainer loading />);
stories.add('text', () => <BackgroundContainer text='Text here' />);
stories.add('long text', () => <BackgroundContainer text={longText} />);
const ThemeStory = ({ theme, ...props }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<BackgroundContainer {...props} />
</ThemeContext.Provider>
);
stories.add('dark theme - loading', () => <ThemeStory theme='dark' loading />);
stories.add('dark theme - text', () => <ThemeStory theme='dark' text={longText} />);
stories.add('black theme - loading', () => <ThemeStory theme='black' loading />);
stories.add('black theme - text', () => <ThemeStory theme='black' text={longText} />);

36
app/containers/BackgroundContainer/index.stories.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { ThemeContext, TSupportedThemes } from '../../theme';
import { longText } from '../../../.storybook/utils';
import BackgroundContainer, { IBackgroundContainer } from '.';
import { themes } from '../../lib/constants';
export default {
title: 'BackgroundContainer'
};
export const Basic = () => <BackgroundContainer />;
export const Loading = () => <BackgroundContainer loading />;
export const Text = () => <BackgroundContainer text='Text here' />;
export const LongText = () => <BackgroundContainer text={longText} />;
interface ThemeStoryProps extends IBackgroundContainer {
theme: TSupportedThemes;
}
const ThemeStory = ({ theme, ...props }: ThemeStoryProps) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<BackgroundContainer {...props} />
</ThemeContext.Provider>
);
export const DarkThemeLoading = () => <ThemeStory theme='dark' loading />;
export const DarkThemeText = () => <ThemeStory theme='dark' text={longText} />;
export const BlackThemeLoading = () => <ThemeStory theme='black' loading />;
export const BlackThemeText = () => <ThemeStory theme='black' text={longText} />;

2
app/containers/BackgroundContainer/index.tsx
View File

@ -5,7 +5,7 @@ import { useTheme } from '../../theme';
import sharedStyles from '../../views/Styles';
import { themes } from '../../lib/constants';
interface IBackgroundContainer {
export interface IBackgroundContainer {
text?: string;
loading?: boolean;
}

28
app/containers/Button/Button.stories.js
View File

@ -1,28 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import Button from '.';
const buttonProps = {
title: 'Press me!',
type: 'primary',
onPress: () => {},
testID: 'testButton',
fontSize: 16,
style: {
padding: 10,
justifyContent: 'center'
}
};
const stories = storiesOf('Button', module);
stories.add('primary button', () => <Button {...buttonProps} />);
stories.add('secondary button', () => <Button {...buttonProps} type='secondary' />);
stories.add('loading button', () => <Button loading {...buttonProps} />);
stories.add('disabled button', () => <Button disabled {...buttonProps} />);
stories.add('disabled loading button', () => <Button disabled loading {...buttonProps} />);

41
app/containers/Button/Button.stories.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import Button from '.';
const buttonProps = {
title: 'Press me!',
type: 'primary',
onPress: () => {},
testID: 'testButton'
};
export default {
title: 'Button'
};
export const PrimaryButton = () => <Button {...buttonProps} />;
export const SecondaryButton = () => <Button {...buttonProps} type='secondary' />;
export const LoadingButton = () => <Button loading {...buttonProps} />;
export const DisabledButton = () => <Button disabled {...buttonProps} />;
export const DisabledLoadingButton = () => <Button disabled loading {...buttonProps} />;
export const CustomButton = () => (
<Button
{...buttonProps}
fontSize={18}
backgroundColor='purple'
color='yellow'
style={{
padding: 10
}}
styleText={[
{
textAlign: 'left'
}
]}
/>
);

11
app/containers/Button/__snapshots__/Button.stories.storyshot
View File

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button disabled button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button disabled loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button primary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button secondary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;

46
storybook/stories/HeaderButtons.tsx → app/containers/HeaderButton/HeaderButtons.stories.tsx
View File

@ -1,14 +1,11 @@
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { SafeAreaView } from 'react-native';
import { Header, HeaderBackground } from '@react-navigation/elements';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import * as HeaderButton from '../../app/containers/HeaderButton';
import { TColors, ThemeContext, TSupportedThemes } from '../../app/theme';
import { colors } from '../../app/lib/constants';
const stories = storiesOf('Header Buttons', module).addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>);
import * as HeaderButton from '.';
import { TColors, ThemeContext, TSupportedThemes } from '../../theme';
import { colors } from '../../lib/constants';
interface IHeader {
left?: () => React.ReactElement | null;
@ -17,18 +14,29 @@ interface IHeader {
colors?: TColors;
}
export default {
title: 'HeaderButtons',
decorators: [
(Story: any) => (
<NavigationContainer>
<SafeAreaProvider>
<Story />
</SafeAreaProvider>
</NavigationContainer>
)
]
};
const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
<SafeAreaView>
<Header
title={title}
headerLeft={left}
headerRight={right}
headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
/>
</SafeAreaView>
);
stories.add('title', () => (
export const Title = () => (
<>
<HeaderExample
left={() => (
@ -57,9 +65,9 @@ stories.add('title', () => (
)}
/>
</>
));
);
stories.add('icons', () => (
export const Icons = () => (
<>
<HeaderExample
left={() => (
@ -88,9 +96,9 @@ stories.add('icons', () => (
)}
/>
</>
));
);
stories.add('badge', () => (
export const Badge = () => (
<>
<HeaderExample
left={() => (
@ -102,7 +110,7 @@ stories.add('badge', () => (
)}
/>
</>
));
);
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
@ -123,15 +131,15 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
</ThemeContext.Provider>
);
stories.add('themes', () => (
export const Themes = () => (
<>
<ThemeStory theme='light' />
<ThemeStory theme='dark' />
<ThemeStory theme='black' />
</>
));
);
stories.add('common', () => (
export const Common = () => (
<>
<HeaderExample left={() => <HeaderButton.Drawer />} />
<HeaderExample left={() => <HeaderButton.CloseModal />} />
@ -141,4 +149,4 @@ stories.add('common', () => (
<HeaderExample right={() => <HeaderButton.Preferences />} />
<HeaderExample right={() => <HeaderButton.Legal />} />
</>
));
);

74
storybook/stories/List.js → app/containers/List/List.stories.tsx
View File

@ -1,18 +1,18 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { FlatList } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import * as List from '../../app/containers/List';
import SafeAreaView from '../../app/containers/SafeAreaView';
import { longText } from '../utils';
import { ThemeContext } from '../../app/theme';
import { DimensionsContext } from '../../app/dimensions';
import { themes } from '../../app/lib/constants';
import * as List from '.';
import SafeAreaView from '../SafeAreaView';
import { longText } from '../../../.storybook/utils';
import { ThemeContext, TSupportedThemes } from '../../theme';
import { DimensionsContext } from '../../dimensions';
import { themes } from '../../lib/constants';
const stories = storiesOf('List', module);
export default {
title: 'List'
};
stories.add('title and subtitle', () => (
export const TitleAndSubtitle = () => (
<List.Container>
<List.Separator />
<List.Item title='Chats' />
@ -22,9 +22,9 @@ stories.add('title and subtitle', () => (
<List.Item title={longText} subtitle={longText} translateTitle={false} translateSubtitle={false} testID='test-id' />
<List.Separator />
</List.Container>
));
);
stories.add('alert', () => (
export const Alert = () => (
<List.Container>
<List.Separator />
<List.Item title='Chats' alert />
@ -36,9 +36,9 @@ stories.add('alert', () => (
<List.Item title={longText} translateTitle={false} translateSubtitle={false} right={() => <List.Icon name='emoji' />} alert />
<List.Separator />
</List.Container>
));
);
stories.add('pressable', () => (
export const Pressable = () => (
<List.Container>
<List.Separator />
<List.Item title='Press me' onPress={() => alert('Hi there!')} translateTitle={false} />
@ -46,28 +46,28 @@ stories.add('pressable', () => (
<List.Item title={"I'm disabled"} onPress={() => alert('Hi there!')} disabled translateTitle={false} />
<List.Separator />
</List.Container>
));
);
stories.add('header', () => (
export const Header = () => (
<List.Container>
<List.Header title='Chats' />
<List.Header title={longText} translateTitle={false} />
</List.Container>
));
);
stories.add('icon', () => (
export const Icon = () => (
<List.Container>
<List.Icon name='emoji' />
</List.Container>
));
);
stories.add('separator', () => (
export const Separator = () => (
<List.Container>
<List.Separator />
</List.Container>
));
);
stories.add('with section and info', () => (
export const SectionAndInfo = () => (
<SafeAreaView>
<List.Container>
<List.Section>
@ -102,9 +102,9 @@ stories.add('with section and info', () => (
</List.Section>
</List.Container>
</SafeAreaView>
));
);
stories.add('with icon', () => (
export const WithIcon = () => (
<List.Container>
<List.Separator />
<List.Item title='Icon Left' translateTitle={false} left={() => <List.Icon name='emoji' />} />
@ -123,9 +123,9 @@ stories.add('with icon', () => (
<List.Item title='Show Action Indicator' translateTitle={false} showActionIndicator />
<List.Separator />
</List.Container>
));
);
stories.add('with custom colors', () => (
export const WithCustomColors = () => (
<List.Container>
<List.Separator />
<List.Item title='Chats' color='red' />
@ -140,7 +140,7 @@ stories.add('with custom colors', () => (
/>
<List.Separator />
</List.Container>
));
);
const ListItemFull = ({ ...props }) => (
<List.Item
@ -176,17 +176,18 @@ const ListFull = () => (
</SafeAreaView>
);
const ThemeStory = ({ theme }) => (
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<ListFull />
</ThemeContext.Provider>
);
stories.add('with dark theme', () => <ThemeStory theme='dark' />);
export const WithDarkTheme = () => <ThemeStory theme='dark' />;
stories.add('with black theme', () => <ThemeStory theme='black' />);
export const WithBlackTheme = () => <ThemeStory theme='black' />;
const FontStory = ({ fontScale }) => (
const FontStory = ({ fontScale }: { fontScale: number }) => (
// @ts-ignore
<DimensionsContext.Provider value={{ fontScale }}>
<ListFull />
</DimensionsContext.Provider>
@ -196,20 +197,19 @@ const FontStory = ({ fontScale }) => (
* It's going to test height only.
* Font scale on text and icons is applied based on OS setting
*/
stories.add('with small font', () => <FontStory fontScale={0.8} />);
export const WithSmallFont = () => <FontStory fontScale={0.8} />;
stories.add('with bigger font', () => <FontStory fontScale={1.5} />);
export const WithBiggerFont = () => <FontStory fontScale={1.5} />;
stories.add('with FlatList', () => (
export const WithFlatList = () => (
<SafeAreaView>
<FlatList
data={[...Array(30).keys()]}
contentContainerStyle={List.styles.contentContainerStyleFlatList}
renderItem={({ item }) => <List.Item title={item} translateTitle={false} />}
renderItem={({ item }) => <List.Item title={item.toString()} translateTitle={false} />}
ListHeaderComponent={List.Separator}
ListFooterComponent={List.Separator}
ItemSeparatorComponent={List.Separator}
keyExtractor={item => item}
/>
</SafeAreaView>
));
);

7
app/containers/List/ListContainer.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { withTheme } from '../../theme';
import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
const styles = StyleSheet.create({
@ -14,7 +13,7 @@ interface IListContainer {
children: (React.ReactElement | null)[] | React.ReactElement | null;
testID?: string;
}
const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
const ListContainer = ({ children, ...props }: IListContainer) => (
<ScrollView
contentContainerStyle={styles.container}
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
@ -23,8 +22,8 @@ const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
>
{children}
</ScrollView>
));
);
ListContainer.displayName = 'List.Container';
export default withTheme(ListContainer);
export default ListContainer;

4
app/containers/List/ListSection.tsx
View File

@ -15,12 +15,12 @@ interface IListSection {
translateTitle?: boolean;
}
const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
const ListSection = ({ children, title, translateTitle }: IListSection) => (
<View style={styles.container}>
{title ? <Header {...{ title, translateTitle }} /> : null}
{children}
</View>
));
);
ListSection.displayName = 'List.Section';

31
app/containers/LoginServices/LoginServices.stories.js → app/containers/LoginServices/LoginServices.stories.tsx
View File

@ -1,15 +1,13 @@
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { Provider } from 'react-redux';
import { StyleSheet, Text, ScrollView } from 'react-native';
import { StyleSheet, Text } from 'react-native';
import { store } from '../../../storybook/stories';
import { ThemeContext } from '../../theme';
import { colors } from '../../lib/constants';
import i18n from '../../i18n';
import sharedStyles from '../../views/Styles';
import ServicesSeparator from './ServicesSeparator';
import ButtonService from './ButtonService';
import { IServices } from '../../selectors/login';
import { TIconsName } from '../CustomIcon';
const styles = StyleSheet.create({
serviceName: {
@ -58,26 +56,25 @@ const services = {
custom: false,
authType: 'apple'
}
};
} as unknown as IServices;
const theme = 'light';
const stories = storiesOf('Login Services', module)
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
.addDecorator(story => <ThemeContext.Provider value={{ theme, colors: colors[theme] }}>{story()}</ThemeContext.Provider>)
.addDecorator(story => <ScrollView style={sharedStyles.containerScrollView}>{story()}</ScrollView>);
export default {
title: 'Login Services'
};
stories.add('ServicesSeparator', () => (
export const Separators = () => (
<>
<ServicesSeparator collapsed onPressButtonSeparator={() => {}} separator services={services} />
<ServicesSeparator collapsed={false} onPressButtonSeparator={() => {}} separator services={services} />
<ServicesSeparator collapsed onPress={() => {}} separator services={services} />
<ServicesSeparator collapsed={false} onPress={() => {}} separator services={services} />
</>
));
);
stories.add('ServiceList', () => (
export const ServiceList = () => (
<>
{Object.values(services).map(service => {
const icon = `${service.name}-monochromatic`;
const icon = `${service.name}-monochromatic` as TIconsName;
const buttonText = (
<>
{i18n.t('Continue_with')} <Text style={styles.serviceName}>{service.name}</Text>
@ -96,4 +93,4 @@ stories.add('ServiceList', () => (
);
})}
</>
));
);

5
app/containers/LoginServices/__snapshots__/LoginServices.stories.storyshot
View File

@ -1,5 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Login Services ServiceList 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"padding\\":15,\\"paddingBottom\\":30}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]}]}"`;
exports[`Storyshots Login Services ServicesSeparator 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"padding\\":15,\\"paddingBottom\\":30}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"More options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":false,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"More options\\"},\\"children\\":[\\"More options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Less options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":false,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Less options\\"},\\"children\\":[\\"Less options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]}]}]}"`;

2
app/containers/Passcode/PasscodeEnter.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { useAsyncStorage } from '@react-native-community/async-storage';
import { useAsyncStorage } from '@react-native-async-storage/async-storage';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import * as Haptics from 'expo-haptics';
import { sha256 } from 'js-sha256';

2
app/containers/Passcode/utils.ts
View File

@ -1,4 +1,4 @@
import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import moment from 'moment';
import { LOCKED_OUT_TIMER_KEY, TIME_TO_LOCK } from '../../lib/constants';

57
app/containers/RoomHeader/RoomHeader.stories.js → app/containers/RoomHeader/RoomHeader.stories.tsx
View File

@ -1,31 +1,20 @@
import React from 'react';
import { Dimensions, SafeAreaView } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Provider } from 'react-redux';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Header, HeaderBackground } from '@react-navigation/elements';
import { Dimensions, View } from 'react-native';
import { longText } from '../../../storybook/utils';
import { ThemeContext } from '../../theme';
import { store } from '../../../storybook/stories';
import { longText } from '../../../.storybook/utils';
import { ThemeContext, TSupportedThemes } from '../../theme';
import { colors, themes } from '../../lib/constants';
import RoomHeaderComponent from './RoomHeader';
const stories = storiesOf('RoomHeader', module)
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
.addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>);
const { width, height } = Dimensions.get('window');
const HeaderExample = ({ title, theme = 'light' }) => (
<SafeAreaView>
<Header
title=''
headerTitle={title}
headerTitleAlign='left'
headerBackground={() => <HeaderBackground style={{ backgroundColor: themes[theme].headerBackground }} />}
/>
</SafeAreaView>
export default {
title: 'RoomHeader'
};
const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
// Using View directly instead of Header from react-navigation because it's easier to test.
<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View>
);
const RoomHeader = ({ ...props }) => (
@ -42,7 +31,7 @@ const RoomHeader = ({ ...props }) => (
/>
);
stories.add('title and subtitle', () => (
export const TitleSubtitle = () => (
<>
<HeaderExample title={() => <RoomHeader title='title' type='p' />} />
<HeaderExample title={() => <RoomHeader title={longText} type='p' />} />
@ -50,9 +39,9 @@ stories.add('title and subtitle', () => (
<HeaderExample title={() => <RoomHeader subtitle={longText} />} />
<HeaderExample title={() => <RoomHeader title={longText} subtitle={longText} />} />
</>
));
);
stories.add('icons', () => (
export const Icons = () => (
<>
<HeaderExample title={() => <RoomHeader title='private channel' type='p' />} />
<HeaderExample title={() => <RoomHeader title='public channel' type='c' />} />
@ -67,41 +56,41 @@ stories.add('icons', () => (
<HeaderExample title={() => <RoomHeader title='loading dm' type='d' status='loading' />} />
<HeaderExample title={() => <RoomHeader title='offline dm' type='d' />} />
</>
));
);
stories.add('typing', () => (
export const Typing = () => (
<>
<HeaderExample title={() => <RoomHeader usersTyping={['user 1']} />} />
<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2']} />} />
<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2', 'user 3', 'user 4', 'user 5']} />} />
</>
));
);
stories.add('landscape', () => (
export const Landscape = () => (
<>
<HeaderExample title={() => <RoomHeader width={height} height={width} />} />
<HeaderExample title={() => <RoomHeader width={height} height={width} subtitle='subtitle' />} />
<HeaderExample title={() => <RoomHeader width={height} height={width} title={longText} subtitle={longText} />} />
</>
));
);
stories.add('thread', () => (
export const Thread = () => (
<>
<HeaderExample title={() => <RoomHeader tmid='123' parentTitle='parent title' />} />
<HeaderExample title={() => <RoomHeader tmid='123' title={'markdown\npreview\n#3\n4\n5'} parentTitle={longText} />} />
</>
));
);
const ThemeStory = ({ theme }) => (
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
<HeaderExample title={() => <RoomHeader subtitle='subtitle' />} theme={theme} />
</ThemeContext.Provider>
);
stories.add('themes', () => (
export const Themes = () => (
<>
<ThemeStory theme='light' />
<ThemeStory theme='dark' />
<ThemeStory theme='black' />
</>
));
);

13
app/containers/RoomHeader/__snapshots__/RoomHeader.stories.storyshot
View File

@ -1,13 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots RoomHeader icons 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots RoomHeader landscape 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots RoomHeader themes 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots RoomHeader thread 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots RoomHeader title and subtitle 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots RoomHeader typing 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;

68
storybook/stories/RoomItem.js → app/containers/RoomItem/RoomItem.stories.tsx
View File

@ -1,16 +1,10 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Dimensions, ScrollView } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Provider } from 'react-redux';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import RoomItemComponent from '../../app/containers/RoomItem/RoomItem';
import { longText } from '../utils';
import { DisplayMode, themes } from '../../app/lib/constants';
import { store } from './index';
import { longText } from '../../../.storybook/utils';
import { DisplayMode } from '../../lib/constants';
import RoomItemComponent from './RoomItem';
const baseUrl = 'https://open.rocket.chat';
const { width } = Dimensions.get('window');
const _theme = 'light';
const lastMessage = {
@ -23,12 +17,11 @@ const updatedAt = {
date: '10:00'
};
const RoomItem = props => (
const RoomItem = (props: any) => (
<RoomItemComponent
type='d'
name='rocket.cat'
avatar='rocket.cat'
baseUrl={baseUrl}
width={width}
theme={_theme}
showAvatar
@ -38,23 +31,22 @@ const RoomItem = props => (
/>
);
const stories = storiesOf('Room Item', module)
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
.addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>)
.addDecorator(story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>);
export default {
title: 'RoomItem'
};
stories.add('Basic', () => <RoomItem />);
export const Basic = () => <RoomItem />;
stories.add('Touch', () => <RoomItem onPress={() => alert('on press')} onLongPress={() => alert('on long press')} />);
export const Touch = () => <RoomItem onPress={() => alert('on press')} onLongPress={() => alert('on long press')} />;
stories.add('User', () => (
export const User = () => (
<>
<RoomItem name='diego.mello' avatar='diego.mello' />
<RoomItem name={longText} />
</>
));
);
stories.add('Type', () => (
export const Type = () => (
<>
<RoomItem type='d' />
<RoomItem type='c' />
@ -64,9 +56,9 @@ stories.add('Type', () => (
<RoomItem type='d' isGroupChat />
<RoomItem type='&' />
</>
));
);
stories.add('User status', () => (
export const UserStatus = () => (
<>
<RoomItem status='online' />
<RoomItem status='away' />
@ -75,9 +67,9 @@ stories.add('User status', () => (
<RoomItem status='loading' />
<RoomItem status='wrong' />
</>
));
);
stories.add('Alerts', () => (
export const Alerts = () => (
<>
<RoomItem alert />
<RoomItem alert name='unread' unread={1} />
@ -91,18 +83,18 @@ stories.add('Alerts', () => (
<RoomItem name='group mentions priority 2' alert unread={1} groupMentions={1} tunread={[1]} />
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
</>
));
);
stories.add('Tag', () => (
export const Tag = () => (
<>
<RoomItem autoJoin />
<RoomItem showLastMessage autoJoin />
<RoomItem name={longText} autoJoin />
<RoomItem name={longText} autoJoin showLastMessage />
</>
));
);
stories.add('Last Message', () => (
export const LastMessage = () => (
<>
<RoomItem showLastMessage />
<RoomItem
@ -129,18 +121,18 @@ stories.add('Last Message', () => (
<RoomItem showLastMessage alert unread={1000} lastMessage={lastMessage} />
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} />
</>
));
);
stories.add('Condensed Room Item', () => (
export const CondensedRoomItem = () => (
<>
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.Condensed} />
<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DisplayMode.Condensed} />
<RoomItem type='c' displayMode={DisplayMode.Condensed} autoJoin />
</>
));
);
stories.add('Condensed Room Item without Avatar', () => (
export const CondensedRoomItemWithoutAvatar = () => (
<>
<RoomItem
showLastMessage
@ -153,9 +145,9 @@ stories.add('Condensed Room Item without Avatar', () => (
<RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
<RoomItem name={longText} autoJoin displayMode={DisplayMode.Condensed} showAvatar={false} />
</>
));
);
stories.add('Expanded Room Item without Avatar', () => (
export const ExpandedRoomItemWithoutAvatar = () => (
<>
<RoomItem
showLastMessage
@ -183,9 +175,9 @@ stories.add('Expanded Room Item without Avatar', () => (
showAvatar={false}
/>
</>
));
);
stories.add('Omnichannel Icon', () => (
export const OmnichannelIcon = () => (
<>
<RoomItem type='l' sourceType={{ type: 'widget' }} status='online' />
<RoomItem type='l' sourceType={{ type: 'widget' }} status='away' />
@ -198,4 +190,4 @@ stories.add('Omnichannel Icon', () => (
<RoomItem type='l' sourceType={{ type: 'other' }} status='online' />
<RoomItem type='l' sourceType={{ type: 'other' }} />
</>
));
);

7
app/containers/SearchBox/SearchBox.stories.js
View File

@ -1,7 +0,0 @@
import { storiesOf } from '@storybook/react-native';
import React from 'react';
import SearchBox from './index';
const stories = storiesOf('SearchBox', module);
stories.add('Item', () => <SearchBox />);

9
app/containers/SearchBox/SearchBox.stories.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import SearchBox from './index';
export default {
title: 'SearchBox'
};
export const Basic = () => <SearchBox />;

3
app/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots SearchBox Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;

69
app/containers/ServerItem/ServerItem.stories.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import { themes } from '../../lib/constants';
import ServerItemComponent, { IServerItem } from '.';
import { ThemeContext, TSupportedThemes } from '../../theme';
export default {
title: 'ServerItem'
};
const defaultItem = {
name: 'Rocket.Chat',
id: 'https://open.rocket.chat/',
iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
};
const ServerItem = ({
item,
theme = 'light',
onPress = () => alert('Press'),
onLongPress,
hasCheck
}: {
item?: Partial<IServerItem['item']>;
theme?: TSupportedThemes;
onPress?: IServerItem['onPress'];
onLongPress?: IServerItem['onLongPress'];
hasCheck?: IServerItem['hasCheck'];
}) => (
<ThemeContext.Provider
value={{
theme,
colors: themes[theme]
}}
>
<ServerItemComponent item={{ ...defaultItem, ...item }} onPress={onPress} onLongPress={onLongPress} hasCheck={hasCheck} />
</ThemeContext.Provider>
);
export const Content = () => (
<>
<ServerItem hasCheck />
<ServerItem
item={{
name: 'Super Long Server Name in Rocket.Chat',
id: 'https://superlongservername.tologintoasuperlongservername/'
}}
/>
<ServerItem
item={{
id: 'https://stable.rocket.chat/'
}}
/>
</>
);
export const Touchable = () => (
<>
<ServerItem onLongPress={() => alert('Long Press')} />
</>
);
export const Themes = () => (
<>
<ServerItem theme={'light'} />
<ServerItem theme={'dark'} />
<ServerItem theme={'black'} />
</>
);

2
app/containers/ServerItem/index.tsx
View File

@ -12,7 +12,7 @@ import { useTheme } from '../../theme';
export { ROW_HEIGHT };
interface IServerItem {
export interface IServerItem {
item: IServerInfo;
onPress(): void;
onLongPress?(): void;

12
app/containers/TextInput/TextInput.stories.js → app/containers/TextInput/TextInput.stories.tsx
View File

@ -1,8 +1,6 @@
/* 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 { View, StyleSheet } from 'react-native';
import { FormTextInput } from '.';
const styles = StyleSheet.create({
@ -11,14 +9,16 @@ const styles = StyleSheet.create({
}
});
const stories = storiesOf('Text Input', module);
export default {
title: 'TextInput'
};
const item = {
name: 'Rocket.Chat',
longText: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
};
stories.add('Short and Long Text', () => (
export const ShortAndLong = () => (
<>
<View style={styles.paddingHorizontal}>
<FormTextInput label='Short Text' placeholder='placeholder' value={item.name} />
@ -26,4 +26,4 @@ stories.add('Short and Long Text', () => (
<FormTextInput label='Long Text' placeholder='placeholder' value={item.longText} />
</View>
</>
));
);

3
app/containers/TextInput/__snapshots__/TextInput.stories.storyshot
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Text Input Short and Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;

91
storybook/stories/UiKitMessage.js → app/containers/UIKit/UiKitMessage.stories.tsx
View File

@ -1,11 +1,9 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { ScrollView, StyleSheet } from 'react-native';
import MessageContext from '../../app/containers/message/Context';
import { UiKitMessage } from '../../app/containers/UIKit';
import { themes } from '../../app/lib/constants';
import MessageContext from '../message/Context';
import { UiKitMessage } from '.';
import { themes } from '../../lib/constants';
const styles = StyleSheet.create({
container: {
@ -20,12 +18,16 @@ const styles = StyleSheet.create({
const user = {
id: 'y8bd77ptZswPj3EW8',
username: 'diego.mello',
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
token: 'abc'
};
const baseUrl = 'https://open.rocket.chat';
const messageDecorator = story => (
export default {
title: 'UIKit/UiKitMessage',
decorators: [
(Story: any) => (
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
<MessageContext.Provider
value={{
user,
@ -41,20 +43,14 @@ const messageDecorator = story => (
threadBadgeColor: themes.light.tunreadColor
}}
>
{story()}
<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 = () =>
export const Section = () =>
UiKitMessage([
{
type: 'section',
@ -64,9 +60,8 @@ const Section = () =>
}
}
]);
stories.add('Section', () => <Section />);
const SectionMarkdownList = () =>
export const SectionMarkdownList = () =>
UiKitMessage([
{
type: 'section',
@ -76,9 +71,9 @@ const SectionMarkdownList = () =>
}
}
]);
stories.add('Section + Markdown List', () => <SectionMarkdownList />);
SectionMarkdownList.storyName = 'Section + Markdown List';
const SectionOverflow = () =>
export const SectionOverflow = () =>
UiKitMessage([
{
type: 'section',
@ -125,9 +120,9 @@ const SectionOverflow = () =>
}
}
]);
stories.add('Section + Overflow', () => <SectionOverflow />);
SectionOverflow.storyName = 'Section + Overflow';
const SectionImage = () =>
export const SectionImage = () =>
UiKitMessage([
{
type: 'section',
@ -142,9 +137,9 @@ const SectionImage = () =>
}
}
]);
stories.add('Section + image', () => <SectionImage />);
SectionImage.storyName = 'Section + image';
const SectionButton = () =>
export const SectionButton = () =>
UiKitMessage([
{
type: 'section',
@ -161,9 +156,9 @@ const SectionButton = () =>
}
}
]);
stories.add('Section + button', () => <SectionButton />);
SectionButton.storyName = 'Section + button';
const SectionSelect = () =>
export const SectionSelect = () =>
UiKitMessage([
{
type: 'section',
@ -192,9 +187,9 @@ const SectionSelect = () =>
}
}
]);
stories.add('Section + Select', () => <SectionSelect />);
SectionSelect.storyName = 'Section + Select';
const SectionDatePicker = () =>
export const SectionDatePicker = () =>
UiKitMessage([
{
type: 'section',
@ -213,9 +208,9 @@ const SectionDatePicker = () =>
}
}
]);
stories.add('Section + DatePicker', () => <SectionDatePicker />);
SectionDatePicker.storyName = 'Section + DatePicker';
const SectionMultiSelect = () =>
export const SectionMultiSelect = () =>
UiKitMessage([
{
type: 'section',
@ -258,9 +253,9 @@ const SectionMultiSelect = () =>
}
}
]);
stories.add('Section + Multi Select', () => <SectionMultiSelect />);
SectionMultiSelect.storyName = 'Section + Multi Select';
const Image = () =>
export const Image = () =>
UiKitMessage([
{
type: 'image',
@ -273,9 +268,9 @@ const Image = () =>
altText: 'Example Image'
}
]);
stories.add('Image', () => <Image />);
Image.storyName = 'Image';
const Context = () =>
export const Context = () =>
UiKitMessage([
{
type: 'context',
@ -297,9 +292,9 @@ const Context = () =>
]
}
]);
stories.add('Context', () => <Context />);
Context.storyName = 'Context';
const ActionButton = () =>
export const ActionButton = () =>
UiKitMessage([
{
type: 'actions',
@ -377,9 +372,9 @@ const ActionButton = () =>
]
}
]);
stories.add('Action - Buttons', () => <ActionButton />);
ActionButton.storyName = 'Action - Buttons';
const Fields = () =>
export const Fields = () =>
UiKitMessage([
{
type: 'section',
@ -412,9 +407,9 @@ const Fields = () =>
]
}
]);
stories.add('Fields', () => <Fields />);
Fields.storyName = 'Fields';
const ActionSelect = () =>
export const ActionSelect = () =>
UiKitMessage([
{
type: 'actions',
@ -488,12 +483,4 @@ const ActionSelect = () =>
]
}
]);
stories.add('Action - Select', () => <ActionSelect />);
// stories.add('Section', () => UiKitMessage([{
// type: 'section',
// text: {
// type: 'mrkdwn',
// text: 'Section'
// }
// }]));
ActionSelect.storyName = 'Action - Select';

73
storybook/stories/UiKitModal.js → app/containers/UIKit/UiKitModal.stories.tsx
View File

@ -1,12 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { ScrollView, StyleSheet } from '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';
import { UiKitComponent, UiKitModal } from '.';
import { KitContext, defaultContext } from './utils';
import MessageContext from '../message/Context';
import { themes } from '../../lib/constants';
const styles = StyleSheet.create({
container: {
@ -21,12 +20,16 @@ const styles = StyleSheet.create({
const user = {
id: 'y8bd77ptZswPj3EW8',
username: 'diego.mello',
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
token: 'abc'
};
const baseUrl = 'https://open.rocket.chat';
const messageDecorator = story => (
export default {
title: 'UIKit/UiKitModal',
decorators: [
(Story: any) => (
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
<MessageContext.Provider
value={{
user,
@ -42,20 +45,14 @@ const messageDecorator = story => (
threadBadgeColor: themes.light.tunreadColor
}}
>
{story()}
<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 = () =>
export const ModalSectionSelects = () =>
UiKitModal([
{
type: 'section',
@ -94,9 +91,9 @@ const ModalSectionSelects = () =>
]
}
]);
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);
ModalSectionSelects.storyName = 'Modal - Section and Selects';
const ModalSectionAccessories = () =>
export const ModalSectionAccessories = () =>
UiKitModal([
{
type: 'section',
@ -141,9 +138,9 @@ const ModalSectionAccessories = () =>
}
}
]);
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);
ModalSectionAccessories.storyName = 'Modal - Section and Accessories';
const ModalFormInput = () =>
export const ModalFormInput = () =>
UiKitModal([
{
type: 'input',
@ -206,9 +203,9 @@ const ModalFormInput = () =>
}
}
]);
stories.add('Modal - Form Input', () => <ModalFormInput />);
ModalFormInput.storyName = 'Modal - Form Input';
const ModalFormTextArea = () =>
export const ModalFormTextArea = () =>
UiKitModal([
{
type: 'context',
@ -264,9 +261,9 @@ const ModalFormTextArea = () =>
}
}
]);
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);
ModalFormTextArea.storyName = 'Modal - Form TextArea';
const ModalImages = () =>
export const ModalImages = () =>
UiKitModal([
{
type: 'image',
@ -306,9 +303,9 @@ const ModalImages = () =>
}
}
]);
stories.add('Modal - Images', () => <ModalImages />);
ModalImages.storyName = 'Modal - Images';
const ModalActions = () =>
export const ModalActions = () =>
UiKitModal([
{
type: 'input',
@ -434,9 +431,9 @@ const ModalActions = () =>
}
}
]);
stories.add('Modal - Actions', () => <ModalActions />);
ModalActions.storyName = 'Modal - Actions';
const ModalContextsDividers = () =>
export const ModalContextsDividers = () =>
UiKitModal([
{
type: 'context',
@ -538,9 +535,9 @@ const ModalContextsDividers = () =>
}
}
]);
stories.add('Modal - Contexts and Dividers', () => <ModalContextsDividers />);
ModalContextsDividers.storyName = 'Modal - Contexts and Dividers';
const ModalInputWithError = () => (
export const ModalInputWithError = () => (
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
<UiKitComponent
render={UiKitModal}
@ -561,9 +558,9 @@ const ModalInputWithError = () => (
/>
</KitContext.Provider>
);
stories.add('Modal - Input with error', () => <ModalInputWithError />);
ModalInputWithError.storyName = 'Modal - Input with error';
const ModalMultilneWithError = () => (
export const ModalMultilneWithError = () => (
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
<UiKitComponent
render={UiKitModal}
@ -585,9 +582,9 @@ const ModalMultilneWithError = () => (
/>
</KitContext.Provider>
);
stories.add('Modal - Multilne with error', () => <ModalMultilneWithError />);
ModalMultilneWithError.storyName = 'Modal - Multilne with error';
const ModalDatePickerWithError = () => (
export const ModalDatePickerWithError = () => (
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
<UiKitComponent
render={UiKitModal}
@ -614,4 +611,4 @@ const ModalDatePickerWithError = () => (
/>
</KitContext.Provider>
);
stories.add('Modal - DatePicker with error', () => <ModalDatePickerWithError />);
ModalDatePickerWithError.storyName = 'Modal - DatePicker with error';

37
storybook/stories/UnreadBadge.js → app/containers/UnreadBadge/UnreadBadge.stories.tsx
View File

@ -1,14 +1,15 @@
/* 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 { View } from 'react-native';
import UnreadBadge from '../../app/containers/UnreadBadge';
import { ThemeContext } from '../../app/theme';
import { themes } from '../../lib/constants';
import UnreadBadge from '.';
import { ThemeContext, TSupportedThemes } from '../../theme';
const stories = storiesOf('Unread Badge', module);
export default {
title: 'Unread Badge'
};
const StoryTester = ({ children }) => (
const StoryTester = ({ children }: { children: React.ReactElement | React.ReactElement[] }) => (
<View
style={{
flex: 1,
@ -21,7 +22,7 @@ const StoryTester = ({ children }) => (
</View>
);
stories.add('all', () => (
export const All = () => (
<StoryTester>
<UnreadBadge unread={9} small />
<UnreadBadge unread={999} small />
@ -31,23 +32,23 @@ stories.add('all', () => (
<UnreadBadge unread={9} groupMentions={1} />
<UnreadBadge unread={9} tunread={[1]} />
</StoryTester>
));
);
stories.add('small', () => (
export const Small = () => (
<StoryTester>
<UnreadBadge unread={9} small />
<UnreadBadge unread={999} small />
</StoryTester>
));
);
stories.add('normal', () => (
export const Normal = () => (
<StoryTester>
<UnreadBadge unread={9} />
<UnreadBadge unread={9999} />
</StoryTester>
));
);
stories.add('different mention types', () => (
export const DifferentMentionTypes = () => (
<StoryTester>
<UnreadBadge unread={1} />
<UnreadBadge unread={1} userMentions={1} />
@ -57,10 +58,10 @@ stories.add('different mention types', () => (
<UnreadBadge unread={1} tunreadUser={[1]} />
<UnreadBadge unread={1} tunreadGroup={[1]} />
</StoryTester>
));
);
const ThemeStory = ({ theme }) => (
<ThemeContext.Provider value={{ theme }}>
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<StoryTester>
<UnreadBadge unread={1} />
<UnreadBadge unread={1} userMentions={1} />
@ -70,10 +71,10 @@ const ThemeStory = ({ theme }) => (
</ThemeContext.Provider>
);
stories.add('themes', () => (
export const Themes = () => (
<>
<ThemeStory theme='light' />
<ThemeStory theme='dark' />
<ThemeStory theme='black' />
</>
));
);

6
app/containers/UnreadBadge/index.tsx
View File

@ -34,9 +34,9 @@ export interface IUnreadBadge {
userMentions?: number;
groupMentions?: number;
style?: StyleProp<ViewStyle>;
tunread?: [];
tunreadUser?: [];
tunreadGroup?: [];
tunread?: any[];
tunreadUser?: any[];
tunreadGroup?: any[];
small?: boolean;
hideUnreadStatus?: boolean;
hideMentionStatus?: boolean;

76
storybook/stories/Markdown.tsx → app/containers/markdown/Markdown.stories.tsx
View File

@ -1,13 +1,10 @@
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import Markdown, { MarkdownPreview } from '../../app/containers/markdown';
import { themes } from '../../app/lib/constants';
import { TGetCustomEmoji, IEmoji } from '../../app/definitions/IEmoji';
import { store } from '.';
import { NavigationDecorator } from '../StoryNavigator';
import Markdown, { MarkdownPreview } from '.';
import { themes } from '../../lib/constants';
import { TGetCustomEmoji, IEmoji } from '../../definitions/IEmoji';
const theme = 'light';
@ -16,10 +13,6 @@ const styles = StyleSheet.create({
marginHorizontal: 15,
backgroundColor: themes[theme].backgroundColor,
marginVertical: 50
},
separator: {
marginHorizontal: 10,
marginVertical: 10
}
});
@ -45,11 +38,18 @@ const getCustomEmoji: TGetCustomEmoji = content => {
return customEmoji;
};
const stories = storiesOf('Markdown', module)
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
.addDecorator(NavigationDecorator);
export default {
title: 'Markdown',
decorators: [
(Story: any) => (
<NavigationContainer>
<Story />
</NavigationContainer>
)
]
};
stories.add('Text', () => (
export const Text = () => (
<View style={styles.container}>
<Markdown msg='This is Rocket.Chat' theme={theme} />
<Markdown msg={longText} theme={theme} />
@ -57,9 +57,9 @@ stories.add('Text', () => (
<Markdown msg={sequentialEmptySpacesText} theme={theme} />
<Markdown msg='Strong emphasis, aka bold, with **asterisks** or __underscores__' theme={theme} />
</View>
));
);
stories.add('Preview', () => (
export const Preview = () => (
<View style={styles.container}>
<MarkdownPreview msg={longText} />
<MarkdownPreview msg={lineBreakText} />
@ -68,9 +68,9 @@ stories.add('Preview', () => (
<MarkdownPreview msg='Testing: 😃 :+1: :marioparty:' />
<MarkdownPreview msg='Fallback from new md to old' />
</View>
));
);
stories.add('Mentions', () => (
export const Mentions = () => (
<ScrollView style={styles.container}>
<Markdown
msg='@rocket.cat @name1 @all @here @unknown'
@ -96,15 +96,15 @@ stories.add('Mentions', () => (
useRealName
/>
</ScrollView>
));
);
stories.add('Hashtag', () => (
export const Hashtag = () => (
<View style={styles.container}>
<Markdown msg='#test-channel #unknown' theme={theme} channels={[{ _id: '123', name: 'test-channel' }]} />
</View>
));
);
stories.add('Emoji', () => (
export const Emoji = () => (
<View style={styles.container}>
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
@ -116,9 +116,9 @@ stories.add('Emoji', () => (
/>
<Markdown msg='😃 :+1: :marioparty:' theme={theme} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
</View>
));
);
stories.add('Block quote', () => (
export const BlockQuote = () => (
<View style={styles.container}>
<Markdown
msg={`> This is block quote
@ -126,22 +126,22 @@ this is a normal line`}
theme={theme}
/>
</View>
));
);
stories.add('Links', () => (
export const 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', () => (
export const 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', () => (
export const Headers = () => (
<View style={styles.container}>
<Markdown msg='# Header 1' theme={theme} />
<Markdown msg='## Header 2' theme={theme} />
@ -150,9 +150,9 @@ stories.add('Headers', () => (
<Markdown msg='##### Header 5' theme={theme} />
<Markdown msg='###### Header 6' theme={theme} />
</View>
));
);
stories.add('Code', () => (
export const Code = () => (
<View style={styles.container}>
<Markdown msg='This is `inline code`' theme={theme} />
<Markdown
@ -163,16 +163,16 @@ Code block
theme={theme}
/>
</View>
));
);
stories.add('Lists', () => (
export const 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', () => (
export const Table = () => (
<View style={styles.container}>
<Markdown
msg='First Header | Second Header
@ -182,4 +182,4 @@ Content in the first column | Content in the second column'
theme={theme}
/>
</View>
));
);

94
storybook/stories/NewMarkdown.js → app/containers/markdown/new/NewMarkdown.stories.tsx
View File

@ -1,18 +1,21 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import NewMarkdown from '../../app/containers/markdown/new';
import { themes } from '../../app/lib/constants';
import { longText } from '../utils';
import { NavigationDecorator } from '../StoryNavigator';
import { store } from './index';
import NewMarkdownComponent from '.';
import { themes } from '../../../lib/constants';
import { longText } from '../../../../.storybook/utils';
const stories = storiesOf('NewMarkdown', module)
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
.addDecorator(NavigationDecorator);
export default {
title: 'NewMarkdown',
decorators: [
(Story: any) => (
<NavigationContainer>
<Story />
</NavigationContainer>
)
]
};
const theme = 'light';
@ -24,7 +27,7 @@ const styles = StyleSheet.create({
}
});
const getCustomEmoji = content => {
const getCustomEmoji = (content: string) => {
const customEmoji = {
marioparty: { name: content, extension: 'gif' },
nyan_rocket: { name: content, extension: 'png' }
@ -33,6 +36,10 @@ const getCustomEmoji = content => {
};
const baseUrl = 'https://open.rocket.chat';
const NewMarkdown = ({ ...props }) => (
<NewMarkdownComponent baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} username='rocket.cat' {...props} />
);
const simpleTextMsg = [
{
type: 'PARAGRAPH',
@ -109,7 +116,7 @@ const sequentialEmptySpacesMsg = [
}
];
stories.add('Text', () => (
export const Text = () => (
<View style={styles.container}>
<NewMarkdown tokens={simpleTextMsg} />
<NewMarkdown tokens={longTextMsg} />
@ -117,7 +124,7 @@ stories.add('Text', () => (
<NewMarkdown tokens={sequentialEmptySpacesMsg} />
<NewMarkdown tokens={[...simpleTextMsg, ...longTextMsg]} />
</View>
));
);
const allMentionTokens = [
{
@ -160,6 +167,17 @@ const multipleMentionTokens = [
type: 'PLAIN_TEXT',
value: ' '
},
{
type: 'MENTION_USER',
value: {
type: 'PLAIN_TEXT',
value: 'not_a_user'
}
},
{
type: 'PLAIN_TEXT',
value: ' '
},
{
type: 'MENTION_USER',
value: {
@ -208,18 +226,12 @@ const multipleMentions = [
}
];
stories.add('Mentions', () => (
export const Mentions = () => (
<View style={styles.container}>
<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} />
<NewMarkdown
tokens={multipleMentionTokens}
mentions={multipleMentions}
navToRoomInfo={() => {}}
style={[]}
username='rocket.cat'
/>
<NewMarkdown tokens={multipleMentionTokens} mentions={multipleMentions} navToRoomInfo={() => {}} style={[]} />
</View>
));
);
const channelTokens = [
{
@ -254,11 +266,11 @@ const channelMention = [
}
];
stories.add('Hashtag', () => (
export const Hashtag = () => (
<View style={styles.container}>
<NewMarkdown tokens={channelTokens} channels={channelMention} navToRoomInfo={() => {}} />
</View>
));
);
const bigEmojiTokens = [
{
@ -325,12 +337,12 @@ const emojiTokens = [
}
];
stories.add('Emoji', () => (
export const Emoji = () => (
<View style={styles.container}>
<NewMarkdown tokens={bigEmojiTokens} />
<NewMarkdown tokens={emojiTokens} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
</View>
));
);
const blockQuoteTokens = [
{
@ -363,11 +375,11 @@ const blockQuoteTokens = [
}
];
stories.add('Block quote', () => (
export const BlockQuote = () => (
<View style={styles.container}>
<NewMarkdown tokens={blockQuoteTokens} />
</View>
));
);
const rocketChatLink = [
{
@ -411,14 +423,14 @@ const markdownLink = [
}
];
stories.add('Links', () => (
export const Links = () => (
<View style={styles.container}>
<NewMarkdown tokens={rocketChatLink} />
<NewMarkdown tokens={markdownLink} />
</View>
));
);
stories.add('Headers', () => (
export const Headers = () => (
<View style={styles.container}>
<NewMarkdown
tokens={[
@ -505,7 +517,7 @@ stories.add('Headers', () => (
]}
/>
</View>
));
);
const inlineCodeToken = [
{
@ -538,12 +550,12 @@ const multilineCodeToken = [
}
];
stories.add('Code', () => (
export const Code = () => (
<View style={styles.container}>
<NewMarkdown tokens={inlineCodeToken} style={[]} />
<NewMarkdown tokens={multilineCodeToken} style={[]} />
</View>
));
);
const items = [
[
@ -685,13 +697,13 @@ const tasks = [
}
];
stories.add('Lists', () => (
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 = [
{
@ -720,14 +732,14 @@ const inlineKatex = [
}
];
stories.add('Katex', () => (
export const Katex = () => (
<View style={styles.container}>
<NewMarkdown tokens={katex} />
</View>
));
);
stories.add('Inline Katex', () => (
export const InlineKatex = () => (
<View style={styles.container}>
<NewMarkdown tokens={inlineKatex} />
</View>
));
);

9
app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.js → app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.tsx
View File

@ -1,4 +1,3 @@
import { storiesOf } from '@storybook/react-native';
import React from 'react';
import { View } from 'react-native';
@ -19,9 +18,11 @@ const testAttachment = {
collapsed: true
};
const stories = storiesOf('Message', module);
export default {
title: 'CollapsibleQuote'
};
stories.add('Item', () => (
export const Item = () => (
<View style={{ padding: 10 }}>
<MessageContext.Provider
value={{
@ -32,4 +33,4 @@ stories.add('Item', () => (
<CollapsibleQuote key={0} index={0} attachment={testAttachment} getCustomEmoji={() => {}} timeFormat='LT' />
</MessageContext.Provider>
</View>
));
);

3
app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;

197
storybook/stories/Message.js → app/containers/message/Message.stories.tsx
View File

@ -1,23 +1,18 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { Provider } from 'react-redux';
import { storiesOf } from '@storybook/react-native';
import { ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import MessageComponent from '../../app/containers/message/Message';
import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../app/lib/constants';
import MessageSeparator from '../../app/views/RoomView/Separator';
import MessageContext from '../../app/containers/message/Context';
import { store } from './index';
import MessageComponent from './Message';
import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../lib/constants';
import MessageSeparator from '../../views/RoomView/Separator';
import MessageContext from './Context';
const _theme = 'light';
const styles = StyleSheet.create({});
const user = {
id: 'y8bd77ptZswPj3EW8',
username: 'diego.mello',
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
token: 'abc'
};
const author = {
_id: 'userid',
@ -34,7 +29,7 @@ const date = new Date(2017, 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 getCustomEmoji = content => {
const getCustomEmoji = (content: string) => {
const customEmoji = {
marioparty: { name: content, extension: 'gif' },
react_rocket: { name: content, extension: 'png' },
@ -43,7 +38,12 @@ const getCustomEmoji = content => {
return customEmoji;
};
export const MessageDecorator = story => (
export default {
title: 'Message',
decorators: [
(Story: any) => (
<NavigationContainer>
<ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>
<MessageContext.Provider
value={{
user,
@ -59,11 +59,15 @@ export const MessageDecorator = story => (
threadBadgeColor: themes.light.tunreadColor
}}
>
{story()}
<Story />
</MessageContext.Provider>
);
</ScrollView>
</NavigationContainer>
)
]
};
export const Message = props => (
export const Message = (props: any) => (
<MessageComponent
baseUrl={baseUrl}
user={user}
@ -77,23 +81,14 @@ export const Message = props => (
/>
);
export const StoryProvider = story => <Provider store={store}>{story()}</Provider>;
const MessageScrollView = story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>;
const stories = storiesOf('Message', module)
.addDecorator(StoryProvider)
.addDecorator(MessageScrollView)
.addDecorator(MessageDecorator);
stories.add('Basic', () => (
export const Basic = () => (
<>
<Message msg='Message' />
<Message msg={longText} />
</>
));
);
stories.add('Grouped messages', () => (
export const GroupedMessages = () => (
<>
<Message msg='...' />
<Message
@ -107,11 +102,11 @@ stories.add('Grouped messages', () => (
<Message msg='This is the second message' isHeader={false} />
<Message msg='This is the first message' />
</>
));
);
stories.add('Without header', () => <Message msg='Message' isHeader={false} />);
export const WithoutHeader = () => <Message msg='Message' isHeader={false} />;
stories.add('With alias', () => (
export const WithAlias = () => (
<>
<Message msg='Message' alias='Diego Mello' />
<Message
@ -123,16 +118,16 @@ stories.add('With alias', () => (
alias='Diego Mello'
/>
</>
));
);
stories.add('Edited', () => (
export const Edited = () => (
<>
<Message msg='Message header' isEdited />
<Message msg='Message without header' isEdited isHeader={false} />
</>
));
);
stories.add('Encrypted', () => (
export const Encrypted = () => (
<>
<Message msg='Message' type='e2e' />
<Message msg='Message Encrypted without Header' isHeader={false} type='e2e' />
@ -168,29 +163,29 @@ stories.add('Encrypted', () => (
<Message msg='Read Receipt encrypted with Header' isReadReceiptEnabled read type='e2e' />
<Message msg='Read Receipt encrypted without Header' isReadReceiptEnabled read isHeader={false} type='e2e' />
</>
));
);
stories.add('Block Quote', () => (
export const BlockQuote = () => (
<>
<Message msg='> Testing block quote' />
<Message msg={'> Testing block quote\nTesting block quote'} />
</>
));
);
stories.add('Lists', () => (
export const Lists = () => (
<>
<Message msg={'* Dogs\n * cats\n - cats'} />
<Message msg={'1. Dogs \n 2. Cats'} />
<Message msg='1. Dogs' />
<Message msg='2. Cats' isHeader={false} />
</>
));
);
stories.add('Static avatar', () => (
export const StaticAvatar = () => (
<Message msg='Message' avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg' />
));
);
stories.add('Full name', () => (
export const FullName = () => (
<Message
msg='Message'
author={{
@ -200,9 +195,9 @@ stories.add('Full name', () => (
}}
useRealName
/>
));
);
stories.add('Mentions', () => (
export const Mentions = () => (
<>
<Message
msg='@rocket.cat @diego.mello @all @here #general'
@ -249,9 +244,9 @@ stories.add('Mentions', () => (
]}
/>
</>
));
);
stories.add('Emojis', () => (
export const Emojis = () => (
<>
<Message msg='👊🤙👏' />
<Message msg='👏' />
@ -260,11 +255,11 @@ stories.add('Emojis', () => (
<Message msg='🤙:react_rocket:' />
<Message msg='🤙:react_rocket:🤙🤙' />
</>
));
);
stories.add('Time format', () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />);
export const TimeFormat = () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />;
stories.add('Reactions', () => (
export const Reactions = () => (
<>
<Message
msg='Reactions'
@ -327,9 +322,9 @@ stories.add('Reactions', () => (
onReactionPress={() => {}}
/>
</>
));
);
stories.add('Date and Unread separators', () => (
export const DateAndUnreadSeparators = () => (
<>
<Message
msg='Fourth message'
@ -338,9 +333,9 @@ stories.add('Date and Unread separators', () => (
username: 'rocket.cat'
}}
/>
<MessageSeparator ts={date} unread theme={_theme} />
<MessageSeparator ts={date} unread />
<Message msg='Third message' />
<MessageSeparator unread theme={_theme} />
<MessageSeparator unread ts={null} />
<Message
msg='Second message'
author={{
@ -356,12 +351,12 @@ stories.add('Date and Unread separators', () => (
username: 'rocket.cat'
}}
/>
<MessageSeparator ts={date} theme={_theme} />
<MessageSeparator ts={date} unread={false} />
<Message msg='First message' />
</>
));
);
stories.add('With image', () => (
export const WithImage = () => (
<>
<Message
attachments={[
@ -382,9 +377,9 @@ stories.add('With image', () => (
]}
/>
</>
));
);
stories.add('With video', () => (
export const WithVideo = () => (
<>
<Message
attachments={[
@ -404,9 +399,9 @@ stories.add('With video', () => (
]}
/>
</>
));
);
stories.add('With audio', () => (
export const WithAudio = () => (
<>
<Message
attachments={[
@ -447,9 +442,9 @@ stories.add('With audio', () => (
isHeader={false}
/>
</>
));
);
stories.add('With file', () => (
export const WithFile = () => (
<>
<Message
attachments={[
@ -469,9 +464,9 @@ stories.add('With file', () => (
isHeader={false}
/>
</>
));
);
stories.add('Message with reply', () => (
export const MessageWithReply = () => (
<>
<Message
msg="I'm fine!"
@ -514,18 +509,18 @@ stories.add('Message with reply', () => (
]}
/>
</>
));
);
stories.add('Message with read receipt', () => (
export const MessageWithReadReceipt = () => (
<>
<Message msg="I'm fine!" isReadReceiptEnabled unread />
<Message msg="I'm fine!" isReadReceiptEnabled unread isHeader={false} />
<Message msg="I'm fine!" isReadReceiptEnabled read />
<Message msg="I'm fine!" isReadReceiptEnabled read isHeader={false} />
</>
));
);
stories.add('Message with thread', () => (
export const MessageWithThread = () => (
<>
<Message msg='How are you?' tcount={1} tlm={date} />
<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
@ -546,9 +541,9 @@ stories.add('Message with thread', () => (
isThreadReply
/>
</>
));
);
stories.add('Sequential thread messages following thread button', () => (
export const SequentialThreadMessagesFollowingThreadButton = () => (
<>
<Message msg='How are you?' tcount={1} tlm={date} />
<Message msg="I'm fine!" tmid='1' isThreadSequential />
@ -565,9 +560,9 @@ stories.add('Sequential thread messages following thread button', () => (
isThreadSequential
/>
</>
));
);
stories.add('Sequential thread messages following thread reply', () => (
export const SequentialThreadMessagesFollowingThreadReply = () => (
<>
<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
<Message msg='Cool!' tmid='1' isThreadSequential />
@ -584,18 +579,18 @@ stories.add('Sequential thread messages following thread reply', () => (
isThreadSequential
/>
</>
));
);
stories.add('Discussion', () => (
export const Discussion = () => (
<>
<Message type='discussion-created' drid='aisduhasidhs' dcount={null} dlm={null} msg='This is a discussion' />
<Message type='discussion-created' drid='aisduhasidhs' dcount={1} dlm={date} msg='This is a discussion' />
<Message type='discussion-created' drid='aisduhasidhs' dcount={10} dlm={date} msg={longText} />
<Message type='discussion-created' drid='aisduhasidhs' dcount={1000} dlm={date} msg='This is a discussion' />
</>
));
);
stories.add('URL', () => (
export const URL = () => (
<>
<Message
urls={[
@ -637,9 +632,9 @@ stories.add('URL', () => (
isHeader={false}
/>
</>
));
);
stories.add('Custom fields', () => (
export const CustomFields = () => (
<>
<Message
msg='Message'
@ -675,9 +670,9 @@ stories.add('Custom fields', () => (
]}
/>
</>
));
);
stories.add('Two short custom fields with markdown', () => (
export const TwoShortCustomFieldsWithMarkdown = () => (
<Message
msg='Message'
attachments={[
@ -719,9 +714,9 @@ stories.add('Two short custom fields with markdown', () => (
}
]}
/>
));
);
stories.add('Colored attachments', () => (
export const ColoredAttachments = () => (
<Message
attachments={[
{
@ -771,13 +766,13 @@ stories.add('Colored attachments', () => (
}
]}
/>
));
);
stories.add('Broadcast', () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />);
export const Broadcast = () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />;
stories.add('Archived', () => <Message msg='This message is inside an archived room' archived />);
export const Archived = () => <Message msg='This message is inside an archived room' archived />;
stories.add('Error', () => (
export const Error = () => (
<>
<Message hasError msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
<Message
@ -788,13 +783,13 @@ stories.add('Error', () => (
isHeader={false}
/>
</>
));
);
stories.add('Temp', () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />);
export const Temp = () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />;
stories.add('Editing', () => <Message msg='Message being edited' editing />);
export const Editing = () => <Message msg='Message being edited' editing />;
stories.add('System messages', () => (
export const SystemMessages = () => (
<>
<Message type='rm' isInfo />
<Message type='uj' isInfo />
@ -833,13 +828,13 @@ stories.add('System messages', () => (
<Message type='user-deleted-room-from-team' isInfo msg='channel-name' />
<Message type='user-removed-room-from-team' isInfo msg='channel-name' />
</>
));
);
stories.add('Ignored', () => <Message isIgnored />);
export const Ignored = () => <Message isIgnored />;
stories.add('Custom style', () => <Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />);
export const CustomStyle = () => <Message msg='Message' style={[{ backgroundColor: '#ddd' }]} />;
stories.add('Show a button as attachment', () => (
export const ShowButtonAsAttachment = () => (
<Message
attachments={[
{
@ -855,9 +850,9 @@ stories.add('Show a button as attachment', () => (
}
]}
/>
));
);
stories.add('Thumbnail from server', () => (
export const ThumbnailFromServer = () => (
<Message
msg='this is a thumbnail'
attachments={[
@ -869,9 +864,9 @@ stories.add('Thumbnail from server', () => (
}
]}
/>
));
);
stories.add('Long Name user', () => (
export const LongNameUser = () => (
<>
<Message msg={'this is a normal message'} author={longNameAuthor} />
<Message msg={'Edited message'} author={longNameAuthor} isEdited />
@ -911,4 +906,4 @@ stories.add('Long Name user', () => (
read
/>
</>
));
);

2
app/lib/methods/crashReport.ts
View File

@ -1,4 +1,4 @@
import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY } from '../constants';

2
app/lib/methods/helpers/localAuthentication.ts
View File

@ -1,6 +1,6 @@
import * as LocalAuthentication from 'expo-local-authentication';
import RNBootSplash from 'react-native-bootsplash';
import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { sha256 } from 'js-sha256';
import moment from 'moment';

2
app/lib/methods/helpers/review.ts
View File

@ -1,5 +1,5 @@
import { Alert, Linking } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import I18n from '../../../i18n';
import { isFDroidBuild, STORE_REVIEW_LINK } from '../../constants';

10
app/views/CannedResponsesListView/CannedResponseItem.stories.js → app/views/CannedResponsesListView/CannedResponseItem.stories.tsx
View File

@ -1,10 +1,10 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import CannedResponseItem from './CannedResponseItem';
const stories = storiesOf('CannedResponseItem', module);
export default {
title: 'CannedResponseItem'
};
const item = [
{
@ -40,7 +40,7 @@ const item = [
const theme = 'light';
stories.add('Itens', () => (
export const Itens = () => (
<>
<CannedResponseItem
theme={theme}
@ -61,4 +61,4 @@ stories.add('Itens', () => (
onPressUse={() => alert('Back to RoomView and wrote in MessageBox')}
/>
</>
));
);

4
app/views/CannedResponsesListView/CannedResponseItem.tsx
View File

@ -15,7 +15,7 @@ interface ICannedResponseItem {
scope: string;
onPressUse: () => void;
text: string;
tags: string[];
tags?: string[];
}
const CannedResponseItem = ({
@ -25,7 +25,7 @@ const CannedResponseItem = ({
scope,
onPressUse = () => {},
text,
tags
tags = []
}: ICannedResponseItem): JSX.Element => (
<Touchable onPress={onPressDetail} style={[styles.wrapCannedItem, { backgroundColor: themes[theme].messageboxBackground }]}>
<>

56
app/views/DiscussionsView/Item.stories.js → app/views/DiscussionsView/Item.stories.tsx
View File

@ -1,21 +1,16 @@
/* 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 { Provider } from 'react-redux';
import * as List from '../../containers/List';
import { themes, colors } from '../../lib/constants';
import { ThemeContext } from '../../theme';
import { store } from '../../../storybook/stories';
import Item from './Item';
import { colors } from '../../lib/constants';
import { ThemeContext, TSupportedThemes } from '../../theme';
import Item, { IItem } from './Item';
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.';
@ -27,33 +22,32 @@ const defaultItem = {
tlm: date,
u: author,
attachments: []
} as unknown as IItem['item'];
export default {
title: 'DiscussionsView/Item',
decorators: [
(Story: any) => (
<ScrollView>
<List.Separator />
<Story />
<List.Separator />
</ScrollView>
)
]
};
const BaseItem = ({ item, ...props }) => (
const BaseItem = ({ item }: { item?: Partial<IItem['item']> }) => (
<Item
baseUrl={baseUrl}
item={{
...defaultItem,
...item
}}
onPress={() => alert('pressed')}
{...props}
/>
);
const listDecorator = story => (
<ScrollView>
<List.Separator />
{story()}
<List.Separator />
</ScrollView>
);
const stories = storiesOf('Discussions.Item', module)
.addDecorator(listDecorator)
.addDecorator(story => <Provider store={store}>{story()}</Provider>);
stories.add('content', () => (
export const Content = () => (
<>
<BaseItem />
<List.Separator />
@ -65,8 +59,7 @@ stories.add('content', () => (
<List.Separator />
<BaseItem
item={{
dcount: 1000,
replies: [...new Array(1000)]
dcount: 1000
}}
/>
<List.Separator />
@ -77,20 +70,21 @@ stories.add('content', () => (
}}
/>
<List.Separator />
{/* @ts-ignore: FIXME: useRealName is not working */}
<BaseItem useRealName />
</>
));
);
const ThemeStory = ({ theme }) => (
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
<BaseItem badgeColor={themes[theme].mentionMeColor} />
<BaseItem />
</ThemeContext.Provider>
);
stories.add('themes', () => (
export const Themes = () => (
<>
<ThemeStory theme='light' />
<ThemeStory theme='dark' />
<ThemeStory theme='black' />
</>
));
);

7
app/views/DiscussionsView/Item.tsx
View File

@ -46,12 +46,9 @@ const styles = StyleSheet.create({
}
});
interface IItem {
export interface IItem {
item: IMessageFromServer;
onPress: {
(...args: any[]): void;
stop(): void;
};
onPress: Function;
}
const Item = ({ item, onPress }: IItem): React.ReactElement => {

5
app/views/DiscussionsView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

56
app/views/RoomView/LoadMore/LoadMore.stories.js
View File

@ -1,56 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types, react/destructuring-assignment */
import React from 'react';
import { ScrollView } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { longText } from '../../../../storybook/utils';
import { ThemeContext } from '../../../theme';
import { Message, MessageDecorator, StoryProvider } from '../../../../storybook/stories/Message';
import { MessageTypeLoad, themes } from '../../../lib/constants';
import LoadMore from './index';
const stories = storiesOf('LoadMore', module);
// FIXME: for some reason, this promise never resolves on Storybook (it works on the app, so maybe the issue isn't on the component)
const load = () => new Promise(res => setTimeout(res, 1000));
stories.add('basic', () => (
<>
<LoadMore load={load} />
<LoadMore load={load} runOnRender />
<LoadMore load={load} type={MessageTypeLoad.PREVIOUS_CHUNK} />
<LoadMore load={load} type={MessageTypeLoad.NEXT_CHUNK} />
</>
));
const ThemeStory = ({ theme }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
<LoadMore load={load} type={MessageTypeLoad.PREVIOUS_CHUNK} />
<Message msg='Hey!' theme={theme} />
<Message msg={longText} theme={theme} isHeader={false} />
<Message msg='Older message' theme={theme} isHeader={false} />
<LoadMore load={load} type={MessageTypeLoad.NEXT_CHUNK} />
<LoadMore load={load} type={MessageTypeLoad.MORE} />
<Message msg={longText} theme={theme} />
<Message msg='This is the third message' isHeader={false} theme={theme} />
<Message msg='This is the second message' isHeader={false} theme={theme} />
<Message msg='This is the first message' theme={theme} />
</ScrollView>
</ThemeContext.Provider>
);
stories
.addDecorator(StoryProvider)
.addDecorator(MessageDecorator)
.add('light theme', () => <ThemeStory theme='light' />);
stories
.addDecorator(StoryProvider)
.addDecorator(MessageDecorator)
.add('dark theme', () => <ThemeStory theme='dark' />);
stories
.addDecorator(StoryProvider)
.addDecorator(MessageDecorator)
.add('black theme', () => <ThemeStory theme='black' />);

48
app/views/RoomView/LoadMore/LoadMore.stories.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import { ScrollView } from 'react-native';
import { longText } from '../../../../.storybook/utils';
import { ThemeContext, TSupportedThemes } from '../../../theme';
import { Message } from '../../../containers/message/Message.stories';
import { MessageTypeLoad, themes } from '../../../lib/constants';
import LoadMoreComponent from '.';
export default {
title: 'RoomView/LoadMore'
};
const load = () => new Promise(res => setTimeout(res, 1000));
const LoadMore = ({ ...props }) => <LoadMoreComponent type={MessageTypeLoad.MORE} load={load} runOnRender={false} {...props} />;
export const Basic = () => (
<>
<LoadMore />
<LoadMore runOnRender />
<LoadMore type={MessageTypeLoad.PREVIOUS_CHUNK} />
<LoadMore type={MessageTypeLoad.NEXT_CHUNK} />
</>
);
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
<LoadMore type={MessageTypeLoad.PREVIOUS_CHUNK} />
<Message msg='Hey!' theme={theme} />
<Message msg={longText} theme={theme} isHeader={false} />
<Message msg='Older message' theme={theme} isHeader={false} />
<LoadMore type={MessageTypeLoad.NEXT_CHUNK} />
<LoadMore type={MessageTypeLoad.MORE} />
<Message msg={longText} theme={theme} />
<Message msg='This is the third message' isHeader={false} theme={theme} />
<Message msg='This is the second message' isHeader={false} theme={theme} />
<Message msg='This is the first message' theme={theme} />
</ScrollView>
</ThemeContext.Provider>
);
export const LightTheme = () => <ThemeStory theme='light' />;
export const DarkTheme = () => <ThemeStory theme='dark' />;
export const BlackTheme = () => <ThemeStory theme='black' />;

9
app/views/RoomView/LoadMore/__snapshots__/LoadMore.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
app/views/SecurityPrivacyView.tsx
View File

@ -1,4 +1,4 @@
import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StackNavigationProp } from '@react-navigation/stack';
import React, { useEffect, useState } from 'react';
import { Switch } from 'react-native';

66
app/views/ThreadMessagesView/Item.stories.js → app/views/ThreadMessagesView/Item.stories.tsx
View File

@ -1,21 +1,16 @@
/* 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 { Provider } from 'react-redux';
import * as List from '../../containers/List';
import { themes } from '../../lib/constants';
import { ThemeContext } from '../../theme';
import { store } from '../../../storybook/stories';
import Item from './Item';
import { ThemeContext, TSupportedThemes } from '../../theme';
import Item, { IItem } from './Item';
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.';
@ -29,31 +24,42 @@ const defaultItem = {
attachments: []
};
const BaseItem = ({ item, ...props }) => (
export default {
title: 'ThreadMessagesView/Item',
decorators: [
(Story: any) => (
<ScrollView>
<List.Separator />
<Story />
<List.Separator />
</ScrollView>
)
]
};
const BaseItem = ({
item,
useRealName = false,
badgeColor
}: {
item?: any;
useRealName?: IItem['useRealName'];
badgeColor?: IItem['badgeColor'];
}) => (
<Item
baseUrl={baseUrl}
item={{
...defaultItem,
...item
}}
useRealName={useRealName}
badgeColor={badgeColor}
user={{ id: 'abc' }}
toggleFollowThread={() => alert('toggleFollowThread')}
onPress={() => alert('pressed')}
{...props}
/>
);
const listDecorator = story => (
<ScrollView>
<List.Separator />
{story()}
<List.Separator />
</ScrollView>
);
const stories = storiesOf('Thread Messages.Item', module)
.addDecorator(listDecorator)
.addDecorator(story => <Provider store={store}>{story()}</Provider>);
stories.add('content', () => (
export const Content = () => (
<>
<BaseItem />
<List.Separator />
@ -79,9 +85,9 @@ stories.add('content', () => (
<List.Separator />
<BaseItem useRealName />
</>
));
);
stories.add('badge', () => (
export const Badge = () => (
<>
<BaseItem badgeColor={themes.light.mentionMeColor} />
<List.Separator />
@ -95,18 +101,18 @@ stories.add('badge', () => (
badgeColor={themes.light.tunreadColor}
/>
</>
));
);
const ThemeStory = ({ theme }) => (
<ThemeContext.Provider value={{ theme }}>
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
<BaseItem badgeColor={themes[theme].mentionMeColor} />
</ThemeContext.Provider>
);
stories.add('themes', () => (
export const Themes = () => (
<>
<ThemeStory theme='light' />
<ThemeStory theme='dark' />
<ThemeStory theme='black' />
</>
));
);

2
app/views/ThreadMessagesView/Item.tsx
View File

@ -56,7 +56,7 @@ const styles = StyleSheet.create({
}
});
interface IItem {
export interface IItem {
item: TThreadModel;
useRealName: boolean;
user: { id: string };

7
app/views/ThreadMessagesView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

9
index.js
View File

@ -22,4 +22,11 @@ AppRegistry.registerComponent(appName, () => require('./app/index').default);
AppRegistry.registerComponent(shareName, () => require('./app/share').default);
// For storybook, comment everything above and uncomment below
// import './storybook';
// import 'react-native-gesture-handler';
// import 'react-native-console-time-polyfill';
// import { AppRegistry } from 'react-native';
// import { name as appName } from './app.json';
// require('./app/ReactotronConfig');
// AppRegistry.registerComponent(appName, () => require('./.storybook/index').default);

8
ios/Podfile.lock
View File

@ -489,7 +489,7 @@ PODS:
- React-Core
- RNBootSplash (3.2.4):
- React-Core
- RNCAsyncStorage (1.12.1):
- RNCAsyncStorage (1.17.9):
- React-Core
- RNCClipboard (1.8.5):
- React-Core
@ -653,7 +653,7 @@ DEPENDENCIES:
- rn-extensions-share (from `../node_modules/rn-extensions-share`)
- rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
- RNBootSplash (from `../node_modules/react-native-bootsplash`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
- "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- RNConfigReader (from `../node_modules/react-native-config-reader`)
@ -833,7 +833,7 @@ EXTERNAL SOURCES:
RNBootSplash:
:path: "../node_modules/react-native-bootsplash"
RNCAsyncStorage:
:path: "../node_modules/@react-native-community/async-storage"
:path: "../node_modules/@react-native-async-storage/async-storage"
RNCClipboard:
:path: "../node_modules/@react-native-clipboard/clipboard"
RNCMaskedView:
@ -970,7 +970,7 @@ SPEC CHECKSUMS:
rn-extensions-share: 5fd84a80e6594706f0dfa1884f2d6d591b382cf5
rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
RNBootSplash: 4844706cbb56a3270556c9b94e59dedadccd47e4
RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
RNCAsyncStorage: b2489b49e38c85e10ed45a888d13a2a4c7b32ea1
RNCClipboard: cc054ad1e8a33d2a74cd13e565588b4ca928d8fd
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
RNConfigReader: 396da6a6444182a76e8ae0930b9436c7575045cb

7
jest.setup.js
View File

@ -1,9 +1,10 @@
import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';
import mockAsyncStorage from '@react-native-community/async-storage/jest/async-storage-mock';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
jest.mock('@react-native-community/async-storage', () => mockAsyncStorage);
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
global.__reanimatedWorkletInit = () => {};
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);

3
metro.config.js
View File

@ -19,6 +19,7 @@ module.exports = {
},
maxWorkers: 2,
resolver: {
blocklistRE: blocklist([/ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/])
blocklistRE: blocklist([/ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/]),
resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main']
}
};

9
package.json
View File

@ -5,7 +5,7 @@
"scripts": {
"start": "react-native start",
"test": "jest",
"test-update": "jest --updateSnapshot",
"test-update": "sb-rn-get-stories && jest --updateSnapshot",
"lint": "eslint . && tsc",
"prettier-lint": "prettier --write . && yarn lint",
"ci": "npm run precommit && codecov",
@ -32,9 +32,9 @@
"@codler/react-native-keyboard-aware-scroll-view": "^2.0.1",
"@gorhom/bottom-sheet": "^4.3.1",
"@nozbe/watermelondb": "0.23.0",
"@react-native-async-storage/async-storage": "^1.17.9",
"@react-native-clipboard/clipboard": "^1.8.5",
"@react-native-community/art": "^1.2.0",
"@react-native-community/async-storage": "1.12.1",
"@react-native-community/blur": "^4.1.0",
"@react-native-community/cameraroll": "4.1.2",
"@react-native-community/datetimepicker": "3.5.2",
@ -151,8 +151,9 @@
"@babel/runtime": "^7.12.5",
"@bugsnag/source-maps": "^2.2.0",
"@rocket.chat/eslint-config": "^0.4.0",
"@storybook/addon-storyshots": "5.3.21",
"@storybook/react-native": "5.3.25",
"@storybook/addon-storyshots": "6.3",
"@storybook/react": "6.3",
"@storybook/react-native": "^6.0.1-beta.7",
"@testing-library/jest-native": "^4.0.4",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/react-native": "^9.0.0",

17
patches/@storybook+addon-storyshots+5.3.21.patch
View File

@ -1,17 +0,0 @@
diff --git a/node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js b/node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js
index eab3d1d..99f8613 100644
--- a/node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js
+++ b/node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js
@@ -17,10 +17,10 @@ function configure(options, storybook) {
return;
}
var resolvedConfigPath = path_1.default.resolve(configPath);
- require.requireActual(resolvedConfigPath);
+ jest.requireActual(resolvedConfigPath);
}
function load(options) {
- var storybook = require.requireActual('@storybook/react-native');
+ var storybook = jest.requireActual('@storybook/react-native');
configure(options, storybook);
return {
renderTree: require('../react/renderTree').default,

32
storybook/StoryNavigator.tsx
View File

@ -1,32 +0,0 @@
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { themes } from '../app/lib/constants';
/**
* https://davidl.fr/blog/react-navigation-object-storybook
* Helper component tor create a Dummy Stack to access {navigation} object on *.story.tsx files
*
* @usage add this decorator
* ```
* .addDecorator(NavigationDecorator)
* ```
*/
const StoryBookStack = createStackNavigator();
export const NavigationDecorator = (story: any) => {
const Screen = () => story();
return (
<NavigationContainer independent={true}>
<StoryBookStack.Navigator>
<StoryBookStack.Screen
name='StorybookNavigator'
component={Screen}
options={{ header: () => null, cardStyle: { backgroundColor: themes.light.backgroundColor } }}
/>
</StoryBookStack.Navigator>
</NavigationContainer>
);
};

24
storybook/index.js
View File

@ -1,24 +0,0 @@
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native'; // eslint-disable-line
import RNBootSplash from 'react-native-bootsplash';
import 'react-native-gesture-handler';
RNBootSplash.hide();
// import stories
configure(() => {
require('./stories');
}, module);
// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({
asyncStorage: null
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent('RocketChatRN', () => StorybookUIRoot);
export default StorybookUIRoot;

73
storybook/stories/Avatar.js
View File

@ -1,73 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { StyleSheet } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import Avatar from '../../app/containers/Avatar/Avatar';
import Status from '../../app/containers/Status/Status';
import sharedStyles from '../../app/views/Styles';
const styles = StyleSheet.create({
custom: {
padding: 16
}
});
const server = 'https://open.rocket.chat';
const _theme = 'light';
const stories = storiesOf('Avatar', module);
stories.add('Avatar by text', () => <Avatar text='Avatar' server={server} size={56} />);
stories.add('Avatar by roomId', () => <Avatar type='p' rid='devWBbYr7inwupPqK' server={server} size={56} />);
stories.add('Avatar by url', () => (
<Avatar
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
server={server}
size={56}
/>
));
stories.add('Avatar by path', () => <Avatar avatar='/avatar/diego.mello' server={server} size={56} />);
stories.add('With ETag', () => (
<Avatar type='d' text='djorkaeff.alexandre' avatarETag='5ag8KffJcZj9m5rCv' server={server} size={56} />
));
stories.add('Without ETag', () => <Avatar type='d' text='djorkaeff.alexandre' server={server} size={56} />);
stories.add('Emoji', () => (
<Avatar emoji='troll' getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })} server={server} size={56} />
));
stories.add('Direct', () => <Avatar text='diego.mello' server={server} type='d' size={56} />);
stories.add('Channel', () => <Avatar text='general' server={server} type='c' size={56} />);
stories.add('Touchable', () => <Avatar text='Avatar' server={server} onPress={() => console.log('Pressed!')} size={56} />);
stories.add('Static', () => (
<Avatar
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
server={server}
isStatic
size={56}
/>
));
stories.add('Avatar by roomId', () => <Avatar type='p' rid='devWBbYr7inwupPqK' server={server} size={56} />);
stories.add('Custom borderRadius', () => <Avatar text='Avatar' server={server} borderRadius={28} size={56} />);
stories.add('Children', () => (
<Avatar text='Avatar' server={server} size={56}>
<Status size={24} style={[sharedStyles.status, styles.status]} theme={_theme} />
</Avatar>
));
stories.add('Wrong server', () => <Avatar text='Avatar' server='https://google.com' size={56} />);
stories.add('Custom style', () => <Avatar text='Avatar' server={server} size={56} style={styles.custom} />);

67
storybook/stories/ServerItem.js
View File

@ -1,67 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import ServerItemComponent from '../../app/containers/ServerItem';
import { ThemeContext } from '../../app/theme';
const stories = storiesOf('ServerItem', module);
const themes = {
light: 'light',
dark: 'dark',
black: 'black'
};
const item = {
name: 'Rocket.Chat',
id: 'https://open.rocket.chat/',
iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
};
const ServerItem = ({ theme = themes.light, ...props }) => (
<ThemeContext.Provider
value={{
theme,
themePreferences: {
currentTheme: theme,
darkLevel: theme
}
}}
>
<ServerItemComponent item={item} hasCheck={false} {...props} />
</ThemeContext.Provider>
);
stories.add('content', () => (
<>
<ServerItem hasCheck />
<ServerItem
item={{
...item,
name: 'Super Long Server Name in Rocket.Chat',
id: 'https://superlongservername.tologintoasuperlongservername/'
}}
/>
<ServerItem
item={{
id: 'https://stable.rocket.chat/'
}}
/>
</>
));
stories.add('touchable', () => (
<>
<ServerItem onLongPress={() => alert('Long Press')} onPress={() => alert('Press')} />
<ServerItem onPress={() => alert('Press')} />
<ServerItem onLongPress={() => alert('Long Press')} />
</>
));
stories.add('themes', () => (
<>
<ServerItem theme={themes.light} />
<ServerItem theme={themes.dark} />
<ServerItem theme={themes.black} />
</>
));

11
storybook/stories/__snapshots__/HeaderButtons.storyshot
View File

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Header Buttons badge 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots Header Buttons common 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots Header Buttons icons 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots Header Buttons themes 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
exports[`Storyshots Header Buttons title 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;

29
storybook/stories/__snapshots__/List.storyshot
View File

File diff suppressed because one or more lines are too long

25
storybook/stories/__snapshots__/Markdown.storyshot
View File

File diff suppressed because one or more lines are too long

81
storybook/stories/__snapshots__/Message.storyshot
View File

File diff suppressed because one or more lines are too long

23
storybook/stories/__snapshots__/NewMarkdown.storyshot
View File

File diff suppressed because one or more lines are too long

25
storybook/stories/__snapshots__/RoomItem.storyshot
View File

@ -1,25 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Room Item Alerts 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Basic 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Condensed Room Item 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Condensed Room Item without Avatar 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Expanded Room Item without Avatar 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Last Message 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Omnichannel Icon 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Tag 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Touch 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item Type 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item User 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots Room Item User status 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}]}]}"`;

27
storybook/stories/__snapshots__/UiKitMessage.storyshot
View File

@ -1,27 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UiKitMessage Action - Buttons 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Action - Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Context 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Fields 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + DatePicker 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + Markdown List 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + Multi Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + Overflow 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + button 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section + image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitMessage Section 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;

21
storybook/stories/__snapshots__/UiKitModal.storyshot
View File

@ -1,21 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UiKitModal Modal - Actions 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Contexts and Dividers 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - DatePicker with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Form Input 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Form TextArea 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Images 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Input with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Multilne with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Section Accessories 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;
exports[`Storyshots UiKitModal Modal - Section and Selects 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"RCTSafeAreaView\\",\\"props\\":{\\"emulateUnlessSupported\\":true,\\"style\\":{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"}},\\"children\\":null}]}]}"`;

50
storybook/stories/index.js
View File

@ -1,50 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
import { combineReducers, createStore } from 'redux';
import './RoomItem';
import './List';
import './ServerItem';
import './Message';
import './UiKitMessage';
import './UiKitModal';
import './Markdown';
import './HeaderButtons';
import './UnreadBadge';
import '../../app/views/ThreadMessagesView/Item.stories.js';
import '../../app/views/DiscussionsView/Item.stories.js';
import './Avatar';
import './NewMarkdown';
import '../../app/containers/BackgroundContainer/index.stories.js';
import '../../app/containers/RoomHeader/RoomHeader.stories.js';
import '../../app/views/RoomView/LoadMore/LoadMore.stories.js';
import '../../app/views/CannedResponsesListView/CannedResponseItem.stories';
import '../../app/containers/TextInput/TextInput.stories';
import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories';
import '../../app/containers/Button/Button.stories';
import '../../app/containers/LoginServices/LoginServices.stories';
import '../../app/containers/SearchBox/SearchBox.stories';
// Change here to see themed storybook
export const theme = 'light';
const reducers = combineReducers({
settings: () => ({}),
login: () => ({
user: {
username: 'diego.mello'
}
}),
server: () => ({
server: 'https://open.rocket.chat',
version: '3.7.0'
}),
share: () => ({
server: 'https://open.rocket.chat',
version: '3.7.0',
settings: {}
}),
meteor: () => ({ connected: true }),
activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } }),
app: () => ({ isMasterDetail: false })
});
export const store = createStore(reducers);

5627
yarn.lock
View File

File diff suppressed because it is too large Load Diff