From 68d85cfae33679a243972ccc2bb75322b793234b Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Sun, 22 Dec 2024 18:54:51 +0100
Subject: [PATCH] :sparkles: Wire up form component to formio render component

---
 src/components/FormioComponent.stories.ts     | 28 +++++++++++++++++++
 .../forms/TextField/{index.jsx => index.ts}   |  0
 src/registry/textfield/index.tsx              | 14 ++++++----
 3 files changed, 36 insertions(+), 6 deletions(-)
 rename src/components/forms/TextField/{index.jsx => index.ts} (100%)

diff --git a/src/components/FormioComponent.stories.ts b/src/components/FormioComponent.stories.ts
index 5b9a9d2..38e91e1 100644
--- a/src/components/FormioComponent.stories.ts
+++ b/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': '',
+      },
+    },
+  },
 };
diff --git a/src/components/forms/TextField/index.jsx b/src/components/forms/TextField/index.ts
similarity index 100%
rename from src/components/forms/TextField/index.jsx
rename to src/components/forms/TextField/index.ts
diff --git a/src/registry/textfield/index.tsx b/src/registry/textfield/index.tsx
index a07dec3..f3f918e 100644
--- a/src/registry/textfield/index.tsx
+++ b/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;