@drumee/ui-toolkit 0.0.8 → 0.0.10

package/ui-toolkit/skin/index.scss

@@ -0,0 +1,178 @@
+@use '@drumee/ui-styles/src/mixins';
+
+@mixin dtk-butler-main {
+
+  &__ui {
+    width: 100vw;
+    height: 100vh;
+    align-content: center;
+    align-items: center;
+    justify-content: start;
+    background-color: var(--neutral-100);
+    overflow: auto;
+    font-family: var(--font-main);
+    flex-wrap: wrap;
+    padding: var(--spacer-7);
+    gap: var(--spacer-8);
+    flex-shrink: 0;
+
+    &[data-device="mobile"] {
+      padding: 10px;
+      height: auto;
+    }
+  }
+
+  &__main {
+    top: 180px;
+
+    &[data-device="mobile"] {
+      top: 0;
+      gap: var(--spacer-3);
+    }
+
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    max-width: 480px;
+    border-width: 1px;
+    gap: var(--spacer-5);
+    background-color: var(--white);
+    border: 1px solid var(--neutral-200);
+    padding: var(--spacer-7);
+    border-radius: var(--corner-radius-6);
+  }
+
+
+  &__logo {
+    &-container {
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &-content {
+      width: 80px;
+      height: 64px;
+      align-content: center;
+      justify-content: start;
+      align-items: start;
+      flex-wrap: wrap;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 40px;
+    text-align: center;
+  }
+
+  &__tips {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 16px;
+    line-height: 26px;
+    letter-spacing: 1px;
+    text-align: center;
+  }
+
+  &__message {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    span {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+}
+
+@mixin dtk-butler-button {
+
+  &__buttons {
+    gap: var(--spacer-6);
+    width: 100%;
+    justify-content: center;
+  }
+
+
+  &__button-main {
+    height: 48px;
+    opacity: 1;
+    gap: var(--spacer-4);
+    border-radius: var(--corner-radius-max);
+    padding-top: 8px;
+    padding-right: 16px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+    cursor: pointer;
+
+    &[data-haptic="1"] {
+      opacity: .6;
+      pointer-events: none;
+    }
+
+    &.primary {
+      padding-right: 3px;
+      justify-content: center;
+      grid-template-columns: 1fr 40px;
+      background: var(--primary-500);
+      color: var(--white);
+      align-content: center;
+      flex-wrap: wrap;
+
+      .icon.svg-wrapper {
+        height: 38px;
+        width: 38px;
+        color: var(--primary-500);
+        background-color: white;
+        border-radius: 50%;
+        padding: 9px;
+      }
+    }
+
+    &.full-width {
+      width: 100%;
+    }
+
+    &.secondary {
+      justify-content: center;
+      background-color: var(--neutral-200);
+
+      .icon.svg-wrapper {
+        height: 32px;
+        width: 32px;
+        color: var(--neutral-900);
+        border-radius: 50%;
+        padding: 6px;
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__button.btn {
+    width: auto;
+    height: 100%;
+    align-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    line-height: 20px;
+  }
+
+}

package/ui-toolkit/skin/skin.scss

@@ -0,0 +1,167 @@
+@use '@drumee/ui-styles/src/mixins';
+
+@mixin dtk-butler-main {
+
+  &__ui {
+    width: 100vw;
+    height: 100vh;
+    align-content: center;
+    align-items: center;
+    justify-content: start;
+    background-color: var(--neutral-100);
+    overflow: auto;
+    font-family: var(--font-main);
+    flex-wrap: wrap;
+    padding: var(--spacer-7);
+    gap: var(--spacer-8);
+    flex-shrink: 0;
+
+    &[data-device="mobile"] {
+      padding: 10px;
+      height: auto;
+    }
+  }
+
+  &__main {
+    top: 180px;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    max-width: 480px;
+    border-width: 1px;
+    gap: var(--spacer-8);
+    background-color: var(--white);
+    border: 1px solid var(--neutral-200);
+    padding: var(--spacer-7);
+    border-radius: var(--corner-radius-6);
+  }
+
+
+  &__logo {
+    &-container {
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &-content {
+      width: 80px;
+      height: 64px;
+      align-content: center;
+      justify-content: start;
+      align-items: start;
+      flex-wrap: wrap;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 40px;
+    text-align: center;
+  }
+
+  &__tips {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 16px;
+    line-height: 26px;
+    letter-spacing: 1px;
+    text-align: center;
+  }
+
+  &__message {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    span {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+}
+
+@mixin dtk-butler-button {
+
+  &__buttons {
+    gap: var(--spacer-6);
+    width: 100%;
+  }
+
+
+  &__button-main {
+    height: 48px;
+    opacity: 1;
+    gap: var(--spacer-4);
+    border-radius: var(--corner-radius-max);
+    padding-top: 8px;
+    padding-right: 16px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+    cursor: pointer;
+
+    &[data-haptic="1"] {
+      opacity: .6;
+      pointer-events: none;
+    }
+
+    &.primary {
+      padding-right: 3px;
+      justify-content: center;
+      grid-template-columns: 1fr 40px;
+      background: var(--primary-500);
+      color: var(--white);
+      align-content: center;
+      flex-wrap: wrap;
+
+      .icon.svg-wrapper {
+        height: 38px;
+        width: 38px;
+        color: var(--primary-500);
+        background-color: white;
+        border-radius: 50%;
+        padding: 9px;
+      }
+    }
+
+    &.secondary {
+      justify-content: center;
+      background-color: var(--neutral-200);
+
+      .icon.svg-wrapper {
+        height: 32px;
+        width: 32px;
+        color: var(--neutral-900);
+        border-radius: 50%;
+        padding: 6px;
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__button.btn {
+    width: auto;
+    height: 100%;
+    align-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    line-height: 20px;
+  }
+
+}

package/ui-toolkit/widgets/dialog/index.js

@@ -0,0 +1,41 @@
+
+/**
+ * Class representing signup page in Welcome module.
+ * @class __welcome_signup
+ * @extends __welcome_interact
+ */
+require('./skin');
+const { dtk_common } = require("..")
+export default class dtk_butler_dialog extends dtk_common {
+
+  /**
+   ** @param {object} opt
+  */
+  initialize(opt = {}) {
+    super.initialize(opt);
+    this.declareHandlers();
+    this.mset({ flow: _a.y })
+  }
+
+  /**
+   *
+  */
+  onDomRefresh() {
+    this.feed(require('./skeleton').default(this));
+  }
+
+  /**
+   * @param {LetcBox} cmd
+   * @param {any} args
+  */
+  onUiEvent(cmd, args = {}) {
+    const service = args.service || cmd.mget(_a.service);
+    this.debug(`onUiEvent service = ${service}`, cmd, this);
+
+    switch (service) {
+      default:
+        this.triggerHandlers({ service })
+    }
+  }
+
+}

package/ui-toolkit/widgets/dialog/skeleton/index.js

@@ -0,0 +1,27 @@
+const { header } = require("../../../skeletons")
+
+export default function (ui) {
+  const fig = ui.fig.family
+  const { title, message, buttons, body } = ui.model.toJSON()
+  let Buttons = null;
+  if (buttons) {
+    Buttons = Skeletons.Box.X({
+      className: `${fig}__buttons`,
+      kids: buttons
+    })
+  }
+  if (message == null) message = '';
+  let a = Skeletons.Box.Y({
+    className: `${fig}__main`,
+    debug: __filename,
+    kids: [
+      header(ui, title),
+      Skeletons.Element({ className: `${fig}__message`, content: message }),
+      body,
+      Buttons
+    ]
+  })
+
+  return a;
+
+}

package/ui-toolkit/widgets/dialog/skin/index.scss

@@ -0,0 +1,22 @@
+@use '@drumee/ui-styles/src/mixins';
+@use '../../../skin' as *;
+
+.dtk-butler-dialog {
+  @include dtk-butler-main;
+  @include dtk-butler-button;
+
+  &__message {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    span {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+}

package/ui-toolkit/widgets/index.js

@@ -0,0 +1,30 @@
+
+/**
+ * Common class
+ */
+export class dtk_common extends LetcBox {
+
+  /**
+   * 
+   */
+  setItemState(pn, s = 0) {
+    this.ensurePart(pn).then((p) => { setTimeout(() => { p.setState(s) }, 100) })
+  }
+
+  /**
+   * 
+   */
+  setItemStatus(pn, s = 0, attr = _a.status) {
+    this.ensurePart(pn).then((p) => { setTimeout(() => { p.el.dataset[attr] = s }, 100) })
+  }
+
+
+  /**
+   * 
+   * @param {*} xhr 
+   */
+  onServerComplain(xhr) {
+    this.warn(xhr)
+  }
+}
+

package/ui-toolkit/widgets/otp/index.js

@@ -0,0 +1,148 @@
+
+require('./skin');
+const { dtk_common } = require("..")
+export default class dtk_otp extends dtk_common {
+
+  /**
+   ** @param {object} opt
+  */
+  initialize(opt = {}) {
+    super.initialize(opt);
+    this.declareHandlers();
+    this.mset({ flow: _a.y })
+  }
+
+  /**
+   * 
+   */
+  bindPasteEvent() {
+    this.ensurePart("digits").then(async (p) => {
+      await Kind.waitFor('entry');
+      for (let c of p.children.toArray()) {
+        c.once("input:ready", () => {
+          c._input[0].onpaste = (e) => {
+            setTimeout(() => {
+              let value = c.getValue() || '';
+              if (!/[0-9]{1,6}/.test(value)) {
+                c.setValue("")
+                return
+              }
+              let digits = value.split('');
+              let i = c.getIndex();
+              for (let d of digits) {
+                if (!p.children._views[i]) continue;
+                p.children._views[i].setValue(d);
+                i++;
+              }
+              this.checkForm()
+            }, 300)
+          }
+        })
+      }
+    })
+  }
+
+  /**
+   * 
+   * @param {*} msg 
+   */
+  displayMessage(msg, error = 0) {
+    this.__tipsText.set({ content: msg });
+    this.__tipsText.el.dataset.error = error;
+    setTimeout(() => {
+      this.__tipsText.set({ content: '' });
+      this.__tipsText.el.dataset.error = error;
+    }, 3000)
+  }
+
+  /**
+   * 
+   */
+  checkForm() {
+    this.ensurePart("digits").then((p) => {
+      let res = [];
+      for (let c of p.children.toArray()) {
+        let v = c.getValue()
+        if (/[0-9]/.test(v)) {
+          res.push(v)
+        }
+      }
+      let api = this.mget(_a.api)
+      let payload = this.mget('payload')
+      if (res.length >= 6) {
+        if (api) {
+          return this.postService(api, { ...payload, code: res.join('') }, { async: 1 }).then((data) => {
+            if(data.error){
+              return this.displayMessage(LOCALE.INVALID_CODE, 1)
+            }
+            let service = this.mget(_a.service) || 'otp-verified';
+            this.triggerHandlers({ data, service })
+          }).catch((e) => {
+            this.warn("[checkForm] OTP verify error", e)
+            this.displayMessage(LOCALE.INVALID_CODE, 1)
+          })
+        }
+      }
+    })
+  }
+
+  /**
+   *
+  */
+  onDomRefresh() {
+    this.feed(require("./skeleton").default(this));
+    this.bindPasteEvent();
+  }
+
+
+  /**
+   * @param {LetcBox} cmd
+   * @param {any} args
+  */
+  onUiEvent(cmd, args = {}) {
+    const service = args.service || cmd.get(_a.service);
+    let status = cmd.status;
+    switch (service) {
+      case _a.input:
+        cmd.focus();
+        if (status == _e.click) {
+          cmd.setValue('');
+          return;
+        }
+        let res = [];
+        this.ensurePart("digits").then((p) => {
+          let i = cmd.getIndex() + 1;
+          let value = cmd.getValue();
+          for (let c of p.children.toArray()) {
+            if (c.getIndex() < i) {
+              continue;
+            } else {
+              if (/[0-9]/.test(value) && /[0-9]/.test(status)) {
+                c.focus();
+                c.setValue('')
+              } else {
+                cmd.setValue('');
+              }
+              break;
+            }
+          }
+          this.checkForm()
+        })
+        break;
+      case "resend-code":
+        let { email } = this.mget('payload')
+        this.postService(SERVICE.otp.send, { email }).then((data) => {
+          this.mset({ payload: data })
+          this.displayMessage(LOCALE.NEW_CODE_RESENT)
+        }).catch((e) => {
+          this.displayMessage(LOCALE.UNKNOWN_ERROR, 1)
+          this.warn("AAA:104 Error sending OTP", e)
+        })
+        break;
+      default:
+        this.triggerHandlers({ ...args, service })
+    }
+  }
+
+
+}

package/ui-toolkit/widgets/otp/skeleton/index.js

@@ -0,0 +1,85 @@
+const { header } = require("../../../skeletons");
+
+function __skl_welcome_signup(ui) {
+  const fig = ui.fig.family
+  let digits = []
+  let { title, message } = ui.model.toJSON()
+  for (let i = 0; i < 6; i++) {
+    digits.push(
+      Skeletons.Entry({
+        name: `digit-${i}`,
+        service: _a.input
+      })
+    )
+  }
+  const code = Skeletons.Box.X({
+    kidsOpt: {
+      className: `${fig}__digit`,
+      placeholder: "",
+      min: 0,
+      max: 9,
+      maxlength: 6,
+      interactive: 1
+    },
+    className: `${fig}__digits`,
+    sys_pn: "digits",
+    kids: digits
+  })
+
+  const resend = Skeletons.Box.X({
+    className: `${fig}__resend`,
+    kidsOpt: {
+      tagName: _K.tag.span,
+    },
+    kids: [
+      Skeletons.Element({
+        className: `${fig}__resend-text`,
+        content: `${LOCALE.DIDNT_GET_EMAIL} ${LOCALE.OR}`
+      }),
+      Skeletons.Element({
+        className: `${fig}__resend-text resend`,
+        content: LOCALE.RESEND_CODE,
+        service: "resend-code"
+      }),
+    ]
+  })
+
+  const tips = Skeletons.Box.X({
+    className: `${fig}__tips`,
+    kidsOpt: {
+      tagName: _K.tag.span,
+    },
+    kids: [
+      Skeletons.Note({
+        sys_pn: "tips-text",
+        className: `${fig}__tips-text`,
+      }),
+    ]
+  })
+
+  if (_.isString(message)) {
+    message = Skeletons.Box.X({
+      className: `${fig}__message`,
+      kids: [
+        Skeletons.Element({
+          className: `${fig}__message-text`,
+          content: message
+        })
+      ]
+    });
+  }
+  return Skeletons.Box.Y({
+    className: `${fig}__main`,
+    debug: __filename,
+    kids: [
+      header(ui, title || LOCALE.VALIDATION_SENT_TO),
+      message,
+      code,
+      tips,
+      resend
+    ]
+  })
+
+}
+
+export default __skl_welcome_signup