New Components - imagior (#14303)

* init

* new components

* pnpm-lock.yaml

* add $ variable

* improve prop names

* return if no new templates

* updates

* add prefix to customize props labels

Author: michelle0927

components/imagior/actions/generate-image/generate-image.mjs

@@ -0,0 +1,80 @@
+import imagior from "../../imagior.app.mjs";
+
+export default {
+  key: "imagior-generate-image",
+  name: "Generate Image",
+  description: "Generates a unique and robust image using a provided template. [See the documentation](https://docs.imagior.com/api-reference/image-generate)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    imagior,
+    templateId: {
+      propDefinition: [
+        imagior,
+        "templateId",
+      ],
+      reloadProps: true,
+    },
+  },
+  async additionalProps() {
+    const props = {};
+    if (!this.templateId) {
+      return props;
+    }
+    const { elements } = await this.imagior.listTemplateElements({
+      templateId: this.templateId,
+    });
+    for (const [
+      key,
+      value,
+    ] of Object.entries(elements)) {
+      props[`customize_${key}`] = {
+        type: "boolean",
+        label: `Customize ${key}`,
+        optional: true,
+        reloadProps: true,
+      };
+      if (this[`customize_${key}`]) {
+        for (const elementKey of Object.keys(value)) {
+          props[`${key}_${elementKey}`] = {
+            type: "string",
+            label: `${key} - ${elementKey}`,
+            optional: true,
+          };
+        }
+      }
+    }
+    return props;
+  },
+  async run({ $ }) {
+    const elements = {};
+    const { elements: allElements } = await this.imagior.listTemplateElements({
+      $,
+      templateId: this.templateId,
+    });
+    for (const [
+      key,
+      value,
+    ] of Object.entries(allElements)) {
+      if (!this[`customize_${key}`]) {
+        continue;
+      }
+      elements[key] = {};
+      for (const elementKey of Object.keys(value)) {
+        if (this[`${key}_${elementKey}`]) {
+          elements[key][elementKey] = this[`${key}_${elementKey}`];
+        }
+      }
+    }
+
+    const response = await this.imagior.generateImage({
+      $,
+      data: {
+        templateId: this.templateId,
+        elements,
+      },
+    });
+    $.export("$summary", `${response.message}`);
+    return response;
+  },
+};

components/imagior/imagior.app.mjs

@@ -1,11 +1,62 @@
+import { axios } from "@pipedream/platform";
+
 export default {
   type: "app",
   app: "imagior",
-  propDefinitions: {},
+  propDefinitions: {
+    templateId: {
+      type: "string",
+      label: "Template ID",
+      description: "The unique ID of the design template to use",
+      async options() {
+        const templates = await this.listTemplates();
+        return templates?.map(({
+          id: value, name: label,
+        }) => ({
+          value,
+          label,
+        })) || [];
+      },
+    },
+  },
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    _baseUrl() {
+      return "https://api.imagior.com";
+    },
+    async _makeRequest(opts = {}) {
+      const {
+        $ = this,
+        path,
+        ...otherOpts
+      } = opts;
+      return axios($, {
+        ...otherOpts,
+        url: `${this._baseUrl()}${path}`,
+        headers: {
+          Authorization: `Bearer ${this.$auth.api_key}`,
+        },
+      });
+    },
+    listTemplates(opts = {}) {
+      return this._makeRequest({
+        path: "/templates/all",
+        ...opts,
+      });
+    },
+    listTemplateElements({
+      templateId, ...opts
+    }) {
+      return this._makeRequest({
+        path: `/templates/${templateId}/elements`,
+        ...opts,
+      });
+    },
+    generateImage(opts = {}) {
+      return this._makeRequest({
+        method: "POST",
+        path: "/image/generate",
+        ...opts,
+      });
     },
   },
-};
+};

components/imagior/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/imagior",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Pipedream Imagior Components",
   "main": "imagior.app.mjs",
   "keywords": [
@@ -11,5 +11,8 @@
   "author": "Pipedream <[email protected]> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.0.3"
   }
-}
+}

components/imagior/sources/new-template/new-template.mjs

@@ -0,0 +1,63 @@
+import imagior from "../../imagior.app.mjs";
+import { DEFAULT_POLLING_SOURCE_TIMER_INTERVAL } from "@pipedream/platform";
+
+export default {
+  key: "imagior-new-template",
+  name: "New Template Created",
+  description: "Emit new event when a new template is created.",
+  version: "0.0.1",
+  type: "source",
+  dedupe: "unique",
+  props: {
+    imagior,
+    db: "$.service.db",
+    timer: {
+      type: "$.interface.timer",
+      default: {
+        intervalSeconds: DEFAULT_POLLING_SOURCE_TIMER_INTERVAL,
+      },
+    },
+  },
+  methods: {
+    _getLastTs() {
+      return this.db.get("lastTs") || 0;
+    },
+    _setLastTs(lastTs) {
+      this.db.set("lastTs", lastTs);
+    },
+    generateMeta(template) {
+      return {
+        id: template.id,
+        summary: `New Template: ${template.name}`,
+        ts: Date.parse(template.createdAt),
+      };
+    },
+  },
+  async run() {
+    const lastTs = this._getLastTs();
+
+    const templates = await this.imagior.listTemplates({
+      params: {
+        sort: "createdAt",
+        order: "desc",
+      },
+    });
+
+    if (!templates?.length) {
+      return;
+    }
+
+    const newTemplates = templates.filter(({ createdAt }) => Date.parse(createdAt) >= lastTs);
+
+    if (!newTemplates?.length) {
+      return;
+    }
+
+    this._setLastTs(Date.parse(newTemplates[0].createdAt));
+
+    newTemplates.forEach((template) => {
+      const meta = this.generateMeta(template);
+      this.$emit(template, meta);
+    });
+  },
+};