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.

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

[Admin] Add form component #5360

Conversation

waiting-for-dev
Copy link
Contributor

@waiting-for-dev waiting-for-dev commented Aug 29, 2023

Summary

Introducing a form component brings a two-fold benefit:

  1. It wraps all the form component dependencies in a single place so that we don't need to redeclare them in every other form (e.g., the product creation form).
  2. It allows defining a form from the outside, which is a first step towards making the admin forms configurable.

Internally, it uses Rails' form_with helper, and all the given arguments are passed to it. The only exception is the elements: key, which is used to define the form elements.

The form elements are simple builders of renderable things that happen within a form context. That's to say, to be rendered, both the form component instance and the Rails' form builder are given to a #call method.

We ship with out-of-the-box form elements for fields, fieldsets and arbitrary components or HTML.

Notice that there's a circular dependency between form and form elements. While the form calls the elements to get the renderable content, the elements can use the form to get the configured dependencies. For instance, when rendering a text field element, it'll use the configured text_field dependency in the form. This complexity is an acceptable trade-off for a double benefit: the ability to change all the form dependencies at once (e.g., using a different text field component across a form), and the removal of boilerplate from the form element definitions. Nonetheless, the default behavior can be overridden by passing a different component to the form element. by passing a different component to the form element. Having access to
the form component is also used by the fieldset element to render the nested elements.

This commit also makes some tangential changes that were necessary:

  • We rename the form: parameter to builder: in the components within the form namespace. As we have now a form component, that makes it more explicit that it corresponds to the Rails' form builder.
  • We add .rb files within the preview directories to Tailwind watchable files.
  • We modify the mock_component test helper to accept not providing a block.

screenshot-localhost_3000-2023 08 29-12_27_14

Ref. #5329

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

The following are not always needed:

  • 📖 I have updated the README to account for my changes.
  • 📑 I have documented new code with YARD.
  • 🛣️ I have opened a PR to update the guides.
  • ✅ I have added automated tests to cover my changes.
  • 📸 I have attached screenshots to demo visual changes.

@waiting-for-dev waiting-for-dev requested a review from a team as a code owner August 29, 2023 10:22
@waiting-for-dev waiting-for-dev self-assigned this Aug 29, 2023
@waiting-for-dev waiting-for-dev added the type:enhancement Proposed or newly added feature label Aug 29, 2023
@waiting-for-dev waiting-for-dev force-pushed the waiting-for-dev/admin/form_component branch 3 times, most recently from a0b26bd to 10b9e5b Compare August 29, 2023 12:13
Introducing a form component brings a two-fold benefit:

1. It wraps all the form component dependencies in a single place
   so that we don't need to redeclare them in every other form (e.g.,
   the product creation form).
2. It allows defining a form from the outside, which is a first step
   towards making the admin forms configurable.

Internally, it uses Rails' `form_with` helper [1], and all the given
arguments are passed to it. The only exception is the `elements:` key,
which is used to define the form elements.

The form elements are simple builders of renderable things that happen
within a form context. That's to say, to be rendered, both the form
component instance and the Rails' form builder are given to a `#call`
method.

We ship with out-of-the-box form elements for fields, fieldsets and
arbitrary components or HTML.

Notice that there's a circular dependency between form and form
elements. While the form calls the elements to get the renderable
content, the elements can use the form to get the configured
dependencies. For instance, when rendering a text field element, it'll
use the configured text_field dependency in the form. This complexity is
an acceptable trade-off for a double benefit: the ability to change all
the form dependencies at once (e.g., using a different text field
component across a form), and the removal of boilerplate from the form
element definitions. Nonetheless, the default behavior can be overridden
by passing a different component to the form element. Having access to
the form component is also used by the fieldset element to render the
nested elements.

This commit also makes some tangential changes that were necessary:

- We rename the `form:` parameter to `builder:` in the components within
  the form namespace. As we have now a form component, that makes it
  more explicit that it corresponds to the Rails' form builder.
- We add `.rb` files within the preview directories to Tailwind
  watchable files.
- We modify the `mock_component` test helper to accept not providing a
  block.

[1] - https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with

Ref. solidusio#5329
@waiting-for-dev waiting-for-dev force-pushed the waiting-for-dev/admin/form_component branch from 10b9e5b to e390f7b Compare August 30, 2023 14:30
Copy link
Contributor

@rainerdema rainerdema left a comment

Choose a reason for hiding this comment

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

This is amazing, thanks @waiting-for-dev!

@waiting-for-dev waiting-for-dev merged commit 9380d9e into solidusio:nebulab/admin Aug 31, 2023
9 checks passed
@waiting-for-dev waiting-for-dev deleted the waiting-for-dev/admin/form_component branch August 31, 2023 12:38
waiting-for-dev added a commit to nebulab/solidus that referenced this pull request Sep 1, 2023
solidusio#5363 was merged just before
solidusio#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Sep 25, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Sep 27, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Sep 28, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Sep 28, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Sep 29, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
elia pushed a commit that referenced this pull request Oct 6, 2023
#5363 was merged just before
#5360, so it didn't pick up the
rename.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog:solidus_admin type:enhancement Proposed or newly added feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants