Issue #725 (#750)

* WIP emoji parser to new `emoji.js`.

* WIP emoji-parsing files.

* Added prettier.

* Ignored emojione.json.

* Fixed parse script.

* Added emoji.sh.

* Updated emojione.

* Added tone0.

* Fixed modifier titles.

* Removed log.

* Removed svgSprites prop, added cdn url fix.

* Added fontSize.

* Changed script to fix error in emojione.json.

* Removed statics.

* Added attribution to component.

* Added attribution to docs page.

* Added attribution to README.

* Fixed color.

* Docgen.

* Added attribution.

* Prettiered file.

.eslintignore

@@ -1,5 +1,4 @@
 dist
 *.polyfill.js
-emoji.js
 node_modules
 docs/config

.gitignore

@@ -5,3 +5,4 @@ dist
 debug
 /components
 .nyc_output
+emojione.json

README.md

@@ -4,6 +4,8 @@
 
 UI kit for chat engines with React
 
+Anchor UI uses free Emoji icons supplied by [EmojiOne](https://www.emojione.com/)
+
 ## Usage
 
 Install from npm

docs/components.json

@@ -1450,17 +1450,6 @@
       }
     ],
     "props": {
-      "svgSprites": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "Path to svg sprites",
-        "defaultValue": {
-          "value": "''",
-          "computed": false
-        }
-      },
       "sendEmoji": {
         "type": {
           "name": "func"

docs/src/components/emoji-menu.jsx

@@ -48,6 +48,13 @@ class EmojiMenuDoc extends Component {
           <h1>Description</h1>
           <p>{componentData.description}</p>
         </section>
+        <a
+          href="https://www.emojione.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          This component uses free Emoji icons supplied by EmojiOne
+        </a>
         <section>
           <h1>Usage</h1>
           <ReactMarkdown source={usage} className="markdown" />

docs/src/components/home.jsx

@@ -16,7 +16,6 @@ const Home = () => {
       marginTop: '16px'
     },
     link: {
-      color: 'inherit',
       textDecoration: 'underline',
       fontWeight: 'normal'
     }

docs/src/components/message.jsx

@@ -145,6 +145,13 @@ class MessageDoc extends Component {
           <h1>Usage</h1>
           <ReactMarkdown source={usage} className="markdown" />
         </section>
+        <a
+          href="https://www.emojione.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          This component uses free Emoji icons supplied by EmojiOne
+        </a>
         <section>
           <h1>Scaling emoji&apos;s</h1>
           <p>

docs/src/index.css

@@ -88,8 +88,8 @@ h2 {
 
 .home a,
 .doc a {
-  font-weight: bold;
-  color: #212121;
+  font-weight: bolder;
+  color: #757575;
 }
 
 h2 {

emoji.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+rm ./emojione.json
+ls ./src/emoji-menu/emoji.js
+curl https://raw.githubusercontent.com/emojione/emojione/master/emoji.json > emojione.json
+node parse-emoji.js > src/emoji-menu/emoji.js
+node_modules/.bin/prettier src/emoji-menu/emoji.js --write --single-quote
+echo Downloaded and parsed emojione.json!

package.json

@@ -15,7 +15,8 @@
     "copy": "cp -rf package.json README.md dist",
     "build": "npm run compile && npm run copy",
     "dist": "cd dist && npm publish",
-    "docs": "react-docgen components --out docs/components.json --pretty"
+    "docs": "react-docgen components --out docs/components.json --pretty",
+    "emojione": "node parse-emoji.js > src/emoji-menu/emoji.js"
   },
   "repository": {
     "type": "git",
@@ -51,6 +52,7 @@
     "eslint-plugin-react": "^6.9.0",
     "mocha": "^3.2.0",
     "nyc": "^10.1.2",
+    "prettier": "^1.4.4",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-docgen": "^2.14.0",
@@ -76,7 +78,7 @@
   "dependencies": {
     "color": "^1.0.3",
     "date-fns": "^1.27.2",
-    "emojione": "^2.2.7",
+    "emojione": "^3.0.3",
     "escape-html": "^1.0.3",
     "html-react-parser": "^0.3.4",
     "lodash": "^4.17.4",

parse-emoji.js

@@ -0,0 +1,18 @@
+const emojione = require('./emojione.json');
+const map = require('lodash/map');
+
+console.log('export default ['); // eslint-disable-line no-console
+
+map(emojione, (e) => {
+  console.log( // eslint-disable-line no-console
+    `{
+      title: '${e.shortname.replace(/:levitate:/g, ':man_in_business_suit_levitating:')}${e.diversities.length > 0 && !e.diversity ? ' tone0' : ''}',
+      name: '${e.name}',
+      shortname: '${e.shortname.replace(/:levitate:/g, ':man_in_business_suit_levitating:')}',
+      category: '${e.category}',
+      diversity: ${Boolean(e.diversities.length > 0 || e.diversity)}
+    },`
+  );
+});
+
+console.log('];'); // eslint-disable-line no-console

src/emoji-menu/emoji-modifiers.jsx

@@ -4,32 +4,47 @@ import pure from 'recompose/pure';
 import Radium, { Style } from 'radium';
 import createMarkup from './create-markup';
 import getStyles from './get-styles';
+import styles from './styles';
 
 function EmojiModifiers({ modifiers, changeTone, tone, style, modifierStyle }) {
   return (
-    <header style={getStyles.modifierHeader(style)}>
-      <div
-        onClick={() => changeTone('tone0')}
-        className="modifier"
-        style={
-          getStyles.modifier(tone === 'tone0', modifierStyle)
-        }
-      >
-        <svg width="50px" height="50px" viewBox="0 0 50 50" className="emojione">
-          <circle id="circle" fill="#FFDD67" cx="25" cy="25" r="25" />
-        </svg>
-      </div>
-      {modifiers.map(modifier => (
+    <header style={styles.modifierHeader}>
+      <div style={getStyles.modifierHeader(style)}>
         <div
+          onClick={() => changeTone('tone0')}
+          className="modifier"
           style={
-            getStyles.modifier(modifier.title === tone, modifierStyle)
+            getStyles.modifier(tone === 'tone0', modifierStyle)
           }
-          dangerouslySetInnerHTML={createMarkup(modifier.shortname)}
-          key={`emoji-${modifier.shortname}`}
-          onClick={() => changeTone(modifier.title)}
-          className="modifier"
-        />
-      ))}
+        >
+          <svg width="50px" height="50px" viewBox="0 0 50 50" className="emojione">
+            <circle id="circle" fill="#FFDD67" cx="25" cy="25" r="25" />
+          </svg>
+        </div>
+        {modifiers.map((modifier) => {
+          const title = modifier.title.replace(/:/g, '');
+
+          return (
+            <div
+              style={
+                getStyles.modifier(title === tone, modifierStyle)
+              }
+              dangerouslySetInnerHTML={createMarkup(modifier.shortname)}
+              key={`emoji-${modifier.shortname}`}
+              onClick={() => changeTone(title)}
+              className="modifier"
+            />
+          );
+        })}
+      </div>
+      <a
+        style={styles.attributionLink}
+        href="https://www.emojione.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Emoji by EmojiOne
+      </a>
       <Style
         scopeSelector=".modifier"
         rules={{