wip: simpler component model

.changeset/silver-dots-pay.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-vaadin": minor
+---
+
+Updated to vaadin 23

.changeset/tasty-hounds-hope.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": major
+"@hydrofoil/shaperone-wc": major
+---
+
+Refactored the whole component model

.gitignore

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

demos/examples/package.json

@@ -17,7 +17,6 @@
     "@rdfjs-elements/lit-helpers": "^0.3.7",
     "@zazuko/prefixes": "^2.2.0",
     "is-graph-pointer": "^2",
-    "lit": "^2.0.0",
-    "multiselect-combo-box": "^3.0.0-alpha.2"
+    "lit": "^2.0.0"
   }
 }

demos/lit-html/package.json

@@ -32,17 +32,6 @@
     "@tpluscode/rdf-string": "^1.2.0",
     "@types/rdfjs__fetch-lite": "^3.0.10",
     "@shoelace-style/shoelace": "^2.15.0",
-    "@vaadin/vaadin-app-layout": "^22",
-    "@vaadin/vaadin-button": "^22",
-    "@vaadin/vaadin-checkbox": "^22",
-    "@vaadin/vaadin-combo-box": "^22",
-    "@vaadin/vaadin-dialog": "^22",
-    "@vaadin/vaadin-item": "^22",
-    "@vaadin/vaadin-select": "^22",
-    "@vaadin/vaadin-menu-bar": "^22",
-    "@vaadin/vaadin-split-layout": "^22",
-    "@vaadin/vaadin-text-field": "^22",
-    "@vaadin-component-factory/vcf-tooltip": "^22.0.0",
     "@zazuko/env": "^2.1.0",
     "@zazuko/prefixes": "^2.2.0",
     "alcaeus": "^3.0.0",

demos/storybook/.storybook/main.ts

@@ -1,5 +1,6 @@
 import { join, dirname } from 'node:path'
 import { StorybookConfig } from '@storybook/web-components-vite'
+import remarkGfm from 'remark-gfm';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -15,6 +16,16 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
 
   framework: {
@@ -24,7 +35,8 @@ const config: StorybookConfig = {
 
   staticDirs: [
     '../shapes',
-    '../../../node_modules/@shoelace-style/'
+    '../../../node_modules/@shoelace-style/',
+    '../_media'
   ],
 
   docs: {},

demos/storybook/.storybook/preview.tsx

@@ -1,3 +1,5 @@
+import '@coreui/coreui/dist/css/coreui.min.css'
+
 import { SyntaxHighlighter } from '@storybook/components'
 import turtle from 'react-syntax-highlighter/dist/esm/languages/prism/turtle.js'
 import { withActions } from '@storybook/addon-actions/decorator'
@@ -24,6 +26,19 @@ window.EventEmitter = EventEmitter;
 const preview = {
   tags: ['autodocs'],
   parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Getting Started',
+          'Shaperone anatomy',
+          'Basic Usage',
+          'Editors',
+          ['Introduction', '*', 'DASH', ['DASH Forms']],
+          'Design Systems',
+        ],
+      },
+    },
     controls: {
       disableSaveFromUI: true,
     },
