Development 3.12

.eslintrc.json

@@ -54,6 +54,8 @@
     "/packages/rmb_direct_client/lib/types/lib/**",
     "packages/weblets/playground/public/build/elements/*",
     "packages/stats/public/build/*",
+    "packages/UI/*.config.js",
+    "packages/UI/src/index.css",
     "*.config.*",
     "*global.css"
   ]

.github/workflows/publish.yml

@@ -15,7 +15,8 @@ jobs:
       matrix:
         node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
+    env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
@@ -29,10 +30,15 @@ jobs:
         run: yarn --pure-lockfile
       - name: Build
         run: lerna run build --no-private
-      - name: Publish
+
+      - name: Publish Pre-release
+        if: contains(github.ref, 'rc')
+        run: lerna publish from-package --no-private --yes --dist-tag edge
+
+      - name: Publish Release
+        if: "!contains(github.ref, 'rc')"
         run: lerna publish from-package --no-private --yes
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
 
   docker-image-grid-client:
     needs: build

.github/workflows/threefold_ui_build.yaml

@@ -0,0 +1,45 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code using yarn build-only
+
+name: Threefold UI Build
+
+on:
+  push:
+    branches:
+      - development
+    paths:
+      - "packages/UI/**"
+  pull_request:
+    branches:
+      - development
+    paths:
+      - "packages/UI/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Build
+        run: |
+          lerna run build --no-private
+          yarn workspace @threefold/ui build-only

Makefile

@@ -14,6 +14,8 @@ ifeq ($(project), playground)
 	cd packages/playground && yarn dev
 else ifeq ($(project), dashboard)
 	cd packages/dashboard && yarn serve
+else ifeq ($(project), UI)
+	cd packages/UI && yarn dev
 endif
 
 build:
@@ -39,6 +41,8 @@ else ifeq ($(project), weblets)
 	cd packages/weblets/playground && yarn build
 else ifeq ($(project), playground)
 	cd packages/playground && yarn build
+else ifeq ($(project), UI)
+	cd packages/UI && yarn build-only
 else
 	yarn lerna run build --no-private
 endif

docs/workflows.md

@@ -104,3 +104,9 @@ On **Pull Request**, and **Push** to development branch that has changes in the
 ### [Docker](/.github/workflows/stats_docker.yaml)
 
 On **Release** published: It will build and push a new docker image based on project release tag.
+
+## Threefold UI
+
+### [Build](/.github/workflows/threefold_ui_build.yaml)
+
+On **Pull Request**, and **Push** to development branch: It will do a clean install of node dependencies, cache/restore them to make the process faster, and build the source code using `lerna run build --no-private`.

package.json

@@ -8,7 +8,7 @@
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.57.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "cypress": "^12.11.0",
+    "cypress": "^13.1.0",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",

packages/UI/.env

@@ -0,0 +1 @@
+VITE_MNEMONIC="<your_mnemonic_here>"

packages/UI/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/UI/README.md

@@ -0,0 +1,31 @@
+# UI
+
+Threefold UI is a project that contains reusable web components created by Threefold organization.
+
+## Components
+
+- [PDF Viewer](./docs/pdf_viewer.md)
+- [Script Editor](./docs/script_editor.md)
+
+## Examples
+
+- [Verification Server Example](./docs/server_verification.md)
+- [Web Component Example](./docs/web_component.md)
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

packages/UI/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:4173",
+    supportFile: false,
+  },
+});

packages/UI/cypress/e2e/example.cy.ts

@@ -0,0 +1,8 @@
+// https://on.cypress.io/api
+
+describe("My First Test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h1", "You did it!");
+  });
+});

packages/UI/cypress/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}

packages/UI/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/UI/cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {};

packages/UI/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/UI/docs/pdf_viewer.md

@@ -0,0 +1,94 @@
+# PDF Signer Web Component Documentation
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [Usage](#usage)
+   - [Build the PDF Signer](#build-the-pdf-signer)
+   - [Example of Usage](#example-of-usage)
+   - [Using Providers and Extensions](#using-providers-and-extensions)
+
+## Introduction
+
+The PDF Signer Web Component is a user-friendly PDF viewer that simplifies the process of signing PDF documents and sending them to a specified endpoint. This component is designed to make PDF signing and processing straightforward for your web applications.
+
+**Key features:**
+
+- Load and view PDF files from a provided URL.
+- Enable users to sign PDF documents easily.
+- Seamlessly submit signed documents to a designated endpoint.
+
+## Usage
+
+### Build the PDF Signer
+
+To use the PDF Signer Web Component, follow these steps:
+
+1. Clone the `tfgrid-sdk-ts` repository.
+2. Navigate to the `repository/packages/UI` directory.
+3. Run `yarn build-only` to generate the required distribution files.
+4. Locate the `dist` folder created in the previous step.
+5. Copy the `threefold-ui.umd.js` file and include it in your project's HTML files.
+6. Copy the `dist/tailwind.css` file and use it for styling.
+
+### Example of Usage
+
+Here's an example of how to use the PDF Signer Web Component in your HTML file:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Threefold UI</title>
+
+    <!-- Include the style and logo files -->
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <!-- Use the pdf-signer custom element with required attributes -->
+    <pdf-signer
+      dest="http://localhost:3000/"
+      pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+      network="main"
+    />
+    <!-- Include the PDF Signer component script -->
+    <script src="./pdf.js"></script>
+  </body>
+</html>
+```
+
+In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent, also for the `<network>` should match one of the following networks `[main, test, qa, dev]`.
+
+Feel free to customize the HTML structure and styles to match your application's design and requirements.
+
+### Using Providers and Extensions
+
+The PDF Signer Web Component now supports providers/extensions for enhanced functionality. You can choose between two providers:
+
+- **threefoldSignerProvider**: A basic provider that requires a mnemonic provided in the [.env](../.env).
+
+- **threefoldConnectorProvider**: An extension that connects to the Threefold Connector extension for enhanced capabilities.
+
+To specify the provider/extension to use, you can set an environment variable in your project. For example, to use the `threefoldSignerProvider`, set the following environment variable:
+
+```bash
+VITE_MNEMONIC="<your_mnemonic_here>"
+```
+
+and to use the `threefoldConnectorProvider` extension please make sure that you installed and enabled access the extension. `PS: The extension is still under development`
+comment the above line to be:
+
+```bash
+# VITE_MNEMONIC="<your_mnemonic_here>"
+```
+
+The component will automatically detect the environment variable and use the selected provider/extension.
+
+By adding this flexibility, you can choose the provider/extension that best fits your project's requirements.
+
+**Note**: If you choose to use the `threefoldConnectorProvider` extension, make sure it is installed and configured properly in your environment.
+
+Now, you can seamlessly integrate PDF signing into your web application using the PDF Signer Web Component with your preferred provider/extension.