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, NimbleEmojiIndex, getEmojiDataFromNative, } from '../dist' import data from '../data/all.json' import '../css/emoji-mart.css' const SETS = ['apple', 'google', 'twitter', 'facebook'] const CUSTOM_EMOJIS = [ { name: 'Octocat', short_names: ['octocat'], keywords: ['github'], imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png', }, { name: 'Squirrel', short_names: ['shipit', 'squirrel'], keywords: ['github'], imageUrl: 'https://github.githubassets.com/images/icons/emoji/shipit.png', }, ] const CUSTOM_EMOJIS_WITH_CATEGORIES = CUSTOM_EMOJIS.map((emoji) => { return Object.assign({}, emoji, { customCategory: emoji.name === 'Squirrel' ? 'Mammals' : 'Mollusks', }) }) storiesOf('Picker', module) .addDecorator(withKnobs) .add('Default', () => ( )) .add('Custom “Not found” component', () => ( (

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

), people: () => ( ), 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 ( ) })}

) }) .add('With skin tone from store', () => { const nimbleEmojiIndex = new NimbleEmojiIndex(data) let results = nimbleEmojiIndex.search(text('Search', 'thumbs'), { custom: CUSTOM_EMOJIS, }) if (!results) { return null } return (

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

) }) storiesOf('Get emoji data from Native', module) .addDecorator(withKnobs) .add('Default', () => { const emojiData = getEmojiDataFromNative( text('Unicode', '🏋🏿‍♂️'), select('Emoji pack', SETS, SETS[0]), data, ) if (!emojiData) { return

Couldn`t find any emoji data from native...

} return (

emojiData: {JSON.stringify(emojiData, null, 2)}

) })