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: () => ( Reddit icon ), people: () => ( Reddit icon ), nature: () => ( ), foods: () => ( Jira icon ), activity: () => ( ), places: () => ( Stack Overflow icon ), objects: () => ( Atlassian icon ), symbols: () => ( HipChat icon ), flags: () => ( ), custom: () => ( Trello icon ), }, }} /> )) .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)}
) })