From db48bcfefc62bc39c0595b1dd1d1b6e78e0a3108 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 1 Jan 2025 18:33:48 +0100
Subject: [PATCH] :hammer: Load bootstrap in storybook

Since Bootstrap is loaded in the admin too for Formio, we must include
it in storybook for an accurate preview.

Note that while a CDN is used in the admin, to facilitate local/offline
development, we're using the NPM package here.
---
 .storybook/preview.js                         |  1 +
 package-lock.json                             | 27 +++++++++++++++++++
 package.json                                  |  1 +
 .../form_design/StepsFieldSet.stories.js      | 10 ++++++-
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3c4856a0d4..ed97046b98 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,4 @@
+import 'bootstrap/dist/css/bootstrap.css';
 import '../src/openforms/scss/screen.scss';
 import '../src/openforms/scss/admin/admin_overrides.scss';
 import {withModalDecorator, withReactSelectDecorator, TinyMceDecorator} from 'components/admin/form_design/story-decorators';
diff --git a/package-lock.json b/package-lock.json
index 6c2668bc57..9edf695afc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
         "autoprefixer": "^10.2.4",
         "babel-loader": "^8.2.2",
         "babel-plugin-formatjs": "^10.5.1",
+        "bootstrap": "~4.6.0",
         "browserslist": "^4.21.5",
         "copy-webpack-plugin": "^6.4.1",
         "css-has-pseudo": "^6.0.1",
@@ -8020,6 +8021,26 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -25713,6 +25734,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index ac2c6b996a..8b2150ad6f 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-formatjs": "^10.5.1",
+    "bootstrap": "~4.6.0",
     "browserslist": "^4.21.5",
     "copy-webpack-plugin": "^6.4.1",
     "css-has-pseudo": "^6.0.1",
diff --git a/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js b/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js
index d59c2d488a..cfbce52c8b 100644
--- a/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js
+++ b/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js
@@ -9,7 +9,15 @@ import {StepsFieldSet} from './form-creation-form';
 
 export default {
   title: 'Form design / Tabs / Steps',
-  decorators: [FormDecorator, AdminChangeFormDecorator],
+  decorators: [
+    FormDecorator,
+    Story => (
+      <div className="react-form-create">
+        <Story />
+      </div>
+    ),
+    AdminChangeFormDecorator,
+  ],
   component: StepsFieldSet,
   args: {
     submitting: false,