🧹 Removed old root UI components. (#6249)

* Removed old root UI components.

* Fixed import path

* Changed icon to not import from root, since it somehow creates a recursive import

* Removed irrelevant todo

* Fixed merge issues.

* Fixed shell export

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,10 +1,10 @@
-import { ShieldCheckIcon } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <ShieldCheckIcon className="h-6 w-6 text-white" />
+        <Icon.ShieldCheckIcon className="h-6 w-6 text-white" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -11,17 +11,7 @@ import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  Icon,
-  Input,
-  Label,
-  StarIconSolid,
-} from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -240,7 +230,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 isInputUsernamePremium ? "text-orange-400" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {isInputUsernamePremium ? <Icon.StarIconSolid className="mt-[2px] w-6" /> : <></>}
               {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
             </span>
           </div>

apps/web/pages/[user].tsx

@@ -27,7 +27,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { BadgeCheckIcon, Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
@@ -139,7 +139,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               <h1 className="font-cal mb-1 text-3xl text-neutral-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
+                  <Icon.BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
                 )}
               </h1>
               <p className="dark:text-darkgray-600 text-s text-neutral-500">{user.bio}</p>

packages/app-store/ee/routing-forms/components/index.ts

@@ -1,2 +0,0 @@
-export { default as InstallAppButton } from "./InstallAppButton";
-export { default as Icon } from "./icon";

packages/app-store/zapier/pages/setup/index.tsx

@@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, ClipboardCopyIcon, showToast, Tooltip } from "@calcom/ui";
+import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
 
 export interface IZapierSetupProps {
   inviteLink: string;
@@ -75,7 +75,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-                        <ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
+                        <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
                         {t("copy")}
                       </Button>
                     </Tooltip>

packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx

@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
   Button,
-  ClipboardCopyIcon,
+  Icon,
   DatePickerField as DatePicker,
   DialogFooter,
   Form,
@@ -83,7 +83,7 @@ export default function ApiKeyDialogForm({
                   }}
                   type="button"
                   className="rounded-l-none py-[19px] text-base ">
-                  <ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
                   {t("copy")}
                 </Button>
               </Tooltip>

packages/features/ee/sso/components/SAMLConfiguration.tsx

@@ -9,7 +9,6 @@ import {
   Alert,
   Badge,
   Button,
-  ClipboardCopyIcon,
   ConfirmationDialogContent,
   Dialog,
   DialogContent,
@@ -123,7 +122,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
                   {t("copy")}
                 </Button>
               </div>
@@ -143,7 +142,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
                   {t("copy")}
                 </Button>
               </div>

packages/ui/Alert.tsx

@@ -1,48 +0,0 @@
-import { CheckCircleIcon, ExclamationIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/solid";
-import classNames from "classnames";
-import { ReactNode } from "react";
-
-export interface AlertProps {
-  title?: ReactNode;
-  message?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-  severity: "success" | "warning" | "error" | "info";
-}
-export function Alert(props: AlertProps) {
-  const { severity } = props;
-
-  return (
-    <div
-      className={classNames(
-        "rounded-sm border border-opacity-20 p-3",
-        props.className,
-        severity === "error" && "border-red-900 bg-red-50 text-red-800",
-        severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
-        severity === "info" && "border-sky-700 bg-sky-50 text-sky-700",
-        severity === "success" && "bg-gray-900 text-white"
-      )}>
-      <div className="flex">
-        <div className="flex-shrink-0">
-          {severity === "error" && (
-            <XCircleIcon className={classNames("h-5 w-5 text-red-400")} aria-hidden="true" />
-          )}
-          {severity === "warning" && (
-            <ExclamationIcon className={classNames("h-5 w-5 text-yellow-400")} aria-hidden="true" />
-          )}
-          {severity === "info" && (
-            <InformationCircleIcon className={classNames("h-5 w-5 text-sky-400")} aria-hidden="true" />
-          )}
-          {severity === "success" && (
-            <CheckCircleIcon className={classNames("h-5 w-5 text-gray-400")} aria-hidden="true" />
-          )}
-        </div>
-        <div className="ml-3 flex-grow">
-          <h3 className="text-sm font-medium">{props.title}</h3>
-          <div className="text-sm">{props.message}</div>
-        </div>
-        {props.actions && <div className="text-sm">{props.actions}</div>}
-      </div>
-    </div>
-  );
-}

packages/ui/Button.tsx

@@ -1,151 +0,0 @@
-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" | "alert" | "alert2";
-  size?: "base" | "sm" | "lg" | "fab" | "icon";
-  loading?: boolean;
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  StartIcon?: SVGComponent;
-  startIconClassName?: string;
-  EndIcon?: SVGComponent;
-  endIconClassName?: string;
-  shallow?: boolean;
-};
-export type ButtonProps = ButtonBaseProps &
-  (
-    | (Omit<JSX.IntrinsicElements["a"], "href" | "onClick"> & LinkProps)
-    | (Omit<JSX.IntrinsicElements["button"], "onClick"> & { href?: never })
-  );
-
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
-  props: ButtonProps,
-  forwardedRef
-) {
-  const {
-    loading = false,
-    color = "primary",
-    size = "base",
-    StartIcon,
-    startIconClassName,
-    endIconClassName,
-    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 appearance-none",
-        // 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" &&
-          "w-10 h-10 justify-center group p-2 border rounded-lg 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-darkmodebrandcontrast text-brandcontrast bg-brand dark:bg-darkmodebrand 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-800"),
-        color === "alert" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
-        color === "alert2" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-darkmodebrandcontrast text-black bg-yellow-400 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-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-4 w-4 " : "h-4 w-4 ltr:-ml-1 ltr:mr-2 rtl:ml-2 rtl:-mr-1",
-            startIconClassName || ""
-          )}
-        />
-      )}
-      {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" />
-            <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"
-            />
-          </svg>
-        </div>
-      )}
-      {EndIcon && (
-        <EndIcon
-          className={classNames("inline h-5 w-5 ltr:-mr-1 ltr:ml-2 rtl:mr-2", endIconClassName || "")}
-        />
-      )}
-    </>
-  );
-  return props.href ? (
-    <Link passHref href={props.href} shallow={shallow && shallow}>
-      {element}
-    </Link>
-  ) : (
-    element
-  );
-});
-
-export default Button;

packages/ui/Dialog.tsx

@@ -1,116 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { useRouter } from "next/router";
-import React, { ReactNode, useState } from "react";
-
-import classNames from "@calcom/lib/classNames";
-
-export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
-  name?: string;
-  clearQueryParamsOnClose?: string[];
-};
-export function Dialog(props: DialogProps) {
-  const router = useRouter();
-  const { children, name, ...dialogProps } = props;
-  // only used if name is set
-  const [open, setOpen] = useState(!!dialogProps.open);
-
-  if (name) {
-    const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])];
-    dialogProps.onOpenChange = (open) => {
-      if (props.onOpenChange) {
-        props.onOpenChange(open);
-      }
-      // toggles "dialog" query param
-      if (open) {
-        router.query["dialog"] = name;
-      } else {
-        clearQueryParamsOnClose.forEach((queryParam) => {
-          delete router.query[queryParam];
-        });
-      }
-      router.push(
-        {
-          pathname: router.pathname.replace("/v2", ""),
-          query: {
-            ...router.query,
-          },
-        },
-        undefined,
-        { shallow: false }
-      );
-      setOpen(open);
-    };
-    // handles initial state
-    if (!open && router.query["dialog"] === name) {
-      setOpen(true);
-    }
-    // allow overriding
-    if (!("open" in dialogProps)) {
-      dialogProps.open = open;
-    }
-  }
-
-  return (
-    <DialogPrimitive.Root {...dialogProps}>
-      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
-      {children}
-    </DialogPrimitive.Root>
-  );
-}
-type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]> & {
-  size?: "xl" | "lg";
-};
-
-export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 grid place-items-center overflow-y-auto bg-gray-500 bg-opacity-75 py-4 transition-opacity">
-        {/*zIndex one less than Toast */}
-        <DialogPrimitive.Content
-          {...props}
-          className={classNames(
-            "h-auto max-h-[inherit] min-w-[360px] rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
-            props.size == "xl"
-              ? "p-0.5 sm:max-w-[98vw]"
-              : props.size == "lg"
-              ? "p-6 sm:max-w-[70rem]"
-              : "p-6 sm:max-w-[35rem]",
-            "overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
-            `${props.className || ""}`
-          )}
-          ref={forwardedRef}>
-          {children}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Overlay>
-    </DialogPrimitive.Portal>
-  )
-);
-
-type DialogHeaderProps = {
-  title: React.ReactNode;
-  subtitle?: React.ReactNode;
-};
-
-export function DialogHeader(props: DialogHeaderProps) {
-  return (
-    <div className="mb-8">
-      <h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
-        {props.title}
-      </h3>
-      {props.subtitle && <div className="text-sm text-gray-400">{props.subtitle}</div>}
-    </div>
-  );
-}
-
-export function DialogFooter(props: { children: ReactNode }) {
-  return (
-    <div>
-      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse">{props.children}</div>
-    </div>
-  );
-}
-
-DialogContent.displayName = "DialogContent";
-
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.Close;

