diff --git a/apps/web/components/App.tsx b/apps/web/components/App.tsx deleted file mode 100644 index e859702c5a..0000000000 --- a/apps/web/components/App.tsx +++ /dev/null @@ -1,309 +0,0 @@ -import Link from "next/link"; -import { useRouter } from "next/router"; -import React, { useState } from "react"; - -import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; -import { InstallAppButton } from "@calcom/app-store/components"; -import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { trpc } from "@calcom/trpc/react"; -import { App as AppType } from "@calcom/types/App"; -import { Button, SkeletonButton } from "@calcom/ui"; -import { Icon } from "@calcom/ui/Icon"; -import Shell from "@calcom/ui/Shell"; -import { Badge } from "@calcom/ui/components/badge"; -import showToast from "@calcom/ui/v2/core/notifications"; - -import DisconnectIntegration from "@components/integrations/DisconnectIntegration"; - -const Component = ({ - name, - type, - logo, - body, - categories, - author, - price = 0, - commission, - isGlobal = false, - feeType, - docs, - website, - email, - tos, - privacy, - isProOnly, -}: Parameters[0]) => { - const { t } = useLocale(); - const router = useRouter(); - const { data: user } = trpc.viewer.me.useQuery(); - - const utils = trpc.useContext(); - const handleOpenChange = () => { - utils.viewer.integrations.invalidate(); - router.replace("/apps/installed"); - }; - - const mutation = useAddAppMutation(null, { - onSuccess: () => { - showToast("App successfully installed", "success"); - }, - onError: (error) => { - if (error instanceof Error) showToast(error.message || "App could not be installed", "error"); - }, - }); - - const priceInDollar = Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - useGrouping: false, - }).format(price); - - const [existingCredentials, setExistingCredentials] = useState([]); - const appCredentials = trpc.viewer.appCredentialsByType.useQuery( - { appType: type }, - { - onSuccess(data) { - setExistingCredentials(data); - }, - } - ); - - const allowedMultipleInstalls = categories.indexOf("calendar") > -1; - - return ( -
-
- - - {t("browse_apps")} - - -
-
- {name} -
-
-

{name}

-
-

- {categories[0]} • {t("published_by", { author })} -

-
-
- -
- {!appCredentials.isLoading ? ( - isGlobal || - (existingCredentials.length > 0 && allowedMultipleInstalls ? ( -
- - {!isGlobal && ( - { - if (useDefaultComponent) { - props = { - onClick: () => { - mutation.mutate({ type }); - }, - loading: mutation.isLoading, - }; - } - return ( - - ); - }} - /> - )} -
- ) : existingCredentials.length > 0 ? ( - ( - - )} - onOpenChange={handleOpenChange} - /> - ) : ( - { - if (useDefaultComponent) { - props = { - onClick: () => { - mutation.mutate({ type }); - }, - loading: mutation.isLoading, - }; - } - return ( - - ); - }} - /> - )) - ) : ( - - )} - {price !== 0 && ( - - {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar} - {feeType === "monthly" && "/" + t("month")} - - )} -
-
-
- -
-
{body}
-
-

{t("categories")}

-
- {categories.map((category) => ( - - - {category} - - - ))} -
-

{t("pricing")}

- - {price === 0 ? ( - "Free" - ) : ( - <> - {Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - useGrouping: false, - }).format(price)} - {feeType === "monthly" && "/" + t("month")} - - )} - -

{t("learn_more")}

