@operato/font 1.0.0-beta.16 → 1.0.0-beta.17

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-beta.17](https://github.com/hatiolab/operato/compare/v1.0.0-beta.16...v1.0.0-beta.17) (2022-05-25)
+
+
+### :bug: Bug Fix
+
+* reform font ui ([fcfa5b0](https://github.com/hatiolab/operato/commit/fcfa5b06222579e45a79fa94e8823178cfdacca2))
+
+
+
 ## [1.0.0-beta.16](https://github.com/hatiolab/operato/compare/v1.0.0-beta.15...v1.0.0-beta.16) (2022-05-23)
 
 **Note:** Version bump only for package @operato/font

package/package.json

@@ -3,7 +3,7 @@
   "description": "User interface to select font and create font.",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "main": "src/index.js",
   "module": "src/index.js",
   "exports": {
@@ -24,15 +24,48 @@
   "scripts": {},
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/attachment": "^1.0.0-beta.16",
-    "@operato/headroom": "^1.0.0-beta.16",
-    "@operato/i18n": "^1.0.0-beta.16",
-    "@operato/layout": "^1.0.0-beta.16",
-    "@operato/property-editor": "^1.0.0-beta.16",
-    "@operato/pull-to-refresh": "^1.0.0-beta.16",
-    "@operato/shell": "^1.0.0-beta.16",
-    "@operato/utils": "^1.0.0-beta.16",
-    "uuid": "^3.4.0"
+    "@operato/attachment": "^1.0.0-beta.17",
+    "@operato/headroom": "^1.0.0-beta.17",
+    "@operato/i18n": "^1.0.0-beta.17",
+    "@operato/layout": "^1.0.0-beta.17",
+    "@operato/property-editor": "^1.0.0-beta.17",
+    "@operato/pull-to-refresh": "^1.0.0-beta.17",
+    "@operato/shell": "^1.0.0-beta.17",
+    "@operato/utils": "^1.0.0-beta.17",
+    "uuid": "^3.4.0",
+    "webfontloader": "^1.6.28"
   },
-  "gitHead": "20c4d72532166fd49c9c666e5ba00e4c5766a432"
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.29",
+    "@web/dev-server-storybook": "^0.5.0",
+    "@web/test-runner": "next",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^7.0.2",
+    "json5": "^2.2.0",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "4894bb50eb5bf25722360a7786fb142f2dcf9b97"
 }

package/src/font-creation-card.js

@@ -1,35 +1,34 @@
-import "@operato/attachment";
+import './ox-file-selector'
 
-import { LitElement, css, html } from "lit";
-import { i18next, localize } from "@operato/i18n";
+import { css, html, LitElement } from 'lit'
 
-import { FileDropHelper } from "@operato/utils";
+import { i18next, localize } from '@operato/i18n'
 
 export class FontCreationCard extends localize(i18next)(LitElement) {
   static get properties() {
     return {
       provider: {
-        type: String,
+        type: String
       },
       googleFonts: {
-        type: Array,
+        type: Array
       },
-      _files: {
-        type: Array,
-      },
-    };
+      files: {
+        type: Array
+      }
+    }
   }
 
   constructor() {
-    super();
-    this.provider = "google";
+    super()
+    this.provider = 'google'
     this.providers = [
-      { value: "google", display: "Google" },
+      { value: 'google', display: 'Google' },
       // TODO 구글 외 폰트 서비스 구현
       // { value: 'typekit', display: 'Typekit' },
-      { value: "custom", display: "Custom" },
-    ];
-    this.googleFonts = [];
+      { value: 'custom', display: 'Custom' }
+    ]
+    this.googleFonts = []
   }
 
   static get styles() {
@@ -48,12 +47,6 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
           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);
@@ -141,7 +134,7 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
           width: -moz-available;
         }
 
-        file-selector {
+        ox-file-selector {
           grid-column: span 6;
           font: var(--card-list-create-input-font);
           border: none;
@@ -149,7 +142,7 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
           padding: 0;
         }
 
-        [back] input[type="submit"] {
+        [back] input[type='submit'] {
           background-color: var(--button-background-color) !important;
           font: var(--button-font);
           color: var(--button-color) !important;
@@ -162,150 +155,116 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
         .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;
+    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)} 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 @click=${e => this.onClickFlip(e)} back>
+        <form @submit=${e => this.onClickSubmit(e)}>
           <div class="props">
-            <label>${i18next.t("label.provider")}</label>
+            <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();
+              @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>
-                  `
+                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> `
-              )}
+            <label>${i18next.t('label.name')}</label>
+            <input type="text" name="${isProviderGoogle ? '' : 'name'}" ?hidden=${isProviderGoogle} />
+            <select name="${isProviderGoogle ? 'name' : ''}" ?hidden=${!isProviderGoogle}>
+              <option value="">&nbsp;</option>
+              ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}
             </select>
 
-            <label ?hidden=${this.provider != "custom"}
-              >${i18next.t("label.uri")}</label
-            >
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>
             <input
-              ?hidden=${this.provider != "custom"}
+              ?hidden=${this.provider != 'custom'}
               ?disabled=${isFileAttached}
-              .value=${isFileAttached ? this._files[0].name : ""}
+              .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" : ""}"
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>
+            <ox-file-selector
+              class="${this.provider != 'custom' ? 'hidden' : ''}"
               name="file"
-              label="${i18next.t("label.select 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-change=${e => {
+                this.files = Array.from(e.detail.files)
               }}
-            ></file-selector>
+            ></ox-file-selector>
             <!------------------------------------------------>
 
-            <label for="checkbox-active" @click=${(e) => e.stopPropagation()}>
-              ${i18next.t("label.active")}
-            </label>
+            <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")} />
+          <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");
+    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;
+    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 }));
+    this.dispatchEvent(new CustomEvent('create-font', { detail }))
   }
 
   reset() {
-    var form = this.shadowRoot.querySelector("form");
+    var form = this.shadowRoot.querySelector('form')
     if (form) {
-      form.reset();
+      form.reset()
     }
 
-    this._files = [];
-    this.classList.remove("flipped");
+    this.files = []
+    this.classList.remove('flipped')
   }
 }
 
-customElements.define("font-creation-card", FontCreationCard);
+customElements.define('font-creation-card', FontCreationCard)

package/src/font-selector.js

