Add uncontrolled form to the nextjs example

nextjs-app-v14/src/app/components/home-page.tsx

@@ -13,6 +13,7 @@ export default function HomePage() {
     <h2>Demo Integrations</h2>
     <ul>
       <li><PieLink onClick={() => router.push('/integrations/form')} tag="button">Form Demo</PieLink></li>
+      <li><PieLink onClick={() => router.push('/integrations/uncontrolled-form')} tag="button">Uncontrolled Form Demo</PieLink></li>
     </ul>
     <h2>Component Pages</h2>
     <ul>

nextjs-app-v14/src/app/integrations/uncontrolled-form/page.tsx

@@ -0,0 +1,10 @@
+import UncontrolledForm from './uncontrolled-form';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Uncontrolled Form',
+}
+
+export default function UncontrolledFormPage() {
+    return <UncontrolledForm/>;
+}

nextjs-app-v14/src/app/integrations/uncontrolled-form/uncontrolled-form.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import NavigationLayout from '@/app/layout/navigation';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/index.js';
+import { createComponent } from '@lit/react';
+
+
+import '@/styles/form.scss';
+
+const ReactPieTextInput = createComponent({
+    tagName: 'pie-text-input',
+    elementClass: PieTextInput,
+    react: React,
+    events: {
+      onchange: 'change',
+    },
+  });
+
+export default function UnControlledForm() {
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        console.log(formData.get('first-name'))
+        console.log(formData.get('last-name'))
+    };
+
+    return (
+        <NavigationLayout title="Uncontrolled Form Test Page">
+            <form className="form" id="testForm" onSubmit={handleSubmit}>
+
+                {/* importing the element directly  */}
+                <pie-text-input
+                    placeholder="First name"
+                    name="first-name">
+                </pie-text-input>
+
+                <hr />
+
+                {/* importing the React element */}
+                <ReactPieTextInput
+                    placeholder='Last Name'
+                    name="last-name">
+                </ReactPieTextInput>
+
+
+                <div className='form-btns'>
+                    <PieButton className="form-btn" data-test-id="reset-btn" variant="secondary" type="reset">Reset</PieButton>
+                    <PieButton className="form-btn" data-test-id="submit-btn" type="submit">Submit</PieButton>
+                </div>
+            </form>
+        </NavigationLayout>
+    );
+}