♻️ Replace RadioField usage with formio-renderer component

open-formulieren · Feb 28, 2025 · 22268a8 · 22268a8
1 parent c4442a5
commit 22268a8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/src/components/EmailVerification/ModeField.jsx b/src/components/EmailVerification/ModeField.jsx
@@ -1,7 +1,6 @@
+import {RadioField} from '@open-formulieren/formio-renderer';
 import {useIntl} from 'react-intl';
 
-import {RadioField} from 'components/forms';
-
 const ModeField = () => {
   const intl = useIntl();
   return (

diff --git a/src/components/forms/RadioField/RadioField.stories.jsx b/src/components/forms/RadioField/RadioField.stories.jsx
@@ -1,9 +1,8 @@
+import {RadioField} from '@open-formulieren/formio-renderer';
 import {expect, userEvent, within} from '@storybook/test';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
-import {RadioField} from './RadioField';
-
 export default {
   title: 'Pure React Components / Forms / RadioField',
   component: RadioField,
@@ -27,7 +26,6 @@ export default {
 export const Default = {
   args: {
     name: 'test',
-    id: 'test',
     label: 'Radio field',
     description: 'This is a custom description',
     disabled: false,

diff --git a/src/sdk.jsx b/src/sdk.jsx
@@ -1,3 +1,4 @@
+import RenderSettingsProvider from '@open-formulieren/formio-renderer/components/RendererSettingsProvider';
 import 'flatpickr';
 import React from 'react';
 import {createRoot} from 'react-dom/client';
@@ -167,16 +168,20 @@ class OpenForm {
               debug: DEBUG,
             }}
           >
-            <NonceProvider nonce={CSPNonce.getValue()} cacheKey="sdk-react-select">
-              <I18NErrorBoundary>
-                <I18NManager
-                  languageSelectorTarget={this.languageSelectorTarget}
-                  onLanguageChangeDone={this.onLanguageChangeDone.bind(this)}
-                >
-                  <RouterProvider router={router} future={PROVIDER_FUTURE_FLAGS} />
-                </I18NManager>
-              </I18NErrorBoundary>
-            </NonceProvider>
+            <RenderSettingsProvider
+              requiredFieldsWithAsterisk={this.formObject.requiredFieldsWithAsterisk}
+            >
+              <NonceProvider nonce={CSPNonce.getValue()} cacheKey="sdk-react-select">
+                <I18NErrorBoundary>
+                  <I18NManager
+                    languageSelectorTarget={this.languageSelectorTarget}
+                    onLanguageChangeDone={this.onLanguageChangeDone.bind(this)}
+                  >
+                    <RouterProvider router={router} future={PROVIDER_FUTURE_FLAGS} />
+                  </I18NManager>
+                </I18NErrorBoundary>
+              </NonceProvider>
+            </RenderSettingsProvider>
           </ConfigContext.Provider>
         </FormContext.Provider>
       </React.StrictMode>

diff --git a/src/story-utils/decorators.jsx b/src/story-utils/decorators.jsx
@@ -1,3 +1,4 @@
+import RenderSettingsProvider from '@open-formulieren/formio-renderer/components/RendererSettingsProvider';
 import {Document} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import merge from 'lodash/merge';
@@ -18,9 +19,12 @@ export const ConfigDecorator = (Story, {parameters}) => {
     requiredFieldsWithAsterisk: true,
   };
   const fromParams = parameters?.config || {};
+  const value = merge(defaults, fromParams);
   return (
-    <ConfigContext.Provider value={merge(defaults, fromParams)}>
-      <Story />
+    <ConfigContext.Provider value={value}>
+      <RenderSettingsProvider requiredFieldsWithAsterisk={value.requiredFieldsWithAsterisk}>
+        <Story />
+      </RenderSettingsProvider>
     </ConfigContext.Provider>
   );
 };