From 1004b9db5f7fb6327b38c7cc46b297fc1fbf19b6 Mon Sep 17 00:00:00 2001
From: Raouf <raouf.sawehli@justeattakeaway.com>
Date: Mon, 28 Oct 2024 17:13:07 +0100
Subject: [PATCH] Add uncontrolled form to the nextjs example

---
 .../src/app/components/home-page.tsx          |  1 +
 .../integrations/uncontrolled-form/page.tsx   | 10 ++++
 .../uncontrolled-form/uncontrolled-form.tsx   | 56 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 nextjs-app-v14/src/app/integrations/uncontrolled-form/page.tsx
 create mode 100644 nextjs-app-v14/src/app/integrations/uncontrolled-form/uncontrolled-form.tsx

diff --git a/nextjs-app-v14/src/app/components/home-page.tsx b/nextjs-app-v14/src/app/components/home-page.tsx
index 12141b6..e67281a 100644
--- a/nextjs-app-v14/src/app/components/home-page.tsx
+++ b/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>
diff --git a/nextjs-app-v14/src/app/integrations/uncontrolled-form/page.tsx b/nextjs-app-v14/src/app/integrations/uncontrolled-form/page.tsx
new file mode 100644
index 0000000..e72a762
--- /dev/null
+++ b/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/>;
+}
diff --git a/nextjs-app-v14/src/app/integrations/uncontrolled-form/uncontrolled-form.tsx b/nextjs-app-v14/src/app/integrations/uncontrolled-form/uncontrolled-form.tsx
new file mode 100644
index 0000000..95a471c
--- /dev/null
+++ b/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>
+    );
+}