@@ -1,26 +1,18 @@
-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/pull-to-refresh";
-import { store } from "@operato/shell";
-import uuid from "uuid/v4";
-
-export class FontSelector extends localize(i18next)(
-  connect(store)(LitElement)
-) {
+import './font-creation-card'
+
+import { css, html, LitElement } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import Headroom from '@operato/headroom'
+import { i18next, localize } from '@operato/i18n'
+import { pulltorefresh } from '@operato/pull-to-refresh'
+import { store } from '@operato/shell'
+import { HeadroomStyles, ScrollbarStyles } from '@operato/styles'
+
+import { createFont, deleteFont, updateFont } from './graphql-client'
+import { actionUpdateFontList } from './redux-font-actions'
+
+export class FontSelector extends localize(i18next)(connect(store)(LitElement)) {
   static get styles() {
     return [
       ScrollbarStyles,
@@ -35,11 +27,6 @@ export class FontSelector extends localize(i18next)(
           position: relative;
         }
 
-        :host(.candrop) {
-          background: orange;
-          cursor: pointer;
-        }
-
         #main {
           overflow: auto;
           padding: var(--popup-content-padding);
@@ -143,8 +130,8 @@ export class FontSelector extends localize(i18next)(
           text-transform: capitalize;
           float: right;
         }
-      `,
-    ];
+      `
+    ]
   }
 
   static get properties() {
@@ -152,43 +139,35 @@ export class FontSelector extends localize(i18next)(
       fonts: Array,
       _page: Number,
       _total: Number,
-      creatable: Boolean,
-    };
+      creatable: Boolean
+    }
   }
 
   render() {
-    var fonts = this.fonts || [];
+    var fonts = this.fonts || []
 
     return html`
       <div id="filter">
         <select
-          @change=${(e) => {
-            this.provider = e.currentTarget.value;
-            this.requestUpdate();
+          @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> `
-          )}
+          <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>
+              <font-creation-card class="card create" @create-font=${e => this.onCreateFont(e)}></font-creation-card>
             `
           : html``}
         ${fonts.map(
-          (font) => html`
-            <div class="card" @click=${(e) => this.onClickSelect(font)}>
+          font => html`
+            <div class="card" @click=${e => this.onClickSelect(font)}>
               <div face>
                 <font .face=${font.name}>ABCDEFGHIJKLMN</font>
                 <font .face=${font.name}>abcdefghijklmn</font>
@@ -197,18 +176,16 @@ export class FontSelector extends localize(i18next)(
               <div provider>${font.provider}</div>
               <div class="button-container">
                 <mwc-icon
-                  @click=${(e) => {
-                    e.stopPropagation();
-                    this.toggleActive(font);
+                  @click=${e => {
+                    e.stopPropagation()
+                    this.toggleActive(font)
                   }}
-                  >${font.active
-                    ? "check_box"
-                    : "check_box_outline_blank"}</mwc-icon
+                  >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
                 >
                 <mwc-icon
-                  @click=${(e) => {
-                    e.stopPropagation();
-                    this.deleteFont(font);
+                  @click=${e => {
+                    e.stopPropagation()
+                    this.deleteFont(font)
                   }}
                   >delete</mwc-icon
                 >
@@ -217,249 +194,94 @@ export class FontSelector extends localize(i18next)(
           `
         )}
       </div>
-    `;
+    `
   }
 
   async firstUpdated() {
-    var list = this.shadowRoot.querySelector("#main");
+    var list = this.shadowRoot.querySelector('#main')
 
     pulltorefresh({
       container: this.shadowRoot,
       scrollable: list,
       refresh: () => {
-        return this.refresh();
-      },
-    });
+        return this.refresh()
+      }
+    })
 
     /* for headroom */
-    var main = this.renderRoot.querySelector("#main");
-    main.addEventListener("scroll", (e) => {
-      this.showGotoTop = e.target.scrollTop !== 0;
-    });
+    var main = this.renderRoot.querySelector('#main')
+    main.addEventListener('scroll', e => {
+      this.showGotoTop = e.target.scrollTop !== 0
+    })
 
-    var filter = this.renderRoot.querySelector("#filter");
+    var filter = this.renderRoot.querySelector('#filter')
 
-    await this.requestUpdate();
+    await this.requestUpdate()
 
-    var originPaddingTop = parseFloat(
-      getComputedStyle(main, null).getPropertyValue("padding-top")
-    );
-    main.style.paddingTop = filter.clientHeight + originPaddingTop + "px";
+    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();
+      scroller: main
+    })
+    headroom.init()
   }
 
   get creationCard() {
-    return this.shadowRoot.querySelector("font-creation-card");
+    return this.shadowRoot.querySelector('font-creation-card')
   }
 
   updated(changes) {
-    if (changes.has("fonts")) {
-      var creationCard = this.creationCard;
-      if (creationCard) {
-        creationCard.reset();
-      }
+    if (changes.has('fonts')) {
+      this.creationCard?.reset()
     }
   }
 
   stateChanged(state) {
-    this.fonts = state.font;
+    this.fonts = state.font
   }
 
   refresh() {
-    return store.dispatch(fetchFontList());
-  }
-
-  toggleActive(font) {
-    store.dispatch(updateFont({ id: font.id, active: !font.active }));
+    return store.dispatch(actionUpdateFontList())
   }
 
-  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;
+  async toggleActive(font) {
+    try {
+      await updateFont({ id: font.id, active: !font.active })
+      this.refresh()
+    } catch (e) {
+      console.error(e)
     }
-
-    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,
-        });
-      });
+  async onCreateFont(e) {
+    try {
+      await createFont(e.detail)
+      this.refresh()
+    } catch (e) {
+      console.error(e)
     }
   }
 
-  /**
-   * 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));
+      await deleteFont(font.id)
+      this.refresh()
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   onClickSelect(font) {
     this.dispatchEvent(
-      new CustomEvent("font-selected", {
+      new CustomEvent('font-selected', {
         composed: true,
         bubbles: true,
         detail: {
-          font,
-        },
+          font
+        }
       })
-    );
+    )
   }
 }
 
-customElements.define("font-selector", FontSelector);
+customElements.define('font-selector', FontSelector)

package/src/graphql-client.js

@@ -1,5 +1,6 @@
-import { client } from "@operato/graphql";
-import gql from "graphql-tag";
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
 
 /**
  * @param {Object} listParam {filters, pagination, sortings}
@@ -7,11 +8,7 @@ import gql from "graphql-tag";
 export async function fetchFontList(listParam) {
   const response = await client.query({
     query: gql`
-      query (
-        $filters: [Filter!]
-        $pagination: Pagination
-        $sortings: [Sorting!]
-      ) {
+      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
         fonts(filters: $filters, pagination: $pagination, sortings: $sortings) {
           items {
             id
@@ -20,6 +17,10 @@ export async function fetchFontList(listParam) {
             uri
             path
             active
+            files {
+              name
+              fullpath
+            }
             createdAt
             updatedAt
           }
@@ -27,10 +28,10 @@ export async function fetchFontList(listParam) {
         }
       }
     `,
-    variables: listParam,
-  });
+    variables: listParam
+  })
 
-  return response.data && response.data.fonts;
+  return response.data && response.data.fonts
 }
 
 /**
@@ -52,18 +53,21 @@ export async function createFont(font) {
       }
     `,
     variables: {
-      font: { active: false, ...font },
+      font: { active: false, ...font }
     },
-  });
+    context: {
+      hasUpload: true
+    }
+  })
 
-  return response.data;
+  return response.data
 }
 
 /**
  * @param {Object} font Font patch
  */
 export async function updateFont(font) {
-  var { id, ...patch } = font;
+  var { id, ...patch } = font
 
   const response = await client.mutate({
     mutation: gql`
@@ -72,7 +76,10 @@ export async function updateFont(font) {
           id
           name
           provider
-          uri
+          files {
+            name
+            fullpath
+          }
           path
           active
           createdAt
@@ -82,11 +89,14 @@ export async function updateFont(font) {
     `,
     variables: {
       id,
-      patch,
+      patch
     },
-  });
+    context: {
+      hasUpload: true
+    }
+  })
 
