Revert "chore: delete unnecessary example app folder"

This reverts commit 64e8525.

application/app.tsx

@@ -0,0 +1,135 @@
+import {
+  FrameActions,
+  FrameConnector,
+  HostActionsHandler,
+} from "@tradetrust-tt/decentralized-renderer-react-components";
+import React, { useCallback, useEffect, useState } from "react";
+
+interface AppProps {
+  documents: {
+    name: string;
+    document: any;
+  }[];
+}
+
+export const App: React.FunctionComponent<AppProps> = ({ documents }): React.ReactElement => {
+  const [toFrame, setToFrame] = useState<HostActionsHandler>();
+  const [height, setHeight] = useState(0);
+  const [templates, setTemplates] = useState<{ id: string; label: string }[]>([]);
+  const [document, setDocument] = useState<{ name: string; document: any }>();
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
+  const fn = useCallback((toFrame: HostActionsHandler) => {
+    // wrap into a function otherwise toFrame function will be executed
+    setToFrame(() => toFrame);
+  }, []);
+
+  const fromFrame = (action: FrameActions): void => {
+    if (action.type === "UPDATE_HEIGHT") {
+      setHeight(action.payload);
+    }
+    if (action.type === "UPDATE_TEMPLATES") {
+      setTemplates(action.payload);
+      setSelectedTemplate(action.payload[0].id);
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.renderDocument = (document) => {
+    if (toFrame && document) {
+      toFrame({
+        type: "RENDER_DOCUMENT",
+        payload: {
+          document,
+        },
+      });
+    }
+  };
+  useEffect(() => {
+    if (toFrame && document) {
+      toFrame({
+        type: "RENDER_DOCUMENT",
+        payload: {
+          document: document.document,
+        },
+      });
+    }
+  }, [toFrame, document]);
+  useEffect(() => {
+    if (toFrame && selectedTemplate) {
+      toFrame({
+        type: "SELECT_TEMPLATE",
+        payload: selectedTemplate,
+      });
+    }
+  }, [selectedTemplate, toFrame]);
+
+  return (
+    <div className="my-4">
+      <div className="w-full text-center mb-2">
+        <button
+          className="bg-sky-500 text-white py-2 px-4 rounded "
+          onClick={() => {
+            if (toFrame) {
+              toFrame({
+                type: "PRINT",
+              });
+            }
+          }}
+        >
+          Print
+        </button>
+      </div>
+      <div className="container mx-auto">
+        <div className="flex flex-wrap">
+          <aside className="w-1/4">
+            <p className="font-bold p-2 text-center">Documents</p>
+            {documents.length === 0 && <div>Please configure the application and provide at least one document</div>}
+            {documents.map((d, index) => {
+              return (
+                <div
+                  key={index}
+                  data-testid={`${d.name}`}
+                  className={`bg-sky-50 p-2 border-t-4 border-sky-500 cursor-pointer hover:bg-sky-100 document ${
+                    document === d ? "active" : ""
+                  }`}
+                  onClick={() => setDocument(d)}
+                >
+                  {d.name}
+                </div>
+              );
+            })}
+          </aside>
+          <main className="w-3/4">
+            {document ? (
+              <>
+                <ul>
+                  {templates.map((template) => (
+                    <li
+                      key={template.id}
+                      className={`inline-block p-2 border border-b-0 ${
+                        selectedTemplate === template.id ? "text-sky-500" : ""
+                      }`}
+                      onClick={() => setSelectedTemplate(template.id)}
+                    >
+                      <a href="#">{template.label}</a>
+                    </li>
+                  ))}
+                </ul>
+                <FrameConnector
+                  source="http://localhost:3000"
+                  dispatch={fromFrame}
+                  onConnected={fn}
+                  className={`w-full ${height !== 0 ? "border" : ""}`}
+                  style={{ height: `${height}px` }}
+                />
+              </>
+            ) : (
+              <div className="text-center p-8">Please select a document on the left bar</div>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};

application/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { BillOfLadingSampleV2 } from "../src/templates/BillOfLading/sampleV2";
+import { BillOfLadingSampleV3 } from "../src/templates/BillOfLading/sampleV3";
+import { BillOfLadingMaerskPilotSampleV2 } from "../src/templates/BillOfLadingMaerskPilot/sampleV2";
+import { BillOfLadingMaerskTpacSampleV2 } from "../src/templates/BillOfLadingMaerskTpac/sampleV2";
+import { BillOfLadingGenericSample } from "../src/templates/BillOfLadingGeneric/sample";
+import { ChaftaCooSampleV2 } from "../src/templates/ChaftaCoo/sampleV2";
+import { ChaftaCooSampleV3 } from "../src/templates/ChaftaCoo/sampleV3";
+import { CoveringLetterSampleV2a } from "../src/templates/CoveringLetter/sampleV2a";
+import { CoveringLetterSampleV2b } from "../src/templates/CoveringLetter/sampleV2b";
+import { CoveringLetterSampleV2malformed } from "../src/templates/CoveringLetter/sampleV2malformed";
+import { CoveringLetterSampleV3 } from "../src/templates/CoveringLetter/sampleV3";
+import { InvoiceSampleV2 } from "../src/templates/Invoice/sampleV2";
+import { InvoiceSampleV3 } from "../src/templates/Invoice/sampleV3";
+import { InvoiceSampleV4 } from "../src/templates/Invoice/sampleV4";
+import { InvoiceSampleIDVCV4 } from "../src/templates/Invoice/sampleIDVCV4";
+import { XMLRendererSampleData } from "../src/templates/XmlRenderer/sample";
+import { SimpleCooSampleV2 } from "../src/templates/SimpleCoo/sampleV2";
+import { SimpleCooSampleV3 } from "../src/templates/SimpleCoo/sampleV3";
+import { CertificateOfNonManipulationSampleV2 } from "../src/templates/CertificateOfNonManipulation/sampleV2";
+import { BrochureSampleV2 } from "../src/templates/Brochure/sampleV2";
+import { BrochureSampleV4 } from "../src/templates/Brochure/sampleV4";
+import { App } from "./app";
+import "./main.css";
+
+ReactDOM.render(
+  <App
+    documents={[
+      { name: "Bill of Lading V2", document: BillOfLadingSampleV2 },
+      { name: "Bill of Lading V3", document: BillOfLadingSampleV3 },
+      {
+        name: "Bill of Lading V2 (Maersk Pilot)",
+        document: BillOfLadingMaerskPilotSampleV2,
+      },
+      {
+        name: "Bill of Lading V2 (Maersk TPAC)",
+        document: BillOfLadingMaerskTpacSampleV2,
+      },
+      { name: "Bill of Lading (Generic)", document: BillOfLadingGenericSample },
+      { name: "Chafta COO V2", document: ChaftaCooSampleV2 },
+      { name: "Chafta COO V3", document: ChaftaCooSampleV3 },
+      { name: "Covering Letter V2", document: CoveringLetterSampleV2a },
+      {
+        name: "Covering Letter V2 (Variant)",
+        document: CoveringLetterSampleV2b,
+      },
+      {
+        name: "Covering Letter V2 (Malformed)",
+        document: CoveringLetterSampleV2malformed,
+      },
+      { name: "Covering Letter V3", document: CoveringLetterSampleV3 },
+      { name: "InvoiceV2", document: InvoiceSampleV2 },
+      { name: "InvoiceV3", document: InvoiceSampleV3 },
+      { name: "InvoiceV4", document: InvoiceSampleV4 },
+      { name: "InvoiceIDVCV4", document: InvoiceSampleIDVCV4 },
+      { name: "XML Renderer", document: XMLRendererSampleData },
+      { name: "Simple COO V2", document: SimpleCooSampleV2 },
+      { name: "Simple COO V3", document: SimpleCooSampleV3 },
+      {
+        name: "Certificate of Non Manipulation V2",
+        document: CertificateOfNonManipulationSampleV2,
+      },
+      { name: "W3C Brochure V2", document: BrochureSampleV2 },
+      { name: "W3C Brochure V4", document: BrochureSampleV4 },
+    ]}
+  />,
+  document.getElementById("root")
+);

application/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;