@operato/app 1.5.49 → 1.5.50

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.5.49",
+  "version": "1.5.50",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -112,6 +112,7 @@
     "directory": "webcomponents/app"
   },
   "scripts": {
+    "clean": "npx rimraf dist",
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist",
@@ -120,29 +121,35 @@
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
-    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+    "storybook": "npm run build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "npm run build && build-storybook"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/language": "^6.9.3",
+    "@codemirror/state": "^6.3.3",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.5.49",
-    "@operato/data-grist": "^1.5.49",
-    "@operato/font": "^1.5.49",
+    "@operato/attachment": "^1.5.50",
+    "@operato/data-grist": "^1.5.50",
+    "@operato/font": "^1.5.50",
     "@operato/form": "^1.5.44",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.5.49",
+    "@operato/input": "^1.5.50",
     "@operato/layout": "^1.5.48",
-    "@operato/property-editor": "^1.5.49",
+    "@operato/property-editor": "^1.5.50",
     "@operato/shell": "^1.5.48",
     "@operato/styles": "^1.5.48",
     "@operato/utils": "^1.5.44",
-    "codemirror": "^5.64.0",
-    "codemirror-graphql": "^2.0.9",
+    "cm6-graphql": "^0.0.12",
+    "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
     "graphql": "^16.5.0",
@@ -182,5 +189,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f31c2176c17ea549d3626e063e6518879d0996a1"
+  "gitHead": "4e8d7b771ecb89da1a9b599d62dc1775b253d3bb"
 }

package/src/input/ox-input-graphql.ts

@@ -2,27 +2,24 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/autorefresh'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/addon/lint/lint'
-import 'codemirror-graphql/hint'
-import 'codemirror-graphql/lint'
-import 'codemirror-graphql/mode'
-
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
-import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
-import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-import CodeMirror from 'codemirror'
 import { fetch } from 'cross-fetch'
 import { print } from 'graphql'
-import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
+import { graphql } from 'cm6-graphql'
+
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { javascript } from '@codemirror/lang-javascript'
+import { EditorState } from '@codemirror/state'
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
+import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
 
 import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
 import { GRAPHQL_URI } from '@operato/graphql'
+import { OxFormField } from '@operato/input'
+import { togglefullscreen } from '@operato/utils'
 
 /**
  WEB Component for code-mirror graphql editor.
@@ -33,30 +30,18 @@ import { GRAPHQL_URI } from '@operato/graphql'
    </ox-input-graphql>
  */
 @customElement('ox-input-graphql')
