Merge branch 'main' into connect-component

packages/atoms/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

packages/atoms/connect/ConnectButton.tsx

@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+import { useState, useCallback } from "react";
+import * as React from "react";
+
+import { Button } from "../src/components/ui/button";
+import type { AtomsGlobalConfigProps } from "../types";
+
+interface ConnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  buttonText?: string;
+  icon?: JSX.Element;
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export function ConnectButton({
+  buttonText,
+  onClick,
+  onSuccess,
+  onError,
+  className,
+  icon,
+}: ConnectButtonProps & AtomsGlobalConfigProps) {
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [errMsg, setErrMsg] = useState<string>("");
+
+  const handleSubmit = useCallback(
+    async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      e.preventDefault();
+      setIsProcessing(true);
+
+      try {
+        if (onClick) {
+          await onClick(e);
+        }
+
+        // if user wants to handle onSuccess inside onClick then it makes no sense to have a separate handler
+        // otherwise only if the user explicitly passes an onSuccess handler this gets triggered
+        if (onSuccess) {
+          await onSuccess();
+        }
+      } catch (error) {
+        setIsProcessing(false);
+
+        if (onError) {
+          await onError();
+        }
+        setErrMsg(error?.message);
+      }
+
+      setIsProcessing(false);
+    },
+    [onClick, onSuccess, onError]
+  );
+
+  return (
+    <div>
+      {/* TODO: Button needs a fix width in order to not resize at loading time */}
+      <Button
+        className={cn(
+          "bg-default text-default dark:text-muted dark:bg-muted relative inline-flex h-9 items-center whitespace-nowrap rounded-md px-4 py-2.5 text-sm font-medium !shadow-none transition-colors disabled:cursor-not-allowed",
+          className
+        )}
+        type="button"
+        disabled={isProcessing}
+        onClick={handleSubmit}>
+        {isProcessing ? (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <>
+            {!!icon && icon}
+            {buttonText || "Install App"}
+          </>
+        )}
+      </Button>
+      {!!errMsg && <span>{errMsg}</span>}
+    </div>
+  );
+}

packages/atoms/connect/connect-cal/index.tsx

@@ -0,0 +1,24 @@
+import { useApiKey } from "cal-provider";
+import { ConnectButton } from "connect/ConnectButton";
+
+// This atom will initiate the oAuth connection process to the users of the platform
+// the user would be redirected to grant oAuth permission page after the user has clicked on Connect Atom
+// they will have to login/signup and then will be redirected to the permission page where they can see required permissions for the oAuth clients and can choose to deny or accept
+
+export function ConnectCal() {
+  const key = useApiKey();
+
+  if (key === "no_key") {
+    return <>You havent entered a key</>;
+  }
+
+  if (key === "invalid_key") {
+    return <>This is not a valid key, please enter a valid key</>;
+  }
+
+  return (
+    <>
+      <ConnectButton>Connect to Cal.com</ConnectButton>
+    </>
+  );
+}

packages/atoms/connect/connect-calendar/index.tsx

@@ -0,0 +1,30 @@
+import { useApiKey } from "cal-provider";
+import { ConnectButton } from "connect/ConnectButton";
+
+type ConnectCalendarProps = {
+  calendar: "google" | "outlook";
+};
+
+// TODO: implement flow for connecting to different calendars
+// ideally when you click the connect calendar button it redirects the user to an accounts.google page
+// this page asks the user permission for us to access their account
+// after the user grants us all permissions we need to redirect the user back to where they started
+// hopefully to the page wherever the button is situated
+
+export function ConnectCalendar({ calendar }: ConnectCalendarProps) {
+  const key = useApiKey();
+
+  if (key === "no_key") {
+    return <>You havent entered a key</>;
+  }
+
+  if (key === "invalid_key") {
+    return <>This is not a valid key, please enter a valid key</>;
+  }
+
+  return (
+    <>
+      <ConnectButton>Connect {calendar}</ConnectButton>
+    </>
+  );
+}

packages/atoms/connect/connect-video/index.tsx

@@ -0,0 +1,26 @@
+import { useApiKey } from "cal-provider";
+import { ConnectButton } from "connect/ConnectButton";
+
+type ConnectVideoProps = {
+  app: "zoom" | "google" | "facetime" | "cal video";
+};
+
+// TODO: figure out event handler flow for video apps
+
+export function ConnectVideo({ app }: ConnectVideoProps) {
+  const key = useApiKey();
+
+  if (key === "no_key") {
+    return <>You havent entered a key</>;
+  }
+
+  if (key === "invalid_key") {
+    return <>This is not a valid key, please enter a valid key</>;
+  }
+
+  return (
+    <>
+      <ConnectButton>Connect {app}</ConnectButton>
+    </>
+  );
+}

packages/atoms/connect/export.ts

@@ -0,0 +1,4 @@
+export { ConnectCalendar } from "connect/connect-calendar";
+export { ConnectVideo } from "connect/connect-video";
+export { ConnectButton } from "./ConnectButton";
+export * from "../types";

packages/atoms/globals.css

@@ -8,3 +8,76 @@
 @tailwind utilities;
 
 @import "../ui/styles/shared-globals.css";
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

packages/atoms/index.ts

@@ -1,2 +1,5 @@
 export { Booker } from "./booker/Booker";
+export { ConnectButton } from "./connect/ConnectButton";
 export { CalProvider } from "./cal-provider/index";
+export { ConnectCalendar } from "connect/connect-calendar";
+export { ConnectVideo } from "connect/connect-video";

packages/atoms/package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/node": "^20.8.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
@@ -18,5 +19,13 @@
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   },
-  "main": "./index"
+  "main": "./index",
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.284.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
+  }
 }

packages/atoms/src/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/atoms/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/atoms/tailwind.config.cjs

@@ -3,5 +3,78 @@ const base = require("@calcom/config/tailwind-preset");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   ...base,
-  content: ["./bookings/**/*.tsx"],
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "./bookings/**/*.tsx",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
 };

packages/atoms/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["/*"]
+      "~/*": ["/*"],
+      "@/*": ["./src/*"]
     },
     "resolveJsonModule": true
   },

packages/atoms/vite.config.ts

@@ -1,7 +1,12 @@
+import react from "@vitejs/plugin-react";
+import path from "path";
 import { resolve } from "path";
 import { defineConfig } from "vite";
 
+// setting up shadcn for vite: https://ui.shadcn.com/docs/installation/vite
+
 export default defineConfig({
+  plugins: [react()],
   build: {
     lib: {
       entry: [resolve(__dirname, "booker/export.ts")],
@@ -23,6 +28,7 @@ export default defineConfig({
       fs: resolve("../../node_modules/rollup-plugin-node-builtins"),
       path: resolve("../../node_modules/rollup-plugin-node-builtins"),
       os: resolve("../../node_modules/rollup-plugin-node-builtins"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
 });