fix(embeds): add support for RSC by adding `use client` directives (#7919)

README.md

@@ -350,8 +350,7 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
-</a>  
-
+</a>
 
 <!-- CONTRIBUTORS -->
 
@@ -456,12 +455,12 @@ following
 
 1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
 2. From within the API console page, go to "Applications".
-3. Click "ADD CLIENT" button top right and select "Server-based Applications". 
+3. Click "ADD CLIENT" button top right and select "Server-based Applications".
 4. Fill in any information you want in the "Client Details" tab
-5. Go to tab "Client Secret" tab. 
+5. Go to tab "Client Secret" tab.
 6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
 7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs.
-8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers. 
+8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
 9. Click the "Save"/ "UPDATE" button at the bottom footer.
 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
 

package.json

@@ -86,7 +86,7 @@
     "jest-watch-select-projects": "^2.0.0",
     "jest-watch-typeahead": "^2.0.0",
     "lint-staged": "^12.5.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.6",
     "ts-jest": "^28.0.8",
     "typescript": "^4.9.4"
   },

packages/app-store/cron/DESCRIPTION.md

@@ -10,6 +10,7 @@ items:
 {DESCRIPTION}
 
 ### Cron's most valuable features
+
 <!-- From "FAQs: What are Cron’s most valuable features?"
 https://cronhq.notion.site/Cron-Calendar-5625be54feac4e13a75b10271b65ddb7 -->
 

packages/config/merged-prettier-plugin.js

@@ -1,14 +0,0 @@
-/* @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1024722576 */
-const tailwind = require("prettier-plugin-tailwindcss");
-const sortImports = require("@trivago/prettier-plugin-sort-imports");
-
-const combinedFormatter = {
-  parsers: {
-    typescript: {
-      ...tailwind.parsers.typescript,
-      preprocess: sortImports.parsers.typescript.preprocess,
-    },
-  },
-};
-
-module.exports = combinedFormatter;

packages/config/package.json

@@ -20,13 +20,13 @@
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.4",
-    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "eslint": "^8.34.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier": "^2.8.6",
+    "prettier-plugin-tailwindcss": "^0.2.5",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.2.1",
     "typescript": "^4.9.4"

packages/config/prettier-preset.js

@@ -16,7 +16,14 @@ module.exports = {
     "^[./]",
   ],
   importOrderSeparation: true,
-  plugins: [require("./merged-prettier-plugin")],
+  plugins: [
+    "@trivago/prettier-plugin-sort-imports",
+    /**
+     * **NOTE** tailwind plugin must come last!
+     * @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
+     */
+    "prettier-plugin-tailwindcss",
+  ],
   overrides: [
     {
       files: ["apps/website/lib/utils/wordlist/wordlist.ts"],

packages/embeds/embed-core/src/embed-iframe.ts

@@ -344,13 +344,15 @@ function keepParentInformedAboutDimensionChanges() {
     // Use, .height as that gives more accurate value in floating point. Also, do a ceil on the total sum so that whatever happens there is enough iframe size to avoid scroll.
     const contentHeight = Math.ceil(
       parseFloat(mainElementStyles.height) +
-      parseFloat(mainElementStyles.marginTop) +
-      parseFloat(mainElementStyles.marginBottom));
+        parseFloat(mainElementStyles.marginTop) +
+        parseFloat(mainElementStyles.marginBottom)
+    );
     const contentWidth = Math.ceil(
       parseFloat(mainElementStyles.width) +
-      parseFloat(mainElementStyles.marginLeft) +
-      parseFloat(mainElementStyles.marginRight));
-    
+        parseFloat(mainElementStyles.marginLeft) +
+        parseFloat(mainElementStyles.marginRight)
+    );
+
     // During first render let iframe tell parent that how much is the expected height to avoid scroll.
     // Parent would set the same value as the height of iframe which would prevent scroll.
     // On subsequent renders, consider html height as the height of the iframe. If we don't do this, then if iframe get's bigger in height, it would never shrink

packages/embeds/embed-react/src/Cal.tsx

@@ -1,4 +1,5 @@
-/* eslint-disable prefer-const */
+"use client";
+
 import { useEffect, useRef } from "react";
 
 import useEmbed from "./useEmbed";

packages/embeds/embed-react/src/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import type { GlobalCal } from "@calcom/embed-core";
 import EmbedSnippet from "@calcom/embed-snippet";
 

packages/embeds/embed-react/src/useEmbed.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 import EmbedSnippet from "@calcom/embed-snippet";

packages/embeds/embed-react/test-cal.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from "react";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDom from "react-dom";
 
 import Cal, { getCalApi } from "./src/index";

playwright.config.ts

@@ -108,7 +108,7 @@ const config: PlaywrightTestConfig = {
       name: "@calcom/embed-react",
       testDir: "./packages/embeds/embed-react/",
       testMatch: /.*\.(e2e|test)\.tsx?/,
-      use: { ...devices["Desktop Chrome"], baseURL: "http://localhost:3101/"  },
+      use: { ...devices["Desktop Chrome"], baseURL: "http://localhost:3101/" },
     },
     {
       name: "@calcom/embed-core--firefox",