From 95b3397e4277b2691935fc264e1cf1401ea5a08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Mon, 21 Feb 2022 09:41:25 -0700
Subject: [PATCH] Add ui package for reusable components (#1916)

* Add ui package for reusable components

* Add fallback

* Type fixes

* Type fixes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/ui/Button.tsx | 140 +-----------------------------
 apps/web/lib/classNames.ts        |   5 +-
 apps/web/next.config.js           |   6 +-
 apps/web/package.json             |   1 +
 packages/lib/classNames.ts        |   3 +
 packages/ui/Button.tsx            | 138 +++++++++++++++++++++++++++++
 packages/ui/index.tsx             |   3 +
 packages/ui/package.json          |  15 ++++
 packages/ui/tsconfig.json         |   5 ++
 yarn.lock                         |   7 ++
 10 files changed, 182 insertions(+), 141 deletions(-)
 create mode 100644 packages/lib/classNames.ts
 create mode 100644 packages/ui/Button.tsx
 create mode 100644 packages/ui/index.tsx
 create mode 100644 packages/ui/package.json
 create mode 100644 packages/ui/tsconfig.json

diff --git a/apps/web/components/ui/Button.tsx b/apps/web/components/ui/Button.tsx
index 5079c7f03f..979b55b369 100644
--- a/apps/web/components/ui/Button.tsx
+++ b/apps/web/components/ui/Button.tsx
@@ -1,137 +1,3 @@
-import Link, { LinkProps } from "next/link";
-import React, { forwardRef } from "react";
-
-import classNames from "@lib/classNames";
-import { SVGComponent } from "@lib/types/SVGComponent";
-
-export type ButtonBaseProps = {
-  color?: "primary" | "secondary" | "minimal" | "warn";
-  size?: "base" | "sm" | "lg" | "fab" | "icon";
-  loading?: boolean;
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  StartIcon?: SVGComponent;
-  EndIcon?: SVGComponent;
-  shallow?: boolean;
-};
-export type ButtonProps = ButtonBaseProps &
-  (
-    | (Omit<JSX.IntrinsicElements["a"], "href"> & { href: LinkProps["href"] })
-    | (JSX.IntrinsicElements["button"] & { href?: never })
-  );
-
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
-  props: ButtonProps,
-  forwardedRef
-) {
-  const {
-    loading = false,
-    color = "primary",
-    size = "base",
-    StartIcon,
-    EndIcon,
-    shallow,
-    // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
-    ...passThroughProps
-  } = props;
-  // Buttons are **always** disabled if we're in a `loading` state
-  const disabled = props.disabled || loading;
-
-  // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
-  const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? "a" : "button";
-
-  const element = React.createElement(
-    elementType,
-    {
-      ...passThroughProps,
-      disabled,
-      ref: forwardedRef,
-      className: classNames(
-        // base styles independent what type of button it is
-        "inline-flex items-center",
-        // different styles depending on size
-        size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
-        size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
-        size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
-        size === "icon" &&
-          "group p-2 border rounded-sm border-transparent text-neutral-400 hover:border-gray-200 transition",
-        // turn button into a floating action button (fab)
-        size === "fab" ? "fixed" : "relative",
-        size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
-
-        // different styles depending on color
-        color === "primary" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-brandcontrast text-brandcontrast bg-brand dark:bg-brand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
-        color === "secondary" &&
-          (disabled
-            ? "border border-gray-200 text-gray-400 bg-white"
-            : "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
-        color === "minimal" &&
-          (disabled
-            ? "text-gray-400 bg-transparent"
-            : "text-gray-700 bg-transparent hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500"),
-        color === "warn" &&
-          (disabled
-            ? "text-gray-400 bg-transparent"
-            : "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
-        // set not-allowed cursor if disabled
-        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
-        props.className
-      ),
-      // if we click a disabled button, we prevent going through the click handler
-      onClick: disabled
-        ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            e.preventDefault();
-          }
-        : props.onClick,
-    },
-    <>
-      {StartIcon && (
-        <StartIcon
-          className={classNames(
-            "inline",
-            size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
-          )}
-        />
-      )}
-      {props.children}
-      {loading && (
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-          <svg
-            className={classNames(
-              "mx-4 h-5 w-5 animate-spin",
-              color === "primary" ? "text-white dark:text-black" : "text-black"
-            )}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24">
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-        </div>
-      )}
-      {EndIcon && <EndIcon className="-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2" />}
-    </>
-  );
-  return props.href ? (
-    <Link passHref href={props.href} shallow={shallow && shallow}>
-      {element}
-    </Link>
-  ) : (
-    element
-  );
-});
-
-export default Button;
+// TODO: Remove this file once every Button is imported from `@calcom/ui`
+export * from "@calcom/ui/Button";
+export { default } from "@calcom/ui/Button";
diff --git a/apps/web/lib/classNames.ts b/apps/web/lib/classNames.ts
index fa17f266ab..9878582171 100644
--- a/apps/web/lib/classNames.ts
+++ b/apps/web/lib/classNames.ts
@@ -1,3 +1,2 @@
-export default function classNames(...classes: unknown[]) {
-  return classes.filter(Boolean).join(" ");
-}
+// TODO: Remove this file once every `classNames` is imported from `@calcom/lib`
+export { default } from "@calcom/lib/classNames";
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index f7ad9e4651..cc986162de 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,4 +1,8 @@
-const withTM = require("@vercel/edge-functions-ui/transpile")(["@calcom/lib", "@calcom/prisma"]);
+const withTM = require("@vercel/edge-functions-ui/transpile")([
+  "@calcom/lib",
+  "@calcom/prisma",
+  "@calcom/ui",
+]);
 const { i18n } = require("./next-i18next.config");
 
 // So we can test deploy previews preview
