Add react-storybook

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require('path')
+const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
+
+module.exports = (baseConfig, env) => {
+  const config = genDefaultConfig(baseConfig, env);
+
+  config.module.rules = [
+    {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      include: [
+        path.resolve(__dirname, '../stories'),
+        path.resolve(__dirname, '../src'),
+        path.resolve(__dirname, '../node_modules/measure-scrollbar'),
+        path.resolve(__dirname, '../data'),
+      ],
+    },
+    {
+      test: /\.svg$/,
+      loaders: ['babel-loader?presets[]=react', 'svg-jsx-loader?es6=true'],
+      include: [
+        path.resolve(__dirname, '../src/svgs'),
+      ],
+    },
+    {
+      test: /\.css$/,
+      use: [ 'style-loader', 'css-loader' ],
+      include: [
+        path.resolve(__dirname, '../css'),
+      ],
+    },
+  ];
+
+  config.devtool.sourcemaps = {
+    enabled: false,
+  };
+
+  return config;
+};

package.json

@@ -25,6 +25,10 @@
     "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.2.11",
+    "@storybook/addon-knobs": "^3.2.10",
+    "@storybook/addon-links": "^3.2.10",
+    "@storybook/react": "^3.2.11",
     "babel-cli": "^6.26.0",
     "babel-core": "6.7.2",
     "babel-loader": "^7.1.2",
@@ -69,7 +73,9 @@
     "react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev",
     "react:15": "npm run react:clean && npm i react@^15 react-dom@^15 react-addons-test-utils@^15 --save-dev",
     "test": "NODE_ENV=test karma start && size-limit",
-    "prepublish": "npm run clean && npm run build"
+    "prepublish": "npm run clean && npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "size-limit": [
     {

stories/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+
+import { Picker, Emoji } from '../src';
+import '../css/emoji-mart.css';
+
+storiesOf('Picker', module)
+  .addDecorator(withKnobs)
+  .add('default', () => (
+    <Picker
+      onClick={action('clicked')}
+      set={text('Emoji pack', 'twitter')}
+      emojiSize={number('Emoji size', 24)}
+      perLine={number('Per line', 9)}
+      native={boolean('Unicode', false)}
+      title={text('Idle text', 'Your Title Here')}
+      emoji={text('Idle emoji', 'department_store')}
+      skin={number('Skin tone', 1)}
+      color={text('Highlight color', '#ae65c5')}
+    />
+  ));
+
+storiesOf('Emoji', module)
+  .addDecorator(withKnobs)
+  .add('default', () => (
+    <Emoji
+      set={text('Emoji pack', 'twitter')}
+      emoji={text('Emoji', '+1')}
+      size={number('Emoji size', 64)}
+      skin={number('Skin tone', 1)}
+      native={boolean('Unicode', false)}
+    />
+  ));