Reddit icon

import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { withKnobs, text, boolean, number, select, color, } from '@storybook/addon-knobs' import { Picker, Emoji, emojiIndex } from '../dist' import '../css/emoji-mart.css' const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'] const CUSTOM_EMOJIS = [ { name: 'Octocat', short_names: ['octocat'], keywords: ['github'], imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7', }, { name: 'Squirrel', short_names: ['shipit', 'squirrel'], keywords: ['github'], imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7', }, ] storiesOf('Picker', module) .addDecorator(withKnobs) .add('Default', () => ( )) .add('Custom “Not found” component', () => ( (

)} /> )) .add('Custom category icons', () => ( (

), people: () => ( ), nature: () => ( ), foods: () => ( ), activity: () => (

), places: () => ( ), objects: () => ( ), symbols: () => ( ), flags: () => ( ), custom: () => ( ), }, }} /> )) .add('Custom skin emoji', () => ( )) storiesOf('Emoji', module) .addDecorator(withKnobs) .add('Default', () => ( { return emoji ? `:${emoji.short_names[0]}:` : props.emoji }} /> )) storiesOf('Headless Search', module) .addDecorator(withKnobs) .add('Default', () => { let results = emojiIndex.search(text('Search', 'christmas'), { custom: CUSTOM_EMOJIS, }) if (!results) { return null } return (

{results.map((emoji) => { return ( ) })}

) })