Storybook

.changeset/beige-grapes-knock.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": minor
+---
+
+Fixed typo in exported type (`MiminalEnvironment` => `MinimalEnvironment`)

.changeset/dry-shoes-cover.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+Fixes setting shapes from dataset

.changeset/dull-baboons-suffer.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-wc-material": patch
+"@hydrofoil/shaperone-wc-vaadin": patch
+---
+
+Updated core package

.changeset/few-clouds-care.md

@@ -0,0 +1,7 @@
+---
+"@hydrofoil/shaperone-wc": patch
+"@hydrofoil/shaperone-wc-material": patch
+"@hydrofoil/shaperone-wc-vaadin": patch
+---
+
+Updated `lit` to v3

.changeset/hungry-guests-boil.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": patch
+---
+
+Native components: `xsd:decimal` would not accept decimal point as a valid input. 

.changeset/ninety-kiwis-kiss.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc": patch
+---
+
+Native templates: The ability to add and remove property values

.changeset/seven-monkeys-beam.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": minor
+---
+
+`configure` is now async and required to register the element

.changeset/six-islands-thank.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+When no shape is selected and only one `sh:NodeShape` exists in graph, that shape will be used

.changeset/wise-pumas-eat.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc": minor
+---
+
+Fixes an issue that the form would not render when the node was `<>` (empty string URI)

.github/workflows/build.yml

@@ -15,26 +15,43 @@ jobs:
 
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, "lts/*"]
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ matrix.node-version }}
       - run: npm ci
-      - run: yarn tsc --noEmit
+      - run: yarn tsc --noEmit --project tsconfig.build.json
       - run: yarn build
       - run: npx wsrun -m prepack --noEmit
 
-  test:
+  core-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: yarn test:core
+      - name: Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+  wtr-tests:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci
-      - run: yarn test
+      - run: yarn test:web --puppeteer
       - name: Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/netlify.yml

@@ -21,14 +21,16 @@ jobs:
 
       - uses: nelonoel/[email protected]
 
-      - run: npx typedoc
+      - run: npx typedoc --tsconfig tsconfig.build.json
       - name: Docsify variables
         env:
           DOMAIN: ${{ env.BRANCH_NAME == 'master' && 'forms.hypermedia.app' || format('{0}--shaperone.netlify.app', env.BRANCH_NAME) }}
         run: npx json -I -f dist/variables.json -e "this.playground='https://$DOMAIN/playground'"
 
+      - run: npm i -g [email protected]
+
       - name: Publish preview
-        uses: jsmrcaga/action-netlify-deploy@v2.1.0
+        uses: jsmrcaga/action-netlify-deploy@v2.3.0
         if: env.NETLIFY_TOKEN
         with:
           NETLIFY_AUTH_TOKEN: ${{ env.NETLIFY_TOKEN }}

.gitignore

@@ -10,6 +10,7 @@ coverage/
 dist/api/
 dist/playground/
 dist/shaperone-form/
+dist/storybook/
 !types/**/*.d.ts
 *.log
 !*.snap.js

codecov.yml

@@ -1,6 +1,6 @@
 ignore:
   - demos
