chore: Add ./components/[name]/index.ts map to package.json (#17319)

* chore: Add ./components/[name]/index.ts map to package.json * fix: Clarify Popover exports * fix: re-add dropdown to calcom/ui barrel * chore: Add icon barrel file re-export * Fix all calcom/ui imports of its own barrel * Never say 'fix all remaining..' it's never true * Some type fixeS * Linking fixes * Rename sheet.tsx to Sheet.tsx Done through UI, console does NOT like this. * Fixed some test failures
2024-10-25 23:05:29 +01:00
parent 5c86522e28
commit b9128a7a0b
79 changed files with 216 additions and 195 deletions
@@ -26,7 +26,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
 import { Button, Tooltip } from "@calcom/ui";
-import { showToast } from "@calcom/ui/components/toast";
+import { showToast } from "@calcom/ui/toast";

 const enum ReroutingStatusEnum {
  REROUTING_NOT_INITIATED = "not_initiated",
@@ -278,10 +278,12 @@ const NewRoutingManager = ({
  const router = useRouter();
  const bookerUrl = useBookerUrl();
  const teamMemberIdsMatchingAttributeLogic =
-    teamMembersMatchingAttributeLogic?.data?.map((member) => member.id).filter((id) => {
-      // We don't want to reroute to the same user who booked the booking
-      return id !== booking.user?.id;
-    }) || null;
+    teamMembersMatchingAttributeLogic?.data
+      ?.map((member) => member.id)
+      .filter((id) => {
+        // We don't want to reroute to the same user who booked the booking
+        return id !== booking.user?.id;
+      }) || null;
  const routedFromRoutingFormReponseId = booking.routedFromRoutingFormReponse.id;

  const bookingEventType = booking.eventType;
@@ -207,7 +207,6 @@ const nextConfig = {
    "@calcom/lib",
    "@calcom/prisma",
    "@calcom/trpc",
-    "@calcom/ui",
  ],
  modularizeImports: {
    "@calcom/features/insights/components": {
@@ -218,10 +217,6 @@ const nextConfig = {
    lodash: {
      transform: "lodash/{{member}}",
    },
-    // TODO: We need to have all components in `@calcom/ui/components` in order to use this
-    // "@calcom/ui": {
-    //   transform: "@calcom/ui/components/{{member}}",
-    // },
  },
  images: {
    unoptimized: true,
@@ -8,7 +8,8 @@
      "@pages/*": ["pages/*"],
      "@lib/*": ["lib/*"],
      "@server/*": ["server/*"],
-      "@prisma/client/*": ["@calcom/prisma/client/*"]
+      "@prisma/client/*": ["@calcom/prisma/client/*"],
+      "@calcom/ui/*": ["../../packages/ui/components/*"]
    },
    "plugins": [
      {
@@ -19,7 +19,6 @@ import type { Dispatch, SetStateAction } from "react";

 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { DynamicLink } from "@calcom/features/users/components/UserTable/BulkActions/DynamicLink";
-import { useFetchMoreOnBottomReached } from "@calcom/features/users/components/UserTable/useFetchMoreOnBottomReached";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -50,6 +49,7 @@ import {
  showToast,
  Tooltip,
 } from "@calcom/ui";
+import { useFetchMoreOnBottomReached } from "@calcom/ui/data-table";

 import DeleteBulkTeamMembers from "./DeleteBulkTeamMembers";
 import { EditMemberSheet } from "./EditMemberSheet";
@@ -30,6 +30,7 @@ import {
  DataTableSelectionBar,
  DataTablePagination,
 } from "@calcom/ui";
+import { useFetchMoreOnBottomReached } from "@calcom/ui/data-table";
 import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";

 import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
@@ -44,7 +45,6 @@ import { ImpersonationMemberModal } from "./ImpersonationMemberModal";
 import { InviteMemberModal } from "./InviteMemberModal";
 import { TableActions } from "./UserTableActions";
 import type { UserTableState, UserTableAction, UserTableUser } from "./types";
-import { useFetchMoreOnBottomReached } from "./useFetchMoreOnBottomReached";

 type CustomColumnMeta<TData, TValue> = ColumnMeta<TData, TValue> & {
  sticky?: boolean;
@@ -1,27 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-export const useFetchMoreOnBottomReached = (
-  tableContainerRef: React.RefObject<HTMLDivElement>,
-  fetchNextPage: () => void,
-  isFetching: boolean,
-  totalFetched: number,
-  totalDBRowCount: number
-) => {
-  const fetchMoreOnBottomReached = useCallback(
-    (containerRefElement?: HTMLDivElement | null) => {
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) {
-          fetchNextPage();
-        }
-      }
-    },
-    [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
-  );
-
-  useEffect(() => {
-    fetchMoreOnBottomReached(tableContainerRef.current);
-  }, [fetchMoreOnBottomReached, tableContainerRef]);
-
-  return fetchMoreOnBottomReached;
-};
@@ -2,7 +2,8 @@ import classNames from "classnames";
 import type { ReactNode } from "react";
 import { forwardRef } from "react";

-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";

 export interface AlertProps {
  title?: ReactNode;
@@ -13,8 +13,8 @@ import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";

-import { Icon } from "../..";
 import { EmptyScreen } from "../empty-screen";
+import { Icon } from "../icon";
 import { AppCard } from "./AppCard";

 export function useShouldShowArrows() {
@@ -3,7 +3,7 @@ import Link from "next/link";

 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { SkeletonText } from "../skeleton";
 import { Slider } from "./Slider";

@@ -9,7 +9,7 @@ import { useEffect, useRef } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { SkeletonText } from "../skeleton";

 const SliderButton: FC<ComponentProps<"button">> = (props) => {
@@ -1,4 +1,4 @@
-import { Icon } from "../..";
+import { Icon } from "../icon";

 export type ArrowButtonProps = {
  arrowDirection: "up" | "down";
@@ -4,7 +4,8 @@ import React from "react";

 import classNames from "@calcom/lib/classNames";

-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";

 export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
  variants: {
@@ -1,4 +1,4 @@
-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { Tooltip } from "../tooltip/Tooltip";

 export function InfoBadge({ content }: { content: string }) {
@@ -6,7 +6,8 @@ import React, { forwardRef } from "react";

 import classNames from "@calcom/lib/classNames";

-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 import { Tooltip } from "../tooltip";

 type InferredVariantProps = VariantProps<typeof buttonClasses>;
@@ -1,6 +1,7 @@
 import React from "react";

-import { Icon, type IconName } from "@calcom/ui";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";

 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  Icon: IconName;
@@ -1,3 +1,3 @@
 export { Button, buttonClasses } from "./Button";
-export type { ButtonBaseProps, ButtonProps } from "./Button";
+export type { ButtonBaseProps, ButtonProps, ButtonColor } from "./Button";
 export { default as LinkIconButton } from "./LinkIconButton";
@@ -10,9 +10,9 @@ import {
  VariantRow,
 } from "@calcom/storybook/components";

-import { Icon } from "../..";
-import { Button } from "../button/Button";
-import { ButtonGroup } from "./ButtonGroup";
+import { Icon } from "@calcom/ui/icon";
+import { Button } from "@calcom/ui/button";
+import { ButtonGroup } from "@calcom/ui/ButtonGroup";

 <Meta title="UI/Button Group" component={ButtonGroup} />

@@ -4,7 +4,8 @@ import type { ReactNode } from "react";

 import { type ICalendarSwitchProps } from "@calcom/features/calendars/CalendarSwitch";
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui";
+
+import { Icon } from "../icon";

 export function CalendarSwitchComponent(
  props: ICalendarSwitchProps & {
@@ -2,9 +2,10 @@ import Link from "next/link";

 import { classNames } from "@calcom/lib";

-import type { BadgeProps } from "../..";
-import { Badge, Icon } from "../..";
+import type { BadgeProps } from "../badge";
+import { Badge } from "../badge";
 import { Divider } from "../divider";
+import { Icon } from "../icon";

 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
@@ -7,13 +7,9 @@ import { useVirtual } from "react-virtual";

 import classNames from "@calcom/lib/classNames";

-import Icon from "../icon/Icon";
+import { Icon } from "../icon";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/TableNew";

-// Export DataTable components under a common namespace for better clarity
-export { DataTableToolbar } from "./DataTableToolbar";
-export { DataTableFilters } from "./filters";
-
 export interface DataTableProps<TData, TValue> {
  table: ReactTableType<TData>;
  tableContainerRef: React.RefObject<HTMLDivElement>;
@@ -5,8 +5,6 @@ import { useState } from "react";

 import { classNames } from "@calcom/lib";

-import type { IconName } from "../..";
-import { Icon } from "../..";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import {
@@ -18,6 +16,8 @@ import {
  CommandList,
  CommandSeparator,
 } from "../command";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";

 interface FilterOption {
@@ -5,7 +5,7 @@ import { forwardRef } from "react";

 import { classNames } from "@calcom/lib";

-import type { IconName } from "../..";
+import type { IconName } from "../icon";

 export type ActionItem<TData> =
  | {
@@ -0,0 +1,7 @@
+export { DataTableToolbar } from "./DataTableToolbar";
+export { DataTableSelectionBar } from "./DataTableSelectionBar";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTableFilters } from "./filters";
+export { useFetchMoreOnBottomReached } from "./useFetchMoreOnBottomReached";
+export { DataTable } from "./DataTable";
+export type { DataTableProps } from "./DataTable";
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect } from "react";

 export const useFetchMoreOnBottomReached = (
@@ -4,7 +4,7 @@ import React from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { DialogClose, DialogContent } from "./Dialog";

 type ConfirmBtnType =
@@ -10,10 +10,10 @@ import classNames from "@calcom/lib/classNames";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import type { IconName } from "../..";
-import { Icon } from "../..";
-import type { ButtonProps } from "../../components/button";
-import { Button } from "../../components/button";
+import type { ButtonProps } from "../button";
+import { Button } from "../button";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";

 export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]> & {
  name?: string;
@@ -99,7 +99,16 @@ type DialogContentProps = React.ComponentProps<(typeof DialogPrimitive)["Content
 // enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
  (
-    { children, title, Icon: icon, enableOverflow, forceOverlayWhenNoModal, type = "creation", preventCloseOnOutsideClick, ...props },
+    {
+      children,
+      title,
+      Icon: icon,
+      enableOverflow,
+      forceOverlayWhenNoModal,
+      type = "creation",
+      preventCloseOnOutsideClick,
+      ...props
+    },
    forwardedRef
  ) => {
    const isPlatform = useIsPlatform();
@@ -4,9 +4,10 @@ import type { ComponentProps } from "react";
 import { forwardRef } from "react";

 import { classNames } from "@calcom/lib";
-import { Icon, type IconName } from "@calcom/ui";

-import type { ButtonColor } from "../../button/Button";
+import type { ButtonColor } from "../button";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";

 export const Dropdown = DropdownMenuPrimitive.Root;

@@ -8,8 +8,8 @@ import {
  VariantRow,
  VariantsTable,
 } from "@calcom/storybook/components";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/button";
+import { Icon } from "@calcom/ui/icon";

 import {
  Dropdown,
@@ -19,7 +19,7 @@ import {
  DropdownItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
-} from "./Dropdown";
+} from "@calcom/ui/dropdown";

 <Meta title="UI/Form/Dropdown" component={Dropdown} />

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";

-import { Icon } from "../..";
+import { Icon } from "../icon";

 export const EditableHeading = function EditableHeading({
  value,
@@ -1,2 +1,3 @@
 export { Editor } from "./Editor";
+export type { TextEditorProps } from "./Editor";
 export { AddVariablesDropdown } from "./plugins/AddVariablesDropdown";
@@ -10,7 +10,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
 }));

 // Mock the Dropdown component
-vi.mock("../../form/dropdown", () => ({
+vi.mock("../../dropdown", () => ({
  Dropdown: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon } from "../../..";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
+import { Icon } from "../../icon";

 interface IAddVariablesDropdown {
  addVariable: (variable: string) => void;
@@ -10,7 +10,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import ToolbarPlugin from "./ToolbarPlugin";

 // Mocks
-vi.mock("../../..", () => ({
+vi.mock("../../icon", () => ({
  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
 }));

@@ -23,7 +23,7 @@ vi.mock("../../button", () => ({
  ),
 }));

-vi.mock("../../form/dropdown", () => ({
+vi.mock("../../dropdown", () => ({
  Dropdown: ({ children }: any) => <div data-testid="dropdown">{children}</div>,
  DropdownMenuTrigger: ({ children }: any) => <div data-testid="dropdown-trigger">{children}</div>,
  DropdownMenuContent: ({ children }: any) => <div data-testid="dropdown-content">{children}</div>,
@@ -27,9 +27,9 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";

-import { Icon } from "../../..";
 import { Button } from "../../button";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
+import { Icon } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";

@@ -3,9 +3,9 @@ import React from "react";

 import { classNames } from "@calcom/lib";

-import type { IconName } from "../..";
-import { Icon } from "../..";
-import { Button } from "../../components/button";
+import { Button } from "../button";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";

 export function EmptyScreen({
  Icon: icon,
@@ -4,7 +4,8 @@ import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";

 import classNames from "@calcom/lib/classNames";
-import { Icon } from "@calcom/ui";
+
+import { Icon } from "../../icon";

 type Props = InputHTMLAttributes<HTMLInputElement> & {
  label?: React.ReactNode;
@@ -6,8 +6,8 @@ import { DayPicker } from "react-day-picker";
 import dayjs from "@calcom/dayjs";
 import { classNames as cn } from "@calcom/lib";

-import { Icon } from "../../../index";
 import { buttonClasses } from "../../button/Button";
+import { Icon } from "../../icon";

 export type CalendarProps = React.ComponentProps<typeof DayPicker>;

@@ -4,7 +4,7 @@ import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";

 import classNames from "@calcom/lib/classNames";

-import { Icon } from "../../..";
+import { Icon } from "../../icon";

 type Props = {
  date: Date;
@@ -34,20 +34,4 @@ export { DatePicker } from "./datepicker";
 export { FormStep, Steps, Stepper } from "./step";
 export { WizardForm } from "./wizard";
 export { default as ColorPicker } from "./color-picker/colorpicker";
-export {
-  Dropdown,
-  ButtonOrLink,
-  DropdownItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuTriggerItem,
-} from "./dropdown";
 export { SettingsToggle, Switch } from "./switch";
@@ -5,7 +5,7 @@ import { FormProvider } from "react-hook-form";

 import { getErrorFromUnknown } from "@calcom/lib/errors";

-import { showToast } from "../../..";
+import { showToast } from "../../toast";

 type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
  JSX.IntrinsicElements["form"],
@@ -1,7 +1,7 @@
 import type { FieldValues } from "react-hook-form";
 import { useFormContext } from "react-hook-form";

-import { Icon } from "../../..";
+import { Icon } from "../../icon";
 import { InputError } from "./InputError";

 type hintsOrErrorsProps = {
@@ -7,7 +7,10 @@ import { useFormContext } from "react-hook-form";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Alert, Icon, Input, InputField, Tooltip } from "../../..";
+import { Alert } from "../../alert";
+import { Icon } from "../../icon";
+import { Tooltip } from "../../tooltip";
+import { Input, InputField } from "../inputs/TextField";
 import { Label } from "./Label";
 import type { InputFieldProps } from "./types";

@@ -1,4 +1,4 @@
-import { Icon } from "../../..";
+import { Icon } from "../../icon";

 type InputErrorProp = {
  message: string;
@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";

-import { InputField, UnstyledSelect } from "../../..";
+import { UnstyledSelect } from "../../../form/Select";
+import { InputField } from "./TextField";
 import type { InputFieldProps } from "./types";

 export const InputFieldWithSelect = forwardRef<
@@ -5,7 +5,8 @@ import React, { forwardRef, useId, useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon, Skeleton } from "../../..";
+import { Icon } from "../../icon";
+import { Skeleton } from "../../skeleton";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 import type { InputFieldProps, InputProps } from "./types";
@@ -3,8 +3,8 @@ import { components as reactSelectComponents } from "react-select";

 import { classNames } from "@calcom/lib";

-import { Icon } from "../../..";
 import { UpgradeTeamsBadge } from "../../badge";
+import { Icon } from "../../icon";
 import type { SelectProps } from "./Select";

 export const InputComponent = <
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";

 import { classNames } from "@calcom/lib";

-import { Label } from "..";
+import { Label } from "../inputs/Label";
 import Switch from "./Switch";

 type Props = {
@@ -9,7 +9,7 @@ import {
  VariantsTable,
  VariantRow,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";

 import { ToggleGroup } from "./ToggleGroup";

@@ -9,7 +9,8 @@ import { useEffect, useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";

-import { Button, Steps } from "../../..";
+import { Button } from "../../button";
+import { Steps } from "../../form/step";

 type DefaultStep = {
  title: string;
@@ -0,0 +1,3 @@
+export { default as Icon } from "./Icon";
+export type { IconName } from "./icon-names";
+export { IconSprites } from "./IconSprites";
@@ -6,8 +6,9 @@ import Cropper from "react-easy-crop";
 import checkIfItFallbackImage from "@calcom/lib/checkIfItFallbackImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import type { ButtonColor } from "../..";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../..";
+import type { ButtonColor } from "../button";
+import { Button } from "../button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../dialog";
 import { showToast } from "../toast";
 import { useFileReader, createImage, Slider } from "./Common";
 import type { FileEvent, Area } from "./Common";
@@ -6,8 +6,9 @@ import Cropper from "react-easy-crop";
 import checkIfItFallbackImage from "@calcom/lib/checkIfItFallbackImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import type { ButtonColor } from "../..";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../..";
+import type { ButtonColor } from "../button";
+import { Button } from "../button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../dialog";
 import { showToast } from "../toast";
 import { useFileReader, createImage, Slider } from "./Common";
 import type { FileEvent, Area } from "./Common";
@@ -4,8 +4,9 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";

-import { Icon, type IconName } from "../../..";
 import { Avatar } from "../../avatar";
+import { Icon } from "../../icon";
+import type { IconName } from "../../icon";
 import { SkeletonText } from "../../skeleton";

 export type HorizontalTabItemProps = {
@@ -5,7 +5,8 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";

-import { Icon, type IconName } from "../../..";
+import { Icon } from "../../icon";
+import type { IconName } from "../../icon";
 import { Skeleton } from "../../skeleton";

 export type VerticalTabItemProps = {
@@ -8,7 +8,7 @@ import {
  Examples,
  Example,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";

 import HorizontalTabs from "../HorizontalTabs";

@@ -8,7 +8,7 @@ import {
  VariantsTable,
  VariantRow,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";

 import VerticalTabs from "../VerticalTabs";

@@ -2,9 +2,9 @@ import * as Popover from "@radix-ui/react-popover";
 import React from "react";

 import { classNames } from "@calcom/lib";
-import { Tooltip } from "@calcom/ui";

-import { Icon } from "../..";
+import { Icon } from "../icon";
+import { Tooltip } from "../tooltip";

 export const AnimatedPopover = ({
  text,
@@ -8,7 +8,7 @@ import {
  sortByTimezone,
 } from "@calcom/lib/date-fns";

-import { Icon } from "../..";
+import { Icon } from "../icon";

 type Attendee = {
  id: number;
@@ -24,9 +24,7 @@ const PopoverContent = React.forwardRef<
    />
  </PopoverPrimitive.Portal>
 ));
+
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

 export { Popover, PopoverTrigger, PopoverContent };
-
-export { AnimatedPopover } from "./AnimatedPopover";
-export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
@@ -0,0 +1,4 @@
+export { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+export { AnimatedPopover } from "./AnimatedPopover";
+export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
@@ -0,0 +1 @@
+export { ScrollableArea } from "./ScrollableArea";
@@ -0,0 +1,11 @@
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./Sheet";
@@ -114,4 +114,3 @@ const SelectSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => {
 };

 export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer, SelectSkeletonLoader };
-export { default as Loader } from "./Loader";
@@ -0,0 +1,9 @@
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonText,
+  SkeletonButton,
+  SkeletonContainer,
+  SelectSkeletonLoader,
+} from "./Skeleton";
+export { default as Loader } from "./Loader";
@@ -1,7 +1,6 @@
 import type { FC } from "react";
 import React from "react";

-import type { IconName } from "../..";
 import type { ButtonBaseProps } from "../button";
 import { Button } from "../button";
 import {
@@ -11,7 +10,8 @@ import {
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuTrigger,
-} from "../form/dropdown";
+} from "../dropdown";
+import type { IconName } from "../icon";

 export type ActionType = {
  id: string;
@@ -0,0 +1,11 @@
+export { Table } from "./Table";
+export {
+  Table as TableNew,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./TableNew";
@@ -6,12 +6,6 @@ import { afterEach, expect, vi } from "vitest";
 // For next.js webapp compponent that use "preserve" for jsx in tsconfig.json
 global.React = React;

-vi.mock("next-auth/react", () => ({
-  useSession() {
-    return {};
-  },
-}));
-
 vi.mock("@calcom/features/ee/organizations/hooks", () => ({
  useOrgBrandingValues() {
    return {};
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import type { ToastOptions, Toast } from "react-hot-toast";
 import toast from "react-hot-toast";

-import { Icon } from "../..";
+import { Icon } from "../icon";

 type IToast = {
  message: string;
@@ -3,7 +3,8 @@ import type { ReactNode } from "react";

 import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";

-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";

 export type TopBannerProps = {
  icon?: IconName;
@@ -1,7 +1,7 @@
 import cx from "@calcom/lib/classNames";

-import { Icon } from "..";
 import { Input } from "../components/form";
+import { Icon } from "../components/icon";

 export type AddressInputProps = {
  value: string;
@@ -1,5 +1,9 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, EmailField, Icon, Tooltip } from "@calcom/ui";
+
+import { Button } from "../components/button";
+import { EmailField } from "../components/form";
+import { Icon } from "../components/icon";
+import { Tooltip } from "../components/tooltip";

 interface MultiEmailProps {
  value: string[];
@@ -8,7 +8,8 @@ import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Alert, showToast } from "../";
+import { Alert } from "../components/alert";
+import { showToast } from "../components/toast";

 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };

@@ -48,20 +48,6 @@ export {
  ColorPicker,
  FormStep,
  FilterSearchField,
-  Dropdown,
-  DropdownItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  ButtonOrLink,
-  DropdownMenuGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTriggerItem,
  Steps,
  WizardForm,
  SettingsToggle,
@@ -70,6 +56,7 @@ export {
  NumberInput,
  InputError,
 } from "./components/form";
+
 export type {
  ITimezone,
  ITimezoneOption,
@@ -90,17 +77,6 @@ export {
 export { TopBanner } from "./components/top-banner";
 export type { TopBannerProps } from "./components/top-banner";
 export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
-export { Table } from "./components/table/Table";
-export {
-  Table as TableNew,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./components/table/TableNew";
 export { TableActions, DropdownActions } from "./components/table/TableActions";
 export type { ActionType } from "./components/table/TableActions";
 export { ErrorBoundary } from "./components/errorBoundary";
@@ -173,20 +149,14 @@ export type { ButtonColor } from "./components/button/Button";
 export { CreateButton, CreateButtonWithTeamsList } from "./components/createButton";

 export { useCalcomTheme } from "./styles/useCalcomTheme";
-export { ScrollableArea } from "./components/scrollable/ScrollableArea";
+export { ScrollableArea } from "./components/scrollable";
 export { WizardLayout } from "./layouts/WizardLayout";
-export { DataTable } from "./components/data-table";
-export {
-  Sheet,
-  SheetBody,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./components/sheet/sheet";
+export * from "./components/data-table";
+export * from "./components/sheet";
+export * from "./components/table";
+export * from "./components/popover";
+export * from "./components/dropdown";
+export * from "./components/icon";
 export {
  Command,
  CommandDialog,
@@ -199,16 +169,7 @@ export {
  CommandShortcut,
 } from "./components/command";

-export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
 export { OrgBanner } from "./components/organization-banner";
 export type { OrgBannerProps } from "./components/organization-banner";

 export { StorybookTrpcProvider } from "./components/mocks/trpc";
-export { default as Icon } from "./components/icon/Icon";
-export type { IconName } from "./components/icon/icon-names";
-export { IconSprites } from "./components/icon/IconSprites";
-
-export { DataTableSelectionBar } from "./components/data-table/DataTableSelectionBar";
-export { DataTableToolbar } from "./components/data-table/DataTableToolbar";
-export { DataTableFilters } from "./components/data-table/filters";
-export { DataTablePagination } from "./components/data-table/DataTablePagination";
@@ -3,15 +3,52 @@
  "private": true,
  "sideEffects": false,
  "version": "0.0.0",
-  "main": "./index.tsx",
+  "main": "./index.ts",
  "exports": {
-    ".": "./index.tsx",
+    ".": "./index.ts",
+    "./alert": "./components/alert/index.ts",
+    "./app-list-card": "./components/app-list-card/index.ts",
+    "./apps": "./components/apps/index.ts",
+    "./arrow-button": "./components/arrow-button/index.ts",
+    "./avatar": "./components/avatar/index.ts",
+    "./badge": "./components/badge/index.ts",
+    "./breadcrumb": "./components/breadcrumb/index.ts",
    "./button": "./components/button/index.ts",
+    "./buttonGroup": "./components/buttonGroup/index.ts",
+    "./calendar-switch": "./components/calendar-switch/index.ts",
+    "./card": "./components/card/index.ts",
+    "./command": "./components/command/index.ts",
+    "./createButton": "./components/createButton/index.ts",
+    "./credits": "./components/credits/index.ts",
+    "./data-table": "./components/data-table/index.ts",
+    "./dialog": "./components/dialog/index.ts",
+    "./disconnect-calendar-integration": "./components/disconnect-calendar-integration/index.ts",
+    "./divider": "./components/divider/index.ts",
+    "./dropdown": "./components/dropdown/index.ts",
+    "./editable-heading": "./components/editable-heading/index.ts",
+    "./editor": "./components/editor/index.ts",
+    "./empty-screen": "./components/empty-screen/index.ts",
+    "./errorBoundary": "./components/errorBoundary/index.ts",
+    "./form": "./components/form/index.ts",
    "./form/timezone-select": "./components/form/timezone-select/index.ts",
-    "./toast": "./components/toast/index.tsx",
+    "./head-seo": "./components/head-seo/index.ts",
    "./icon": "./components/icon/index.ts",
+    "./image-uploader": "./components/image-uploader/index.ts",
+    "./layout": "./components/layout/index.ts",
+    "./list": "./components/list/index.ts",
+    "./logo": "./components/logo/index.ts",
+    "./meta": "./components/meta/index.ts",
+    "./navigation": "./components/navigation/index.ts",
+    "./organization-banner": "./components/organization-banner/index.ts",
+    "./popover": "./components/popover/index.ts",
+    "./scrollable": "./components/scrollable/index.ts",
+    "./sheet": "./components/sheet/index.ts",
+    "./skeleton": "./components/skeleton/index.ts",
+    "./table": "./components/table/index.ts",
+    "./toast": "./components/toast/index.ts",
+    "./tooltip": "./components/tooltip/index.ts",
+    "./top-banner": "./components/top-banner/index.ts",
    "./unpublished-entity/UnpublishedEntity": "./components/unpublished-entity/index.ts",
-    "./components/toast": "./components/toast/index.tsx",
    "./components/icon": "./components/icon/index.ts",
    "./components/icon/SatSymbol": "./components/icon/SatSymbol.tsx",
    "./components/icon/Spinner": "./components/icon/Spinner.tsx",
@@ -19,7 +56,6 @@
    "./components/form/timezone-select/TimezoneSelect": "./components/form/timezone-select/index.ts",
    "./__mocks__/ui": "./__mocks__/ui.tsx"
  },
-  "types": "./index.tsx",
  "license": "MIT",
  "scripts": {
    "lint": "eslint .",
				`@@ -0,0 +1 @@`
				`export { ScrollableArea } from "./ScrollableArea";`