Initial RDF forms component

src/components/combobox/Combobox.ts

@@ -34,6 +34,9 @@ export default class Combobox extends WebComponent {
   @query('input')
   private accessor inputElement: HTMLInputElement | null = null
 
+  @property({ type: Boolean, reflect: true })
+  accessor readonly = false
+
   @state()
   private accessor filter = ''
 
@@ -67,6 +70,7 @@ export default class Combobox extends WebComponent {
           name=${this.name}
           ?placeholder=${this.placeholder}
           ?required=${this.required}
+          ?readonly=${this.readonly}
           .value=${this.value}
           @keydown=${this.onInputKeyDown}
           @click=${this.onInputClick}

src/components/input/Input.styles.css

@@ -23,5 +23,12 @@
             color: var(--solid-ui-color-gray-700);
             font-size: inherit;
         }
+
+        input:read-only {
+            border: none;
+            padding: 0;
+            cursor: pointer;
+        }
     }
+
 }

src/components/input/Input.ts

@@ -28,6 +28,9 @@ export default class Input extends WebComponent {
   @property({ type: Boolean, reflect: true })
   accessor required = false;
 
+  @property({ type: Boolean, reflect: true })
+  accessor readonly = false;
+
   @query('input')
   private accessor inputElement: HTMLInputElement | null = null;
 
@@ -54,6 +57,7 @@ export default class Input extends WebComponent {
           placeholder=${this.placeholder}
           ?required=${this.required}
           .value=${this.value}
+          ?readonly=${this.readonly}
           @input=${() => this.inputTrait.onInput()}
           @keydown=${this.onKeyDown}
         />

src/components/rdf-form/RDFForm.ts

@@ -0,0 +1,205 @@
+import { property, state } from 'lit/decorators.js'
+import { html } from 'lit/html.js'
+import { consume } from '@lit/context'
+import { customElement, WebComponent } from '@/lib/components'
+import ns from '../../lib/ns'
+import { loadDocument, sortBySequence } from '../../lib/forms/rdfFormsHelper'
+import { sym, Namespace, LiveStore } from 'rdflib'
+import '@/components/rdf-input'
+import { DEFAULT_STORE, storeContext, StoreContext } from '@/lib/forms/store/StoreContext'
+
+@customElement('solid-ui-rdf-form')
+export default class RDFForm extends WebComponent {
+    @consume({ context: storeContext, subscribe: true })
+    private accessor storeContext: StoreContext = DEFAULT_STORE
+
+    @property({ attribute: false })
+    accessor passedInStore: LiveStore | null = null
+
+    private get currentStoreContext (): StoreContext | null {
+      if (this.passedInStore) {
+        return { store: this.passedInStore }
+      }
+
+      return this.storeContext !== DEFAULT_STORE ? this.storeContext : null
+    }
+
+    @state()
+    private accessor failed: boolean = false
+
+    @state()
+    private accessor submitting: boolean = false
+
+     @state()
+    private accessor entireDataIsReadonly: boolean = true
+
+    @state()
+    private accessor _parsedUrl: URL | null = null
+
+    @state()
+    private accessor _parsedUrl2: URL | null = null
+
+    @property({ type: String })
+    accessor whichForm = 'this'
+
+    @property({ type: String })
+    accessor rdfTurtleFormatSource = ''
+
+    @property({ type: String })
+    accessor rdfName = ''
+
+    @property({ type: String })
+    set rdfURI (value: string) {
+      try {
+        this._parsedUrl = new URL(value)
+      } catch {
+        this._parsedUrl = null // Handle invalid URL
+      }
+    }
+
+    get rdfURI (): string {
+      return this._parsedUrl ? this._parsedUrl.href : ''
+    }
+
+    @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 () {
+      const currentStoreContext = this.currentStoreContext
+
+      if (!currentStoreContext) {
+        console.warn('RDFForm: store context not available yet')
+        return html``
+      }
+
+      const store = currentStoreContext.store
+
+      if (!store.updater?.editable(this.subjectURI)) {
+        this.entireDataIsReadonly = true
+      }
+
+      // TODO: detect format
+      loadDocument(store, this.rdfTurtleFormatSource, this.rdfName, this.rdfURI) // load form
+      loadDocument(store, this.subjectTurtleFormatSource, 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
+
+      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 {
+          value: item,
+          fieldValue: hashIndex >= 0 ? value.slice(hashIndex + 1) : value
+        }
+      })
+      const me = Namespace(this.subjectURI + '#')(this.whichSubject)
+
+      return html`
+      <form @submit=${this.onSubmit}>
+        ${uiFields.map(part => {
+          switch (part.fieldValue) {
+              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` <solid-ui-rdf-input 
+                  .formSubject=${sym(part.value)} 
+                  .dataSubject=${me}
+                  readonly=${this.entireDataIsReadonly}
+                ></solid-ui-rdf-input>
+                <br>`
+              }
+              case 'MultiLineTextField':
+                  return html`<input .rdf=${part}></input>`
+              case 'BooleanField':
+                  return html`<input .rdf=${part}></input>`
+              case 'TristateField':
+                  return html`<input .rdf=${part}></input>`
+              case 'Classifier':
+                  return html`<input .rdf=${part}></input>`
+              case 'Choice':
+                  return html`<input .rdf=${part}></input>`
+              case 'Multiple':
+                  return html`<input .rdf=${part}></input>`
+              case 'Options':
+                  return html`<input .rdf=${part}></input>`
+              case 'AutocompleteField':
+                  return html`<input .rdf=${part}></input>`
+              case 'Comment':
+              case 'Heading':
+                  return html`<input .rdf=${part}></input>`
+              default:
+                  return html`<div>Unknown part type: ${part}</div>`
+          }
+        })}
+        <solid-ui-button
+            ?disabled=${!store.updater?.editable(this.subjectURI) || this.submitting}
+            ?loading=${this.submitting}
+            type="submit"
+        >
+            Save
+        </solid-ui-button>
+      </form>
+    `
+    }
+
+    private async onSubmit (e: Event) {
+      e.preventDefault()
+
+      this.failed = false
+
+      this.submitting = true
+
+      try {
+        const currentStoreContext = this.currentStoreContext
+        if (currentStoreContext?.store.updater?.editable(this.subjectURI)) {
+          // this.saveStatements()
+        }
+      } catch (error) {
+        console.error(error)
+
+        this.failed = true
+      } finally {
+        this.submitting = false
+      }
+    }
+}

src/components/rdf-form/RDForm.stories.ts

@@ -0,0 +1,122 @@
+import { html } from 'lit'
+import { defineStoryRender } from '../../storybook'
+import './RDFForm'
+
+const meta = {
+  title: 'Design System/RDF Form',
+  args: {
+    rdfTurtleFormatSource: `
+      @prefix : <https://solidos.solidcommunity.net/public/2021/solidUiFormTestData/dummyFormTestFile.ttl#>.
+      @prefix foaf:  <http://xmlns.com/foaf/0.1/>.
+      @prefix sched: <http://www.w3.org/ns/pim/schedule#>.
+      @prefix cal:   <http://www.w3.org/2002/12/cal/ical#>.
+      @prefix dc:    <http://purl.org/dc/elements/1.1/>.
+      @prefix rdfs:  <http://www.w3.org/2000/01/rdf-schema#>.
+      @prefix ui:    <http://www.w3.org/ns/ui#>.
+      @prefix trip:  <http://www.w3.org/ns/pim/trip#>.
+      @prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
+      @prefix xsd:   <http://www.w3.org/2001/XMLSchema#>.
+
+      # A Form with 3 fields and a nested subgroup
+
+      :form a ui:Form;
+      ui:parts (:nameField :emailField :phoneField :addresses) .
+
+      :nameField a ui:SingleLineTextField ;
+      ui:property vcard:fn;
+      ui:label "name" .
+
+
+      :emailField a ui:EmailField ;
+      ui:property vcard:hasEmail; # @@ check
+      ui:label "email" .
+
+      :phoneField a ui:PhoneField ;
+      ui:property vcard:hasTelephone;
+      ui:label "phone" .
+
+      :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 : <https://solidos.solidcommunity.net/public/2021/alice.ttl#>.
+      @prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
+
+      :me a vcard:Individual ;
+      vcard:fn "Alice" ;
+      vcard:hasEmail <mailto:alice@example.com> .
+    `,
+    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<typeof meta.argTypes>(({ rdfTurtleFormatSource, rdfURI, whichForm, rdfName, subjectTurtleFormatSource, subjectName, subjectURI }) => {
+  return html`
+      <storybook-provider>
+        <solid-ui-rdf-form 
+          rdfTurtleFormatSource=${rdfTurtleFormatSource}
+          rdfURI=${rdfURI}
+          whichForm=${whichForm}
+          rdfName=${rdfName}
+          subjectTurtleFormatSource=${subjectTurtleFormatSource}
+          subjectName=${subjectName}
+          subjectURI=${subjectURI}>
+        </solid-ui-rdf-form>
+      </storybook-provider>
+    `
+})
+
+export default meta
+
+export const Primary = { render }

src/components/rdf-form/index.ts

@@ -0,0 +1,4 @@
+import RDFForm from './RDFForm'
+
+export { RDFForm }
+export default RDFForm