initial form setup - WIP

client/package.json

@@ -65,7 +65,8 @@
     "tailwind-merge": "3.0.1",
     "tailwindcss": "3.1.7",
     "use-debounce": "6.0.1",
-    "validate.js": "0.13.1"
+    "validate.js": "0.13.1",
+    "zod": "3.24.2"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.0",

client/src/containers/my-projects/form/index.tsx

@@ -0,0 +1,36 @@
+import { Field, FormRenderProps, useForm, useFormState } from 'react-final-form';
+
+export default function Form({ handleSubmit }: { handleSubmit: FormRenderProps['handleSubmit'] }) {
+  const form = useForm();
+  const { submitting, pristine } = useFormState();
+
+  return (
+    <form id="exampleForm" onSubmit={handleSubmit}>
+      <div>
+        <label>First Name</label>
+        <Field name="firstName" component="input" type="text" placeholder="First Name" />
+      </div>
+      <div>
+        <label>Last Name</label>
+        <Field name="lastName" component="input" type="text" placeholder="Last Name" />
+      </div>
+      <div>
+        <label>Favorite Color</label>
+        <Field name="favoriteColor" component="select">
+          <option />
+          <option value="#ff0000">️ Red</option>
+          <option value="#00ff00">Green</option>
+          <option value="#0000ff">Blue</option>
+        </Field>
+      </div>
+      <div className="buttons">
+        <button type="submit" disabled={submitting || pristine}>
+          Submit
+        </button>
+        <button type="button" onClick={form.reset} disabled={submitting || pristine}>
+          Reset
+        </button>
+      </div>
+    </form>
+  );
+}

client/src/containers/my-projects/form/validations.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+const ZodProjectSchema = z.object({
+  firstName: z.string().nonempty(),
+  lastName: z.string().nonempty(),
+  favoriteColor: z.string().optional(),
+});
+
+export type ProjectSchema = z.infer<typeof ZodProjectSchema>;
+
+export const validator = (formValues: ProjectSchema) => {
+  const validation = ZodProjectSchema.safeParse(formValues);
+  if (validation.success) {
+    return {};
+  }
+  return validation.error;
+};

client/src/containers/my-projects/form/wrapper.tsx

@@ -0,0 +1,7 @@
+import { Form, FormProps } from 'react-final-form';
+
+import { ProjectSchema, validator } from './validations';
+
+export default function FormWrapper(formProps: FormProps<ProjectSchema>) {
+  return <Form<ProjectSchema> validate={validator} {...formProps} />;
+}

client/src/containers/my-projects/new/header.tsx

@@ -0,0 +1,17 @@
+import { useForm, useFormState } from 'react-final-form';
+
+import { Button } from 'components/button/component';
+
+export default function NewProjectHeader() {
+  const { invalid } = useFormState();
+  const { submit } = useForm();
+
+  return (
+    <header className="flex justify-between items-center">
+      <h2 className="text-3xl font-display">New project</h2>
+      <Button type="submit" theme="green" disabled={invalid} onClick={submit}>
+        Save changes
+      </Button>
+    </header>
+  );
+}

client/src/containers/my-projects/new/index.tsx

@@ -1,19 +1,33 @@
 import Wrapper from 'containers/wrapper';
 
 import { FORM_STEPS } from '../constants';
-import MyProjectsHeader from '../header';
+import Form from '../form';
+import FormWrapper from '../form/wrapper';
 import MyProjectsSidebar from '../sidebar';
 
+import NewProjectHeader from './header';
+
 export default function NewProject() {
   return (
-    <Wrapper>
-      <MyProjectsHeader />
-      <div className="grid grid-cols-12 gap-16">
-        <div className="col-span-3">
-          <MyProjectsSidebar sections={FORM_STEPS} />
-        </div>
-        <div className="col-span-9">WIP Form</div>
-      </div>
+    <Wrapper className="w-full">
+      <FormWrapper
+        onSubmit={async (data) => console.log('form wrapper', data)}
+        render={({ handleSubmit }) => {
+          return (
+            <div className="flex flex-col gap-14">
+              <NewProjectHeader />
+              <div className="grid grid-cols-12 gap-16">
+                <div className="col-span-3">
+                  <MyProjectsSidebar sections={FORM_STEPS} />
+                </div>
+                <div className="col-span-9">
+                  <Form handleSubmit={handleSubmit} />
+                </div>
+              </div>
+            </div>
+          );
+        }}
+      />
     </Wrapper>
   );
 }

client/src/containers/my-projects/sidebar.test.tsx

@@ -40,7 +40,7 @@ describe('sidebar', () => {
     expect(sections[0].querySelector('a')?.textContent).toBe(TEST_SECTIONS[0].label);
   });
 
-  it('renders a section the correct href', () => {
+  it('renders a section with the correct href', () => {
     expect(sections[0].querySelector('a')).toHaveAttribute(
       'href',
       `${TEST_PATHNAME}?step=${TEST_SECTIONS[0].value}`

client/src/containers/wrapper/component.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'lib/utils';
 
 export interface WrapperProps {
   children: ReactNode;
+  className?: HTMLDivElement['className'];
 }
 
 export const AuthWrapper = ({ children }: WrapperProps) => {
@@ -14,11 +15,12 @@ export const AuthWrapper = ({ children }: WrapperProps) => {
   );
 };
 
-const Wrapper = ({ children }: WrapperProps) => {
+const Wrapper = ({ children, className }: WrapperProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'max-w-7xl mx-auto px-5 lg:px-10': true,
+        [className]: !!className,
       })}
     >
       {children}

client/src/pages/_document.tsx

@@ -17,7 +17,7 @@ class MyDocument extends Document {
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
           <link
-            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;800&family=Open+Sans:wght@300;500;600;700;800&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&family=Open+Sans:wght@300;500;600;700;800&display=swap"
             rel="stylesheet"
           />