Initial RDF forms component by timea-solid · Pull Request #798 · SolidOS/solid-ui

timea-solid · 2026-06-16T12:12:55Z

This is for now:

adding an overall RDF forms component to storybook
testing its behaviour in Storybook by implementing a first RDF input Web Component

Prompt: reading the RDFinput file, pls make suggestions of how to impprve the code to make it easier to follow and read. I beliebe it is difficult to follow the fact that one has a rdf forms subject and a data subject as well and how it is all itertwinded. Co-Authored-By: GitHub Copilot (raptor-mini) <copilot@github.com>

NoelDeMartin

Added a few initial comments, mostly regarding a11y and component architecture.

NoelDeMartin · 2026-06-23T11:09:18Z

+          rdfTurtleFormatSource=${rdfTurtleFormatSource}
+          rdfURI=${rdfURI}
+          whichForm=${whichForm}
+          rdfName=${rdfName}
+          subjectTurtleFormatSource=${subjectTurtleFormatSource}
+          subjectName=${subjectName}
+          subjectURI=${subjectURI}>


Do we need all these attributes? This is a bit confusing, I'm not sure what each property does and why we need so many.

Could it work with something like this?

<solid-ui-rdf-form form="https://solidos.solidcommunity.net/public/2021/solidUiFormTestData/dummyFormTestFile.ttl#form" subject="https://solidos.solidcommunity.net/public/2021/alice.ttl#me" > </solid-ui-rdf-form>

Internally, it could resolve the form and subject from the store associated to the authenticated user.

NoelDeMartin · 2026-06-23T11:12:37Z

+    @property({ type: String })
+    set rdfURI (value: string) {


I think these two propertie (rdfURI and subjectURI) can probably be simplified a lot, I'm not sure we need the _parsedUrl variables or duplicating the URL parsing code. Check out Lit converters.

NoelDeMartin · 2026-06-23T11:21:41Z

+      })
+      const me = Namespace(this.subjectURI + '#')(this.whichSubject)
+
+      return html`


Other than the inputs, shouldn't this output a native <form> as well? Ideally, whatever is generated from this component ends up being a "real" form. That is important in order to integrate with accessibility tooling and user expectations (implicit form submission, etc.).

NoelDeMartin · 2026-06-23T11:24:02Z

+              return html` <solid-ui-rdf-input 
+                .store=${store} 
+                .formSubject=${sym(part.value)} 
+                .dataSubject=${me}


I think all inputs should also have a name attribute. Otherwise, they'll be ignored by the form (again, important for a11y, etc.).

NoelDeMartin · 2026-06-23T11:24:52Z

+  @property({ attribute: false })
+  accessor store!: LiveStore


Instead of passing the store as a property, I think we should use Lit context instead. See my other comments talking about this.

NoelDeMartin · 2026-06-23T11:33:50Z

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


Many of these are currently unused, right? I see that this is a WIP, so it's fine. But before merging, I would remove everything that isn't used (you know, YAGNI, removing dead code, etc.).

Also, I'm not sure I like the style config... that goes a bit against the idea of RDF forms, given that different UI libraries may render forms differently, and inline styles are probably not going to work correctly in all of them. But if that was a design decision when creating the RDF forms, ok.

Prompt: can this #sym:HTMLElementTagNameMap be generated automatically from vite-config/ components.ts for all RDF suffixed components? Co-Authored-By: GitHub Copilot (raptor-mini) <copilot@github.com>

timea-solid · 2026-06-24T08:25:40Z

RDFInput will make use of the new Input components when it is merged: #815

timea-solid · 2026-06-29T14:42:05Z

We need to improve the name property of the generated form and make sure they are unique.

NoelDeMartin · 2026-06-30T08:11:30Z

+    @consume({ context: storeContext, subscribe: true })
+    private accessor storeContext: StoreContext = DEFAULT_STORE
+
+    @property({ attribute: false })


is the attribute: false necessary? I guess we do want to observe is this property changes, although it'll be very uncommon (wouldn't even worry about testing it for now).

