Migrate MainHeader to Storybook

ts/components/MainHeader.md

@@ -1,100 +0,0 @@
-Note that this component is controlled, so the text in the search box will only update
-if the parent of this component feeds the updated `searchTerm` back.
-
-#### With image
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    searchTerm=""
-    avatarPath={util.gifObjectUrl}
-    search={text => console.log('search', text)}
-    updateSearchTerm={text => console.log('updateSearchTerm', text)}
-    clearSearch={() => console.log('clearSearch')}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```
-
-#### Just name
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    searchTerm=""
-    name="John Smith"
-    color="purple"
-    search={text => console.log('search', text)}
-    updateSearchTerm={text => console.log('updateSearchTerm', text)}
-    clearSearch={() => console.log('clearSearch')}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```
-
-#### Just phone number
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    searchTerm=""
-    phoneNumber="+15553004000"
-    color="green"
-    search={text => console.log('search', text)}
-    updateSearchTerm={text => console.log('updateSearchTerm', text)}
-    clearSearch={() => console.log('clearSearch')}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```
-
-#### Starting with a search term
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    name="John Smith"
-    color="purple"
-    searchTerm="Hewwo?"
-    search={text => console.log('search', text)}
-    updateSearchTerm={text => console.log('updateSearchTerm', text)}
-    clearSearch={() => console.log('clearSearch')}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```
-
-#### Searching within conversation
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    name="John Smith"
-    color="purple"
-    searchConversationId="group-id-1"
-    searchConversationName="Everyone 🔥"
-    search={(...args) => console.log('search', args)}
-    updateSearchTerm={(...args) => console.log('updateSearchTerm', args)}
-    clearSearch={(...args) => console.log('clearSearch', args)}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```
-
-#### Searching within conversation, with search term
-
-```jsx
-<util.LeftPaneContext theme={util.theme}>
-  <MainHeader
-    name="John Smith"
-    color="purple"
-    searchConversationId="group-id-1"
-    searchConversationName="Everyone 🔥"
-    searchTerm="address"
-    search={(...args) => console.log('search', args)}
-    updateSearchTerm={(...args) => console.log('updateSearchTerm', args)}
-    clearSearch={(...args) => console.log('clearSearch', args)}
-    i18n={util.i18n}
-  />
-</util.LeftPaneContext>
-```

ts/components/MainHeader.stories.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, withKnobs } 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 { MainHeader, PropsType } from './MainHeader';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/MainHeader', module);
+
+const requiredText = (name: string, value: string | undefined) =>
+  text(name, value || '');
+const optionalText = (name: string, value: string | undefined) =>
+  text(name, value || '') || undefined;
+
+story.addDecorator((withKnobs as any)({ escapeHTML: false }));
+
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  searchTerm: requiredText('searchTerm', overrideProps.searchTerm),
+  searchConversationName: optionalText(
+    'searchConversationName',
+    overrideProps.searchConversationName
+  ),
+  searchConversationId: optionalText(
+    'searchConversationId',
+    overrideProps.searchConversationId
+  ),
+  startSearchCounter: 0,
+
+  ourConversationId: '',
+  ourUuid: '',
+  ourNumber: '',
+  regionCode: '',
+
+  phoneNumber: optionalText('phoneNumber', overrideProps.phoneNumber),
+  title: requiredText('title', overrideProps.title),
+  name: optionalText('name', overrideProps.name),
+  avatarPath: optionalText('avatarPath', overrideProps.avatarPath),
+
+  i18n,
+  updateSearchTerm: action('updateSearchTerm'),
+  searchMessages: action('searchMessages'),
+  searchDiscussions: action('searchDiscussions'),
+
+  clearConversationSearch: action('clearConversationSearch'),
+  clearSearch: action('clearSearch'),
+
+  showArchivedConversations: action('showArchivedConversations'),
+});
+
+story.add('Basic', () => {
+  const props = createProps({});
+
+  return <MainHeader {...props} />;
+});
+
+story.add('Name', () => {
+  const props = createProps({
+    name: 'John Smith',
+    title: 'John Smith',
+  });
+
+  return <MainHeader {...props} />;
+});
+
+story.add('Phone Number', () => {
+  const props = createProps({
+    name: 'John Smith',
+    phoneNumber: '+15553004000',
+  });
+
+  return <MainHeader {...props} />;
+});
+
+story.add('Search Term', () => {
+  const props = createProps({
+    name: 'John Smith',
+    searchTerm: 'Hewwo?',
+    title: 'John Smith',
+  });
+
+  return <MainHeader {...props} />;
+});
+
+story.add('Searching Conversation', () => {
+  const props = createProps({
+    name: 'John Smith',
+    searchConversationId: 'group-id-1',
+    searchConversationName: 'Everyone',
+  });
+
+  return <MainHeader {...props} />;
+});
+
+story.add('Searching Conversation with Term', () => {
+  const props = createProps({
+    name: 'John Smith',
+    searchTerm: 'address',
+    searchConversationId: 'group-id-1',
+    searchConversationName: 'Everyone',
+  });
+
+  return <MainHeader {...props} />;
+});