From 309332d9431604fa99f7f695752fd93a5b73282b Mon Sep 17 00:00:00 2001
From: Sidney Keese <me@sidke.com>
Date: Thu, 20 Aug 2020 15:04:59 -0700
Subject: [PATCH] Migrate Emoji to storybook

---
 ts/components/emoji/Emoji.md          | 21 --------
 ts/components/emoji/Emoji.stories.tsx | 71 +++++++++++++++++++++++++++
 ts/components/emoji/Emoji.tsx         |  6 ++-
 3 files changed, 76 insertions(+), 22 deletions(-)
 delete mode 100644 ts/components/emoji/Emoji.md
 create mode 100644 ts/components/emoji/Emoji.stories.tsx

diff --git a/ts/components/emoji/Emoji.md b/ts/components/emoji/Emoji.md
deleted file mode 100644
index 87860eed6e..0000000000
--- a/ts/components/emoji/Emoji.md
+++ /dev/null
@@ -1,21 +0,0 @@
-#### Simple Emoji
-
-```jsx
-<div>
-  <Emoji shortName="grinning_face_with_star_eyes" />
-  <Emoji shortName="grinning_face_with_star_eyes" size={64} />
-</div>
-```
-
-#### More Options
-
-```jsx
-<div>
-  <Emoji inline shortName="raised_back_of_hand" />
-  <Emoji inline shortName="raised_back_of_hand" skinTone={1} />
-  <Emoji inline shortName="raised_back_of_hand" skinTone={2} />
-  <Emoji inline shortName="raised_back_of_hand" skinTone={3} />
-  <Emoji inline shortName="raised_back_of_hand" skinTone={4} />
-  <Emoji inline shortName="raised_back_of_hand" skinTone={5} />
-</div>
-```
diff --git a/ts/components/emoji/Emoji.stories.tsx b/ts/components/emoji/Emoji.stories.tsx
new file mode 100644
index 0000000000..93a5f820a7
--- /dev/null
+++ b/ts/components/emoji/Emoji.stories.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Emoji, EmojiSizes, Props } from './Emoji';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../_locales/en/messages.json';
+import { storiesOf } from '@storybook/react';
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+const story = storiesOf('Components/Emoji/Emoji', module);
+
+const tones = [0, 1, 2, 3, 4, 5];
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  size: select(
+    'size',
+    EmojiSizes.reduce((m, t) => ({ ...m, [t]: t }), {}),
+    overrideProps.size || 48
+  ),
+  inline: boolean('inline', overrideProps.inline || false),
+  emoji: text('emoji', overrideProps.emoji || ''),
+  shortName: text('shortName', overrideProps.shortName || ''),
+  skinTone: select(
+    'skinTone',
+    tones.reduce((m, t) => ({ ...m, [t]: t }), {}),
+    overrideProps.skinTone || 0
+  ),
+});
+
+story.add('Sizes', () => {
+  const props = createProps({
+    shortName: 'grinning_face_with_star_eyes',
+  });
+
+  return EmojiSizes.map(size => <Emoji key={size} {...props} size={size} />);
+});
+
+story.add('Skin Tones', () => {
+  const props = createProps({
+    shortName: 'raised_back_of_hand',
+  });
+
+  return tones.map(skinTone => (
+    <Emoji key={skinTone} {...props} skinTone={skinTone} />
+  ));
+});
+
+story.add('Inline', () => {
+  const props = createProps({
+    shortName: 'joy',
+    inline: true,
+  });
+
+  return (
+    <>
+      <Emoji {...props} />
+      <Emoji {...props} />
+      <Emoji {...props} />
+    </>
+  );
+});
+
+story.add('From Emoji', () => {
+  const props = createProps({
+    emoji: '😂',
+  });
+
+  return <Emoji {...props} />;
+});
diff --git a/ts/components/emoji/Emoji.tsx b/ts/components/emoji/Emoji.tsx
index 55c4c510c8..ba9ab56965 100644
--- a/ts/components/emoji/Emoji.tsx
+++ b/ts/components/emoji/Emoji.tsx
@@ -2,12 +2,16 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { emojiToImage, getImagePath, SkinToneKey } from './lib';
 
+export const EmojiSizes = [16, 18, 20, 24, 28, 32, 48, 64, 66] as const;
+
+export type EmojiSizeType = typeof EmojiSizes[number];
+
 export type OwnProps = {
   inline?: boolean;
   emoji?: string;
   shortName?: string;
   skinTone?: SkinToneKey | number;
-  size?: 16 | 18 | 20 | 24 | 28 | 32 | 48 | 64 | 66;
+  size?: EmojiSizeType;
   children?: React.ReactNode;
 };