From 702913b21a33c82d97fa1532f36440468f348383 Mon Sep 17 00:00:00 2001 From: Chris Svenningsen Date: Fri, 21 Aug 2020 09:09:39 -0700 Subject: [PATCH] Migrate LeftPane to Storybook --- ts/components/LeftPane.md | 455 ----------------------------- ts/components/LeftPane.stories.tsx | 127 ++++++++ 2 files changed, 127 insertions(+), 455 deletions(-) delete mode 100644 ts/components/LeftPane.md create mode 100644 ts/components/LeftPane.stories.tsx diff --git a/ts/components/LeftPane.md b/ts/components/LeftPane.md deleted file mode 100644 index 96d6e67d4db..00000000000 --- a/ts/components/LeftPane.md +++ /dev/null @@ -1,455 +0,0 @@ -#### With search results - -```jsx -const items = [ - { - type: 'conversations-header', - data: undefined, - }, - { - type: 'conversation', - data: { - name: 'Everyone 🌆', - conversationType: 'group', - phoneNumber: '(202) 555-0011', - avatarPath: util.landscapeGreenObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: 'The rabbit hopped silently in the night.', - status: 'sent', - }, - }, - }, - { - type: 'conversation', - data: { - name: 'Everyone Else 🔥', - conversationType: 'direct', - phoneNumber: '(202) 555-0012', - avatarPath: util.landscapePurpleObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: "What's going on?", - status: 'sent', - }, - }, - }, - { - type: 'contacts-header', - data: undefined, - }, - { - type: 'contact', - data: { - name: 'The one Everyone', - conversationType: 'direct', - phoneNumber: '(202) 555-0013', - avatarPath: util.gifObjectUrl, - }, - }, - { - type: 'contact', - data: { - name: 'No likey everyone', - conversationType: 'direct', - phoneNumber: '(202) 555-0014', - color: 'red', - }, - }, - { - type: 'messages-header', - data: undefined, - }, -]; - -const messages = [ - { - from: { - isMe: true, - avatarPath: util.gifObjectUrl, - }, - to: { - name: 'Mr. Fire 🔥', - phoneNumber: '(202) 555-0015', - }, - id: '1-guid-guid-guid-guid-guid', - conversationId: '(202) 555-0015', - receivedAt: Date.now() - 5 * 60 * 1000, - snippet: '<>Everyone<>! Get in!', - conversationOpenInternal: () => console.log('onClick'), - }, - { - from: { - name: 'Jon ❄️', - phoneNumber: '(202) 555-0016', - color: 'green', - }, - to: { - isMe: true, - }, - id: '2-guid-guid-guid-guid-guid', - conversationId: '(202) 555-0016', - snippet: 'Why is <>everyone<> so frustrated?', - receivedAt: Date.now() - 20 * 60 * 1000, - conversationOpenInternal: () => console.log('onClick'), - }, - { - from: { - name: 'Someone', - phoneNumber: '(202) 555-0011', - color: 'green', - avatarPath: util.pngObjectUrl, - }, - to: { - name: "Y'all 🌆", - }, - id: '3-guid-guid-guid-guid-guid', - conversationId: 'EveryoneGroupID', - snippet: 'Hello, <>everyone<>! Woohooo!', - receivedAt: Date.now() - 24 * 60 * 1000, - conversationOpenInternal: () => console.log('onClick'), - }, - { - from: { - isMe: true, - avatarPath: util.gifObjectUrl, - }, - to: { - name: "Y'all 🌆", - }, - id: '4-guid-guid-guid-guid-guid', - conversationId: 'EveryoneGroupID', - snippet: 'Well, <>everyone<>, happy new year!', - receivedAt: Date.now() - 24 * 60 * 1000, - conversationOpenInternal: () => console.log('onClick'), - }, -]; - -const messageLookup = util._.fromPairs( - util._.map(messages, message => [message.id, message]) -); -messages.forEach(message => { - items.push({ - type: 'message', - data: message.id, - }); -}); - -const searchResults = { - items, - openConversationInternal: (...args) => - console.log('openConversationInternal', args), - startNewConversation: (...args) => console.log('startNewConversation', args), - onStartNewConversation: (...args) => { - console.log('onStartNewConversation', args); - }, - renderMessageSearchResult: id => ( - - console.log('openConversationInternal', args) - } - /> - ), -}; - - - - console.log('startNewConversation', query, options) - } - openConversationInternal={(id, messageId) => - console.log('openConversation', id, messageId) - } - showArchivedConversations={() => console.log('showArchivedConversations')} - showInbox={() => console.log('showInbox')} - renderMainHeader={() => ( - console.log('search', result)} - updateSearch={result => console.log('updateSearch', result)} - clearSearch={result => console.log('clearSearch', result)} - i18n={util.i18n} - /> - )} - renderMessageSearchResult={id => ( - - console.log('openConversationInternal', args) - } - /> - )} - i18n={util.i18n} - /> -; -``` - -#### With just conversations - -```jsx -const conversations = [ - { - id: 'convo1', - name: 'Everyone 🌆', - conversationType: 'group', - phoneNumber: '(202) 555-0011', - avatarPath: util.landscapeGreenObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: 'The rabbit hopped silently in the night.', - status: 'sent', - }, - }, - { - id: 'convo2', - name: 'Everyone Else 🔥', - conversationType: 'direct', - phoneNumber: '(202) 555-0012', - avatarPath: util.landscapePurpleObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: "What's going on?", - status: 'error', - }, - }, - { - id: 'convo3', - name: 'John the Turtle', - conversationType: 'direct', - phoneNumber: '(202) 555-0021', - lastUpdated: Date.now() - 24 * 60 * 60 * 1000, - lastMessage: { - text: 'I dunno', - }, - }, - { - id: 'convo4', - name: 'The Fly', - conversationType: 'direct', - phoneNumber: '(202) 555-0022', - avatarPath: util.pngObjectUrl, - lastUpdated: Date.now(), - lastMessage: { - text: 'Gimme!', - }, - }, -]; - - - - console.log('startNewConversation', query, options) - } - openConversationInternal={(id, messageId) => - console.log('openConversation', id, messageId) - } - showArchivedConversations={() => console.log('showArchivedConversations')} - showInbox={() => console.log('showInbox')} - renderMainHeader={() => ( - console.log('search', result)} - updateSearch={result => console.log('updateSearch', result)} - clearSearch={result => console.log('clearSearch', result)} - i18n={util.i18n} - /> - )} - i18n={util.i18n} - /> -; -``` - -#### Showing inbox, with some archived - -```jsx -const conversations = [ - { - id: 'convo1', - name: 'Everyone 🌆', - conversationType: 'group', - phoneNumber: '(202) 555-0011', - avatarPath: util.landscapeGreenObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: 'The rabbit hopped silently in the night.', - status: 'sent', - }, - }, - { - id: 'convo2', - name: 'Everyone Else 🔥', - conversationType: 'direct', - phoneNumber: '(202) 555-0012', - avatarPath: util.landscapePurpleObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: "What's going on?", - status: 'error', - }, - }, - { - id: 'convo3', - name: 'John the Turtle', - conversationType: 'direct', - phoneNumber: '(202) 555-0021', - lastUpdated: Date.now() - 24 * 60 * 60 * 1000, - lastMessage: { - text: 'I dunno', - }, - }, - { - id: 'convo4', - name: 'The Fly', - conversationType: 'direct', - phoneNumber: '(202) 555-0022', - avatarPath: util.pngObjectUrl, - lastUpdated: Date.now(), - lastMessage: { - text: 'Gimme!', - }, - }, -]; - - - - console.log('startNewConversation', query, options) - } - openConversationInternal={(id, messageId) => - console.log('openConversation', id, messageId) - } - showArchivedConversations={() => console.log('showArchivedConversations')} - showInbox={() => console.log('showInbox')} - renderMainHeader={() => ( - console.log('search', result)} - updateSearch={result => console.log('updateSearch', result)} - clearSearch={result => console.log('clearSearch', result)} - i18n={util.i18n} - /> - )} - i18n={util.i18n} - /> -; -``` - -#### Showing archived conversations - -```jsx -const conversations = [ - { - id: 'convo1', - name: 'Everyone 🌆', - conversationType: 'group', - phoneNumber: '(202) 555-0011', - avatarPath: util.landscapeGreenObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: 'The rabbit hopped silently in the night.', - status: 'sent', - }, - }, - { - id: 'convo2', - name: 'Everyone Else 🔥', - conversationType: 'direct', - phoneNumber: '(202) 555-0012', - avatarPath: util.landscapePurpleObjectUrl, - lastUpdated: Date.now() - 5 * 60 * 1000, - lastMessage: { - text: "What's going on?", - status: 'error', - }, - }, - { - id: 'convo3', - name: 'John the Turtle', - conversationType: 'direct', - phoneNumber: '(202) 555-0021', - lastUpdated: Date.now() - 24 * 60 * 60 * 1000, - lastMessage: { - text: 'I dunno', - }, - }, - { - id: 'convo4', - name: 'The Fly', - conversationType: 'direct', - phoneNumber: '(202) 555-0022', - avatarPath: util.pngObjectUrl, - lastUpdated: Date.now(), - lastMessage: { - text: 'Gimme!', - }, - }, -]; - - - - console.log('startNewConversation', query, options) - } - openConversationInternal={(id, messageId) => - console.log('openConversation', id, messageId) - } - showArchivedConversations={() => console.log('showArchivedConversations')} - showInbox={() => console.log('showInbox')} - renderMainHeader={() => ( - console.log('search', result)} - updateSearch={result => console.log('updateSearch', result)} - clearSearch={result => console.log('clearSearch', result)} - i18n={util.i18n} - /> - )} - i18n={util.i18n} - /> -; -``` - -#### Searching in conversation - -```jsx - - - console.log('startNewConversation', query, options) - } - openConversationInternal={(id, messageId) => - console.log('openConversation', id, messageId) - } - showArchivedConversations={() => console.log('showArchivedConversations')} - showInbox={() => console.log('showInbox')} - renderMainHeader={() => ( - console.log('search', result)} - searchConversationName="Y'all 🌆" - searchConversationId="group-id-1" - updateSearch={result => console.log('updateSearch', result)} - clearSearch={result => console.log('clearSearch', result)} - i18n={util.i18n} - /> - )} - i18n={util.i18n} - /> - -``` diff --git a/ts/components/LeftPane.stories.tsx b/ts/components/LeftPane.stories.tsx new file mode 100644 index 00000000000..cd609d0c437 --- /dev/null +++ b/ts/components/LeftPane.stories.tsx @@ -0,0 +1,127 @@ +import * as React from 'react'; + +import { action } from '@storybook/addon-actions'; +import { boolean, text } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; + +import { LeftPane, PropsType } from './LeftPane'; +import { PropsData } from './ConversationListItem'; + +// @ts-ignore +import { setup as setupI18n } from '../../js/modules/i18n'; +// @ts-ignore +import enMessages from '../../_locales/en/messages.json'; +const i18n = setupI18n('en', enMessages); + +const story = storiesOf('Components/LeftPane', module); + +const defaultConversations: Array = [ + { + id: 'fred-convo', + isSelected: false, + lastUpdated: Date.now(), + title: 'Fred Willard', + type: 'direct', + }, + { + id: 'marc-convo', + isSelected: true, + lastUpdated: Date.now(), + title: 'Marc Barraca', + type: 'direct', + }, +]; + +const defaultArchivedConversations: Array = [ + { + id: 'michelle-archive-convo', + isSelected: false, + lastUpdated: Date.now(), + title: 'Michelle Mercure', + type: 'direct', + }, +]; + +const createProps = (overrideProps: Partial = {}): PropsType => ({ + archivedConversations: + overrideProps.archivedConversations || defaultArchivedConversations, + conversations: overrideProps.conversations || defaultConversations, + i18n, + openConversationInternal: action('openConversationInternal'), + renderExpiredBuildDialog: () =>
, + renderMainHeader: () =>
, + renderMessageSearchResult: () =>
, + renderNetworkStatus: () =>
, + renderRelinkDialog: () =>
, + renderUpdateDialog: () =>
, + searchResults: overrideProps.searchResults, + selectedConversationId: text( + 'selectedConversationId', + overrideProps.selectedConversationId || null + ), + showArchived: boolean('showArchived', overrideProps.showArchived || false), + showArchivedConversations: action('showArchivedConversations'), + showInbox: action('showInbox'), + startNewConversation: action('startNewConversation'), +}); + +story.add('Conversation States (Active, Selected, Archived)', () => { + const props = createProps(); + + return ; +}); + +story.add('Archived Conversations Shown', () => { + const props = createProps({ + showArchived: true, + }); + return ; +}); + +story.add('Search Results', () => { + const props = createProps({ + searchResults: { + discussionsLoading: false, + items: [ + { + type: 'conversations-header', + data: undefined, + }, + { + type: 'conversation', + data: { + id: 'fred-convo', + isSelected: false, + lastUpdated: Date.now(), + title: 'People Named Fred', + type: 'group', + }, + }, + { + type: 'start-new-conversation', + data: undefined, + }, + { + type: 'contacts-header', + data: undefined, + }, + { + type: 'contact', + data: { + id: 'fred-contact', + isSelected: false, + lastUpdated: Date.now(), + title: 'Fred Willard', + type: 'direct', + }, + }, + ], + messagesLoading: false, + noResults: false, + regionCode: 'en', + searchTerm: 'Fred', + }, + }); + + return ; +});