@operato/app 2.0.0-alpha.106 → 2.0.0-alpha.107

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.106",
+  "version": "2.0.0-alpha.107",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -134,22 +134,21 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^1.4.0",
-    "@operato/attachment": "^2.0.0-alpha.106",
-    "@operato/data-grist": "^2.0.0-alpha.106",
-    "@operato/font": "^2.0.0-alpha.106",
-    "@operato/form": "^2.0.0-alpha.106",
-    "@operato/graphql": "^2.0.0-alpha.57",
+    "@operato/attachment": "^2.0.0-alpha.107",
+    "@operato/data-grist": "^2.0.0-alpha.107",
+    "@operato/font": "^2.0.0-alpha.107",
+    "@operato/form": "^2.0.0-alpha.107",
+    "@operato/graphql": "^2.0.0-alpha.107",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.102",
-    "@operato/layout": "^2.0.0-alpha.102",
-    "@operato/property-editor": "^2.0.0-alpha.106",
-    "@operato/shell": "^2.0.0-alpha.102",
+    "@operato/input": "^2.0.0-alpha.107",
+    "@operato/layout": "^2.0.0-alpha.107",
+    "@operato/property-editor": "^2.0.0-alpha.107",
+    "@operato/shell": "^2.0.0-alpha.107",
     "@operato/styles": "^2.0.0-alpha.102",
     "@operato/utils": "^2.0.0-alpha.68",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
-    "cross-fetch": "^3.1.5",
     "graphql": "^16.5.0",
     "graphql-config": "^5.0.2",
     "graphql-tag": "^2.12.6",
@@ -187,5 +186,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5fc9756642e05c331c7f2e4b853d130f934a0442"
+  "gitHead": "32057ca0cb2c8ff542aca6d438d1ffbb77dc1cc8"
 }

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

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { fetch } from 'cross-fetch'
 import { print } from 'graphql'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'

package/stories/graphql-client.stories.ts

@@ -0,0 +1,73 @@
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '@operato/graphql/graphql-client.js'
+import '../src/input/ox-input-graphql.js'
+
+// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
+
+import { html, TemplateResult } from 'lit'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'graphql-client',
+  component: 'graphql-client',
+  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`
+  <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
+  }
+}
+`
+}

package/stories/ox-selector-resource-object.stories.ts

@@ -0,0 +1,98 @@
+import { html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '../src/selector/ox-selector-resource-object'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'ox-selector-resource-object',
+  component: 'ox-selector-resource-object',
+  argTypes: {
+    queryName: { control: 'string' },
+    value: { control: 'string' },
+    valueField: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  queryName: string
+  value?: string
+  valueField?: string
+}
+
+const Template: Story<ArgTypes> = ({ value = '', queryName, valueField }: ArgTypes) => html`
+  <style>
+    body {
+    }
+  </style>
+
+  <script>
+    const select = ['name', 'description']
+  </script>
+
+  <ox-selector-resource-object
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    value=${ifDefined(value)}
+    valueField=${ifDefined(valueField)}
+    .queryName=${queryName}
+    .confirmCallback=${(record: any) => console.log('confirm', record)}
+    .columns=${[
+      {
+        type: 'string',
+        name: 'id',
+        header: 'id',
+        hidden: true,
+        width: 100,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'name',
+        header: 'name',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: 'description',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      }
+    ]}
+    .list=${['name', 'description']}
+    .basicArgs=${''}
+  >
+  </ox-selector-resource-object>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: '',
+  queryName: 'entity',
+  valueField: 'id'
+}