Minimal component render #53
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Otherwise the types of @open-formulieren/types are broken/unusable.
The bare minimum is rendering the formio definition in place given its component type. This sets up the minimum stories to support different Formio component types.
Similar to the formio-builder, we must use a registry approach so that each component type can get proper type-checked inputs and only needs to concern itself with its own rendering logic. In the future, this will also hold some logic evaluation implementation details if they turn out to be component type specific.
The component type is used as lookup key to render the component. Each render component implementation is responsible for managing its own presentation logic. Unknown/not-implemented components render a fallback, similar to what Formio.js does.
Fieldsets primary purpose is rendering the children contained inside.
Uses the underlying NL DS utrecht components, but without any styling for now. This sets up the MVP pure-react form rendering to be used with the Formio component definitions.
The nature of our component tree requires recursion, but importing the generic render component in specific files causes circular import errors that webpack can't handle. To mitigate this, a plugin is added to detect and prevent circular imports, and the code is restructured to pass the generic component itself as a prop instead for rendering child components. This may get reworked in the future, but it may also not, depending on how (technical) requirements evolve.
sergei-maertens
force-pushed
the
feature/minimal-component-render
branch
from
68d85cf to
e9c768f
Compare
Added the library containing the SCSS for the form fields and our own design tokens package that give 'meaning' to the SCSS to document components in our own theme. Currently using the same pinned versions as the open-forms-sdk does so that we can transition easily and later upgrade the NL DS components used once the 'hard' problems have been solved.
Similar config as formio-builder
* import the relevant styles for utrecht-form-label * import the compiled design tokens for the OF theme * ensure everything is wired up in storybook This doesn't render the correct font yet because the font assets aren't loaded/included, but the fallback is acceptable to avoid that complexity at this point.
Text field is now styled properly, and the pattern established for managing (composite) component styles: * define a single SCSS file for the component * do the library imports in that file The added benefit of the last bullet is that you can control the order of imports and thus the order of how CSS is output as there are some broken style isolation issues on the label element. This keeps the setup sufficiently close to the SDK style organisation.
This pulls in microscope-sass as a (temporary) dependency for parity with the SDK and making it easier to apply strict BEM selectors without having to manually implement this again. The module is provided internally and for now forwards the library module and will at some point be extracted into a standalone library again. The validation error styles from the SDK are copied over.
The Form component will set up and manage the Formik state (internal implementation detail), and make sure the form configuration gets rendered properly. The caller is responsibel for providing the submit button to make it match the required layout/styling/positioning.
This is the easy bit... the hard part is setting up the initial values correctly *and* making sure the types are sorted out correctly.
This makes it possible to add non-React component utilities to the registry.
Formio form data is limited to JSON types, not any Javascript type. We can use this information to narrow the types as much as possible.
Extract the default values from the component definitions or fall back to the appropriate empty value matching the component schema type.
Taken from Open Forms SDK and slightly adapted.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
FormioFormcomponent (public API)Closes #11
Closes #12