Dynamic access to Operators in both front and backend

client-tauri/src/components/fields/BuildFields.tsx

@@ -0,0 +1,15 @@
+import Joi from "@stirling-tools/joi";
+
+
+interface BuildFieldsProps {
+    /** The text to display inside the button */
+    schemaDescription: Joi.Description | undefined;
+}
+  
+
+export function BuildFields({ schemaDescription }: BuildFieldsProps) {
+    console.log("Render Build Fields", schemaDescription);
+    return (
+      <div>Description: {(schemaDescription?.flags as any)?.description}</div>
+    );
+}

client-tauri/src/components/fields/StringField.tsx

@@ -0,0 +1,12 @@
+interface StringFieldProps {
+    /** The text to display inside the button */
+    validValues: string[];
+    exampleValues: string;
+}
+  
+
+export function StringField({ validValues, exampleValues }: StringFieldProps) {
+    return (
+      <button>{validValues}</button>
+    );
+}

client-tauri/src/pages/Dynamic.tsx

@@ -1,15 +1,23 @@
 import { Link } from "react-router-dom";
 
-import { BaseSyntheticEvent } from "react";
+import { BaseSyntheticEvent, createContext, useState } from "react";
 import { Operator } from "@stirling-pdf/shared-operations/src/functions";
 import i18next from "i18next";
+import Joi from "@stirling-tools/joi";
+import { BuildFields } from "../components/fields/BuildFields";
 
 function Dynamic() {
+    const [schemaDescription, setSchemaDescription] = useState<Joi.Description>();
+
+
     const operators = ["impose"]; // TODO: Make this dynamic
 
     function selectionChanged(s: BaseSyntheticEvent) {
         const selectedValue = s.target.value;
-        if(selectedValue == "none") return;
+        if(selectedValue == "none") {
+            setSchemaDescription(undefined);
+            return;
+        }
 
         i18next.loadNamespaces("impose", (err, t) => {
             if (err) throw err;
@@ -19,8 +27,8 @@ function Dynamic() {
                 const Operator = Module[capitalizeFirstLetter(selectedValue)];
                 const description = Operator.schema.describe();
 
+                setSchemaDescription(description); // This will update children
                 console.log(description);
-                // TODO: use description to generate fields
             });
         });
     }
@@ -35,21 +43,19 @@ function Dynamic() {
 
             <input type="file" id="pdfFile" accept=".pdf" multiple />
             <br />
-
-            <br />
-            <textarea name="workflow" id="workflow"></textarea>
-            <br />
             <select id="pdfOptions" onChange={selectionChanged}>
                 <option value="none">none</option>
                 { operators.map((operator, i) => {
                     return (<option value={operator}>{operator}</option>)
                 }) }
             </select>
-            <button id="loadButton">Load</button>
-            <br />
+
+            <div id="values">
+                <BuildFields schemaDescription={schemaDescription}></BuildFields>
+            </div>
 
             <br />
-            <button id="doneButton">Done</button>
+            <button id="processButton">Process process file with current settings</button>
 
             <p>
                 <Link to="/">Go back home...</Link>