Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

First pass at full-form preview rendering #175

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

First pass at full-form preview rendering #175

wants to merge 6 commits into from

Commits on Aug 16, 2024

  1. 🏷️ Define registry types for preview flavours 

    * The structure subtree types allow a react component to be specified,
  which will be used to render children/subtrees of a given formio
  component definition. Components that don't support child components
  do not need to provide this.
* The webform preview allows specifying a react component to use to
  display the component as a field in the full form definition. If not
  specified, the panel preview will be used. This is mostly relevant
  for components that support child components and need to render those
  recursively.
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    b26df1c View commit details
    Browse the repository at this point in the history

  2. ⚗️ Implement generic top-level components for form previews 

    The form preview is broken out in two possible render modes, each have
their own top-level component to lock in the context and behaviours.

The structure mode is the most complex, since it will integrate with
the edit modal/form for each individual component, and the controls
for position within the component tree.
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    bde933c View commit details
    Browse the repository at this point in the history

  3. ✨ Implement the columns structure and webform previews 

    The webform preview will actually render the nested components in each
column, and applies the grid layout similar to what the SDK does. There
is no mobile toggle in this preview.

The structure preview groups the columns that are defined, and the
child components within each column.
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    9511836 View commit details
    Browse the repository at this point in the history

  4. ✨ Implement the structure and webform content preview 

    The content component displays the configured HTML in the webform
preview.

In structure mode, because there is no label, the content is stripped
from HTML tags and truncated to show a short summary.
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    36a2101 View commit details
    Browse the repository at this point in the history

  5. ⚗️ previews for edit grid 

    * in structure mode, we can simply display the template for each item,
  consisting of the nested components
* in webform mode, we currently display a single, fake nested form.
  This will however need to be updated with the add/remove controls
  and Formik's array helpers
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    926295e View commit details
    Browse the repository at this point in the history

  6. ✨ Implement the structure and webform fieldset preview 

    Both simply display their nested children.
    @sergei-maertens
    sergei-maertens committed Aug 16, 2024
    Configuration menu
    Copy the full SHA
    2980a2f View commit details
    Browse the repository at this point in the history