From d5a14ddbebd69d882ad962b968efafe8020ab7a2 Mon Sep 17 00:00:00 2001 From: Manh Hung Nguyen Date: Thu, 9 Nov 2023 09:57:50 +0700 Subject: [PATCH] Move Form.tsx to form-react sdk Task: AFORM-3655 --- samples/sample-react-app/src/App.tsx | 7 +++-- .../sample-react-app/src/components/Form.tsx | 17 ----------- .../src/{FormStyle.scss => Form.scss} | 0 src/@optimizely/forms-react/src/Form.tsx | 29 +++++++++++++++++++ .../{ => components}/FormContainerBlock.tsx | 9 +++--- .../forms-react}/src/hooks/useFormLoader.ts | 0 src/@optimizely/forms-react/src/index.ts | 2 +- 7 files changed, 38 insertions(+), 26 deletions(-) delete mode 100644 samples/sample-react-app/src/components/Form.tsx rename src/@optimizely/forms-react/src/{FormStyle.scss => Form.scss} (100%) create mode 100644 src/@optimizely/forms-react/src/Form.tsx rename src/@optimizely/forms-react/src/{ => components}/FormContainerBlock.tsx (95%) rename {samples/sample-react-app => src/@optimizely/forms-react}/src/hooks/useFormLoader.ts (100%) diff --git a/samples/sample-react-app/src/App.tsx b/samples/sample-react-app/src/App.tsx index 910f82f..72c1106 100644 --- a/samples/sample-react-app/src/App.tsx +++ b/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() {

{pageData.title}

{pageData.childrens.map((c: any) => (
+ language={language ?? "en"} + baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL}/> ))} )} diff --git a/samples/sample-react-app/src/components/Form.tsx b/samples/sample-react-app/src/components/Form.tsx deleted file mode 100644 index 8380a9f..0000000 --- a/samples/sample-react-app/src/components/Form.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { FormContainerBlock } from "@optimizely/forms-react" -import { UseFormLoaderProps, useFormLoader } from "../hooks/useFormLoader"; - -interface FormProps { - formKey: string, - language: string | undefined -} - -export default function Form ({formKey, language}: FormProps) { - const {data: formData } = useFormLoader({ formKey, language, baseUrl: process.env.REACT_APP_HEADLESS_FORM_BASE_URL } as UseFormLoaderProps) - - return ( - <> - {formData && } - - ); -} \ No newline at end of file diff --git a/src/@optimizely/forms-react/src/FormStyle.scss b/src/@optimizely/forms-react/src/Form.scss similarity index 100% rename from src/@optimizely/forms-react/src/FormStyle.scss rename to src/@optimizely/forms-react/src/Form.scss diff --git a/src/@optimizely/forms-react/src/Form.tsx b/src/@optimizely/forms-react/src/Form.tsx new file mode 100644 index 0000000..2931a60 --- /dev/null +++ b/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 && } + + ); +} \ No newline at end of file diff --git a/src/@optimizely/forms-react/src/FormContainerBlock.tsx b/src/@optimizely/forms-react/src/components/FormContainerBlock.tsx similarity index 95% rename from src/@optimizely/forms-react/src/FormContainerBlock.tsx rename to src/@optimizely/forms-react/src/components/FormContainerBlock.tsx index 9ce612a..f256438 100644 --- a/src/@optimizely/forms-react/src/FormContainerBlock.tsx +++ b/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 diff --git a/samples/sample-react-app/src/hooks/useFormLoader.ts b/src/@optimizely/forms-react/src/hooks/useFormLoader.ts similarity index 100% rename from samples/sample-react-app/src/hooks/useFormLoader.ts rename to src/@optimizely/forms-react/src/hooks/useFormLoader.ts diff --git a/src/@optimizely/forms-react/src/index.ts b/src/@optimizely/forms-react/src/index.ts index 5886614..fc9310b 100644 --- a/src/@optimizely/forms-react/src/index.ts +++ b/src/@optimizely/forms-react/src/index.ts @@ -1 +1 @@ -export * from "./FormContainerBlock" \ No newline at end of file +export * from "./Form"; \ No newline at end of file