Bugfix/typescript performance (#4073)

* next-env.d.ts should be generated as part of next build

* Removed next-env.d.ts from storybook

* Remove barrel imports from '@calcom/ui/v2/...' content

* Remove tabs barrel

* Further changes as the barrel for tabs is removed

apps/storybook/.gitignore

@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

apps/storybook/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/storybook/stories/VerticalTab.stories.tsx

@@ -2,7 +2,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { Calendar, Clock, Grid, Link, RefreshCw, User, Users } from "react-feather";
 
-import { VerticalTabs } from "@calcom/ui/v2";
+import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
 
 export default {
   title: "Vertical Tabs",

apps/web/.gitignore

@@ -21,6 +21,7 @@ playwright/reports/*
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

apps/web/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/ui/v2/core/TableActions.tsx

@@ -2,7 +2,8 @@ import React, { FC } from "react";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Icon } from "@calcom/ui/Icon";
-import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Button } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2/core/Dropdown";
 import Dropdown from "@calcom/ui/v2/core/Dropdown";
 
 export type ActionType = {

packages/ui/v2/core/WizardForm.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
-import { Button, Stepper } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import Stepper from "@calcom/ui/v2/core/Stepper";
 
 type DefaultStep = {
   title: string;

packages/ui/v2/core/colorpicker.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 
 import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
-import { Swatch } from "@calcom/ui/v2";
+import Swatch from "@calcom/ui/v2/core/Swatch";
 
 type Handler = (event: MouseEvent | Event) => void;
 function useEventListener<

packages/ui/v2/core/index.ts

@@ -24,5 +24,8 @@ export * from "./form";
 export { default as showToast } from "./notifications";
 export { default as LinkIconButton } from "./LinkIconButton";
 export * from "./skeleton";
-export * from "./navigation/tabs";
+export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
+export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";
+export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
+export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem";
 export * from "./Portal";

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

@@ -1,11 +1,14 @@
 import React, { ComponentProps } from "react";
 
 import { Icon } from "@calcom/ui";
-import { VerticalTabs, VerticalTabItemProps, HorizontalTabs } from "@calcom/ui/v2/core/navigation/tabs";
+import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
+import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
+import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
 
 import Shell from "../Shell";
+import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
 
-const tabs: VerticalTabItemProps[] = [
+const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
     name: "upcoming",
     href: "/bookings/upcoming",

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

@@ -5,8 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "../../../Icon";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
-import { VerticalTabItem } from "../navigation/tabs";
-import VerticalTabs from "../navigation/tabs/VerticalTabs";
+import VerticalTabs, { VerticalTabItem } from "../navigation/tabs/VerticalTabs";
 
 const tabs = [
   {

packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx

@@ -2,6 +2,8 @@ import { FC } from "react";
 
 import HorizontalTabItem, { HorizontalTabItemProps } from "./HorizontalTabItem";
 
+export { HorizontalTabItem };
+
 export interface NavTabProps {
   tabs: HorizontalTabItemProps[];
 }

packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx

@@ -4,6 +4,8 @@ import { classNames } from "@calcom/lib";
 
 import VerticalTabItem, { VerticalTabItemProps } from "./VerticalTabItem";
 
+export { VerticalTabItem };
+
 export interface NavTabProps {
   tabs: VerticalTabItemProps[];
   children?: React.ReactNode;

packages/ui/v2/core/navigation/tabs/index.tsx

@@ -1,5 +0,0 @@
-export { default as VerticalTabItem } from "./VerticalTabItem";
-export type { VerticalTabItemProps } from "./VerticalTabItem";
-export { default as VerticalTabs } from "./VerticalTabs";
-export { default as HorizontalTabItem } from "./HorizontalTabItem";
-export { default as HorizontalTabs } from "./HorizontalTabs";

packages/ui/v2/modules/auth/SAMLLogin.tsx

@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
 
 interface Props {
   email: string;

packages/ui/v2/modules/availability/NewScheduleButton.tsx

@@ -7,7 +7,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
-import { Button, showToast } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import showToast from "@calcom/ui/v2/core/notifications";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();

packages/ui/v2/modules/availability/Schedule.tsx

@@ -11,8 +11,10 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { TimeRange } from "@calcom/types/schedule";
 import Dropdown, { DropdownMenuContent } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
-import { Switch } from "@calcom/ui/v2";
-import { Tooltip, Button, Select } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import Switch from "@calcom/ui/v2/core/Switch";
+import Tooltip from "@calcom/ui/v2/core/Tooltip";
+import Select from "@calcom/ui/v2/core/form/Select";
 
 /** Begin Time Increments For Select */
 const increment = 15;

packages/ui/v2/modules/availability/ScheduleListItem.tsx

@@ -6,7 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, Badge } from "@calcom/ui/v2";
+import Badge from "@calcom/ui/v2/core/Badge";
+import Button from "@calcom/ui/v2/core/Button";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,

packages/ui/v2/modules/event-types/CreateEventType.tsx

@@ -15,17 +15,9 @@ import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import { Icon } from "@calcom/ui/Icon";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  Button,
-  Avatar,
-  showToast,
-  Form,
-  TextAreaField,
-  TextField,
-} from "@calcom/ui/v2";
+import Avatar from "@calcom/ui/v2/core/Avatar";
+import Button from "@calcom/ui/v2/core/Button";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -33,7 +25,9 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
+import { Form, TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
 import * as RadioArea from "@calcom/ui/v2/core/form/radio-area/RadioAreaGroup";
+import showToast from "@calcom/ui/v2/core/notifications";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
 export interface EventTypeParent {

packages/ui/v2/modules/event-types/CustomInputItem.tsx

@@ -1,6 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
-import { Badge, Button, ButtonGroup } from "@calcom/ui/v2";
+import Badge from "@calcom/ui/v2/core/Badge";
+import Button from "@calcom/ui/v2/core/Button";
+import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
 
 type Props = {
   required?: boolean;

packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Select } from "@calcom/ui/v2";
+import Select from "@calcom/ui/v2/core/form/Select";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;

packages/ui/v2/modules/event-types/EventTypeDescription.tsx

@@ -6,7 +6,7 @@ import { classNames, parseRecurringEvent } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/v2";
+import Badge from "@calcom/ui/v2/core/Badge";
 
 const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
   select: baseEventTypeSelect,

packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx

@@ -8,7 +8,9 @@ import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Icon } from "@calcom/ui/Icon";
-import { Dialog, DialogTrigger, LinkIconButton, showToast } from "@calcom/ui/v2";
+import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
+import LinkIconButton from "@calcom/ui/v2/core/LinkIconButton";
+import showToast from "@calcom/ui/v2/core/notifications";
 
 import CreateEventTypeButton from "../event-types/CreateEventType";