commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

chore: fix class type and bump atoms version (#14562)

Browse Source 
* chore: fix class type and bump version

* fixup! chore: fix class type and bump version

* fixup! fixup! chore: fix class type and bump version

* fixup! Merge branch 'main' into atoms-package-version-1.0.18

* fixup! fixup! Merge branch 'main' into atoms-package-version-1.0.18
This commit is contained in:
Morgan
2024-04-13 01:21:03 +00:00
committed by GitHub
parent fd193e651d
commit 296678046c
11 changed files with 64 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/bookings/Booker/Booker.tsx
+10 -10
View File
@@ -342,10 +342,10 @@ const BookerComponent = ({
)}
<EventMeta
classNames={{
eventMetaContainer: customClassNames?.eventMetaCustomClassname?.eventMetaContainer,
eventMetaTitle: customClassNames?.eventMetaCustomClassname?.eventMetaTitle,
eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
eventMetaTimezoneSelect:
customClassNames?.eventMetaCustomClassname?.eventMetaTimezoneSelect,
customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
}}
event={event.data}
isPending={event.isPending}
@@ -378,12 +378,12 @@ const BookerComponent = ({
className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
<DatePicker
classNames={{
datePickerContainer: customClassNames?.datePickerCustomClassname?.datePickerContainer,
datePickerTitle: customClassNames?.datePickerCustomClassname?.datePickerTitle,
datePickerDays: customClassNames?.datePickerCustomClassname?.datePickerDays,
datePickerDate: customClassNames?.datePickerCustomClassname?.datePickerDate,
datePickerDatesActive: customClassNames?.datePickerCustomClassname?.datePickerDatesActive,
datePickerToggle: customClassNames?.datePickerCustomClassname?.datePickerToggle,
datePickerContainer: customClassNames?.datePickerCustomClassNames?.datePickerContainer,
datePickerTitle: customClassNames?.datePickerCustomClassNames?.datePickerTitle,
datePickerDays: customClassNames?.datePickerCustomClassNames?.datePickerDays,
datePickerDate: customClassNames?.datePickerCustomClassNames?.datePickerDate,
datePickerDatesActive: customClassNames?.datePickerCustomClassNames?.datePickerDatesActive,
datePickerToggle: customClassNames?.datePickerCustomClassNames?.datePickerToggle,
}}
event={event}
schedule={schedule}
@@ -419,7 +419,7 @@ const BookerComponent = ({
ref={timeslotsRef}
{...fadeInLeft}>
<AvailableTimeSlots
customClassnames={customClassNames?.availableTimeSlotsCustomClassname}
customClassNames={customClassNames?.availableTimeSlotsCustomClassNames}
extraDays={extraDays}
limitHeight={layout === BookerLayouts.MONTH_VIEW}
schedule={schedule?.data}
packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+12 -10
View File
@@ -20,10 +20,11 @@ type AvailableTimeSlotsProps = {
seatsPerTimeSlot?: number | null;
showAvailableSeatsCount?: boolean | null;
event: useEventReturnType;
customClassnames?: {
customClassNames?: {
availableTimeSlotsContainer?: string;
availableTimeSlotsTitle?: string;
availableTimeSlotsTimeFormatToggle: string;
availableTimeSlotsHeaderContainer?: string;
availableTimeSlotsTimeFormatToggle?: string;
availableTimes?: string;
};
};
@@ -43,7 +44,7 @@ export const AvailableTimeSlots = ({
schedule,
isLoading,
event,
customClassnames,
customClassNames,
}: AvailableTimeSlotsProps) => {
const selectedDate = useBookerStore((state) => state.selectedDate);
const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
@@ -88,16 +89,17 @@ export const AvailableTimeSlots = ({
return (
<>
<div className={classNames(`flex`, `${customClassnames?.availableTimeSlotsContainer}`)}>
<div className={classNames(`flex`, `${customClassNames?.availableTimeSlotsContainer}`)}>
{isLoading ? (
<div className="mb-3 h-8" />
) : (
slotsPerDay.length > 0 &&
slotsPerDay.map((slots) => (
<AvailableTimesHeader
customClassnames={{
availableTimeSlotTitle: customClassnames?.availableTimeSlotsTitle,
availableTimeSlotTimeFormatToggle: customClassnames?.availableTimeSlotsTimeFormatToggle,
customClassNames={{
availableTimeSlotsHeaderContainer: customClassNames?.availableTimeSlotsHeaderContainer,
availableTimeSlotsTitle: customClassNames?.availableTimeSlotsTitle,
availableTimeSlotsTimeFormatToggle: customClassNames?.availableTimeSlotsTimeFormatToggle,
}}
key={slots.date}
date={dayjs(slots.date)}
@@ -117,7 +119,7 @@ export const AvailableTimeSlots = ({
className={classNames(
limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
!limitHeight && "flex h-full w-full flex-row gap-4",
`${customClassnames?.availableTimeSlotsContainer}`
`${customClassNames?.availableTimeSlotsContainer}`
)}>
{isLoading && // Shows exact amount of days as skeleton.
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)}
@@ -126,8 +128,8 @@ export const AvailableTimeSlots = ({
slotsPerDay.map((slots) => (
<div key={slots.date} className="scroll-bar h-full w-full overflow-y-auto overflow-x-hidden">
<AvailableTimes
className={customClassnames?.availableTimeSlotsContainer}
customClassnames={customClassnames?.availableTimes}
className={customClassNames?.availableTimeSlotsContainer}
customClassNames={customClassNames?.availableTimes}
showTimeFormatToggle={!isColumnView}
onTimeSelect={onTimeSelect}
slots={slots.slots}
packages/features/bookings/Booker/types.ts
+7 -4
View File
@@ -114,11 +114,13 @@ export type WrappedBookerPropsMain = {
schedule: useScheduleForEventReturnType;
bookerLayout: UseBookerLayoutType;
verifyEmail: UseVerifyEmailReturnType;
customClassNames?: CustomClassNames;
};
export type WrappedBookerPropsForPlatform = WrappedBookerPropsMain & {
isPlatform: true;
verifyCode: undefined;
customClassNames?: CustomClassNames;
};
export type WrappedBookerPropsForWeb = WrappedBookerPropsMain & {
isPlatform: false;
@@ -133,12 +135,12 @@ export type BookerAreas = "calendar" | "timeslots" | "main" | "meta" | "header";
export type CustomClassNames = {
bookerContainer?: string;
eventMetaCustomClassname?: {
eventMetaCustomClassNames?: {
eventMetaContainer?: string;
eventMetaTitle?: string;
eventMetaTimezoneSelect?: string;
};
datePickerCustomClassname?: {
datePickerCustomClassNames?: {
datePickerContainer?: string;
datePickerTitle?: string;
datePickerDays?: string;
@@ -146,10 +148,11 @@ export type CustomClassNames = {
datePickerDatesActive?: string;
datePickerToggle?: string;
};
availableTimeSlotsCustomClassname: {
availableTimeSlotsCustomClassNames?: {
availableTimeSlotsContainer?: string;
availableTimeSlotsHeaderContainer?: string;
availableTimeSlotsTitle?: string;
availableTimeSlotsTimeFormatToggle: string;
availableTimeSlotsTimeFormatToggle?: string;
availableTimes?: string;
};
};
packages/features/bookings/components/AvailableTimes.tsx
+6 -6
View File
@@ -36,7 +36,7 @@ type AvailableTimesProps = {
className?: string;
selectedSlots?: string[];
event: useEventReturnType;
customClassnames?: string;
customClassNames?: string;
};
const SlotItem = ({
@@ -46,7 +46,7 @@ const SlotItem = ({
onTimeSelect,
showAvailableSeatsCount,
event,
customClassnames,
customClassNames,
}: {
slot: Slots[string][number];
seatsPerTimeSlot?: number | null;
@@ -54,7 +54,7 @@ const SlotItem = ({
onTimeSelect: TOnTimeSelect;
showAvailableSeatsCount?: boolean | null;
event: useEventReturnType;
customClassnames?: string;
customClassNames?: string;
}) => {
const { t } = useLocale();
@@ -126,7 +126,7 @@ const SlotItem = ({
className={classNames(
`min-h-9 hover:border-brand-default mb-2 flex h-auto w-full flex-grow flex-col justify-center py-2`,
selectedSlots?.includes(slot.time) && "border-brand-default",
`${customClassnames}`
`${customClassNames}`
)}
color="secondary">
<div className="flex items-center gap-2">
@@ -197,7 +197,7 @@ export const AvailableTimes = ({
className,
selectedSlots,
event,
customClassnames,
customClassNames,
}: AvailableTimesProps) => {
const { t } = useLocale();
@@ -228,7 +228,7 @@ export const AvailableTimes = ({
if (slot.away) return null;
return (
<SlotItem
customClassnames={customClassnames}
customClassNames={customClassNames}
key={slot.time}
onTimeSelect={onTimeSelect}
slot={slot}
packages/features/bookings/components/AvailableTimesHeader.tsx
+11 -11
View File
@@ -14,10 +14,10 @@ type AvailableTimesHeaderProps = {
date: Dayjs;
showTimeFormatToggle?: boolean;
availableMonth?: string | undefined;
customClassnames?: {
availableTimeSlotContainer?: string;
availableTimeSlotTitle?: string;
availableTimeSlotTimeFormatToggle?: string;
customClassNames?: {
availableTimeSlotsHeaderContainer?: string;
availableTimeSlotsTitle?: string;
availableTimeSlotsTimeFormatToggle?: string;
};
};
@@ -25,7 +25,7 @@ export const AvailableTimesHeader = ({
date,
showTimeFormatToggle = true,
availableMonth,
customClassnames,
customClassNames,
}: AvailableTimesHeaderProps) => {
const { t, i18n } = useLocale();
const [layout] = useBookerStore((state) => [state.layout], shallow);
@@ -38,7 +38,7 @@ export const AvailableTimesHeader = ({
className={classNames(
`dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium`,
"bg-default before:bg-default",
customClassnames?.availableTimeSlotContainer
customClassNames?.availableTimeSlotsHeaderContainer
)}>
<span
className={classNames(
@@ -47,8 +47,8 @@ export const AvailableTimesHeader = ({
)}>
<span
className={classNames(
isToday && !customClassnames?.availableTimeSlotTitle && "!text-default",
customClassnames?.availableTimeSlotTitle
isToday && !customClassNames?.availableTimeSlotsTitle && "!text-default",
customClassNames?.availableTimeSlotsTitle
)}>
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
</span>
@@ -57,8 +57,8 @@ export const AvailableTimesHeader = ({
isColumnView && isToday && "bg-brand-default text-brand ml-2",
"inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
isMonthView
? `text-default text-sm ${customClassnames?.availableTimeSlotTitle}`
: `text-xs ${customClassnames?.availableTimeSlotTitle}`
? `text-default text-sm ${customClassNames?.availableTimeSlotsTitle}`
: `text-xs ${customClassNames?.availableTimeSlotsTitle}`
)}>
{date.format("DD")}
{availableMonth && `, ${availableMonth}`}
@@ -67,7 +67,7 @@ export const AvailableTimesHeader = ({
{showTimeFormatToggle && (
<div className="ml-auto rtl:mr-auto">
<TimeFormatToggle customClassname={customClassnames?.availableTimeSlotTimeFormatToggle} />
<TimeFormatToggle customClassName={customClassNames?.availableTimeSlotsTimeFormatToggle} />
</div>
)}
</header>
packages/features/bookings/components/TimeFormatToggle.tsx
+2 -2
View File
@@ -4,14 +4,14 @@ import { ToggleGroup } from "@calcom/ui";
import { useTimePreferences } from "../lib";
export const TimeFormatToggle = ({ customClassname }: { customClassname?: string }) => {
export const TimeFormatToggle = ({ customClassName }: { customClassName?: string }) => {
const timeFormat = useTimePreferences((state) => state.timeFormat);
const setTimeFormat = useTimePreferences((state) => state.setTimeFormat);
const { t } = useLocale();
return (
<ToggleGroup
customClassnames={customClassname}
customClassNames={customClassName}
onValueChange={(newFormat) => {
if (newFormat && newFormat !== timeFormat) setTimeFormat(newFormat as TimeFormat);
}}
packages/features/calendars/DatePicker.tsx
+11 -11
View File
@@ -59,14 +59,14 @@ export const Day = ({
disabled,
away,
emoji,
customClassname,
customClassName,
...props
}: JSX.IntrinsicElements["button"] & {
active: boolean;
date: Dayjs;
away?: boolean;
emoji?: string | null;
customClassname?: {
customClassName?: {
dayContainer?: string;
dayActive?: string;
};
@@ -85,11 +85,11 @@ export const Day = ({
? "bg-brand-default text-brand"
: !disabled
? `${
!customClassname?.dayActive
!customClassName?.dayActive
? "hover:border-brand-default text-emphasis bg-emphasis"
: `hover:border-brand-default ${customClassname.dayActive}`
: `hover:border-brand-default ${customClassName.dayActive}`
}`
: `${customClassname ? "" : " text-mute"}`
: `${customClassName ? "" : " text-mute"}`
)}
data-testid="day"
data-disabled={disabled}
@@ -140,7 +140,7 @@ const Days = ({
nextMonthButton,
eventSlug,
slots,
customClassname,
customClassName,
...props
}: Omit<DatePickerProps, "locale" | "className" | "weekStart"> & {
DayComponent?: React.FC<React.ComponentProps<typeof Day>>;
@@ -148,7 +148,7 @@ const Days = ({
weekStart: number;
month: string | null;
nextMonthButton: () => void;
customClassname?: {
customClassName?: {
datePickerDate?: string;
datePickerDateActive?: string;
};
@@ -258,9 +258,9 @@ const Days = ({
</button>
) : (
<DayComponent
customClassname={{
dayContainer: customClassname?.datePickerDate,
dayActive: customClassname?.datePickerDateActive,
customClassName={{
dayContainer: customClassName?.datePickerDate,
dayActive: customClassName?.datePickerDateActive,
}}
date={day}
onClick={() => {
@@ -377,7 +377,7 @@ const DatePicker = ({
</div>
<div className="relative grid grid-cols-7 grid-rows-6 gap-1 text-center">
<Days
customClassname={{
customClassName={{
datePickerDate: customClassNames?.datePickersDates,
datePickerDateActive: customClassNames?.datePickerDatesActive,
}}
packages/platform/atoms/booker/BookerPlatformWrapper.tsx
-23
View File
@@ -34,29 +34,6 @@ import { usePublicEvent } from "../hooks/usePublicEvent";
import { useSlots } from "../hooks/useSlots";
import { AtomsWrapper } from "../src/components/atoms-wrapper";
export type CustomClassNames = {
bookerContainer?: string;
eventMetaCustomClassname?: {
eventMetaContainer?: string;
eventMetaTitle?: string;
eventMetaTimezoneSelect?: string;
};
datePickerCustomClassname?: {
datePickerContainer?: string;
datePickerTitle?: string;
datePickerDays?: string;
datePickerDate?: string;
datePickerDatesActive?: string;
datePickerToggle?: string;
};
availableTimeSlotsCustomClassname?: {
availableTimeSlotsContainer?: string;
availableTimeSlotsTitle?: string;
availableTimeSlotsTimeFormatToggle?: string;
availableTimes?: string;
};
};
type BookerPlatformWrapperAtomProps = Omit<BookerProps, "entity"> & {
rescheduleUid?: string;
bookingUid?: string;
packages/platform/atoms/booker/BookerWebWrapper.tsx
+1 -3
View File
@@ -21,9 +21,7 @@ import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
import { BookerLayouts } from "@calcom/prisma/zod-utils";
import type { CustomClassNames } from "./BookerPlatformWrapper";
type BookerWebWrapperAtomProps = BookerProps & { customClassNames?: CustomClassNames };
type BookerWebWrapperAtomProps = BookerProps;
export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => {
const router = useRouter();
packages/platform/atoms/package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"type": "module",
"description": "Customizable UI components to integrate scheduling into your product.",
"authors": "Cal.com, Inc.",
"version": "1.0.14",
"version": "1.0.18",
"scripts": {
"dev": "yarn vite build --watch & npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify --watch",
"build": "yarn vite build && npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify",
packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+3 -3
View File
@@ -36,9 +36,9 @@ export const ToggleGroup = ({
options,
onValueChange,
isFullWidth,
customClassnames,
customClassNames,
...props
}: ToggleGroupProps & { customClassnames?: string }) => {
}: ToggleGroupProps & { customClassNames?: string }) => {
return (
<>
<RadixToggleGroup.Root
@@ -49,7 +49,7 @@ export const ToggleGroup = ({
`min-h-9 border-default bg-default relative inline-flex gap-0.5 rounded-md border p-1 rtl:flex-row-reverse`,
props.className,
isFullWidth && "w-full",
customClassnames
customClassNames
)}>
{options.map((option) => (
<OptionalTooltipWrapper key={option.value} tooltipText={option.tooltip}>