.
+ `
+ @property({ type: String })
+ accessor whichSubject = 'me'
+
+ @property({ type: String })
+ accessor subjectTurtleFormatSource = ''
+
+ @property({ type: String })
+ accessor subjectName = ''
+
+ @property({ type: String })
+ set subjectURI (value: string) {
+ try {
+ this._parsedUrl2 = new URL(value)
+ } catch {
+ this._parsedUrl2 = null // Handle invalid URL
+ }
+ }
+
+ get subjectURI (): string {
+ return this._parsedUrl2 ? this._parsedUrl2.href : ''
+ }
+
+ render () {
+ // TODO: detect format
+ loadDocument(store, this.rdfTurtleFormatSource + this.defaultContexts, this.rdfName, this.rdfURI) // load form
+ loadDocument(store, this.subjectTurtleFormatSource + this.defaultContexts, this.subjectName, this.subjectURI) // load data
+ const document = sym(this.rdfURI) // rdflib NamedNode for the document
+ const exactForm = this.whichForm // If there are more 'a ui:Form' elements in a form file
+ const formThis = Namespace(this.rdfURI + '#')(exactForm) // NamedNode for #this in the form
+ console.log('formThis:', formThis.value)
+
+ const parts = store.each(formThis, ns.ui('parts'), null, document)
+ const partsBySequence = sortBySequence(store, parts)
+ const partItems = (partsBySequence || []).flatMap(item => {
+ if (item && typeof item === 'object' && 'elements' in item && Array.isArray((item as any).elements)) {
+ return (item as any).elements
+ }
+ return [item]
+ })
+ const uiFields = partItems.map(item => {
+ const types = store.each(item as any, ns.rdf('type'), null, document)
+ const typeNode = types[0]
+ const value = typeNode ? ((typeNode as any).value || String(typeNode)) : ((item as any).value || String(item))
+ const hashIndex = value.lastIndexOf('#')
+ return hashIndex >= 0 ? value.slice(hashIndex + 1) : value
+ })
+ console.log('parts:', parts)
+ console.log('partsBySequence:', partsBySequence)
+ console.log('partItems:', partItems)
+ console.log('document:', document)
+ console.log('exactForm:', exactForm)
+ console.log('uiFields:', uiFields)
+
+ return html`
+ ${uiFields.map(part => {
+ switch (part) {
+ case 'PhoneField':
+ case 'EmailField':
+ case 'ColorField':
+ case 'DateField':
+ case 'DateTimeField':
+ case 'TimeField':
+ case 'NumericField':
+ case 'IntegerField':
+ case 'DecimalField':
+ case 'FloatField':
+ case 'TextField':
+ case 'SingleLineTextField':
+ case 'NamedNodeURIField':
+ return html` `
+ case 'MultiLineTextField':
+ return html``
+ case 'BooleanField':
+ return html``
+ case 'TristateField':
+ return html``
+ case 'Classifier':
+ return html``
+ case 'Choice':
+ return html``
+ case 'Multiple':
+ return html``
+ case 'Options':
+ return html``
+ case 'AutocompleteField':
+ return html``
+ case 'Comment':
+ case 'Heading':
+ return html``
+ default:
+ return html`Unknown part type: ${part}
`
+ }
+ })}
+ `
+ }
+}
diff --git a/src/components/rdf-form/RDForm.stories.ts b/src/components/rdf-form/RDForm.stories.ts
new file mode 100644
index 000000000..0305b0e2e
--- /dev/null
+++ b/src/components/rdf-form/RDForm.stories.ts
@@ -0,0 +1,114 @@
+import { html } from 'lit'
+import { defineStoryRender } from '../../storybook'
+import './RDFForm'
+
+const meta = {
+ title: 'Design System/RDF Form',
+ args: {
+ rdfTurtleFormatSource: `
+ @prefix : .
+ @prefix foaf: .
+ @prefix sched: .
+ @prefix cal: .
+ @prefix dc: .
+ @prefix rdfs: .
+ @prefix ui: .
+ @prefix trip: .
+ @prefix vcard: .
+ @prefix xsd: .
+
+ # A Form with 2 fields and a nested subgroup
+
+ :form a ui:Form;
+ ui:parts (:nameField :emailField :addresses) .
+
+ :nameField a ui:SingleLineTextField ;
+ ui:property vcard:fn;
+ ui:label "name" .
+
+ :emailField a ui:EmailField ;
+ ui:property vcard:hasEmail; # @@ check
+ ui:label "email" .
+
+ :addresses
+ a ui:Multiple ; # -- Allows zero or one or more
+ ui:part :oneAddress ;
+ ui:property vcard:hasAddress .
+
+ :oneAddress
+ a ui:Group ; # A subgroup of the main form
+ ui:parts ( :street :locality :postcode :region :country ).
+
+ :street
+ a ui:SingleLineTextField ;
+ ui:maxLength "128" ;
+ ui:property vcard:street-address ;
+ ui:size "40" .
+
+ :locality
+ a ui:SingleLineTextField ;
+ ui:maxLength "128" ;
+ ui:property vcard:locality ;
+ ui:size "40" .
+
+ :postcode
+ a ui:SingleLineTextField ;
+ ui:maxLength "25" ;
+ ui:property vcard:postal-code ;
+ ui:size "25" .
+
+ :region
+ a ui:SingleLineTextField ;
+ ui:maxLength "128" ;
+ ui:property vcard:region ;
+ ui:size "40" .
+
+ :country
+ a ui:SingleLineTextField ;
+ ui:maxLength "128" ;
+ ui:property vcard:country-name ;
+ ui:size "40" .
+ `,
+ rdfURI: 'https://solidos.solidcommunity.net/public/2021/solidUiFormTestData/dummyFormTestFile.ttl', // we need a working URL
+ whichForm: 'form',
+ rdfName: 'dummyFormTestFile.ttl',
+ whichSubject: 'me',
+ subjectTurtleFormatSource: `
+ @prefix : .
+
+ :me a vcard:Individual ;
+ vcard:fn "Alice" ;
+ vcard:hasEmail .
+ `,
+ subjectName: 'alice.ttl',
+ subjectURI: 'https://solidos.solidcommunity.net/public/2021/alice.ttl'
+ },
+
+ argTypes: {
+ rdfTurtleFormatSource: { control: 'text' },
+ rdfURI: { control: 'text' },
+ whichForm: { control: 'text' },
+ rdfName: { control: 'text' },
+ subjectTurtleFormatSource: { control: 'text' },
+ subjectName: { control: 'text' },
+ subjectURI: { control: 'text' }
+ },
+} as const
+
+const render = defineStoryRender(({ rdfTurtleFormatSource, rdfURI, whichForm, rdfName, subjectTurtleFormatSource, subjectName, subjectURI }) => {
+ return html`
+
+
+ `
+})
+
+export default meta
+
+export const Primary = { render }
diff --git a/src/components/rdf-form/index.ts b/src/components/rdf-form/index.ts
new file mode 100644
index 000000000..487b3a932
--- /dev/null
+++ b/src/components/rdf-form/index.ts
@@ -0,0 +1,4 @@
+import RDFForm from './RDFForm'
+
+export { RDFForm }
+export default RDFForm
diff --git a/src/components/rdf-input/RDFInput.ts b/src/components/rdf-input/RDFInput.ts
new file mode 100644
index 000000000..402c9ee84
--- /dev/null
+++ b/src/components/rdf-input/RDFInput.ts
@@ -0,0 +1,72 @@
+import { property } from 'lit/decorators.js'
+import { html } from 'lit/html.js'
+import ns from '../../lib/ns'
+import { customElement, WebComponent } from '@/lib/components'
+import { LiveStore, NamedNode } from 'rdflib'
+import { label } from '../../utils'
+import { mostSpecificClassURI } from '../../lib/forms/rdfFormsHelper'
+import { fieldParams, InputType } from '../../lib/forms/fieldParams'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+@customElement('solid-ui-rdf-input')
+export default class RDFInput extends WebComponent {
+ // example RDF Turtle format source:
+ // :nameField a ui:SingleLineTextField ;
+ // ui:property vcard:fn;
+ // ui:label "name" .
+
+ // store needs to contain the form and also the data it applies to
+ @property({ type: LiveStore })
+ accessor store
+
+ // form here is the subject :nameField
+ @property({ type: String })
+ accessor formSubject
+
+ @property({ type: String })
+ accessor inputSubject
+
+ render () {
+ // HTML input part
+ const uiPropertyTerm = this.store.any(this.formSubject, ns.ui('property')) as NamedNode | undefined
+ const uiProperty = uiPropertyTerm ? label(uiPropertyTerm, true) : ''
+ const uiLabel = this.store.any(this.formSubject, ns.ui('label'))
+ const inputLabel = uiLabel ? uiLabel.value : uiProperty
+ // readonly
+ let readonly = false
+ // TODO: I am not finding suppressEmptyUneditable in ui ontology
+ const suppressEmptyUneditable = this.store.anyJS(this.formSubject, ns.ui('suppressEmptyUneditable'))
+ if (suppressEmptyUneditable) {
+ readonly = true
+ }
+
+ const uri = mostSpecificClassURI(this.store, this.formSubject)
+ const params = fieldParams[uri] ?? {}
+ const inputType: InputType = params.type ?? 'text'
+
+ // input values
+ const defaultInputValueFromStore = this.store.any(this.formSubject, ns.ui('default'))
+ const inputValueFromStore = this.store.any(this.inputSubject, ns.ui('property'))
+
+ let inputTerm: string | undefined
+
+ const term = inputValueFromStore || defaultInputValueFromStore
+ if (term && 'value' in term && term.value) {
+ const decoded = decodeURIComponent(term.value)
+ inputTerm = params.defaultInputValue
+ ? decoded.replace(params.defaultInputValue, '').replace(/ /g, '')
+ : decoded
+ }
+
+ if (inputLabel) {
+ return html`
+
+
+ `
+ } else {
+ return html`
+
+ `
+ }
+ }
+}
diff --git a/src/components/rdf-input/index.ts b/src/components/rdf-input/index.ts
new file mode 100644
index 000000000..bffe87ff2
--- /dev/null
+++ b/src/components/rdf-input/index.ts
@@ -0,0 +1,4 @@
+import RDFInput from './RDFInput'
+
+export { RDFInput }
+export default RDFInput
diff --git a/src/lib/forms/fieldParams.ts b/src/lib/forms/fieldParams.ts
new file mode 100644
index 000000000..6f8342f2b
--- /dev/null
+++ b/src/lib/forms/fieldParams.ts
@@ -0,0 +1,140 @@
+import ns from '../../lib/ns'
+import { style } from '../../lib/style'
+
+export type InputType =
+ | 'hidden'
+ | 'text'
+ | 'search'
+ | 'tel'
+ | 'url'
+ | 'email'
+ | 'password'
+ | 'datetime'
+ | 'date'
+ | 'month'
+ | 'week'
+ | 'time'
+ | 'datetime-local'
+ | 'number'
+ | 'range'
+ | 'color'
+ | 'checkbox'
+ | 'radio'
+ | 'file'
+ | 'submit'
+ | 'image'
+ | 'reset'
+ | 'button'
+
+export type FieldParamsObject = {
+ size?: number, // input element size attribute
+ type?: InputType, // input element type attribute. Default: 'text' (not for Comment and Heading)
+ element?: string, // element type to use (Comment and Heading only)
+ style?: string, // style to use
+ dt?: string, // xsd data type for the RDF Literal corresponding to the field value. Default: xsd:string
+ defaultInputValue?: string, // e.g. 'mailto:'. Default value in input field, will be removed when displaying actual value to user.
+ namedNode?: boolean, // if true, field value corresponds to the URI of an RDF NamedNode. Overrides dt and defaultInputValue.
+ pattern?: RegExp // for client-side input validation; field will go red if violated, green if ok
+}
+
+/**
+ * The fieldParams object defines various constants
+ * for use in various form fields. Depending on the
+ * field in questions, different values may be read
+ * from here.
+ */
+export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
+ /**
+ * Text field
+ *
+ * For possible date popups see e.g. http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
+ * or use HTML5: http://www.w3.org/TR/2011/WD-html-markup-20110113/input.date.html
+ */
+ [ns.ui('ColorField').uri]: {
+ size: 9,
+ type: 'color',
+ style: 'height: 3em;', // around 1.5em is padding
+ dt: 'color',
+ pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
+ }, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
+
+ [ns.ui('DateField').uri]: {
+ size: 20,
+ type: 'date',
+ dt: 'date',
+ pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
+ },
+
+ [ns.ui('DateTimeField').uri]: {
+ size: 20,
+ type: 'datetime-local', // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
+ dt: 'dateTime',
+ pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
+ },
+
+ [ns.ui('TimeField').uri]: {
+ size: 10,
+ type: 'time',
+ dt: 'time',
+ pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
+ },
+
+ [ns.ui('IntegerField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'integer',
+ pattern: /^\s*-?[0-9]+\s*$/
+ },
+
+ [ns.ui('DecimalField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'decimal',
+ pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
+ },
+
+ [ns.ui('FloatField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'float',
+ pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
+ },
+
+ [ns.ui('SingleLineTextField').uri]: {
+
+ },
+ [ns.ui('NamedNodeURIField').uri]: {
+ namedNode: true
+ },
+ [ns.ui('TextField').uri]: {
+
+ },
+
+ [ns.ui('PhoneField').uri]: {
+ size: 20,
+ defaultInputValue: 'tel:',
+ pattern: /^\+?[\d-]+[\d]*$/
+ },
+
+ [ns.ui('EmailField').uri]: {
+ size: 30,
+ defaultInputValue: 'mailto:',
+ pattern: /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
+ },
+
+ [ns.ui('Group').uri]: {
+ style: style.formGroupStyle
+ },
+
+ /**
+ * Non-interactive fields
+ */
+ [ns.ui('Comment').uri]: {
+ element: 'p',
+ style: style.commentStyle
+ },
+ [ns.ui('Heading').uri]: {
+ element: 'h3',
+ style: style.formHeadingStyle
+ }
+}
diff --git a/src/lib/forms/rdfFormsHelper.ts b/src/lib/forms/rdfFormsHelper.ts
new file mode 100644
index 000000000..2f572a28e
--- /dev/null
+++ b/src/lib/forms/rdfFormsHelper.ts
@@ -0,0 +1,54 @@
+import { sym, LiveStore, parse } from 'rdflib'
+import ns from '../../lib/ns'
+
+const baseUri = 'https://solidos.github.io/solid-ui/src/ontology/'
+
+// we need to load into the store some additional information about Social Media accounts
+export function loadDocument (
+ store: LiveStore,
+ documentSource: string,
+ documentName: string,
+ documentURI?: string
+) {
+ const finalDocumentUri = documentURI || baseUri + documentName // Full URI to the file
+ const document = sym(finalDocumentUri) // rdflib NamedNode for the document
+
+ if (!store.holds(undefined, undefined, undefined, document)) {
+ // we are using the social media form because it contains the information we need
+ // the form can be used for both use cases: create UI for edit and render UI for display
+ parse(documentSource, store, finalDocumentUri, 'text/turtle', () => null) // Load doc directly
+ }
+}
+
+export function sortBySequence (
+ store: LiveStore,
+ list
+) {
+ const subfields = list.map(function (p) {
+ const k = store.any(p, ns.ui('sequence'))
+ return [k || 9999, p]
+ })
+ subfields.sort(function (a, b) {
+ return a[0] - b[0]
+ })
+ return subfields.map(function (pair) {
+ return pair[1]
+ })
+}
+
+/**
+ * Which class of field is this? Relies on http://www.w3.org/2000/01/rdf-schema#subClassOf and
+ * https://linkeddata.github.io/rdflib.js/doc/classes/formula.html#bottomtypeuris
+ * to find the most specific RDF type if there are multiple.
+ *
+ * @param subject a form field, e.g. `namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#fullNameField')`
+ * @returns the URI of the most specific known class, e.g. `http://www.w3.org/ns/ui#SingleLineTextField`
+ */
+export function mostSpecificClassURI (store: LiveStore, subject: Node): string {
+ const typeUri = store.findTypeURIs(subject as any)
+ const specificTypes = store.bottomTypeURIs(typeUri) // most specific
+ const finalTypes: any[] = []
+ for (const t in specificTypes) finalTypes.push(t)
+ // if (finalTypes.length > 1) throw "Didn't expect "+subject+" to have multiple bottom types: "+finalTypes
+ return finalTypes[0]
+}