From 7b75f8bb2ea5ebfe512e53d34ae5072a8ec6fb82 Mon Sep 17 00:00:00 2001
From: Chris Svenningsen <chris@carbonfive.com>
Date: Wed, 26 Aug 2020 07:28:50 -0700
Subject: [PATCH] Migrate ReactionViewer to Storybook

---
 ts/components/conversation/ReactionViewer.md  | 178 -----------------
 .../conversation/ReactionViewer.stories.tsx   | 180 ++++++++++++++++++
 2 files changed, 180 insertions(+), 178 deletions(-)
 delete mode 100644 ts/components/conversation/ReactionViewer.md
 create mode 100644 ts/components/conversation/ReactionViewer.stories.tsx

diff --git a/ts/components/conversation/ReactionViewer.md b/ts/components/conversation/ReactionViewer.md
deleted file mode 100644
index cd522e969..000000000
--- a/ts/components/conversation/ReactionViewer.md
+++ /dev/null
@@ -1,178 +0,0 @@
-### Reaction Viewer
-
-#### Few Reactions
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <ReactionViewer
-    i18n={util.i18n}
-    reactions={[
-      {
-        emoji: '❤️',
-        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
-      },
-      {
-        emoji: '👍',
-        from: {
-          id: '+14155552671',
-          phoneNumber: '+14155552671',
-          profileName: 'Joel Ferrari',
-        },
-      },
-    ]}
-  />
-</util.ConversationContext>
-```
-
-#### Picked Reaction
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <ReactionViewer
-    i18n={util.i18n}
-    pickedReaction="👍"
-    reactions={[
-      {
-        emoji: '❤️',
-        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
-      },
-      {
-        emoji: '👍',
-        from: {
-          id: '+14155552671',
-          phoneNumber: '+14155552671',
-          profileName: 'Joel Ferrari',
-        },
-      },
-    ]}
-  />
-</util.ConversationContext>
-```
-
-#### Many Reactions
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <ReactionViewer
-    i18n={util.i18n}
-    reactions={[
-      {
-        emoji: '❤️',
-        timestamp: 1,
-        from: {
-          id: '+14155552671',
-          phoneNumber: '+14155552671',
-          profileName: 'Ameila Briggs',
-        },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 2,
-        from: { id: '+14155552672', name: 'Adam Burrel' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 3,
-        from: { id: '+14155552673', name: 'Rick Owens' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 4,
-        from: { id: '+14155552674', name: 'Bojack Horseman' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 4,
-        from: { id: '+14155552675', name: 'Cayce Pollard' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 5,
-        from: { id: '+14155552676', name: 'Foo McBarrington' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 6,
-        from: { id: '+14155552677', name: 'Ameila Briggs' },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 7,
-        from: {
-          id: '+14155552678',
-          phoneNumber: '+14155552678',
-          profileName: 'Adam Burrel',
-        },
-      },
-      {
-        emoji: '❤️',
-        timestamp: 8,
-        from: { id: '+14155552679', name: 'Rick Owens', isMe: true },
-      },
-      {
-        emoji: '👍',
-        timestamp: 9,
-        from: { id: '+14155552671', name: 'Adam Burrel' },
-      },
-      {
-        emoji: '👎',
-        timestamp: 10,
-        from: { id: '+14155552671', name: 'Rick Owens' },
-      },
-      {
-        emoji: '😂',
-        timestamp: 11,
-        from: { id: '+14155552671', name: 'Bojack Horseman' },
-      },
-      {
-        emoji: '😮',
-        timestamp: 12,
-        from: { id: '+14155552671', name: 'Cayce Pollard' },
-      },
-      {
-        emoji: '😢',
-        timestamp: 13,
-        from: { id: '+14155552671', name: 'Foo McBarrington' },
-      },
-      {
-        emoji: '😡',
-        timestamp: 14,
-        from: { id: '+14155552671', name: 'Foo McBarrington' },
-      },
-    ]}
-  />
-</util.ConversationContext>
-```
-
-#### Name Overflow
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <ReactionViewer
-    i18n={util.i18n}
-    reactions={[
-      {
-        emoji: '❤️',
-        from: { id: '+14155552671', name: 'Foo McBarringtonMcBazzingtonMcKay' },
-      },
-      {
-        emoji: '❤️',
-        from: {
-          id: '+14155552671',
-          name: 'Foo McBarringtonMcBazzingtonMcKay',
-          isMe: true,
-        },
-      },
-      {
-        emoji: '❤️',
-        from: {
-          id: '+14155552671',
-          phoneNumber: '+14155552671',
-          profileName: 'Foo McBarringtonMcBazzingtonMcKay',
-          isMe: true,
-        },
-      },
-    ]}
-  />
-</util.ConversationContext>
-```
diff --git a/ts/components/conversation/ReactionViewer.stories.tsx b/ts/components/conversation/ReactionViewer.stories.tsx
new file mode 100644
index 000000000..ccae59428
--- /dev/null
+++ b/ts/components/conversation/ReactionViewer.stories.tsx
@@ -0,0 +1,180 @@
+import * as React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+
+import { Props, ReactionViewer } from './ReactionViewer';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Conversation/ReactionViewer', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  onClose: action('onClose'),
+  pickedReaction: overrideProps.pickedReaction,
+  reactions: overrideProps.reactions || [],
+  style: overrideProps.style,
+});
+
+story.add('All Reactions', () => {
+  const props = createProps({
+    reactions: [
+      {
+        emoji: '❤️',
+        timestamp: 1,
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Ameila Briggs',
+          title: 'Amelia',
+        },
+      },
+      {
+        emoji: '❤️',
+        timestamp: 2,
+        from: {
+          id: '+14155552672',
+          name: 'Adam Burrel',
+          title: 'Adam',
+        },
+      },
+      {
+        emoji: '❤️',
+        timestamp: 3,
+        from: {
+          id: '+14155552673',
+          name: 'Rick Owens',
+          title: 'Rick',
+        },
+      },
+      {
+        emoji: '❤️',
+        timestamp: 4,
+        from: {
+          id: '+14155552674',
+          name: 'Bojack Horseman',
+          title: 'Bojack',
+        },
+      },
+      {
+        emoji: '👍',
+        timestamp: 9,
+        from: {
+          id: '+14155552678',
+          phoneNumber: '+14155552678',
+          profileName: 'Adam Burrel',
+          title: 'Adam',
+        },
+      },
+      {
+        emoji: '👎',
+        timestamp: 10,
+        from: {
+          id: '+14155552673',
+          name: 'Rick Owens',
+          title: 'Rick',
+        },
+      },
+      {
+        emoji: '😂',
+        timestamp: 11,
+        from: {
+          id: '+14155552674',
+          name: 'Bojack Horseman',
+          title: 'Bojack',
+        },
+      },
+      {
+        emoji: '😮',
+        timestamp: 12,
+        from: {
+          id: '+14155552675',
+          name: 'Cayce Pollard',
+          title: 'Cayce',
+        },
+      },
+      {
+        emoji: '😢',
+        timestamp: 13,
+        from: {
+          id: '+14155552676',
+          name: 'Foo McBarrington',
+          title: 'Foo',
+        },
+      },
+      {
+        emoji: '😡',
+        timestamp: 14,
+        from: {
+          id: '+14155552676',
+          name: 'Foo McBarrington',
+          title: 'Foo',
+        },
+      },
+    ],
+  });
+  return <ReactionViewer {...props} />;
+});
+
+story.add('Picked Reaction', () => {
+  const props = createProps({
+    pickedReaction: '❤️',
+    reactions: [
+      {
+        emoji: '❤️',
+        from: {
+          id: '+14155552671',
+          name: 'Amelia Briggs',
+          isMe: true,
+          title: 'Amelia',
+        },
+        timestamp: Date.now(),
+      },
+      {
+        emoji: '👍',
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Joel Ferrari',
+          title: 'Joel',
+        },
+        timestamp: Date.now(),
+      },
+    ],
+  });
+  return <ReactionViewer {...props} />;
+});
+
+story.add('Picked Missing Reaction', () => {
+  const props = createProps({
+    pickedReaction: '😡',
+    reactions: [
+      {
+        emoji: '❤️',
+        from: {
+          id: '+14155552671',
+          name: 'Amelia Briggs',
+          isMe: true,
+          title: 'Amelia',
+        },
+        timestamp: Date.now(),
+      },
+      {
+        emoji: '👍',
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Joel Ferrari',
+          title: 'Joel',
+        },
+        timestamp: Date.now(),
+      },
+    ],
+  });
+  return <ReactionViewer {...props} />;
+});