@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/PlaceholderUI.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+
+import InputField from "../../../components/shared/InputField";
+import { isFunction, filterPrivateMembers } from "./helpers";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+
+type State = {
+  properties: { [key: string]: any };
+};
+
+export default function PlaceholderUI(props: ServiceUIProps) {
+  const [state, setState] = useState<State>({ properties: {} });
+
+  const extractProperties = (config: any) => {
+    if (!config) {
+      return {};
+    }
+    const additionalFiters = ["uuid", "board", "bypass"];
+    return Object.keys(filterPrivateMembers(config) ?? {})
+      .filter((x) => additionalFiters.indexOf(x) === -1)
+      .filter((x) => !isFunction(config[x]))
+      .reduce((all, key) => {
+        const val = config[key];
+        const t = typeof val;
+        return {
+          ...all,
+          [key]: t === "object" ? JSON.stringify(val) : val,
+        };
+      }, {});
+  };
+
+  const onInit = (initialState: any) => {
+    const initialProps = extractProperties(initialState);
+    setState({ properties: initialProps });
+  };
+
+  const onNotification = (notification: any) => {
+    if (notification?.properties !== undefined) {
+      setState({
+        properties: {
+          ...extractProperties(notification),
+        },
+      });
+    }
+  };
+
+  const { service } = props;
+  return (
+    <ServiceUI
+      {...props}
+      className="pb-2"
+      onInit={onInit}
+      onNotification={onNotification}
+    >
+      <div key={service.uuid} id={service.uuid} style={{ minWidth: 200 }}>
+        {Object.keys(state.properties).map((prop) => {
+          const val = state.properties[prop];
+          return (
+            <InputField
+              key={`PlaceholderUI-${service.uuid}.${prop}`}
+              label={prop}
+              value={val}
+              onChange={(value) => service.configure({ [prop]: value })}
+              disabled={true}
+            />
+          );
+        })}
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/QrCode.ts

@@ -0,0 +1,63 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import QrCodeUI from "./QrCodeUI";
+import { resolveTemplateVars, getTemplateVarMap } from "hkp-frontend/src/templateVars";
+
+const serviceId = "hookup.to/service/qr-code";
+const serviceName = "QR Code";
+
+type State = {
+  url: string;
+};
+
+class QrCode extends ServiceBase<State> {
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) {
+    super(app, board, descriptor, id, { url: "" });
+  }
+
+  async configure(config: any) {
+    if (config.url !== undefined && config.url !== this.state.url) {
+      const url = resolveTemplateVars(config.url);
+      this.state.url = url;
+      this.app.notify(this, { url: this.state.url });
+    }
+  }
+
+  async process(params: any) {
+    let url =
+      typeof params === "string"
+        ? params
+        : params?.url ?? params?.requestPath ?? "";
+    if (url && url !== this.state.url) {
+      url = resolveTemplateVars(url);
+      if (url.includes("fromLink=")) {
+        const vars = getTemplateVarMap();
+        if (Object.keys(vars).length > 0) {
+          url += `&vars=${btoa(JSON.stringify(vars))}`;
+        }
+      }
+      this.state.url = url;
+      this.app.notify(this, { url });
+    }
+    return params;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) => new QrCode(app, board, descriptor, id),
+  createUI: QrCodeUI,
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/QrCodeUI.tsx

@@ -0,0 +1,197 @@
+import { useRef, useState } from "react";
+import { QRCodeCanvas } from "qrcode.react";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { Button } from "hkp-frontend/src/ui-components/primitives/button";
+import Editor, {
+  EditorHandle,
+} from "hkp-frontend/src/components/shared/Editor";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "hkp-frontend/src/ui-components/primitives/dialog";
+import {
+  compressAndEncodeState,
+  decompressAndDecodeState,
+} from "hkp-frontend/src/common";
+
+export default function QrCodeUI(props: ServiceUIProps) {
+  const [url, setUrl] = useState("");
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const editorRef = useRef<EditorHandle | null>(null);
+
+  const onInit = (state: any) => {
+    if (needsUpdate(state.url, url)) {
+      setUrl(state.url ?? "");
+    }
+  };
+
+  const onNotification = (params: any) => {
+    if (params?.url !== undefined) {
+      setUrl(params.url);
+    }
+  };
+
+  const onApply = () => {
+    const value = editorRef.current?.getValue() ?? "";
+    props.service.configure({ url: value.trim() });
+    setIsEditorOpen(false);
+    setError(null);
+  };
+
+  const onCompress = () => {
+    setError(null);
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+
+    const selected = editor.getSelectionText();
+    const source = selected ?? editor.getValue() ?? "";
+    if (!source.trim()) {
+      return;
+    }
+
+    try {
+      // Validate it's parseable JSON before compressing
+      JSON.parse(source);
+    } catch {
+      setError("Selection is not valid JSON — fix it before compressing.");
+      return;
+    }
+
+    const compressed = compressAndEncodeState(source);
+    if (selected !== null) {
+      editor.replaceSelection(compressed);
+    } else {
+      editor.setValue(compressed);
+    }
+  };
+
+  const onDecompress = () => {
+    setError(null);
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+
+    const selected = editor.getSelectionText();
+    const source = selected ?? editor.getValue() ?? "";
+    if (!source.trim()) {
+      return;
+    }
+
+    try {
+      const decompressed = decompressAndDecodeState(source.trim());
+      if (!decompressed) {
+        setError(
+          "Could not decompress — is the selection a valid lz-string payload?",
+        );
+        return;
+      }
+      // Pretty-print if valid JSON
+      let output = decompressed;
+      try {
+        output = JSON.stringify(JSON.parse(decompressed), null, 2);
+      } catch {
+        // not JSON, keep as-is
+      }
+      if (selected !== null) {
+        editor.replaceSelection(output);
+      } else {
+        editor.setValue(output);
+      }
+    } catch {
+      setError("Decompression failed.");
+    }
+  };
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      initialSize={{ width: 220, height: undefined }}
+    >
+      <div className="flex flex-col items-center justify-center p-3 gap-2">
+        {url ? (
+          <QRCodeCanvas value={url} size={160} />
+        ) : (
+          <div
+            style={{ width: 160, height: 160 }}
+            className="flex items-center justify-center bg-gray-100 text-gray-400 text-xs rounded"
+          >
+            No URL
+          </div>
+        )}
+        {url && (
+          <a
+            className="text-xs text-gray-500 truncate text-center w-[180px]"
+            href={url}
+          >
+            {url}
+          </a>
+        )}
+        <Button
+          variant="outline"
+          className="hkp-svc-btn w-full text-xs"
+          onClick={() => {
+            setError(null);
+            setIsEditorOpen(true);
+          }}
+        >
+          Edit URL
+        </Button>
+      </div>
+
+      <Dialog
+        open={isEditorOpen}
+        onOpenChange={(open) => {
+          setIsEditorOpen(open);
+          setError(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-[80%] h-[60vh] flex flex-col">
+          <DialogTitle>QR Code URL</DialogTitle>
+          <DialogDescription className="text-xs text-gray-500">
+            Select a compressed <code>fromLink</code> payload and click{" "}
+            <strong>Decompress</strong> to expand it to JSON, or select JSON and
+            click <strong>Compress</strong> to produce the payload. With no
+            selection, the entire editor content is used.
+          </DialogDescription>
+
+          <div className="flex-1 min-h-0">
+            <Editor
+              ref={(editor) => {
+                editorRef.current = editor;
+              }}
+              value={url}
+              language="plaintext"
+              autofocus
+            />
+          </div>
+
+          {error && <p className="text-xs text-red-500">{error}</p>}
+
+          <DialogFooter className="flex flex-wrap gap-2 justify-between">
+            <div className="flex gap-2">
+              <Button className="hkp-svc-btn" variant="outline" onClick={onDecompress}>
+                Decompress
+              </Button>
+              <Button className="hkp-svc-btn" variant="outline" onClick={onCompress}>
+                Compress
+              </Button>
+            </div>
+            <Button className="hkp-svc-btn" onClick={onApply}>Apply</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/Select.ts

@@ -0,0 +1,40 @@
+import { AppInstance, ServiceClass } from "../../../types";
+import ServiceBase from "./ServiceBase";
+import SelectUI from "./SelectUI";
+
+const serviceId = "hookup.to/service/select";
+const serviceName = "Select";
+
+type State = { arrayIndex: number };
+
+class Select extends ServiceBase<State> {
+  constructor(app: AppInstance, board: string, descriptor: ServiceClass, id: string) {
+    super(app, board, descriptor, id, { arrayIndex: 0 });
+  }
+
+  configure(config: { arrayIndex?: number }): any {
+    if (config?.arrayIndex !== undefined) {
+      this.state.arrayIndex = Math.max(0, Number(config.arrayIndex));
+      this.app.notify(this, { arrayIndex: this.state.arrayIndex });
+    }
+    return this.state;
+  }
+
+  process(params: any): any {
+    if (Array.isArray(params)) {
+      return params[this.state.arrayIndex];
+    }
+    console.warn("Unsupported input type, can't select");
+    return params;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (app: AppInstance, board: string, desc: ServiceClass, id: string) =>
+    new Select(app, board, desc, id),
+  createUI: SelectUI,
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/SelectUI.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+
+export default function SelectUI(props: ServiceUIProps) {
+  const { service } = props;
+  const [arrayIndex, setArrayIndex] = useState(0);
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={(state: any) => {
+        if (state.arrayIndex !== undefined) {
+          setArrayIndex(state.arrayIndex);
+        }
+      }}
+      onNotification={(n: any) => {
+        if (n.arrayIndex !== undefined) {
+          setArrayIndex(n.arrayIndex);
+        }
+      }}
+    >
+      <div style={{ padding: 8, fontFamily: "monospace", fontSize: 12 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          Index:
+          <input
+            type="number"
+            value={arrayIndex}
+            min={0}
+            style={{ width: 50 }}
+            onChange={(e) => {
+              const v = Math.max(0, Number(e.target.value));
+              setArrayIndex(v);
+              service.configure({ arrayIndex: v });
+            }}
+          />
+        </div>
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/ServiceBase.ts

@@ -0,0 +1,50 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+
+export default class ServiceBase<T> {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+  descriptor: ServiceClass;
+  state: T;
+  bypass: boolean = false;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    uuid: string,
+    s: T
+  ) {
+    this.uuid = uuid;
+    this.board = board;
+    this.app = app;
+    this.state = s;
+    this.descriptor = descriptor;
+  }
+
+  /**
+   * What a board keeps of this service. A service may leave out state it does
+   * not currently act on.
+   */
+  getConfiguration = async (): Promise<Partial<T> & { bypass: boolean }> => {
+    return { ...this.state, bypass: this.bypass };
+  };
+
+  setBypass = (bypass: boolean) => {
+    if (!!this.bypass !== !!bypass) {
+      this.bypass = !!bypass;
+      this.app.notify(this as any, { bypass: this.bypass }); // TODO: as any - refactor interface
+    }
+  };
+
+  pushErrorNotification = (message: string) => {
+    this.app.sendAction({
+      action: "notification",
+      service: this as any, // TODO: ServiceInstance is
+      payload: {
+        type: "error",
+        message,
+      },
+    });
+  };
+}

package/bundle/hkp-frontend/src/runtime/browser/services/SetRuntimeVariable.ts

@@ -0,0 +1,65 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import SetRuntimeVariableUI from "./SetRuntimeVariableUI";
+
+const serviceId = "hookup.to/service/set-runtime-variable";
+const serviceName = "Set Runtime Variable";
+
+type State = {
+  key: string;
+  value: any;
+};
+
+class SetRuntimeVariable {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+  state: State;
+  bypass: boolean = false;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string,
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+    this.state = { key: "", value: null };
+  }
+
+  configure(config: any): void {
+    if (config.key !== undefined) {
+      this.state.key = config.key;
+    }
+    if (config.value !== undefined) {
+      this.state.value = config.value;
+    }
+    this.app.notify(this, { ...this.state });
+  }
+
+  process(params: any): any {
+    if (this.state.key) {
+      this.app.setRuntimeVariable(this.state.key, this.state.value);
+    }
+    return params;
+  }
+
+  async getConfiguration() {
+    return { ...this.state, bypass: this.bypass };
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new SetRuntimeVariable(app, board, descriptor, id),
+  createUI: SetRuntimeVariableUI,
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/SetRuntimeVariableUI.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import InputField from "hkp-frontend/src/components/shared/InputField";
+
+export default function SetRuntimeVariableUI(props: ServiceUIProps) {
+  const [key, setKey] = useState<string>("");
+  const [value, setValue] = useState<string>("");
+
+  const onInit = (initialState: any) => {
+    setKey(initialState.key ?? "");
+    setValue(
+      initialState.value !== null && initialState.value !== undefined
+        ? JSON.stringify(initialState.value)
+        : "",
+    );
+  };
+
+  const onNotification = (notification: any) => {
+    if (notification.key !== undefined) {
+      setKey(notification.key);
+    }
+    if (notification.value !== undefined) {
+      setValue(JSON.stringify(notification.value));
+    }
+  };
+
+  const { service } = props;
+
+  return (
+    <ServiceUI {...props} onInit={onInit} onNotification={onNotification}>
+      <InputField
+        label="Key"
+        value={key}
+        onChange={(k) => service.configure({ key: k })}
+      />
+      <InputField
+        label="Value (JSON)"
+        value={value}
+        onChange={(v) => {
+          try {
+            service.configure({ value: JSON.parse(v) });
+          } catch {
+            service.configure({ value: v });
+          }
+        }}
+      />
+    </ServiceUI>
+  );
+}