- -
- - Every app published on the Cal.com App Store is open source and thoroughly tested via peer - reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are - published by Cal.com. If you encounter inappropriate content or behaviour please report it. - - - Report App - -
-
-
- ); -}; - -export default function App(props: { - name: string; - type: AppType["type"]; - isGlobal?: AppType["isGlobal"]; - logo: string; - body: React.ReactNode; - categories: string[]; - author: string; - pro?: boolean; - price?: number; - commission?: number; - feeType?: AppType["feeType"]; - docs?: string; - website?: string; - email: string; // required - tos?: string; - privacy?: string; - licenseRequired: AppType["licenseRequired"]; - isProOnly: AppType["isProOnly"]; -}) { - return ( - - {props.licenseRequired ? ( - - - - ) : ( - - )} - - ); -} diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx index a3b6f14c82..4dd6a739f9 100644 --- a/apps/web/components/apps/App.tsx +++ b/apps/web/components/apps/App.tsx @@ -146,6 +146,7 @@ const Component = ({ ) : existingCredentials.length > 0 ? ( { diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx index 5bc5330618..bdc8cdeef4 100644 --- a/apps/web/components/booking/AvailableTimes.tsx +++ b/apps/web/components/booking/AvailableTimes.tsx @@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { TimeFormat } from "@calcom/lib/timeFormat"; import { nameOfDay } from "@calcom/lib/weekday"; import type { Slot } from "@calcom/trpc/server/routers/viewer/slots"; -import { SkeletonContainer, SkeletonText } from "@calcom/ui"; +import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2"; import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup"; import classNames from "@lib/classNames"; @@ -152,13 +152,13 @@ const AvailableTimes: FC = ({ {isLoading && !slots.length && ( <> - + - + - + )} diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx index df375df850..fa11a72f03 100644 --- a/apps/web/components/eventtype/SkeletonLoader.tsx +++ b/apps/web/components/eventtype/SkeletonLoader.tsx @@ -5,8 +5,8 @@ function SkeletonLoader() { return (
- -
+ +
@@ -27,17 +27,17 @@ function SkeletonItem() {
  • - +
    • - +
    • - +
    diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx index b234f1fd10..60c3d4c55b 100644 --- a/apps/web/components/integrations/CalendarListContainer.tsx +++ b/apps/web/components/integrations/CalendarListContainer.tsx @@ -5,11 +5,11 @@ import { InstallAppButton } from "@calcom/app-store/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/Alert"; -import Button from "@calcom/ui/Button"; import { List } from "@calcom/ui/List"; import { ShellSubHeading } from "@calcom/ui/Shell"; import Switch from "@calcom/ui/Switch"; import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader"; +import { Button } from "@calcom/ui/components/button"; import showToast from "@calcom/ui/v2/core/notifications"; import { QueryCell } from "@lib/QueryCell"; @@ -161,7 +161,7 @@ function ConnectedCalendarsList(props: Props) { id={item.credentialId} externalId={item.primary?.externalId} render={(btnProps) => ( - )} @@ -194,7 +194,7 @@ function ConnectedCalendarsList(props: Props) { ( - )} diff --git a/apps/web/components/integrations/DisconnectIntegration.tsx b/apps/web/components/integrations/DisconnectIntegration.tsx index e821cef507..ccbfabeff8 100644 --- a/apps/web/components/integrations/DisconnectIntegration.tsx +++ b/apps/web/components/integrations/DisconnectIntegration.tsx @@ -2,9 +2,9 @@ import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { ButtonBaseProps } from "@calcom/ui/Button"; import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; import { Dialog } from "@calcom/ui/Dialog"; +import { ButtonBaseProps } from "@calcom/ui/components/button"; import showToast from "@calcom/ui/v2/core/notifications"; export default function DisconnectIntegration(props: { diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx index 9534ec6020..bb45d1c77d 100644 --- a/packages/app-store/rainbow/components/RainbowKit.tsx +++ b/packages/app-store/rainbow/components/RainbowKit.tsx @@ -15,8 +15,8 @@ import { useAccount, useSignMessage } from "wagmi"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { SkeletonText } from "@calcom/ui"; import { Icon } from "@calcom/ui/Icon"; +import { SkeletonText } from "@calcom/ui/v2"; import showToast from "@calcom/ui/v2/core/notifications"; import { getProviders, ETH_MESSAGE, SUPPORTED_CHAINS } from "../utils/ethereum"; @@ -118,8 +118,8 @@ const BalanceCheck: React.FC = ({ chainId, setToken, tokenAddr

    Token Gate

    {isLoading && ( <> - - + + )} {!isLoading && contractData && contractData.data && ( diff --git a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx index 8acb96d944..6f08c456c6 100644 --- a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx +++ b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx @@ -1,4 +1,4 @@ -import { SkeletonText } from "@calcom/ui"; +import { SkeletonText } from "@calcom/ui/v2"; function SkeletonLoaderTeamList() { return ( @@ -19,18 +19,18 @@ function SkeletonItem() {
  • - +
    - - + +
    - - - + + +
    • diff --git a/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx b/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx index 745da0cf38..8f1e4b71fb 100644 --- a/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx +++ b/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx @@ -1,4 +1,4 @@ -import { SkeletonContainer, SkeletonText } from "@calcom/ui"; +import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2"; function SkeletonLoader() { return ( diff --git a/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx b/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx index 3de67223b9..00acd8796c 100644 --- a/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx +++ b/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx @@ -1,4 +1,4 @@ -import { SkeletonContainer, SkeletonText } from "@calcom/ui"; +import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2"; function SkeletonLoader() { return ( diff --git a/packages/ui/BooleanToggleGroup.tsx b/packages/ui/BooleanToggleGroup.tsx deleted file mode 100644 index f988875fc4..0000000000 --- a/packages/ui/BooleanToggleGroup.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Root as ToggleGroupPrimitive, Item as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group"; -import { useState } from "react"; - -import classNames from "@calcom/lib/classNames"; - -const boolean = (yesNo: "yes" | "no") => (yesNo === "yes" ? true : yesNo === "no" ? false : undefined); -const yesNo = (boolean?: boolean) => (boolean === true ? "yes" : boolean === false ? "no" : undefined); - -export default function BooleanToggleGroup({ - defaultValue = true, - value, - // eslint-disable-next-line @typescript-eslint/no-empty-function - onValueChange = () => {}, -}: { - defaultValue?: boolean; - value?: boolean; - onValueChange?: (value?: boolean) => void; -}) { - // Maintain a state because it is not necessary that onValueChange the parent component would re-render. Think react-hook-form - // Also maintain a string as boolean isn't accepted as ToggleGroupPrimitive value - const [yesNoValue, setYesNoValue] = useState<"yes" | "no" | undefined>(yesNo(value)); - - if (!yesNoValue) { - setYesNoValue(yesNo(defaultValue)); - onValueChange(defaultValue); - return null; - } - - return ( - { - setYesNoValue(yesNoValue); - onValueChange(boolean(yesNoValue)); - }}> - - Yes - - - No - - - ); -} diff --git a/packages/ui/CustomBranding.tsx b/packages/ui/CustomBranding.tsx deleted file mode 100644 index 8512de4de0..0000000000 --- a/packages/ui/CustomBranding.tsx +++ /dev/null @@ -1,269 +0,0 @@ -import Head from "next/head"; - -import { useBrandColors } from "@calcom/embed-core/embed-iframe"; - -const brandColor = "#292929"; -const brandTextColor = "#ffffff"; -const darkBrandColor = "#fafafa"; - -export function colorNameToHex(color: string) { - const colors = { - aliceblue: "#f0f8ff", - antiquewhite: "#faebd7", - aqua: "#00ffff", - aquamarine: "#7fffd4", - azure: "#f0ffff", - beige: "#f5f5dc", - bisque: "#ffe4c4", - black: "#000000", - blanchedalmond: "#ffebcd", - blue: "#0000ff", - blueviolet: "#8a2be2", - brown: "#a52a2a", - burlywood: "#deb887", - cadetblue: "#5f9ea0", - chartreuse: "#7fff00", - chocolate: "#d2691e", - coral: "#ff7f50", - cornflowerblue: "#6495ed", - cornsilk: "#fff8dc", - crimson: "#dc143c", - cyan: "#00ffff", - darkblue: "#00008b", - darkcyan: "#008b8b", - darkgoldenrod: "#b8860b", - darkgray: "#a9a9a9", - darkgreen: "#006400", - darkkhaki: "#bdb76b", - darkmagenta: "#8b008b", - darkolivegreen: "#556b2f", - darkorange: "#ff8c00", - darkorchid: "#9932cc", - darkred: "#8b0000", - darksalmon: "#e9967a", - darkseagreen: "#8fbc8f", - darkslateblue: "#483d8b", - darkslategray: "#2f4f4f", - darkturquoise: "#00ced1", - darkviolet: "#9400d3", - deeppink: "#ff1493", - deepskyblue: "#00bfff", - dimgray: "#696969", - dodgerblue: "#1e90ff", - firebrick: "#b22222", - floralwhite: "#fffaf0", - forestgreen: "#228b22", - fuchsia: "#ff00ff", - gainsboro: "#dcdcdc", - ghostwhite: "#f8f8ff", - gold: "#ffd700", - goldenrod: "#daa520", - gray: "#808080", - green: "#008000", - greenyellow: "#adff2f", - honeydew: "#f0fff0", - hotpink: "#ff69b4", - "indianred ": "#cd5c5c", - indigo: "#4b0082", - ivory: "#fffff0", - khaki: "#f0e68c", - lavender: "#e6e6fa", - lavenderblush: "#fff0f5", - lawngreen: "#7cfc00", - lemonchiffon: "#fffacd", - lightblue: "#add8e6", - lightcoral: "#f08080", - lightcyan: "#e0ffff", - lightgoldenrodyellow: "#fafad2", - lightgrey: "#d3d3d3", - lightgreen: "#90ee90", - lightpink: "#ffb6c1", - lightsalmon: "#ffa07a", - lightseagreen: "#20b2aa", - lightskyblue: "#87cefa", - lightslategray: "#778899", - lightsteelblue: "#b0c4de", - lightyellow: "#ffffe0", - lime: "#00ff00", - limegreen: "#32cd32", - linen: "#faf0e6", - magenta: "#ff00ff", - maroon: "#800000", - mediumaquamarine: "#66cdaa", - mediumblue: "#0000cd", - mediumorchid: "#ba55d3", - mediumpurple: "#9370d8", - mediumseagreen: "#3cb371", - mediumslateblue: "#7b68ee", - mediumspringgreen: "#00fa9a", - mediumturquoise: "#48d1cc", - mediumvioletred: "#c71585", - midnightblue: "#191970", - mintcream: "#f5fffa", - mistyrose: "#ffe4e1", - moccasin: "#ffe4b5", - navajowhite: "#ffdead", - navy: "#000080", - oldlace: "#fdf5e6", - olive: "#808000", - olivedrab: "#6b8e23", - orange: "#ffa500", - orangered: "#ff4500", - orchid: "#da70d6", - palegoldenrod: "#eee8aa", - palegreen: "#98fb98", - paleturquoise: "#afeeee", - palevioletred: "#d87093", - papayawhip: "#ffefd5", - peachpuff: "#ffdab9", - peru: "#cd853f", - pink: "#ffc0cb", - plum: "#dda0dd", - powderblue: "#b0e0e6", - purple: "#800080", - rebeccapurple: "#663399", - red: "#ff0000", - rosybrown: "#bc8f8f", - royalblue: "#4169e1", - saddlebrown: "#8b4513", - salmon: "#fa8072", - sandybrown: "#f4a460", - seagreen: "#2e8b57", - seashell: "#fff5ee", - sienna: "#a0522d", - silver: "#c0c0c0", - skyblue: "#87ceeb", - slateblue: "#6a5acd", - slategray: "#708090", - snow: "#fffafa", - springgreen: "#00ff7f", - steelblue: "#4682b4", - tan: "#d2b48c", - teal: "#008080", - thistle: "#d8bfd8", - tomato: "#ff6347", - turquoise: "#40e0d0", - violet: "#ee82ee", - wheat: "#f5deb3", - white: "#ffffff", - whitesmoke: "#f5f5f5", - yellow: "#ffff00", - yellowgreen: "#9acd32", - }; - - return colors[color.toLowerCase() as keyof typeof colors] !== undefined - ? colors[color.toLowerCase() as keyof typeof colors] - : false; -} - -function computeContrastRatio(a: number[], b: number[]) { - const lum1 = computeLuminance(a[0], a[1], a[2]); - const lum2 = computeLuminance(b[0], b[1], b[2]); - const brightest = Math.max(lum1, lum2); - const darkest = Math.min(lum1, lum2); - return (brightest + 0.05) / (darkest + 0.05); -} - -function computeLuminance(r: number, g: number, b: number) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; -} - -function hexToRGB(hex: string) { - const color = hex.replace("#", ""); - return [parseInt(color.slice(0, 2), 16), parseInt(color.slice(2, 4), 16), parseInt(color.slice(4, 6), 16)]; -} - -function normalizeHexCode(hex: string | null, dark: boolean) { - if (!hex) { - return !dark ? brandColor : darkBrandColor; - } - hex = hex.replace("#", ""); - if (hex.length === 3) { - hex = hex - .split("") - .map(function (hex) { - return hex + hex; - }) - .join(""); - } - return hex; -} - -function getContrastingTextColor(bgColor: string | null, dark: boolean): string { - bgColor = bgColor == "" || bgColor == null ? (dark ? darkBrandColor : brandColor) : bgColor; - const rgb = hexToRGB(bgColor); - const whiteContrastRatio = computeContrastRatio(rgb, [255, 255, 255]); - const blackContrastRatio = computeContrastRatio(rgb, [41, 41, 41]); //#292929 - return whiteContrastRatio > blackContrastRatio ? brandTextColor : brandColor; -} - -export function isValidHexCode(val: string | null) { - if (val) { - val = val.indexOf("#") === 0 ? val : "#" + val; - const regex = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"); - return regex.test(val); - } - return false; -} - -export function fallBackHex(val: string | null, dark: boolean): string { - if (val) if (colorNameToHex(val)) return colorNameToHex(val) as string; - return dark ? darkBrandColor : brandColor; -} - -const BrandColor = ({ - lightVal = brandColor, - darkVal = darkBrandColor, -}: { - lightVal: string | undefined | null; - darkVal: string | undefined | null; -}) => { - const embedBrandingColors = useBrandColors(); - lightVal = embedBrandingColors.brandColor || lightVal; - // convert to 6 digit equivalent if 3 digit code is entered - lightVal = normalizeHexCode(lightVal, false); - darkVal = normalizeHexCode(darkVal, true); - // ensure acceptable hex-code - lightVal = isValidHexCode(lightVal) - ? lightVal?.indexOf("#") === 0 - ? lightVal - : "#" + lightVal - : fallBackHex(lightVal, false); - darkVal = isValidHexCode(darkVal) - ? darkVal?.indexOf("#") === 0 - ? darkVal - : "#" + darkVal - : fallBackHex(darkVal, true); - return ( - - - - ); -}; - -export default BrandColor; diff --git a/packages/ui/apps/SkeletonLoader.tsx b/packages/ui/apps/SkeletonLoader.tsx index cc32b02b6b..5e0d1fa1c7 100644 --- a/packages/ui/apps/SkeletonLoader.tsx +++ b/packages/ui/apps/SkeletonLoader.tsx @@ -1,5 +1,5 @@ -import { SkeletonText } from "../"; import { ShellSubHeading } from "../Shell"; +import { SkeletonText } from "../v2/core/skeleton"; /** @deprecated Use `packages/ui/v2/core/apps/SkeletonLoader.tsx` */ function SkeletonLoader({ className }: { className?: string }) { @@ -22,16 +22,16 @@ function SkeletonItem() {
  • - +
    - - + +
    - +
    • diff --git a/packages/ui/booker/DatePicker.tsx b/packages/ui/booker/DatePicker.tsx deleted file mode 100644 index 3af41fbcac..0000000000 --- a/packages/ui/booker/DatePicker.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid"; - -import dayjs, { Dayjs } from "@calcom/dayjs"; -import classNames from "@calcom/lib/classNames"; -import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns"; -import { weekdayNames } from "@calcom/lib/weekday"; -import { SkeletonText } from "@calcom/ui/skeleton"; - -export type DatePickerProps = { - /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */ - weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6; - /** Fires whenever a selected date is changed. */ - onChange: (date: Dayjs) => void; - /** Fires when the month is changed. */ - onMonthChange?: (date: Dayjs) => void; - /** which date is currently selected (not tracked from here) */ - selected?: Dayjs; - /** defaults to current date. */ - minDate?: Dayjs; - /** Furthest date selectable in the future, default = UNLIMITED */ - maxDate?: Dayjs; - /** locale, any IETF language tag, e.g. "hu-HU" - defaults to Browser settings */ - locale: string; - /** Defaults to [], which dates are not bookable. Array of valid dates like: ["2022-04-23", "2022-04-24"] */ - excludedDates?: string[]; - /** defaults to all, which dates are bookable (inverse of excludedDates) */ - includedDates?: string[]; - /** allows adding classes to the container */ - className?: string; - /** Shows a small loading spinner next to the month name */ - isLoading?: boolean; -}; - -export const Day = ({ - date, - active, - ...props -}: JSX.IntrinsicElements["button"] & { active: boolean; date: Dayjs }) => { - return ( - - ); -}; - -const Days = ({ - // minDate, - excludedDates = [], - includedDates, - browsingDate, - weekStart, - DayComponent = Day, - selected, - ...props -}: Omit & { - DayComponent?: React.FC>; - browsingDate: Dayjs; - weekStart: number; -}) => { - // Create placeholder elements for empty days in first week - const weekdayOfFirst = browsingDate.day(); - - const days: (Dayjs | null)[] = Array((weekdayOfFirst - weekStart + 7) % 7).fill(null); - for (let day = 1, dayCount = daysInMonth(browsingDate); day <= dayCount; day++) { - const date = browsingDate.set("date", day); - days.push(date); - } - - return ( - <> - {days.map((day, idx) => ( -
    - {day === null ? ( -
    - ) : props.isLoading ? ( - - ) : ( - { - props.onChange(day); - window.scrollTo({ - top: 360, - behavior: "smooth", - }); - }} - disabled={ - (includedDates && !includedDates.includes(yyyymmdd(day))) || - excludedDates.includes(yyyymmdd(day)) - } - active={selected ? yyyymmdd(selected) === yyyymmdd(day) : false} - /> - )} -
    - ))} - - ); -}; - -const DatePicker = ({ - weekStart = 0, - className, - locale, - selected, - onMonthChange, - ...passThroughProps -}: DatePickerProps & Partial>) => { - const browsingDate = passThroughProps.browsingDate || dayjs().startOf("month"); - - const changeMonth = (newMonth: number) => { - if (onMonthChange) { - onMonthChange(browsingDate.add(newMonth, "month")); - } - }; - - return ( -
    -
    - - {browsingDate ? ( - <> - - {browsingDate.format("MMMM")}, - {" "} - {browsingDate.format("YYYY")} - - ) : ( - - )} - -
    - - -
    -
    -
    - {weekdayNames(locale, weekStart, "short").map((weekDay) => ( -
    - {weekDay} -
    - ))} -
    -
    - -
    -
    - ); -}; - -export default DatePicker; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index a2af48f41a..faaeee9dc4 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -2,8 +2,6 @@ export { default as Button } from "./Button"; export { default as EmptyScreen } from "./EmptyScreen"; export { default as Select } from "./form/Select"; export { default as Loader } from "./Loader"; -export * from "./skeleton"; export { default as Switch } from "./Switch"; export { default as Tooltip } from "./Tooltip"; -export { default as BooleanToggleGroup } from "./BooleanToggleGroup"; export * from "./Icon"; diff --git a/packages/ui/skeleton/index.tsx b/packages/ui/skeleton/index.tsx deleted file mode 100644 index 733e8b43cd..0000000000 --- a/packages/ui/skeleton/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import classNames from "@calcom/lib/classNames"; - -type SkeletonBaseProps = { - /** @deprecated @see https://tailwindcss.com/docs/content-configuration#dynamic-class-names */ - width?: string; - /** @deprecated @see https://tailwindcss.com/docs/content-configuration#dynamic-class-names */ - height?: string; - className?: string; -}; - -interface AvatarProps extends SkeletonBaseProps { - // Limit this cause we don't use avatars bigger than this - /** @deprecated @see https://tailwindcss.com/docs/content-configuration#dynamic-class-names */ - width?: "2" | "3" | "4" | "5" | "6" | "8" | "12"; - /** @deprecated @see https://tailwindcss.com/docs/content-configuration#dynamic-class-names */ - height?: "2" | "3" | "4" | "5" | "6" | "8" | "12"; -} - -interface SkeletonContainer { - as?: keyof JSX.IntrinsicElements; - children?: React.ReactNode; - className?: string; -} - -/** @deprecated */ -const SkeletonAvatar: React.FC = ({ width, height, className }) => { - return ( -
    - ); -}; - -/** @deprecated */ -const SkeletonText: React.FC = ({ width = "", height = "", className = "" }) => { - className = width ? `${className} w-${width}` : className; - className = height ? `${className} h-${height}` : className; - return ( -
    - ); -}; - -/** @deprecated */ -const SkeletonButton: React.FC = ({ width, height, className }) => { - return ( - -
    - - ); -}; - -/** @deprecated */ -const SkeletonContainer: React.FC = ({ children, as, className }) => { - const Component = as || "div"; - return {children}; -}; - -export { SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };