[questions][ui] contribute questions form ui

apps/portal/src/components/questions/ContributeQuestionDialog.tsx

@@ -1,6 +1,8 @@
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
+import { HorizontalDivider } from '~/../../../packages/ui/dist';
+
 import ContributeQuestionForm from './ContributeQuestionForm';
 import DiscardDraftDialog from './DiscardDraftDialog';
 
@@ -55,14 +57,17 @@ export default function ContributeQuestionDialog({
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                 <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
-                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="bg-white  p-6 pt-5 sm:pb-4">
-                    <div className="sm:flex sm:items-start">
+                    <div className="flex flex-1 items-stretch">
-                      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <div className="mt-3 w-full sm:mt-0 sm:ml-4 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900">
                           Question Draft
                         </Dialog.Title>
+                        <div className="w-full">
+                          <HorizontalDivider />
+                        </div>
                         <div className="mt-2">
                           <ContributeQuestionForm
                             onDiscard={() => setShowDiscardDialog(true)}

apps/portal/src/components/questions/ContributeQuestionForm.tsx

@@ -3,20 +3,24 @@ import { useForm } from 'react-hook-form';
 import {
   BuildingOffice2Icon,
   CalendarDaysIcon,
-  QuestionMarkCircleIcon,
+  // UserIcon,
-  UserIcon,
 } from '@heroicons/react/24/outline';
 import {
   Button,
   Collapsible,
-  HorizontalDivider,
+  Select,
+  // HorizontalDivider,
   TextArea,
   TextInput,
 } from '@tih/ui';
 
-import { useFormRegister } from '~/utils/questions/useFormRegister';
+import { QUESTION_TYPES } from '~/utils/questions/constants';
+import {
+  useFormRegister,
+  useSelectRegister,
+} from '~/utils/questions/useFormRegister';
 
-import SimilarQuestionCard from './card/SimilarQuestionCard';
+// Import SimilarQuestionCard from './card/SimilarQuestionCard';
 import Checkbox from './ui-patch/Checkbox';
 
 export type ContributeQuestionData = {
@@ -40,6 +44,7 @@ export default function ContributeQuestionForm({
   const { register: formRegister, handleSubmit } =
     useForm<ContributeQuestionData>();
   const register = useFormRegister(formRegister);
+  const selectRegister = useSelectRegister(formRegister);
 
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const handleCheckSimilarQuestions = (checked: boolean) => {
@@ -47,35 +52,39 @@ export default function ContributeQuestionForm({
   };
   return (
     <form
-      className="mt-3 flex flex-col items-stretch justify-center pb-[100px]"
+      className=" flex flex-1 flex-col items-stretch justify-center pb-[50px]"
       onSubmit={handleSubmit(onSubmit)}>
       <TextArea
-        isLabelHidden={true}
+        label="Question Prompt"
-        label="Question"
         placeholder="Contribute a question"
+        required={true}
         rows={5}
         {...register('questionContent')}
       />
-      <div className="mt-3 mb-2 flex flex-wrap items-end justify-center gap-2">
+      <div className="mt-3 mb-1 flex flex-wrap items-end gap-2">
-        <div className="min-w-[150px] flex-1">
+        <div className="mr-2 min-w-[113px] max-w-[113px] flex-1">
+          <Select
+            defaultValue="coding"
+            label="Type"
+            options={QUESTION_TYPES}
+            required={true}
+            {...selectRegister('questionType')}
+          />
+        </div>
+        <div className="min-w-[150px] max-w-[300px] flex-1">
           <TextInput
             label="Company"
+            required={true}
             startAddOn={BuildingOffice2Icon}
             startAddOnType="icon"
             {...register('company')}
           />
         </div>
-        <div className="min-w-[150px] flex-1">
+
-          <TextInput
+        <div className="min-w-[150px] max-w-[300px] flex-1">
-            label="Type"
-            startAddOn={QuestionMarkCircleIcon}
-            startAddOnType="icon"
-            {...register('questionType')}
-          />
-        </div>
-        <div className="min-w-[150px] flex-1">
           <TextInput
             label="Date"
+            required={true}
             startAddOn={CalendarDaysIcon}
             startAddOnType="icon"
             {...register('date')}
@@ -83,8 +92,8 @@ export default function ContributeQuestionForm({
         </div>
       </div>
       <Collapsible defaultOpen={true} label="Additional info">
-        <div className="flex flex-wrap items-end justify-center gap-2">
+        <div className="justify-left flex flex-wrap items-end gap-2">
-          <div className="min-w-[150px] flex-1">
+          <div className="min-w-[150px] max-w-[300px] flex-1">
             <TextInput
               label="Location"
               startAddOn={CalendarDaysIcon}
@@ -92,17 +101,17 @@ export default function ContributeQuestionForm({
               {...register('location')}
             />
           </div>
-          <div className="min-w-[150px] flex-1">
+          {/* <div className="min-w-[150px] max-w-[200px] flex-1">
             <TextInput
               label="Position <TODO>"
               startAddOn={UserIcon}
               startAddOnType="icon"
               {...register('position')}
             />
-          </div>
+          </div> */}
         </div>
       </Collapsible>
-      <div className="w-full">
+      {/* <div className="w-full">
         <HorizontalDivider />
       </div>
       <h1 className="mb-3">
@@ -120,7 +129,7 @@ export default function ContributeQuestionForm({
             console.log('hi!');
           }}
         />
-      </div>
+      </div> */}
       <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
           <Checkbox

apps/portal/src/components/questions/LandingComponent.tsx

@@ -97,7 +97,7 @@ export default function LandingComponent({
           />
         </div>
         <div>
-          <p className="py-20 text-center text-black ">
+          <p className="py-20 text-center text-white ">
             TODO questions Carousel
           </p>
         </div>

apps/portal/src/utils/questions/useFormRegister.ts

@@ -19,3 +19,25 @@ export const useFormRegister = <TFieldValues extends FieldValues>(
   );
   return formRegister;
 };
+
+export const useSelectRegister = <TFieldValues extends FieldValues>(
+  register: UseFormRegister<TFieldValues>,
+) => {
+  const formRegister = useCallback(
+    (...args: Parameters<typeof register>) => {
+      const { onChange, ...rest } = register(...args);
+      return {
+        ...rest,
+        onChange: (value: string) => {
+          onChange({
+            target: {
+              value,
+            },
+          });
+        },
+      };
+    },
+    [register],
+  );
+  return formRegister;
+};