diff --git a/apps/web/package.json b/apps/web/package.json
index 48640cace7..3e6a1148ee 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,6 +29,7 @@
     "@calcom/lib": "*",
     "@calcom/prisma": "*",
     "@calcom/tsconfig": "*",
+    "@calcom/ui": "*",
     "@daily-co/daily-js": "^0.21.0",
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
diff --git a/packages/lib/classNames.ts b/packages/lib/classNames.ts
new file mode 100644
index 0000000000..fa17f266ab
--- /dev/null
+++ b/packages/lib/classNames.ts
@@ -0,0 +1,3 @@
+export default function classNames(...classes: unknown[]) {
+  return classes.filter(Boolean).join(" ");
+}
diff --git a/packages/ui/Button.tsx b/packages/ui/Button.tsx
new file mode 100644
index 0000000000..2e996afc17
--- /dev/null
+++ b/packages/ui/Button.tsx
@@ -0,0 +1,138 @@
+import Link, { LinkProps } from "next/link";
+import React, { forwardRef } from "react";
+
+import classNames from "@calcom/lib/classNames";
+
+type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+export type ButtonBaseProps = {
+  color?: "primary" | "secondary" | "minimal" | "warn";
+  size?: "base" | "sm" | "lg" | "fab" | "icon";
+  loading?: boolean;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  StartIcon?: SVGComponent;
+  EndIcon?: SVGComponent;
+  shallow?: boolean;
+};
+export type ButtonProps = ButtonBaseProps &
+  (
+    | (Omit<JSX.IntrinsicElements["a"], "href"> & { href: LinkProps["href"] })
+    | (JSX.IntrinsicElements["button"] & { href?: never })
+  );
+
+export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
+  props: ButtonProps,
+  forwardedRef
+) {
+  const {
+    loading = false,
+    color = "primary",
+    size = "base",
+    StartIcon,
+    EndIcon,
+    shallow,
+    // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
+    ...passThroughProps
+  } = props;
+  // Buttons are **always** disabled if we're in a `loading` state
+  const disabled = props.disabled || loading;
+
+  // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
+  const isLink = typeof props.href !== "undefined";
+  const elementType = isLink ? "a" : "button";
+
+  const element = React.createElement(
+    elementType,
+    {
+      ...passThroughProps,
+      disabled,
+      ref: forwardedRef,
+      className: classNames(
+        // base styles independent what type of button it is
+        "inline-flex items-center",
+        // different styles depending on size
+        size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
+        size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
+        size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
+        size === "icon" &&
+          "group p-2 border rounded-sm border-transparent text-neutral-400 hover:border-gray-200 transition",
+        // turn button into a floating action button (fab)
+        size === "fab" ? "fixed" : "relative",
+        size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
+
+        // different styles depending on color
+        color === "primary" &&
+          (disabled
+            ? "border border-transparent bg-gray-400 text-white"
+            : "border border-transparent dark:text-brandcontrast text-brandcontrast bg-brand dark:bg-brand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
+        color === "secondary" &&
+          (disabled
+            ? "border border-gray-200 text-gray-400 bg-white"
+            : "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
+        color === "minimal" &&
+          (disabled
+            ? "text-gray-400 bg-transparent"
+            : "text-gray-700 bg-transparent hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500"),
+        color === "warn" &&
+          (disabled
+            ? "text-gray-400 bg-transparent"
+            : "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
+        // set not-allowed cursor if disabled
+        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
+        props.className
+      ),
+      // if we click a disabled button, we prevent going through the click handler
+      onClick: disabled
+        ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            e.preventDefault();
+          }
+        : props.onClick,
+    },
+    <>
+      {StartIcon && (
+        <StartIcon
+          className={classNames(
+            "inline",
+            size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
+          )}
+        />
+      )}
+      {props.children}
+      {loading && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+          <svg
+            className={classNames(
+              "mx-4 h-5 w-5 animate-spin",
+              color === "primary" ? "text-white dark:text-black" : "text-black"
+            )}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
+      )}
+      {EndIcon && <EndIcon className="-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2" />}
+    </>
+  );
+  return props.href ? (
+    <Link passHref href={props.href} shallow={shallow && shallow}>
+      {element}
+    </Link>
+  ) : (
+    element
+  );
+});
+
+export default Button;
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
new file mode 100644
index 0000000000..308d259b4c
--- /dev/null
+++ b/packages/ui/index.tsx
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export * from "./Button";
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000000..a0f2ab17c8
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@calcom/ui",
+  "version": "0.0.0",
+  "main": "./index.tsx",
+  "types": "./index.tsx",
+  "license": "MIT",
+  "devDependencies": {
+    "@calcom/config": "*",
+    "@calcom/lib": "*",
+    "@calcom/tsconfig": "*",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "typescript": "^4.5.3"
+  }
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000000..9874ef3e47
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@calcom/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index 305087f2e4..591584b4c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2892,6 +2892,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^17.0.11":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
+  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-phone-number-input@^3.0.13":
   version "3.0.13"
   resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.0.13.tgz#4eb7dcd278dcf9eb2a8d2ce2cb304657cbf1b4e5"