-  return response.data;
+  return response.data
 }
 
 /**
@@ -100,9 +110,9 @@ export async function deleteFont(id) {
       }
     `,
     variables: {
-      id,
-    },
-  });
+      id
+    }
+  })
 
-  return response.data;
+  return response.data
 }

package/src/index.js

@@ -1,3 +1,6 @@
-export * from "./font-selector";
-export * from "./ox-font-selector";
-export * from "./ox-property-editor-font-selector";
+export * from './font-selector'
+export * from './ox-font-selector'
+export * from './ox-property-editor-font-selector'
+
+export * from './redux-font-actions.js'
+export { default as ReducerFont } from './redux-font-reducers.js'

package/src/ox-file-selector.js

@@ -0,0 +1,138 @@
+import '@material/mwc-icon'
+import '@material/mwc-icon-button'
+
+import { css, html, LitElement } from 'lit'
+
+export class OxFileSelector extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          overflow: hidden;
+        }
+
+        #input-box {
+          display: flex;
+          width: 100%;
+          height: 100%;
+        }
+
+        input[type='file'] {
+          position: absolute;
+          width: 0px;
+          height: 0px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          border: 0;
+        }
+
+        label {
+          padding: unset;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          color: var(--file-selector-color, #999);
+          font-size: inherit;
+          line-height: normal;
+          vertical-align: middle;
+          background-color: var(--file-selector-bg-color, #fdfdfd);
+          cursor: pointer;
+          border: var(--file-selector-border, 1px solid #ebebeb);
+          border-radius: var(--file-selector-border-radius, 0.25em);
+        }
+
+        /* named upload */
+        .upload-name {
+          flex: 1;
+          padding: 0.5em 0.75em; /* label의 패딩값과 일치 */
+          font-size: inherit;
+          font-family: inherit;
+          line-height: normal;
+          vertical-align: middle;
+          background-color: #f5f5f5;
+          border: 1px solid #ebebeb;
+          border-bottom-color: #e2e2e2;
+          border-radius: 0.25em;
+          -webkit-appearance: none; /* 네이티브 외형 감추기 */
+          -moz-appearance: none;
+          appearance: none;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      label: String,
+      accept: String,
+      showFilename: {
+        type: Boolean,
+        attribute: 'show-filename'
+      },
+      multiple: {
+        type: Boolean,
+        attribute: 'multiple'
+      },
+      _files: Array
+    }
+  }
+
+  constructor() {
+    super()
+
+    this._files = []
+    this.label = 'select file'
+    this.multiple = false
+  }
+
+  render() {
+    return html`
+      <div id="input-box">
+        ${this.showFilename
+          ? html`
+              <input class="upload-name" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />
+            `
+          : html``}
+        <label for="input-file">${this.label}</label>
+        <input
+          id="input-file"
+          type="file"
+          accept="${this.accept}"
+          class="upload-hidden"
+          ?multiple=${this.multiple}
+          hidden
+          @change=${e => {
+            const el = e.currentTarget
+            this.dispatchEvent(
+              new CustomEvent('file-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  files: el.files
+                }
+              })
+            )
+
+            el.value = null
+          }}
+        />
+      </div>
+    `
+  }
+
+  get fileInput() {
+    return this.renderRoot.querySelector('#input-file')
+  }
+}
+
+window.customElements.define('ox-file-selector', OxFileSelector)

package/src/ox-font-selector.js

@@ -2,20 +2,20 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import "@material/mwc-icon";
-import "./font-selector";
+import '@material/mwc-icon'
+import './font-selector'
 
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from 'lit'
 
