Migrate MessageSearchResult to Storybook
This commit is contained in:
Sidney Keese
Josh Perez
parent
0e79f83a42
commit
d27a15a3eb
3 changed files with 141 additions and 250 deletions
|
|
@ -1,249 +0,0 @@
|
|||
#### With name and profile
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
avatarPath: util.gifObjectUrl,
|
||||
}}
|
||||
to={{
|
||||
isMe: true,
|
||||
}}
|
||||
snippet="What's <<left>>going<<right>> on?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 24 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Selected
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
avatarPath: util.gifObjectUrl,
|
||||
}}
|
||||
to={{
|
||||
isMe: true,
|
||||
}}
|
||||
isSelected={true}
|
||||
snippet="What's <<left>>going<<right>> on?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 4 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### From you
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
isMe: true,
|
||||
}}
|
||||
to={{
|
||||
name: 'Mr. Smith',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
avatarPath: util.gifObjectUrl,
|
||||
}}
|
||||
snippet="What's <<left>>going<<right>> on?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 3 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
isMe: true,
|
||||
}}
|
||||
to={{
|
||||
name: 'Everyone 🔥',
|
||||
}}
|
||||
snippet="How is everyone? <<left>>Going<<right>> well?"
|
||||
id="messageId2"
|
||||
conversationId="conversationId2"
|
||||
sentAt={Date.now() - 27 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Searching within conversation
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
isSearchingInConversation={true}
|
||||
from={{
|
||||
name: 'Someone 🔥',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
avatarPath: util.gifObjectUrl,
|
||||
}}
|
||||
to={{
|
||||
name: 'Everyone 🔥',
|
||||
}}
|
||||
snippet="What's <<left>>going<<right>> on?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 3 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<MessageSearchResult
|
||||
isSearchingInConversation={true}
|
||||
from={{
|
||||
name: 'Someone 🔥',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
avatarPath: util.gifObjectUrl,
|
||||
}}
|
||||
to={{
|
||||
name: 'Everyone 🔥',
|
||||
}}
|
||||
snippet="How is everyone? <<left>>Going<<right>> well?"
|
||||
id="messageId2"
|
||||
conversationId="conversationId2"
|
||||
sentAt={Date.now() - 27 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### From you and to you
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
isMe: true,
|
||||
}}
|
||||
to={{
|
||||
isMe: true,
|
||||
}}
|
||||
snippet="Tuesday: Ate two <<left>>apple<<right>>s"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 3 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Profile, with name, no avatar
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Mr. Fire🔥',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
color: 'green',
|
||||
}}
|
||||
to={{
|
||||
isMe: true,
|
||||
}}
|
||||
snippet="<<left>>Just<<right>> a second"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 7 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### With Group
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Jon ❄️',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
color: 'green',
|
||||
}}
|
||||
to={{
|
||||
name: 'My Crew',
|
||||
}}
|
||||
snippet="I'm pretty <<left>>excited<<right>>!"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 30 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Longer search results
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Penny J',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
color: 'purple',
|
||||
avatarPath: util.pngImagePath,
|
||||
}}
|
||||
to={{
|
||||
name: 'Softball 🥎',
|
||||
}}
|
||||
snippet="This is a really <<left>>detail<<right>>ed long line which will wrap and only be cut off after it gets to three lines. So maybe this will make it in as well?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 17 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<MessageSearchResult
|
||||
from={{
|
||||
name: 'Tim Smith',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
color: 'red',
|
||||
avatarPath: util.pngImagePath,
|
||||
}}
|
||||
to={{
|
||||
name: 'Maple 🍁',
|
||||
}}
|
||||
snippet="Okay, here are the <<left>>detail<<right>>s:\n\n1355 Ridge Way\nCode: 234\n\nI'm excited!"
|
||||
id="messageId2"
|
||||
conversationId="conversationId2"
|
||||
sentAt={Date.now() - 10 * 60 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Empty
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<MessageSearchResult
|
||||
from={{}}
|
||||
to={{}}
|
||||
snippet="What's <<left>>going<<right>> on?"
|
||||
id="messageId1"
|
||||
conversationId="conversationId1"
|
||||
sentAt={Date.now() - 24 * 60 * 1000}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
140
ts/components/MessageSearchResult.stories.tsx
Normal file
140
ts/components/MessageSearchResult.stories.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
import { MessageSearchResult, PropsType } from './MessageSearchResult';
|
||||
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
const story = storiesOf('Components/MessageSearchResult', module);
|
||||
|
||||
story.addDecorator((withKnobs as any)({ escapeHTML: false }));
|
||||
|
||||
const someone = {
|
||||
title: 'Some Person',
|
||||
name: 'Some Person',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
};
|
||||
|
||||
const me = {
|
||||
title: 'Me',
|
||||
name: 'Me',
|
||||
isMe: true,
|
||||
};
|
||||
|
||||
const group = {
|
||||
title: 'Group Chat',
|
||||
name: 'Group Chat',
|
||||
};
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
i18n,
|
||||
id: '',
|
||||
conversationId: '',
|
||||
sentAt: Date.now() - 24 * 60 * 1000,
|
||||
snippet: text(
|
||||
'snippet',
|
||||
overrideProps.snippet || "What's <<left>>going<<right>> on?"
|
||||
),
|
||||
from: overrideProps.from as any,
|
||||
to: overrideProps.to as any,
|
||||
isSelected: boolean('isSelected', overrideProps.isSelected || false),
|
||||
openConversationInternal: action('openConversationInternal'),
|
||||
isSearchingInConversation: boolean(
|
||||
'isSearchingInConversation',
|
||||
overrideProps.isSearchingInConversation || false
|
||||
),
|
||||
});
|
||||
|
||||
story.add('Default', () => {
|
||||
const props = createProps({
|
||||
from: someone,
|
||||
to: me,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('Selected', () => {
|
||||
const props = createProps({
|
||||
from: someone,
|
||||
to: me,
|
||||
isSelected: true,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('From You', () => {
|
||||
const props = createProps({
|
||||
from: me,
|
||||
to: someone,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('Searching in Conversation', () => {
|
||||
const props = createProps({
|
||||
from: me,
|
||||
to: someone,
|
||||
isSearchingInConversation: true,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('From You to Yourself', () => {
|
||||
const props = createProps({
|
||||
from: me,
|
||||
to: me,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('From You to Group', () => {
|
||||
const props = createProps({
|
||||
from: me,
|
||||
to: group,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('From Someone to Group', () => {
|
||||
const props = createProps({
|
||||
from: someone,
|
||||
to: group,
|
||||
});
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
||||
story.add('Long Search Result', () => {
|
||||
const snippets = [
|
||||
'This is a really <<left>>detail<<right>>ed long line which will wrap and only be cut off after it gets to three lines. So maybe this will make it in as well?',
|
||||
"Okay, here are the <<left>>detail<<right>>s:\n\n1355 Ridge Way\nCode: 234\n\nI'm excited!",
|
||||
];
|
||||
|
||||
return snippets.map(snippet => {
|
||||
const props = createProps({
|
||||
from: someone,
|
||||
to: me,
|
||||
snippet,
|
||||
});
|
||||
|
||||
return <MessageSearchResult key={snippet.length} {...props} />;
|
||||
});
|
||||
});
|
||||
|
||||
story.add('Empty', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <MessageSearchResult {...props} />;
|
||||
});
|
||||
|
|
@ -47,7 +47,7 @@ type PropsHousekeepingType = {
|
|||
) => void;
|
||||
};
|
||||
|
||||
type PropsType = PropsDataType & PropsHousekeepingType;
|
||||
export type PropsType = PropsDataType & PropsHousekeepingType;
|
||||
|
||||
export class MessageSearchResult extends React.PureComponent<PropsType> {
|
||||
public renderFromName() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue