@pictogrammers/components 0.3.1

package/pg/shared/http.ts

@@ -0,0 +1,83 @@
+interface HttpResponse<T> extends Response {
+  parsedBody?: T;
+}
+
+interface Params { [key: string]: string | string[]; }
+
+const isLocal = window.location.href.match(/localhost/);
+const isGitHub = window.location.href.match(/templarian\.github\.io/);
+
+export async function get<T>(
+  request: string,
+  options: { [key: string]: Params } = {}
+): Promise<T> {
+
+  const { params = {} } = options;
+  const keys = Object.keys(params);
+  const p = `?${keys.map(k => {
+    const value = params[k];
+    if (value instanceof Array) {
+      return `${k}=${value.join(',')}`;
+    } else {
+      return `${k}=${value}`;
+    }
+  }).join('&')}`;
+  if (isLocal || isGitHub) {
+    const mock = keys.map(k => {
+      const value = params[k];
+      if (value instanceof Array) {
+        value.forEach((v, i) => {
+          if (v.match(/\w{8}-\w{4}-\w{4}-\w{4}-\w{12}/)) {
+            value[i] = v.substr(0, 3);
+          }
+        });
+        return `${k}/${value.join('-')}`;
+      } else {
+        return `${k}/${value}`;
+      }
+    }).join('/');
+    if (mock) {
+      request += `/_/${mock}`;
+    }
+    if (isGitHub) {
+      request = request.replace(/^\//, '');
+    }
+  }
+  const response: HttpResponse<T> = await fetch(
+    (isLocal || isGitHub) ? `${request}/mock.get.json` :  `${request}${p === '?' ? '' : p}`
+  );
+
+  try {
+    return response.json();
+  } catch (ex) {}
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  return Promise.reject();
+}
+
+export async function asset(
+  request: string,
+  options: { [key: string]: Params } = {}
+): Promise<string> {
+
+  const { params = {} } = options;
+  const keys = Object.keys(params);
+  const p = `?${keys.map(k => `${k}=${params[k]}`).join('&')}`;
+  const response: HttpResponse<string> = await fetch(`${request}${p === '?' ? '' : p}`);
+
+  try {
+    return response.text();
+  } catch (ex) {}
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  return Promise.reject();
+}
+
+export const http = {
+  get,
+  asset
+};

package/pg/shared/iconFilter.spec.ts

@@ -0,0 +1,61 @@
+import { iconFilter, sanitizeTerm } from './iconFilter'
+import { Icon } from './models/icon';
+
+const iconBar = { id: '1', name: 'bar', aliases: [] };
+const iconFooBar = { id: '2', name: 'foo-bar', aliases: [] };
+const iconBarHmm = { id: '3', name: 'bar-hmm', aliases: [] };
+const iconFoo = { id: '4', name: 'foo', aliases: [] };
+const iconMeh = { id: '5', name: 'meh', aliases: [{ name: 'foo' }] };
+const iconHello = { id: '6', name: 'hello', aliases: [{ name: 'world' }] };
+const icons = [
+  iconBar,
+  iconFooBar,
+  iconBarHmm,
+  iconFoo,
+  iconMeh,
+  iconHello
+] as Icon[];
+
+describe('pg-icon', () => {
+
+  it('should shift "foo" to index 0', () => {
+    const filteredIcons = iconFilter(icons, 'foo');
+    expect(filteredIcons.length).toEqual(3);
+    expect(filteredIcons[0]).toEqual(iconFoo);
+  });
+
+  it('should match on alias', () => {
+    const filteredIcons = iconFilter(icons, 'world');
+    expect(filteredIcons.length).toEqual(1);
+    expect(filteredIcons[0]).toEqual(iconHello);
+  });
+
+  it('should reorder starts with "bar"', () => {
+    const filteredIcons = iconFilter(icons, 'bar');
+    expect(filteredIcons.length).toEqual(3);
+    expect(filteredIcons[0]).toEqual(iconBar);
+    expect(filteredIcons[1]).toEqual(iconBarHmm);
+    expect(filteredIcons[2]).toEqual(iconFooBar);
+  });
+
+  it('should match none', () => {
+    const filteredIcons = iconFilter(icons, 'nothing');
+    expect(filteredIcons.length).toEqual(0);
+  });
+
+  it('should match with capital "Foo"', () => {
+    const filteredIcons = iconFilter(icons, 'Foo');
+    expect(filteredIcons.length).toEqual(3);
+  });
+
+  it('should convert diacritics "fóo"', () => {
+    const filteredIcons = iconFilter(icons, 'Fóo');
+    expect(filteredIcons.length).toEqual(3);
+  });
+
+  it('should sanitizeTerm', () => {
+    const term = sanitizeTerm('foo bar');
+    expect(term).toEqual('foo-bar');
+  });
+
+});

package/pg/shared/iconFilter.ts

@@ -0,0 +1,71 @@
+import { Icon } from "./models/icon";
+import { removeDiacritics } from "./removeDiacritics";
+import { filter } from "./filter";
+
+
+function exactMatch(icons: Icon[], term: string) {
+  for(var i = 0, c = icons.length; i < c; i++) {
+    if (icons[i].name?.toLowerCase() === term) {
+      icons.unshift(icons.splice(i, 1)[0]);
+      return icons;
+    }
+  }
+  return icons;
+}
+
+export function sanitizeTerm(term: string) {
+  return removeDiacritics(term.trim().toLowerCase()).replace(/(\w) (\w)/g, "$1-$2");
+}
+
+export function iconFilter(icons: Icon[], term: string, limit: number = 5): Icon[] {
+  term = sanitizeTerm(term);
+  const iconsByName = filter(
+    icons,
+    (icon: Icon) => {
+      return icon.name?.toLowerCase().indexOf(term) === 0;
+    },
+    limit
+  );
+  const list = Array.from(iconsByName);
+  let skip: string[] = list.map(icon => icon.id);
+  if (list.length < limit) {
+    var more = filter(
+      icons,
+      (icon) => {
+        if (skip.includes(icon.id)) {
+          return false;
+        }
+        return icon.name?.toLowerCase().indexOf(term) !== -1;
+      },
+      limit - list.length
+    );
+    var more2 = Array.from(more);
+    more2.forEach(icon => list.push(icon));
+  }
+  skip = list.map(icon => icon.id);
+  if (list.length < limit) {
+    var iconsByAliases = filter(
+      icons,
+      (icon) => {
+        if (skip.includes(icon.id)) {
+          return false;
+        }
+        for(var i = 0, c = icon.aliases.length; i < c; i++) {
+          if (icon.aliases[i].name == null) {
+            console.error(`Invalid alias in ${icon.name}`);
+            return false;
+          }
+          if (icon.aliases[i].name.indexOf(term) !== -1) {
+            icon.aliases[i].match = true;
+            return true;
+          }
+        }
+        return false;
+      },
+      limit - list.length
+    );
+    const list2 = Array.from(iconsByAliases);
+    list2.forEach(icon => list.push(icon));
+  }
+  return exactMatch(list, term);
+}

package/pg/shared/list.ts

@@ -0,0 +1,34 @@
+export function list($list: HTMLElement, items: any[], key, add, update) {
+  const elements = Array.from($list.children) as HTMLElement[];
+  const current = elements.map((e: HTMLElement) => e.dataset.key);
+  const itemKeys = items.map(x => x[key]);
+  items.forEach(item => {
+    if (current.includes(item[key])) {
+      const element = elements.find((e: HTMLElement) => e.dataset.key === current[key]);
+      if (item[key] === current[key]) {
+        update(item, element);
+        return;
+      }
+    } else {
+      const newItem = add(item);
+      if (newItem instanceof DocumentFragment) {
+        (newItem.children[0] as any).dataset.key = item[key];
+      } else {
+        newItem.dataset.key = item[key];
+      }
+      $list.appendChild(newItem);
+      return;
+    }
+  });
+  elements.forEach(element => {
+    if (!itemKeys.includes(element.dataset.key)) {
+      element.remove();
+    }
+  });
+}
+
+export function item<T>($list: HTMLElement, item: any[], key: string): T {
+  const elements = Array.from($list.children);
+  const ele = elements.find((e: HTMLElement) => e.dataset.key === item[key]);
+  return ele as any;
+}

package/pg/shared/models/alias.ts

@@ -0,0 +1,40 @@
+class FromAlias {
+  public id?: string;
+  public name?: string;
+}
+
+export class Alias {
+
+  public id: string;
+  public name: string;
+  public match: boolean = false;
+
+  constructor (
+    id?: string,
+    name?: string
+  ) {
+    if (id !== undefined) {
+      this.id = id;
+    }
+    if (name !== undefined) {
+      this.name = name;
+    }
+  }
+
+  from(alias: FromAlias): Alias {
+    if (alias.id !== undefined) {
+      this.id = alias.id;
+    }
+    if (alias.name !== undefined) {
+      this.name = alias.name;
+    }
+    return this;
+  }
+
+  to() {
+    return {
+      name: this.name
+    };
+  }
+
+}

package/pg/shared/models/font.ts

@@ -0,0 +1,31 @@
+import { FontVersion } from './fontVersion';
+
+export class Font {
+  public id: string;
+  public name: string;
+  public description: string;
+  public prefix: string;
+  public fontName: string;
+  public fileName: string;
+  public fontFamily: string;
+  public fontWeight: string;
+  public price: string;
+  public versions: FontVersion[] = [];
+  public iconCount: number;
+
+  from(font: Font): Font {
+    this.id = font.id;
+    this.name = font.name;
+    this.description = font.description;
+    this.prefix = font.prefix;
+    this.fontName = font.fontName;
+    this.fontFamily = font.fontFamily;
+    this.fontWeight = font.fontWeight;
+    this.price = font.price;
+    this.iconCount = font.iconCount;
+    if (font.versions) {
+      this.versions = font.versions.map(f => new FontVersion().from(f));
+    }
+    return this;
+  }
+}

package/pg/shared/models/fontIcon.ts

@@ -0,0 +1,25 @@
+import { FontIconVersion } from "./version";
+
+export class FontIcon {
+  public id: string;
+  public codepoint: string;
+  public font: string;
+  public version: FontIconVersion;
+
+  from(fontIcon: FontIcon): FontIcon {
+    this.id = fontIcon.id;
+    this.codepoint = fontIcon.codepoint;
+    this.font = fontIcon.font;
+    this.version = fontIcon.version;
+    return this;
+  }
+
+  to() {
+    return {
+      id: this.id,
+      codepoint: this.codepoint,
+      font: this.font,
+      version: this.version
+    }
+  }
+}

package/pg/shared/models/fontVersion.ts

@@ -0,0 +1,22 @@
+export class FontVersion {
+  public id: string;
+  public major: number;
+  public minor: number;
+  public patch: number;
+  public iconCount: number;
+  public description: string;
+  public date: Date;
+  public released: boolean;
+
+  from(font: FontVersion): FontVersion {
+    this.id = font.id;
+    this.major = font.major;
+    this.minor = font.minor;
+    this.patch = font.patch;
+    this.iconCount = font.iconCount;
+    this.description = font.description;
+    this.date = new Date(font.date);
+    this.released = font.released;
+    return this;
+  }
+}

package/pg/shared/models/icon.ts

@@ -0,0 +1,97 @@
+import { Alias } from "./alias";
+import { User } from "./user";
+import { Tag } from "./tag";
+import { Style } from "./style";
+import { FontIcon } from "./fontIcon";
+
+export class Icon {
+
+  public id: string | null = null;
+  public packageId: string | null = null
+  public baseIconId: string | null = null;
+  public name: string | null = null;
+  public description: string | null = null;
+  public data: string | null = null;
+  public user: User | null = null;
+  public version: string | null = null;
+  public aliases: Alias[] = [];
+  public tags: Tag[] = [];
+  public styles: Style[] = [];
+  public published: boolean = true;
+  public deprecated: boolean = false;
+  public codepoint: string | null = null;
+  public fontIcons: FontIcon[] = [];
+  public fontIcon: any = null;
+
+  constructor(name?: string, data?: string) {
+    this.name = name || null;
+    this.data = data || null;
+  }
+
+  from(icon: Icon): Icon {
+    this.id = icon.id;
+    this.packageId = icon.packageId;
+    this.baseIconId = icon.baseIconId;
+    this.name = icon.name;
+    this.description = icon.description;
+    this.data = icon.data;
+    if (icon.version) {
+      this.version = icon.version;
+    }
+    if (icon.fontIcon) {
+      this.fontIcon = icon.fontIcon;
+    }
+    if (icon.user) {
+      this.user = new User().from(icon.user);
+    }
+    if (icon.aliases) {
+      this.aliases = icon.aliases.map(a => new Alias().from(a));
+    }
+    if (icon.tags) {
+      this.tags = icon.tags.map(t => new Tag().from(t));
+    }
+    if (icon.styles) {
+      this.styles = icon.styles.map(s => new Style().from(s));
+    }
+    if (typeof icon.published === 'boolean') {
+      this.published = icon.published;
+    }
+    if (typeof icon.deprecated === 'boolean') {
+      this.deprecated = icon.deprecated;
+    }
+    if (icon.codepoint) {
+      this.codepoint = icon.codepoint;
+    }
+    if (icon.fontIcons) {
+      this.fontIcons = icon.fontIcons.map(t => new FontIcon().from(t));
+    }
+    return this;
+  }
+
+  to() {
+    const {
+      id,
+      name,
+      description,
+      data,
+      version,
+      fontIcon,
+      packageId,
+      baseIconId,
+      aliases,
+      tags
+    } = this;
+    return {
+      id,
+      name,
+      description,
+      data,
+      version,
+      fontIcon,
+      packageId,
+      baseIconId,
+      aliases: aliases.map(alias => alias.to()),
+      tags: tags.map(tag => tag.to())
+    }
+  }
+}

package/pg/shared/models/modification.ts

@@ -0,0 +1,45 @@
+import { Icon } from './icon';
+import { User } from './user';
+import { ModificationType } from '../enums/modificationType';
+
+export class Modification {
+
+  public id: string;
+  public modificationId: ModificationType;
+  public packageId: string;
+  public user: User;
+  public icon: Icon;
+  public iconNameBefore: string;
+  public iconNameAfter: string;
+  public iconDescriptionBefore: string;
+  public iconDescriptionAfter: string;
+  public iconDataBefore: string;
+  public iconDataAfter: string;
+  public text: string;
+  public date: Date;
+  public issue: number;
+  public isVisible: boolean;
+
+  constructor (
+  ) { }
+
+  from(modification: Modification): Modification {
+    this.id = modification.id;
+    this.modificationId = modification.modificationId;
+    this.packageId = modification.packageId;
+    this.user = new User().from(modification.user);
+    this.icon = new Icon().from(modification.icon);
+    this.iconNameBefore = modification.iconNameBefore;
+    this.iconNameAfter = modification.iconNameAfter;
+    this.iconDescriptionBefore = modification.iconDescriptionBefore;
+    this.iconDescriptionAfter = modification.iconDescriptionAfter;
+    this.iconDataBefore = modification.iconDataBefore;
+    this.iconDataAfter = modification.iconDataAfter;
+    this.text = modification.text;
+    this.date = modification.date;
+    this.issue = modification.issue;
+    this.isVisible = modification.isVisible;
+    return this;
+  }
+
+}

package/pg/shared/models/style.ts

@@ -0,0 +1,12 @@
+export class Style {
+  public id: string;
+  public name: string;
+  public count: number | null = null;
+
+  from(style: Style): Style {
+    this.id = style.id;
+    this.name = style.name;
+    this.count = style.count;
+    return this;
+  }
+}

package/pg/shared/models/tag.ts

@@ -0,0 +1,37 @@
+class FromTag {
+  public id?: string;
+  public name?: string;
+  public url?: string;
+  public count?: number;
+}
+
+export class Tag {
+  public id: string;
+  public name: string;
+  public url: string;
+  public count: number;
+
+  from(tag: FromTag): Tag {
+    if (tag.id !== undefined) {
+      this.id = tag.id;
+    }
+    if (tag.name !== undefined) {
+      this.name = tag.name;
+    }
+    if (tag.url !== undefined) {
+      this.url = tag.url;
+    }
+    if (tag.count !== undefined) {
+      this.count = tag.count;
+    }
+    return this;
+  }
+
+  to() {
+    return {
+      name: this.name,
+      url: this.url,
+      count: this.count
+    }
+  }
+}

package/pg/shared/models/user.ts

@@ -0,0 +1,35 @@
+export class User {
+
+  public id: string | null = null;
+  public github: string | null = null;
+  public twitter: string | null = null;
+  public name: string | null = null;
+  public base64: string | null = null;
+  public iconCount: number | null = null;
+  public description: string | null = null;
+  public website: string | null = null;
+  public sponsored: boolean = false;
+  public sponsorship: string = '';
+  public core: boolean = false;
+
+  from(user: User): User {
+      this.id = user.id;
+      this.github = user.github;
+      this.twitter = user.twitter;
+      this.name = user.name;
+      if (typeof user.base64 === 'string') {
+          if (user.base64.match(/^data/)) {
+              this.base64 = user.base64;
+          } else {
+              this.base64 = `data:image/png;base64,${user.base64}`;
+          }
+      }
+      this.iconCount = user.iconCount;
+      this.description = user.description;
+      this.website = user.website;
+      this.sponsored = user.sponsored;
+      this.sponsorship = `https://github.com/users/${user.github}/sponsorship`;
+      this.core = user.core;
+      return this;
+  }
+}

package/pg/shared/models/version.ts

@@ -0,0 +1,20 @@
+export class FontIconVersion {
+  public major: number;
+  public minor: number;
+  public patch: number;
+
+  from(version: FontIconVersion): FontIconVersion {
+    this.major = version.major;
+    this.minor = version.minor;
+    this.patch = version.patch;
+    return this;
+  }
+
+  to() {
+    return {
+      major: this.major,
+      minor: this.minor,
+      patch: this.patch
+    }
+  }
+}