Avatar defaults and colors

ts/components/AvatarEditor.stories.tsx

@@ -0,0 +1,98 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+
+import { AvatarColors } from '../types/Colors';
+import { AvatarEditor, PropsType } from './AvatarEditor';
+import { getDefaultAvatars } from '../types/Avatar';
+import { createAvatarData } from '../util/createAvatarData';
+
+const i18n = setupI18n('en', enMessages);
+
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  avatarColor: overrideProps.avatarColor || AvatarColors[9],
+  avatarPath: overrideProps.avatarPath,
+  conversationId: '123',
+  conversationTitle: overrideProps.conversationTitle || 'Default Title',
+  deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
+  i18n,
+  isGroup: Boolean(overrideProps.isGroup),
+  onCancel: action('onCancel'),
+  onSave: action('onSave'),
+  replaceAvatar: action('replaceAvatar'),
+  saveAvatarToDisk: action('saveAvatarToDisk'),
+  userAvatarData: overrideProps.userAvatarData || [
+    createAvatarData({
+      imagePath: '/fixtures/kitten-3-64-64.jpg',
+    }),
+    createAvatarData({
+      color: 'A110',
+      text: 'YA',
+    }),
+    createAvatarData({
+      color: 'A120',
+      text: 'OK',
+    }),
+    createAvatarData({
+      color: 'A130',
+      text: 'F',
+    }),
+    createAvatarData({
+      color: 'A140',
+      text: '🏄💣',
+    }),
+    createAvatarData({
+      color: 'A150',
+      text: '😇🙃😆',
+    }),
+    createAvatarData({
+      color: 'A160',
+      text: '🦊F💦',
+    }),
+    createAvatarData({
+      color: 'A170',
+      text: 'J',
+    }),
+    createAvatarData({
+      color: 'A180',
+      text: 'ZAP',
+    }),
+    createAvatarData({
+      color: 'A190',
+      text: '🍍P',
+    }),
+    createAvatarData({
+      color: 'A200',
+      text: '🌵',
+    }),
+    createAvatarData({
+      color: 'A210',
+      text: 'NAP',
+    }),
+  ],
+});
+
+const story = storiesOf('Components/AvatarEditor', module);
+
+story.add('No Avatar (group)', () => (
+  <AvatarEditor
+    {...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
+  />
+));
+story.add('No Avatar (me)', () => (
+  <AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
+));
+
+story.add('Has Avatar', () => (
+  <AvatarEditor
+    {...createProps({
+      avatarPath: '/fixtures/kitten-3-64-64.jpg',
+    })}
+  />
+));