-export default class OxInputGraphql extends LitElement {
+export default class OxInputGraphql extends OxFormField {
   static styles = [
-    css`
-      ${unsafeCSS(CodeMirrorStyle)}
-      ${unsafeCSS(FullScreenStyle)}
-         ${unsafeCSS(NightThemeStyle)}
-         ${unsafeCSS(LintStyle)}
-         ${unsafeCSS(ShowHintStyle)}
-    `,
     css`
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
         position: relative;
+        background: white;
       }
 
-      textarea {
-        display: block;
-        height: 100%;
-        width: 100%;
-        resize: none;
-        font-size: 16px;
-        line-height: 20px;
-        border: 0px;
-        padding: 0px;
+      .cm-editor {
+        flex: 1;
       }
     `
   ]
@@ -71,15 +56,15 @@ export default class OxInputGraphql extends LitElement {
 
   private _self_changing: boolean = false
   private _changed: boolean = false
-  private _editor?: CodeMirror.EditorFromTextArea
+  private _editor?: EditorView
 
   async updated(changes: PropertyValues<this>) {
-    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
-      if (changes.has('link')) {
-        this._editor = undefined
-      }
-      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))
-      // ;(await this.getEditor()).refresh()
+    const editor = await this.getEditor()
+    if (changes.has('value') && editor && !this._self_changing) {
+      const to = editor.state.doc.toString().length
+      editor.dispatch({
+        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+      })
     }
   }
 
@@ -110,60 +95,117 @@ export default class OxInputGraphql extends LitElement {
 
   async getEditor() {
     if (!this._editor) {
+      var schema
       try {
-        var schema = await this.getSchema()
+        schema = await this.getSchema()
       } catch (err) {
         console.error(err)
       }
 
-      if (this.textarea) {
-        this._editor = CodeMirror.fromTextArea(this.textarea, {
-          value: this.value,
-          mode: 'graphql',
-          lint: {
-            //@ts-ignore
-            schema
-          },
-          hintOptions: {
-            //@ts-ignore
-            schema
-          },
-          tabSize: 2,
-          lineNumbers: false,
-          showCursorWhenSelecting: true,
-          theme: 'night',
-          extraKeys: {
-            F11: function (cm) {
-              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+      this._editor = new EditorView({
+        doc: this.value,
+        extensions: [
+          bracketMatching(),
+          closeBrackets(),
+          history(),
+          autocompletion(),
+          oneDark,
+          syntaxHighlighting(oneDarkHighlightStyle),
+          graphql(schema, {
+            onShowInDocs(field, type, parentType) {
+              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)
             },
-            Esc: function (cm) {
-              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            onFillAllFields(view, schema, _query, cursor, token) {
+              alert(`Filling all fields. Token: ${token}`)
             }
-          },
-          autoRefresh: {
-            delay: 500
-          }
-        })
-
-        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
-          if (!this._changed) return
-
-          this.value = editor.getValue()
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        })
-
-        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
-          this._self_changing = true
-
-          this._changed = true
-
-          await this.requestUpdate()
-
-          this._self_changing = false
-        })
-      }
+          }),
+          highlightActiveLine(),
+          history(),
+          keymap.of([
+            ...historyKeymap,
+            indentWithTab,
+            {
+              key: 'Escape',
+              run: (view: EditorView) => {
+                togglefullscreen(this)
+                return true
+              }
+            }
+          ]),
+          EditorView.updateListener.of(v => {
+            if (v.docChanged) {
+              this._self_changing = true
+              this.value = v.state.doc.toString()
+              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+              requestAnimationFrame(() => {
+                this._self_changing = false
+              })
+            }
+          })
+        ],
+        parent: this.renderRoot
+      })
     }
 
     return this._editor
   }
+
+  // async getEditor() {
+  //   if (!this._editor) {
+  //     try {
+  //       var schema = await this.getSchema()
+  //     } catch (err) {
+  //       console.error(err)
+  //     }
+
+  //     if (this.textarea) {
+  //       this._editor = CodeMirror.fromTextArea(this.textarea, {
+  //         value: this.value,
+  //         mode: 'graphql',
+  //         lint: {
+  //           //@ts-ignore
+  //           schema
+  //         },
+  //         hintOptions: {
+  //           //@ts-ignore
+  //           schema
+  //         },
+  //         tabSize: 2,
+  //         lineNumbers: false,
+  //         showCursorWhenSelecting: true,
+  //         theme: 'night',
+  //         extraKeys: {
+  //           F11: function (cm) {
+  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+  //           },
+  //           Esc: function (cm) {
+  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+  //           }
+  //         },
+  //         autoRefresh: {
+  //           delay: 500
+  //         }
+  //       })
+
+  //       this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
+  //         if (!this._changed) return
+
+  //         this.value = editor.getValue()
+  //         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  //       })
+
+  //       this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
+  //         this._self_changing = true
+
+  //         this._changed = true
+
+  //         await this.requestUpdate()
+
+  //         this._self_changing = false
+  //       })
+  //     }
+  //   }
+
+  //   return this._editor
+  // }
 }

package/stories/ox-input-graphql.stories.ts

@@ -0,0 +1,58 @@
+import '../src/input/ox-input-graphql.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-graphql',
+  component: 'ox-input-graphql',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-graphql
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-graphql>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'code',
+  value: `
+query privileges {
+  privileges {
+    items {
+      privilege
+      category
+      description
+    }
+    total
+  }
+}
+`
+}