-  - test-setup.js
+  - packages/core-tests/test-setup.js
   - karma.conf.js
   - types
   - packages/*/test

demos/examples/DescriptionTooltip.ts

@@ -1,6 +1,6 @@
-import { TemplateResult } from 'lit'
+import type { TemplateResult } from 'lit'
 import { html } from '@hydrofoil/shaperone-wc'
-import { ComponentDecorator } from '@hydrofoil/shaperone-core/models/components'
+import type { ComponentDecorator } from '@hydrofoil/shaperone-core/models/components'
 import type { PropertyShape } from '@rdfine/shacl'
 
 function wrap(shape: PropertyShape, result: TemplateResult) {

demos/examples/ErrorSummary/index.ts

@@ -1,4 +1,5 @@
-import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import type { FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import { decorate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html } from '@hydrofoil/shaperone-wc'
 import type { ValidationResult } from '@rdfine/shacl'
 import { shrink } from '@zazuko/prefixes/shrink'

demos/examples/InlineNestedShapes/index.ts

@@ -1,4 +1,5 @@
-import { SingleEditorComponent, html } from '@hydrofoil/shaperone-wc'
+import type { SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import { html } from '@hydrofoil/shaperone-wc'
 import { dash } from '@tpluscode/rdf-ns-builders'
 import { isResource } from 'is-graph-pointer'
 

demos/examples/LanguageMultiSelect/index.ts

@@ -1,10 +1,11 @@
-import { MultiEditorComponent, html } from '@hydrofoil/shaperone-wc'
+import type { MultiEditorComponent } from '@hydrofoil/shaperone-wc'
+import { html } from '@hydrofoil/shaperone-wc'
 import $rdf from '@zazuko/env/web.js'
-import { MultiEditor, Lazy } from '@hydrofoil/shaperone-core'
+import type { MultiEditor, Lazy } from '@hydrofoil/shaperone-core'
 import { vcard, rdfs } from '@tpluscode/rdf-ns-builders'
 import { getLocalizedLabel } from '@rdfjs-elements/lit-helpers'
 import { sort } from '@hydrofoil/shaperone-core/lib/components.js'
-import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
+import type { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
 
 const editor = $rdf.namedNode('http://example.com/LanguageMultiSelect')
 

demos/examples/NestedShapesIndividually/components.ts

@@ -1,5 +1,6 @@
 import { dash, rdfs, schema } from '@tpluscode/rdf-ns-builders'
-import { html, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import type { SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import { html } from '@hydrofoil/shaperone-wc'
 import type { GraphPointer } from 'clownface'
 
 function label(object?: GraphPointer) {

demos/examples/NestedShapesIndividually/renderer.ts

@@ -1,4 +1,5 @@
-import { decorate, FormTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import type { FormTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import { decorate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html, css } from '@hydrofoil/shaperone-wc'
 
 export const topmostFocusNodeFormRenderer = decorate((form: FormTemplate): FormTemplate => {

demos/examples/StarRating/index.ts

@@ -1,11 +1,12 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import type { IconName } from '@fortawesome/fontawesome-svg-core'
-import { html, SingleEditor, Lazy, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import type { SingleEditor, Lazy, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import { html } from '@hydrofoil/shaperone-wc'
 import type { UpdateComponentState } from '@hydrofoil/shaperone-core/models/components'
 import { schema, xsd } from '@tpluscode/rdf-ns-builders'
 import { dash } from '@tpluscode/rdf-ns-builders/loose'
 import type { PropertyShape } from '@rdfine/shacl'
-import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
+import type { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
 import rdf from '@zazuko/env/web.js'
 
 export interface StarRating {

demos/examples/XoneRenderer/index.ts

@@ -1,6 +1,7 @@
-import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import type { FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import { decorate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html } from '@hydrofoil/shaperone-wc'
-import { LogicalConstraint } from '@hydrofoil/shaperone-core/models/forms'
+import type { LogicalConstraint } from '@hydrofoil/shaperone-core/models/forms'
 import type { Shape } from '@rdfine/shacl'
 import type { Term } from '@rdfjs/types'
 import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'

demos/lit-html/package.json

@@ -56,6 +56,7 @@
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "util": "^0.12.5"
+    "util": "^0.12.5",
+    "vite-plugin-top-level-await": "^1.4.4"
   }
 }

demos/lit-html/src/configure.ts

@@ -10,21 +10,22 @@ import * as shoelaceComponents from '@hydrofoil/shaperone-wc-shoelace/components
 import { settings as shoelaceSettings } from '@hydrofoil/shaperone-wc-shoelace/settings.js'
 import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import { dash } from '@tpluscode/rdf-ns-builders'
-import { Decorate, RenderTemplate, templates } from '@hydrofoil/shaperone-wc/templates.js'
+import type { Decorate, RenderTemplate } from '@hydrofoil/shaperone-wc/templates.js'
+import { templates } from '@hydrofoil/shaperone-wc/templates.js'
 import * as MaterialRenderStrategy from '@hydrofoil/shaperone-wc-material/renderer/index.js'
 import shaperoneHydra from '@hydrofoil/shaperone-hydra'
 import { validate } from '@hydrofoil/shaperone-rdf-validate-shacl'
 import * as xone from '@hydrofoil/shaperone-playground-examples/XoneRenderer/index.js'
 import { errorSummary } from '@hydrofoil/shaperone-playground-examples/ErrorSummary/index.js'
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'
 import $rdf from './env.js'
-import { ComponentsState } from './state/models/components.js'
-import { RendererState } from './state/models/renderer.js'
+import type { ComponentsState } from './state/models/components.js'
+import type { RendererState } from './state/models/renderer.js'
 
 setBasePath('https://unpkg.com/@shoelace-style/shoelace/dist')
 shoelaceSettings.hoist = false
 
-const { editors, components, validation, renderer } = configure($rdf)
+const { editors, components, validation, renderer } = await configure($rdf)
 
 export const componentSets: Record<ComponentsState['components'], Record<string, Component>> = {
   native: { ...nativeComponents, starRating },

demos/lit-html/src/menu/formMenu.ts

@@ -1,8 +1,8 @@
 import { html, render } from 'lit'
-import { ComponentsState } from '../state/models/components.js'
-import { RendererState } from '../state/models/renderer.js'
+import type { ComponentsState } from '../state/models/components.js'
+import type { RendererState } from '../state/models/renderer.js'
 import { componentSets } from '../configure.js'
-import { Menu } from '../menu.js'
+import type { Menu } from '../menu.js'
 
 function componentsMenu(components: ComponentsState): Menu {
   return {

demos/lit-html/src/menu/resource.ts

@@ -1,8 +1,8 @@
-import { MultiselectComboBox } from 'multiselect-combo-box/multiselect-combo-box'
+import type { MultiselectComboBox } from 'multiselect-combo-box/multiselect-combo-box'
 import prefixes from '@zazuko/prefixes/prefixes'
 import rdf from '@zazuko/env/web.js'
-import { State } from '../state/models/resource.js'
-import { Menu } from '../menu.js'
+import type { State } from '../state/models/resource.js'
+import type { Menu } from '../menu.js'
 
 const resourceMenuItem = (() => {
   import('@vaadin/vaadin-combo-box/vaadin-combo-box.js')

demos/lit-html/src/shaperone-playground-lit.ts

@@ -9,12 +9,12 @@ import '@vaadin/vaadin-item/vaadin-item.js'
 import '@material/mwc-icon/mwc-icon.js'
 import '@vaadin-component-factory/vcf-tooltip'
 import type { ShaperoneForm } from '@hydrofoil/shaperone-wc'
-import '@hydrofoil/shaperone-wc/shaperone-form'
-import '@rdfjs-elements/rdf-editor'
+import '@rdfjs-elements/rdf-editor/rdf-editor.js'
 import '@github/clipboard-copy-element'
 import { connect } from '@captaincodeman/rdx'
 import type { Quad } from '@rdfjs/types'
-import { store, State, Dispatch } from './state/store.js'
+import type { State, Dispatch } from './state/store.js'
+import { store } from './state/store.js'
 import { shapeMenu } from './menu/shape.js'
 import { resourceMenu } from './menu/resource.js'
 import { formMenu } from './menu/formMenu.js'

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

@@ -1,8 +1,8 @@
 import { createModel } from '@captaincodeman/rdx'
 import { setLanguages } from '@rdfjs-elements/lit-helpers'
 import type { Store } from '../store.js'
-import { ComponentsState } from './components.js'
-import { RendererState } from './renderer.js'
+import type { ComponentsState } from './components.js'
+import type { RendererState } from './renderer.js'
 
 export interface State {
   sharePopup: boolean

demos/lit-html/src/state/store.ts

@@ -1,4 +1,5 @@
-import { createStore, devtools, ModelStore, StoreDispatch, StoreState, persist } from '@captaincodeman/rdx'
+import type { ModelStore, StoreDispatch, StoreState } from '@captaincodeman/rdx'
+import { createStore, devtools, persist } from '@captaincodeman/rdx'
 import { config } from './config.js'
 
 export type State = StoreState<typeof config>

demos/lit-html/vite.config.js

@@ -1,14 +1,17 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies,import/no-relative-packages */
+import topLevelAwait from 'vite-plugin-top-level-await'
 import { defineConfig, mergeConfig } from 'vite'
-// eslint-disable-next-line import/no-relative-packages
 import config from '../../vite.config.js'
 
 export default defineConfig(({ command }) => {
   if (command === 'build') {
     return mergeConfig(config, {
       base: '/playground/',
+      plugins: [topLevelAwait()],
     })
   }
 
-  return config
+  return mergeConfig(config, {
+    plugins: [topLevelAwait()],
+  })
 })

demos/storybook/.storybook/main.ts

@@ -0,0 +1,32 @@
+import { join, dirname } from 'node:path'
+import { StorybookConfig } from '@storybook/web-components-vite'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+const getAbsolutePath = (value: string) => {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+  ],
+
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+
+  staticDirs: [
+    '../shapes',
+    '../../../node_modules/@shoelace-style/'
+  ],
+
+  docs: {},
+}
+export default config

demos/storybook/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+<link rel="stylesheet" href="./shoelace/cdn/themes/light.css" />