@ketrics/ketrics-cli 0.1.0

package/templates/ketrics-app-v1/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "app3",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ketrics/sdk-frontend": "^0.1.1",
+    "axios": "^1.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  }
+}

package/templates/ketrics-app-v1/frontend/src/App.css

@@ -0,0 +1,121 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.app {
+  background: white;
+  border-radius: 12px;
+  padding: 40px;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 8px;
+  font-size: 28px;
+}
+
+.subtitle {
+  color: #666;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+
+.form {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: border-color 0.2s;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.button {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.error {
+  color: #e53e3e;
+  background: #fed7d7;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.result {
+  color: #38a169;
+  background: #c6f6d5;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.info {
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.info h2 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.info p {
+  color: #666;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.info ul {
+  color: #666;
+  padding-left: 20px;
+}
+
+.info li {
+  margin-bottom: 6px;
+}

package/templates/ketrics-app-v1/frontend/src/App.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { z } from "zod";
+import { apiClient } from "./services";
+
+const inputSchema = z.string().min(1, "Input is required").max(100, "Max 100 characters");
+
+function App() {
+  const [input, setInput] = useState("");
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = () => {
+    const validation = inputSchema.safeParse(input);
+    if (!validation.success) {
+      setError(validation.error.errors[0].message);
+      setResult(null);
+      return;
+    }
+    setError(null);
+    setResult(`You submitted: ${validation.data}`);
+  };
+
+  const handleRunEcho = async () => {
+    try {
+      const data = await apiClient.run("echo");
+      console.log("API Data:", data);
+    } catch (err) {
+      console.error("API Error:", err);
+    }
+  };
+
+  const handleRunSaveFile = async () => {
+    try {
+      const data = await apiClient.run("saveFile");
+      console.log("API Data:", data);
+    } catch (err) {
+      console.error("API Error:", err);
+    }
+  };
+
+  const handleRunReadFile = async () => {
+    try {
+      const data = await apiClient.run("readFile");
+      console.log("API Data:", data);
+    } catch (err) {
+      console.error("API Error:", err);
+    }
+  };
+
+  const handleRunGenerateDownloadUrl = async () => {
+    try {
+      const data = await apiClient.run("generateDownloadUrl");
+      // Trigger download of the file in the url data.result.url
+      const downloadUrl = data.result.url;
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.target = "_blank";
+      link.download = "data.json";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      console.log("downloadUrl:", downloadUrl);
+    } catch (err) {
+      console.error("API Error:", err);
+    }
+  };
+
+  return (
+    <div className="app">
+      <h1>Ketrics Test Application</h1>
+      <p className="subtitle">Frontend Demo with Zod Validation</p>
+
+      <div className="form">
+        <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Enter something..." className="input" />
+        <button onClick={handleSubmit} className="button">
+          Submit
+        </button>
+
+        <button onClick={handleRunEcho} className="button">
+          Test Echo API
+        </button>
+        <button onClick={handleRunSaveFile} className="button">
+          Test Save File API
+        </button>
+        <button onClick={handleRunReadFile} className="button">
+          Test Read File API
+        </button>
+        <button onClick={handleRunGenerateDownloadUrl} className="button">
+          Test Generate Download URL API
+        </button>
+      </div>
+
+      {error && <p className="error">{error}</p>}
+      {result && <p className="result">{result}</p>}
+
+      <div className="info">
+        <h2>About</h2>
+        <p>This is a test application for the Ketrics platform. It demonstrates:</p>
+        <ul>
+          <li>React + TypeScript + Vite setup</li>
+          <li>Zod schema validation</li>
+          <li>Deployment via Ketrics CLI</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/templates/ketrics-app-v1/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./App.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/ketrics-app-v1/frontend/src/services/index.ts

@@ -0,0 +1,55 @@
+import { createAuthManager } from "@ketrics/sdk-frontend";
+import axios from "axios";
+
+const auth = createAuthManager();
+
+// Initialize auto-refresh
+auth.initAutoRefresh({
+  refreshBuffer: 60,
+  onTokenUpdated: (token) => {
+    // Update your HTTP client headers
+    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  },
+});
+
+class APIClient {
+  private auth;
+
+  constructor(authManager: typeof auth) {
+    this.auth = authManager;
+  }
+
+  private async makeRequest(fnName: string) {
+    const runtimeApiUrl = this.auth.getRuntimeApiUrl();
+    const tenantId = this.auth.getTenantId();
+    const applicationId = this.auth.getApplicationId();
+    const accessToken = this.auth.getAccessToken();
+
+    if (!runtimeApiUrl || !tenantId || !accessToken) {
+      throw new Error("Missing authentication context");
+    }
+
+    const response = await fetch(`${runtimeApiUrl}/tenants/${tenantId}/applications/${applicationId}/functions/${fnName}`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  async run(fnName: string) {
+    const response = await this.makeRequest(fnName);
+
+    return response;
+  }
+}
+
+const apiClient = new APIClient(auth);
+
+export { apiClient };

package/templates/ketrics-app-v1/frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/ketrics-app-v1/frontend/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/ketrics-app-v1/frontend/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  base: "./", // Use relative paths instead of absolute
+  plugins: [react()],
+  build: {
+    outDir: "dist",
+    sourcemap: false,
+  },
+});

package/templates/ketrics-app-v1/ketrics.config.json

@@ -0,0 +1,10 @@
+{
+  "name": "my-application",
+  "version": "1.0.0",
+  "description": "My Ketrics application",
+  "runtime": "nodejs18",
+  "actions": ["read", "write"],
+  "entry": "dist/index.js",
+  "include": ["dist/**/*"],
+  "exclude": ["node_modules", "*.test.js", "*.spec.js"]
+}

package/templates/ketrics-app-v1/tests/test.echo.json

@@ -0,0 +1,13 @@
+{
+  "endpoint": "/tenants/{{tenantId}}/applications/{{applicationId}}/functions/echo",
+  "method": "POST",
+  "headers": {
+    "Authorization": "Bearer {{token}}",
+    "Content-Type": "application/json"
+  },
+  "body": {
+    "data": {
+      "hello": "world"
+    }
+  }
+}

package/templates/ketrics-app-v1/tests/test.greet.json

@@ -0,0 +1,11 @@
+{
+  "endpoint": "/tenants/{{tenantId}}/applications/{{applicationId}}/functions/greet",
+  "method": "POST",
+  "headers": {
+    "Authorization": "Bearer {{token}}",
+    "Content-Type": "application/json"
+  },
+  "body": {
+    "name": "Localhost"
+  }
+}

package/templates/ketrics-app-v1/tests/test.info.json

@@ -0,0 +1,9 @@
+{
+  "endpoint": "/tenants/{{tenantId}}/applications/{{applicationId}}/functions/info",
+  "method": "POST",
+  "headers": {
+    "Authorization": "Bearer {{token}}",
+    "Content-Type": "application/json"
+  },
+  "body": {}
+}