@operato/grist-editor 1.0.0-alpha.22 → 1.0.0-beta.39

package/.storybook/main.js

@@ -1,3 +1,3 @@
 module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
+}

package/.storybook/server.mjs

@@ -1,8 +1,8 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
+import { storybookPlugin } from '@web/dev-server-storybook'
+import baseConfig from '../web-dev-server.config.mjs'
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   ...baseConfig,
   open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
+})

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) hatiolab.com
+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
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

package/README.md

@@ -1,46 +1,66 @@
-# \<mini-app>
+# \<grist-editor>
 
 This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
 
 ## Installation
 
 ```bash
-npm i mini-app
+npm i grist-editor
 ```
 
 ## Usage
 
 ```html
 <script type="module">
-  import 'mini-app/mini-app.js'
+  import 'grist-editor/grist-editor.js'
 </script>
 
-<mini-app></mini-app>
+<grist-editor></grist-editor>
 ```
 
-## Linting and formatting
+## Linting with ESLint, Prettier, and Types
 
-To scan the project for linting and formatting errors, run
+To scan the project for linting errors, run
 
 ```bash
 npm run lint
 ```
 
-To automatically fix linting and formatting errors, run
+You can lint with ESLint and Prettier individually as well
+
+```bash
+npm run lint:eslint
+```
+
+```bash
+npm run lint:prettier
+```
+
+To automatically fix many linting errors, run
 
 ```bash
 npm run format
 ```
 
+You can format using ESLint and Prettier individually as well
+
+```bash
+npm run format:eslint
+```
+
+```bash
+npm run format:prettier
+```
+
 ## Testing with Web Test Runner
 
-To execute a single test run:
+To run the suite of Web Test Runner tests, run
 
 ```bash
 npm run test
 ```
 
