feat: Add Accord Project APAP integration with configurable server URL

API_UPLOAD_FEATURES.md

@@ -0,0 +1,161 @@
+# API Upload Features
+
+This document describes the new API upload functionality added to the Accord Protocol Template Playground.
+
+## Overview
+
+The template playground now includes comprehensive support for uploading templates and creating agreements using the Accord Protocol API format as defined in the [OpenAPI specification](https://raw.githubusercontent.com/accordproject/apap/refs/heads/main/openapi.json).
+
+## New Components
+
+### 1. Template Metadata Editor
+
+**Location**: `src/editors/editorsContainer/TemplateMetadata.tsx`
+
+A form-based editor that allows users to configure all template metadata fields required by the API:
+
+- **Basic Properties**:
+  - Author
+  - Display Name
+  - Version
+  - Description
+  - License (dropdown with common licenses)
+  - Keywords (tag-based input)
+
+- **Runtime Metadata**:
+  - Runtime (TypeScript/JavaScript/ES2015)
+  - Template Type (Clause/Contract/Template)
+  - Cicero Version
+
+### 2. Template Logic Editor
+
+**Location**: `src/editors/editorsContainer/TemplateLogic.tsx`
+
+A large text area editor for writing TypeScript/JavaScript logic code with:
+- Syntax highlighting
+- Undo/Redo functionality
+- Monospace font for code readability
+
+### 3. API Upload Component
+
+**Location**: `src/components/ApiUpload.tsx`
+
+A comprehensive upload interface that provides:
+
+- **API Configuration**: Configurable API base URL
+- **Template Upload**: Upload template to API with validation
+- **Agreement Creation**: Create agreements from uploaded templates
+- **Template Download**: Download template as JSON file
+- **Preview Modal**: View formatted template JSON before upload
+
+## API Integration
+
+### Template Format
+
+The system automatically formats templates according to the Accord Protocol API specification:
+
+```json
+{
+  "uri": "resource:[email protected]#template-name",
+  "author": "Author Name",
+  "displayName": "Template Display Name",
+  "version": "1.0.0",
+  "description": "Template description",
+  "license": "Apache-2",
+  "keywords": ["keyword1", "keyword2"],
+  "metadata": {
+    "$class": "[email protected]",
+    "runtime": "typescript",
+    "template": "clause",
+    "cicero": "0.25.x"
+  },
+  "logo": null,
+  "templateModel": {
+    "$class": "[email protected]",
+    "typeName": "templatename",
+    "model": {
+      "$class": "[email protected]",
+      "ctoFiles": [
+        {
+          "contents": "// Concerto model content",
+          "filename": "model.cto"
+        }
+      ]
+    }
+  },
+  "text": {
+    "$class": "[email protected]",
+    "templateText": "TemplateMark content"
+  },
+  "logic": "// Template logic code",
+  "sampleRequest": null
+}
+```
+
+### API Endpoints
+
+The system integrates with the following API endpoints:
+
+- `POST /templates` - Upload template
+- `POST /agreements` - Create agreement from template
+- `GET /templates` - List templates
+- `GET /agreements` - List agreements
+
+## Usage
+
+### 1. Configure Template Metadata
+
+1. Open the "Template Metadata" panel
+2. Fill in required fields (Author and Display Name are mandatory)
+3. Configure runtime settings as needed
+
+### 2. Write Template Logic (Optional)
+
+1. Open the "Template Logic" panel
+2. Write TypeScript/JavaScript code for template execution
+3. Use undo/redo for code editing
+
+### 3. Upload to API
+
+1. Open the "API Upload" panel
+2. Configure the API base URL
+3. Click "Upload Template to API"
+4. Review the generated JSON in the preview modal
+5. Optionally create agreements from the uploaded template
+
+### 4. Download Template
+
+- Use the "Download Template JSON" button to save the template locally
+
+## State Management
+
+The new features are integrated into the existing Zustand store with:
+
+- `templateMetadata`: Template metadata state
+- `templateLogic`: Template logic code
+- `setTemplateMetadata()`: Update metadata
+- `setTemplateLogic()`: Update logic code
+
+## Data Persistence
+
+Template metadata and logic are included in:
+- Shareable links (compressed data)
+- Sample loading
+- State restoration
+
+## Error Handling
+
+The system includes comprehensive error handling:
+- Validation of required fields
+- API error responses
+- Network connectivity issues
+- JSON parsing errors
+
+## Future Enhancements
+
+Potential improvements:
+- Template versioning
+- Batch upload capabilities
+- Template marketplace integration
+- Advanced validation rules
+- Template testing framework 

README.md

@@ -42,6 +42,30 @@ The Accord Project Playground is an open-source project, welcoming contributions
 
 The Template Playground is deployed at: [https://playground.accordproject.org](https://playground.accordproject.org)
 
+## API Configuration
+
+The playground can connect to an Accord Protocol API server for template and agreement management. To configure the API server URL:
+
+### Environment Variable Configuration
+
+Create a `.env` file in the project root with:
+
+```bash
+# Accord Protocol API Server URL
+VITE_API_SERVER_URL=http://your-accord-server:port
+```
+
+### Default Configuration
+
+If no environment variable is set, the playground defaults to:
+```
+http://ec2-3-80-94-40.compute-1.amazonaws.com:9000
+```
+
+### Development Proxy
+
+In development mode, the playground automatically proxies `/api/*` requests to the configured server to avoid CORS issues.
+
 ---
 
 <p align="center">

package.json

@@ -29,6 +29,7 @@
     "@types/styled-components": "^5.1.34",
     "antd": "^5.7.2",
     "core-js": "^3.37.1",
+    "for-each": "^0.3.5",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
     "jest-canvas-mock": "^2.5.2",

src/App.tsx

@@ -11,6 +11,9 @@ import AgreementHtml from "./AgreementHtml";
 import Errors from "./utils/helpers/Errors";
 import TemplateMarkdown from "./editors/editorsContainer/TemplateMarkdown";
 import TemplateModel from "./editors/editorsContainer/TemplateModel";
+import TemplateMetadata from "./editors/editorsContainer/TemplateMetadata";
+import TemplateLogic from "./editors/editorsContainer/TemplateLogic";
+import ApiUpload from "./components/ApiUpload";
 import useAppStore from "./store/store";
 import SampleDropdown from "./components/SampleDropdown";
 import UseShare from "./components/UseShare";
@@ -115,6 +118,21 @@ const App = () => {
       label: "Concerto Model",
       children: <TemplateModel />,
     },
+    {
+      key: "metadata",
+      label: "Template Metadata",
+      children: <TemplateMetadata />,
+    },
+    {
+      key: "logic",
+      label: "Template Logic",
+      children: <TemplateLogic />,
+    },
+    {
+      key: "api",
+      label: "API Upload",
+      children: <ApiUpload />,
+    },
     {
       key: "data",
       label: "Preview Data",