Migrate Typing/Unsupported/Verification components to Storybook

ts/components/conversation/TypingAnimation.md

@@ -1,22 +0,0 @@
-### Conversation List
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <TypingAnimation i18n={util.i18n} />
-</util.ConversationContext>
-```
-
-### Dark background
-
-Note: background color is 'steel'
-
-```jsx
-<div
-  style={{
-    backgroundColor: '#6b6b78',
-    padding: '2em',
-  }}
->
-  <TypingAnimation color="light" i18n={util.i18n} />
-</div>
-```

ts/components/conversation/TypingAnimation.stories.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { Props, TypingAnimation } from './TypingAnimation';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Conversation/TypingAnimation', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  color: overrideProps.color || '',
+});
+
+story.add('Default', () => {
+  const props = createProps();
+
+  return <TypingAnimation {...props} />;
+});
+
+story.add('Light', () => {
+  const props = createProps({
+    color: 'light',
+  });
+
+  return (
+    <div style={{ padding: '2em', backgroundColor: 'grey' }}>
+      <TypingAnimation {...props} />
+    </div>
+  );
+});

ts/components/conversation/TypingAnimation.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { LocalizerType } from '../../types/Util';
 
-interface Props {
+export interface Props {
   i18n: LocalizerType;
   color?: string;
 }

ts/components/conversation/TypingBubble.md

@@ -1,38 +0,0 @@
-### In message bubble
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <div className="module-message-container">
-    <TypingBubble conversationType="direct" i18n={util.i18n} />
-  </div>
-  <div className="module-message-container">
-    <TypingBubble color="teal" conversationType="direct" i18n={util.i18n} />
-  </div>
-</util.ConversationContext>
-```
-
-### In message bubble, group conversation
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <div className="module-message-container">
-    <TypingBubble color="red" conversationType="group" i18n={util.i18n} />
-  </div>
-  <div className="module-message-container">
-    <TypingBubble
-      color="purple"
-      authorName="First Last"
-      conversationType="group"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <TypingBubble
-      avatarPath={util.gifObjectUrl}
-      color="blue"
-      conversationType="group"
-      i18n={util.i18n}
-    />
-  </div>
-</util.ConversationContext>
-```

ts/components/conversation/TypingBubble.stories.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { select, text } from '@storybook/addon-knobs';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { Props, TypingBubble } from './TypingBubble';
+import { Colors } from '../../types/Colors';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Conversation/TypingBubble', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  color: select(
+    'color',
+    Colors.reduce((m, c) => ({ ...m, [c]: c }), {}),
+    overrideProps.color || 'red'
+  ),
+  avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
+  title: '',
+  profileName: text('profileName', overrideProps.profileName || ''),
+  conversationType: select(
+    'conversationType',
+    { group: 'group', direct: 'direct' },
+    overrideProps.conversationType || 'direct'
+  ),
+});
+
+story.add('Direct', () => {
+  const props = createProps();
+
+  return <TypingBubble {...props} />;
+});
+
+story.add('Group', () => {
+  const props = createProps({ conversationType: 'group' });
+
+  return <TypingBubble {...props} />;
+});

ts/components/conversation/TypingBubble.tsx

@@ -7,7 +7,7 @@ import { Avatar } from '../Avatar';
 import { LocalizerType } from '../../types/Util';
 import { ColorType } from '../../types/Colors';
 
-interface Props {
+export interface Props {
   avatarPath?: string;
   color: ColorType;
   name?: string;

ts/components/conversation/UnsupportedMessage.md

@@ -1,69 +0,0 @@
-### From someone in your contacts
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <UnsupportedMessage
-    i18n={util.i18n}
-    contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
-    downloadNewVersion={() => console.log('downloadNewVersion')}
-  />
-</util.ConversationContext>
-```
-
-### After you upgrade
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <UnsupportedMessage
-    i18n={util.i18n}
-    canProcessNow={true}
-    contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
-    downloadNewVersion={() => console.log('downloadNewVersion')}
-  />
-</util.ConversationContext>
-```
-
-### No name, just profile
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <UnsupportedMessage
-    i18n={util.i18n}
-    contact={{ phoneNumber: '(202) 500-1000', profileName: 'Mr. Fire' }}
-    downloadNewVersion={() => console.log('downloadNewVersion')}
-  />
-</util.ConversationContext>
-```
-
-### From yourself
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <UnsupportedMessage
-    i18n={util.i18n}
-    contact={{
-      isMe: true,
-      phoneNumber: '(202) 500-1000',
-      profileName: 'Mr. Fire',
-    }}
-    downloadNewVersion={() => console.log('downloadNewVersion')}
-  />
-</util.ConversationContext>
-```
-
-### From yourself, after you upgrade
-
-```jsx
-<util.ConversationContext theme={util.theme}>
-  <UnsupportedMessage
-    i18n={util.i18n}
-    canProcessNow={true}
-    contact={{
-      isMe: true,
-      phoneNumber: '(202) 500-1000',
-      profileName: 'Mr. Fire',
-    }}
-    downloadNewVersion={() => console.log('downloadNewVersion')}
-  />
-</util.ConversationContext>
-```

ts/components/conversation/UnsupportedMessage.stories.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { ContactType, Props, UnsupportedMessage } from './UnsupportedMessage';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Conversation/UnsupportedMessage', module);
+
+const createContact = (props: Partial<ContactType> = {}): ContactType => ({
+  id: '',
+  title: text('contact title', props.title || ''),
+  isMe: boolean('contact isMe', props.isMe || false),
+});
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  canProcessNow: boolean('canProcessNow', overrideProps.canProcessNow || false),
+  contact: overrideProps.contact || ({} as ContactType),
+  downloadNewVersion: action('downloadNewVersion'),
+});
+
+story.add('From Someone', () => {
+  const contact = createContact({
+    title: 'Alice',
+    name: 'Alice',
+  });
+
+  const props = createProps({ contact });
+
+  return <UnsupportedMessage {...props} />;
+});
+
+story.add('After Upgrade', () => {
+  const contact = createContact({
+    title: 'Alice',
+    name: 'Alice',
+  });
+
+  const props = createProps({ contact, canProcessNow: true });
+
+  return <UnsupportedMessage {...props} />;
+});
+
+story.add('From Yourself', () => {
+  const contact = createContact({
+    title: 'Alice',
+    name: 'Alice',
+    isMe: true,
+  });
+
+  const props = createProps({ contact });
+
+  return <UnsupportedMessage {...props} />;
+});
+
+story.add('From Yourself After Upgrade', () => {
+  const contact = createContact({
+    title: 'Alice',
+    name: 'Alice',
+    isMe: true,
+  });
+
+  const props = createProps({ contact, canProcessNow: true });
+
+  return <UnsupportedMessage {...props} />;
+});

ts/components/conversation/UnsupportedMessage.tsx

@@ -5,7 +5,7 @@ import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 
-interface ContactType {
+export interface ContactType {
   id: string;
   phoneNumber?: string;
   profileName?: string;
@@ -27,7 +27,7 @@ type PropsHousekeeping = {
   i18n: LocalizerType;
 };
 
-type Props = PropsData & PropsHousekeeping & PropsActions;
+export type Props = PropsData & PropsHousekeeping & PropsActions;
 
 export class UnsupportedMessage extends React.Component<Props> {
   public render() {

ts/components/conversation/VerificationNotification.md

@@ -1,49 +0,0 @@
-### Marking as verified
-
-```js
-<util.ConversationContext theme={util.theme}>
-  <VerificationNotification
-    type="markVerified"
-    isLocal={true}
-    contact={{
-      phoneNumber: '(202) 555-0003',
-      profileName: 'Mr. Fire',
-    }}
-    i18n={util.i18n}
-  />
-  <VerificationNotification
-    type="markVerified"
-    isLocal={false}
-    contact={{
-      phoneNumber: '(202) 555-0003',
-      profileName: 'Mr. Fire',
-    }}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>
-```
-
-### Marking as not verified
-
-```js
-<util.ConversationContext theme={util.theme}>
-  <VerificationNotification
-    type="markNotVerified"
-    isLocal={true}
-    contact={{
-      phoneNumber: '(202) 555-0003',
-      profileName: 'Mr. Fire',
-    }}
-    i18n={util.i18n}
-  />
-  <VerificationNotification
-    type="markNotVerified"
-    isLocal={false}
-    contact={{
-      phoneNumber: '(202) 555-0003',
-      profileName: 'Mr. Fire',
-    }}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>
-```

ts/components/conversation/VerificationNotification.stories.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { Props, VerificationNotification } from './VerificationNotification';
+import { boolean } from '@storybook/addon-knobs';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf(
+  'Components/Conversation/VerificationNotification',
+  module
+);
+
+const contact = {
+  title: 'Mr. Fire',
+  phoneNumber: '(202) 555-0003',
+  profileName: 'Mr. Fire',
+};
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  type: overrideProps.type || 'markVerified',
+  isLocal: boolean('isLocal', overrideProps.isLocal !== false),
+  contact,
+});
+
+story.add('Mark as Verified', () => {
+  const props = createProps({ type: 'markVerified' });
+
+  return <VerificationNotification {...props} />;
+});
+
+story.add('Mark as Not Verified', () => {
+  const props = createProps({ type: 'markNotVerified' });
+
+  return <VerificationNotification {...props} />;
+});
+
+story.add('Mark as Verified Remotely', () => {
+  const props = createProps({ type: 'markVerified', isLocal: false });
+
+  return <VerificationNotification {...props} />;
+});
+
+story.add('Mark as Not Verified Remotely', () => {
+  const props = createProps({ type: 'markNotVerified', isLocal: false });
+
+  return <VerificationNotification {...props} />;
+});

ts/components/conversation/VerificationNotification.tsx

@@ -24,7 +24,7 @@ type PropsHousekeeping = {
   i18n: LocalizerType;
 };
 
-type Props = PropsData & PropsHousekeeping;
+export type Props = PropsData & PropsHousekeeping;
 
 export class VerificationNotification extends React.Component<Props> {
   public getStringId() {