-To run the tests in interactive watch mode run:
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
 
 ```bash
 npm run test:watch

package/dist/src/index.js

@@ -1,2 +1,16 @@
-"use strict";
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist';
+import { OxGristEditorCrontab } from './ox-grist-editor-crontab.js';
+import { OxGristEditorDuration } from './ox-grist-editor-duration.js';
+import { OxGristEditorParameters } from './ox-grist-editor-parameters.js';
+import { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js';
+import { OxGristEditorValueMap } from './ox-grist-editor-value-map.js';
+/* register grist renderer/editor for id */
+registerEditor('parameters', OxGristEditorParameters);
+registerEditor('value-map', OxGristEditorValueMap);
+registerEditor('partition-keys', OxGristEditorPartitionKeys);
+registerEditor('crontab', OxGristEditorCrontab);
+registerEditor('duration', OxGristEditorDuration);
+registerRenderer('parameters', OxGristRendererJson5);
+registerRenderer('value-map', OxGristRendererJson5);
+registerRenderer('partition-keys', OxGristRendererJson5);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,20 +1,11 @@
 {
   "name": "@operato/grist-editor",
+  "version": "1.0.0-beta.39",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
-  "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-alpha.22",
+  "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./id/id-input.js": "./dist/src/id/id-input.js",
-    "./id/id-selector.js": "./dist/src/id/id-selector.js",
-    "./id/id-renderer.js": "./dist/src/id/id-renderer.js",
-    "./object/object-selector.js": "./dist/src/object/object-selector.js",
-    "./object/object-renderer.js": "./dist/src/object/object-renderer.js",
-    "./code/code-editor.js": "./dist/src/code/code-editor.js"
-  },
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -24,6 +15,19 @@
     "url": "git+https://github.com/hatiolab/operato.git",
     "directory": "webcomponents/grist-editor"
   },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
+    "./ox-grist-editor-crontab.js": "./dist/src/ox-grist-editor-crontab.js",
+    "./ox-grist-renderer-crontab.js": "./dist/src/ox-grist-renderer-crontab.js",
+    "./ox-grist-editor-json.js": "./dist/src/ox-grist-editor-json.js",
+    "./ox-grist-editor-code.js": "./dist/src/ox-grist-editor-code.js",
+    "./ox-grist-editor-resource-object.js": "./dist/src/ox-grist-editor-resource-object.js",
+    "./ox-grist-editor-resource-code.js": "./dist/src/ox-grist-editor-resource-code.js",
+    "./ox-grist-editor-parameters.js": "./dist/src/ox-grist-editor-parameters.js",
+    "./ox-grist-editor-value-map.js": "./dist/src/ox-grist-editor-value-map.js",
+    "./ox-grist-editor-partition-keys.js": "./dist/src/ox-grist-editor-partition-keys.js"
+  },
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
@@ -40,31 +44,38 @@
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
-    "@operato/data-grist": "^1.0.0-alpha.22",
-    "@operato/form": "^1.0.0-alpha.22",
-    "@operato/graphql": "^1.0.0-alpha.22",
-    "@operato/i18n": "^1.0.0-alpha.22",
-    "@operato/layout": "^1.0.0-alpha.22",
-    "@operato/property-editor": "^1.0.0-alpha.22",
-    "@operato/shell": "^1.0.0-alpha.22",
-    "@operato/styles": "^1.0.0-alpha.22",
-    "@operato/utils": "^1.0.0-alpha.22",
-    "lit": "^2.2.0"
+    "@operato/data-grist": "^1.0.0-beta.39",
+    "@operato/help": "^1.0.0-beta.39",
+    "@operato/i18n": "^1.0.0-beta.39",
+    "@operato/input": "^1.0.0-beta.39",
+    "@operato/popup": "^1.0.0-beta.39",
+    "@operato/styles": "^1.0.0-beta.39",
+    "codemirror": "^5.64.0",
+    "codemirror-graphql": "^0.15.2",
+    "cronstrue": "^2.2.0",
+    "cross-fetch": "^3.1.5",
+    "lit": "^2.2.1",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
+    "@material/mwc-fab": "^0.25.3",
+    "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "^3.0.4",
+    "@types/bwip-js": "^2.1.1",
+    "@types/lodash-es": "^4.17.5",
+    "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@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": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -82,6 +93,5 @@
       "eslint --fix",
       "prettier --write"
     ]
-  },
-  "gitHead": "639c16cab74a44de55b152348a2bf921b10bd583"
-}
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
+
+import { OxGristEditorCrontab } from './ox-grist-editor-crontab.js'
+import { OxGristEditorDuration } from './ox-grist-editor-duration.js'
+import { OxGristEditorParameters } from './ox-grist-editor-parameters.js'
+import { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js'
+import { OxGristEditorValueMap } from './ox-grist-editor-value-map.js'
+
+/* register grist renderer/editor for id */
+registerEditor('parameters', OxGristEditorParameters)
+registerEditor('value-map', OxGristEditorValueMap)
+registerEditor('partition-keys', OxGristEditorPartitionKeys)
+registerEditor('crontab', OxGristEditorCrontab)
+registerEditor('duration', OxGristEditorDuration)
+
+registerRenderer('parameters', OxGristRendererJson5)
+registerRenderer('value-map', OxGristRendererJson5)
+registerRenderer('partition-keys', OxGristRendererJson5)

package/src/ox-grist-editor-crontab.ts

@@ -0,0 +1,62 @@
+import './ox-popup-crontab-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-crontab')
+export class OxGristEditorCrontab extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    return html` <input type="text" .value=${this.value || ''} /> `
+  }
+
+  async firstUpdated() {
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.showEditorPopup()
+    })
+
+    this.showEditorPopup()
+  }
+
+  showEditorPopup() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    this.popup = openPopup(
+      html`
+        <ox-popup-crontab-input .value=${this.value} .confirmCallback=${confirmCallback}></ox-popup-crontab-input>
+      `,
+      {
+        backdrop: true,
+        title: i18next.t('title.setting schedule'),
+        help: 'data-grist/grist-editor/crontab'
+      }
+    )
+  }
+}

package/src/ox-grist-editor-duration.ts

@@ -0,0 +1,62 @@
+import './ox-popup-duration-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-duration')
+export class OxGristEditorDuration extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    return html` <input type="text" .value=${this.value || ''} /> `
+  }
+
+  async firstUpdated() {
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.showEditorPopup()
+    })
+
+    this.showEditorPopup()
+  }
+
+  showEditorPopup() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    this.popup = openPopup(
+      html`
+        <ox-popup-duration-input .value=${this.value} .confirmCallback=${confirmCallback}></ox-popup-duration-input>
+      `,
+      {
+        backdrop: true,
+        title: i18next.t('title.setting schedule'),
+        help: 'data-grist/grist-editor/duration'
+      }
+    )
+  }
+}

package/src/{parameters/parameters-editor.ts → ox-grist-editor-parameters.ts}

@@ -2,36 +2,22 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './parameters-editor-builder.js'
-import './parameters-editor-popup.js'
+import './ox-parameters-builder.js'
+import './ox-popup-parameters-builder.js'
 
-import { ColumnConfig, GristRecord, InputEditor } from '@operato/data-grist'
-import { LitElement, css, html } from 'lit'
-import { PopupHandle, openPopup } from '@operato/layout'
-import { customElement, property } from 'lit/decorators.js'
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { cloneDeep } from 'lodash-es'
 
+import { OxGristEditor } from '@operato/data-grist'
 import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
 
-@customElement('ox-parameters-editor')
-export class ParametersEditor extends InputEditor {
-  static styles = css`
-    :host {
-      color: black;
-
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `
-
-  @property({ type: Object }) value: any
-  @property({ type: Object }) column!: ColumnConfig
-  @property({ type: Object }) record!: GristRecord
-  @property({ type: Number }) row!: number
-  @property({ type: Object }) field!: any
-
+@customElement('ox-grist-editor-parameters')
+export class OxGristEditorParameters extends OxGristEditor {
   private popup?: PopupHandle
 
-  render() {
+  get editorTemplate() {
     const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
     return html` ${value || ''} `
   }
@@ -78,7 +64,8 @@ export class ParametersEditor extends InputEditor {
     }
 
     try {
-      var value: any = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value
+      var value: any =
+        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})
     } catch (e) {
       var value: any = {}
     }
@@ -92,14 +79,14 @@ export class ParametersEditor extends InputEditor {
       따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
     */
     var template = html`
-      <ox-parameters-editor-popup
+      <ox-popup-parameters-builder
         .value=${value}
         .props=${spec}
         .host=${this.record}
         .context=${context}
         .confirmCallback=${confirmCallback}
       >
-      </ox-parameters-editor-popup>
+      </ox-popup-parameters-builder>
     `
 
     this.popup = openPopup(template, {

package/src/ox-grist-editor-partition-keys.ts

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-popup-partition-keys-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { cloneDeep } from 'lodash-es'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-partition-keys')
+export class OxGristEditorPartitionKeys extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    return html` ${value || ''} `
+  }
+
+  async firstUpdated() {
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.openSelector()
+    })
+
+    this.openSelector()
+  }
+
+  async openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const { name, help, objectified = false } = this.column.record?.options || {}
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: !objectified ? JSON.stringify(newval) : newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    try {
+      var value: any =
+        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})
+    } catch (e) {
+      var value: any = {}
+    }
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+    */
+    var template = html`
+      <ox-popup-partition-keys-input .value=${value} .confirmCallback=${confirmCallback}>
+      </ox-popup-partition-keys-input>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || i18next.t('field.partition-keys')} `,
+      help
+    })
+  }
+}

package/src/ox-grist-editor-value-map.ts

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-popup-value-map-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { cloneDeep } from 'lodash-es'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-value-map')
+export class OxGristEditorValueMap extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    return html` ${value || ''} `
+  }
+
+  async firstUpdated() {
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.openSelector()
+    })
+
+    this.openSelector()
+  }
+
+  async openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const { name, help, valuetype = 'string', objectified = false } = this.column.record?.options || {}
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: !objectified ? JSON.stringify(newval) : newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    try {
+      var value: any =
+        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})
+    } catch (e) {
+      var value: any = {}
+    }
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+    */
+    var template = html`
+      <ox-popup-value-map-input .value=${value} .valuetype=${valuetype} .confirmCallback=${confirmCallback}>
+      </ox-popup-value-map-input>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || i18next.t('field.value-map')} `,
+      help
+    })
+  }
+}

package/src/ox-grist-renderer-crontab.ts

@@ -0,0 +1,31 @@
+import cronstrue from 'cronstrue/i18n'
+import i18next from 'i18next'
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
+
+function onmouseover(e: Event) {
+  const element = e.target as HTMLSpanElement
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent!)
+  }
+}
+
+function onmouseout(e: Event) {
+  const element = e.target as HTMLSpanElement
+  element.removeAttribute('data-tooltip')
+}
+
+export const OxGristRendererCrontab: FieldRenderer = (value, column, record, rowIndex, field) => {
+  let text = ''
+
+  try {
+    const language = (i18next.language || 'en').substring(0, 2)
+    text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })
+  } catch (e) {
+    console.error(e)
+  }
+
+  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`
+}