chore: start some tests, add shoelace to playground

.eslintignore

@@ -1,3 +1,4 @@
 types/
 node_modules/
 dist/
+*.snap.js

demos/lit-html/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <meta name="Description" content="Put your description here.">
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />
   <script>try{new EventTarget}catch(e){document.write('<script src="https://unpkg.com/@ungap/[email protected]/min.js"><\x2fscript>')}</script>
 
   <style>

demos/lit-html/package.json

@@ -18,6 +18,7 @@
     "@hydrofoil/shaperone-wc": "0.7.2",
     "@hydrofoil/shaperone-wc-material": "0.5.5",
     "@hydrofoil/shaperone-wc-vaadin": "0.4.7",
+    "@hydrofoil/shaperone-wc-shoelace": "0.1.7",
     "@hydrofoil/shaperone-hydra": "0.3.9",
     "@hydrofoil/shaperone-rdf-validate-shacl": "1.0.0",
     "@material/mwc-icon": "^0.25",

demos/lit-html/src/configure.ts

@@ -6,6 +6,8 @@ import * as StarRating from '@hydrofoil/shaperone-playground-examples/StarRating
 import { component as starRating } from '@hydrofoil/shaperone-playground-examples/StarRating'
 import { DescriptionTooltip } from '@hydrofoil/shaperone-playground-examples/DescriptionTooltip'
 import * as vaadinComponents from '@hydrofoil/shaperone-wc-vaadin/components'
+import * as shoelaceComponents from '@hydrofoil/shaperone-wc-shoelace/components'
+import { settings as shoelaceSettings } from '@hydrofoil/shaperone-wc-shoelace/settings.js'
 import { components, editors, renderer, validation } from '@hydrofoil/shaperone-wc/configure'
 import { dash } from '@tpluscode/rdf-ns-builders'
 import { Decorate, RenderTemplate, templates } from '@hydrofoil/shaperone-wc/templates'
@@ -18,10 +20,13 @@ import { ComponentsState } from './state/models/components'
 import { RendererState } from './state/models/renderer'
 import { errorSummary } from '../../examples/ErrorSummary'
 
+shoelaceSettings.hoist = false
+
 export const componentSets: Record<ComponentsState['components'], Record<string, Component>> = {
   native: { ...nativeComponents, starRating },
   material: { ...nativeComponents, ...mwcComponents, languages: LanguageSelect.component('material'), starRating },
   vaadin: { ...nativeComponents, ...vaadinComponents, languages: LanguageSelect.component('lumo'), starRating },
+  shoelace: { ...nativeComponents, ...shoelaceComponents, starRating },
 }
 
 editors.addMetadata([...LanguageSelect.metadata(), ...StarRating.metadata()])

demos/lit-html/src/state/models/components.ts

@@ -1,7 +1,7 @@
 import { createModel } from '@captaincodeman/rdx'
 
 export interface ComponentsState {
-  components: 'native' | 'material' | 'vaadin'
+  components: 'native' | 'material' | 'vaadin' | 'shoelace'
   disableEditorChoice: boolean
 }
 
