👽 Deal with bootstrap in Storybook

This mostly means setting up the appropriate wrappers in Storybook so
that the workarounds from the admin are applied to them... what a
mess.

Let 2025 be the year we can rip out bootstrap.

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -18,6 +18,7 @@ import {
 import {
   AdminChangeFormDecorator,
   FormDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -26,7 +27,12 @@ import RegistrationFields from './RegistrationFields';
 
 export default {
   title: 'Form design / Registration / RegistrationFields',
-  decorators: [ValidationErrorsDecorator, FormDecorator, AdminChangeFormDecorator],
+  decorators: [
+    ValidationErrorsDecorator,
+    FormDecorator,
+    AdminChangeFormDecorator,
+    FormModalContentDecorator,
+  ],
   component: RegistrationFields,
   args: {
     availableBackends: [

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js

@@ -1,9 +1,9 @@
 import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import {Form, Formik} from 'formik';
-import selectEvent from 'react-select-event';
 
 import {
   FeatureFlagsDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -30,7 +30,7 @@ const render = ({apiGroups, formData}) => (
 
 export default {
   title: 'Form design/Registration/Objects API',
-  decorators: [ValidationErrorsDecorator, FeatureFlagsDecorator],
+  decorators: [ValidationErrorsDecorator, FeatureFlagsDecorator, FormModalContentDecorator],
   render,
   args: {
     apiGroups: [

src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js

@@ -4,6 +4,7 @@ import {Form, Formik} from 'formik';
 import {
   FeatureFlagsDecorator,
   FormDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -56,7 +57,12 @@ const render = ({apiGroups, objectsApiGroupChoices, confidentialityLevelChoices,
 export default {
   title: 'Form design/Registration/ZGW',
   component: ZGWFormFields,
-  decorators: [ValidationErrorsDecorator, FormDecorator, FeatureFlagsDecorator],
+  decorators: [
+    ValidationErrorsDecorator,
+    FormDecorator,
+    FeatureFlagsDecorator,
+    FormModalContentDecorator,
+  ],
   render,
   args: {
     apiGroups: [

src/openforms/js/components/admin/form_design/story-decorators.js

@@ -1,6 +1,6 @@
 import {fn} from '@storybook/test';
 import {Form, Formik} from 'formik';
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
 
 import {
   FeatureFlagsContext,
@@ -47,6 +47,27 @@ export const AdminChangeFormDecorator = (Story, {parameters}) => {
   );
 };
 
+/**
+ * Decorator to mark story as being rendered inside a modal.
+ *
+ * It ensures that the DOM layout/hierarchy is as expected w/r to styling effects.
+ */
+export const FormModalContentDecorator = Story => {
+  // // remove the change-form body class which affects the positioning of validation errors
+  // useEffect(() => {
+  //   // body of the story inside the story iframe
+  //   const body = document.querySelector('body');
+  //   body.classList.remove('change-form');
+  // }, []);
+  return (
+    <div className="react-modal">
+      <div className="react-modal__form">
+        <Story />
+      </div>
+    </div>
+  );
+};
+
 export const FormDecorator = (Story, {args}) => (
   <FormContext.Provider
     value={{

src/openforms/js/components/admin/forms/Field.stories.js

@@ -7,7 +7,19 @@ export default {
   title: 'Admin/Django/Field',
   component: Field,
 
-  decorators: [AdminChangeFormDecorator],
+  decorators: [
+    Story => (
+      <div class="form-row">
+        <Story />
+      </div>
+    ),
+    AdminChangeFormDecorator,
+    Story => (
+      <div class="react-form-create">
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     adminChangeForm: {
       wrapFieldset: true,