Move picker to packages

Author: joeattardi

package.json

@@ -1,12 +1,16 @@
 {
   "name": "picmo",
+  "private": true,
   "version": "5.0.0-beta.3",
   "description": "JavaScript emoji picker - any app, any framework.",
   "keywords": [
     "emoji",
     "emoji picker",
     "javascript"
   ],
+  "workspaces": [
+    "./projects/*"
+  ],
   "main": "dist/index.js",
   "scripts": {
     "build": "npm run check && rollup -c",

packages/picmo/jest-setup.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom';
+
+global.afterEach(() => {
+  document.body.replaceChildren();
+});

packages/picmo/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.scss$': 'identity-obj-proxy'
+  },
+  transform: {
+    '\\.{jt}s$': 'ts-jest',
+    '\\.svg$': 'jest-raw-loader'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts']
+};

packages/picmo/package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "picmo",
+  "version": "5.0.0-beta.3",
+  "description": "JavaScript emoji picker. any app, any framework.",
+  "keywords": [
+    "emoji",
+    "emoji picker",
+    "javascript"
+  ],
+  "main": "index.js",
+  "scripts": {
+    "update-scss-types": "typed-scss-modules src",
+    "lint": "eslint src/*.ts",
+    "test": "jest --coverage src",
+    "test:watch": "jest --watch src"
+  },
+  "author": "Joe Attardi <[email protected]> (https://joeattardi.dev)",
+  "repository": "joeattardi/picmo",
+  "homepage": "https://picmojs.com",
+  "bugs": "https://github.com/joeattardi/picmo/issues",
+  "funding": "https://github.com/sponsors/joeattardi",
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "emojibase": "^6.1.0",
+    "tslib": "^2.4.0",
+    "twemoji": "^14.0.2"
+  }
+}

packages/picmo/package.json

@@ -0,0 +1,55 @@
+import typescript from '@rollup/plugin-typescript';
+import { string } from 'rollup-plugin-string';
+import postcss from 'rollup-plugin-postcss';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import { terser } from 'rollup-plugin-terser';
+
+const bundles = [
+  {
+    input: 'src/umd/picmo.ts',
+    output: {
+      sourcemap: true,
+      file: 'dist/umd/picmo.js',
+      format: 'umd',
+      name: 'picmo'
+    }
+  },
+  {
+    input: 'src/umd/picmo.twemoji.ts',
+    output: {
+      sourcemap: true,
+      file: 'dist/umd/picmo.twemoji.js',
+      format: 'umd',
+      name: 'TwemojiRenderer'
+    }
+  },
+  {
+    input: {
+      'index': './src/index.ts',
+      'renderers/native': './src/renderers/native.ts',
+      'renderers/twemoji': './src/renderers/twemoji.ts',
+      'themes': './src/themes.ts',
+      'i18n/en': './src/i18n/lang-en.ts'
+    },
+    output: {
+      dir: 'dist',
+      format: 'es'
+    }
+  }
+];
+
+export default bundles.map(bundle => ({
+  ...bundle,
+  plugins: [
+    replace({ 
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      preventAssignment: true
+    }),
+    nodeResolve(),
+    string({ include: ['**/*.svg']}),
+    typescript(),
+    postcss({ modules: true }),
+    terser()
+  ]
+}));

packages/picmo/rollup.config.js

@@ -1,6 +1,3 @@
-import { Image } from './views/Image';
-import { View } from './views/view';
-
 type Callback = () => void;
 
 export class LazyLoader {

src/AppEvents.ts packages/picmo/src/AppEvents.ts

@@ -0,0 +1,6 @@
+.twemoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}

src/ExternalEvents.ts packages/picmo/src/ExternalEvents.ts

@@ -0,0 +1 @@
+export const twemoji: string;

src/LazyLoader.ts packages/picmo/src/LazyLoader.ts

@@ -0,0 +1,65 @@
+import twemoji from 'twemoji';
+
+import { EmojiRecord, EmojiSelection } from '../types';
+import { Renderer } from './renderer';
+
+import classes from './twemoji.scss';
+
+type TwemojiCallbackOptions = {
+  base: string;
+  size: string;
+  ext: string;
+};
+
+type TwemojiOptions = {
+  ext: string;
+  folder: string;
+}
+
+type TwemojiImageFormat = 'svg' | 'png';
+
+const formatOptions: Record<TwemojiImageFormat, TwemojiOptions> = {
+  png: {
+    ext: '.png',
+    folder: '72x72'
+  },
+  svg: {
+    ext: '.svg',
+    folder: 'svg'
+  }
+}
+
+function getTwemojiUrl(record: EmojiRecord, options: TwemojiOptions): Promise<string> {
+  return new Promise(resolve => {
+    twemoji.parse(record.emoji, {
+      ...options,
+      callback: (icon, options) => {
+        const { base, size, ext } = options as TwemojiCallbackOptions;
+        const url = `${base}${size}/${icon}${ext}`;
+        resolve(url);
+        return url;
+      }
+    });
+  });
+}
+
+/**
+ * Renders emojis using Twemoji images.
+ */
+export class TwemojiRenderer extends Renderer {
+  private options: TwemojiOptions;
+
+  constructor(format: TwemojiImageFormat = 'svg') {
+    super();
+    this.options = formatOptions[format];
+  }
+
+  render(record: EmojiRecord, classNames = classes.twemoji) {
+    return this.renderImage(classNames, () => getTwemojiUrl(record, this.options));
+  }
+
+  async emit(record: EmojiRecord): Promise<EmojiSelection> {
+    const url = await getTwemojiUrl(record, this.options);
+    return { url, hexcode: record.hexcode,emoji: record.emoji, label: record.label };
+  }
+}

src/Template.ts packages/picmo/src/Template.ts

@@ -1,5 +1,4 @@
 export const categoryButton: string;
-export const categoryButtonActive: string;
 export const categoryButtons: string;
 export const categoryTab: string;
 export const categoryTabActive: string;

src/__tests__/events.test.ts packages/picmo/src/__tests__/events.test.ts

@@ -4,4 +4,3 @@ export const notFound: string;
 export const searchAccessory: string;
 export const searchContainer: string;
 export const searchField: string;
-export const searchResults: string;