Chor/more UI migrations (#6353)

* Move tabs to components

* Lots of form components

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

Co-authored-by: Omar López <zomars@me.com>

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

@@ -4,8 +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, Shell } from "@calcom/ui";
-import type { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
-import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
+import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {

packages/features/bookings/layout/BookingLayout.tsx

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

packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx

@@ -5,7 +5,7 @@ import { Props } from "react-select";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Select } from "../../../components/form/select";
+import { Select } from "../select";
 
 export type Option = {
   value: string;

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

@@ -1 +1,3 @@
 export { default as Checkbox } from "./Checkbox";
+export { default as MultiSelectCheckbox } from "./MultiSelectCheckboxes";
+export type { Option } from "./MultiSelectCheckboxes";

packages/ui/components/form/date-range-picker/DateRangePicker.tsx

@@ -2,7 +2,7 @@
 import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
 import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
 
-import { Icon } from "../../../..";
+import { Icon } from "../../..";
 import "./styles.css";
 
 type Props = {

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

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

packages/ui/components/form/index.ts

@@ -1,4 +1,5 @@
-export { Checkbox } from "./checkbox";
+export { Checkbox, MultiSelectCheckbox } from "./checkbox";
+export type { Option } from "./checkbox";
 export { HintsOrErrors } from "./inputs/HintOrErrors";
 export {
   EmailField,
@@ -19,3 +20,6 @@ export { Label } from "./inputs/Label";
 export { Select, SelectField, SelectWithValidation, getReactSelectProps } from "./select";
 export { TimezoneSelect } from "./timezone-select";
 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";

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

@@ -0,0 +1,2 @@
+export { ToggleGroup, ToggleGroupItem } from "./ToggleGroup";
+export { BooleanToggleGroup, BooleanToggleGroupField } from "./BooleanToggleGroup";

packages/ui/components/index.ts

@@ -27,6 +27,14 @@ export {
   SelectField,
   SelectWithValidation,
   TimezoneSelect,
+  BooleanToggleGroup,
+  BooleanToggleGroupField,
+  DatePicker,
+  DateRangePicker,
+  MultiSelectCheckbox,
+  ToggleGroup,
+  ToggleGroupItem,
+  getReactSelectProps,
 } from "./form";
 export type { ITimezone, ITimezoneOption } from "./form";
 export {
@@ -56,6 +64,8 @@ export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./lis
 export type { ListItemProps, ListProps } from "./list";
 export { HeadSeo } from "./head-seo";
 export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
+export { HorizontalTabs, HorizontalTabItem, VerticalTabs, VerticalTabItem } from "./navigation";
+export type { HorizontalTabItemProps, NavTabProps, VerticalTabItemProps } from "./navigation";
 export { Card, StepCard } from "./card";
 export type { BaseCardProps } from "./card";
 export { Tooltip } from "./tooltip";

packages/ui/components/navigation/index.tsx

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

packages/ui/components/navigation/tabs/HorizontalTabItem.tsx

@@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
-import { SkeletonText } from "../../../../components/skeleton";
+import { SkeletonText } from "../../skeleton";
 
 export type HorizontalTabItemProps = {
   name: string;

packages/ui/components/navigation/tabs/HorizontalTabs.tsx

@@ -1,7 +1,5 @@
 import HorizontalTabItem, { HorizontalTabItemProps } from "./HorizontalTabItem";
 
-export { HorizontalTabItem };
-
 export interface NavTabProps {
   tabs: HorizontalTabItemProps[];
   linkProps?: HorizontalTabItemProps["linkProps"];

packages/ui/components/navigation/tabs/VerticalTabItem.tsx

@@ -6,8 +6,8 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
-import { Icon } from "../../../..";
-import { Skeleton } from "../../../../components/skeleton";
+import { Icon } from "../../..";
+import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
   name: string;

packages/ui/index.tsx

@@ -59,6 +59,10 @@ export {
   Slider,
   Tooltip,
   useShouldShowArrows,
+  HorizontalTabs,
+  HorizontalTabItem,
+  VerticalTabs,
+  VerticalTabItem,
   StepCard,
   LinkIconButton,
   Editor,
@@ -70,7 +74,14 @@ export {
   DialogHeader,
   DialogTrigger,
   ConfirmationDialogContent,
+  DateRangePicker,
+  MultiSelectCheckbox,
+  BooleanToggleGroup,
+  BooleanToggleGroupField,
+  ToggleGroup,
+  ToggleGroupItem,
   showToast,
+  DatePicker as DatePickerField,
 } from "./components";
 export type {
   ActionType,
@@ -87,6 +98,9 @@ export type {
   ListItemProps,
   ListProps,
   TopBannerProps,
+  NavTabProps,
+  HorizontalTabItemProps,
+  VerticalTabItemProps,
 } from "./components";
 export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
 /** ⬇️ TODO - Move these to components */
@@ -95,16 +109,7 @@ export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { UnstyledSelect } from "./form/Select";
 export { default as Loader } from "./v2/core/Loader";
 
-export {
-  HorizontalTabs,
-  SettingsToggle,
-  Swatch,
-  Switch,
-  VerticalTabs,
-  HorizontalTabItem,
-  VerticalTabItem,
-} from "./v2";
-export type { HorizontalTabItemProps, VerticalTabItemProps } from "./v2";
+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";
@@ -126,13 +131,10 @@ export {
   RadioField,
 } from "./form/radio-area";
 
-export { BooleanToggleGroupField } from "./v2/core/form/BooleanToggleGroup";
-export { DateRangePickerLazy as DateRangePicker } from "./v2/core/form/date-range-picker";
-export { default as DatePickerField } from "./v2/core/form/DatePicker";
+export {} from "./components/form/date-range-picker";
 export { default as FormCard } from "./v2/core/form/FormCard";
-export { default as MultiSelectCheckboxes } from "./v2/core/form/MultiSelectCheckboxes";
-export type { Option as MultiSelectCheckboxesOptionType } from "./v2/core/form/MultiSelectCheckboxes";
-export { ToggleGroup } from "./v2/core/form/ToggleGroup";
+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";

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

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

packages/ui/v2/core/index.ts

@@ -15,13 +15,9 @@ export {
   DropdownMenuTrigger,
   DropdownMenuTriggerItem,
 } from "./Dropdown";
-export { Checkbox, DatePicker, FormStep } from "./form";
+export { FormStep } from "./form";
 export { default as Loader } from "./Loader";
 export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
-export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem";
-export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";
-export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
-export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
 export { default as SettingsToggle } from "./SettingsToggle";
 export { default as Shell } from "./Shell";
 export { default as Stepper } from "./Stepper";