feat: v3 (#312)

BREAKING CHANGE: upgrade to emoji-datasource v5 with emoji [12.1](https://emojipedia.org/emoji-12.1/) BREAKING CHANGE: uses spans instead of buttons by default BREAKING CHANGE: messenger no longer available use facebook, they have merged. BREAKING CHANGE: emojione no longer available, removed on the upstream emoji datasource BREAKING CHANGE: frequently used no longer sort on click use `enableFrequentEmojiSort` to re-enable
scttcper · Mar 17, 2020 · 2f0480f · 2f0480f
1 parent f1061da
commit 2f0480f
Show file tree

Hide file tree

Showing 19 changed files with 17,893 additions and 15,037 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "useTabs": false
+}
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ts-node -O '{ \"module\": \"commonjs\" }' build.ts",
-    "build-data": "ts-node -O '{ \"module\": \"commonjs\" }' scripts/build-data.ts",
+    "build-data": "ts-node --project=scripts/tsconfig.json scripts/build-data.ts",
     "test": "ng test --watch=false --browsers=ChromeCI",
     "test:watch": "ng test --browsers=ChromeCI",
     "test:ci": "ng test --watch=false --code-coverage --no-progress --browsers=ChromeCI",
@@ -18,32 +18,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "9.0.1",
-    "@angular/compiler": "9.0.1",
-    "@angular/core": "9.0.1",
-    "@angular/forms": "9.0.1",
-    "@angular/platform-browser": "9.0.1",
-    "@angular/platform-browser-dynamic": "9.0.1",
+    "@angular/common": "9.0.6",
+    "@angular/compiler": "9.0.6",
+    "@angular/core": "9.0.6",
+    "@angular/forms": "9.0.6",
+    "@angular/platform-browser": "9.0.6",
+    "@angular/platform-browser-dynamic": "9.0.6",
     "@ctrl/ngx-github-buttons": "4.0.0",
     "bootstrap": "4.4.1",
     "core-js": "3.6.4",
     "rxjs": "6.5.4",
-    "tslib": "1.10.0",
+    "tslib": "1.11.1",
     "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.900.4",
-    "@angular/cli": "9.0.4",
-    "@angular/compiler-cli": "9.0.1",
-    "@angular/language-service": "9.0.1",
+    "@angular-devkit/build-angular": "0.900.6",
+    "@angular/cli": "9.0.6",
+    "@angular/compiler-cli": "9.0.6",
+    "@angular/language-service": "9.0.6",
     "@types/fs-extra": "8.1.0",
     "@types/inflection": "1.5.28",
-    "@types/jasmine": "3.5.7",
-    "@types/node": "13.7.2",
+    "@types/jasmine": "3.5.9",
+    "@types/node": "13.9.1",
     "@types/stringify-object": "3.2.0",
     "codelyzer": "5.2.1",
     "del": "5.1.0",
-    "emoji-datasource": "4.0.4",
+    "emoji-datasource": "5.0.1",
     "emojilib": "2.4.0",
     "fs-extra": "8.1.0",
     "inflection": "1.12.0",
@@ -54,11 +54,11 @@
     "karma-jasmine": "3.1.1",
     "karma-jasmine-html-reporter": "1.5.2",
     "karma-mocha-reporter": "2.2.5",
-    "ng-packagr": "9.0.1",
+    "ng-packagr": "9.0.3",
     "semantic-release": "17.0.4",
     "stringify-object": "3.3.0",
     "ts-node": "8.6.2",
-    "tslint": "6.0.0",
+    "tslint": "6.1.0",
     "typescript": "3.7.5"
   },
   "repository": "TypeCtrl/ngx-emoji-mart",

diff --git a/scripts/build-data.ts b/scripts/build-data.ts
@@ -1,43 +1,44 @@
-const emojiData = require('emoji-datasource');
-const emojiLib = require('emojilib');
-import * as fs from 'fs';
-import * as inflection from 'inflection';
-import * as stringifyObject from 'stringify-object';
+import emojiDataRaw from 'emoji-datasource/emoji.json';
+import fs from 'fs';
+import path from 'path';
+import inflection from 'inflection';
+import stringifyObject from 'stringify-object';
+
+import { EmojiData } from './emoji';
 
+const emojiLib = require('emojilib');
+// cast types to emojiData
+// @ts-ignore
+const emojiData: EmojiData[] = emojiDataRaw;
 const categories: any[] = [];
 const emojis: any[] = [];
 const skins: any[] = [];
 const categoriesIndex: any = {};
 
 const catPairs = [
-  ['Smileys & People', 'people'],
+  ['Smileys & Emotion', 'smileys'],
+  ['People & Body', 'people'],
   ['Animals & Nature', 'nature'],
   ['Food & Drink', 'foods'],
   ['Activities', 'activity'],
   ['Travel & Places', 'places'],
   ['Objects', 'objects'],
   ['Symbols', 'symbols'],
-  ['Flags', 'flags'],
-];
-const sets = [
-  'apple',
-  'google',
-  'twitter',
-  'emojione',
-  'facebook',
-  'messenger',
+  ['Flags', 'flags']
 ];
