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;
|
) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type PropsType = PropsDataType & PropsHousekeepingType;
|
export type PropsType = PropsDataType & PropsHousekeepingType;
|
||||||
|
|
||||||
export class MessageSearchResult extends React.PureComponent<PropsType> {
|
export class MessageSearchResult extends React.PureComponent<PropsType> {
|
||||||
public renderFromName() {
|
public renderFromName() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue