[Feature] App Store CLI - Make it super easy to add an app.

README.md

@@ -402,7 +402,7 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 4. Fill in any information you want in the "App info" tab
 5. Go to tab "Auth"
 6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
-7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot othercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

apps/web/pages/api/integrations/[...args].ts

@@ -1,5 +1,7 @@
 import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
 
+import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
+
 import { getSession } from "@lib/auth";
 import { HttpError } from "@lib/core/http/error";
 
@@ -13,15 +15,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(404).json({ message: `API route not found` });
   }
 
-  const [_appName, apiEndpoint] = args;
-  const appName = _appName.split("_").join(""); // Transform `zoom_video` to `zoomvideo`;
-
+  const [appName, apiEndpoint] = args;
   try {
     /* Absolute path didn't work */
-    const handlerMap = (await import("@calcom/app-store/apiHandlers")).default;
-    const handlers = await handlerMap[appName as keyof typeof handlerMap];
-    const handler = handlers[apiEndpoint as keyof typeof handlers] as NextApiHandler;
+    const handlerMap = (await import("@calcom/app-store/apps.server.generated")).apiHandlers;
 
+    const handlerKey = deriveAppDictKeyFromType(appName, handlerMap);
+    const handlers = await handlerMap[handlerKey as keyof typeof handlerMap];
+    const handler = handlers[apiEndpoint as keyof typeof handlers] as NextApiHandler;
     if (typeof handler !== "function")
       throw new HttpError({ statusCode: 404, message: `API handler not found` });
 

apps/web/pages/apps/[slug]/index.tsx

@@ -114,7 +114,7 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   let source = "";
 
   try {
-    /* If the app doesn't have a README we fallback to the packagfe description */
+    /* If the app doesn't have a README we fallback to the package description */
     source = fs.readFileSync(postFilePath).toString();
   } catch (error) {
     console.log(`No README.mdx provided for: ${appDirname}`);

package.json

@@ -24,7 +24,8 @@
     "docs-dev": "yarn predev && turbo run dev --scope=\"@calcom/docs\"",
     "docs-build": "turbo run build --scope=\"@calcom/docs\" --include-dependencies",
     "docs-start": "turbo run start --scope=\"@calcom/docs\"",
-    "dx": "yarn predev && (git submodule update || true) && turbo run dx",
+    "dx:web": "yarn predev && (git submodule update || true) && turbo run dx",
+    "dx": "run-p 'dx:web' 'app-store:watch'",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "heroku-postbuild": "turbo run @calcom/web#build",
     "lint": "turbo run lint",
@@ -42,7 +43,9 @@
     "embed-tests": "turbo run embed-tests",
     "test-e2e": "turbo run test-e2e --concurrency=1",
     "type-check": "turbo run type-check",
-    "embed-tests-prepare": "yarn workspace @calcom/prisma db-reset && yarn build"
+    "embed-tests-prepare": "yarn workspace @calcom/prisma db-reset && yarn build",
+    "app-store": "yarn workspace @calcom/app-store-cli cli",
+    "app-store:watch": "yarn workspace @calcom/app-store-cli watch  --watch"
   },
   "devDependencies": {
     "dotenv-checker": "^1.1.5",
@@ -51,6 +54,7 @@
     "prettier": "^2.5.1"
   },
   "dependencies": {
+    "run-parallel": "^1.2.0",
     "turbo": "1.2.9"
   },
   "resolutions": {

packages/app-store-cli/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/app-store-cli/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@calcom/app-store-cli",
+  "version": "0.0.0",
+  "bin": "dist/cli.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "cli": "ts-node --transpile-only src/cli.tsx",
+    "watch": "ts-node --transpile-only src/app-store.ts --watch",
+    "generate": "ts-node --transpile-only src/app-store.ts"
+  },
+  "files": [
+    "dist/cli.js"
+  ],
+  "dependencies": {
+    "@calcom/lib": "*",
+    "ink": "^3.2.0",
+    "ink-select-input": "^4.2.1",
+    "ink-text-input": "^4.0.3",
+    "meow": "^9.0.0",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "chokidar": "^3.5.3",
+    "@types/react": "^18.0.9",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "ts-node": "^10.6.0",
+    "typescript": "^4.6.4"
+  }
+}

packages/app-store-cli/readme.md

@@ -0,0 +1,39 @@
+## Steps to create an app
+
+- Create a folder in packages/app-store/{APP_NAME} = {APP}
+- Fill it with a sample app
+  - Modify {APP}/_metadata.ts with the data provided
+
+## Approach
+
+- appType is derived from App Name(a slugify operation that makes a string that can be used as a director name, a variable name for imports and a URL path).
+- appType is then used to create the app directory. It becomes `config.type` of config.json. config.type is the value used to create an entry in App table and retrieve any apps or credentials. It also becomes App.dirName
+- dirnames that don't start with _ are considered apps in packages/app-store and based on those apps .generated.ts* files are created. This allows pre-cli apps to keep on working.
+- app directory is populated with app-store/_baseApp with newly updated config.json and package.json
+- `packages/prisma/seed-app-store.config.json` is updated with new app.
+
+NOTE: After app-store-cli is live, Credential.appId and Credential.type would be same for new apps. For old apps they would remain different. Credential.type would be used to identify credentials in integrations call and Credential.appId/App.slug would be used to identify apps.
+If we rename all existing apps to their slug names, we can remove type and then use just appId to refer to things everywhere. This can be done later on.
+
+## TODO
+
+- Beta Release
+  - Show a warning somewhere that app directory must not be renamed manually, edit command must be used.
+  - edit command should ask for slug and verify if it exists
+
+- Improvements
+  - Prefill fields in edit command
+  - Merge app-store:watch and app-store commands, introduce app-store --watch
+  - Allow inputs in non interactive way as well - That would allow easily copy pasting commands.
+  - App already exists check. Ask user to run edit/regenerate command
+  - An app created through CLI should be able to completely skip API validation for testing purposes. Credentials should be created with no API specified specific to the app. It would allow us to test any app end to end not worrying about the corresponding API endpoint.
+  -  Require assets path relative to app dir.
+
+## Roadmap
+- Avoid delete and edit on apps created outside of cli
+- Someone can add wrong directory name(which doesn't satisfy slug requirements) manually. How to handle it.
+- Allow editing and updating app from the cal app itself - including assets uploading when developing locally.
+- Improvements in shared code across app
+  - Use baseApp/api/add.ts for all apps with configuration of credentials creation and redirection URL.
+- Delete creation side effects if App creation fails - Might make debugging difficult
+  - This is so that web app doesn't break because of additional app folders or faulty db-seed