@@ -16,6 +16,7 @@ export const componentsSettings = createModel({
         case 'material':
         case 'native':
         case 'vaadin':
+        case 'shoelace':
           return { ...state, components }
         default:
           return state

packages/hydra/lib/components/multiInstanceSelector.ts

@@ -1,11 +1,11 @@
 import sh1 from '@hydrofoil/shaperone-core/ns.js'
 import { ComponentDecorator } from '@hydrofoil/shaperone-core/models/components'
 import { InstancesSelectEditor } from '@hydrofoil/shaperone-core/lib/components/instancesSelect'
-import { decorator as base } from './searchDecorator.js'
+import { decorator as searchDecorator } from './searchDecorator.js'
 
-export function decorator(...args: Parameters<typeof base>): ComponentDecorator<InstancesSelectEditor> {
+export function decorator(...args: Parameters<typeof searchDecorator>): ComponentDecorator<InstancesSelectEditor> {
   return {
-    ...base(...args),
+    ...searchDecorator(...args),
     applicableTo(component) {
       return component.editor.equals(sh1.InstancesMultiSelectEditor)
     },

packages/hydra/test/lib/components/multiInstanceSelector.test.ts

@@ -0,0 +1,17 @@
+import { expect } from '@open-wc/testing'
+import sh1 from '@hydrofoil/shaperone-core/ns.js'
+import { decorator } from '../../../lib/components/multiInstanceSelector'
+
+describe('hydra/lib/components/multiInstancesSelector', () => {
+  describe('decorator', () => {
+    it('applies to Multi Instances Selector', () => {
+      // given
+      const component = {
+        editor: sh1.InstancesMultiSelectEditor,
+      }
+
+      // then
+      expect(decorator().applicableTo(component)).to.be.true
+    })
+  })
+})

packages/wc-shoelace/README.md

@@ -5,6 +5,7 @@
 | Property     | Attribute    | Type                                             | Default |
 |--------------|--------------|--------------------------------------------------|---------|
 | `empty`      | `empty`      | `boolean`                                        | true    |
+| `hoist`      | `hoist`      | `boolean`                                        | true    |
 | `inputValue` | `inputValue` | `string`                                         | ""      |
 | `selected`   | `selected`   | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` |         |
 

packages/wc-shoelace/component-extras.ts

@@ -11,6 +11,7 @@ import { SlSelect } from '@shoelace-style/shoelace'
 import type { GraphPointer } from 'clownface'
 import { renderItem } from './lib/components.js'
 import { stop } from './lib/handlers.js'
+import { settings } from './settings.js'
 
 export const instancesMultiSelectEditor: Lazy<MultiEditorComponent> = {
   ...select,
@@ -41,7 +42,7 @@ export const instancesMultiSelectEditor: Lazy<MultiEditorComponent> = {
       }
 
       return html`
-        <sl-select hoist multiple clearable .value=${values} @sl-hide=${stop} @sl-change=${onChange}>
+        <sl-select ?hoist="${settings.hoist}" multiple clearable .value=${values} @sl-hide=${stop} @sl-change=${onChange}>
           ${repeat(pointers || [], renderItem)}
         </sl-select>
         <sl-button @click=${selectAll}>

packages/wc-shoelace/components.ts

@@ -6,7 +6,9 @@ import rdf from '@rdfjs/data-model'
 import { isGraphPointer, isLiteral } from 'is-graph-pointer'
 import type { GraphPointer } from 'clownface'
 
-export { autocomplete } from './editors/autocomplete.js'
+export { autocomplete } from './components/autocomplete.js'
+export { enumSelect } from './components/enumSelect.js'
+export { instancesSelect } from './components/instancesSelect.js'
 
 interface EditorState extends ComponentInstance {
   noLabel?: boolean
@@ -30,7 +32,7 @@ export const textFieldWithLang: Lazy<SingleEditorComponent<TextFieldWithLang>> =
   async lazyRender() {
     const [{ inputRenderer }] = await Promise.all([
       import('./renderer/input'),
-      import('./components/sh-sl-with-lang-editor'),
+      import('./elements/sh-sl-with-lang-editor'),
     ])
 
     function extractLanguage(ptr: GraphPointer | undefined) {

packages/wc-shoelace/editors/autocomplete.ts → packages/wc-shoelace/components/autocomplete.ts

@@ -4,25 +4,34 @@ import { dash, rdfs } from '@tpluscode/rdf-ns-builders'
 import { html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
-import { isNamedNode } from 'is-graph-pointer'
+import isGraphPointer from 'is-graph-pointer'
 import { NamedNode } from 'rdf-js'
 import { SingleEditorRenderParams } from '@hydrofoil/shaperone-core/models/components'
-import { renderItem } from '../lib/components'
+import type { GraphPointer } from 'clownface'
+import { renderItem } from '../lib/components.js'
+import { settings } from '../settings.js'
 
 interface Options {
   labelProperties: NamedNode | NamedNode[]
 }
 
-interface AutoCompleteEditor extends Core.AutoCompleteEditor {
+export interface AutoCompleteEditor extends Core.AutoCompleteEditor {
   initLabel(arg: SingleEditorRenderParams): void
 }
 
+declare module '@hydrofoil/shaperone-core/components' {
+  /* eslint-disable @typescript-eslint/no-empty-interface */
+  interface AutoComplete {
+    selected?: GraphPointer
+  }
+}
+
 export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
   ...Core.instancesSelect,
   labelProperties: rdfs.label,
   editor: dash.AutoCompleteEditor,
   async lazyRender() {
-    await import('../components/sh-sl-autocomplete.js')
+    await import('../elements/sh-sl-autocomplete.js')
 
     return (params, { update }) => {
       const { value } = params
@@ -49,7 +58,7 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
       }
 
       let nodeValue = value.object?.value
-      if (isNamedNode(value.object)) {
+      if (isGraphPointer.isNamedNode(value.object)) {
         const nodeUrl = new URL(value.object.value)
         nodeValue = nodeUrl.hash || nodeUrl.pathname
       }
@@ -59,7 +68,9 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
         <sh-sl-autocomplete .selected=${selected}
                             .inputValue=${localizedLabel(selected, { property: autocomplete.labelProperties, fallback })}
                             @search=${search}
-                            @itemSelected=${itemSelected}>
+                            @itemSelected=${itemSelected}
+                            .hoist="${settings.hoist}"
+        >
           ${repeat(pointers, renderItem)}
         </sh-sl-autocomplete>`
     }

packages/wc-shoelace/components/enumSelect.ts

@@ -0,0 +1,15 @@
+import { Lazy } from '@hydrofoil/shaperone-core'
+import * as Core from '@hydrofoil/shaperone-core/components.js'
+
+export const enumSelect: Lazy<Core.EnumSelectEditor> = {
+  ...Core.enumSelect,
+  async lazyRender() {
+    const { select } = await import('./select.js')
+
+    return ({ value, componentState }, { update }) => {
+      const pointers = componentState.instances || []
+
+      return select(value, pointers, update)
+    }
+  },
+}

packages/wc-shoelace/components/instancesSelect.ts

@@ -0,0 +1,15 @@
+import { Lazy } from '@hydrofoil/shaperone-core'
+import * as Core from '@hydrofoil/shaperone-core/components.js'
+
+export const instancesSelect: Lazy<Core.InstancesSelectEditor> = {
+  ...Core.instancesSelect,
+  async lazyRender() {
+    const { select } = await import('./select.js')
+
+    return ({ value, componentState }, { update }) => {
+      const pointers = componentState.instances || []
+
+      return select(value, pointers, update)
+    }
+  },
+}

packages/wc-shoelace/components/select.ts

@@ -0,0 +1,24 @@
+import { SingleEditorActions } from '@hydrofoil/shaperone-core/models/components'
+import { html } from 'lit'
+import '@shoelace-style/shoelace/dist/components/select/select.js'
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js'
+import type { GraphPointer } from 'clownface'
+import { repeat } from 'lit/directives/repeat.js'
+import { PropertyObjectState } from '@hydrofoil/shaperone-core/models/forms'
+import { SlSelect } from '@shoelace-style/shoelace'
+import { renderItem } from '../lib/components.js'
+import { stop } from '../lib/handlers.js'
+import { settings } from '../settings.js'
+
+export function select(value: PropertyObjectState, pointers: GraphPointer[], update: SingleEditorActions['update']) {
+  function onChange(e: Event) {
+    const target = e.target as SlSelect
+    const selected = pointers.find(({ value }) => value === target.value)
+
+    if (selected) { update(selected.term) }
+  }
+
+  return html`<sl-select ?hoist="${settings.hoist}" .value=${value.object?.value || ''} @sl-change=${onChange} @sl-hide=${stop}>
+    ${repeat(pointers || [], renderItem)}
+  </sl-select>`
+}

packages/wc-shoelace/custom-elements.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "sh-sl-autocomplete",
-      "path": "./components/sh-sl-autocomplete.ts",
+      "path": "./elements/sh-sl-autocomplete.ts",
       "attributes": [
         {
           "name": "selected",
@@ -18,6 +18,11 @@
           "name": "empty",
           "type": "boolean",
           "default": "true"
+        },
+        {
+          "name": "hoist",
+          "type": "boolean",
+          "default": "true"
         }
       ],
       "properties": [
@@ -37,6 +42,12 @@
           "attribute": "empty",
           "type": "boolean",
           "default": "true"
+        },
+        {
+          "name": "hoist",
+          "attribute": "hoist",
+          "type": "boolean",
+          "default": "true"
         }
       ],
       "events": [
@@ -50,7 +61,7 @@
     },
     {
       "name": "sh-sl-object",
-      "path": "./components/sh-sl-object.ts",
+      "path": "./elements/sh-sl-object.ts",
       "attributes": [
         {
           "name": "canBeRemoved",
@@ -81,7 +92,7 @@
     },
     {
       "name": "sh-sl-property",
-      "path": "./components/sh-sl-property.ts",
+      "path": "./elements/sh-sl-property.ts",
       "attributes": [
         {
           "name": "canAddValue",
@@ -130,7 +141,7 @@
     },
     {
       "name": "sh-sl-with-lang-editor",
-      "path": "./components/sh-sl-with-lang-editor.ts",
+      "path": "./elements/sh-sl-with-lang-editor.ts",
       "attributes": [
         {
           "name": "languages",

packages/wc-shoelace/components/sh-sl-autocomplete.ts → packages/wc-shoelace/elements/sh-sl-autocomplete.ts

@@ -23,11 +23,14 @@ export class ShSlAutocomplete extends LitElement {
   @property({ type: Boolean, reflect: true })
   empty = true
 
+  @property({ type: Boolean })
+  hoist = true
+
   @query('sl-input')
   _input!: SlInput
 
   render() {
-    return html`<sl-dropdown @sl-hide=${stop} hoist>
+    return html`<sl-dropdown @sl-hide=${stop} ?hoist="${this.hoist}">
       <sl-input slot="trigger"
                 .value=${this.inputValue}
                 @sl-input="${this.dispatchSearch}">

packages/wc-shoelace/package.json

@@ -30,6 +30,12 @@
     "is-graph-pointer": "^1.2.2",
     "lit": "^2"
   },
+  "devDependencies": {
+    "@open-wc/testing": "^3.1.6",
+    "@rdf-esm/dataset": "^0.5.1",
+    "@shaperone/testing": "*",
+    "clownface": "^1.5.1"
+  },
   "repository": "https://github.com/hypermedia-app/shaperone",
   "author": "Tomasz Pluskiewicz <[email protected]>",
   "license": "MIT",

packages/wc-shoelace/settings.ts

@@ -0,0 +1,7 @@
+interface Settings {
+  hoist: boolean
+}
+
+export const settings: Settings = {
+  hoist: true,
+}

packages/wc-shoelace/templates.ts

@@ -26,7 +26,7 @@ export const property: ShoelacePropertyTemplate = (renderer, { property: state }
 }
 
 property.loadDependencies = () => [
-  import('./components/sh-sl-property'),
+  import('./elements/sh-sl-property'),
 ]
 
 interface ShoelaceObjectTemplate extends ObjectTemplate {
@@ -43,7 +43,7 @@ export const object: ShoelaceObjectTemplate = renderer => html`
 `
 
 object.loadDependencies = () => [
-  import('./components/sh-sl-object'),
+  import('./elements/sh-sl-object'),
 ]
 
 export const focusNode: FocusNodeTemplate = (renderer, { focusNode: { groups } }) => {