From 8c4e3e0a9b8f6529a1e28f2b4413a31702d29900 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 20 Dec 2024 08:34:32 +0100 Subject: [PATCH] :boom: 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. --- src/Context.js | 4 - src/components/AppDisplay.mdx | 2 +- src/components/CoSign/index.jsx | 6 +- src/components/Form.spec.jsx | 1 - src/components/FormDisplay.jsx | 5 +- src/components/FormDisplay.mdx | 6 +- src/components/FormStep/index.jsx | 1 - src/components/LoginOptions/index.jsx | 7 +- .../ProgressIndicator/ProgressIndicator.mdx | 6 -- .../progressIndicator.spec.jsx | 1 - .../CreateAppointment.spec.jsx | 1 - .../CreateAppointment/Summary.spec.jsx | 1 - .../CancelAppointment.integration.spec.jsx | 1 - .../appointments/fields/DateSelect.spec.jsx | 1 - .../appointments/fields/TimeSelect.spec.jsx | 1 - .../steps/ChooseProductStep.spec.jsx | 1 - .../steps/LocationAndTimeStep.spec.jsx | 1 - src/custom-display-components.jsx | 92 ------------------- src/developer-docs.mdx | 7 +- src/formio/components/CoSignOld.jsx | 6 +- src/index.jsx | 1 - src/index.mdx | 10 -- src/sdk.jsx | 9 -- src/story-utils/decorators.jsx | 6 -- 24 files changed, 13 insertions(+), 164 deletions(-) delete mode 100644 src/custom-display-components.jsx diff --git a/src/Context.js b/src/Context.js index f83a5796b..331fd04d9 100644 --- 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 index 120be6fa0..bc54b5550 100644 --- a/src/components/AppDisplay.mdx +++ b/src/components/AppDisplay.mdx @@ -4,7 +4,7 @@ import * as AppDisplayStories from './AppDisplay.stories'; -The `AppDisplay` component allows you to tweak the markup for the general SDK scaffolding. +The `AppDisplay` manages the general SDK scaffolding. diff --git a/src/components/CoSign/index.jsx b/src/components/CoSign/index.jsx index 411b754ff..b5efeee61 100644 --- 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 ( - diff --git a/src/components/Form.spec.jsx b/src/components/Form.spec.jsx index e2efd69b9..b5dd2b757 100644 --- 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: {}, }} > diff --git a/src/components/FormDisplay.jsx b/src/components/FormDisplay.jsx index 350cfdbff..f1fbe2ed0 100644 --- 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 ? : null; const languageSwitcher = translationEnabled ? : null; - const AppDisplayComponent = config?.displayComponents?.app ?? AppDisplay; return ( - {children || router} - + ); }; diff --git a/src/components/FormDisplay.mdx b/src/components/FormDisplay.mdx index da0b11d6a..070580341 100644 --- 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. diff --git a/src/components/FormStep/index.jsx b/src/components/FormStep/index.jsx index e6d217ed0..7d0c3e920 100644 --- 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 index 2ac2758fb..0046def3f 100644 --- 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 ( - { basePath: '', baseTitle: '', requiredFieldsWithAsterisk: true, - displayComponents: {}, }} > diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx b/src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx index 4f0c9998e..3ef40a7b3 100644 --- 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: {}, }} > diff --git a/src/components/appointments/CreateAppointment/Summary.spec.jsx b/src/components/appointments/CreateAppointment/Summary.spec.jsx index efaf979ab..bc4121143 100644 --- 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: {}, }} > diff --git a/src/components/appointments/cancel/CancelAppointment.integration.spec.jsx b/src/components/appointments/cancel/CancelAppointment.integration.spec.jsx index 052f5fd6f..34e06ad2c 100644 --- 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: {}, }} > diff --git a/src/components/appointments/fields/DateSelect.spec.jsx b/src/components/appointments/fields/DateSelect.spec.jsx index 9de909333..5107141b1 100644 --- 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: {}, }} > diff --git a/src/components/appointments/fields/TimeSelect.spec.jsx b/src/components/appointments/fields/TimeSelect.spec.jsx index 440fff077..a4e977975 100644 --- 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: {}, }} > diff --git a/src/components/appointments/steps/ChooseProductStep.spec.jsx b/src/components/appointments/steps/ChooseProductStep.spec.jsx index 537576e2a..efc9e2e9f 100644 --- 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: {}, }} > diff --git a/src/components/appointments/steps/LocationAndTimeStep.spec.jsx b/src/components/appointments/steps/LocationAndTimeStep.spec.jsx index 620d4d43e..c8c24eeab 100644 --- 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: {}, }} > diff --git a/src/custom-display-components.jsx b/src/custom-display-components.jsx deleted file mode 100644 index 557860fd3..000000000 --- a/src/custom-display-components.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; - -import Body from 'components/Body'; -import {STEP_LABELS} from 'components/ProgressIndicator/constants'; - -const CustomAppDisplay = ({router, languageSwitcher = null, appDebug = null}) => ( -
-
{languageSwitcher}
-
{router}
- {appDebug ?
{appDebug}
: null} -
-); - -const FormDisplay = ({ - router, - progressIndicator = null, - showProgressIndicator = true, - isPaymentOverview = false, -}) => { - const renderProgressIndicator = progressIndicator && showProgressIndicator && !isPaymentOverview; - return ( - <> - {renderProgressIndicator ? ( -
{progressIndicator}
- ) : null} -
{router}
- - ); -}; - -const ProgressIndicatorDisplay = ({ - activeStepTitle, - formTitle, - steps, - hasSubmission, - isStartPage, - isSummary, - isConfirmation, - isSubmissionComplete, - areApplicableStepsCompleted, - showOverview, - showConfirmation, -}) => { - const overviewLabel = showOverview ? STEP_LABELS.overview : false; - const confirmationLabel = showConfirmation ? STEP_LABELS.confirmation : false; - - const labels = [ - STEP_LABELS.login, - ...steps.map(step => step.formDefinition), - overviewLabel, - confirmationLabel, - ].filter(Boolean); - - let children = []; - labels.forEach((label, index) => { - const isLast = index === labels.length - 1; - children.push( - - {label} - - ); - if (!isLast) - children.push( - - • - - ); - }); - - return ( -
- {children} -
- ); -}; - -const displayComponents = { - app: CustomAppDisplay, - form: FormDisplay, - progressIndicator: ProgressIndicatorDisplay, -}; - -export default displayComponents; diff --git a/src/developer-docs.mdx b/src/developer-docs.mdx index e31081f6d..ee284a3ee 100644 --- 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 index e3e96966a..2d520a5e0 100644 --- 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( - + { // 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 index 6005401ef..e34eca400 100644 --- 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 diff --git a/src/sdk.jsx b/src/sdk.jsx index d31370529..c4503c95d 100644 --- a/src/sdk.jsx +++ b/src/sdk.jsx @@ -43,12 +43,6 @@ fixLeafletIconUrls(); const VERSION = getVersion(); -const defaultDisplayComponents = { - app: null, - form: null, - progressIndicator: null, -}; - const routes = [ { path: '*', @@ -68,7 +62,6 @@ class OpenForm { sentryDSN, sentryEnv = '', languageSelectorTarget, - displayComponents = {}, // TODO: document as unstable API useHashRouting = false, onLanguageChange, } = opts; @@ -78,7 +71,6 @@ class OpenForm { this.formId = formId; this.formObject = null; this.lang = lang; - this.displayComponents = {...defaultDisplayComponents, ...displayComponents}; this.useHashRouting = useHashRouting; this.onLanguageChange = typeof onLanguageChange === 'function' ? onLanguageChange : undefined; @@ -197,7 +189,6 @@ class OpenForm { clientBaseUrl: this.clientBaseUrl, basePath: this.routerBasePath, baseTitle: this.baseTitle, - displayComponents: this.displayComponents, // XXX: deprecate and refactor usage to use useFormContext? requiredFieldsWithAsterisk: this.formObject.requiredFieldsWithAsterisk, debug: DEBUG, diff --git a/src/story-utils/decorators.jsx b/src/story-utils/decorators.jsx index 5455bea81..c4e3ef967 100644 --- a/src/story-utils/decorators.jsx +++ b/src/story-utils/decorators.jsx @@ -16,12 +16,6 @@ export const ConfigDecorator = (Story, {parameters}) => { basePath: '', baseTitle: '', requiredFieldsWithAsterisk: true, - displayComponents: { - app: null, - form: null, - progressIndicator: null, - loginOptions: null, - }, }; const fromParams = parameters?.config || {}; return (