added n8n to app store (#4291)

* added n8n app to app store, gave padding to sticky app store header

* nit

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/v2/apps/App.tsx

@@ -106,10 +106,10 @@ const Component = ({
         )}
         <div
           className={classNames(
-            "sticky top-0 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
+            "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
             hasImages && "lg:ml-8"
           )}>
-          <div className="mb-8 flex">
+          <div className="mb-8 flex pt-4">
             <header>
               <div className="mb-4 flex items-center">
                 <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
@@ -204,7 +204,7 @@ const Component = ({
             </span>
           )}
 
-          <div className="mt-8 space-x-2">{body}</div>
+          <div className="prose prose-sm mt-8 space-x-2">{body}</div>
           <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
           <span>
             {price === 0 ? (

packages/app-store/apps.browser.generated.tsx

@@ -20,6 +20,7 @@ import { metadata as hubspotothercalendar_meta } from "./hubspotothercalendar/_m
 import { metadata as huddle01video_meta } from "./huddle01video/_metadata";
 import { metadata as jitsivideo_meta } from "./jitsivideo/_metadata";
 import { metadata as larkcalendar_meta } from "./larkcalendar/_metadata";
+import { metadata as n8n_meta } from "./n8n/_metadata";
 import { metadata as office365calendar_meta } from "./office365calendar/_metadata";
 import { metadata as office365video_meta } from "./office365video/_metadata";
 import { metadata as ping_meta } from "./ping/_metadata";
@@ -53,6 +54,7 @@ export const appStoreMetadata = {
   huddle01video: huddle01video_meta,
   jitsivideo: jitsivideo_meta,
   larkcalendar: larkcalendar_meta,
+  n8n: n8n_meta,
   office365calendar: office365calendar_meta,
   office365video: office365video_meta,
   ping: ping_meta,

packages/app-store/apps.server.generated.ts

@@ -17,6 +17,7 @@ export const apiHandlers = {
   huddle01video: import("./huddle01video/api"),
   jitsivideo: import("./jitsivideo/api"),
   larkcalendar: import("./larkcalendar/api"),
+  n8n: import("./n8n/api"),
   office365calendar: import("./office365calendar/api"),
   office365video: import("./office365video/api"),
   ping: import("./ping/api"),

packages/app-store/n8n/README.mdx

@@ -0,0 +1,25 @@
+---
+items:
+  - /api/app-store/n8n/1.png
+  - /api/app-store/n8n/2.png
+  - /api/app-store/n8n/3.png
+  - https://docs.n8n.io/_images/integrations/builtin/credentials/cal/getting-api-key.gif
+---
+
+<Slider items={items} />
+
+<p>You can use these credentials to authenticate the following nodes with Cal.</p>
+<ul>
+  <li>
+    <a target="_blank" href="https://docs.n8n.io/integrations/builtin/trigger-nodes/n8n-nodes-base.caltrigger/">Cal Trigger</a>
+  </li>
+</ul>
+<h2>Prerequisites</h2>
+<h2>Using API keys</h2>
+<p>Your API requests are authenticated using API keys. Any request that doesn't include an API key will return an error.</p>
+<ol>
+  <li>Log into your Cal account.</li>
+  <li>Click on <a target="_blank" href="/settings"><strong>Settings</strong></a>.</li>
+  <li>There you will find the API keys section which allows you to generate a key for use. More information on this can be found on the <a href="https://developer.cal.com/api/authentication">Cal Authentication</a> page.</li>
+  <li>Use API key in your Cal trigger node credentials in n8n.</li>
+</ol>

packages/app-store/n8n/_metadata.ts

@@ -0,0 +1,10 @@
+import type { AppMeta } from "@calcom/types/App";
+
+import config from "./config.json";
+
+export const metadata = {
+  category: "other",
+  ...config,
+} as AppMeta;
+
+export default metadata;

packages/app-store/n8n/api/add.ts

@@ -0,0 +1,17 @@
+import { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import { createDefaultInstallation } from "../../_utils/installation";
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  // Instead of passing appType and slug from here, api/integrations/[..args] should be able to derive and pass these directly to createCredential
+  appType: appConfig.type,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  redirectUrl: "https://n8n.io/integrations/817-cal-trigger/",
+  createCredential: ({ appType, user, slug }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
+};
+
+export default handler;

packages/app-store/n8n/api/index.ts

@@ -0,0 +1 @@
+export { default as add } from "./add";

packages/app-store/n8n/config.json

@@ -0,0 +1,15 @@
+{
+  "/*": "Don't modify slug - If required, do it using cli edit command",
+  "name": "n8n",
+  "slug": "n8n",
+  "type": "n8n_other",
+  "imageSrc": "/api/app-store/n8n/icon.svg",
+  "logo": "/api/app-store/n8n/icon.svg",
+  "url": "https://cal.com/apps/n8n",
+  "variant": "other",
+  "categories": ["other"],
+  "publisher": "Cal.com, Inc.",
+  "email": "help@cal.com",
+  "description": "Automate without limits. The workflow automation platform that doesn't box you in, that you never outgrow",
+  "__createdUsingCli": true
+}

packages/app-store/n8n/index.ts

@@ -0,0 +1,2 @@
+export * as api from "./api";
+export { metadata } from "./_metadata";

packages/app-store/n8n/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/n8n",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "description": "Automate without limits. The workflow automation platform that doesn't box you in, that you never outgrow",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  }
+}

packages/app-store/n8n/static/icon.svg

@@ -0,0 +1,4 @@
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="92" height="92" rx="5" fill="#EA4B71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84 34C84 38.4183 80.4183 42 76 42C72.2724 42 69.1402 39.4505 68.2521 36H57.0828C55.1274 36 53.4587 37.4137 53.1372 39.3424L52.8084 41.3152C52.4962 43.1883 51.5487 44.8185 50.2088 46C51.5487 47.1815 52.4962 48.8117 52.8084 50.6848L53.1372 52.6576C53.4587 54.5863 55.1274 56 57.0828 56H60.2521C61.1402 52.5495 64.2724 50 68 50C72.4183 50 76 53.5817 76 58C76 62.4183 72.4183 66 68 66C64.2724 66 61.1402 63.4505 60.2521 60H57.0828C53.1721 60 49.8346 57.1727 49.1917 53.3152L48.8628 51.3424C48.5414 49.4137 46.8726 48 44.9173 48H41.6544C40.6558 51.2801 37.6066 53.6667 34 53.6667C30.3934 53.6667 27.3443 51.2801 26.3457 48H21.6544C20.6558 51.2801 17.6066 53.6667 14 53.6667C9.58173 53.6667 6 50.0849 6 45.6667C6 41.2484 9.58173 37.6667 14 37.6667C17.8468 37.6667 21.0594 40.3817 21.8262 44H26.1739C26.9407 40.3817 30.1533 37.6667 34 37.6667C37.8468 37.6667 41.0594 40.3817 41.8262 44H44.9173C46.8726 44 48.5414 42.5863 48.8628 40.6576L49.1917 38.6848C49.8346 34.8273 53.1721 32 57.0828 32H68.2521C69.1402 28.5496 72.2724 26 76 26C80.4183 26 84 29.5817 84 34ZM80 34C80 36.2091 78.2092 38 76 38C73.7909 38 72 36.2091 72 34C72 31.7909 73.7909 30 76 30C78.2092 30 80 31.7909 80 34ZM14 49.6667C16.2092 49.6667 18 47.8758 18 45.6667C18 43.4575 16.2092 41.6667 14 41.6667C11.7909 41.6667 10 43.4575 10 45.6667C10 47.8758 11.7909 49.6667 14 49.6667ZM34 49.6667C36.2092 49.6667 38 47.8758 38 45.6667C38 43.4575 36.2092 41.6667 34 41.6667C31.7909 41.6667 30 43.4575 30 45.6667C30 47.8758 31.7909 49.6667 34 49.6667ZM68 62C70.2092 62 72 60.2091 72 58C72 55.7909 70.2092 54 68 54C65.7909 54 64 55.7909 64 58C64 60.2091 65.7909 62 68 62Z" fill="white"/>
+</svg>

packages/prisma/seed-app-store.config.json

@@ -53,5 +53,11 @@
     "categories": ["other"],
     "slug": "raycast",
     "type": "raycast_other"
+  },
+  {
+    "dirName": "n8n",
+    "categories": ["other"],
+    "slug": "n8n",
+    "type": "n8n_other"
   }
 ]