From 2f2d027161293a36b7ebca2c3e080fa61771bcd2 Mon Sep 17 00:00:00 2001 From: Ken Powers Date: Mon, 6 Apr 2020 12:48:58 -0400 Subject: [PATCH] Port StickerPreviewModal to storybook --- ts/components/SearchResults.stories.tsx | 20 +++--- .../ConversationHeader.stories.tsx | 4 +- ts/components/stickers/StickerPreviewModal.md | 40 ----------- .../stickers/StickerPreviewModal.stories.tsx | 70 +++++++++++++++++++ ts/storybook/Fixtures.ts | 35 +++++----- 5 files changed, 99 insertions(+), 70 deletions(-) delete mode 100644 ts/components/stickers/StickerPreviewModal.md create mode 100644 ts/components/stickers/StickerPreviewModal.stories.tsx diff --git a/ts/components/SearchResults.stories.tsx b/ts/components/SearchResults.stories.tsx index ff8215c336..0188d43b11 100644 --- a/ts/components/SearchResults.stories.tsx +++ b/ts/components/SearchResults.stories.tsx @@ -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, diff --git a/ts/components/conversation/ConversationHeader.stories.tsx b/ts/components/conversation/ConversationHeader.stories.tsx index 6ec722358e..c43bb6fedb 100644 --- a/ts/components/conversation/ConversationHeader.stories.tsx +++ b/ts/components/conversation/ConversationHeader.stories.tsx @@ -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 = [ props: { color: 'red', isVerified: true, - avatarPath: gifObjectUrl, + avatarPath: gifUrl, name: 'Someone 🔥 Somewhere', phoneNumber: '(202) 555-0001', id: '1', diff --git a/ts/components/stickers/StickerPreviewModal.md b/ts/components/stickers/StickerPreviewModal.md deleted file mode 100644 index 9c749feedc..0000000000 --- a/ts/components/stickers/StickerPreviewModal.md +++ /dev/null @@ -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 })), - ], -}; - - - console.log('onClose')} - installStickerPack={(...args) => console.log('installStickerPack', ...args)} - uninstallStickerPack={(...args) => - console.log('uninstallStickerPack', ...args) - } - i18n={util.i18n} - pack={pack} - /> -; -``` diff --git a/ts/components/stickers/StickerPreviewModal.stories.tsx b/ts/components/stickers/StickerPreviewModal.stories.tsx new file mode 100644 index 0000000000..9c5c626d93 --- /dev/null +++ b/ts/components/stickers/StickerPreviewModal.stories.tsx @@ -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 ( + + ); +}); diff --git a/ts/storybook/Fixtures.ts b/ts/storybook/Fixtures.ts index 4257bf139c..714c53f3e9 100644 --- a/ts/storybook/Fixtures.ts +++ b/ts/storybook/Fixtures.ts @@ -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}`;