basic structure for rendering

dashboard/src/components/TabRegion.tsx

@@ -4,8 +4,13 @@ import styled from "styled-components";
 import TabSelector from "./TabSelector";
 import Loading from "./Loading";
 
+export interface TabOption {
+  label: string;
+  value: string;
+}
+
 type PropsType = {
-  options: { label: string; value: string }[];
+  options: TabOption[];
   currentTab: string;
   setCurrentTab: (x: string) => void;
   defaultTab?: string;

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

@@ -0,0 +1,81 @@
+import React, { 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";
+
+interface Props {
+  formData: PorterFormData;
+}
+
+const PorterForm: React.FC<Props> = ({ formData }) => {
+  const [currentTab, setCurrentTab] = useState(
+    formData.tabs.length > 0 ? formData.tabs[0].name : ""
+  );
+
+  const renderSectionField = (field: FormField): JSX.Element => {
+    switch (field.type) {
+      case "heading":
+        return <Heading>{field.label}</Heading>;
+      case "subtitle":
+        return <Helper>{field.label}</Helper>;
+    }
+    return <p>Not Implemented: {field.type}</p>;
+  };
+
+  const renderSection = (section: Section): JSX.Element => {
+    console.log(section);
+    return (
+      <>
+        {section.contents.map((field, i) => {
+          return (
+            <React.Fragment key={`${section.name}-${field.type}-${i}`}>
+              {renderSectionField(field)}
+            </React.Fragment>
+          );
+        })}
+      </>
+    );
+  };
+
+  const getTabOptions = (): TabOption[] => {
+    return formData.tabs.map((tab) => {
+      return { label: tab.label, value: tab.name };
+    });
+  };
+
+  const renderTab = (name: string): JSX.Element => {
+    const tab = formData.tabs.filter((tab) => tab.name == name)[0];
+
+    if (!tab) {
+      return <></>;
+    }
+
+    return (
+      <>
+        {tab.sections.map((section) => {
+          return (
+            <React.Fragment key={section.name}>
+              {renderSection(section)}
+            </React.Fragment>
+          );
+        })}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <TabRegion
+        options={getTabOptions()}
+        currentTab={currentTab}
+        setCurrentTab={setCurrentTab}
+      >
+        {renderTab(currentTab)}
+      </TabRegion>
+    </>
+  );
+};
+
+export default PorterForm;

dashboard/src/components/form-refactor/types.ts

@@ -0,0 +1,34 @@
+/*
+  Interfaces for the form YAML
+*/
+
+export interface BasicFormField {
+  type: string;
+}
+
+export interface HeadingField extends  BasicFormField {
+  label: string;
+}
+
+export interface SubtitleField extends  BasicFormField {
+  label: string;
+}
+
+export type FormField = HeadingField|SubtitleField;
+
+export interface Section {
+  name: string;
+  contents: FormField[];
+}
+
+export interface Tab {
+  name: string;
+  label: string;
+  sections: Section[];
+}
+
+export interface PorterFormData {
+  name: string;
+  hasSource: true;
+  tabs: Tab[];
+}

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

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 import AceEditor from "react-ace";
+import PorterForm from "../form-refactor/PorterForm";
 import FormWrapper from "components/values-form/FormWrapper";
 import CheckboxRow from "components/values-form/CheckboxRow";
 import InputRow from "components/values-form/InputRow";
@@ -11,6 +12,7 @@ import "ace-builds/src-noconflict/mode-text";
 
 import Heading from "./Heading";
 import Helper from "./Helper";
+import { PorterFormData } from "../form-refactor/types";
 
 type PropsType = {
   goBack: () => void;
@@ -156,24 +158,25 @@ export default class FormDebugger extends Component<PropsType, StateType> {
 
         <Heading>🎨 Rendered Form</Heading>
         <Br />
-        <FormWrapper
-          valuesToOverride={this.state.valuesToOverride}
-          clearValuesToOverride={() =>
-            this.setState({ valuesToOverride: null })
-          }
-          showStateDebugger={this.state.showStateDebugger}
-          formData={formData}
-          isReadOnly={this.state.isReadOnly}
-          tabOptions={this.state.showBonusTabs ? tabOptions : []}
-          renderTabContents={
-            this.state.showBonusTabs ? this.renderTabContents : null
-          }
-          onSubmit={(values: any) => {
-            alert("Check console output.");
-            console.log("Raw submission values:");
-            console.log(values);
-          }}
-        />
+        <PorterForm formData={formData as PorterFormData} />
+        {/*<FormWrapper*/}
+        {/*  valuesToOverride={this.state.valuesToOverride}*/}
+        {/*  clearValuesToOverride={() =>*/}
+        {/*    this.setState({ valuesToOverride: null })*/}
+        {/*  }*/}
+        {/*  showStateDebugger={this.state.showStateDebugger}*/}
+        {/*  formData={formData}*/}
+        {/*  isReadOnly={this.state.isReadOnly}*/}
+        {/*  tabOptions={this.state.showBonusTabs ? tabOptions : []}*/}
+        {/*  renderTabContents={*/}
+        {/*    this.state.showBonusTabs ? this.renderTabContents : null*/}
+        {/*  }*/}
+        {/*  onSubmit={(values: any) => {*/}
+        {/*    alert("Check console output.");*/}
+        {/*    console.log("Raw submission values:");*/}
+        {/*    console.log(values);*/}
+        {/*  }}*/}
+        {/*/>*/}
       </StyledFormDebugger>
     );
   }