refactor: remove renderer

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/stories/Design Systems/Vaadin/Editors/BooleanSelect.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import { configure } from '../configure.js'
+import booleanSelect from '../../../../shapes/editors/dash/BooleanSelect/minimal.ttl?raw'
+import defaultFalseShape from '../../../../shapes/editors/dash/BooleanSelect/defaultFalse.ttl?raw'
+
+const meta: Meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+/**
+ * Without a value, the checkbox is in an indeterminate state
+ */
+export const empty = createStory({
+  name: 'Indeterminate state',
+  shapes: booleanSelect,
+})(configure)
+
+/**
+ * Make sure to set `sh:defaultValue false` to render an initially unchecked box
+ */
+export const defaultFalse = createStory({
+  name: 'Undefined state',
+  shapes: defaultFalseShape,
+})(configure)
+
+export const prefilled = createStory({
+  name: 'Bound (true)',
+  shapes: booleanSelect,
+  data: '<http://example.com/> <http://schema.org/value> true .',
+  focusNode: 'http://example.com/',
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/EnumSelectEditor.stories.ts

@@ -0,0 +1,29 @@
+import type { StoryObj as Story } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import enumStrings from '../../../../shapes/editors/dash/EnumSelect/strings.ttl?raw'
+import enumIris from '../../../../shapes/editors/dash/EnumSelect/iris.ttl?raw'
+import { configure } from '../configure.js'
+
+const meta = {
+  ...defaultMeta,
+}
+
+export default meta
+export const Literals: Story = createStory({
+  name: 'Choice of literals',
+  shapes: enumStrings,
+})(configure)
+
+/**
+ * Values can also be provided as resources.
+ * They must be IRIs, present in the Shapes Graph, and `rdfs:label` property will be used as the option text.
+ *
+ * Missing labels will be rendered as the IRI itself.
+ */
+export const Resources: Story = createStory({
+  name: 'Choice of IRIs',
+  shapes: enumIris,
+  customPrefixes: {
+    lexvo: 'http://lexvo.org/id/iso639-1/',
+  },
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/InstancesSelectEditor.stories.ts

@@ -0,0 +1,19 @@
+import type { StoryObj as Story } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import instances from '../../../../shapes/editors/dash/InstancesSelect/wikidata.ttl?raw'
+import { configure } from '../configure.js'
+
+const meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+export const Wikidata: Story = createStory({
+  name: 'Resources by sh:class',
+  shapes: instances,
+  prefixes: ['rdfs'],
+  customPrefixes: {
+    wd: 'http://www.wikidata.org/entity/',
+  },
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/TextArea.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import { configure } from '../configure.js'
+import textArea from '../../../../shapes/editors/dash/TextArea/basic.ttl?raw'
+
+const meta: Meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+export const empty = createStory({
+  name: 'Empty',
+  shapes: textArea,
+})(configure)
+
+export const prefilled = createStory({
+  name: 'Bound to existing data',
+  shapes: textArea,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world" .',
+  focusNode: 'http://example.com/',
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/TextAreaWithLang.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import { configure } from '../configure.js'
+import textAreaWithLang from '../../../../shapes/editors/dash/TextAreaWithLang/basic.ttl?raw'
+import limitedLangsShape from '../../../../shapes/editors/dash/TextAreaWithLang/limited-langs.ttl?raw'
+
+const meta: Meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+export const empty = createStory({
+  name: 'Empty',
+  shapes: textAreaWithLang,
+})(configure)
+
+export const prefilled = createStory({
+  name: 'Bound to existing data',
+  shapes: textAreaWithLang,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world"@en .',
+  focusNode: 'http://example.com/',
+})(configure)
+
+export const limitedLangs = createStory({
+  name: 'With sh:languageIn',
+  shapes: limitedLangsShape,
+})(configure)
+
+export const limitedLangsPrefilled = createStory({
+  name: 'Bound to existing data (with sh:languageIn)',
+  shapes: limitedLangsShape,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world"@en .',
+  focusNode: 'http://example.com/',
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/TextField.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import { configure } from '../configure.js'
+import textField from '../../../../shapes/editors/dash/TextField/basic.ttl?raw'
+
+const meta: Meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+export const empty = createStory({
+  name: 'Empty',
+  shapes: textField,
+})(configure)
+
+export const prefilled = createStory({
+  name: 'Bound to existing data',
+  shapes: textField,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world" .',
+  focusNode: 'http://example.com/',
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/Editors/TextFieldWithLang.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta } from '@storybook/web-components'
+import { createStory, defaultMeta } from '../../../common.js'
+import { configure } from '../configure.js'
+import textFieldWithLang from '../../../../shapes/editors/dash/TextFieldWithLang/basic.ttl?raw'
+import limitedLangsShape from '../../../../shapes/editors/dash/TextFieldWithLang/limited-langs.ttl?raw'
+
+const meta: Meta = {
+  ...defaultMeta,
+}
+
+export default meta
+
+export const empty = createStory({
+  name: 'Empty',
+  shapes: textFieldWithLang,
+})(configure)
+
+export const prefilled = createStory({
+  name: 'Bound to existing data',
+  shapes: textFieldWithLang,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world"@en .',
+  focusNode: 'http://example.com/',
+})(configure)
+
+export const limitedLangs = createStory({
+  name: 'With sh:languageIn',
+  shapes: limitedLangsShape,
+})(configure)
+
+export const limitedLangsPrefilled = createStory({
+  name: 'Bound to existing data (with sh:languageIn)',
+  shapes: limitedLangsShape,
+  data: '<http://example.com/> <http://schema.org/value> "Hello world"@en .',
+  focusNode: 'http://example.com/',
+})(configure)

demos/storybook/stories/Design Systems/Vaadin/configure.ts

@@ -1,6 +1,7 @@
 import type { ConfigCallback } from '@hydrofoil/shaperone-wc'
-import { editors } from '@hydrofoil/shaperone-wc-vaadin'
+import { editors, layout } from '@hydrofoil/shaperone-wc-vaadin'
 
-export const configure: ConfigCallback = ({ components }) => {
+export const configure: ConfigCallback = ({ components, renderer }) => {
   components.pushComponents(editors)
+  renderer.pushComponents(layout)
 }