Skip to content

Declaration based edit component, validation and playground - #64

Merged
pierosavi merged 40 commits into
mainfrom
edit-component
Oct 23, 2026
Merged

pierosavi merged 40 commits into
mainfrom
edit-component

Conversation

@pierosavi

@pierosavi pierosavi commented Oct 15, 2026 •

Copy link
Copy Markdown
Member

Adds the edit components that render from a declaration sent by the server. There's no endpoint yet, so the declarations come from a mock (src/io/mock/declarations.json) behind getDeclarations(). Brand and category options already use /api/unstable/dimensions.

Every field has a view and an edit mode. The view is a plain HTML string, so the device page can render it on the server without JS. The edit mode is a Lit island: <edit-field> is form associated, so it behaves like a native input inside a <form>, and <edit-form> puts the fields together.

Supported types:

  • text, with a character regex or EAN, and an optional length
  • toggle (yes/no)
  • picker, with fixed options or brand/category from a searchable combobox
  • photos, with slots and categories

The form only submits the fields that changed and never sends "not set". Each changed field gets a Revert button, and a value that was set can't be removed. The validation is in src/validation, plain TS with tests, so the review bot can reuse it later. Declarations with a type we don't support are skipped with a warning, so the rest of the form still works.

Added declaration to component playground at /edit-playground (not linked, noindex) with examples by component.

@netlify

netlify Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for device-database-preview ready!

Name Link
🔨 Latest commit 512fb65
🔍 Latest deploy log https://app.netlify.com/projects/device-database-preview/deploys/6ad8e0030d71280dbaf13aa4
😎 Deploy Preview https://deploy-preview-64--device-database-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@PhilipTrauner

Copy link
Copy Markdown
Collaborator

implements OHF-Device-Database/backlog-items#195

@pierosavi pierosavi changed the title Edit components Declaration based edit component, validation and playground Oct 20, 2026
@pierosavi
pierosavi marked this pull request as ready for review October 20, 2026 08:37

@PhilipTrauner PhilipTrauner left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome work! 🤩

considering you already showed off a preview of this in action on the device page, do you think it would make sense to also ship that part gated behind a debug menu of sorts?

Comment thread messages/en.json Resolved
Comment thread src/islands/edit-field/combobox.ts Resolved
Comment thread src/islands/edit-field/photos.ts Resolved
Comment thread src/islands/edit-field/radio-group.ts Resolved
Comment thread src/islands/edit-field/text.ts Resolved
Comment thread src/islands/edit-field.ts Resolved
Comment thread src/utilities/markup.ts Resolved
@pierosavi
pierosavi merged commit 493b13b into main Oct 23, 2026
7 of 9 checks passed
@pierosavi
pierosavi deleted the edit-component branch October 23, 2026 09:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants