string input and lift things to context

dashboard/src/components/form-refactor/PorterForm.tsx

@@ -1,15 +1,16 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { PorterFormData, Section, FormField } from "./types";
 import TabRegion, { TabOption } from "../TabRegion";
 import Heading from "../values-form/Heading";
 import Helper from "../values-form/Helper";
-import styled from "styled-components";
+import StringInput from "./field-components/StringInput";
+import { PorterFormContext } from "./PorterFormContextProvider";
 
-interface Props {
-  formData: PorterFormData;
-}
+interface Props {}
+
+const PorterForm: React.FC<Props> = () => {
+  const { formData } = useContext(PorterFormContext);
 
-const PorterForm: React.FC<Props> = ({ formData }) => {
   const [currentTab, setCurrentTab] = useState(
     formData.tabs.length > 0 ? formData.tabs[0].name : ""
   );
@@ -20,12 +21,13 @@ const PorterForm: React.FC<Props> = ({ formData }) => {
         return <Heading>{field.label}</Heading>;
       case "subtitle":
         return <Helper>{field.label}</Helper>;
+      case "string-input":
+        return <StringInput />;
     }
     return <p>Not Implemented: {field.type}</p>;
   };
 
   const renderSection = (section: Section): JSX.Element => {
-    console.log(section);
     return (
       <>
         {section.contents.map((field, i) => {

dashboard/src/components/form-refactor/PorterFormContextProvider.tsx

@@ -0,0 +1,21 @@
+import React, { createContext } from "react";
+import { PorterFormData } from "./types";
+
+interface Props {
+  formData: PorterFormData;
+}
+
+interface ContextProps {
+  formData: PorterFormData;
+}
+
+export const PorterFormContext = createContext<ContextProps | undefined>(
+  undefined!
+);
+const { Provider } = PorterFormContext;
+
+export const PorterFormContextProvider: React.FC<Props> = (props) => {
+  return (
+    <Provider value={{ formData: props.formData }}>{props.children}</Provider>
+  );
+};

dashboard/src/components/form-refactor/field-components/StringInput.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import InputRow from "../../values-form/InputRow";
+
+const StringInput = () => {
+  return <InputRow width="100%" type="text" value="" />;
+};
+
+export default StringInput;

dashboard/src/components/values-form/FormDebugger.tsx

@@ -13,6 +13,7 @@ import "ace-builds/src-noconflict/mode-text";
 import Heading from "./Heading";
 import Helper from "./Helper";
 import { PorterFormData } from "../form-refactor/types";
+import { PorterFormContextProvider } from "../form-refactor/PorterFormContextProvider";
 
 type PropsType = {
   goBack: () => void;
@@ -158,7 +159,9 @@ export default class FormDebugger extends Component<PropsType, StateType> {
 
         <Heading>🎨 Rendered Form</Heading>
         <Br />
-        <PorterForm formData={formData as PorterFormData} />
+        <PorterFormContextProvider formData={formData as PorterFormData}>
+          <PorterForm />
+        </PorterFormContextProvider>
         {/*<FormWrapper*/}
         {/*  valuesToOverride={this.state.valuesToOverride}*/}
         {/*  clearValuesToOverride={() =>*/}