Merge branch 'release/0.5.0'

package.json

@@ -1,11 +1,11 @@
 {
   "name": "emoji-keyboard",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server --config webpack.development.config.js --progress --colors",
-    "prod": "webpack --config webpack.production.config.js --progress --colors",
+    "dev": "webpack-dev-server --config webpack.development.config.js --progress --colors --define process.env.NODE_ENV='development'",
+    "prod": "webpack --config webpack.production.config.js --colors --define process.env.NODE_ENV='production'",
     "lint": "tslint *.{ts,tsx}",
     "test": "echo \"Warning: no test specified\""
   },
@@ -14,15 +14,19 @@
     "test"
   ],
   "author": "eivindh",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eivhyl/emoji-keyboard.git"
+  },
   "license": "MIT",
   "dependencies": {
-    "@types/copy-text-to-clipboard": "^1.0.0",
     "copy-text-to-clipboard": "^1.0.4",
     "normalize.css": "^7.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
+    "@types/copy-text-to-clipboard": "^1.0.0",
     "@types/node": "^8.0.0",
     "@types/react": "^16.0.35",
     "@types/react-dom": "^16.0.3",
@@ -33,9 +37,11 @@
     "html-webpack-plugin": "2.30.1",
     "pre-commit": "^1.2.2",
     "react-hot-loader": "^4.0.0-beta.18",
+    "react-svg-loader": "^2.1.0",
     "style-loader": "^0.20.1",
     "tslint": "^5.6.0",
     "typescript": "^2.6.2",
+    "uglifyjs-webpack-plugin": "^1.1.8",
     "webpack": "^3.10.0",
     "webpack-dev-server": "2.11.1"
   }

src/components/App.tsx

@@ -59,7 +59,7 @@ class App extends React.Component<{}, State> {
 			.map(e => e.category)
 			.filter((value, index, self) => self.indexOf(value) === index)
 		return (
-			<div id="app">
+			<>
 				<main>
 					<h1 className="title">Emoji Keyboard <small>(Click to copy)</small></h1>
 					<div>
@@ -95,7 +95,7 @@ class App extends React.Component<{}, State> {
 					))}
 				</main>
 				<Footer/>
-			</div>
+			</>
 		)
 	}
 }

src/components/Emoji.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Emoji } from '../types'
+import Tooltip from './Tooltip'
 
 import '../styles/emoji.css'
 
@@ -29,24 +30,12 @@ class EmojiButton extends React.Component<Props, State> {
 					{emoji.emoji}
 				</button>
 				{hover && (
-					<ul className="tooltip">
-						<li>
-							<strong>Category: </strong><span>{emoji.category}</span>
-						</li>
-						<li>
-							<strong>Description: </strong><span>{emoji.description}</span>
-						</li>
-						{emoji.aliases.length > 0 &&
-						<li>
-							<strong>Also known as: </strong><span>{emoji.aliases.join(', ')}</span>
-						</li>
-						}
-						{emoji.tags.length > 0 &&
-						<li>
-							<strong>Tags: </strong><span>{emoji.tags.join(', ')}</span>
-						</li>
-						}
-					</ul>
+					<Tooltip values={[
+						['Description', emoji.description],
+						['Category', emoji.category],
+						['Also known as', emoji.aliases.join(', '), emoji.aliases.length > 0],
+						['Tags', emoji.tags.join(', '), emoji.tags.length > 0]
+					]} />
 				)}
 			</div>
 		)

src/components/Footer.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react'
 
+const GitHub = require('../../static/GitHub-Mark.svg').default as React.ComponentClass<React.SVGProps<SVGSVGElement>>
+
 const Navbar: React.StatelessComponent = (props) =>  (
 	<footer>
 		<span>{process.env.PACKAGE_NAME} v{process.env.PACKAGE_VERSION}</span>
+		<a href={process.env.REPO_URL}>
+			<GitHub width={32} height={32}/>
+		</a>
 	</footer>
 )
 

