signal-desktop/ts/components/conversation/ReactionPicker.stories.tsx

// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { select } from '@storybook/addon-knobs';
import { setup as setupI18n } from '../../../js/modules/i18n';
import enMessages from '../../../_locales/en/messages.json';
import {
  Props as ReactionPickerProps,
  ReactionPicker,
  ReactionPickerSelectionStyle,
} from './ReactionPicker';
import { EmojiPicker } from '../emoji/EmojiPicker';

const i18n = setupI18n('en', enMessages);

const preferredReactionEmoji = [
  'heart',
  'thumbsup',
  'thumbsdown',
  'joy',
  'open_mouth',
  'cry',
];

const renderEmojiPicker: ReactionPickerProps['renderEmojiPicker'] = ({
  onClose,
  onPickEmoji,
  onSetSkinTone,
  ref,
}) => (
  <EmojiPicker
    i18n={i18n}
    skinTone={0}
    ref={ref}
    onClose={onClose}
    onPickEmoji={onPickEmoji}
    onSetSkinTone={onSetSkinTone}
  />
);

storiesOf('Components/Conversation/ReactionPicker', module)
  .add('Base', () => {
    return (
      <ReactionPicker
        i18n={i18n}
        onPick={action('onPick')}
        onSetSkinTone={action('onSetSkinTone')}
        openCustomizePreferredReactionsModal={action(
          'openCustomizePreferredReactionsModal'
        )}
        preferredReactionEmoji={preferredReactionEmoji}
        renderEmojiPicker={renderEmojiPicker}
        selectionStyle={ReactionPickerSelectionStyle.Picker}
        skinTone={0}
      />
    );
  })
  .add('Selected Reaction', () => {
    return ['❤️', '👍', '👎', '😂', '😮', '😢', '😡'].map(e => (
      <div key={e} style={{ height: '100px' }}>
        <ReactionPicker
          i18n={i18n}
          selected={e}
          onPick={action('onPick')}
          onSetSkinTone={action('onSetSkinTone')}
          openCustomizePreferredReactionsModal={action(
            'openCustomizePreferredReactionsModal'
          )}
          preferredReactionEmoji={preferredReactionEmoji}
          renderEmojiPicker={renderEmojiPicker}
          selectionStyle={ReactionPickerSelectionStyle.Picker}
          skinTone={0}
        />
      </div>
    ));
  })
  .add('Skin Tones', () => {
    return ['❤️', '👍', '👎', '😂', '😮', '😢', '😡'].map(e => (
      <div key={e} style={{ height: '100px' }}>
        <ReactionPicker
          i18n={i18n}
          selected={e}
          onPick={action('onPick')}
          onSetSkinTone={action('onSetSkinTone')}
          openCustomizePreferredReactionsModal={action(
            'openCustomizePreferredReactionsModal'
          )}
          preferredReactionEmoji={preferredReactionEmoji}
          renderEmojiPicker={renderEmojiPicker}
          selectionStyle={ReactionPickerSelectionStyle.Picker}
          skinTone={select(
            'skinTone',
            { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 },
            5
          )}
        />
      </div>
    ));
  });