feat: framer app (#24204)

* added framer app

* new 1.jpeg

* Update packages/app-store/framer/config.json

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

@@ -33,6 +33,7 @@ import facetime_config_json from "./facetime/config.json";
 import fathom_config_json from "./fathom/config.json";
 import { metadata as feishucalendar__metadata_ts } from "./feishucalendar/_metadata";
 import fonio_ai_config_json from "./fonio-ai/config.json";
+import framer_config_json from "./framer/config.json";
 import ga4_config_json from "./ga4/config.json";
 import { metadata as giphy__metadata_ts } from "./giphy/_metadata";
 import { metadata as googlecalendar__metadata_ts } from "./googlecalendar/_metadata";
@@ -142,6 +143,7 @@ export const appStoreMetadata = {
   fathom: fathom_config_json,
   feishucalendar: feishucalendar__metadata_ts,
   "fonio-ai": fonio_ai_config_json,
+  framer: framer_config_json,
   ga4: ga4_config_json,
   giphy: giphy__metadata_ts,
   googlecalendar: googlecalendar__metadata_ts,

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

@@ -33,6 +33,7 @@ export const apiHandlers = {
   fathom: import("./fathom/api"),
   feishucalendar: import("./feishucalendar/api"),
   "fonio-ai": import("./fonio-ai/api"),
+  framer: import("./framer/api"),
   ga4: import("./ga4/api"),
   giphy: import("./giphy/api"),
   googlecalendar: import("./googlecalendar/api"),

packages/app-store/framer/DESCRIPTION.md

@@ -0,0 +1,17 @@
+---
+items:
+  - 1.jpeg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
+---
+
+{DESCRIPTION}
+
+Introducing the official Cal.com component, now available in the Insert Panel under Forms. 
+
+Cal is a fully customizable scheduling software for individuals, businesses taking calls, and developers building scheduling platforms. 
+
+We’ve collaborated with the team to make it incredibly easy to let people schedule meetings via your Framer site. 
+
+This new component supports multiple layouts, theming, and light customization options to make the embeds match any design. Available now.

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

@@ -0,0 +1,20 @@
+import { createDefaultInstallation } from "@calcom/app-store/_utils/installation";
+import type { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  redirect: {
+    newTab: true,
+    url: "https://www.framer.com/updates/cal-com",
+  },
+  createCredential: ({ appType, user, slug, teamId }) =>
+    createDefaultInstallation({ appType, user: user, slug, key: {}, teamId }),
+};
+
+export default handler;

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

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

packages/app-store/framer/config.json

@@ -0,0 +1,16 @@
+{
+  "/*": "Don't modify slug - If required, do it using cli edit command",
+  "name": "Framer",
+  "slug": "framer",
+  "type": "framer_other",
+  "logo": "icon-dark.svg",
+  "url": "https://www.framer.com/updates/cal-com",
+  "variant": "other",
+  "categories": ["other"],
+  "publisher": "Framer B.V.",
+  "email": "benjamin@framer.com",
+  "description": "Add Cal.com to Framer, the design tool for websites. Design freely, publish fast, and scale with CMS, SEO, analytics, and more.",
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "link-as-an-app"
+}

packages/app-store/framer/index.ts

@@ -0,0 +1 @@
+export * as api from "./api";

packages/app-store/framer/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/framer",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "workspace:*"
+  },
+  "devDependencies": {
+    "@calcom/types": "workspace:*"
+  },
+  "description": "Add Cal.com to Framer, the design tool for websites. Design freely, publish fast, and scale with CMS, SEO, analytics, and more.\r\r\r\r"
+}

packages/app-store/framer/static/icon-dark.svg

@@ -0,0 +1,11 @@
+<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3989_8)">
+<rect width="140" height="140" rx="20" fill="white"/>
+<path d="M44.6484 33.9922H95.3484V59.3412H69.9984L44.6484 33.9922ZM44.6484 59.3412H69.9984L95.3484 84.6912H44.6484V59.3412ZM44.6484 84.6912H69.9984V110.041L44.6484 84.6912Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3989_8">
+<rect width="140" height="140" fill="white"/>
+</clipPath>
+</defs>
+</svg>