Move Form.tsx to form-react sdk

samples/sample-react-app/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import { useFetch } from './hooks/useFetch';
-import Form from './components/Form';
+import { Form } from '@optimizely/forms-react';
 import { extractParams } from './helpers/urlHelper';
 
 function App() {
@@ -16,9 +16,10 @@ function App() {
             <h1>{pageData.title}</h1>
             {pageData.childrens.map((c: any) => (
               <Form 
+                key={c.reference.key}
                 formKey={c.reference.key} 
-                key={c.reference.key} 
-                language={language ?? "en"}/>
+                language={language ?? "en"}
+                baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL}/>
             ))}
           </>
       )}

src/@optimizely/forms-react/src/Form.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { FormContainerBlock } from "./components/FormContainerBlock";
+import { UseFormLoaderProps, useFormLoader } from "./hooks/useFormLoader";
+import "./Form.scss"
+
+interface FormProps {
+    /**
+     * The form key that identifies the form
+     */
+    formKey: string,
+    /**
+     * The code of the form language
+     */
+    language: string | undefined,
+    /**
+     * The base url of Headless Form API
+     */
+    baseUrl: string | undefined
+}
+
+export const Form = ({formKey, language, baseUrl}: FormProps) => {
+  const {data: formData } = useFormLoader({ formKey, language, baseUrl } as UseFormLoaderProps)
+
+  return (
+    <>
+        {formData && <FormContainerBlock form={formData} key={formData.key} />}
+    </>
+  );
+}

src/@optimizely/forms-react/src/FormContainerBlock.tsx → src/@optimizely/forms-react/src/components/FormContainerBlock.tsx

@@ -1,10 +1,9 @@
 import React, { useRef } from "react";
 import { FormContainer, StepBuilder } from "@optimizely/forms-sdk";
-import { RenderElementInStep } from "./components/RenderElementInStep";
-import { SubmitButtonType } from "./models/SubmitButtonType";
-import "./FormStyle.scss";
-import { FormProvider } from "./context/FormProvider";
-import { initState } from "./context/initState";
+import { RenderElementInStep } from "./RenderElementInStep";
+import { SubmitButtonType } from "../models/SubmitButtonType";
+import { FormProvider } from "../context/FormProvider";
+import { initState } from "../context/initState";
 
 export interface FormContainerProps {
     form: FormContainer

src/@optimizely/forms-react/src/index.ts

@@ -1 +1 @@
-export * from "./FormContainerBlock"
+export * from "./Form";