NoelDeMartin · 2026-06-30T08:18:55Z

+    private accessor entireDataIsReadonly: boolean = true
+
+    @state()
+    private accessor _parsedUrl: URL | null = null


I mentioned this in my previous review, but as reminder I don't think we need these two attributes, see Lit converters.

Co-authored-by: Noel De Martin <noel@noeldemartin.com>

rdf forms component

0a6d16b

timea-solid marked this pull request as draft June 16, 2026 12:17

timea-solid added 7 commits June 16, 2026 14:40

rendered first rdf forms elements

7c5a7c3

preliminary work for rdf-input

35c066f

Merge branch 'staging' into rdfComponets

a20fa4f

merge staging and moved components

5cd82c0

added also data to forms and wired the rdf input

344b904

fixed rdf input

9d5565a

timea-solid linked an issue Jun 22, 2026 that may be closed by this pull request

Create a starting RDF forms Web Component with an input field example SolidOS/solidos#304

Open

timea-solid added this to SolidOS NLNet UI Jun 22, 2026

timea-solid moved this to In progress in SolidOS NLNet UI Jun 22, 2026

timea-solid changed the title ~~RDF forms component~~ Jun 23, 2026

timea-solid self-assigned this Jun 23, 2026

timea-solid requested a review from NoelDeMartin June 23, 2026 08:32

timea-solid added 2 commits June 23, 2026 12:47

fix types

84345df

reverted the sortBySequence code back to original

372135f

NoelDeMartin reviewed Jun 23, 2026

View reviewed changes

timea-solid and others added 2 commits June 24, 2026 10:03

Merge branch 'staging' into rdfComponets

638786e

vite config for generating custom elements tag name map

235b0d0

Prompt: can this #sym:HTMLElementTagNameMap be generated automatically from vite-config/ components.ts for all RDF suffixed components? Co-Authored-By: GitHub Copilot (raptor-mini) <copilot@github.com>

timea-solid added 6 commits June 25, 2026 09:59

Merge branch 'staging' into rdfComponets

da5c6fa

a first FormsContext with a default store from SolidLogic

35f4445

added placeholder property to input

0d99a1b

added readonly to Input and used it in RDFinput

7b7f9a9

improved store usage

65735ae

added readonly style to input

cfb0475

added save features, copied over code

c81b17e

NoelDeMartin self-requested a review June 30, 2026 07:57

NoelDeMartin reviewed Jun 30, 2026

View reviewed changes

timea-solid and others added 8 commits June 30, 2026 12:35

added an updater to the storybook store

082b9ee

added data change capabilities, 1st version

2b53d6c

Update src/components/input/Input.styles.css

403a143

Co-authored-by: Noel De Martin <noel@noeldemartin.com>

rename to NoopStore

0af9ce9

renamed NoopStore

9d9f48a

cleanup from feedback

3da4992

imporved component type declarations

643dc5a

merge staging

d40ac8b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Initial RDF forms component#798

Initial RDF forms component#798
timea-solid wants to merge 27 commits into
stagingfrom
rdfComponets

timea-solid commented Jun 16, 2026 •

edited

Loading

NoelDeMartin left a comment

Uh oh!

NoelDeMartin Jun 23, 2026

NoelDeMartin Jun 23, 2026

Uh oh!

NoelDeMartin Jun 23, 2026

NoelDeMartin Jun 23, 2026

NoelDeMartin Jun 23, 2026

Uh oh!

NoelDeMartin Jun 23, 2026

timea-solid commented Jun 24, 2026

timea-solid commented Jun 29, 2026

Uh oh!

Uh oh!

NoelDeMartin Jun 30, 2026

Uh oh!

NoelDeMartin Jun 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Labels

2 participants

Uh oh!

Conversation

timea-solid commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

NoelDeMartin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

timea-solid commented Jun 24, 2026

timea-solid commented Jun 29, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Labels

2 participants

timea-solid commented Jun 16, 2026 •

edited

Loading