wip: instances select editor

Author: tpluscode

demos/storybook/package.json

@@ -11,6 +11,7 @@
     "@coreui/react": "^5.4.1",
     "@coreui/coreui": "^5.2.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@hydrofoil/shaperone-core": "^0.12.1",
     "@hydrofoil/shaperone-wc": "^0.8.0",
     "@hydrofoil/shaperone-wc-material": "^0.6.1",
     "@hydrofoil/shaperone-wc-shoelace": "^0.4.1",
@@ -27,18 +28,21 @@
     "@storybook/components": "^8.4.5",
     "@storybook/web-components": "^8.4.5",
     "@storybook/web-components-vite": "^8.4.5",
+    "@tpluscode/rdf-ns-builders": "^4.3.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@zazuko/env": "^2",
     "lit": "^3",
     "onetime": "^7.0.0",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
+    "sparql-http-client": "^3.0.1",
     "storybook": "^8.4.5",
     "string-to-stream": "^3.0.1",
     "ts-deepmerge": "^7"
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/sparql-http-client": "^3"
   }
 }

demos/storybook/shapes/editors/dash/InstancesSelect/no-labels.data.ttl

@@ -0,0 +1,6 @@
+PREFIX ex: <http://example.org/>
+prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+prefix wd: <http://www.wikidata.org/entity/>
+
+ex:instance <http://schema.org/alumniOf> wd:Q184478 .
+

demos/storybook/shapes/editors/dash/InstancesSelect/no-labels.ttl

@@ -0,0 +1,24 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX wd: <http://www.wikidata.org/entity/>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<> a sh:NodeShape ;
+  sh:property
+    [
+      sh:path schema:alumniOf ;
+      sh:class wd:Q3918 ;
+      sh:name "Alma mater" ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+      dash:editor dash:InstancesSelectEditor ;
+    ] ;
+.
+
+wd:Q184478 a wd:Q3918 .
+wd:Q1860208 a wd:Q3918 .
+wd:Q49108 a wd:Q3918 .
+wd:Q34433 a wd:Q3918 .
+wd:Q35794 a wd:Q3918 .
+wd:Q13371 a wd:Q3918 .

demos/storybook/shapes/editors/dash/InstancesSelect/wikidata.ttl

@@ -1,3 +1,4 @@
+PREFIX dash: <http://datashapes.org/dash#>
 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
 PREFIX wd: <http://www.wikidata.org/entity/>
 PREFIX schema: <http://schema.org/>
@@ -11,6 +12,7 @@ PREFIX sh: <http://www.w3.org/ns/shacl#>
       sh:name "Alma mater" ;
       sh:minCount 1 ;
       sh:maxCount 1 ;
+      dash:editor dash:InstancesSelectEditor ;
     ] ;
 .
 

demos/storybook/stories/DASH/EnumSelectEditor.stories.ts

@@ -15,7 +15,7 @@ DASH is a set of auxiliary specifications by TopQuadrant's SHACL author Holger K
 
 DASH defines two types of editors: `dash:SingleEditor` and `dash:MultiEditor` which represent a user input element of a form.
 
-As the names imply, the former are editors for individual triple object while the latter replaces all values for a given property.
+As the names imply, the former are editors for individual triple's object while the latter replaces all values for a given property.
 
 It also provides a set of instances of the `dash:SingleEditor` type. The table below lists them and indicates which are implemented as [matchers](editors/matchers.md) and [components](components/implement.md) by shaperone. Below you will also find some additional information about some of them.
 
@@ -28,7 +28,7 @@ It also provides a set of instances of the `dash:SingleEditor` type. The table b
 | [`dash:DateTimePickerEditor`](http://datashapes.org/forms.html#DateTimePickerEditor)       | A calendar for selecting date and time                                                         | ✅       | ✅         |
 | [`dash:DetailsEditor`](http://datashapes.org/forms.html#DetailsEditor)                     | A drill-down-style editor for editing child focus nodes                                        | ✅       | ❌         |
 | [`dash:EnumSelectEditor`](http://datashapes.org/forms.html#EnumSelectEditor)               | A dropdown with choices from a closed set of elements                                          | ✅       | 🐲        |
-| [`dash:InstancesSelectEditor`](http://datashapes.org/forms.html#InstancesSelectEditor)     | A dropdown to choose among instances a specific type as indicated by `sh:class` shape property | ✅       | 🐉        |
+| [`dash:InstancesSelectEditor`](http://datashapes.org/forms.html#InstancesSelectEditor)     | A dropdown to choose among instances a specific type as indicated by `sh:class` shape property | ⚠️       | 🐲        |
 | [`dash:RichTextEditor`](http://datashapes.org/forms.html#RichTextEditor)                   | A text editor with formatting, which returns HTML markup                                       | ❌       | ❌         |
 | [`dash:TextAreaEditor`](http://datashapes.org/forms.html#TextAreaEditor)                   | Multiline text box                                                                             | ✅       | ✅         |
 | [`dash:TextFieldEditor`](http://datashapes.org/forms.html#TextFieldEditor)                 | Single line text box                                                                           | ✅       | ✅         |
@@ -37,5 +37,5 @@ It also provides a set of instances of the `dash:SingleEditor` type. The table b
 | [`dash:URIEditor`](http://datashapes.org/forms.html#URIEditor)                             | A text box for typing in URIs                                                                  | ✅       | ✅         |
 
 <CCallout color="info">
-Most of the default behaviour of components can be easily customized in your application. The [components page](components/implement.md) provides information about necessary implementation steps.
+Most of the default behaviour of components can be customized in your application. The [components page](components/implement.md) provides information about necessary implementation steps.
 </CCallout>

…esign Systems/Material Design.stories.ts …sign Systems/Material Design.stories._tsdemos/storybook/stories/Design Systems/Material Design.stories.ts renamed to demos/storybook/stories/Design Systems/Material Design.stories._ts demos/storybook/stories/Design Systems/Material Design.stories.ts renamed to demos/storybook/stories/Design Systems/Material Design.stories._ts

@@ -1,7 +1,8 @@
-import { Stories } from '@storybook/blocks';
+import { Markdown, Stories, Story } from '@storybook/blocks'
 import { CCallout } from '@coreui/react';
 import * as InstanceSelect from './InstancesSelectEditor.stories';
 import { Meta } from '@storybook/blocks'
+import fetchDecoratorRaw from './InstancesSelectEditor/fetch.ts?raw'
 
 # InstancesSelectEditor
 
@@ -12,6 +13,36 @@ an "instances selector" presents a dropdown, by default populated with instances
   [Hydra integration library](../?path=/docs/extensions-hydra--docs) can be used to extend the functionality of Instances Select editor so that instance data is dereferenced from external resources.
 </CCallout>
 
+<CCallout color="warning">
+  Because both the matcher of `dash:InstancesSelectEditor` and `dash:DetailsEditor` return `null` for similar
+  objects, it is advised to always explicitly set the `dash:editor`, or decorate the matchers.
+</CCallout>
+
+## Stories
+
 <Meta of={InstanceSelect}/>
 
-<Stories />
+### Resources by sh:class
+
+Just as with enum select, `rdfs:label` is used for option text
+
+<Story of={InstanceSelect.Wikidata} />
+
+### Resources without labels
+
+If the Shapes Graph does not contain `rdfs:label` for the options, the editor can request
+that the instance data can be fetched from the server and merged with the Shapes Graph.
+
+To do that, the editor must be wrapped in a decorator that provides the instance data.
+
+In the example below, such a decorator is presented which fetches instance data from Wikidata using its public SPARQL endpoint.
+
+<Markdown>
+  {`
+  \`\`\`ts
+${fetchDecoratorRaw}
+  \`\`\`
+  `}
+</Markdown>
+
+<Story of={InstanceSelect.WikidataNoLabels} />