move move frontend to progress-test

app/javascript/pages/question/Form/steps/AnswerFormStep.tsx

@@ -0,0 +1,61 @@
+import { gql } from "@apollo/client";
+import React, { FC } from "react";
+import { Controller } from "react-hook-form";
+
+import { Card } from "../../../../components/Card/Card";
+import { TextEditor } from "../components/TextEditor";
+import { useFormProvider } from '../FormContext'
+
+export const AnswerFragment = gql`
+  fragment AnswerFields on Question {
+    alternatives {
+      correct
+      text
+    }
+    explanation
+    references
+  }
+`
+
+export const AnswerFormStep: FC = () => {
+  const { question, hooks: { control } } = useFormProvider()
+
+  const alternativesMaped = question?.alternatives || [
+    { text: "", correct: true },
+  ];
+
+  const correctAlternative = alternativesMaped.find(
+    (alternative) => alternative.correct === true,
+  );
+
+  return (
+    <>
+      <Card title="Resposta Correta" className="mb-3">
+        <div className="flex flex-col">
+          <div className="w-full">
+            <TextEditor
+              name={`alternatives[0].text`}
+              defaultValue={correctAlternative?.text ?? ''}
+            />
+            <Controller
+              name={`alternatives[0].correct`}
+              control={control}
+              defaultValue={true}
+              render={() => (<></>)}
+            />
+          </div>
+          <div className="flex flex-col w-full border border-gray-300 rounded p-4 mt-4 shadow-sm">
+            <div>
+              <h2 className="text-xl font-medium">Explicação</h2>
+              <TextEditor name="explanation" defaultValue={question?.explanation ?? ''} />
+            </div>
+            <div>
+              <h2 className="text-xl font-medium">Referências</h2>
+              <TextEditor defaultValue={question?.references ?? ''} name="references" />
+            </div>
+          </div>
+        </div>
+      </Card>
+    </>
+  );
+};