Chor/bulk UI migration (#6367)

* Big bulk commit

* Switch and settings toggle

* Popover Kbar Timezones

* Image Uploader

* Fix core export

* Meta

* Swatch

* Remove shell

* Fix shell imports

* Moved ShellSubHeading component to UI, to prevent recursive imports from shell component

* Removed shell from ui ts config since shell doesnt have a dependency on shell anymore.

Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: Omar López <zomars@me.com>

apps/web/components/SettingsShell.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentProps } from "react";
 
-import { ErrorBoundary, Icon, Shell } from "@calcom/ui";
+import Shell from "@calcom/features/shell/Shell";
+import { ErrorBoundary, Icon } from "@calcom/ui";
 
 import NavTabs from "./NavTabs";
 

apps/web/components/apps/App.tsx

@@ -6,12 +6,13 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText, HeadSeo } from "@calcom/ui";
+import { Button, Icon, showToast, SkeletonButton, SkeletonText, HeadSeo } from "@calcom/ui";
 
 const Component = ({
   name,

apps/web/components/apps/CalendarListContainer.tsx

@@ -13,10 +13,10 @@ import {
   EmptyScreen,
   Icon,
   List,
-  ShellSubHeading,
   showToast,
   AppSkeletonLoader as SkeletonLoader,
   Switch,
+  ShellSubHeading,
 } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -2,8 +2,9 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React, { ComponentProps } from "react";
 
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon, Shell, HorizontalTabs, HorizontalTabItemProps } from "@calcom/ui";
+import { EmptyScreen, Icon, HorizontalTabs, HorizontalTabItemProps } from "@calcom/ui";
 
 const tabs: HorizontalTabItemProps[] = [
   {

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -2,8 +2,9 @@ import React, { ComponentProps } from "react";
 
 import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
+import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
-import { Icon, Shell } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [

apps/web/components/auth/layouts/AdminLayout.tsx

@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect } from "react";
 
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
-import { ErrorBoundary, Shell } from "@calcom/ui";
+import Shell from "@calcom/features/shell/Shell";
+import { ErrorBoundary } from "@calcom/ui";
 
 import { UserPermissionRole } from ".prisma/client";
 

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState, Suspense } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { TbWebhook } from "react-icons/tb";
 
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -23,7 +24,6 @@ import {
   HorizontalTabs,
   Icon,
   Label,
-  Shell,
   showToast,
   Skeleton,
   Switch,

apps/web/pages/apps/categories/[category].tsx

@@ -4,9 +4,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
-import { AppCard, Shell, SkeletonText } from "@calcom/ui";
+import { AppCard, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();

apps/web/pages/apps/categories/index.tsx

@@ -2,8 +2,9 @@ import { InferGetStaticPropsType } from "next";
 import Link from "next/link";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Shell, SkeletonText } from "@calcom/ui";
+import { Icon, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();

apps/web/pages/apps/installed/[category].tsx

@@ -15,8 +15,8 @@ import {
   EmptyScreen,
   Icon,
   List,
-  ShellSubHeading,
   AppSkeletonLoader as SkeletonLoader,
+  ShellSubHeading,
 } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";

apps/web/pages/availability/[schedule].tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
 import Schedule from "@calcom/features/schedules/components/Schedule";
+import Shell from "@calcom/features/shell/Shell";
 import { availabilityAsString } from "@calcom/lib/availability";
 import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -16,7 +17,6 @@ import {
   Form,
   Icon,
   Label,
-  Shell,
   showToast,
   Skeleton,
   SkeletonText,

apps/web/pages/availability/index.tsx

@@ -2,9 +2,10 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { GetServerSidePropsContext } from "next";
 
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { EmptyScreen, Icon, Shell, showToast } from "@calcom/ui";
+import { EmptyScreen, Icon, showToast } from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";

apps/web/pages/availability/troubleshoot.tsx

@@ -1,7 +1,8 @@
 import dayjs from "@calcom/dayjs";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Shell, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 

apps/web/pages/event-types/index.tsx

@@ -8,6 +8,7 @@ import {
   CreateEventTypeButton,
   EventTypeDescriptionLazy as EventTypeDescription,
 } from "@calcom/features/eventtypes/components";
+import Shell from "@calcom/features/shell/Shell";
 import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc, TRPCClientError } from "@calcom/trpc/react";
@@ -26,7 +27,6 @@ import {
   DropdownMenuTrigger,
   EmptyScreen,
   Icon,
-  Shell,
   showToast,
   Switch,
   Tooltip,

apps/web/pages/more.tsx

@@ -1,5 +1,5 @@
+import Shell, { MobileNavigationMoreItems } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { MobileNavigationMoreItems, Shell } from "@calcom/ui";
 
 export default function MorePage() {
   const { t } = useLocale();

apps/web/pages/teams/index.tsx

@@ -1,9 +1,10 @@
 import { GetServerSidePropsContext } from "next";
 
 import { TeamsListing } from "@calcom/features/ee/teams/components";
+import Shell from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, Shell } from "@calcom/ui";
+import { Button, Icon } from "@calcom/ui";
 
 import { ssrInit } from "@server/lib/ssr";
 

packages/app-store/ee/routing-forms/components/SingleForm.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Controller, useForm, UseFormReturn } from "react-hook-form";
 
+import { ShellMain } from "@calcom/features/shell/Shell";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -27,7 +28,6 @@ import {
   Icon,
   Meta,
   SettingsToggle,
-  ShellMain,
   showToast,
   TextAreaField,
   TextField,

packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { Controller, useFieldArray, UseFormReturn } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
+import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
 import {
   BooleanToggleGroupField,
@@ -11,7 +12,6 @@ import {
   FormCard,
   Icon,
   SelectField,
-  Shell,
   TextAreaField,
   TextField,
 } from "@calcom/ui";

packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx

@@ -1,6 +1,7 @@
 // TODO: i18n
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import Shell, { ShellMain } from "@calcom/features/shell/Shell";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -13,8 +14,6 @@ import {
   Icon,
   List,
   ListLinkItem,
-  Shell,
-  ShellMain,
   Tooltip,
 } from "@calcom/ui";
 

packages/app-store/ee/routing-forms/pages/reporting/[...appPages].tsx

@@ -10,11 +10,12 @@ import {
   Utils as QbUtils,
 } from "react-awesome-query-builder";
 
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, Shell } from "@calcom/ui";
+import { Button } from "@calcom/ui";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 

packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx

@@ -5,13 +5,13 @@ import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
 // types
 import { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder";
 
+import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
 import {
   SelectField,
   FormCard,
   SelectWithValidation as Select,
-  Shell,
   TextArea,
   TextField,
   Badge,

packages/features/bookings/layout/BookingLayout.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentProps } from "react";
 
-import { HorizontalTabs, Shell } from "@calcom/ui";
+import Shell from "@calcom/features/shell/Shell";
+import { HorizontalTabs } from "@calcom/ui";
 import { VerticalTabItemProps, HorizontalTabItemProps } from "@calcom/ui";
 
 import { FiltersContainer } from "../components/FiltersContainer";

packages/features/ee/workflows/pages/index.tsx

@@ -1,10 +1,11 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, Shell, showToast } from "@calcom/ui";
+import { Button, Icon, showToast } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import SkeletonLoader from "../components/SkeletonLoaderList";

packages/features/ee/workflows/pages/workflow.tsx

@@ -13,13 +13,14 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
-import { Alert, Button, Form, Shell, showToast } from "@calcom/ui";
+import { Alert, Button, Form, showToast } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import SkeletonLoader from "../components/SkeletonLoaderEdit";

packages/features/kbar/Kbar.tsx

@@ -15,8 +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 { RouterOutputs, trpc } from "@calcom/trpc/react";
-
-import { Icon, Tooltip } from "../../";
+import { Icon, Tooltip } from "@calcom/ui";
 
 type shortcutArrayType = {
   shortcuts?: string[];

packages/features/settings/layouts/SettingsLayout.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect, useState } from "react";
 
+import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
@@ -17,7 +18,6 @@ import {
   Icon,
   VerticalTabItemProps,
   VerticalTabItem,
-  Shell,
   Skeleton,
   useMeta,
 } from "@calcom/ui";

packages/features/shell/Shell.tsx

@@ -12,6 +12,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseReq
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import { TeamsUpgradeBanner } from "@calcom/features/ee/teams/components";
+import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
 import { Tips } from "@calcom/features/tips";
 import AdminPasswordBanner from "@calcom/features/users/components/AdminPasswordBanner";
@@ -23,7 +24,6 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-
 import {
   Button,
   Dropdown,
@@ -33,13 +33,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   showToast,
-} from "../..";
-import { Logo, ErrorBoundary } from "../../components";
-import { Credits } from "../../components/credits";
-import { HeadSeo } from "../../components/head-seo";
-import { Icon } from "../../components/icon";
-import { SkeletonText } from "../../components/skeleton";
-import { KBarContent, KBarRoot, KBarTrigger } from "./Kbar";
+  Logo,
+  ErrorBoundary,
+  Credits,
+  HeadSeo,
+  Icon,
+  SkeletonText,
+} from "@calcom/ui";
 
 /* TODO: Migate this */
 
@@ -103,25 +103,6 @@ function useRedirectToOnboardingIfNeeded() {
   };
 }
 
-export function ShellSubHeading(props: {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
-      <div>
-        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
-          {props.title}
-        </h2>
-        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
-      </div>
-      {props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
-    </header>
-  );
-}
-
 const Layout = (props: LayoutProps) => {
   const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
 

packages/ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md

@@ -1,35 +0,0 @@
-# Whatsup with all these version?
-
-We're currently in the progress of merging multiple versions of our UI library into one new version.
-
-## Version 1
-
-Anything version 1 is in the root, or in the root folders skeleton, form, booker and apps.
-
-## Version 2
-
-Anything version 2 is in the v2 folder
-
-## New version
-
-We're currently creating all new components following new standards in the components directory. The /styles directory contains the shared tailwind styles.
-
-### Adding new components
-
-For adding new components it is important to take a few patterns into account:
-
-- All components should be added in /components
-- All components should be in a folder, no tsx files directly in the root
-- All components should contain stories and MDX documentation (which is why they can't live in the root, since that would result in a lot of duplication)
-
-### Migration process
-
-We're currently migrating existing components step by step, this process looks as following:
-
-- New components only should get added in /components
-- Any existing components in v2 are reviewed, updated if needed and then moved to the /components directory
-- After v2 is moved, the old v2 component should be deleted, as well as any v1 version of that component. All places in the monorepo where we use this component, should use the newest version by then.
-
-### End state
-
-The envisioned end state is a state where only the /components directory exists. In this directory all components should have documentation and stories.

packages/ui/components/apps/SkeletonLoader.tsx

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

packages/ui/components/card/FormCard.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 
 import { classNames } from "@calcom/lib";
 
-import { Icon } from "../../..";
-import { Badge, BadgeProps } from "../../../components";
-import { Divider } from "../../../components/divider";
+import { Badge, BadgeProps } from "..";
+import { Icon } from "../..";
+import { Divider } from "../divider";
 
 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({

packages/ui/components/card/index.ts

@@ -1,3 +1,4 @@
 export { default as Card } from "./Card";
 export type { BaseCardProps } from "./Card";
 export { StepCard } from "./StepCard";
+export { default as FormCard } from "./FormCard";

packages/ui/components/form/color-picker/colorpicker.tsx

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

packages/ui/components/form/dropdown/index.ts

@@ -0,0 +1,16 @@
+export {
+  Dropdown,
+  ButtonOrLink,
+  DropdownItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuTriggerItem,
+} from "./Dropdown";

packages/ui/components/form/index.ts

@@ -23,3 +23,23 @@ export type { ITimezone, ITimezoneOption } from "./timezone-select";
 export { DateRangePickerLazy as DateRangePicker } from "./date-range-picker";
 export { BooleanToggleGroup, BooleanToggleGroupField, ToggleGroup, ToggleGroupItem } from "./toggleGroup";
 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";

packages/ui/components/form/step/index.ts

@@ -0,0 +1,3 @@
+export { default as FormStep } from "./FormStep";
+export { Steps } from "./Steps";
+export { default as Stepper } from "./Stepper";

packages/ui/components/form/switch/SettingsToggle.tsx

@@ -1,7 +1,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ReactNode } from "react";
 
-import { Label } from "../../components/form";
+import { Label } from "..";
 import Switch from "./Switch";
 
 type Props = {

packages/ui/components/form/switch/index.ts

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

packages/ui/components/form/wizard/WizardForm.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Button, Stepper } from "../..";
+import { Button, Stepper } from "../../..";
 
 type DefaultStep = {
   title: string;

packages/ui/components/form/wizard/index.ts

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

packages/ui/components/image-uploader/ImageUploader.tsx

@@ -4,7 +4,7 @@ import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "../../";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "../..";
 
 type ReadAsMethod = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";
 

packages/ui/components/image-uploader/index.ts

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

packages/ui/components/index.ts

@@ -35,6 +35,27 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   getReactSelectProps,
+  ColorPicker,
+  FormStep,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  ButtonOrLink,
+  DropdownMenuGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTriggerItem,
+  Steps,
+  WizardForm,
+  SettingsToggle,
+  Stepper,
+  Switch,
 } from "./form";
 export type { ITimezone, ITimezoneOption } from "./form";
 export {
@@ -49,7 +70,7 @@ export {
 } from "./apps";
 export { TopBanner } from "./top-banner";
 export type { TopBannerProps } from "./top-banner";
-export { AnimatedPopover } from "./popover/index";
+export { AnimatedPopover, MeetingTimeInTimezones } from "./popover";
 export { TableActions, DropdownActions } from "./table/TableActions";
 export type { ActionType } from "./table/TableActions";
 export { Icon } from "./icon";
@@ -63,10 +84,17 @@ export { EmptyScreen } from "./empty-screen";
 export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./list";
 export type { ListItemProps, ListProps } from "./list";
 export { HeadSeo } from "./head-seo";
-export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  Loader,
+} from "./skeleton";
 export { HorizontalTabs, HorizontalTabItem, VerticalTabs, VerticalTabItem } from "./navigation";
 export type { HorizontalTabItemProps, NavTabProps, VerticalTabItemProps } from "./navigation";
-export { Card, StepCard } from "./card";
+export { Card, StepCard, FormCard } from "./card";
 export type { BaseCardProps } from "./card";
 export { Tooltip } from "./tooltip";
 export { Editor, AddVariablesDropdown } from "./editor";
@@ -81,3 +109,6 @@ export {
 } from "./dialog";
 export type { DialogProps, ConfirmationDialogContentProps } from "./dialog";
 export { showToast } from "./toast"; // We don't export the toast components as they are only used in local storybook file
+export { Meta, MetaProvider, useMeta } from "./meta";
+export { Swatch } from "./swatch";
+export { ShellSubHeading } from "./layout";

packages/ui/components/layout/ShellSubHeading.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function ShellSubHeading(props: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
+      <div>
+        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
+          {props.title}
+        </h2>
+        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
+      </div>
+      {props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
+    </header>
+  );
+}

packages/ui/components/layout/index.ts

@@ -0,0 +1 @@
+export { ShellSubHeading } from "./ShellSubHeading";

packages/ui/components/meta/index.ts

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

packages/ui/components/popover/MeetingTimeInTimezones.tsx

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

packages/ui/components/popover/index.ts

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

packages/ui/components/skeleton/index.tsx

@@ -94,3 +94,4 @@ const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as, classNam
 };
 
 export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };
+export { default as Loader } from "./Loader";

packages/ui/components/swatch/index.ts

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

packages/ui/index.tsx

@@ -81,7 +81,36 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   showToast,
+  ShellSubHeading,
   DatePicker as DatePickerField,
+  FormCard,
+  FormStep,
+  ColorPicker,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTriggerItem,
+  WizardForm,
+  Stepper,
+  Steps,
+  Switch,
+  SettingsToggle,
+  MeetingTimeInTimezones,
+  Loader,
+  Meta,
+  MetaProvider,
+  useMeta,
+  Swatch,
+  Logo,
 } from "./components";
 export type {
   ActionType,
@@ -107,22 +136,7 @@ export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
 export { default as AddressInput } from "./form/AddressInputLazy";
 export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { UnstyledSelect } from "./form/Select";
-export { default as Loader } from "./v2/core/Loader";
 
-export { SettingsToggle, Swatch, Switch } from "./v2";
-export { default as Shell, ShellMain, MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
-
-export { default as ColorPicker } from "./v2/core/colorpicker";
-export {
-  Dropdown,
-  DropdownItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "./v2/core/Dropdown";
 export {
   RadioGroup,
   /* TODO: solve this conflict -> Select, */
@@ -131,13 +145,6 @@ export {
   RadioField,
 } from "./form/radio-area";
 
-export {} from "./components/form/date-range-picker";
-export { default as FormCard } from "./v2/core/form/FormCard";
 export { default as MultiSelectCheckboxes } from "./components/form/checkbox/MultiSelectCheckboxes";
 export type { Option as MultiSelectCheckboxesOptionType } from "./components/form/checkbox/MultiSelectCheckboxes";
-export { default as ImageUploader } from "./v2/core/ImageUploader";
-export { default as MeetingTimeInTimezones } from "./v2/core/MeetingTimeInTimezones";
-export { default as Meta, MetaProvider, useMeta } from "./v2/core/Meta";
-export { default as Stepper } from "./v2/core/Stepper";
-export { Steps } from "./v2/core/Steps";
-export { default as WizardForm } from "./v2/core/WizardForm";
+export { default as ImageUploader } from "./components/image-uploader/ImageUploader";

packages/ui/v2/core/form/index.ts

@@ -1,3 +0,0 @@
-export { default as Checkbox } from "../../../components/form/checkbox/Checkbox";
-
-export { default as FormStep } from "./FormStep";

packages/ui/v2/core/index.ts

@@ -1,26 +0,0 @@
-export { default as ColorPicker } from "./colorpicker";
-export {
-  ButtonOrLink,
-  Dropdown,
-  DropdownItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuTriggerItem,
-} from "./Dropdown";
-export { FormStep } from "./form";
-export { default as Loader } from "./Loader";
-export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
-export { default as SettingsToggle } from "./SettingsToggle";
-export { default as Shell } from "./Shell";
-export { default as Stepper } from "./Stepper";
-export { default as Swatch } from "./Swatch";
-export { default as Switch } from "./Switch";
-export { default as WizardForm } from "./WizardForm";

packages/ui/v2/index.ts

@@ -1,2 +0,0 @@
-/* TODO: Make this index explicit */
-export * from "./core";