packages/ui/Dropdown.tsx

@@ -1,100 +0,0 @@
-import { CheckCircleIcon } from "@heroicons/react/outline";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { ComponentProps, forwardRef } from "react";
-
-import classNames from "@calcom/lib/classNames";
-
-export const Dropdown = DropdownMenuPrimitive.Root;
-
-type DropdownMenuTriggerProps = ComponentProps<typeof DropdownMenuPrimitive["Trigger"]>;
-export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Trigger
-      {...props}
-      className={
-        props.asChild
-          ? className
-          : `inline-flex items-center rounded-sm bg-transparent px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-1 group-hover:text-black ${className}`
-      }
-      ref={forwardedRef}
-    />
-  )
-);
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-
-export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
-
-export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive["Content"]>;
-export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.Content
-        {...props}
-        className={classNames(
-          `slideInTop w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`,
-          props.className
-        )}
-        ref={forwardedRef}>
-        {children}
-      </DropdownMenuPrimitive.Content>
-    );
-  }
-);
-DropdownMenuContent.displayName = "DropdownMenuContent";
-
-type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuPrimitive["Label"]>;
-export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
-  <DropdownMenuPrimitive.Label {...props} className="px-3 py-2 text-neutral-500" />
-);
-
-type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive["CheckboxItem"]>;
-export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Item
-      className={`text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${className}`}
-      {...props}
-      ref={forwardedRef}
-    />
-  )
-);
-DropdownMenuItem.displayName = "DropdownMenuItem";
-
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-type DropdownMenuCheckboxItemProps = ComponentProps<typeof DropdownMenuPrimitive["CheckboxItem"]>;
-export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
-        {children}
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckCircleIcon />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.CheckboxItem>
-    );
-  }
-);
-DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-type DropdownMenuRadioItemProps = ComponentProps<typeof DropdownMenuPrimitive["RadioItem"]>;
-export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
-        {children}
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckCircleIcon />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.RadioItem>
-    );
-  }
-);
-DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-
-export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;
-
-export default Dropdown;

packages/ui/Icon.tsx

@@ -1,18 +0,0 @@
-// find all feather icons at https://feathericons.com/
-// github https://github.com/feathericons/feather
-export * as Icon from "react-icons/fi";
-
-// if feather icon is missing, use "@heroicons/react/outline";
-export { CollectionIcon } from "@heroicons/react/outline";
-export { ShieldCheckIcon } from "@heroicons/react/outline";
-export { BadgeCheckIcon } from "@heroicons/react/outline";
-export { ClipboardCopyIcon } from "@heroicons/react/outline";
-export { StarIcon as StarIconSolid } from "@heroicons/react/solid";
-// TODO:
-// right now: Icon.Sun comes from react-feather
-// CollectionIcon comes from "@heroicons/react/outline";
-
-// I want:
-// export CollectionIcon as Icon.Collection
-// so I can
-// import { Icon } from "@calcom/ui";

packages/ui/Loader.tsx

@@ -1,10 +0,0 @@
-/**
- * @deprecated Use custom Skeletons instead
- **/
-export default function Loader() {
-  return (
-    <div className="loader border-brand dark:border-darkmodebrand">
-      <span className="loader-inner bg-brand dark:bg-darkmodebrand" />
-    </div>
-  );
-}

packages/ui/Logo.tsx

@@ -1,39 +0,0 @@
-import Lottie from "lottie-react";
-
-import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
-
-import LogoAnimated from "./LogoAnimated.json";
-import LogoAnimatedWhite from "./LogoAnimatedWhite.json";
-
-export default function Logo({
-  small,
-  icon,
-  animated,
-}: {
-  small?: boolean;
-  icon?: boolean;
-  animated?: boolean;
-}) {
-  return (
-    <h1 className="logo inline">
-      {animated ? (
-        <div className="max-w-40">
-          <span className="inline dark:hidden">
-            <Lottie animationData={LogoAnimated} loop={false} />
-          </span>
-          <span className="hidden dark:inline">
-            <Lottie animationData={LogoAnimatedWhite} loop={false} />
-          </span>
-        </div>
-      ) : (
-        <strong>
-          {icon ? (
-            <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
-          ) : (
-            <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
-          )}
-        </strong>
-      )}
-    </h1>
-  );
-}

packages/ui/Shell.tsx

@@ -1,11 +0,0 @@
-export {
-  default,
-  default as Shell,
-  MobileNavigationMoreItems,
-  ONBOARDING_INTRODUCED_AT,
-  ONBOARDING_NEXT_REDIRECT,
-  ShellMain,
-  ShellSubHeading,
-  shouldShowOnboarding,
-} from "./v2/core/Shell";
-export type { NavigationItemType } from "./v2/core/Shell";

packages/ui/Tooltip.tsx

@@ -1,44 +0,0 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import React from "react";
-
-import classNames from "@calcom/lib/classNames";
-
-export function Tooltip({
-  children,
-  side,
-  content,
-  open,
-  defaultOpen,
-  onOpenChange,
-  ...props
-}: {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  open?: boolean;
-  side?: "top" | "right" | "bottom" | "left" | undefined;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}) {
-  return (
-    <TooltipPrimitive.Root
-      delayDuration={50}
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}>
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
-        className={classNames(
-          side === "top" && "-mt-2",
-          side === "right" && "ml-2",
-          "rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
-        )}
-        side={side}
-        align="center"
-        {...props}>
-        {content}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Root>
-  );
-}
-
-export default Tooltip;

packages/ui/components/apps/SkeletonLoader.tsx

@@ -1,5 +1,5 @@
-import { ShellSubHeading } from "../../Shell";
 import Meta from "../../v2/core/Meta";
+import { ShellSubHeading } from "../../v2/core/Shell";
 import { SkeletonText } from "../skeleton";
 
 export function SkeletonLoader({

packages/ui/components/apps/Slider.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../../Icon";
+import { Icon } from "../../components/icon";
 import { SkeletonText } from "../skeleton";
 
 export const Slider = <T extends string | unknown>({

packages/ui/components/buttonGroup/buttongroup.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
 import { Icon } from "@calcom/ui";
 
 import { ButtonGroup} from './ButtonGroup';

packages/ui/components/errorBoundary/index.ts

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

packages/ui/components/form/checkbox/checkbox.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
 import { Icon } from "@calcom/ui";
 
 import Checkbox from './Checkbox';
@@ -49,18 +49,18 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
 <Canvas>
   <Story name="Checkbox">
     <VariantsTable titles={[""]} columnMinWidth={150}>
-      <VariantsRow variant="Default">
+      <VariantRow variant="Default">
         <Checkbox label="Default"  />
         <Checkbox label="Error" error/>
         <Checkbox label="Disabled"  disabled/>
         <Checkbox label="Disabled Checked"  checked disabled />
-      </VariantsRow>
-        <VariantsRow variant="Description As Label">
+      </VariantRow>
+        <VariantRow variant="Description As Label">
           <Checkbox description="Default" descriptionAsLabel  />
           <Checkbox description="Error" error descriptionAsLabel/>
           <Checkbox description="Disabled"  disabled descriptionAsLabel/>
           <Checkbox description="Disabled Checked"  checked disabled descriptionAsLabel/>
-      </VariantsRow>
+      </VariantRow>
     </VariantsTable>
   </Story>
 </Canvas>

packages/ui/components/form/inputs/HintOrErrors.tsx

@@ -1,7 +1,6 @@
 import { FieldValues, useFormContext } from "react-hook-form";
 
-// TODO: Refactor import once V1 migration has happened
-import { Icon } from "../../../Icon";
+import { Icon } from "../../../components/icon";
 
 export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   hintErrors?: string[];

packages/ui/components/form/select/components.tsx

@@ -13,7 +13,7 @@ import {
 
 import { classNames } from "@calcom/lib";
 
-import { Icon } from "../../../Icon";
+import { Icon } from "../../../components/icon";
 
 export const InputComponent = <
   Option,

packages/ui/components/icon/Icon.tsx

@@ -0,0 +1,18 @@
+// if feather icon is missing, use "@heroicons/react/outline";
+import { CollectionIcon } from "@heroicons/react/outline";
+import { ShieldCheckIcon } from "@heroicons/react/outline";
+import { BadgeCheckIcon } from "@heroicons/react/outline";
+import { ClipboardCopyIcon } from "@heroicons/react/outline";
+import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
+// find all feather icons at https://feathericons.com/
+// github https://github.com/feathericons/feather
+import * as ReactIcons from "react-icons/fi";
+
+export const Icon = {
+  ...ReactIcons,
+  CollectionIcon,
+  ShieldCheckIcon,
+  BadgeCheckIcon,
+  ClipboardCopyIcon,
+  StarIconSolid,
+};

packages/ui/components/icon/index.ts

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

packages/ui/components/index.ts

@@ -41,4 +41,7 @@ export type { TopBannerProps } from "./top-banner";
 export { AnimatedPopover } from "./popover/index";
 export { TableActions, DropdownActions } from "./table/TableActions";
 export type { ActionType } from "./table/TableActions";
+export { Icon } from "./icon";
+export { ErrorBoundary } from "./errorBoundary";
+export { Logo } from "./logo";
 export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";

packages/ui/components/logo/Logo.tsx

@@ -0,0 +1,15 @@
+import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
+
+export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
+  return (
+    <h1 className="logo inline">
+      <strong>
+        {icon ? (
+          <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
+        ) : (
+          <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
+        )}
+      </strong>
+    </h1>
+  );
+}

packages/ui/components/logo/index.ts

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

packages/ui/components/logo/logo.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
+import Logo from './Logo';
+
+<Meta title="UI/Logo" component={Logo} />
+
+<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023"/>
+
+## Definition
+Main Cal.com brand logo
+
+<CustomArgsTable of={Logo} />
+
+<Canvas>
+  <Story name="Logo">
+    <VariantsTable titles={['']} columnMinWidth={150}>
+      <VariantRow variant="Small">
+        <Logo small />
+      </VariantRow>
+      <VariantRow variant="Default">
+        <Logo  />
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>

packages/ui/form/AddressInput.tsx

@@ -3,7 +3,7 @@ import { Props } from "react-phone-number-input/react-hook-form";
 
 import { EventLocationType } from "@calcom/app-store/locations";
 
-import { Icon } from "../Icon";
+import { Icon } from "../components/icon";
 
 type BookingFormValues = {
   name: string;

packages/ui/form/fields.tsx

@@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Alert } from "../Alert";
+import { Alert } from "../v2/core/Alert";
 import { showToast } from "../v2/core/notifications";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };

packages/ui/index.tsx

@@ -35,6 +35,8 @@ export {
   SkeletonButton,
   SkeletonContainer,
   DropdownActions,
+  Icon,
+  ErrorBoundary,
   TrendingAppsSlider,
   AppCard,
   AllApps,
@@ -47,15 +49,11 @@ export type { ActionType } from "./components";
 export type { AvatarProps, BadgeProps, ButtonBaseProps, ButtonProps, TopBannerProps } from "./components";
 export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
 /** ⬇️ TODO - Move these to components */
-export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as AddressInput } from "./form/AddressInputLazy";
 export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { UnstyledSelect } from "./form/Select";
-export { BadgeCheckIcon, ClipboardCopyIcon, Icon, ShieldCheckIcon, StarIconSolid } from "./Icon";
-export { default as Loader } from "./Loader";
-export { default as Shell, ShellMain } from "./Shell";
+export { default as Loader } from "./v2/core/Loader";
 export { default as TimezoneChangeDialog } from "./TimezoneChangeDialog";
-// export { default as Tooltip } from "./Tooltip";
 export {
   Alert,
   EmptyScreen,
@@ -69,6 +67,7 @@ export {
 } from "./v2";
 export type { AlertProps } from "./v2";
 export { Segment, SegmentOption } from "./v2/core";
+export { default as Shell, ShellMain, MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
 export { default as Banner } from "./v2/core/banner";
 export { default as ColorPicker } from "./v2/core/colorpicker";
 export { default as ConfirmationDialogContent } from "./v2/core/ConfirmationDialogContent";
@@ -110,7 +109,6 @@ export { default as LinkIconButton } from "./v2/core/LinkIconButton";
 export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./v2/core/List";
 export { default as MeetingTimeInTimezones } from "./v2/core/MeetingTimeInTimezones";
 export { default as Meta, MetaProvider } from "./v2/core/Meta";
-export { MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
 export { StepCard } from "./v2/core/StepCard";
 export { default as Stepper } from "./v2/core/Stepper";
 export { Steps } from "./v2/core/Steps";

packages/ui/v2/core/ConfirmationDialogContent.tsx

@@ -3,8 +3,7 @@ import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../../Icon";
-import { Button } from "../../components";
+import { Icon } from "../../components/icon";
 import { DialogClose, DialogContent } from "./Dialog";
 
 export type ConfirmationDialogContentProps = {

packages/ui/v2/core/Kbar.tsx

@@ -15,7 +15,7 @@ import { appStoreMetadata } from "@calcom/app-store/apps.metadata.generated";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 
-import { Icon, Tooltip } from ".";
+import { Icon, Tooltip } from "../../";
 
 type shortcutArrayType = {
   shortcuts?: string[];

packages/ui/v2/core/MeetingTimeInTimezones.tsx

@@ -7,7 +7,7 @@ import {
   sortByTimezone,
 } from "@calcom/lib/date-fns";
 
-import { Icon } from "../../Icon";
+import { Icon } from "../../components/icon";
 import { Attendee } from ".prisma/client";
 
 interface MeetingTimeInTimezonesProps {

packages/ui/v2/core/Shell.tsx

@@ -31,15 +31,14 @@ import {
   DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Icon,
   showToast,
   TimezoneChangeDialog,
 } from "../..";
-import ErrorBoundary from "../../ErrorBoundary";
-import { KBarContent, KBarRoot, KBarTrigger } from "../../Kbar";
-import Logo from "../../Logo";
+import { Logo, ErrorBoundary } from "../../components";
+import { Icon } from "../../components/icon";
 import { SkeletonText } from "../../components/skeleton";
 import Credits from "./Credits";
+import { KBarContent, KBarRoot, KBarTrigger } from "./Kbar";
 import HeadSeo from "./head-seo";
 
 /* TODO: Migate this */

packages/ui/v2/core/layouts/AdminLayout.tsx

@@ -2,7 +2,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect } from "react";
 
-import ErrorBoundary from "../../../ErrorBoundary";
+import { ErrorBoundary } from "../../..";
 import Shell from "../Shell";
 import SettingsLayout from "./SettingsLayout";
 import { UserPermissionRole } from ".prisma/client";

packages/ui/v2/core/layouts/InstalledAppsLayout.tsx

@@ -4,7 +4,7 @@ import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavi
 import { InstalledAppVariants } from "@calcom/app-store/utils";
 import { trpc } from "@calcom/trpc/react";
 
-import { Icon } from "../../../Icon";
+import { Icon } from "../../../components/icon";
 import Shell from "../Shell";
 import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
 import type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -12,7 +12,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Skeleton } from "@calcom/ui";
 
-import { Badge, Button, ErrorBoundary, Icon } from "../../..";
+import { Badge, Button, ErrorBoundary } from "../../..";
+import { Icon } from "../../../components/icon";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
 import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";