From ff1da46ef7dc4a0ef9a69c8d31b40b7c7f9a26ae Mon Sep 17 00:00:00 2001 From: Gung Wah <41157464+kresnaputra@users.noreply.github.com> Date: Tue, 20 Apr 2021 00:57:19 +0800 Subject: [PATCH] [CHORE] Improve stories (#3028) * [CHORE] Improve stories * Refactor Avatar and UIKitModal * fixed undefined 'name' * Remove commented stories * Remove Markdown from stories/index, update Markdown test file and remove markdown stories from Message stories * Remove StoriesSeparator * Refactor Markdown * Remove commented lines of code * Small refactor * Re-add stories Co-authored-by: Gerzon Z Co-authored-by: Gerzon Z Co-authored-by: Diego Mello --- .eslintrc.js | 1 + .../__snapshots__/Storyshots.test.js.snap | 68927 +++++++--------- storybook/stories/Avatar.js | 274 +- storybook/stories/Markdown.js | 452 +- storybook/stories/Message.js | 1638 +- storybook/stories/RoomItem.js | 197 +- storybook/stories/StoriesSeparator.js | 36 - storybook/stories/UiKitMessage.js | 843 +- storybook/stories/UiKitModal.js | 1083 +- storybook/stories/index.js | 74 +- 10 files changed, 33701 insertions(+), 39824 deletions(-) delete mode 100644 storybook/stories/StoriesSeparator.js diff --git a/.eslintrc.js b/.eslintrc.js index add372a0b..31146aefe 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,6 +46,7 @@ module.exports = { "react/forbid-prop-types": 0, "jsx-quotes": [2, "prefer-single"], "jsx-a11y/href-no-hash": 0, + "jsx-a11y/aria-role": 0, "import/prefer-default-export": 0, "import/no-cycle": 0, "camelcase": 0, diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 78185ec1c..52cde22be 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -1,882 +1,316 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Avatar list Avatar 1`] = ` - - - - Avatar by text - - - + - - - - - Avatar by roomId - - - - - - - - Avatar by url - - - + + +`; + +exports[`Storyshots Avatar Avatar by roomId 1`] = ` + + + - - - - - Avatar by path - - - - - - - - With ETag - - - + + +`; + +exports[`Storyshots Avatar Avatar by text 1`] = ` + + + - - - - - Without ETag - - - - - - - - Emoji - - - + + +`; + +exports[`Storyshots Avatar Avatar by url 1`] = ` + + + - - - - - Direct - - - - - - - - Channel - - - + + +`; + +exports[`Storyshots Avatar Channel 1`] = ` + + + - - - - - Touchable - - - - - - - - - - Static - - - + + +`; + +exports[`Storyshots Avatar Children 1`] = ` + + + - - - - - Custom borderRadius - - - - - - - + + - Children - - - - - - +  + + +`; + +exports[`Storyshots Avatar Custom borderRadius 1`] = ` + + + - -  - - - - - Wrong server - - + + +`; + +exports[`Storyshots Avatar Custom style 1`] = ` + + + + + +`; + +exports[`Storyshots Avatar Direct 1`] = ` + + + + + +`; + +exports[`Storyshots Avatar Emoji 1`] = ` + + - + - - - - - Custom style - + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + + +`; + +exports[`Storyshots Avatar Static 1`] = ` + + + + + +`; + +exports[`Storyshots Avatar Touchable 1`] = ` + + - - - + } + /> - + +`; + +exports[`Storyshots Avatar With ETag 1`] = ` + + + + + +`; + +exports[`Storyshots Avatar Without ETag 1`] = ` + + + + + +`; + +exports[`Storyshots Avatar Wrong server 1`] = ` + + + + + `; exports[`Storyshots BackgroundContainer basic 1`] = ` @@ -10450,16 +10205,2090 @@ exports[`Storyshots List with small font 1`] = ` `; -exports[`Storyshots Markdown list Markdown 1`] = ` - + + + + + + This is block quote + + + + + + + this is a normal line + + + +`; + +exports[`Storyshots Markdown Code 1`] = ` + + + + This is + + + inline code + + + + + Inline + + + code + + + has + + + back-ticks around + + + it. + + + + Code block + + + +`; + +exports[`Storyshots Markdown Edited 1`] = ` + + + + This is edited + + + ( + edited + ) + + + +`; + +exports[`Storyshots Markdown Emoji 1`] = ` + + + + Unicode: 😃😇👍 + + + + + Shortnames: + + + 😂 + + + 👍 + + + + + Custom emojis: + + + + + + + + + + + + + + + + + + + + 😃 + + + 👍 + + + + + + + + + +`; + +exports[`Storyshots Markdown Hashtag 1`] = ` + + + + #test-channel + + + + + + #unknown + + + +`; + +exports[`Storyshots Markdown Headers 1`] = ` + + + + Header 1 + + + + + Header 2 + + + + + Header 3 + + + + + Header 4 + + + + + Header 5 + + + + + Header 6 + + + +`; + +exports[`Storyshots Markdown Image 1`] = ` + + + + + +`; + +exports[`Storyshots Markdown Links 1`] = ` + + + + + Markdown link + + + + : + + + [description](url) + + + + + + Formatted Link + + + + : + + + <url|description> + + + +`; + +exports[`Storyshots Markdown Lists 1`] = ` + + + + + • + + + + + + Open Source + + + + + + + + • + + + + + + Rocket.Chat + + + + + + ◦ + + + + + + nodejs + + + + + + + + ◦ + + + + + + ReactNative + + + + + + + + + + 1. + + + + + + Open Source + + + + + + + + 2. + + + + + + Rocket.Chat + + + + + +`; + +exports[`Storyshots Markdown Mentions 1`] = ` + - Short Text - - - - This is Rocket.Chat - - - - - Long Text - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - Line Break Text - - - - - a - - - - - - - b - - - - - - - c - - - - - - - - - - - d - - - - - - - - - - - - - - - e - - - - - Sequential empty spaces - - - - - a b c - - - - - Edited - - - - - This is edited - - - ( - edited - ) - - - - - Preview - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + rocket.cat - a b c d e - - - a b c - - - @rocket.cat @name1 @all @here @unknown #general #unknown - - - Testing: 😃 👍 :marioparty: - - - - Mentions - - - - - rocket.cat - - - - - - name1 - - - - - - all - - - - - - here - - - - - - @unknown - - - - - Mentions with Real Name - - - - - Rocket Cat - - - - - - Name - - - - - - all - - - - - - here - - - - - - @unknown - - - - - Hashtag - - - - - #test-channel - - - - - - #unknown - - - - - Emoji - - - - - Unicode: 😃😇👍 - - - - - Shortnames: - - - 😂 - - - 👍 - - - - - Custom emojis: - - - - - - - - - - - - - - - - - - - - 😃 - - - 👍 - - - - - - - - - - - Block Quote - - - - - - - - This is block quote - - - - - - - this is a normal line - - - - - Links - - - - - - Markdown link - - - - : - - - [description](url) - - - - - - Formatted Link - - - - : - - - <url|description> - - - - - Image - - - - - - - - Headers - - - - - Header 1 - - - - - Header 2 - - - - - Header 3 - - - - - Header 4 - - - - - Header 5 - - - - - Header 6 - - - - - Inline Code - - - - - This is - - - inline code - - - - - Code Block - - - - - Inline - - - code - - - has - - - back-ticks around - - - it. - - - - Code block - - - - - Lists - - - - - - • - - - - - - Open Source - - - - - - - - • - - - - - - Rocket.Chat - - - - - - ◦ - - - - - - nodejs - - - - - + + + + name1 + + - - - ◦ - - - - - - ReactNative - - - - - - - - - Numbered Lists - - - - - - 1. - - - - - - Open Source - - - - - + - - - 2. - - - + - - - Rocket.Chat - - - - - - - Emphasis - - + > + + + + here + + + + - - Strong emphasis, aka bold, with - - - asterisks - - - or - - - underscores - + @unknown - + - Table - - - - + - - - - - - - First Header - - - - - - - Second Header - - - - - - - - - Content from cell 1 - - - - - - - Content from cell 2 - - - - - - - - - Content in the first column - - - - - - - Content in the second column - - - - - - - - + + + + Name + + + + + + all + + - Click to see full table - - - + ], + ] + } + > + + + + here + + + + + + @unknown + + `; -exports[`Storyshots Message list message 1`] = ` +exports[`Storyshots Markdown Preview 1`] = ` + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + a b c d e + + + a b c + + + @rocket.cat @name1 @all @here @unknown #general #unknown + + + Testing: 😃 👍 :marioparty: + + +`; + +exports[`Storyshots Markdown Table 1`] = ` + + + + + + + + + + First Header + + + + + + + Second Header + + + + + + + + + Content from cell 1 + + + + + + + Content from cell 2 + + + + + + + + + Content in the first column + + + + + + + Content in the second column + + + + + + + + + Click to see full table + + + +`; + +exports[`Storyshots Markdown Text 1`] = ` + + + + This is Rocket.Chat + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + a + + + + + + + b + + + + + + + c + + + + + + + + + + + d + + + + + + + + + + + + + + + e + + + + + a b c + + + + + Strong emphasis, aka bold, with + + + asterisks + + + or + + + underscores + + + +`; + +exports[`Storyshots Message Archived 1`] = ` - - Simple - + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + This message is inside an archived room + + + + + + + + + + +`; + +exports[`Storyshots Message Basic 1`] = ` + + - - Long message - - - Grouped messages - + + +`; + +exports[`Storyshots Message Block Quote 1`] = ` + + - - - ... - - - - - - - - - - - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - 10:00 AM - - - - - - Different user - - - - - - - - - - - - - - - - - This is the third message - - - - - - - - - - - - - - - - - This is the second message - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - This is the first message - - - - - - - - - - Without header - - - - - - - - - - Message - - - - - - - - - - With alias - - - - - - - - - - - - - - - - - Diego Mello - @ - diego.mello + + Testing block quote + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + Testing block quote + + + + + + + Testing block quote + + + + + + + + + + +`; + +exports[`Storyshots Message Broadcast 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Broadcasted message + + + + + + +  + + + Reply + + + + + + + + + + +`; + +exports[`Storyshots Message Colored attachments 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + Value 2 + + + + + + + + + + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + Value 2 + + + + + + + + + + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + Value 2 + + + + + + + + + + + + + +`; + +exports[`Storyshots Message Custom fields 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + + rocket.cat + + + + + Custom fields + + + + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + Value 2 + + + + + + Field 3 + + + + Value 3 + + + + + + Field 4 + + + + Value 4 + + + + + + Field 5 + + + + Value 5 + + + + + + + + + + + + + +`; + +exports[`Storyshots Message Custom style 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + + + +`; + +exports[`Storyshots Message Date and Unread separators 1`] = ` + + + + + + + + + + + + + + + + + + rocket.cat + + + + 10:00 AM + + + + + + Fourth message + + + + + + + + + + + unread + + + + November 10, 2017 + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Third message + + + + + + + + + + + unread + + + + + + + + + + + + Second message + + + @@ -16413,7 +18073,7 @@ exports[`Storyshots Message list message 1`] = ` Object { "headers": undefined, "priority": "high", - "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=36", + "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=36", } } style={ @@ -16489,26 +18149,7 @@ exports[`Storyshots Message list message 1`] = ` ] } > - Diego Mello - - @ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + rocket.cat - Message + Second message @@ -16585,27 +18226,1636 @@ exports[`Storyshots Message list message 1`] = ` - - Edited - + + + November 10, 2017 + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + First message + + + + + + + + + + +`; + +exports[`Storyshots Message Discussion 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + No messages yet + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + 1 message + + + + November 10, 2017 + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + +  + + + 10 messages + + + + November 10, 2017 + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + +999 messages + + + + November 10, 2017 + + + + + + + + + +`; + +exports[`Storyshots Message Edited 1`] = ` + + - + +`; + +exports[`Storyshots Message Editing 1`] = ` + + + - Encrypted - + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message being edited + + + + + + + + + + +`; + +exports[`Storyshots Message Emojis 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 👊🤙👏 + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 👏 + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 🤙 + + + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 🤙 + + + + + + 🤙🤙 + + + + + + + + + + +`; + +exports[`Storyshots Message Encrypted 1`] = ` + + - - Block Quote - - + +`; + +exports[`Storyshots Message Error 1`] = ` + + + + - + > + + + + + + + - - - - - - - - - - diego.mello - - - 10:00 AM + diego.mello - - + 10:00 AM + + + - - - - - Testing block quote - - - - +  + + + + + This message has error + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + +  + + + + + + + This message has error too + + + + + + + + + +`; + +exports[`Storyshots Message Full name 1`] = ` + + - diego.mello + Diego Mello - - - - - - Testing block quote - - - - - Testing block quote + Message @@ -20280,27 +25622,1111 @@ exports[`Storyshots Message list message 1`] = ` - + +`; + +exports[`Storyshots Message Grouped messages 1`] = ` + + + - Lists - + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + ... + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + 10:00 AM + + + + + + Different user + + + + + + + + + + + + + + + + + This is the third message + + + + + + + + + + + + + + + + + This is the second message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + This is the first message + + + + + + + + + + +`; + +exports[`Storyshots Message Ignored 1`] = ` + + + + + + + + + + + + + + + + + Message ignored. Tap to display it. + + + + + + + + + +`; + +exports[`Storyshots Message Lists 1`] = ` + + - - Numerated lists - - - Numerated lists in separated messages - - - Static avatar - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Message - - - - - - - - - - Full name - - - - - - - - - - - - - - - - - Diego Mello - - - - 10:00 AM - - - - - - Message - - - - - - - - - - Mentions - + + +`; + +exports[`Storyshots Message Mentions 1`] = ` + + - - Emojis - + + +`; + +exports[`Storyshots Message Message with read receipt 1`] = ` + + - 👊🤙👏 - - - - - - - - - - Single Emoji - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - 👏 - - - - - - - - - - Custom Emojis - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - - - - - - - - - - - - - - - - - Single Custom Emojis - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - - - - - Normal Emoji + Custom Emojis - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - 🤙 - - - - - - - - - - - - - Four emoji - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - 🤙 - - - - - - 🤙🤙 + I'm fine! @@ -24843,5818 +29116,6 @@ exports[`Storyshots Message list message 1`] = ` - - Time format - - - - - - - - - - - - - - - - - diego.mello - - - - 10 November 2017 - - - - - - Testing - - - - - - - - - - Reactions - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Reactions - - - - - - - - 😂 - - - 3 - - - - - - - - - - 13 - - - - - - - 🤔 - - - 1 - - - - - - -  - - - - - - - - - - - Multiple reactions - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Multiple Reactions - - - - - - - - - - - 1 - - - - - - - - - - 1 - - - - - - - - - - 1 - - - - - - - ❤️ - - - 1 - - - - - - - 🐶 - - - 1 - - - - - - - 😀 - - - 1 - - - - - - - 😬 - - - 1 - - - - - - - 😁 - - - 1 - - - - - - -  - - - - - - - - - - - Intercalated users - - - - - - - - - - - - - - - - - rocket.cat - - - - 10:00 AM - - - - - - Fourth message - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Third message - - - - - - - - - - - - - - - - - - - - - - - - rocket.cat - - - - 10:00 AM - - - - - - Second message - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - First message - - - - - - - - - - Date and Unread separators - - - - - - - - - - - - - - - - - rocket.cat - - - - 10:00 AM - - - - - - Fourth message - - - - - - - - - - - unread - - - - November 10, 2017 - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Third message - - - - - - - - - - - unread - - - - - - - - - - - - Second message - - - - - - - - - - - - - - - - - - - - - - - - rocket.cat - - - - 10:00 AM - - - - - - Second message - - - - - - - - - - - - November 10, 2017 - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - First message - - - - - - - - - - With image - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - - This is a description - - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - - This is a description - - - - - - - - - - - - - - With video - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - -  - - - - - This is a description - - - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - -  - - - - - - - - - With audio - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - 00:00 - - - - - This is a description - - - - - - - - - - - First message + I'm fine! @@ -30757,615 +29218,6 @@ exports[`Storyshots Message list message 1`] = ` - - - - - - - - - - - - - 00:00 - - - - - This is a description - - - - - - - - - - - - - - - - - - - - 00:00 - - - - - - - - - - - - - - - - - - - - 00:00 - - - - - - - - - With file - - - - - - - File.pdf - - - - - + - This is a description - - - - - + > + I'm fine! + + + + +  + @@ -31769,109 +29528,9 @@ exports[`Storyshots Message list message 1`] = ` ] } > - - - - - - File.pdf - - - - - + - This is a description - - - - - + > + I'm fine! + + + + +  + - - Message with reply - + + +`; + +exports[`Storyshots Message Message with reply 1`] = ` + + I'm a very long long title and I'll break - - 10:00 AM - rocket.cat - - 10:00 AM - - - Message with read receipt - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - I'm fine! - - - - - - - - - - - - - - - - - I'm fine! - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - I'm fine! - - - - - -  - - - - - - - - - - - - - - I'm fine! - - - - - -  - - - - - - - Message with thread - + + +`; + +exports[`Storyshots Message Message with thread 1`] = ` + + - - - - - -  - - - Markdown: link block code - - - -  - - - - - - - - - - - - - - - I'm fine! - - - - - - - - + +`; + +exports[`Storyshots Message Reactions 1`] = ` + + + - Sequential thread messages following thread button - + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Reactions + + + + + + + + 😂 + + + 1 + + + + + + + + + + 99 + + + + + + + 🤔 + + + 999 + + + + + + + 🤔 + + + 9999 + + + + + + +  + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Multiple Reactions + + + + + + + + + + + 1 + + + + + + + + + + 1 + + + + + + + + + + 1 + + + + + + + ❤️ + + + 1 + + + + + + + 🐶 + + + 1 + + + + + + + 😀 + + + 1 + + + + + + + 😬 + + + 1 + + + + + + + 😁 + + + 1 + + + + + + +  + + + + + + + + + + + +`; + +exports[`Storyshots Message Sequential thread messages following thread button 1`] = ` + + - - Sequential thread messages following thread reply - + + +`; + +exports[`Storyshots Message Sequential thread messages following thread reply 1`] = ` + + - + +`; + +exports[`Storyshots Message Static avatar 1`] = ` + + + - Discussion - + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + + + +`; + +exports[`Storyshots Message System messages 1`] = ` + + + + + + + + + + + + + + + + + diego.mello + + + + Message removed + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + has joined the channel + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + Message pinned + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + has left the channel + + + + + + + + + + + + + + + + + + + + + User rocket.cat removed by diego.mello + + + + + + + + + + + + + + + + + + + + User rocket.cat added by diego.mello + + + + + + + + + + + + + + + + + + + + User rocket.cat muted by diego.mello + + + + + + + + + + + + + + + + + + + + User rocket.cat unmuted by diego.mello + + + + + + + + + + + + + + + + + + + + rocket.cat was set admin by diego.mello + + + + + + + + + + + + + + + + + + + + rocket.cat is no longer admin by diego.mello + + + + + + + + + + + + + + + + + + + + Room name changed to: New name by diego.mello + + + + + + + + + + + + + + + + + + + + Room description changed to: new description by diego.mello + + + + + + + + + + + + + + + + + + + + Room announcement changed to: new announcement by diego.mello + + + + + + + + + + + + + + + + + + + + Room topic changed to: new topic by diego.mello + + + + + + + + + + + + + + + + + + + + Room type changed to: public by diego.mello + + + + + + + + + + + + + + + + + + + + This room's encryption has been disabled by diego.mello + + + + + + + + + + + + + + + + + + + + This room's encryption has been enabled by diego.mello + + + + + + + + +`; + +exports[`Storyshots Message Temp 1`] = ` + + - - Started a discussion: - - + + Temp message + + + + + + + + + + +`; + +exports[`Storyshots Message Time format 1`] = ` + + + + + + + + - This is a discussion - + + + + + + -  - - - No messages yet + diego.mello + > + 10 November 2017 + + + + + + Testing + + + + +`; + +exports[`Storyshots Message Two short custom fields with markdown 1`] = ` + + - - Started a discussion: - - - This is a discussion - - - - -  - - - 1 message - - + - November 10, 2017 + + Message + - - - - - - - - - - - - - - - - - + > + + rocket.cat + + - diego.mello + + Custom fields + - - - 10:00 AM - - - - Started a discussion: - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - -  - - - 10 messages - + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + + Value 2 + + + + + - - November 10, 2017 - - - - - - - - - - - - - - - - - - + > + + rocket.cat + + - diego.mello + + Custom fields 2 + - - - 10:00 AM - - - - Started a discussion: - - - This is a discussion - - - - -  - - - +999 messages - + + + Field 1 + + + + Value 1 + + + + + + Field 2 + + + + Value 2 + + + + - - November 10, 2017 - - - URL - + + +`; + +exports[`Storyshots Message URL 1`] = ` + + - + +`; + +exports[`Storyshots Message With alias 1`] = ` + + + - Custom fields - + + + + + + + + + + + + + + + Diego Mello + + @ + diego.mello + + + + + 10:00 AM + + + + + + Message + + + + + + + + + + + + + + + + + + + + + + + + Diego Mello + + @ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + 10:00 AM + + + + + + Message + + + + + + + + + + +`; + +exports[`Storyshots Message With audio 1`] = ` + + - + + + + + + + 00:00 + + + + - - Message - + This is a description - - - - - rocket.cat - - - 10:00 AM - - - - + - Custom fields - - - - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - Value 2 - - - - - - Field 3 - - - - Value 3 - - - - - - Field 4 - - - - Value 4 - - - - - - Field 5 - - - - Value 5 - - - - + /> - + - - Two short custom fields with markdown - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - Message + First message - - - - - rocket.cat - - - 10:00 AM - - - - - Custom fields - - - - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - - Value 2 - - - - - - - - - - - - rocket.cat - - - 10:00 AM - - - - - Custom fields 2 - - - - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - Value 2 - - - - - - - - Colored attachments - + + + + + + + + + + + + 00:00 + + + + + This is a description + + + + + + + + + + + + + + + + + + + + 00:00 + + + + + + + + + + + + + + + + + + + + 00:00 + + + + + + + + + +`; + +exports[`Storyshots Message With file 1`] = ` + + - - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - Value 2 - - - - + File.pdf + + - - - + + - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - Value 2 - - - - + } + /> - - + + + + + + + + + + - - - - - Field 1 - - - - Value 1 - - - - - - Field 2 - - - - Value 2 - - - - - - + "marginLeft": 46, + }, + false, + ] + } + > + - + + File.pdf + + + + + + + This is a description + + + + + + + + + + + + +`; + +exports[`Storyshots Message With image 1`] = ` + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + - - Invalid color - + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + + + This is a description + + @@ -42029,27 +43076,6 @@ exports[`Storyshots Message list message 1`] = ` - - Broadcast - - - + + } + > + + + + + + + - Broadcasted message - - - - - - -  - - - Reply + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + This is a description + + + + @@ -42373,27 +43428,19 @@ exports[`Storyshots Message list message 1`] = ` - - Archived - + + +`; + +exports[`Storyshots Message With video 1`] = ` + + - - - - This message is inside an archived room - - - - - - - - - - Error - - - - - - - - - - - - - + - - diego.mello - - - - 10:00 AM - - -  +  - - - This message has error + This is a description + + + - - + } + > + + + + + + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - + @@ -43057,8 +43972,8 @@ exports[`Storyshots Message list message 1`] = ` style={ Array [ Object { - "color": "#f5455c", - "fontSize": 18, + "color": "#ffffff", + "fontSize": 54, }, undefined, Object { @@ -43070,323 +43985,7 @@ exports[`Storyshots Message list message 1`] = ` ] } > -  - - - - - - - This message has error too - - - - - - - - - Temp - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Temp message - +  @@ -43394,27 +43993,19 @@ exports[`Storyshots Message list message 1`] = ` - - Editing - + + +`; + +exports[`Storyshots Message Without header 1`] = ` + + - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Message being edited - - - - - - - - - - Removed - - - - - - - - - - - - - - - - diego.mello - - - - Message removed - - - - - - - - - Joined - - - - - - - - - - - - - - - - diego.mello - - - - has joined the channel - - - - - - - - - Room name changed - - - - - - - - - - - - - - - Room name changed to: New name by diego.mello - - - - - - - - Message pinned - - - - - - - - - - - - - - - - diego.mello - - - - Message pinned - - - - - - - - - Has left the channel - - - - - - - - - - - - - - - - diego.mello - - - - has left the channel - - - - - - - - - User removed - - - - - - - - - - - - - - - User rocket.cat removed by diego.mello - - - - - - - - User added - - - - - - - - - - - - - - - User rocket.cat added by diego.mello - - - - - - - - User muted - - - - - - - - - - - - - - - User rocket.cat muted by diego.mello - - - - - - - - User unmuted - - - - - - - - - - - - - - - User rocket.cat unmuted by diego.mello - - - - - - - - Role added - - - - - - - - - - - - - - - rocket.cat was set admin by diego.mello - - - - - - - - Role removed - - - - - - - - - - - - - - - rocket.cat is no longer admin by diego.mello - - - - - - - - Changed description - - - - - - - - - - - - - - - Room description changed to: new description by diego.mello - - - - - - - - Changed announcement - - - - - - - - - - - - - - - Room announcement changed to: new announcement by diego.mello - - - - - - - - Changed topic - - - - - - - - - - - - - - - Room topic changed to: new topic by diego.mello - - - - - - - - Changed type - - - - - - - - - - - - - - - Room type changed to: public by diego.mello - - - - - - - - Toggle e2e encryption - - - - - - - - - - - - - - - This room's encryption has been disabled by diego.mello - - - - - - - - - - - - - - - - - - - - This room's encryption has been enabled by diego.mello - - - - - - - - Ignored - - - - - - - - - - - - - - - - Message ignored. Tap to display it. - - - - - - - - - Custom style - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - Markdown emphasis - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Italic with single - - - underscore - - - or double - - - underscores - - - . Bold with single - - - asterisk - - - or double - - - asterisks - - - . Strikethrough with single - - - Strikethrough - - - or double - - - Strikethrough - - - - - - - - - - Markdown headers - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - H1 - - - - - H2 - - - - - H3 - - - - - H4 - - - - - H5 - - - - - H6 - - - - - - - - - - Markdown links - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Support - - - - Google - - - - - - - - I\`m an inline-style link - - - - - - - - https://google.com - - - - - - - - - - - Starting with empty link - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - <- No link should render - - - - - - - - - - Markdown image - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - - - Markdown code - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Inline - - - code - - - has - - - back-ticks around - - - it. - - - - Code block - - - - - - - - - - Markdown quote - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - Quote - - - - - - - - - - - - Markdown table - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - - - - - - First Header - - - - - - - Second Header - - - - - - - - - Content from cell 1 - - - - - - - Content from cell 2 - - - - - - - - - Content in the first column - - - - - - - Content in the second column - - - - - - - - - Click to see full table - - - - - - - - `; -exports[`Storyshots RoomHeader icons 1`] = ` -Array [ - - - - - - -  - - - private channel - - - - - - , - - - - - - -  - - - public channel - - - - - - , - - - - - - -  - - - discussion - - - - - - , - - - - - - -  - - - omnichannel - - - - - - , - - - - - - -  - - - private team - - - - - - , - - - - - - -  - - - public team - - - - - - , - - - - - - -  - - - group dm - - - - - - , - - - - - - -  - - - online dm - - - - - - , - - - - - - -  - - - away dm - - - - - - , - - - - - - -  - - - busy dm - - - - - - , - - - - - - -  - - - loading dm - - - - - - , - - - - - - -  - - - offline dm - - - - - - , -] -`; - -exports[`Storyshots RoomHeader landscape 1`] = ` -Array [ - - - - - - -  - - - title - - - - - - , - - - - - - -  - - - title - - - - subtitle - - - - - , - - - - - - -  - - - 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 - - - - 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 RoomHeader themes 1`] = ` -Array [ - - - - - - -  - - - title - - - - subtitle - - - - - , - - - - - - -  - - - title - - - - subtitle - - - - - , - - - - - - -  - - - title - - - - subtitle - - - - - , -] -`; - -exports[`Storyshots RoomHeader thread 1`] = ` -Array [ - - - - - - - title - - - - -  - - - parent title - - - - - - , - - - - - - - markdown preview #3 4 5 - - - - -  - - - 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 RoomHeader title and subtitle 1`] = ` -Array [ - - - - - - -  - - - title - - - - - - , - - - - - - -  - - - 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 - - - - - - , - - - - - - -  - - - title - - - - subtitle - - - - - , - - - - - - -  - - - title - - - - 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 - - - - - , - - - - - - -  - - - 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 - - - - 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 RoomHeader typing 1`] = ` -Array [ - - - - - - -  - - - title - - - - - user 1 - - - is typing - ... - - - - - , - - - - - - -  - - - title - - - - - user 1 and user 2 - - - are typing - ... - - - - - , - - - - - - -  - - - title - - - - - user 1, user 2, user 3, user 4, user 5 - - - are typing - ... - - - - - , -] -`; - -exports[`Storyshots RoomItem list roomitem 1`] = ` +exports[`Storyshots Room Item Alerts 1`] = ` - - Basic - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - User - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - diego.mello - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - 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 - - - - - - - - Type - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - User status - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - - - - -  - - - Read - - - - - - - -  - - - Favorite - - - - -  - - - Hide - - - - - - - - - - - - - -  - - - rocket.cat - - - - - - - - Alerts - - + +`; + +exports[`Storyshots Room Item Basic 1`] = ` + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + - Last Message - + "transform": Array [ + Object { + "translateX": 0, + }, + ], + } + } + > + + + + + + + + + +  + + + rocket.cat + + + + + + + + +`; + +exports[`Storyshots Room Item Last Message 1`] = ` + + `; +exports[`Storyshots Room Item Type 1`] = ` + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + +`; + +exports[`Storyshots Room Item User 1`] = ` + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + diego.mello + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + 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 Room Item User status 1`] = ` + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + + + + +  + + + Read + + + + + + + +  + + + Favorite + + + + +  + + + Hide + + + + + + + + + + + + + +  + + + rocket.cat + + + + + + + + +`; + +exports[`Storyshots RoomHeader icons 1`] = ` +Array [ + + + + + + +  + + + private channel + + + + + + , + + + + + + +  + + + public channel + + + + + + , + + + + + + +  + + + discussion + + + + + + , + + + + + + +  + + + omnichannel + + + + + + , + + + + + + +  + + + private team + + + + + + , + + + + + + +  + + + public team + + + + + + , + + + + + + +  + + + group dm + + + + + + , + + + + + + +  + + + online dm + + + + + + , + + + + + + +  + + + away dm + + + + + + , + + + + + + +  + + + busy dm + + + + + + , + + + + + + +  + + + loading dm + + + + + + , + + + + + + +  + + + offline dm + + + + + + , +] +`; + +exports[`Storyshots RoomHeader landscape 1`] = ` +Array [ + + + + + + +  + + + title + + + + + + , + + + + + + +  + + + title + + + + subtitle + + + + + , + + + + + + +  + + + 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 + + + + 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 RoomHeader themes 1`] = ` +Array [ + + + + + + +  + + + title + + + + subtitle + + + + + , + + + + + + +  + + + title + + + + subtitle + + + + + , + + + + + + +  + + + title + + + + subtitle + + + + + , +] +`; + +exports[`Storyshots RoomHeader thread 1`] = ` +Array [ + + + + + + + title + + + + +  + + + parent title + + + + + + , + + + + + + + markdown preview #3 4 5 + + + + +  + + + 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 RoomHeader title and subtitle 1`] = ` +Array [ + + + + + + +  + + + title + + + + + + , + + + + + + +  + + + 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 + + + + + + , + + + + + + +  + + + title + + + + subtitle + + + + + , + + + + + + +  + + + title + + + + 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 + + + + + , + + + + + + +  + + + 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 + + + + 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 RoomHeader typing 1`] = ` +Array [ + + + + + + +  + + + title + + + + + user 1 + + + is typing + ... + + + + + , + + + + + + +  + + + title + + + + + user 1 and user 2 + + + are typing + ... + + + + + , + + + + + + +  + + + title + + + + + user 1, user 2, user 3, user 4, user 5 + + + are typing + ... + + + + + , +] +`; + exports[`Storyshots ServerItem content 1`] = ` Array [ `; -exports[`Storyshots UiKitMessage list uikitmessage 1`] = ` - - + - - - Section - - - Section + Markdown List - - - Section + Overflow - - - Section + image - - - Section + button - - - Section + Select - - - Section + DatePicker - - - Section + Multi Select - - - Image - - - Context - - - Action - Buttons - - - Fields - - - Action - Select - - - - + } + /> + + `; -exports[`Storyshots UiKitModal list UiKitModal 1`] = ` - - + + + +`; + +exports[`Storyshots UiKitMessage Context 1`] = ` + + + - - - Modal - Section and Selects - - + + +`; + +exports[`Storyshots UiKitMessage Fields 1`] = ` + + + - Modal - Section Accessories - - + + +`; + +exports[`Storyshots UiKitMessage Image 1`] = ` + + + - Modal - Form Input - - + + +`; + +exports[`Storyshots UiKitMessage Section + DatePicker 1`] = ` + + + - Modal - Form TextArea - - + + +`; + +exports[`Storyshots UiKitMessage Section + Markdown List 1`] = ` + + + - Modal - Images - - + + +`; + +exports[`Storyshots UiKitMessage Section + Multi Select 1`] = ` + + + - Modal - Actions - - + + +`; + +exports[`Storyshots UiKitMessage Section + Overflow 1`] = ` + + + - Modal - Contexts and Dividers - - + + +`; + +exports[`Storyshots UiKitMessage Section + Select 1`] = ` + + + - Modal - Input with error - - + + +`; + +exports[`Storyshots UiKitMessage Section + button 1`] = ` + + + - Modal - Multilne with error - - + + +`; + +exports[`Storyshots UiKitMessage Section + image 1`] = ` + + + - Modal - DatePicker with error - - - - + } + /> + + +`; + +exports[`Storyshots UiKitMessage Section 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Actions 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Contexts and Dividers 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - DatePicker with error 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Form Input 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Form TextArea 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Images 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Input with error 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Multilne with error 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Section Accessories 1`] = ` + + + + + +`; + +exports[`Storyshots UiKitModal Modal - Section and Selects 1`] = ` + + + + + `; exports[`Storyshots Unread Badge all 1`] = ` diff --git a/storybook/stories/Avatar.js b/storybook/stories/Avatar.js index fb642728b..9943f832e 100644 --- a/storybook/stories/Avatar.js +++ b/storybook/stories/Avatar.js @@ -1,11 +1,10 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; -import { ScrollView, StyleSheet, View } from 'react-native'; -import PropTypes from 'prop-types'; +import { StyleSheet } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; -import { themes } from '../../app/constants/colors'; import Avatar from '../../app/containers/Avatar/Avatar'; import Status from '../../app/containers/Status/Status'; -import StoriesSeparator from './StoriesSeparator'; import sharedStyles from '../../app/views/Styles'; const styles = StyleSheet.create({ @@ -16,125 +15,152 @@ const styles = StyleSheet.create({ const server = 'https://open.rocket.chat'; -const Separator = ({ title, theme }) => ; -Separator.propTypes = { - title: PropTypes.string, - theme: PropTypes.string -}; +const _theme = 'light'; -const AvatarStories = ({ theme }) => ( - - - ( + +)); + +stories.add('Avatar by roomId', () => ( + +)); + +stories.add('Avatar by url', () => ( + +)); + +stories.add('Avatar by path', () => ( + +)); + +stories.add('With ETag', () => ( + +)); + +stories.add('Without ETag', () => ( + +)); + +stories.add('Emoji', () => ( + ({ name: 'troll', extension: 'jpg' })} + server={server} + size={56} + /> +)); + +stories.add('Direct', () => ( + +)); + +stories.add('Channel', () => ( + +)); + +stories.add('Touchable', () => ( + console.log('Pressed!')} + size={56} + /> +)); + +stories.add('Static', () => ( + +)); + +stories.add('Avatar by roomId', () => ( + +)); + +stories.add('Custom borderRadius', () => ( + +)); + +stories.add('Children', () => ( + + - - - - - - - - - - - - ({ name: 'troll', extension: 'jpg' })} - server={server} - size={56} - /> - - - - - - console.log('Pressed!')} - size={56} - /> - - - - - - - - - - - - - - - -); -AvatarStories.propTypes = { - theme: PropTypes.string -}; -export default AvatarStories; + +)); + +stories.add('Wrong server', () => ( + +)); + +stories.add('Custom style', () => ( + +)); diff --git a/storybook/stories/Markdown.js b/storybook/stories/Markdown.js index 92c969501..bffd5a2aa 100644 --- a/storybook/stories/Markdown.js +++ b/storybook/stories/Markdown.js @@ -1,14 +1,19 @@ -/* eslint-disable react/prop-types */ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; import { ScrollView, StyleSheet, View } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; import Markdown from '../../app/containers/markdown'; -import StoriesSeparator from './StoriesSeparator'; import { themes } from '../../app/constants/colors'; + +const theme = 'light'; + const styles = StyleSheet.create({ container: { - marginHorizontal: 15 + marginHorizontal: 15, + backgroundColor: themes[theme].backgroundColor, + marginVertical: 50 }, separator: { marginHorizontal: 10, @@ -37,258 +42,231 @@ const getCustomEmoji = (content) => { return customEmoji; }; -// eslint-disable-next-line arrow-body-style -export default ({ theme }) => { - return ( - - - - - +const stories = storiesOf('Markdown', module); - - - - +stories.add('Text', () => ( + + + + + + + +)); - - - - +stories.add('Edited', () => ( + + + +)); - - - - +stories.add('Preview', () => ( + + + + + + + +)); - - - - +stories.add('Mentions', () => ( + + + + +)); - - - - - - - - +stories.add('Hashtag', () => ( + + + +)); - - - - +stories.add('Emoji', () => ( + + + + + + +)); - - - - - - - - - - - - - - - - - - - - - This is block quote +stories.add('Block quote', () => ( + + This is block quote this is a normal line`} - theme={theme} - /> - + theme={theme} + /> + +)); - - - - - +stories.add('Links', () => ( + + + + +)); - - - - - - - - - - - - - +stories.add('Image', () => ( + + + +)); - - - - +stories.add('Headers', () => ( + + + + + + + + +)); - - - ( + + + - + theme={theme} + /> + +)); - - - - +stories.add('Lists', () => ( + + + + +)); - - - - - - - - - - - - - ( + + - - - ); -}; + theme={theme} + /> + +)); diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js index 7be131dbc..82cfa1b03 100644 --- a/storybook/stories/Message.js +++ b/storybook/stories/Message.js @@ -1,21 +1,21 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; -import { ScrollView, StyleSheet } from 'react-native'; +import { StyleSheet, ScrollView } from 'react-native'; +import { Provider } from 'react-redux'; +import { storiesOf } from '@storybook/react-native'; // import moment from 'moment'; import MessageComponent from '../../app/containers/message/Message'; -import StoriesSeparator from './StoriesSeparator'; import messagesStatus from '../../app/constants/messagesStatus'; import MessageSeparator from '../../app/views/RoomView/Separator'; +import MessageContext from '../../app/containers/message/Context'; import { themes } from '../../app/constants/colors'; +import { store } from './index'; -let _theme = 'light'; +const _theme = 'light'; const styles = StyleSheet.create({ - separator: { - marginTop: 30, - marginBottom: 0 - } }); const user = { @@ -40,6 +40,26 @@ const getCustomEmoji = (content) => { return customEmoji; }; +const messageDecorator = story => ( + {}, + onLongPress: () => {}, + reactionInit: () => {}, + onErrorPress: () => {}, + replyBroadcast: () => {}, + onReactionPress: () => {}, + onDiscussionPress: () => {}, + onReactionLongPress: () => {}, + threadBadgeColor: themes.light.tunreadColor + }} + > + {story()} + +); + const Message = props => ( ( /> ); -// eslint-disable-next-line react/prop-types -const Separator = ({ title, theme }) => ; -// eslint-disable-next-line react/prop-types -export default ({ theme }) => { - _theme = theme; - return ( - - - +const stories = storiesOf('Message', module) + .addDecorator(story => {story()}) + .addDecorator(story => {story()}) + .addDecorator(messageDecorator); - - +stories.add('Basic', () => ( + <> + + + +)); - - - - - - +stories.add('Grouped messages', () => ( + <> + + + + + + +)); - - +stories.add('Without header', () => ( + +)); - - - +stories.add('With alias', () => ( + <> + + + +)); - - +stories.add('Edited', () => ( + +)); - - - - ( + <> + + + {}} + type='e2e' + /> + + + + alert('Error pressed')} + type='e2e' + /> + + + +)); + +stories.add('Block Quote', () => ( + <> + + Testing block quote\nTesting block quote'} /> + +)); + +stories.add('Lists', () => ( + <> + + + + + +)); + +stories.add('Static avatar', () => ( + +)); + +stories.add('Full name', () => ( + +)); + +stories.add('Mentions', () => ( + <> + + + +)); + +stories.add('Emojis', () => ( + <> + + + + + + + +)); + +stories.add('Time format', () => ( + +)); + +stories.add('Reactions', () => ( + <> + {}} + /> + {}} + /> + +)); + +stories.add('Date and Unread separators', () => ( + <> + + + + + + + + + +)); + +stories.add('With image', () => ( + <> + + + +)); + +stories.add('With video', () => ( + <> + + + +)); + +stories.add('With audio', () => ( + <> + + + + + + +)); + +stories.add('With file', () => ( + <> + + + +)); + +stories.add('Message with reply', () => ( + <> + + + +)); + +stories.add('Message with read receipt', () => ( + <> + + + + + +)); + +stories.add('Message with thread', () => ( + <> + + + + + + + + +)); + +stories.add('Sequential thread messages following thread button', () => ( + <> + + + + + +)); + +stories.add('Sequential thread messages following thread reply', () => ( + <> + + + + + +)); + +stories.add('Discussion', () => ( + <> + + + + + +)); + +stories.add('URL', () => ( + <> + + + + +)); + +stories.add('Custom fields', () => ( + <> + {}} - type='e2e' - /> - - - - alert('Error pressed')} - type='e2e' - /> - - - - - - Testing block quote\nTesting block quote'} /> - - - - - - - - - - - - - - - - - - - - + title: 'Field 5', + value: 'Value 5' + }] + }]} + /> + +)); - - +stories.add('Two short custom fields with markdown', () => ( + +)); - - +stories.add('Colored attachments', () => ( + +)); - - +stories.add('Broadcast', () => ( + alert('broadcast!')} /> +)); - - +stories.add('Archived', () => ( + +)); - - +stories.add('Error', () => ( + <> + alert('Error pressed')} /> + alert('Error pressed')} isHeader={false} /> + +)); - - +stories.add('Temp', () => ( + +)); - - +stories.add('Editing', () => ( + +)); - - {}} - /> +stories.add('System messages', () => ( + <> + + + + + + + + + + + + + + + + + + +)); - - {}} - /> +stories.add('Ignored', () => ( + +)); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* - - - */} - - - - - - - {/* - - - */} - - - - - - - - - - - - - - - - - - alert('broadcast!')} /> - - - - - - alert('Error pressed')} /> - alert('Error pressed')} isHeader={false} /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; +stories.add('Custom style', () => ( + +)); diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js index 819a149b2..d39e92082 100644 --- a/storybook/stories/RoomItem.js +++ b/storybook/stories/RoomItem.js @@ -1,15 +1,18 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; import { ScrollView, Dimensions } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; +import { Provider } from 'react-redux'; // import moment from 'moment'; import { themes } from '../../app/constants/colors'; import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem'; import { longText } from '../utils'; -import StoriesSeparator from './StoriesSeparator'; +import { store } from './index'; const baseUrl = 'https://open.rocket.chat'; const { width } = Dimensions.get('window'); -let _theme = 'light'; +const _theme = 'light'; const lastMessage = { u: { username: 'diego.mello' @@ -22,7 +25,6 @@ const updatedAt = { const RoomItem = props => ( ( /> ); -// eslint-disable-next-line react/prop-types -const Separator = ({ title }) => ; +const stories = storiesOf('Room Item', module) + .addDecorator(story => {story()}) + .addDecorator(story => {story()}); -// eslint-disable-next-line react/prop-types -export default ({ theme }) => { - _theme = theme; - return ( - - - - - - +stories.add('Basic', () => ( + +)); - - - - - - - - - - - - - - - +stories.add('User', () => ( + <> + + + +)); - - - - - - - - - - - - +stories.add('Type', () => ( + <> + + + + + + + + +)); - - - - - - - - - - ); -}; +stories.add('User status', () => ( + <> + + + + + + + +)); + +stories.add('Alerts', () => ( + <> + + + + + + + + + + + + +)); + +stories.add('Last Message', () => ( + <> + + + + + + + + +)); diff --git a/storybook/stories/StoriesSeparator.js b/storybook/stories/StoriesSeparator.js deleted file mode 100644 index a24fa1d04..000000000 --- a/storybook/stories/StoriesSeparator.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Text, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; - -import { themes } from '../../app/constants/colors'; - -const styles = StyleSheet.create({ - separator: { - marginVertical: 30, - marginLeft: 10, - fontSize: 20, - fontWeight: '300' - } -}); - -const Separator = ({ title, style, theme }) => ( - - {title} - -); - -Separator.propTypes = { - title: PropTypes.string.isRequired, - theme: PropTypes.string, - style: PropTypes.object -}; - -export default Separator; diff --git a/storybook/stories/UiKitMessage.js b/storybook/stories/UiKitMessage.js index 68d81adc6..4fa2865f8 100644 --- a/storybook/stories/UiKitMessage.js +++ b/storybook/stories/UiKitMessage.js @@ -1,11 +1,11 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; import { ScrollView, StyleSheet, SafeAreaView } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; +import MessageContext from '../../app/containers/message/Context'; import { UiKitMessage } from '../../app/containers/UIKit'; -import StoriesSeparator from './StoriesSeparator'; - -// eslint-disable-next-line react/prop-types -const Separator = ({ title }) => ; +import { themes } from '../../app/constants/colors'; const styles = StyleSheet.create({ container: { @@ -17,426 +17,435 @@ const styles = StyleSheet.create({ } }); -export default () => ( - - - - { - UiKitMessage([{ - type: 'section', +const user = { + id: 'y8bd77ptZswPj3EW8', + username: 'diego.mello', + token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz' +}; + +const baseUrl = 'https://open.rocket.chat'; + +const messageDecorator = story => ( + {}, + onLongPress: () => {}, + reactionInit: () => {}, + onErrorPress: () => {}, + replyBroadcast: () => {}, + onReactionPress: () => {}, + onDiscussionPress: () => {}, + onReactionLongPress: () => {}, + threadBadgeColor: themes.light.tunreadColor + }} + > + {story()} + +); + +const stories = storiesOf('UiKitMessage', module) + .addDecorator(story => {story()}) + .addDecorator(story => {story()}) + .addDecorator(messageDecorator); + +const Section = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section' + } +}]); +stories.add('Section', () =>
); + +const SectionMarkdownList = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: '*List*:\n1. Item' + } +}]); +stories.add('Section + Markdown List', () => ); + +const SectionOverflow = () => UiKitMessage([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + Overflow' + }, + accessory: { + type: 'overflow', + options: [ + { text: { - type: 'mrkdwn', - text: 'Section' - } - }]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: '*List*:\n1. Item' - } - }]) - } - - - { - UiKitMessage([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + Overflow' - }, - accessory: { - type: 'overflow', - options: [ - { - text: { - type: 'plain_text', - text: 'Option 1', - emoji: true - }, - value: 'value-0' - }, - { - text: { - type: 'plain_text', - text: 'Option 2', - emoji: true - }, - value: 'value-1' - }, - { - text: { - type: 'plain_text', - text: 'Option 3', - emoji: true - }, - value: 'value-2' - }, - { - text: { - type: 'plain_text', - text: 'Option 4', - emoji: true - }, - value: 'value-3' - } - ] - } - } - ]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + Image' - }, - accessory: { - type: 'image', - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', - altText: 'plants' - } - }]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + button' - }, - accessory: { - type: 'button', - text: { - type: 'plain_text', - text: 'button' - } - } - }]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + select' - }, - accessory: { - type: 'static_select', - options: [ - { - value: 1, - text: { - type: 'plain_text', - text: 'button' - } - }, { - value: 2, - text: { - type: 'plain_text', - text: 'second button' - } - }] - } - }]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + DatePicker' - }, - accessory: { - type: 'datepicker', - initial_date: '1990-04-28', - placeholder: { - type: 'plain_text', - text: 'Select a date', - emoji: true - } - } - }]) - } - - - { - UiKitMessage([{ - type: 'section', - text: { - type: 'mrkdwn', - text: 'Section + select' - }, - accessory: { - type: 'multi_static_select', - options: [{ - text: { - type: 'plain_text', - text: 'button' - }, - value: 1 - }, { - text: { - type: 'plain_text', - text: 'opt 1' - }, - value: 2 - }, { - text: { - type: 'plain_text', - text: 'opt 2' - }, - value: 3 - }, { - text: { - type: 'plain_text', - text: 'opt 3' - }, - value: 4 - }] - } - }]) - } - - - { - UiKitMessage([{ - type: 'image', - title: { type: 'plain_text', - text: 'Example Image', + text: 'Option 1', emoji: true }, - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', - altText: 'Example Image' - }]) - } - - - { - UiKitMessage([{ - type: 'context', - elements: [{ - type: 'image', - title: { - type: 'plain_text', - text: 'Example Image', - emoji: true - }, - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', - altText: 'Example Image' + value: 'value-0' + }, + { + text: { + type: 'plain_text', + text: 'Option 2', + emoji: true }, - { - type: 'mrkdwn', - text: 'context' - } - ] - }]) - } + value: 'value-1' + }, + { + text: { + type: 'plain_text', + text: 'Option 3', + emoji: true + }, + value: 'value-2' + }, + { + text: { + type: 'plain_text', + text: 'Option 4', + emoji: true + }, + value: 'value-3' + } + ] + } + } +]); +stories.add('Section + Overflow', () => ); - - { - UiKitMessage([{ - type: 'actions', - elements: [ - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Approve' - }, - style: 'primary', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - }, - { - type: 'button', - text: { - type: 'plain_text', - emoji: true, - text: 'Deny' - }, - style: 'danger', - value: 'click_me_123' - } - ] - }]) - } +const SectionImage = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + Image' + }, + accessory: { + type: 'image', + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', + altText: 'plants' + } +}]); +stories.add('Section + image', () => ); - - { - UiKitMessage([ - { - type: 'section', - fields: [ - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true - } - ] - }]) - } +const SectionButton = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + button' + }, + accessory: { + type: 'button', + text: { + type: 'plain_text', + text: 'button' + } + } +}]); +stories.add('Section + button', () => ); - +const SectionSelect = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + select' + }, + accessory: { + type: 'static_select', + options: [ { - UiKitMessage([{ - type: 'actions', - elements: [ - { - type: 'conversations_select', - placeholder: { - type: 'plain_text', - text: 'Select a conversation', - emoji: true - } - }, - { - type: 'channels_select', - placeholder: { - type: 'plain_text', - text: 'Select a channel', - emoji: true - } - }, - { - type: 'users_select', - placeholder: { - type: 'plain_text', - text: 'Select a user', - emoji: true - } - }, - { - type: 'static_select', - placeholder: { - type: 'plain_text', - text: 'Select an item', - emoji: true - }, - options: [ - { - text: { - type: 'plain_text', - text: 'Excellent item 1', - emoji: true - }, - value: 'value-0' - }, - { - text: { - type: 'plain_text', - text: 'Fantastic item 2', - emoji: true - }, - value: 'value-1' - }, - { - text: { - type: 'plain_text', - text: 'Nifty item 3', - emoji: true - }, - value: 'value-2' - }, - { - text: { - type: 'plain_text', - text: 'Pretty good item 4', - emoji: true - }, - value: 'value-3' - } - ] - } - ] - }]) + value: 1, + text: { + type: 'plain_text', + text: 'button' + } + }, { + value: 2, + text: { + type: 'plain_text', + text: 'second button' + } + }] + } +}]); +stories.add('Section + Select', () => ); + +const SectionDatePicker = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + DatePicker' + }, + accessory: { + type: 'datepicker', + initial_date: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select a date', + emoji: true + } + } +}]); +stories.add('Section + DatePicker', () => ); + +const SectionMultiSelect = () => UiKitMessage([{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Section + select' + }, + accessory: { + type: 'multi_static_select', + options: [{ + text: { + type: 'plain_text', + text: 'button' + }, + value: 1 + }, { + text: { + type: 'plain_text', + text: 'opt 1' + }, + value: 2 + }, { + text: { + type: 'plain_text', + text: 'opt 2' + }, + value: 3 + }, { + text: { + type: 'plain_text', + text: 'opt 3' + }, + value: 4 + }] + } +}]); +stories.add('Section + Multi Select', () => ); + +const Image = () => UiKitMessage([{ + type: 'image', + title: { + type: 'plain_text', + text: 'Example Image', + emoji: true + }, + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', + altText: 'Example Image' +}]); +stories.add('Image', () => ); + +const Context = () => UiKitMessage([{ + type: 'context', + elements: [{ + type: 'image', + title: { + type: 'plain_text', + text: 'Example Image', + emoji: true + }, + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', + altText: 'Example Image' + }, + { + type: 'mrkdwn', + text: 'context' + } + ] +}]); +stories.add('Context', () => ); + +const ActionButton = () => UiKitMessage([{ + type: 'actions', + elements: [ + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Approve' + }, + style: 'primary', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + }, + { + type: 'button', + text: { + type: 'plain_text', + emoji: true, + text: 'Deny' + }, + style: 'danger', + value: 'click_me_123' + } + ] +}]); +stories.add('Action - Buttons', () => ); + +const Fields = () => UiKitMessage([ + { + type: 'section', + fields: [ + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true + }, + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true + }, + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true + }, + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true + }, + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true } - - -); + ] + }]); +stories.add('Fields', () => ); + +const ActionSelect = () => UiKitMessage([{ + type: 'actions', + elements: [ + { + type: 'conversations_select', + placeholder: { + type: 'plain_text', + text: 'Select a conversation', + emoji: true + } + }, + { + type: 'channels_select', + placeholder: { + type: 'plain_text', + text: 'Select a channel', + emoji: true + } + }, + { + type: 'users_select', + placeholder: { + type: 'plain_text', + text: 'Select a user', + emoji: true + } + }, + { + type: 'static_select', + placeholder: { + type: 'plain_text', + text: 'Select an item', + emoji: true + }, + options: [ + { + text: { + type: 'plain_text', + text: 'Excellent item 1', + emoji: true + }, + value: 'value-0' + }, + { + text: { + type: 'plain_text', + text: 'Fantastic item 2', + emoji: true + }, + value: 'value-1' + }, + { + text: { + type: 'plain_text', + text: 'Nifty item 3', + emoji: true + }, + value: 'value-2' + }, + { + text: { + type: 'plain_text', + text: 'Pretty good item 4', + emoji: true + }, + value: 'value-3' + } + ] + } + ] +}]); +stories.add('Action - Select', () => ); + +// stories.add('Section', () => UiKitMessage([{ +// type: 'section', +// text: { +// type: 'mrkdwn', +// text: 'Section' +// } +// }])); diff --git a/storybook/stories/UiKitModal.js b/storybook/stories/UiKitModal.js index ddbfab6a6..2ec9e1da6 100644 --- a/storybook/stories/UiKitModal.js +++ b/storybook/stories/UiKitModal.js @@ -1,12 +1,12 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; import { ScrollView, StyleSheet, SafeAreaView } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; import { UiKitModal, UiKitComponent } from '../../app/containers/UIKit'; import { KitContext, defaultContext } from '../../app/containers/UIKit/utils'; -import StoriesSeparator from './StoriesSeparator'; - -// eslint-disable-next-line react/prop-types -const Separator = ({ title }) => ; +import MessageContext from '../../app/containers/message/Context'; +import { themes } from '../../app/constants/colors'; const styles = StyleSheet.create({ container: { @@ -18,547 +18,566 @@ const styles = StyleSheet.create({ } }); -export default () => ( - - - - { - UiKitModal([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Rocket.Chat is free, unlimited and open source* 🚀\nIf you have any doubt ask to @rocketcat' - } - }, - { - type: 'divider' - }, - { - type: 'section', - fields: [ - { - type: 'mrkdwn', - text: '*Text 1*\nDescription, Mussum Ipsum, cacilds vidis litro' - }, - { - type: 'mrkdwn', - text: '*Text 2*\nDescription, Mussum Ipsum, cacilds vidis litro' - } - ] - }, - { - type: 'section', - fields: [ - { - type: 'mrkdwn', - text: '*Text 3*\nDescription, Mussum Ipsum, cacilds vidis litro' - }, - { - type: 'mrkdwn', - text: '*Text 4*\nDescription, Mussum Ipsum, cacilds vidis litro' - } - ] - } - ]) - } +const user = { + id: 'y8bd77ptZswPj3EW8', + username: 'diego.mello', + token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz' +}; - - { - UiKitModal([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Bruno Quadros*,\nPlease review your details for your *travel expense*.\nExpense no. *DA921*.' - }, - accessory: { - type: 'image', - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png' - } - }, - { - type: 'divider' - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Date:*\n11/02/2020' - } - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Category:*\nTravel' - } - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Cost:*\n$150.00 USD' - } - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Notes:*\nWebSummit Conference' - } - } - ]) - } +const baseUrl = 'https://open.rocket.chat'; - - { - UiKitModal([ - { - type: 'input', - element: { - type: 'plain_text_input' - }, - label: { - type: 'plain_text', - text: 'Outgoing Title', - emoji: true - }, - hint: { - type: 'plain_text', - text: 'Pick something unique!', - emoji: true - } - }, - { - type: 'input', - element: { - type: 'datepicker', - initial_date: '1990-04-28', - placeholder: { - type: 'plain_text', - text: 'Select a date', - emoji: true - } - }, - label: { - type: 'plain_text', - text: 'Set a date', - emoji: true - } - }, - { - type: 'input', - element: { - type: 'multi_static_select', - options: [{ - text: { - type: 'plain_text', - text: 'John' - }, - value: 1 - }, { - text: { - type: 'plain_text', - text: 'Dog' - }, - value: 2 - }] - }, - label: { - type: 'plain_text', - text: 'Share with...', - emoji: true - } - } - ]) - } +const messageDecorator = story => ( + {}, + onLongPress: () => {}, + reactionInit: () => {}, + onErrorPress: () => {}, + replyBroadcast: () => {}, + onReactionPress: () => {}, + onDiscussionPress: () => {}, + onReactionLongPress: () => {}, + threadBadgeColor: themes.light.tunreadColor + }} + > + {story()} + +); - - { - UiKitModal([ - { - type: 'context', - elements: [{ - type: 'mrkdwn', - text: 'Task: ZOL-994' - }] - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'Update Spec final assets' - }, - accessory: { - type: 'button', - text: { - type: 'plain_text', - text: 'Change' - } - } - }, - { - type: 'divider' - }, - { - type: 'input', - element: { - type: 'plain_text_input', - multiline: true - }, - placeholder: { - type: 'plain_text', - text: 'Write Something', - emoji: true - }, - label: { - type: 'plain_text', - text: 'Notes', - emoji: true - }, - hint: { - type: 'plain_text', - text: 'Please take the time to compose something short', - emoji: true - }, - description: { - type: 'plain_text', - text: 'Describe your update', - emoji: true - } - } - ]) - } +const stories = storiesOf('UiKitModal', module) + .addDecorator(story => {story()}) + .addDecorator(story => {story()}) + .addDecorator(messageDecorator); - +const ModalSectionSelects = () => UiKitModal([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Rocket.Chat is free, unlimited and open source* 🚀\nIf you have any doubt ask to @rocketcat' + } + }, + { + type: 'divider' + }, + { + type: 'section', + fields: [ { - UiKitModal([ - { - type: 'image', - title: { - type: 'plain_text', - text: 'Example Image', - emoji: true - }, - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', - alt_text: 'Example Image' - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'How could be the life in Mars?' - } - }, - { - type: 'context', - elements: [ - { - type: 'image', - imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png' - }, - { - type: 'mrkdwn', - text: 'November 25, 2019' - } - ] - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: '*Next stop, Mars!*\nMussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.' - } - } - ]) + type: 'mrkdwn', + text: '*Text 1*\nDescription, Mussum Ipsum, cacilds vidis litro' + }, + { + type: 'mrkdwn', + text: '*Text 2*\nDescription, Mussum Ipsum, cacilds vidis litro' } - - + ] + }, + { + type: 'section', + fields: [ { - UiKitModal([{ - type: 'input', - element: { - type: 'plain_text_input' - }, - label: { - type: 'plain_text', - text: 'Title', - emoji: true - } + type: 'mrkdwn', + text: '*Text 3*\nDescription, Mussum Ipsum, cacilds vidis litro' + }, + { + type: 'mrkdwn', + text: '*Text 4*\nDescription, Mussum Ipsum, cacilds vidis litro' + } + ] + } +]); +stories.add('Modal - Section and Selects', () => ); + +const ModalSectionAccessories = () => UiKitModal([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Bruno Quadros*,\nPlease review your details for your *travel expense*.\nExpense no. *DA921*.' + }, + accessory: { + type: 'image', + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png' + } + }, + { + type: 'divider' + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Date:*\n11/02/2020' + } + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Category:*\nTravel' + } + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Cost:*\n$150.00 USD' + } + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Notes:*\nWebSummit Conference' + } + } +]); +stories.add('Modal - Section Accessories', () => ); + +const ModalFormInput = () => UiKitModal([ + { + type: 'input', + element: { + type: 'plain_text_input' + }, + label: { + type: 'plain_text', + text: 'Outgoing Title', + emoji: true + }, + hint: { + type: 'plain_text', + text: 'Pick something unique!', + emoji: true + } + }, + { + type: 'input', + element: { + type: 'datepicker', + initial_date: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select a date', + emoji: true + } + }, + label: { + type: 'plain_text', + text: 'Set a date', + emoji: true + } + }, + { + type: 'input', + element: { + type: 'multi_static_select', + options: [{ + text: { + type: 'plain_text', + text: 'John' }, + value: 1 + }, { + text: { + type: 'plain_text', + text: 'Dog' + }, + value: 2 + }] + }, + label: { + type: 'plain_text', + text: 'Share with...', + emoji: true + } + } +]); +stories.add('Modal - Form Input', () => ); + +const ModalFormTextArea = () => UiKitModal([ + { + type: 'context', + elements: [{ + type: 'mrkdwn', + text: 'Task: ZOL-994' + }] + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Update Spec final assets' + }, + accessory: { + type: 'button', + text: { + type: 'plain_text', + text: 'Change' + } + } + }, + { + type: 'divider' + }, + { + type: 'input', + element: { + type: 'plain_text_input', + multiline: true + }, + placeholder: { + type: 'plain_text', + text: 'Write Something', + emoji: true + }, + label: { + type: 'plain_text', + text: 'Notes', + emoji: true + }, + hint: { + type: 'plain_text', + text: 'Please take the time to compose something short', + emoji: true + }, + description: { + type: 'plain_text', + text: 'Describe your update', + emoji: true + } + } +]); +stories.add('Modal - Form TextArea', () => ); + +const ModalImages = () => UiKitModal([ + { + type: 'image', + title: { + type: 'plain_text', + text: 'Example Image', + emoji: true + }, + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png', + alt_text: 'Example Image' + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'How could be the life in Mars?' + } + }, + { + type: 'context', + elements: [ + { + type: 'image', + imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png' + }, + { + type: 'mrkdwn', + text: 'November 25, 2019' + } + ] + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: '*Next stop, Mars!*\nMussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.' + } + } +]); +stories.add('Modal - Images', () => ); + +const ModalActions = () => UiKitModal([{ + type: 'input', + element: { + type: 'plain_text_input' + }, + label: { + type: 'plain_text', + text: 'Title', + emoji: true + } +}, +{ + type: 'section', + text: { + type: 'mrkdwn', + text: 'Details' + } +}, +{ + type: 'section', + accessory: { + type: 'static_select', + options: [ + { + value: 1, + text: { + type: 'plain_text', + text: 'TypeL Task' + } + }, { + value: 2, + text: { + type: 'plain_text', + text: 'second button' + } + }] + } +}, +{ + type: 'section', + accessory: { + type: 'static_select', + options: [ + { + value: 1, + text: { + type: 'plain_text', + text: 'Project: Space (winter)' + } + }, { + value: 2, + text: { + type: 'plain_text', + text: 'second button' + } + }] + } +}, +{ + type: 'section', + accessory: { + type: 'static_select', + options: [ + { + value: 1, + text: { + type: 'plain_text', + text: 'Priority (optional)' + } + }, { + value: 2, + text: { + type: 'plain_text', + text: 'second button' + } + }] + } +}, +{ + type: 'section', + accessory: { + type: 'static_select', + options: [ + { + value: 1, + text: { + type: 'plain_text', + text: 'Assinee (optional)' + } + }, { + value: 2, + text: { + type: 'plain_text', + text: 'second button' + } + }] + } +}, +{ + type: 'input', + element: { + type: 'plain_text_input', + multiline: true + }, + placeholder: { + type: 'plain_text', + text: 'Write Something', + emoji: true + }, + label: { + type: 'plain_text', + text: 'Description', + emoji: true + } +}]); +stories.add('Modal - Actions', () => ); + +const ModalContextsDividers = () => UiKitModal([ + { + type: 'context', + elements: [{ + type: 'mrkdwn', + text: 'Due today' + }] + }, + { + type: 'divider' + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Finish interface componests (3 hours)' + }, + accessory: { + blockId: 'overflow-1', + type: 'overflow', + options: [ { - type: 'section', text: { - type: 'mrkdwn', - text: 'Details' - } - }, - { - type: 'section', - accessory: { - type: 'static_select', - options: [ - { - value: 1, - text: { - type: 'plain_text', - text: 'TypeL Task' - } - }, { - value: 2, - text: { - type: 'plain_text', - text: 'second button' - } - }] - } - }, - { - type: 'section', - accessory: { - type: 'static_select', - options: [ - { - value: 1, - text: { - type: 'plain_text', - text: 'Project: Space (winter)' - } - }, { - value: 2, - text: { - type: 'plain_text', - text: 'second button' - } - }] - } - }, - { - type: 'section', - accessory: { - type: 'static_select', - options: [ - { - value: 1, - text: { - type: 'plain_text', - text: 'Priority (optional)' - } - }, { - value: 2, - text: { - type: 'plain_text', - text: 'second button' - } - }] - } - }, - { - type: 'section', - accessory: { - type: 'static_select', - options: [ - { - value: 1, - text: { - type: 'plain_text', - text: 'Assinee (optional)' - } - }, { - value: 2, - text: { - type: 'plain_text', - text: 'second button' - } - }] - } - }, - { - type: 'input', - element: { - type: 'plain_text_input', - multiline: true + type: 'plain_text', + text: 'Details', + emoji: true }, + value: 'value-0' + }, + { + text: { + type: 'plain_text', + text: 'Remove', + emoji: true + }, + value: 'value-1' + } + ] + } + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'English Class (1 hour)' + }, + accessory: { + blockId: 'overflow-2', + type: 'overflow', + options: [ + { + text: { + type: 'plain_text', + text: 'Details', + emoji: true + }, + value: 'value-0' + }, + { + text: { + type: 'plain_text', + text: 'Remove', + emoji: true + }, + value: 'value-1' + } + ] + } + }, + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Send an email to John (15min)' + }, + accessory: { + blockId: 'overflow-3', + type: 'overflow', + options: [ + { + text: { + type: 'plain_text', + text: 'Details', + emoji: true + }, + value: 'value-0' + }, + { + text: { + type: 'plain_text', + text: 'Remove', + emoji: true + }, + value: 'value-1' + } + ] + } + } +]); +stories.add('Modal - Contexts and Dividers', () => ); + +const ModalInputWithError = () => ( + + + +); +stories.add('Modal - Input with error', () => ); + +const ModalMultilneWithError = () => ( + + + +); +stories.add('Modal - Multilne with error', () => ); + +const ModalDatePickerWithError = () => ( + + - { - UiKitModal([ - { - type: 'context', - elements: [{ - type: 'mrkdwn', - text: 'Due today' - }] - }, - { - type: 'divider' - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'Finish interface componests (3 hours)' - }, - accessory: { - blockId: 'overflow-1', - type: 'overflow', - options: [ - { - text: { - type: 'plain_text', - text: 'Details', - emoji: true - }, - value: 'value-0' - }, - { - text: { - type: 'plain_text', - text: 'Remove', - emoji: true - }, - value: 'value-1' - } - ] - } - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'English Class (1 hour)' - }, - accessory: { - blockId: 'overflow-2', - type: 'overflow', - options: [ - { - text: { - type: 'plain_text', - text: 'Details', - emoji: true - }, - value: 'value-0' - }, - { - text: { - type: 'plain_text', - text: 'Remove', - emoji: true - }, - value: 'value-1' - } - ] - } - }, - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'Send an email to John (15min)' - }, - accessory: { - blockId: 'overflow-3', - type: 'overflow', - options: [ - { - text: { - type: 'plain_text', - text: 'Details', - emoji: true - }, - value: 'value-0' - }, - { - text: { - type: 'plain_text', - text: 'Remove', - emoji: true - }, - value: 'value-1' - } - ] - } - } - ]) - } - - - - - - - - - - - - - - - - - + }, + label: { + type: 'plain_text', + text: 'Label', + emoji: true + } + }]} + /> + ); +stories.add('Modal - DatePicker with error', () => ); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index cd84085c1..20bfc4f25 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -1,37 +1,22 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ -import React from 'react'; -import { Provider } from 'react-redux'; import { createStore, combineReducers } from 'redux'; -import { storiesOf } from '@storybook/react-native'; -import RoomItem from './RoomItem'; +import './RoomItem'; import './List'; import './ServerItem'; -import Message from './Message'; -import UiKitMessage from './UiKitMessage'; -import UiKitModal from './UiKitModal'; -import Markdown from './Markdown'; +import './Message'; +import './UiKitMessage'; +import './UiKitModal'; +import './Markdown'; import './HeaderButtons'; import './UnreadBadge'; import '../../app/views/ThreadMessagesView/Item.stories.js'; +import './Avatar'; import '../../app/containers/BackgroundContainer/index.stories.js'; import '../../app/containers/RoomHeader/RoomHeader.stories.js'; -import Avatar from './Avatar'; -// import RoomViewHeader from './RoomViewHeader'; - -import MessageContext from '../../app/containers/message/Context'; -import { themes } from '../../app/constants/colors'; - -// MessageProvider -const baseUrl = 'https://open.rocket.chat'; -const user = { - id: '', - username: 'diego.mello', - token: '' -}; // Change here to see themed storybook -const theme = 'light'; +export const theme = 'light'; const reducers = combineReducers({ settings: () => ({}), @@ -52,47 +37,4 @@ const reducers = combineReducers({ meteor: () => ({ connected: true }), activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } }) }); -const store = createStore(reducers); - -const messageDecorator = story => ( - {}, - onLongPress: () => {}, - reactionInit: () => {}, - onErrorPress: () => {}, - replyBroadcast: () => {}, - onReactionPress: () => {}, - onDiscussionPress: () => {}, - onReactionLongPress: () => {}, - threadBadgeColor: themes.light.tunreadColor - }} - > - {story()} - -); - -storiesOf('RoomItem', module) - .addDecorator(story => {story()}) - .add('list roomitem', () => ); -storiesOf('Message', module) - .addDecorator(story => {story()}) - .addDecorator(messageDecorator) - .add('list message', () => ); - -storiesOf('UiKitMessage', module) - .addDecorator(messageDecorator) - .add('list uikitmessage', () => ); -storiesOf('UiKitModal', module) - .addDecorator(messageDecorator) - .add('list UiKitModal', () => ); -storiesOf('Markdown', module) - .add('list Markdown', () => ); -storiesOf('Avatar', module) - .add('list Avatar', () => ); - -// FIXME: I couldn't make these pass on jest :( -// storiesOf('RoomViewHeader', module) -// .add('list', () => ); +export const store = createStore(reducers);