✨ Wire up form component to formio render component

src/components/FormioComponent.stories.ts

@@ -1,11 +1,14 @@
 import {FieldsetComponentSchema, TextFieldComponentSchema} from '@open-formulieren/types';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {withFormik} from '@/sb-decorators';
+
 import FormioComponent from './FormioComponent';
 
 export default {
   title: 'Internal API / FormioComponent',
   component: FormioComponent,
+  decorators: [withFormik],
 } satisfies Meta<typeof FormioComponent>;
 
 type Story = StoryObj<typeof FormioComponent>;
@@ -19,6 +22,15 @@ export const TextField: Story = {
       label: 'A simple textfield',
     } satisfies TextFieldComponentSchema,
   },
+  parameters: {
+    formik: {
+      initialValues: {
+        my: {
+          textfield: 'some initial value',
+        },
+      },
+    },
+  },
 };
 
 export const FieldSet: Story = {
@@ -39,6 +51,15 @@ export const FieldSet: Story = {
       ],
     } satisfies FieldsetComponentSchema,
   },
+  parameters: {
+    formik: {
+      initialValues: {
+        my: {
+          textfield: 'some initial value',
+        },
+      },
+    },
+  },
 };
 
 // TODO: remove story when all component types are implemented
@@ -52,4 +73,11 @@ export const UnregisteredComponent: Story = {
       validateOn: 'blur',
     },
   },
+  parameters: {
+    formik: {
+      initialValues: {
+        'component-unregistered': '',
+      },
+    },
+  },
 };

src/registry/textfield/index.tsx

@@ -1,15 +1,17 @@
 import type {TextFieldComponentSchema} from '@open-formulieren/types';
 
-export interface TextFieldProps {
+import TextField from '@/components/forms/TextField';
+
+export interface FormioTextFieldProps {
   componentDefinition: TextFieldComponentSchema;
 }
 
-const TextField: React.FC<TextFieldProps> = ({componentDefinition: {key, label}}) => {
+const FormioTextField: React.FC<FormioTextFieldProps> = ({
+  componentDefinition: {key, label, description, validate},
+}) => {
   return (
-    <div>
-      I am a text field with name {key} and label {label}!
-    </div>
+    <TextField name={key} label={label} description={description} isRequired={validate?.required} />
   );
 };
 
-export default TextField;
+export default FormioTextField;