Extract user interface into own package (OctoLinker#523)

DrawTrustDraw · Nov 16, 2018 · 2195f32 · 2195f32
1 parent 26396fb
commit 2195f32
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/packages/core/click-handler.js b/packages/core/click-handler.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import * as storage from '@octolinker/helper-settings';
-import { showTooltip, removeTooltip } from './gh-interface.js';
+import { showTooltip, removeTooltip } from '@octolinker/user-interface';
 import fetch from './utils/fetch.js';
 
 const SORRY = "I'm sorry, unable to resolve this link  😱";

diff --git a/packages/core/notification.js b/packages/core/notification.js
@@ -1,5 +1,5 @@
 import * as storage from '@octolinker/helper-settings';
-import { showNotification } from './gh-interface';
+import { showNotification } from '@octolinker/user-interface';
 
 const pkgVersion = require('./package.json')
   .version.split('.')
@@ -22,9 +22,12 @@ export default async function() {
       'https://api.github.com/repos/OctoLinker/OctoLinker/releases/latest',
     );
     const json = await response.json();
-    const description = json.body.split('\n')[0];
+    const description = (json.body && json.body.split('\n')[0]) || '';
     const url = json.html_url;
     const version = json.tag_name.replace('v', '');
-    showNotification({ description, url, version });
+
+    const body = `New in OctoLinker ${version}: <b>${description}</b> – <a href="${url}" target="_blank">Release Notes</a>`;
+
+    showNotification({ body });
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -7,9 +7,9 @@
   "main": "./index.js",
   "dependencies": {
     "@octolinker/blob-reader": "1.0.0",
+    "@octolinker/helper-insert-link": "1.0.0",
     "@octolinker/helper-settings": "1.0.0",
     "@octolinker/helper-sort-urls": "1.0.0",
-    "@octolinker/helper-insert-link": "1.0.0",
     "@octolinker/plugin-bower-manifest": "1.0.0",
     "@octolinker/plugin-composer-manifest": "1.0.0",
     "@octolinker/plugin-css": "1.0.0",
@@ -33,6 +33,7 @@
     "@octolinker/plugin-sass": "1.0.0",
     "@octolinker/plugin-typescript": "1.0.0",
     "@octolinker/plugin-vim": "1.0.0",
+    "@octolinker/user-interface": "1.0.0",
     "github-injection": "^1.0.1",
     "jquery": "^3.2.1"
   }

diff --git a/packages/core/gh-interface.js → packages/user-interface/index.js b/packages/core/gh-interface.js → packages/user-interface/index.js
@@ -1,30 +1,29 @@
-import $ from 'jquery';
+export const showNotification = ({ body }) => {
+  const el = document.createElement('div');
+  el.innerHTML = `<div class="flash flash-full">
+    <div class="container">
+      <button class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
+        <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
+      </button>
+      ${body}
+    </div>
+  </div>`;
 
-export function showTooltip($target, msg) {
+  document.getElementById('js-flash-container').append(el);
+};
+
+export const showTooltip = ($target, msg) => {
   if (!$target.hasClass('tooltipped')) {
     $target.addClass('tooltipped tooltipped-e tooltipped-no-delay');
   }
 
   $target.attr('aria-label', msg);
-}
+};
 
-export function removeTooltip($target) {
+export const removeTooltip = $target => {
   if ($target.hasClass('tooltipped')) {
     $target.removeClass('tooltipped tooltipped-e');
   }
 
   $target.removeAttr('aria-label');
-}
-
-export function showNotification({ description, version, url }) {
-  const html = `<div class="flash flash-full">
-    <div class="container">
-      <button class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
-        <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
-      </button>
-      New in OctoLinker ${version}: <b>${description}</b> – <a href="${url}" target="_blank">Release Notes</a>
-    </div>
-  </div>`;
-
-  $('#js-flash-container').append(html);
-}
+};
diff --git a/packages/user-interface/package.json b/packages/user-interface/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@octolinker/user-interface",
+  "version": "1.0.0",
+  "description": "",
+  "repository": "https://github.com/octolinker/octolinker/tree/master/packages/user-interface",
+  "license": "MIT",
+  "main": "./index.js"
+}