Port StickerPreviewModal to storybook

ts/components/SearchResults.stories.tsx

@@ -15,10 +15,10 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import {
-  gifObjectUrl,
+  gifUrl,
-  landscapeGreenObjectUrl,
+  landscapeGreenUrl,
-  landscapePurpleObjectUrl,
+  landscapePurpleUrl,
-  pngObjectUrl,
+  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,

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<ConversationHeaderStory> = [
         props: {
           color: 'red',
           isVerified: true,
-          avatarPath: gifObjectUrl,
+          avatarPath: gifUrl,
           name: 'Someone 🔥 Somewhere',
           phoneNumber: '(202) 555-0001',
           id: '1',

ts/components/stickers/StickerPreviewModal.md

@@ -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>;
-```

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 (
+    <StickerPreviewModal
+      onClose={action('onClose')}
+      installStickerPack={action('installStickerPack')}
+      uninstallStickerPack={action('uninstallStickerPack')}
+      downloadStickerPack={action('downloadStickerPack')}
+      i18n={i18n}
+      pack={pack}
+    />
+  );
+});

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';
-
+// @ts-ignore
-function makeObjectUrl(data: ArrayBuffer, contentType: string): string {
+import portraitTeal from '../../fixtures/50x1000-teal.jpeg';
-  const blob = new Blob([data], {
+// @ts-ignore
-    type: contentType,
+import squareSticker from '../../fixtures/512x515-thumbs-up-lincoln.webp';
-  });
-
-  return URL.createObjectURL(blob);
-}
 
 // 320x240
-export const gifObjectUrl = makeObjectUrl(gif, 'image/gif');
+export const gifUrl = `/${gif}`;
 
 // 800×1200
-export const pngObjectUrl = makeObjectUrl(png, 'image/png');
+export const pngUrl = `/${png}`;
-export const landscapeGreenObjectUrl = makeObjectUrl(
+
-  landscapeGreen,
+// 1000x50
-  'image/jpeg'
+export const landscapeGreenUrl = `/${landscapeGreen}`;
-);
+
-export const landscapePurpleObjectUrl = makeObjectUrl(
+// 200x50
-  landscapePurple,
+export const landscapePurpleUrl = `/${landscapePurple}`;
-  'image/png'
+
-);
+// 50x1000
+export const portraitTealUrl = `/${portraitTeal}`;
+
+export const squareStickerUrl = `/${squareSticker}`;