project form - project details

client/package.json

@@ -57,6 +57,7 @@
     "query-string": "7.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-dropzone": "14.3.5",
     "react-final-form": "6.5.3",
     "react-redux": "7.2.4",
     "react-simple-maps": "3.0.0",

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

@@ -1,36 +1,22 @@
-import { Field, FormRenderProps, useForm, useFormState } from 'react-final-form';
+import { FormRenderProps } from 'react-final-form';
+
+import { useSearchParams } from 'next/navigation';
+
+import ContactDetailsStep from './steps/contact-details';
+import FundingStep from './steps/funding';
+import ProjectDetailsStep from './steps/project-details';
+
+type STEP = 'project-details' | 'contact-details' | 'funding';
 
 export default function Form({ handleSubmit }: { handleSubmit: FormRenderProps['handleSubmit'] }) {
-  const form = useForm();
-  const { submitting, pristine } = useFormState();
+  const searchParams = useSearchParams();
+  const currentStep = (searchParams.get('step') as STEP) || 'project-details';
 
   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 onSubmit={handleSubmit}>
+      {currentStep === 'project-details' && <ProjectDetailsStep />}
+      {currentStep === 'contact-details' && <ContactDetailsStep />}
+      {currentStep === 'funding' && <FundingStep />}
     </form>
   );
 }

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

@@ -0,0 +1,40 @@
+import Icon from 'components/icon';
+
+import FORA_MEMBERS_SVG from 'svgs/form/fora-members.svg?sprite';
+import PRIVATE_SVG from 'svgs/form/private.svg?sprite';
+import PUBLIC_SVG from 'svgs/form/public.svg?sprite';
+import { ComponentProps, PropsWithChildren } from 'react';
+import { cn } from '../../../lib/utils';
+
+function renderIcon(
+  icon: ComponentProps<typeof VisibilityLabel>['icon']
+): ComponentProps<typeof Icon>['icon'] {
+  if (icon === 'private') return PRIVATE_SVG;
+  if (icon === 'fora-members') return FORA_MEMBERS_SVG;
+  return PUBLIC_SVG;
+}
+
+export default function VisibilityLabel({
+  children,
+  icon = 'public',
+  required = false,
+  labelProps,
+}: PropsWithChildren<{
+  labelProps: ComponentProps<'label'>;
+  icon?: 'private' | 'public' | 'fora-members';
+  required?: boolean;
+}>) {
+  return (
+    <label
+      {...labelProps}
+      className={cn(
+        'flex items-center gap-1 text-grey-20 uppercase font-semibold',
+        labelProps.className
+      )}
+    >
+      <Icon icon={renderIcon(icon)} />
+      {children}
+      {required && <span className="text-red-0">*</span>}
+    </label>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { ComponentProps } from 'react';
+
+import { cn } from 'lib/utils';
+
+import Icon from 'components/icon';
+
+import FORA_MEMBERS_SVG from 'svgs/form/fora-members.svg?sprite';
+import PRIVATE_SVG from 'svgs/form/private.svg?sprite';
+import PUBLIC_SVG from 'svgs/form/public.svg?sprite';
+
+const LEGEND_ITEMS: {
+  label: string;
+  icon: ComponentProps<typeof Icon>['icon'];
+}[] = [
+  {
+    label: 'Private Information',
+    icon: PRIVATE_SVG,
+  },
+  {
+    label: 'Public Information',
+    icon: PUBLIC_SVG,
+  },
+  {
+    label: 'Only FORA members',
+    icon: FORA_MEMBERS_SVG,
+  },
+];
+
+export default function FormLegend({ className }: { className?: HTMLUListElement['className'] }) {
+  return (
+    <ul className={cn('flex gap-4 p-3 bg-grey-60', className)}>
+      {LEGEND_ITEMS.map(({ label, icon }) => (
+        <li key={label} className="flex items-center gap-1 text-grey-20 font-semibold">
+          <Icon icon={icon} />
+          {label}
+        </li>
+      ))}
+    </ul>
+  );
+}

client/src/containers/my-projects/form/steps/contact-details.tsx

@@ -0,0 +1,3 @@
+export default function ContactDetailsStep() {
+  return <div>ContactDetailsStep</div>;
+}

client/src/containers/my-projects/form/steps/funding.tsx

@@ -0,0 +1,3 @@
+export default function FundingStep() {
+  return <div>FundingStep</div>;
+}