src/components/Tooltip.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Triple, Tuple } from '../types'
+
+type Props = {
+	values: Array<Tuple<string, string> | Triple<string, string, boolean>>
+}
+
+const Tooltip: React.StatelessComponent<Props> = ({ values }) => (
+	<ul className="tooltip">
+		{values.map(triplet => triplet[2] !== false
+			? (
+				<li key={triplet[0]}>
+					<strong>{triplet[0]}: </strong>
+					<span>{triplet[1]}</span>
+				</li>
+			)
+			: (
+				null
+			)
+		)}
+	</ul>
+)
+
+export default Tooltip

src/index.tsx

@@ -8,5 +8,5 @@ import './styles/site.css'
 
 ReactDOM.render(
 	<App />,
-	document.getElementById('root')
+	document.getElementById('app')
 )

src/styles/app.css

@@ -17,7 +17,7 @@ input {
 	flex-flow: row wrap;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 832px) {
     .emojis:not(.favorites) {
 		justify-content: space-between;
 	}

src/styles/emoji.css

@@ -8,7 +8,7 @@
 }
 
 .emoji:hover {
-	background-color:#D3D3D3;
+	background-color: gainsboro;
 }
 
 .emojicontainer {
@@ -26,5 +26,4 @@
 	background-color: white;
 	border: 2px solid gainsboro;
 	border-radius: 0.5rem;
-
 }

src/styles/site.css

@@ -2,7 +2,7 @@
     box-sizing: border-box;
 }
 
-html, body, #root {
+html, body {
 	font-family: sans-serif;
     height: 100%;
     background-color: var(--background);
@@ -15,6 +15,7 @@ html {
 
 #app {
     display: grid;
+    padding: 1rem;
     width: 100%;
     height: 100%;
     grid-template-areas: "left main   right"
@@ -24,10 +25,9 @@ html {
     grid-template-columns: auto 800px auto;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 832px) {
     #app {
         grid-template-columns: 0 100% 0;
-        padding: 1rem;
     }
 }
 
@@ -36,6 +36,10 @@ main {
 }
 
 footer {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
     padding-top: 1rem;
     grid-area: footer;
 }

src/types.ts

@@ -14,3 +14,7 @@ export type Favorite = Emoji & { used: number }
 export type Save = {
 	favorites: { [key: number]: Favorite | undefined }
 }
+
+export type Tuple<T1, T2> = [T1, T2]
+export type Triple<T1, T2, T3> = [T1, T2, T3]
+

templates/index.ejs

@@ -6,6 +6,6 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="app"></div>
   </body>
 </html>

webpack.config.js

@@ -26,6 +26,10 @@ module.exports = {
 				loader: 'awesome-typescript-loader',
 				exclude: ['node_modules'],
             },
+            {
+                test: /\.svg$/,
+                loaders: ['react-svg-loader']
+            }
         ],
     },
 
@@ -40,9 +44,9 @@ module.exports = {
 		}),
 		new webpack.NamedModulesPlugin(),
         new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
             'process.env.PACKAGE_NAME': JSON.stringify(packageJSON.name),
-            'process.env.PACKAGE_VERSION': JSON.stringify(packageJSON.version)
+            'process.env.PACKAGE_VERSION': JSON.stringify(packageJSON.version),
+            'process.env.REPO_URL': JSON.stringify(packageJSON.repository.url)
         }),
     ]
 };

webpack.development.config.js

@@ -10,7 +10,7 @@ module.exports = Object.assign(CONFIG, {
         publicPath: `http://localhost:${port}/`,
     }),
 
-    devtool: 'eval-source-map',
+    devtool: 'inline-source-map',
 
     devServer: {
         historyApiFallback: true,

webpack.production.config.js

@@ -2,6 +2,7 @@
 
 const CONFIG = require('./webpack.config');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = Object.assign(CONFIG, {
     devtool: 'source-map',
@@ -30,6 +31,9 @@ module.exports = Object.assign(CONFIG, {
 
     plugins: [
         new ExtractTextPlugin('styles.css'),
+        new UglifyJsPlugin({
+            sourceMap: true
+        }),
         ...CONFIG.plugins
 	]
 });