-import { i18next } from "@operato/i18n";
-import { openPopup } from "@operato/layout";
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
 
 export default class OxFontSelector extends LitElement {
   static get properties() {
     return {
       value: String,
-      properties: Object,
-    };
+      properties: Object
+    }
   }
 
   static get styles() {
@@ -26,7 +26,7 @@ export default class OxFontSelector extends LitElement {
           display: inline-block;
         }
 
-        input[type="text"] {
+        input[type='text'] {
           box-sizing: border-box;
           width: 100%;
           height: 100%;
@@ -38,8 +38,8 @@ export default class OxFontSelector extends LitElement {
           top: 0;
           right: 0;
         }
-      `,
-    ];
+      `
+    ]
   }
 
   render() {
@@ -47,25 +47,23 @@ export default class OxFontSelector extends LitElement {
       <input
         id="text"
         type="text"
-        .value=${this.value || ""}
-        @change=${(e) => this._onInputChanged(e)}
-        .placeholder=${this.getAttribute("placeholder") || ""}
+        .value=${this.value || ''}
+        @change=${e => this._onInputChanged(e)}
+        .placeholder=${this.getAttribute('placeholder') || ''}
       />
 
-      <mwc-icon @click=${(e) => this.openSelector(e)}>font_download</mwc-icon>
-    `;
+      <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 })
-    );
+    this.value = e.target.value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
 
   openSelector() {
     if (this.popup) {
-      delete this.popup;
+      delete this.popup
     }
 
     /*
@@ -73,30 +71,28 @@ export default class OxFontSelector extends LitElement {
      * 주의. value는 object일 수도 있고, string일 수도 있다.
      * string인 경우에는 해당 보드의 id로 해석한다.
      */
-    var value = this.value || {};
+    var value = this.value || {}
 
     var template = html`
       <font-selector
         .creatable=${true}
-        @font-selected=${async (e) => {
-          var font = e.detail.font;
-          this.value = font.name;
+        @font-selected=${async e => {
+          var font = e.detail.font
+          this.value = font.name
 
-          this.dispatchEvent(
-            new CustomEvent("change", { bubbles: true, composed: true })
-          );
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
 
-          this.popup && this.popup.close();
+          this.popup && this.popup.close()
         }}
       ></font-selector>
-    `;
+    `
 
     this.popup = openPopup(template, {
       backdrop: true,
-      size: "large",
-      title: i18next.t("title.select font"),
-    });
+      size: 'large',
+      title: i18next.t('title.select font')
+    })
   }
 }
 
-customElements.define("ox-font-selector", OxFontSelector);
+customElements.define('ox-font-selector', OxFontSelector)

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

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

package/src/redux-font-actions.js

@@ -0,0 +1,20 @@
+import * as client from './graphql-client'
+
+export const UPDATE_FONT_LIST = 'UPDATE_FONT_LIST'
+export const CLEAR_FONT_LIST = 'CLEAR_FONT_LIST'
+
+export const actionUpdateFontList = listParams => async dispatch => {
+  try {
+    const fonts = await client.fetchFontList(listParams || { filters: [] })
+
+    dispatch({
+      type: UPDATE_FONT_LIST,
+      list: fonts && fonts.items
+    })
+  } catch (error) {
+    console.error(error)
+    dispatch({
+      type: CLEAR_FONT_LIST
+    })
+  }
+}

package/src/redux-font-reducers.js

@@ -0,0 +1,80 @@
+import WebFont from 'webfontloader'
+
+import { CLEAR_FONT_LIST, UPDATE_FONT_LIST } from './redux-font-actions.js'
+
+const reducerFont = (state = [], action) => {
+  switch (action.type) {
+    case UPDATE_FONT_LIST:
+      let newState = action.list
+      let activatedFonts = newState.filter(font => font.active)
+
+      let googles = []
+      let customs = []
+      let customFontCSS = ''
+
+      activatedFonts.forEach(font => {
+        const { name, provider, files, uri } = font
+
+        if (provider === 'google') {
+          googles.push(name)
+        } else if (provider === 'custom') {
+          customs.push(name)
+
+          if (files && files.length > 0) {
+            customFontCSS += files
+              .map(file => {
+                const { name: filename, fullpath } = file
+                const bold = filename.toUpperCase().indexOf('BOLD') !== -1
+
+                return `@font-face {
+                font-family: '${name}';
+                src: local('${name}'), url(${fullpath});
+                font-weight: ${bold ? 'bold' : 'normal'};
+              }
+              `
+              })
+              .join('\n')
+          } else {
+            customFontCSS += `@font-face {
+              font-family: '${name}';
+              src: local('${name}')${uri ? `, url(${uri})` : ''};
+            }
+            `
+          }
+        }
+      })
+
+      let style = document.head.querySelector('#custom-fonts')
+      if (!style) {
+        style = document.createElement('style')
+        style.id = 'custom-fonts'
+        style.type = 'text/css'
+        document.head.appendChild(style)
+      }
+      style.innerHTML = customFontCSS
+
+      // TODO: typekit 등 타 서비스 지원
+      let WebFontConfig = {}
+      if (googles.length) {
+        WebFontConfig.google = {
+          families: googles
+        }
+      }
+      if (customs.length) {
+        WebFontConfig.custom = {
+          families: customs
+        }
+      }
+      if (Object.keys(WebFontConfig).length) WebFont.load(WebFontConfig)
+
+      return newState
+
+    case CLEAR_FONT_LIST:
+      return []
+
+    default:
+      return state
+  }
+}
+
+export default reducerFont