From f8f038c5e9dab24a0952706144c4baee172c7fbf Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:45:16 +0100 Subject: [PATCH] stack-troubleshooter-border-color-support (#11907) Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> --- .../Booker/components/LargeCalendar.tsx | 4 +- .../calendars/weeklyview/_storybookData.ts | 54 ++++++++-------- .../weeklyview/components/event/Event.tsx | 61 +++++++++++++++---- .../weeklyview/components/event/EventList.tsx | 2 +- .../calendars/weeklyview/types/events.ts | 7 ++- 5 files changed, 81 insertions(+), 47 deletions(-) diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx index b9684912bc..86fd16996a 100644 --- a/packages/features/bookings/Booker/components/LargeCalendar.tsx +++ b/packages/features/bookings/Booker/components/LargeCalendar.tsx @@ -57,7 +57,9 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => { start: dayjs(event.start).toDate(), end: dayjs(event.end).toDate(), title: "Busy", - status: "ACCEPTED", + options: { + status: "ACCEPTED", + }, } as CalendarEvent; }); }, [overlayEvents, displayOverlay]); diff --git a/packages/features/calendars/weeklyview/_storybookData.ts b/packages/features/calendars/weeklyview/_storybookData.ts index 9ef919c32a..13c816d6aa 100644 --- a/packages/features/calendars/weeklyview/_storybookData.ts +++ b/packages/features/calendars/weeklyview/_storybookData.ts @@ -1,7 +1,7 @@ import dayjs from "@calcom/dayjs"; -import { TimeRange } from "@calcom/types/schedule"; +import type { TimeRange } from "@calcom/types/schedule"; -import { CalendarEvent } from "./types/events"; +import type { CalendarEvent } from "./types/events"; const startDate = dayjs().set("hour", 11).set("minute", 0); @@ -11,63 +11,57 @@ export const events: CalendarEvent[] = [ title: "Event 1", start: startDate.add(10, "minutes").toDate(), end: startDate.add(45, "minutes").toDate(), - allDay: false, + options: { + allDay: false, + borderColor: "#ff0000", + status: "ACCEPTED", + }, source: "Booking", - status: "ACCEPTED", }, { id: 2, title: "Event 2", start: startDate.add(1, "day").toDate(), end: startDate.add(1, "day").add(30, "minutes").toDate(), - allDay: false, source: "Booking", - status: "ACCEPTED", + options: { + status: "ACCEPTED", + allDay: false, + }, }, { id: 2, title: "Event 3", start: startDate.add(2, "day").toDate(), end: startDate.add(2, "day").add(60, "minutes").toDate(), - allDay: false, source: "Booking", - status: "ACCEPTED", + options: { + status: "PENDING", + borderColor: "#ff0000", + allDay: false, + }, }, { id: 3, title: "Event 4", start: startDate.add(3, "day").toDate(), end: startDate.add(3, "day").add(2, "hour").add(30, "minutes").toDate(), - allDay: false, source: "Booking", - status: "ACCEPTED", + options: { + status: "ACCEPTED", + allDay: false, + }, }, { id: 5, title: "Event 4 Overlap", start: startDate.add(3, "day").add(30, "minutes").toDate(), end: startDate.add(3, "day").add(2, "hour").add(45, "minutes").toDate(), - allDay: false, source: "Booking", - status: "ACCEPTED", - }, - { - id: 4, - title: "Event 1 Overlap", - start: startDate.toDate(), - end: startDate.add(30, "minutes").toDate(), - allDay: false, - source: "Booking", - status: "ACCEPTED", - }, - { - id: 6, - title: "Event 1 Overlap Two", - start: startDate.toDate(), - end: startDate.add(30, "minutes").toDate(), - allDay: false, - source: "Booking", - status: "ACCEPTED", + options: { + status: "ACCEPTED", + allDay: false, + }, }, ]; diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx index 2b562798db..c997e9a16d 100644 --- a/packages/features/calendars/weeklyview/components/event/Event.tsx +++ b/packages/features/calendars/weeklyview/components/event/Event.tsx @@ -1,5 +1,6 @@ +import { cva } from "class-variance-authority"; + import dayjs from "@calcom/dayjs"; -import { classNames } from "@calcom/lib"; import type { CalendarEvent } from "../../types/events"; @@ -11,6 +12,35 @@ type EventProps = { disabled?: boolean; }; +const eventClasses = cva( + "group flex h-full w-full flex-col overflow-y-auto rounded-[4px] px-[6px] py-1 text-xs font-semibold leading-5 ", + { + variants: { + status: { + ACCEPTED: "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900", + PENDING: "bg-default text-emphasis border-[1px] border-dashed border-gray-900", + REJECTED: "", + CANCELLED: "", + }, + disabled: { + true: "hover:cursor-default", + false: "hover:cursor-pointer", + }, + selected: { + true: "bg-inverted text-inverted border-[1px] border-transparent", + false: "", + }, + borderColor: { + ACCEPTED: "border-gray-900", + PENDING: "border-gray-900", + REJECTED: "border-gray-900", + CANCELLED: "border-gray-900", + custom: "", + }, + }, + } +); + export function Event({ event, currentlySelectedEventId, @@ -19,27 +49,32 @@ export function Event({ onEventClick, }: EventProps) { const selected = currentlySelectedEventId === event.id; + const { options } = event; + + const borderColor = options?.borderColor ? "custom" : options?.status; + + const styles = options?.borderColor + ? { + borderColor: options?.borderColor, + } + : {}; const Component = onEventClick ? "button" : "div"; return ( onEventClick?.(event)} // Note this is not the button event. It is the calendar event. - className={classNames( - "group flex h-full w-full flex-col overflow-y-auto rounded-[4px] px-[6px] py-1 text-xs font-semibold leading-5 ", - event.status === "ACCEPTED" && - !selected && - "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900", - event.status === "PENDING" && - !selected && - "bg-default text-emphasis border-[1px] border-dashed border-gray-900", - selected && "bg-inverted text-inverted border-[1px] border-transparent", - disabled ? "hover:cursor-default" : "hover:cursor-pointer" - )}> + className={eventClasses({ + status: options?.status, + disabled, + selected, + borderColor, + })} + style={styles}>
{event.title}
- {eventDuration >= 30 && ( + {eventDuration > 30 && (

{dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}

diff --git a/packages/features/calendars/weeklyview/components/event/EventList.tsx b/packages/features/calendars/weeklyview/components/event/EventList.tsx index 5e3c6ea62f..57cbb47e8c 100644 --- a/packages/features/calendars/weeklyview/components/event/EventList.tsx +++ b/packages/features/calendars/weeklyview/components/event/EventList.tsx @@ -23,7 +23,7 @@ export function EventList({ day }: Props) { <> {events .filter((event) => { - return dayjs(event.start).isSame(day, "day") && !event.allDay; // Filter all events that are not allDay and that are on the current day + return dayjs(event.start).isSame(day, "day") && !event.options?.allDay; // Filter all events that are not allDay and that are on the current day }) .map((event, idx, eventsArray) => { let width = 90; diff --git a/packages/features/calendars/weeklyview/types/events.ts b/packages/features/calendars/weeklyview/types/events.ts index 816a539fb7..bade4cf0c4 100644 --- a/packages/features/calendars/weeklyview/types/events.ts +++ b/packages/features/calendars/weeklyview/types/events.ts @@ -5,7 +5,10 @@ export interface CalendarEvent { title: string; start: Date | string; // You can pass in a string from DB since we use dayjs for the dates. end: Date; - allDay?: boolean; source?: string; - status?: BookingStatus; + options?: { + status?: BookingStatus; + allDay?: boolean; + borderColor?: string; + }; }