[R20-166] Extend form inputs

waitingallday commented 3 months ago

Issue: https://digital-vic.atlassian.net/browse/R20-166

Support self-contained layers to add their own custom inputs (without building!)
Introduce a customInputs prop into app config that takes
1. a mapping function for drupal webforms api, and
2. enough data/options to create a FormKit definition
Component is auto-imported via layer, so it doesn't need precompile or transpile, it's just added directly into the input library at runtime
Mapping is automatically added from app config in webform mapping, used in TideLandingPage/Webform (utils sourced in ripple-tide-webform)
FormKit definition is dynamically created at runtime in TideLandingPage/Webform from the available props
Webform utils had to be shuffled around a bit to prevent winston (server only) from running in client, we should revisit this when Nuxt 4 releases and come up with a more systematic way of separating our server/client code
Or, set winston up to log to the client as well?

The layer in examples/nuxt-app/layers/ripple-ui-forms-ext demonstrates what is needed to add a simple input (item in this case)
1. component
2. mapping function
3. app config
Run nuxt-app in either dev or build mode and go to http://localhost:3000/_test/webform (this page is provided with fixture for testing)

[ ] I've added relevant changes to the project Readme if needed.
[ ] I've updated the documentation site as needed.
[ ] I have added unit tests to cover my changes (if not applicable, please state why in a comment)

netlify[bot] commented 3 months ago

Name	Link
Latest commit	69401b270e2909545f591603bc6e05525b2cc179
Latest deploy log	https://app.netlify.com/sites/ripple-docs/deploys/669466fc9398a30008222b5a

cypress[bot] commented 3 months ago

Passing run #2012 ↗︎

0

176

0

Details:

build: :construction_worker: update actions to node 20
Project: ripple-framework	Commit: `54b46e7105`
Status: Passed	Duration: 07:42 💡
Started: Jul 2, 2024 6:25 AM	Ended: Jul 2, 2024 6:32 AM