Port StickerPreviewModal to storybook
This commit is contained in:
Ken Powers
Scott Nonnenberg
parent
6b094e1514
commit
2f2d027161
5 changed files with 99 additions and 70 deletions
|
|
@ -15,10 +15,10 @@ import { storiesOf } from '@storybook/react';
|
|||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import {
|
||||
gifObjectUrl,
|
||||
landscapeGreenObjectUrl,
|
||||
landscapePurpleObjectUrl,
|
||||
pngObjectUrl,
|
||||
gifUrl,
|
||||
landscapeGreenUrl,
|
||||
landscapePurpleUrl,
|
||||
pngUrl,
|
||||
} from '../storybook/Fixtures';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
|
@ -48,7 +48,7 @@ messageLookup.set('1-guid-guid-guid-guid-guid', {
|
|||
phoneNumber: '(202) 555-0020',
|
||||
isMe: true,
|
||||
color: 'blue',
|
||||
avatarPath: gifObjectUrl,
|
||||
avatarPath: gifUrl,
|
||||
},
|
||||
to: {
|
||||
phoneNumber: '(202) 555-0015',
|
||||
|
|
@ -83,7 +83,7 @@ messageLookup.set('3-guid-guid-guid-guid-guid', {
|
|||
phoneNumber: '(202) 555-0011',
|
||||
name: 'Someone',
|
||||
color: 'green',
|
||||
avatarPath: pngObjectUrl,
|
||||
avatarPath: pngUrl,
|
||||
},
|
||||
to: {
|
||||
phoneNumber: '(202) 555-0016',
|
||||
|
|
@ -101,7 +101,7 @@ messageLookup.set('4-guid-guid-guid-guid-guid', {
|
|||
phoneNumber: '(202) 555-0020',
|
||||
isMe: true,
|
||||
color: 'light_green',
|
||||
avatarPath: gifObjectUrl,
|
||||
avatarPath: gifUrl,
|
||||
},
|
||||
to: {
|
||||
phoneNumber: '(202) 555-0016',
|
||||
|
|
@ -146,7 +146,7 @@ const conversations = [
|
|||
name: 'Everyone 🌆',
|
||||
type: GROUP,
|
||||
color: 'signal-blue' as 'signal-blue',
|
||||
avatarPath: landscapeGreenObjectUrl,
|
||||
avatarPath: landscapeGreenUrl,
|
||||
isMe: false,
|
||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
||||
unreadCount: 0,
|
||||
|
|
@ -165,7 +165,7 @@ const conversations = [
|
|||
name: 'Everyone Else 🔥',
|
||||
color: 'pink' as 'pink',
|
||||
type: DIRECT,
|
||||
avatarPath: landscapePurpleObjectUrl,
|
||||
avatarPath: landscapePurpleUrl,
|
||||
isMe: false,
|
||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
||||
unreadCount: 0,
|
||||
|
|
@ -187,7 +187,7 @@ const contacts = [
|
|||
name: 'The one Everyone',
|
||||
color: 'blue' as 'blue',
|
||||
type: DIRECT,
|
||||
avatarPath: gifObjectUrl,
|
||||
avatarPath: gifUrl,
|
||||
isMe: false,
|
||||
lastUpdated: Date.now() - 10 * 60 * 1000,
|
||||
unreadCount: 0,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
PropsHousekeeping,
|
||||
} from './ConversationHeader';
|
||||
|
||||
import { gifObjectUrl } from '../../storybook/Fixtures';
|
||||
import { gifUrl } from '../../storybook/Fixtures';
|
||||
|
||||
const book = storiesOf('Components/Conversation/ConversationHeader', module);
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
|
@ -59,7 +59,7 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
props: {
|
||||
color: 'red',
|
||||
isVerified: true,
|
||||
avatarPath: gifObjectUrl,
|
||||
avatarPath: gifUrl,
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0001',
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
#### Not yet installed
|
||||
|
||||
```jsx
|
||||
const abeSticker = { url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const wideSticker = {
|
||||
id: 4,
|
||||
url: util.landscapeGreenObjectUrl,
|
||||
packId: 'wide',
|
||||
};
|
||||
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
|
||||
|
||||
const pack = {
|
||||
id: 'foo',
|
||||
cover: abeSticker,
|
||||
title: 'Foo',
|
||||
isBlessed: true,
|
||||
author: 'Foo McBarrington',
|
||||
status: 'downloaded',
|
||||
stickerCount: 101,
|
||||
stickers: [
|
||||
wideSticker,
|
||||
tallSticker,
|
||||
...Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
],
|
||||
};
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPreviewModal
|
||||
onClose={() => console.log('onClose')}
|
||||
installStickerPack={(...args) => console.log('installStickerPack', ...args)}
|
||||
uninstallStickerPack={(...args) =>
|
||||
console.log('uninstallStickerPack', ...args)
|
||||
}
|
||||
i18n={util.i18n}
|
||||
pack={pack}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
70
ts/components/stickers/StickerPreviewModal.stories.tsx
Normal file
70
ts/components/stickers/StickerPreviewModal.stories.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import * as React from 'react';
|
||||
import { StickerPreviewModal } from './StickerPreviewModal';
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
import {
|
||||
landscapeGreenUrl,
|
||||
portraitTealUrl,
|
||||
squareStickerUrl,
|
||||
} from '../../storybook/Fixtures';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
storiesOf('stickers', module).add('StickerPreviewModal', () => {
|
||||
const title = text('title', 'Foo');
|
||||
const author = text('author', 'Foo McBarrington');
|
||||
const abeSticker = {
|
||||
id: -1,
|
||||
emoji: '🎩',
|
||||
url: squareStickerUrl,
|
||||
packId: 'abe',
|
||||
};
|
||||
const wideSticker = {
|
||||
id: -2,
|
||||
emoji: '🤯',
|
||||
url: landscapeGreenUrl,
|
||||
packId: 'wide',
|
||||
};
|
||||
const tallSticker = {
|
||||
id: -3,
|
||||
emoji: '🔥',
|
||||
url: portraitTealUrl,
|
||||
packId: 'tall',
|
||||
};
|
||||
|
||||
const pack = {
|
||||
id: 'foo',
|
||||
key: 'foo',
|
||||
lastUsed: Date.now(),
|
||||
cover: abeSticker,
|
||||
title,
|
||||
isBlessed: true,
|
||||
author,
|
||||
status: 'downloaded' as 'downloaded',
|
||||
stickerCount: 101,
|
||||
stickers: [
|
||||
wideSticker,
|
||||
tallSticker,
|
||||
...Array(101)
|
||||
.fill(0)
|
||||
.map((_n, id) => ({ ...abeSticker, id })),
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<StickerPreviewModal
|
||||
onClose={action('onClose')}
|
||||
installStickerPack={action('installStickerPack')}
|
||||
uninstallStickerPack={action('uninstallStickerPack')}
|
||||
downloadStickerPack={action('downloadStickerPack')}
|
||||
i18n={i18n}
|
||||
pack={pack}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
@ -6,25 +6,24 @@ import png from '../../fixtures/freepngs-2cd43b_bed7d1327e88454487397574d87b64dc
|
|||
import landscapeGreen from '../../fixtures/1000x50-green.jpeg';
|
||||
// @ts-ignore
|
||||
import landscapePurple from '../../fixtures/200x50-purple.png';
|
||||
|
||||
function makeObjectUrl(data: ArrayBuffer, contentType: string): string {
|
||||
const blob = new Blob([data], {
|
||||
type: contentType,
|
||||
});
|
||||
|
||||
return URL.createObjectURL(blob);
|
||||
}
|
||||
// @ts-ignore
|
||||
import portraitTeal from '../../fixtures/50x1000-teal.jpeg';
|
||||
// @ts-ignore
|
||||
import squareSticker from '../../fixtures/512x515-thumbs-up-lincoln.webp';
|
||||
|
||||
// 320x240
|
||||
export const gifObjectUrl = makeObjectUrl(gif, 'image/gif');
|
||||
export const gifUrl = `/${gif}`;
|
||||
|
||||
// 800×1200
|
||||
export const pngObjectUrl = makeObjectUrl(png, 'image/png');
|
||||
export const landscapeGreenObjectUrl = makeObjectUrl(
|
||||
landscapeGreen,
|
||||
'image/jpeg'
|
||||
);
|
||||
export const landscapePurpleObjectUrl = makeObjectUrl(
|
||||
landscapePurple,
|
||||
'image/png'
|
||||
);
|
||||
export const pngUrl = `/${png}`;
|
||||
|
||||
// 1000x50
|
||||
export const landscapeGreenUrl = `/${landscapeGreen}`;
|
||||
|
||||
// 200x50
|
||||
export const landscapePurpleUrl = `/${landscapePurple}`;
|
||||
|
||||
// 50x1000
|
||||
export const portraitTealUrl = `/${portraitTeal}`;
|
||||
|
||||
export const squareStickerUrl = `/${squareSticker}`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue