💥 Drop support for custom display components

This experimental feature seems to never have been used by anyone so we never received feedback. More importantly, it proves that the current layout is _good enough_ as otherwise we'd have received much more feedback about changing the layout/make the components more pluggable. Removing support for this gives developers more freedom to change the interfaces of components without having to worry about backwards compatibility.
open-formulieren · Dec 20, 2024 · 8c4e3e0 · 8c4e3e0
1 parent e33ecee
commit 8c4e3e0
Show file tree

Hide file tree

Showing 24 changed files with 13 additions and 164 deletions.
diff --git a/src/Context.js b/src/Context.js
@@ -41,10 +41,6 @@ const ConfigContext = React.createContext({
   basePath: '',
   baseTitle: '',
   requiredFieldsWithAsterisk: true,
-  displayComponents: {
-    app: null,
-    loginOptions: null,
-  },
   debug: DEBUG,
 });
 ConfigContext.displayName = 'ConfigContext';

diff --git a/src/components/AppDisplay.mdx b/src/components/AppDisplay.mdx
@@ -4,7 +4,7 @@ import * as AppDisplayStories from './AppDisplay.stories';
 
 <Meta of={AppDisplayStories} />
 
-The `AppDisplay` component allows you to tweak the markup for the general SDK scaffolding.
+The `AppDisplay` manages the general SDK scaffolding.
 
 <Canvas of={AppDisplayStories.Default} />
 

diff --git a/src/components/CoSign/index.jsx b/src/components/CoSign/index.jsx
@@ -24,8 +24,6 @@ const getCosignStatus = async (baseUrl, submissionUuid) => {
 };
 
 const CoSignAuthentication = ({form, submissionUuid, saveStepData, authPlugin}) => {
-  const config = useContext(ConfigContext);
-
   const loginOption = form.loginOptions.find(opt => opt.identifier === authPlugin);
   if (!loginOption) {
     return (
@@ -38,8 +36,6 @@ const CoSignAuthentication = ({form, submissionUuid, saveStepData, authPlugin})
     );
   }
 
-  const LoginDisplayComponent = config?.displayComponents?.loginOptions ?? LoginOptionsDisplay;
-
   // add the co-sign submission parameter to the login URL
   const loginUrl = getLoginUrl(loginOption, {coSignSubmission: submissionUuid});
   const modifiedLoginOption = {
@@ -55,7 +51,7 @@ const CoSignAuthentication = ({form, submissionUuid, saveStepData, authPlugin})
   };
 
   return (
-    <LoginDisplayComponent
+    <LoginOptionsDisplay
       loginAsYourselfOptions={[modifiedLoginOption]}
       loginAsGemachtigdeOptions={[]}
     />

diff --git a/src/components/Form.spec.jsx b/src/components/Form.spec.jsx
@@ -40,7 +40,6 @@ const Wrapper = ({form = buildForm(), initialEntry = '/startpagina'}) => {
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/FormDisplay.jsx b/src/components/FormDisplay.jsx
@@ -22,15 +22,14 @@ const FormDisplay = ({children = null, progressIndicator = null, router = null})
   const appDebug = config.debug ? <AppDebug /> : null;
   const languageSwitcher = translationEnabled ? <LanguageSwitcher /> : null;
 
-  const AppDisplayComponent = config?.displayComponents?.app ?? AppDisplay;
   return (
-    <AppDisplayComponent
+    <AppDisplay
       languageSwitcher={languageSwitcher}
       progressIndicator={progressIndicator}
       appDebug={appDebug}
     >
       {children || router}
-    </AppDisplayComponent>
+    </AppDisplay>
   );
 };
 

diff --git a/src/components/FormDisplay.mdx b/src/components/FormDisplay.mdx
@@ -6,10 +6,10 @@ import * as FormDisplayStories from './FormDisplay.stories';
 
 # Form Display
 
-The `FormDisplay` component allows you to manage the layout when forms and sub-pages are rendered.
+The `FormDisplay` component manages the layout when forms and sub-pages are rendered.
 
-It is the presentation component for the `Form` component. By default, it displays the form step and
-progress indicator in two columns.
+It is the presentation component for the `Form` component. It displays the form step and progress
+indicator in two columns.
 
 <Canvas of={FormDisplayStories.Default} />
 

diff --git a/src/components/FormStep/index.jsx b/src/components/FormStep/index.jsx
@@ -892,7 +892,6 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS
                     submissionUrl: submission.url,
                     saveStepData: async () =>
                       await submitStepData(submissionStep.url, {...getCurrentFormData()}),
-                    displayComponents: config.displayComponents,
                     verifyEmailCallback: ({key, email}) => {
                       // clear the errors from the component
                       const formInstance = formRef.current.formio;

diff --git a/src/components/LoginOptions/index.jsx b/src/components/LoginOptions/index.jsx
@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {ConfigContext} from 'Context';
 import Literal from 'components/Literal';
 import {getCosignLoginUrl, getLoginUrl} from 'components/utils';
 import useQuery from 'hooks/useQuery';
@@ -11,7 +10,6 @@ import Types from 'types';
 import LoginOptionsDisplay from './LoginOptionsDisplay';
 
 const LoginOptions = ({form, onFormStart, extraNextParams = {}, isolateCosignOptions = true}) => {
-  const config = useContext(ConfigContext);
   const queryParams = useQuery();
 
   const loginAsYourselfOptions = [];
@@ -61,7 +59,6 @@ const LoginOptions = ({form, onFormStart, extraNextParams = {}, isolateCosignOpt
     });
   }
 
-  const LoginDisplayComponent = config?.displayComponents?.loginOptions ?? LoginOptionsDisplay;
   const Container = form.loginRequired ? React.Fragment : 'form';
   const containerProps = form.loginRequired
     ? {}
@@ -75,7 +72,7 @@ const LoginOptions = ({form, onFormStart, extraNextParams = {}, isolateCosignOpt
 
   return (
     <Container {...containerProps}>
-      <LoginDisplayComponent
+      <LoginOptionsDisplay
         loginAsYourselfOptions={loginAsYourselfOptions}
         loginAsGemachtigdeOptions={loginAsGemachtigdeOptions}
         cosignLoginOptions={cosignLoginOptions}

diff --git a/src/components/ProgressIndicator/ProgressIndicator.mdx b/src/components/ProgressIndicator/ProgressIndicator.mdx
@@ -15,12 +15,6 @@ The `ProgressIndicator` component shows the different steps (`ProgressIndicatorI
 style of each step varies depending on whether it is applicable, it is completed or it is the
 currently active step.
 
-**Warning**
-
-Since SDK 2.1 we've restructured the `ProgressIndicator` component - swapping out an alternative
-component now requires you to specify `progressIndicator` rather than `progressIndicatorDisplay`.
-The interface has also changed.
-
 ## Functional
 
 The parent component must handle all the 'smart' behaviour such as constructing the list of items

diff --git a/src/components/ProgressIndicator/progressIndicator.spec.jsx b/src/components/ProgressIndicator/progressIndicator.spec.jsx
@@ -33,7 +33,6 @@ const renderApp = (form, initialRoute = '/') => {
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx b/src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx
@@ -55,7 +55,6 @@ const renderApp = (initialRoute = '/') => {
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/CreateAppointment/Summary.spec.jsx b/src/components/appointments/CreateAppointment/Summary.spec.jsx
@@ -58,7 +58,6 @@ const renderSummary = errorHandler => {
             basePath: '',
             baseTitle: '',
             requiredFieldsWithAsterisk: true,
-            displayComponents: {},
           }}
         >
           <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/cancel/CancelAppointment.integration.spec.jsx b/src/components/appointments/cancel/CancelAppointment.integration.spec.jsx
@@ -27,7 +27,6 @@ const Wrapper = () => {
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/fields/DateSelect.spec.jsx b/src/components/appointments/fields/DateSelect.spec.jsx
@@ -23,7 +23,6 @@ const render = (comp, locationId) =>
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/fields/TimeSelect.spec.jsx b/src/components/appointments/fields/TimeSelect.spec.jsx
@@ -21,7 +21,6 @@ const render = (comp, locationId) =>
         basePath: '',
         baseTitle: '',
         requiredFieldsWithAsterisk: true,
-        displayComponents: {},
       }}
     >
       <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/steps/ChooseProductStep.spec.jsx b/src/components/appointments/steps/ChooseProductStep.spec.jsx
@@ -29,7 +29,6 @@ const render = () => {
             basePath: '',
             baseTitle: '',
             requiredFieldsWithAsterisk: true,
-            displayComponents: {},
           }}
         >
           <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/components/appointments/steps/LocationAndTimeStep.spec.jsx b/src/components/appointments/steps/LocationAndTimeStep.spec.jsx
@@ -38,7 +38,6 @@ const render = initialValues => {
             basePath: '',
             baseTitle: '',
             requiredFieldsWithAsterisk: true,
-            displayComponents: {},
           }}
         >
           <IntlProvider locale="en" messages={messagesEN}>

diff --git a/src/custom-display-components.jsx b/src/custom-display-components.jsx
diff --git a/src/developer-docs.mdx b/src/developer-docs.mdx
@@ -99,9 +99,7 @@ Scan the existing stories for real usage of these patterns.
 
 ### What to put in MDX?
 
-Any useful context/documentation for developers working with the components, or for third parties
-intending to override the components (e.g. the display components for complex/smart components that
-implement behaviour).
+Any useful context/documentation for developers working with the components.
 
 The separation between stories in CSF format and documentation in MDX is quite nice because it
 allows you to document stories that you want to lock-in (through visual regression testing or
@@ -112,7 +110,6 @@ Typical elements in the MDX page are:
 
 - Meta element for storybook
 - A quick summary of what the component is and does, when to use it or not
-- If relevant, the existence and props of the related `Display` presentation component
 - The props of the component, introspected via its `propTypes` by Storybook
 - Relevant stories to illustrate some textual documentation, e.g. how validation errors are handled
   in form field components.
@@ -179,7 +176,7 @@ would see a folder structure like:
 MyComponent
 ├── index.js
 ├── mocks.js
-├── MyComponentDisplay.js
+├── MyComponent.jsx
 ├── MyComponent.stories.js
 └── MyComponent.mdx
 ```

diff --git a/src/formio/components/CoSignOld.jsx b/src/formio/components/CoSignOld.jsx
@@ -59,13 +59,11 @@ export default class CoSignOld extends Field {
     // no container node ready (yet), defer to next render cycle
     if (!container) return;
 
-    const {form, submissionUuid, saveStepData, displayComponents} = this.options.ofContext;
+    const {form, submissionUuid, saveStepData} = this.options.ofContext;
 
     this.reactRoot.render(
       <IntlProvider {...this.options.intl}>
-        <ConfigContext.Provider
-          value={{baseUrl: this.options.baseUrl, displayComponents: displayComponents}}
-        >
+        <ConfigContext.Provider value={{baseUrl: this.options.baseUrl}}>
           <CoSignReact
             authPlugin={this.component.authPlugin}
             form={form}

diff --git a/src/index.jsx b/src/index.jsx
@@ -17,7 +17,6 @@ window.onload = () => {
     // added for testing purposes - adding a real CSP breaks *a lot* of things of Create
     // React App :(
     CSPNonce: 'RqgbALvp8D5b3+8NuhfuKg==',
-    // displayComponents,
     useHashRouting: USE_HASH_ROUTING === 'true' || false,
   });
   form.init();

diff --git a/src/index.mdx b/src/index.mdx
@@ -31,16 +31,6 @@ One of the major goals of the SDK is that it can adapt itself to the theme of yo
 through the use of "design tokens", following the principles of
 [NL Design System](https://www.nldesignsystem.nl/).
 
-**Modifying layout using custom 'display components'**
-
-For more complex layout changes that cannot be achieved purely through design tokens, we wantto
-provide sufficient controls to replace our default components with your own custom components. This
-should not require duplicating/managing any SDK-specific state - only pure React components are
-allowed (pure = purely prop-driven).
-
-This override mechanism is also opt-in on a per-component basis - e.g. if a display component is not
-specified, the default version of the SDK is used.
-
 **The SDK implements all the necessary API interaction and state management**
 
 Developers focusing on design/layout should not need knowledge of the backend API, nor the