@operato/font 1.0.0-alpha.15

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+
+### :rocket: New Features
+
+* migrate input, property-editor from things-factory ([dbd5e73](https://github.com/hatiolab/operato/commit/dbd5e73eac328e72c4bb7abd113a819532bc894d))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Hatiolab Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@operato/font",
+  "description": "User interface to select font and create font.",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "1.0.0-alpha.15",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./font-selector": "./src/font-selector.js",
+    "./ox-font-selector": "./src/ox-font-selector.js",
+    "./ox-property-editor-font-selector": "./src/ox-property-editor-font-selector.js"
+  },
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/operato.git",
+    "directory": "webcomponents/font"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@material/mwc-icon": "^0.25.3",
+    "@operato/attachment": "^1.0.0-alpha.15",
+    "@operato/headroom": "^1.0.0-alpha.15",
+    "@operato/i18n": "^1.0.0-alpha.15",
+    "@operato/layout": "^1.0.0-alpha.15",
+    "@operato/property-editor": "^1.0.0-alpha.15",
+    "@operato/shell": "^1.0.0-alpha.15",
+    "@operato/utils": "^1.0.0-alpha.15",
+    "uuid": "^3.4.0"
+  },
+  "gitHead": "2f2d8a3d320ccce220e0c5edeb92d287f4b38af9"
+}

package/src/font-creation-card.js

@@ -0,0 +1,311 @@
+import "@operato/attachment";
+
+import { LitElement, css, html } from "lit";
+import { i18next, localize } from "@operato/i18n";
+
+import { FileDropHelper } from "@operato/utils";
+
+export class FontCreationCard extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      provider: {
+        type: String,
+      },
+      googleFonts: {
+        type: Array,
+      },
+      _files: {
+        type: Array,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.provider = "google";
+    this.providers = [
+      { value: "google", display: "Google" },
+      // TODO 구글 외 폰트 서비스 구현
+      // { value: 'typekit', display: 'Typekit' },
+      { value: "custom", display: "Custom" },
+    ];
+    this.googleFonts = [];
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+
+          padding: 0;
+          margin: 0;
+          height: 100%;
+
+          -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+          -webkit-transition: all 0.5s ease-in-out;
+          transition: all 0.5s ease-in-out;
+        }
+
+        :host(.candrop) [front],
+        :host(.candrop) [back] {
+          border-width: 2px;
+          background-color: #fffde9;
+        }
+
+        :host(.flipped) {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [front],
+        [back] {
+          position: absolute;
+
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+        }
+
+        [front] {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        [front] mwc-icon {
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+
+        [back] {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+          box-sizing: border-box;
+          display: grid;
+        }
+
+        [back] form {
+          padding: var(--card-list-create-form-padding);
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr auto;
+          justify-content: center;
+          align-items: center;
+        }
+
+        [back] form .props {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: grid;
+          grid-template-columns: repeat(10, 1fr);
+          grid-row-gap: 7px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        [back] form .props label {
+          grid-column: span 4;
+          font: var(--card-list-create-label-font);
+          color: var(--card-list-create-label-color);
+        }
+
+        [back] form .props input,
+        [back] form .props select {
+          grid-column: span 6;
+          background-color: #fff;
+          border: var(--card-list-create-input-border);
+          border-radius: var(--card-list-create-input-border-radius);
+          font: var(--card-list-create-input-font);
+          color: var(--card-list-create-input-color);
+          width: -moz-available;
+        }
+
+        file-selector {
+          grid-column: span 6;
+          font: var(--card-list-create-input-font);
+          border: none;
+          box-sizing: border-box;
+          padding: 0;
+        }
+
+        [back] input[type="submit"] {
+          background-color: var(--button-background-color) !important;
+          font: var(--button-font);
+          color: var(--button-color) !important;
+          border-radius: var(--button-radius);
+          border: var(--button-border);
+          grid-column: span 10;
+          grid-row: auto / -1;
+        }
+
+        .hidden {
+          display: none !important;
+        }
+      `,
+    ];
+  }
+
+  async firstUpdated() {
+    FileDropHelper.set(this);
+  }
+
+  render() {
+    let isProviderGoogle =
+      this.provider == "google" && this.googleFonts.length > 0;
+    let isFileAttached = this._files.length > 0 ? true : false;
+    return html`
+      <div @click=${(e) => this.onClickFlip(e)} front>
+        <mwc-icon>add_circle_outline</mwc-icon>create font
+      </div>
+
+      <div @click=${(e) => this.onClickFlip(e)} back>
+        <form @submit=${(e) => this.onClickSubmit(e)}>
+          <div class="props">
+            <label>${i18next.t("label.provider")}</label>
+            <select
+              name="provider"
+              @change=${(e) => {
+                this.provider = e.target.value;
+                if (e.target.value === "google") {
+                  fetch(`/all-google-fonts`).then(async (response) => {
+                    if (response.ok) this.googleFonts = await response.json();
+                    else {
+                      console.warn(
+                        `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`
+                      );
+                    }
+                  });
+                }
+              }}
+            >
+              ${this.providers.map(
+                (p) =>
+                  html`
+                    <option
+                      value=${p.value}
+                      ?selected=${this.provider == p.value}
+                    >
+                      ${p.display}
+                    </option>
+                  `
+              )}
+            </select>
+
+            <label>${i18next.t("label.name")}</label>
+            <input
+              type="text"
+              name="${isProviderGoogle ? "" : "name"}"
+              ?hidden=${isProviderGoogle}
+            />
+            <select
+              name="${isProviderGoogle ? "name" : ""}"
+              ?hidden=${!isProviderGoogle}
+            >
+              ${isProviderGoogle &&
+              this.googleFonts.map(
+                (f) => html` <option value=${f}>${f}</option> `
+              )}
+            </select>
+
+            <label ?hidden=${this.provider != "custom"}
+              >${i18next.t("label.uri")}</label
+            >
+            <input
+              ?hidden=${this.provider != "custom"}
+              ?disabled=${isFileAttached}
+              .value=${isFileAttached ? this._files[0].name : ""}
+              type="text"
+              name="uri"
+            />
+            <!-- display when attachment module is imported -->
+            <label ?hidden=${this.provider != "custom"}
+              >${i18next.t("label.file")}</label
+            >
+            <file-selector
+              class="${this.provider != "custom" ? "hidden" : ""}"
+              name="file"
+              label="${i18next.t("label.select file")}"
+              accept=".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz"
+              multiple
+              @file-change=${(e) => {
+                this._files = Array.from(e.detail.files);
+              }}
+            ></file-selector>
+            <!------------------------------------------------>
+
+            <label for="checkbox-active" @click=${(e) => e.stopPropagation()}>
+              ${i18next.t("label.active")}
+            </label>
+            <input id="checkbox-active" type="checkbox" name="active" checked />
+          </div>
+          <div></div>
+          <input type="submit" value=${i18next.t("button.create")} />
+        </form>
+      </div>
+    `;
+  }
+
+  onClickFlip(e) {
+    if (
+      !["INPUT", "SELECT", "OPTION"].find(
+        (tagName) => tagName === e.target.tagName
+      )
+    ) {
+      if (e.currentTarget.hasAttribute("front")) this.reset(); // 입력 폼으로 뒤집기 전에 한 번 리셋
+      this.classList.toggle("flipped");
+    }
+  }
+
+  async onClickSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    var form = e.target;
+
+    var detail = {};
+    detail.name = form.elements["name"].value;
+    detail.provider = form.elements["provider"].value;
+    detail.active = form.elements["active"].checked;
+    if (this.provider === "custom") {
+      detail.uri = form.elements["uri"].value;
+      if (this._files?.length > 0) {
+        detail._files = this._files;
+      }
+    }
+
+    this.dispatchEvent(new CustomEvent("create-font", { detail }));
+  }
+
+  reset() {
+    var form = this.shadowRoot.querySelector("form");
+    if (form) {
+      form.reset();
+    }
+
+    this._files = [];
+    this.classList.remove("flipped");
+  }
+}
+
+customElements.define("font-creation-card", FontCreationCard);

package/src/font-selector.js

@@ -0,0 +1,465 @@
+import "./font-creation-card";
+
+import { HeadroomStyles, ScrollbarStyles } from "@operato/styles";
+import { LitElement, css, html } from "lit";
+import {
+  createFont,
+  deleteFont,
+  fetchFontList,
+  updateFont,
+} from "./graphql-client";
+import { i18next, localize } from "@operato/i18n";
+
+import Headroom from "@operato/headroom";
+import { client } from "@operato/graphql";
+import { connect } from "pwa-helpers/connect-mixin.js";
+import gql from "graphql-tag";
+import { pulltorefresh } from "@operato/utils";
+import { store } from "@operato/shell";
+import uuid from "uuid/v4";
+
+export class FontSelector extends localize(i18next)(
+  connect(store)(LitElement)
+) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      HeadroomStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background-color: var(--popup-content-background-color);
+
+          position: relative;
+        }
+
+        :host(.candrop) {
+          background: orange;
+          cursor: pointer;
+        }
+
+        #main {
+          overflow: auto;
+          padding: var(--popup-content-padding);
+          display: grid;
+          grid-template-columns: var(--card-list-template);
+          grid-auto-rows: var(--card-list-rows-height);
+          grid-gap: 20px;
+          box-sizing: border-box;
+        }
+
+        #main .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          overflow: hidden;
+          border-radius: var(--card-list-border-radius);
+          border: var(--font-selector-border);
+          background-color: var(--card-list-background-color);
+
+          position: relative;
+        }
+
+        .card .button-container {
+          position: absolute;
+          right: 0;
+          height: 100%;
+          display: flex;
+          direction: rtl;
+          flex-direction: column;
+          flex-wrap: wrap;
+        }
+
+        .card .button-container > mwc-icon {
+          background-color: var(--font-selector-icon-background-color);
+          text-align: center;
+          width: var(--font-selector-icon-size);
+          height: var(--font-selector-icon-size);
+          font: var(--font-selector-icon-font);
+          color: var(--font-selector-icon-color);
+        }
+
+        .card .button-container > mwc-icon:last-child {
+          border-bottom-left-radius: 12px;
+        }
+
+        .card .button-container > mwc-icon:hover,
+        .card .button-container > mwc-icon:active {
+          background-color: var(--primary-color);
+          color: #fff;
+        }
+
+        #main .card.create {
+          overflow: visible;
+          background-color: initial;
+        }
+
+        #main .card:hover {
+          cursor: pointer;
+        }
+
+        [face] {
+          flex: 1;
+        }
+
+        [name] {
+          background-color: var(--board-renderer-name-background-color);
+          opacity: 0.8;
+          margin-top: -35px;
+          width: 100%;
+          color: #fff;
+          font-weight: bolder;
+          font-size: 13px;
+          text-indent: 7px;
+        }
+
+        [provider] {
+          background-color: rgba(0, 0, 0, 0.7);
+          width: 100%;
+          min-height: 15px;
+          font-size: 0.6rem;
+          color: #fff;
+          text-indent: 7px;
+        }
+
+        #filter {
+          padding: var(--popup-content-padding);
+          background-color: var(--font-tools-background-color);
+          box-shadow: var(--box-shadow);
+
+          position: absolute;
+          width: 100%;
+          box-sizing: border-box;
+          z-index: 1;
+        }
+
+        #filter * {
+          font-size: 15px;
+        }
+
+        select {
+          text-transform: capitalize;
+          float: right;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      fonts: Array,
+      _page: Number,
+      _total: Number,
+      creatable: Boolean,
+    };
+  }
+
+  render() {
+    var fonts = this.fonts || [];
+
+    return html`
+      <div id="filter">
+        <select
+          @change=${(e) => {
+            this.provider = e.currentTarget.value;
+            this.requestUpdate();
+          }}
+        >
+          <option value="">
+            --${i18next.t("text.please choose a provider")}--
+          </option>
+          ${["google", "custom"].map(
+            (provider) => html` <option value=${provider}>${provider}</option> `
+          )}
+        </select>
+      </div>
+
+      <div id="main">
+        ${this.creatable
+          ? html`
+              <font-creation-card
+                class="card create"
+                @create-font=${(e) => this.onCreateFont(e)}
+                @file-drop=${(e) => this.onAttachmentDropped(e)}
+              ></font-creation-card>
+            `
+          : html``}
+        ${fonts.map(
+          (font) => html`
+            <div class="card" @click=${(e) => this.onClickSelect(font)}>
+              <div face>
+                <font .face=${font.name}>ABCDEFGHIJKLMN</font>
+                <font .face=${font.name}>abcdefghijklmn</font>
+              </div>
+              <div name>${font.name}</div>
+              <div provider>${font.provider}</div>
+              <div class="button-container">
+                <mwc-icon
+                  @click=${(e) => {
+                    e.stopPropagation();
+                    this.toggleActive(font);
+                  }}
+                  >${font.active
+                    ? "check_box"
+                    : "check_box_outline_blank"}</mwc-icon
+                >
+                <mwc-icon
+                  @click=${(e) => {
+                    e.stopPropagation();
+                    this.deleteFont(font);
+                  }}
+                  >delete</mwc-icon
+                >
+              </div>
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    var list = this.shadowRoot.querySelector("#main");
+
+    pulltorefresh({
+      container: this.shadowRoot,
+      scrollable: list,
+      refresh: () => {
+        return this.refresh();
+      },
+    });
+
+    /* for headroom */
+    var main = this.renderRoot.querySelector("#main");
+    main.addEventListener("scroll", (e) => {
+      this.showGotoTop = e.target.scrollTop !== 0;
+    });
+
+    var filter = this.renderRoot.querySelector("#filter");
+
+    await this.requestUpdate();
+
+    var originPaddingTop = parseFloat(
+      getComputedStyle(main, null).getPropertyValue("padding-top")
+    );
+    main.style.paddingTop = filter.clientHeight + originPaddingTop + "px";
+    var headroom = new Headroom(filter, {
+      scroller: main,
+    });
+    headroom.init();
+  }
+
+  get creationCard() {
+    return this.shadowRoot.querySelector("font-creation-card");
+  }
+
+  updated(changes) {
+    if (changes.has("fonts")) {
+      var creationCard = this.creationCard;
+      if (creationCard) {
+        creationCard.reset();
+      }
+    }
+  }
+
+  stateChanged(state) {
+    this.fonts = state.font;
+  }
+
+  refresh() {
+    return store.dispatch(fetchFontList());
+  }
+
+  toggleActive(font) {
+    store.dispatch(updateFont({ id: font.id, active: !font.active }));
+  }
+
+  onCreateFont(e) {
+    var font = e.detail;
+    this.createFont(font);
+  }
+
+  async createFont(font) {
+    if (font._files?.length > 0) {
+      let attachment = await this.attachFile(font._files[0], [
+        "fullpath",
+        "refBy",
+      ]);
+
+      //font.id = attachment?.refBy
+      font.uri = attachment?.fullpath;
+      delete font._files;
+    }
+
+    store.dispatch(createFont(font));
+  }
+
+  async onAttachmentDropped(e) {
+    var isNonFontIncluded = false;
+    var files = e.detail.filter((file) => {
+      var isFontFormat = !![
+        ".woff",
+        ".woff2",
+        ".eot",
+        ".svg",
+        ".svgz",
+        ".ttf",
+        ".otf",
+      ].find((ext) => file.name.endsWith(ext));
+      if (!isFontFormat) {
+        isNonFontIncluded = true;
+        return false;
+      }
+      var alreadyExist = !!this.fonts.find(
+        (font) =>
+          font.name == file.name.replace(/\.[^/.]+$/, "").replace(".", "_")
+      );
+      if (alreadyExist) return false;
+      return true;
+    });
+    // TODO alert if non-font file is included. ex) Non-font file is excluded in upload list.
+
+    if (files.length > 0) {
+      var attached = await this.attachFiles(files, [
+        "name",
+        "fullpath",
+        "refBy",
+      ]);
+      attached.forEach((attachment) => {
+        this.createFont({
+          id: attachment.refBy,
+          name: attachment.name.replace(/\.[^/.]+$/, "").replace(".", "_"), // cannot apply font correctly if '.' exists in name
+          provider: "custom",
+          active: true,
+          uri: attachment.fullpath,
+        });
+      });
+    }
+  }
+
+  /**
+   * attach a file
+   *
+   * @param { File } file file
+   * @param { Array<String> } fields fields to select from return
+   */
+  async attachFile(file, fields = []) {
+    var attaching = await client.mutate({
+      mutation: gql`
+        mutation ($attachment: NewAttachment!) {
+          createAttachment(attachment: $attachment) {
+            id
+          }
+        }
+      `,
+      variables: {
+        attachment: { refBy: uuid(), category: "font", file },
+      },
+      context: {
+        hasUpload: true,
+      },
+    });
+    // TODO mutation 이후 query 호출 안 해도 되도록 수정
+    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
+    var attached = await client.query({
+      query: gql`
+        query($id: String!) {
+          attachment(id: $id) {
+            id
+            ${fields.join("\n")}
+          }
+        }
+      `,
+      variables: {
+        id: attaching.data.createAttachment?.id,
+      },
+    });
+    return attached.data.attachment;
+  }
+
+  /**
+   * attach multiple files
+   *
+   * @param { Array<File> } files files
+   * @param { Array<String> } fields fields to select from return
+   */
+  async attachFiles(files, fields = []) {
+    var attaching = await client.mutate({
+      mutation: gql`
+        mutation ($attachments: [NewAttachment!]!) {
+          createAttachments(attachments: $attachments) {
+            id
+          }
+        }
+      `,
+      variables: {
+        attachments: files.map((file) => ({
+          refBy: uuid(),
+          category: "",
+          file,
+        })),
+      },
+      context: {
+        hasUpload: true,
+      },
+    });
+    // TODO mutation 이후 query 호출 안 해도 되도록 수정
+    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
+    var attached = await client.query({
+      query: gql`
+        query($filters: [Filter]) {
+          attachments(filters: $filters) {
+            items {
+              id
+              ${fields.join("\n")}
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters: {
+          name: "id",
+          operator: "in",
+          value: attaching.data.createAttachments.map(
+            (attachment) => attachment.id
+          ),
+        },
+      },
+    });
+    return attached.data.attachments.items;
+  }
+
+  async deleteFont(font) {
+    try {
+      client.mutate({
+        mutation: gql`
+          mutation ($refBys: [String!]!) {
+            deleteAttachmentsByRef(refBys: $refBys)
+          }
+        `,
+        variables: {
+          refBys: [font.id],
+        },
+      });
+    } catch (e) {}
+
+    store.dispatch(deleteFont(font));
+  }
+
+  onClickSelect(font) {
+    this.dispatchEvent(
+      new CustomEvent("font-selected", {
+        composed: true,
+        bubbles: true,
+        detail: {
+          font,
+        },
+      })
+    );
+  }
+}
+
+customElements.define("font-selector", FontSelector);

package/src/graphql-client.js

@@ -0,0 +1,108 @@
+import { client } from "@operato/graphql";
+import gql from "graphql-tag";
+
+/**
+ * @param {Object} listParam {filters, pagination, sortings}
+ */
+export async function fetchFontList(listParam) {
+  const response = await client.query({
+    query: gql`
+      query (
+        $filters: [Filter!]
+        $pagination: Pagination
+        $sortings: [Sorting!]
+      ) {
+        fonts(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          items {
+            id
+            name
+            provider
+            uri
+            path
+            active
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `,
+    variables: listParam,
+  });
+
+  return response.data && response.data.fonts;
+}
+
+/**
+ * @param {Object} font Font patch
+ */
+export async function createFont(font) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateFont($font: NewFont!) {
+        createFont(font: $font) {
+          name
+          provider
+          uri
+          path
+          active
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      font: { active: false, ...font },
+    },
+  });
+
+  return response.data;
+}
+
+/**
+ * @param {Object} font Font patch
+ */
+export async function updateFont(font) {
+  var { id, ...patch } = font;
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateFont($id: String!, $patch: FontPatch!) {
+        updateFont(id: $id, patch: $patch) {
+          id
+          name
+          provider
+          uri
+          path
+          active
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch,
+    },
+  });
+
+  return response.data;
+}
+
+/**
+ * @param {String} id Font id
+ */
+export async function deleteFont(id) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteFont(id: $id)
+      }
+    `,
+    variables: {
+      id,
+    },
+  });
+
+  return response.data;
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export * from "./font-selector";
+export * from "./ox-font-selector";
+export * from "./ox-property-editor-font-selector";

package/src/ox-font-selector.js

@@ -0,0 +1,102 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import "@material/mwc-icon";
+import "./font-selector";
+
+import { LitElement, css, html } from "lit";
+
+import { i18next } from "@operato/i18n";
+import { openPopup } from "@operato/layout";
+
+export default class OxFontSelector extends LitElement {
+  static get properties() {
+    return {
+      value: String,
+      properties: Object,
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+
+        input[type="text"] {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+
+        mwc-icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ""}
+        @change=${(e) => this._onInputChanged(e)}
+        .placeholder=${this.getAttribute("placeholder") || ""}
+      />
+
+      <mwc-icon @click=${(e) => this.openSelector(e)}>font_download</mwc-icon>
+    `;
+  }
+
+  _onInputChanged(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent("change", { bubbles: true, composed: true })
+    );
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup;
+    }
+
+    /*
+     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {};
+
+    var template = html`
+      <font-selector
+        .creatable=${true}
+        @font-selected=${async (e) => {
+          var font = e.detail.font;
+          this.value = font.name;
+
+          this.dispatchEvent(
+            new CustomEvent("change", { bubbles: true, composed: true })
+          );
+
+          this.popup && this.popup.close();
+        }}
+      ></font-selector>
+    `;
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: "large",
+      title: i18next.t("title.select font"),
+    });
+  }
+}
+
+customElements.define("ox-font-selector", OxFontSelector);

package/src/ox-property-editor-font-selector.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import "./ox-font-selector";
+
+import { OxPropertyEditor } from "@operato/property-editor";
+import { html } from "lit";
+
+export class OxPropertyEditorFontSelector extends OxPropertyEditor {
+  editorTemplate() {
+    return html`
+      <ox-font-selector
+        id="editor"
+        .value=${this.value}
+        .properties=${this.property}
+      ></ox-font-selector>
+    `;
+  }
+}
+
+customElements.define(
+  "ox-property-editor-font-selector",
+  OxPropertyEditorFontSelector
+);

package/src/themes/font-theme.css

@@ -0,0 +1,14 @@
+body {
+  --font-tools-background-color: var(--primary-color);
+  --font-selector-background-color: #fff;
+  --font-selector-name-font: bold 14px var(--theme-font);
+  --font-selector-border: 1px solid rgba(0, 0, 0, 0.2);
+  --font-selector-icon-size: 35px;
+  --font-selector-icon-font: normal 20px/35px var(--mdc-icon-font, 'Material Icons');
+  --font-selector-icon-color: var(--primary-color);
+  --font-selector-icon-background-color: rgba(255, 255, 255, 0.85);
+  --font-selector-etc-background-color: var(--primary-color);
+  --font-selector-etc-font: bold 9px var(--theme-font);
+  --font-selector-etc-icon-font: normal 72px var(--mdc-icon-font, 'Material Icons');
+  --font-selector-etc-icon-color: var(--secondary-color);
+}

package/things-factory.config.js

@@ -0,0 +1,5 @@
+import bootstrap from './client/bootstrap'
+
+export default {
+  bootstrap
+}

package/translations/en.json

@@ -0,0 +1,5 @@
+{
+  "label.module": "module",
+  "label.uri": "URI",
+  "text.please choose a provider": "Please choose a provider"
+}

package/translations/ko.json

@@ -0,0 +1,5 @@
+{
+  "label.module": "모듈",
+  "label.uri": "URI",
+  "text.please choose a provider": "서비스 제공자를 선택하세요"
+}

package/translations/ms.json

@@ -0,0 +1,5 @@
+{
+  "label.module": "module",
+  "label.uri": "URI",
+  "text.please choose a provider": "[ms]Please choose a provider"
+}

package/translations/zh.json

@@ -0,0 +1,5 @@
+{
+  "label.module": "模块",
+  "label.uri": "URI",
+  "text.please choose a provider": "Please choose a provider"
+}