@@ -65,7 +80,7 @@ const preview = {
     if (args.data) {
       data = $rdf.clownface({
         dataset: await $rdf.dataset()
-          .import($rdf.formats.parsers.import('text/turtle', stringToStream(args.data))!),
+          .import($rdf.formats.parsers.import('text/turtle', stringToStream(args.data.toString()))!),
       })
     }
 

demos/storybook/data/rating.ttl

@@ -0,0 +1,7 @@
+PREFIX ex: <http://example.org/>
+PREFIX schema: <http://schema.org/>
+
+ex:rating
+  a schema:AggregateRating ;
+  schema:ratingValue 4.5 ;
+.

demos/storybook/lib/shaperone-demo.ts

@@ -11,6 +11,7 @@ customElements.define('shaperone-demo', class extends LitElement {
   declare shapesGraph: string
   declare splitterPosition: number
   declare prefixes: string
+  declare customPrefixes: Record<string, string>
 
   constructor() {
     super()
@@ -60,6 +61,7 @@ customElements.define('shaperone-demo', class extends LitElement {
       dataGraph: { type: String },
       shapesGraph: { type: String },
       prefixes: { type: String },
+      customPrefixes: { type: Object },
     }
   }
 
@@ -108,6 +110,7 @@ customElements.define('shaperone-demo', class extends LitElement {
                      formats="text/turtle,application/ld+json,application/n-triples"
                      input-format="text/n3"
                      prefixes="${this.prefixes}"
+                     .customPrefixes="${this.customPrefixes}"
                      .input="${this.dataGraph}"></rdf-snippet>
       </fieldset>
     `

demos/storybook/package.json

@@ -5,15 +5,21 @@
   "type": "module",
   "scripts": {
     "start": "storybook dev -p 6006 --no-open",
-    "build": "storybook build -o ../../dist/storybook"
+    "build": "storybook build -o ../../dist/docs"
   },
   "dependencies": {
+    "@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",
+    "@hydrofoil/shaperone-wc-vaadin": "^0.5.1",
     "@rdfjs/fetch-lite": "^3.3.0",
     "@rdfjs-elements/rdf-snippet": "^0.4.5",
     "@rdfjs-elements/formats-pretty": "^0.6.7",
+    "@shaperone/testing": "*",
     "@shoelace-style/shoelace": "^2.15.0",
     "@storybook/addon-actions": "^8.4.5",
     "@storybook/addon-essentials": "^8.4.5",
@@ -23,16 +29,22 @@
     "@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",
+    "@tpluscode/rdf-string": "^1.3.4",
     "@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"
+    "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/AutoComplete/local.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:AutoCompleteEditor ;
+    ] ;
+.
+
+wd:Q184478 a wd:Q3918 ; rdfs:label "University of California" .
+wd:Q1860208 a wd:Q3918 ; rdfs:label "National University of Ireland" .
+wd:Q49108 a wd:Q3918 ; rdfs:label "Massachusetts Institute of Technology" .
+wd:Q34433 a wd:Q3918 ; rdfs:label "University of Oxford" .
+wd:Q35794 a wd:Q3918 ; rdfs:label "University of Cambridge" .
+wd:Q13371 a wd:Q3918 ; rdfs:label "Harvard University" .

demos/storybook/shapes/editors/dash/BooleanSelect/defaultFalse.ttl

@@ -0,0 +1,16 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:name "boolean select" ;
+      sh:path schema:value ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+      dash:editor dash:BooleanSelectEditor ;
+      sh:defaultValue false ;
+    ] ;
+.

demos/storybook/shapes/editors/dash/BooleanSelect/minimal.ttl

@@ -0,0 +1,15 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:name "boolean select" ;
+      sh:path schema:value ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+      dash:editor dash:BooleanSelectEditor ;
+    ] ;
+.

demos/storybook/shapes/editors/dash/DatePicker/minimal.ttl

@@ -0,0 +1,14 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX ex: <http://example.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property [
+    sh:path ex:datePicker ;
+    sh:name "date" ;
+    dash:editor dash:DatePickerEditor ;
+                sh:minCount 1 ;
+                sh:maxCount 1 ;
+  ] ;
+.

demos/storybook/shapes/editors/dash/DateTimePicker/minimal.ttl

@@ -0,0 +1,15 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX ex: <http://example.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:path ex:datePicker ;
+      sh:name "date time" ;
+      dash:editor dash:DateTimePickerEditor ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.

demos/storybook/shapes/editors/dash/Details/node-label.ttl

@@ -0,0 +1,31 @@
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:targetClass schema:Thing ;
+  sh:property
+    [
+      sh:name "nested resource" ;
+      sh:path schema:value ;
+      dash:editor dash:DetailsEditor ;
+      sh:node <ChildShape> ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.
+
+<ChildShape>
+  a sh:NodeShape ;
+  rdfs:label "Child Resource" ;
+  sh:property
+    [
+      sh:name "name" ;
+      sh:path schema:name ;
+      dash:editor dash:TextFieldEditor ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.

demos/storybook/shapes/editors/dash/Details/sh-node.ttl

@@ -0,0 +1,30 @@
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:targetClass schema:Thing ;
+  sh:property
+    [
+      sh:name "nested resource" ;
+      sh:path schema:value ;
+      dash:editor dash:DetailsEditor ;
+      sh:node <ChildShape> ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.
+
+<ChildShape>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:name "name" ;
+      sh:path rdfs:label ;
+      dash:editor dash:TextFieldEditor ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.

demos/storybook/shapes/editors/dash/EnumSelect/iris.ttl

@@ -0,0 +1,22 @@
+PREFIX lexvo: <http://lexvo.org/id/iso639-1/>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX ex: <http://example.org/>
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:name "Language" ;
+      sh:path schema:language ;
+      dash:editor dash:EnumSelectEditor ;
+      sh:in ( lexvo:en lexvo:de lexvo:fr ) ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ]
+.
+
+lexvo:en rdfs:label "English" .
+lexvo:de rdfs:label "German" .

demos/storybook/shapes/editors/dash/EnumSelect/strings.ttl

@@ -0,0 +1,16 @@
+PREFIX dash: <http://datashapes.org/dash#>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<>
+  a sh:NodeShape ;
+  sh:property
+    [
+      sh:name "Category" ;
+      sh:path schema:category ;
+      dash:editor dash:EnumSelectEditor ;
+      sh:in ( "RDF" "SPARQL" "HTML" ) ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ]
+.

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 .
+