+const sets = ['apple', 'google', 'twitter', 'facebook'];
 
 catPairs.forEach((category, i) => {
   const [name, id] = category;
-  categories[i] = { id: id, name: name, emojis: [] };
+  categories[i] = { id, name, emojis: [] };
   categoriesIndex[name] = i;
 });
 
-emojiData.sort((a: any, b: any) => {
-  const aTest = a.sort_order || a.short_name,
-    bTest = b.sort_order || b.short_name;
+emojiData.sort((a, b) => {
+  const aTest = a.sort_order || a.short_name;
+  const bTest = b.sort_order || b.short_name;
 
+  // @ts-ignore
   return aTest - bTest;
 });
 
@@ -63,7 +64,7 @@ function setupSheet(datum: any) {
 
 emojiData.forEach((datum: any) => {
   const category = datum.category;
-  let categoryIndex;
+  let categoryIndex: number;
 
   if (!datum.category) {
     throw new Error(`"${datum.short_name}" doesn’t have a category`);
@@ -92,8 +93,6 @@ emojiData.forEach((datum: any) => {
     datum.keywords = emojiLib.lib[datum.short_name].keywords;
   }
 
-
-
   if (datum.category === 'Skin Tones') {
     skins.push(datum);
   } else {
@@ -105,7 +104,7 @@ emojiData.forEach((datum: any) => {
 
   missingSets(datum);
   if (datum.skin_variations) {
-    datum.skinVariations = Object.keys(datum.skin_variations).map((key) => {
+    datum.skinVariations = Object.keys(datum.skin_variations).map(key => {
       const variation = datum.skin_variations[key];
       setupSheet(variation);
       missingSets(variation);
@@ -126,7 +125,9 @@ emojiData.forEach((datum: any) => {
     delete datum.skin_variations;
   }
 
-  datum.shortNames = datum.short_names.filter((i: any) => i !== datum.short_name);
+  datum.shortNames = datum.short_names.filter(
+    (i: any) => i !== datum.short_name
+  );
   delete datum.short_names;
 
   // renaming
@@ -137,7 +138,6 @@ emojiData.forEach((datum: any) => {
   }
   delete datum.obsoleted_by;
 
-
   if (datum.text === '') {
     delete datum.text;
   }
@@ -163,7 +163,7 @@ emojiData.forEach((datum: any) => {
   emojis.push(datum);
 });
 
-const flags = categories[categoriesIndex['Flags']];
+const flags = categories[categoriesIndex.Flags];
 flags.emojis = flags.emojis
   .filter((flag: any) => {
     // Until browsers support Flag UN
@@ -174,35 +174,57 @@ flags.emojis = flags.emojis
   })
   .sort();
 
+// Merge “Smileys & Emotion” and “People & Body” into a single category
+const smileys = categories[0];
+const people = categories[1];
+const smileysAndPeople = {
+  id: 'people',
+  name: 'Smileys & People',
+  emojis: [
+    ...smileys.emojis.slice(0, 114),
+    ...people.emojis,
+    ...smileys.emojis.slice(114)
+  ]
+};
+
+categories.unshift(smileysAndPeople);
+categories.splice(1, 2);
+
 const sEmojis = stringifyObject(emojis, {
   inlineCharacterLimit: 25,
-  indent: '  ',
+  indent: '  '
 });
 let doc = `import { CompressedEmojiData } from './data.interfaces';
 export const emojis: CompressedEmojiData[] = ${sEmojis};
 `;
-fs.writeFileSync('./src/lib/emoji/data/emojis.ts', doc);
-
+fs.writeFileSync(
+  path.join(__dirname, '../src/lib/picker/ngx-emoji/data/emojis.ts'),
+  doc
+);
 
 const sCategories = stringifyObject(categories, {
   inlineCharacterLimit: 25,
-  indent: '  ',
+  indent: '  '
 });
 doc = `import { EmojiCategory } from './data.interfaces';
 export const categories: EmojiCategory[] = ${sCategories};
 `;
-fs.writeFileSync('./src/lib/emoji/data/categories.ts', doc);
-
+fs.writeFileSync(
+  path.join(__dirname, '../src/lib/picker/ngx-emoji/data/categories.ts'),
+  doc
+);
 
 const sSkins = stringifyObject(skins, {
   inlineCharacterLimit: 25,
-  indent: '  ',
+  indent: '  '
 });
 doc = `import { SkinData } from './data.interfaces';
 export const skins: SkinData[] = ${sSkins};
 `;
-fs.writeFileSync('./src/lib/emoji/data/skins.ts', doc);
-
+fs.writeFileSync(
+  path.join(__dirname, '../src/lib/picker/ngx-emoji/data/skins.ts'),
+  doc
+);
 
 // const sShortNames = stringifyObject(short_names, {
 //   inlineCharacterLimit: 25,

diff --git a/scripts/emoji.ts b/scripts/emoji.ts
@@ -0,0 +1,54 @@
+export interface EmojiData {
+  name: null | string;
+  unified: string;
+  non_qualified: null | string;
+  docomo: null | string;
+  au: null | string;
+  softbank: null | string;
+  google: null | string;
+  image: string;
+  sheet_x: number;
+  sheet_y: number;
+  short_name: string;
+  short_names: string[];
+  text: null | string;
+  texts: string[] | null;
+  category: Category;
+  sort_order: number;
+  added_in: string;
+  has_img_apple: boolean;
+  has_img_google: boolean;
+  has_img_twitter: boolean;
+  has_img_facebook: boolean;
+  skin_variations?: { [key: string]: SkinVariation };
+  obsoletes?: string;
+  obsoleted_by?: string;
+}
+
+export enum Category {
+  Activities = 'Activities',
+  AnimalsNature = 'Animals & Nature',
+  Flags = 'Flags',
+  FoodDrink = 'Food & Drink',
+  Objects = 'Objects',
+  PeopleBody = 'People & Body',
+  SkinTones = 'Skin Tones',
+  SmileysEmotion = 'Smileys & Emotion',
+  Symbols = 'Symbols',
+  TravelPlaces = 'Travel & Places'
+}
+
+export interface SkinVariation {
+  unified: string;
+  non_qualified: null | string;
+  image: string;
+  sheet_x: number;
+  sheet_y: number;
+  added_in: string;
+  has_img_apple: boolean;
+  has_img_google: boolean;
+  has_img_twitter: boolean;
+  has_img_facebook: boolean;
+  obsoletes?: string;
+  obsoleted_by?: string;
+}
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "lib": ["es2018"],
+    "target": "es2018",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "outDir": "dist"
+  },
+  "include": ["./emoji.ts", "./build-data.ts"]
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,25 +12,13 @@ const CUSTOM_EMOJIS = [
     name: 'Octocat',
     shortNames: ['octocat'],
     keywords: ['github'],
-    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7',
+    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
   },
   {
     name: 'Squirrel',
     shortNames: ['shipit', 'squirrel'],
     keywords: ['github'],
-    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7',
-  },
-  {
-    name: 'Test Flag',
-    shortNames: ['test'],
-    keywords: ['test', 'flag'],
-    spriteUrl:
-      'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
-    sheet_x: 1,
-    sheet_y: 1,
-    size: 64,
-    sheetColumns: 52,
-    sheetRows: 52,
+    imageUrl: 'https://github.githubassets.com/images/icons/emoji/shipit.png',
   },
 ];
 
@@ -44,9 +32,6 @@ export class AppComponent {
     'native',
     'apple',
     'google',
-    'twitter',
-    'emojione',
-    'messenger',
     'facebook',
   ];
   darkMode: undefined | boolean = !!(

diff --git a/src/lib/picker/category.component.ts b/src/lib/picker/category.component.ts
@@ -60,6 +60,7 @@ import { EmojiFrequentlyService } from './emoji-frequently.service';
           [forceSize]="emojiForceSize"
           [tooltip]="emojiTooltip"
           [backgroundImageFn]="emojiBackgroundImageFn"
+          [useButton]="emojiUseButton"
         ></ngx-emoji>
       </div>
 
@@ -93,6 +94,7 @@ export class CategoryComponent implements OnInit {
   @Input() emojiForceSize?: Emoji['forceSize'];
   @Input() emojiTooltip?: Emoji['tooltip'];
   @Input() emojiBackgroundImageFn?: Emoji['backgroundImageFn'];
+  @Input() emojiUseButton: boolean;
   @Output() emojiOver: Emoji['emojiOver'] = new EventEmitter();
   @Output() emojiLeave: Emoji['emojiLeave'] = new EventEmitter();
   @Output() emojiClick: Emoji['emojiClick'] = new EventEmitter();
@@ -160,6 +162,7 @@ export class CategoryComponent implements OnInit {
 
   getEmojis() {
     if (this.name === 'Recent') {
+      console.log('fuuuuu')
       let frequentlyUsed = this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);
       if (!frequentlyUsed || !frequentlyUsed.length) {
         frequentlyUsed = this.frequently.get(this.perLine, this.totalFrequentLines);