Compare commits
42 Commits
main
...
event-type
Author | SHA1 | Date | |
---|---|---|---|
5309a1ef68 | |||
3181ec2caa | |||
e7247f0c65 | |||
8fece41be6 | |||
cdcae40c7a | |||
81e9323fd9 | |||
a74e5f2755 | |||
8fc409f6c7 | |||
7896c9385d | |||
4657a12066 | |||
1b6414b660 | |||
5f8b99d3bb | |||
652966b3f1 | |||
c737422ce3 | |||
681d20c0dc | |||
4bc4b43a92 | |||
8e271b6620 | |||
1f49f4546c | |||
8646214a9a | |||
c2bbe6023b | |||
cf53d04455 | |||
2e912078a4 | |||
57d1de4709 | |||
d1c2fd2c9c | |||
1bdb75a363 | |||
c517d4dacd | |||
ce98f69ca4 | |||
6e28c0fc1f | |||
4cf3e163bd | |||
2d27284f0e | |||
5354615154 | |||
fc0c7dc05b | |||
11afe35bdc | |||
5543e04876 | |||
f4bcb783e7 | |||
4e0b978aa7 | |||
3f2852f5fa | |||
be5904941b | |||
95c4b59dfd | |||
b394975199 | |||
d0960ff55c | |||
a300a565e4 |
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.cjs",
|
||||
"css": "globals.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,73 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||
import type { EventTypeGroup } from "event-type-list";
|
||||
import { Copy, Code, Trash } from "lucide-react";
|
||||
|
||||
import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed";
|
||||
|
||||
type DesktopDropdownContentProps = {
|
||||
group: EventTypeGroup;
|
||||
embedLink: string;
|
||||
isReadOnly: boolean;
|
||||
isManagedEventType: boolean;
|
||||
isChildrenManagedEventType: boolean;
|
||||
id: number;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
export function DesktopDropdownContent({
|
||||
group,
|
||||
embedLink,
|
||||
isReadOnly,
|
||||
id,
|
||||
isManagedEventType,
|
||||
isChildrenManagedEventType,
|
||||
onEdit,
|
||||
onDuplicate,
|
||||
onDelete,
|
||||
}: DesktopDropdownContentProps) {
|
||||
return (
|
||||
<>
|
||||
{!isReadOnly && (
|
||||
<DropdownMenuItem>
|
||||
<Button type="button" data-testid={`event-type-edit-${id}`} onClick={onEdit}>
|
||||
Edit
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!isManagedEventType && !isChildrenManagedEventType && (
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button type="button" data-testid={`event-type-duplicate-${id}`} onClick={onDuplicate}>
|
||||
<Copy />
|
||||
Duplicate
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!isManagedEventType && (
|
||||
<DropdownMenuItem>
|
||||
<EventTypeEmbedButton
|
||||
className="w-full rounded-none"
|
||||
eventId={id}
|
||||
type="button"
|
||||
StartIcon={Code}
|
||||
embedUrl={encodeURIComponent(embedLink)}>
|
||||
Embed
|
||||
</EventTypeEmbedButton>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
|
||||
!isChildrenManagedEventType && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<Button variant="destructive" onClick={onDelete} className="w-full rounded-none">
|
||||
<Trash /> Delete
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function EventTypeDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
content,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: () => void;
|
||||
title: string;
|
||||
description: string;
|
||||
content?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
{!!content && content}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,91 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "@/components/ui/dropdown-menu";
|
||||
import type { EventTypeGroup } from "event-type-list";
|
||||
import { DesktopDropdownContent } from "event-type-list/components/controls/DesktopDropdownContent";
|
||||
import { MobileDropdownContent } from "event-type-list/components/controls/MobileDropdownContent";
|
||||
import { MoreHorizontal } from "lucide-react";
|
||||
|
||||
type DesktopContent = {
|
||||
variant: "desktop";
|
||||
group: EventTypeGroup;
|
||||
embedLink: string;
|
||||
isReadOnly: boolean;
|
||||
isManagedEventType: boolean;
|
||||
isChildrenManagedEventType: boolean;
|
||||
id: number;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
type MobileContent = {
|
||||
variant: "mobile";
|
||||
group: EventTypeGroup;
|
||||
isManagedEventType: boolean;
|
||||
isChildrenManagedEventType: boolean;
|
||||
isNativeShare: boolean;
|
||||
readOnly: boolean;
|
||||
id: number;
|
||||
onPreview: () => void;
|
||||
onCopy: () => void;
|
||||
onShare: () => void;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
// EventTypeDropdownProps is a discriminated union
|
||||
// where discriminant is the variant prop
|
||||
type EventTypeDropdownProps = DesktopContent | MobileContent;
|
||||
|
||||
// Two more separate components one for desktop content for dropdown and other for mobile dropdown content
|
||||
export function EventTypeDropdown(props: EventTypeDropdownProps) {
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild data-testid={`event-type-options-${id}`}>
|
||||
<Button
|
||||
type="button"
|
||||
className={`${
|
||||
props.variant === "desktop"
|
||||
? "bg-secondary text-secondary ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
|
||||
: "bg-secondary text-secondary"
|
||||
}`}>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{props.variant === "desktop" && (
|
||||
<DesktopDropdownContent
|
||||
group={props.group}
|
||||
embedLink={props.embedLink}
|
||||
isReadOnly={props.isReadOnly}
|
||||
isManagedEventType={props.isManagedEventType}
|
||||
isChildrenManagedEventType={props.isChildrenManagedEventType}
|
||||
id={props.id}
|
||||
onEdit={props.onEdit}
|
||||
onDuplicate={props.onDuplicate}
|
||||
onDelete={props.onDelete}
|
||||
/>
|
||||
)}
|
||||
{props.variant === "mobile" && (
|
||||
<MobileDropdownContent
|
||||
group={props.group}
|
||||
isManagedEventType={props.isManagedEventType}
|
||||
isChildrenManagedEventType={props.isChildrenManagedEventType}
|
||||
isNativeShare={props.isNativeShare}
|
||||
readOnly={props.readOnly}
|
||||
id={props.id}
|
||||
onPreview={props.onPreview}
|
||||
onCopy={props.onCopy}
|
||||
onShare={props.onShare}
|
||||
onEdit={props.onEdit}
|
||||
onDuplicate={props.onDuplicate}
|
||||
onDelete={props.onDelete}
|
||||
/>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,117 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import type { EventTypeGroup } from "event-type-list";
|
||||
import { ExternalLink, Upload, Edit, Copy, Trash } from "lucide-react";
|
||||
|
||||
import { Skeleton, Label } from "@calcom/ui";
|
||||
|
||||
type MobileDropdownContentProps = {
|
||||
group: EventTypeGroup;
|
||||
isManagedEventType: boolean;
|
||||
isChildrenManagedEventType: boolean;
|
||||
isNativeShare: boolean;
|
||||
isHidden: boolean;
|
||||
readOnly: boolean;
|
||||
id: number;
|
||||
onPreview: () => void;
|
||||
onCopy: () => void;
|
||||
onShare: () => void;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onDelete: () => void;
|
||||
onMutate: () => void;
|
||||
};
|
||||
|
||||
export function MobileDropdownContent({
|
||||
group,
|
||||
isManagedEventType,
|
||||
isChildrenManagedEventType,
|
||||
isNativeShare,
|
||||
isHidden,
|
||||
readOnly,
|
||||
id,
|
||||
onPreview,
|
||||
onCopy,
|
||||
onShare,
|
||||
onEdit,
|
||||
onDuplicate,
|
||||
onDelete,
|
||||
onMutate,
|
||||
}: MobileDropdownContentProps) {
|
||||
return (
|
||||
<>
|
||||
{isManagedEventType && (
|
||||
<>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
onClick={onPreview}
|
||||
data-testid="preview-link-button"
|
||||
type="button"
|
||||
className="w-full rounded-none">
|
||||
<ExternalLink />
|
||||
Preview
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
data-testid={`event-type-duplicate-${id}`}
|
||||
type="button"
|
||||
className="w-full rounded-none text-left"
|
||||
onClick={onCopy}>
|
||||
Copy link to event
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{isNativeShare ? (
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
data-testid={`event-type-duplicate-${id}`}
|
||||
type="button"
|
||||
className="w-full rounded-none"
|
||||
onClick={onShare}>
|
||||
<Upload /> Share
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
{readOnly && (
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button type="button" className="w-full rounded-none" onClick={onEdit}>
|
||||
<Edit /> Edit
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!isManagedEventType && !isChildrenManagedEventType && (
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button data-testid={`event-type-duplicate-${id}`} onClick={onDuplicate}>
|
||||
<Copy />
|
||||
Duplicate
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
|
||||
!isChildrenManagedEventType && (
|
||||
<>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button variant="destructive" className="w-full rounded-none" onClick={onDelete}>
|
||||
<Trash /> Delete
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
{!isManagedEventType && (
|
||||
<div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
|
||||
<Skeleton
|
||||
as={Label}
|
||||
htmlFor="hiddenSwitch"
|
||||
className="mt-2 inline cursor-pointer self-center pr-2 ">
|
||||
{isHidden ? "Show on profile" : "Hide from profile"}
|
||||
</Skeleton>
|
||||
<Switch id="hiddenSwitch" name="Hidden" checked={isHidden} onCheckedChange={onMutate} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function EventTypeTooltip({
|
||||
trigger,
|
||||
content,
|
||||
}: {
|
||||
trigger: ReactNode | string;
|
||||
content: ReactNode | string;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
|
||||
<TooltipContent>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { EmptyScreen } from "event-type-list/components/empty-screen";
|
||||
import { LinkIcon } from "lucide-react";
|
||||
|
||||
export function CreateFirstEventTypeView({ slug }: { slug: string }) {
|
||||
return (
|
||||
<>
|
||||
<EmptyScreen
|
||||
Icon={LinkIcon}
|
||||
className="mb-16"
|
||||
headline="Create your first event type"
|
||||
description="Event types enable you to share links that show available times on your calendar and allow people to make bookings with you."
|
||||
buttonRaw={
|
||||
<Button>
|
||||
<a href={`?dialog=new&eventPage=${slug}`}>Create</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { EmptyScreen } from "event-type-list/components/empty-screen";
|
||||
|
||||
export function EmptyEventTypeList({ group }: { group: any }) {
|
||||
return (
|
||||
<>
|
||||
<EmptyScreen
|
||||
headline="This team has no event types"
|
||||
buttonRaw={
|
||||
<Button type="button" className="mt-5">
|
||||
<a href={`?dialog=new&eventPage=${group.profile.slug}&teamId=${group.teamId}`}>Create</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,66 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { LucideIcon as IconType } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import React from "react";
|
||||
|
||||
import type { SVGComponent } from "@calcom/types/SVGComponent";
|
||||
|
||||
type EmptyScreenProps = {
|
||||
Icon?: SVGComponent | IconType;
|
||||
avatar?: React.ReactElement;
|
||||
headline: string | React.ReactElement;
|
||||
description?: string | React.ReactElement;
|
||||
buttonText?: string;
|
||||
buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||
buttonRaw?: ReactNode; // Used incase you want to provide your own button.
|
||||
border?: boolean;
|
||||
dashedBorder?: boolean;
|
||||
};
|
||||
|
||||
export function EmptyScreen({
|
||||
Icon,
|
||||
avatar,
|
||||
headline,
|
||||
description,
|
||||
buttonText,
|
||||
buttonOnClick,
|
||||
buttonRaw,
|
||||
border = true,
|
||||
dashedBorder = true,
|
||||
className,
|
||||
}: EmptyScreenProps & React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
data-testid="empty-screen"
|
||||
className={cn(
|
||||
"flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
|
||||
border && "border-subtle border",
|
||||
dashedBorder && "border-dashed",
|
||||
className
|
||||
)}>
|
||||
{!avatar ? null : (
|
||||
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
|
||||
)}
|
||||
{!Icon ? null : (
|
||||
<div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ">
|
||||
<Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex max-w-[420px] flex-col items-center">
|
||||
<h2 className={cn("text-semibold font-cal text-emphasis text-center text-xl", !!Icon && "mt-6")}>
|
||||
{headline}
|
||||
</h2>
|
||||
{!!description && (
|
||||
<div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
{!!buttonOnClick && !!buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
|
||||
{buttonRaw}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,146 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Price } from "event-type-list/components/price";
|
||||
import { Clock, Users, Lock, RefreshCw, Clipboard, Plus, User } from "lucide-react";
|
||||
import type { Prisma } from "prisma/client";
|
||||
import { useMemo } from "react";
|
||||
import type { z } from "zod";
|
||||
|
||||
import { getPriceIcon } from "@calcom/features/bookings/components/event-meta";
|
||||
import { parseRecurringEvent } from "@calcom/lib";
|
||||
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
|
||||
import type { baseEventTypeSelect } from "@calcom/prisma";
|
||||
import { SchedulingType } from "@calcom/prisma/enums";
|
||||
import type { EventTypeModel } from "@calcom/prisma/zod";
|
||||
|
||||
type EventTypeDescriptionProps = {
|
||||
eventType: Pick<
|
||||
z.infer<typeof EventTypeModel>,
|
||||
Exclude<keyof typeof baseEventTypeSelect, "recurringEvent"> | "metadata"
|
||||
> & {
|
||||
descriptionAsSafeHTML?: string | null;
|
||||
recurringEvent: Prisma.JsonValue;
|
||||
seatsPerTimeSlot?: number;
|
||||
};
|
||||
className?: string;
|
||||
shortenDescription?: boolean;
|
||||
isPublic?: boolean;
|
||||
};
|
||||
|
||||
export function EventTypeDescription({
|
||||
eventType,
|
||||
className,
|
||||
shortenDescription,
|
||||
isPublic,
|
||||
}: EventTypeDescriptionProps) {
|
||||
const recurringEvent = useMemo(
|
||||
() => parseRecurringEvent(eventType.recurringEvent),
|
||||
[eventType.recurringEvent]
|
||||
);
|
||||
const paymentAppData = getPaymentAppData(eventType);
|
||||
const priceIcon = getPriceIcon(paymentAppData.currency);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn("text-subtle", className)}>
|
||||
{eventType.description && (
|
||||
<div
|
||||
className={cn(
|
||||
"text-subtle line-clamp-3 break-words py-1 text-sm sm:max-w-[650px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
|
||||
shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
|
||||
)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: eventType.descriptionAsSafeHTML || "",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ul className="mt-2 flex flex-wrap gap-x-2 gap-y-1">
|
||||
{eventType.metadata?.multipleDuration ? (
|
||||
eventType.metadata.multipleDuration.map((dur, idx) => (
|
||||
<li key={idx}>
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Clock />
|
||||
{dur}m
|
||||
</Badge>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Clock />
|
||||
{eventType.length}m
|
||||
</Badge>
|
||||
</li>
|
||||
)}
|
||||
{eventType.schedulingType && eventType.schedulingType !== SchedulingType.MANAGED && (
|
||||
<li>
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Users />
|
||||
{eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"}
|
||||
{eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"}
|
||||
</Badge>
|
||||
</li>
|
||||
)}
|
||||
{eventType.metadata?.managedEventConfig && !isPublic && (
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Lock />
|
||||
Managed
|
||||
</Badge>
|
||||
)}
|
||||
{recurringEvent?.count && recurringEvent.count > 0 && (
|
||||
<li className="hidden xl:block">
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<RefreshCw />
|
||||
Repeats up to{" "}
|
||||
{recurringEvent.count === 1
|
||||
? `${recurringEvent.count} time`
|
||||
: `${recurringEvent.count} times`}
|
||||
</Badge>
|
||||
</li>
|
||||
)}
|
||||
{paymentAppData.enabled && (
|
||||
<li>
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<>{priceIcon}</>
|
||||
<Price
|
||||
currency={paymentAppData.currency}
|
||||
price={paymentAppData.price}
|
||||
displayAlternateSymbol={false}
|
||||
/>
|
||||
</Badge>
|
||||
</li>
|
||||
)}
|
||||
{eventType.requiresConfirmation && (
|
||||
<li className="hidden xl:block">
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Clipboard />
|
||||
{eventType.metadata?.requiresConfirmationThreshold
|
||||
? "May require confirmation"
|
||||
: "Requires confirmation"}
|
||||
</Badge>
|
||||
</li>
|
||||
)}
|
||||
{/* TODO: Maybe add a tool tip to this? */}
|
||||
{eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
|
||||
<li className="block xl:hidden">
|
||||
<Badge variant="default" className="rounded-sm">
|
||||
<Plus />
|
||||
<p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
|
||||
</Badge>
|
||||
</li>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{eventType?.seatsPerTimeSlot ? (
|
||||
<li>
|
||||
<Badge variant="default">
|
||||
<User />
|
||||
<p>{eventType.seatsPerTimeSlot} seats</p>
|
||||
</Badge>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,243 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import type { EventTypeGroup } from "event-type-list";
|
||||
import { EventTypeDialog } from "event-type-list/components/controls/Dialog";
|
||||
import { EventTypeDropdown } from "event-type-list/components/controls/Dropdown";
|
||||
import { EventTypeTooltip } from "event-type-list/components/controls/Tooltip";
|
||||
import { EventTypeDescription } from "event-type-list/components/event-type-description";
|
||||
import { ExternalLink, LinkIcon } from "lucide-react";
|
||||
import { memo, useState } from "react";
|
||||
|
||||
import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
|
||||
import { CAL_URL } from "@calcom/lib/constants";
|
||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { SchedulingType } from "@calcom/prisma/enums";
|
||||
import { ArrowButton, AvatarGroup, ButtonGroup } from "@calcom/ui";
|
||||
|
||||
type EventType = EventTypeGroup["eventTypes"][number];
|
||||
|
||||
type EventTypeProps = {
|
||||
group: EventTypeGroup;
|
||||
type: EventType;
|
||||
readOnly: boolean;
|
||||
index: number;
|
||||
firstItem: EventType;
|
||||
lastItem: EventType;
|
||||
moveEventType: (index: number, increment: 1 | -1) => void;
|
||||
onMutate: () => void;
|
||||
onCopy: () => void;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onDelete: () => void;
|
||||
onPreview: () => void;
|
||||
};
|
||||
|
||||
const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGroup; readOnly: boolean }) => {
|
||||
const content = () => (
|
||||
<div>
|
||||
<span
|
||||
className="text-default font-semibold ltr:mr-1 rtl:ml-1"
|
||||
data-testid={`event-type-title-${type.id}`}>
|
||||
{type.title}
|
||||
</span>
|
||||
{group.profile.slug ? (
|
||||
<small
|
||||
className="text-subtle hidden font-normal leading-4 sm:inline"
|
||||
data-testid={`event-type-slug-${type.id}`}>
|
||||
{`/${type.schedulingType !== SchedulingType.MANAGED ? group.profile.slug : "username"}/${
|
||||
type.slug
|
||||
}`}
|
||||
</small>
|
||||
) : null}
|
||||
{readOnly && <Badge className="ml-2">Readonly</Badge>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return readOnly ? (
|
||||
<div className="flex-1 overflow-hidden pr-4 text-sm">
|
||||
{content()}
|
||||
<EventTypeDescription
|
||||
// @ts-expect-error FIXME: We have a type mismatch here @hariombalhara @sean-brydon
|
||||
eventType={type}
|
||||
shortenDescription
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<a className="text-s flex-1 overflow-hidden pr-4" href={`/event-types/${type.id}?tabName=setup`}>
|
||||
<div>
|
||||
<span
|
||||
className="text-default font-semibold ltr:mr-1 rtl:ml-1"
|
||||
data-testid={`event-type-title-${type.id}`}>
|
||||
{type.title}
|
||||
</span>
|
||||
{group.profile.slug ? (
|
||||
<small
|
||||
className="text-subtle hidden font-normal leading-4 sm:inline"
|
||||
data-testid={`event-type-slug-${type.id}`}>
|
||||
{`/${group.profile.slug}/${type.slug}`}
|
||||
</small>
|
||||
) : null}
|
||||
{readOnly && <Badge className="ml-2">Readonly</Badge>}
|
||||
</div>
|
||||
<EventTypeDescription
|
||||
// @ts-expect-error FIXME: We have a type mismatch here @hariombalhara @sean-brydon
|
||||
eventType={{ ...type, descriptionAsSafeHTML: type.safeDescription }}
|
||||
shortenDescription
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const MemoizedItem = memo(Item);
|
||||
|
||||
export function EventType({
|
||||
group,
|
||||
type,
|
||||
readOnly,
|
||||
index,
|
||||
firstItem,
|
||||
lastItem,
|
||||
moveEventType,
|
||||
onMutate,
|
||||
onCopy,
|
||||
onEdit,
|
||||
onDuplicate,
|
||||
onDelete,
|
||||
onPreview,
|
||||
}: EventTypeProps) {
|
||||
const isManagedEventType = type.schedulingType === SchedulingType.MANAGED;
|
||||
const embedLink = `${group.profile.slug}/${type.slug}`;
|
||||
const isChildrenManagedEventType =
|
||||
type.metadata?.managedEventConfig !== undefined && type.schedulingType !== SchedulingType.MANAGED;
|
||||
const orgBranding = useOrgBranding();
|
||||
const calLink = `${orgBranding?.fullDomain ?? CAL_URL}/${embedLink}`;
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<li key={index}>
|
||||
<div className="hover:bg-muted flex w-full items-center justify-between">
|
||||
<div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
|
||||
{!(firstItem && firstItem.id === type.id) && (
|
||||
<ArrowButton arrowDirection="up" onClick={() => moveEventType(index, -1)} />
|
||||
)}
|
||||
{!(lastItem && lastItem.id === type.id) && (
|
||||
<ArrowButton arrowDirection="down" onClick={() => moveEventType(index, 1)} />
|
||||
)}
|
||||
<MemoizedItem type={type} group={group} readOnly={readOnly} />
|
||||
<div className="mt-4 hidden sm:mt-0 sm:flex">
|
||||
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
|
||||
{type.team && !isManagedEventType && (
|
||||
<AvatarGroup
|
||||
className="relative right-3 top-1"
|
||||
size="sm"
|
||||
truncateAfter={4}
|
||||
items={
|
||||
type?.users
|
||||
? type.users.map((organizer: { name: string | null; username: string | null }) => ({
|
||||
alt: organizer.name || "",
|
||||
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${organizer.username}/avatar.png`,
|
||||
title: organizer.name || "",
|
||||
}))
|
||||
: []
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{isManagedEventType && type?.children && type.children?.length > 0 && (
|
||||
<AvatarGroup
|
||||
className="relative right-3 top-1"
|
||||
size="sm"
|
||||
truncateAfter={4}
|
||||
items={type?.children
|
||||
.flatMap((ch) => ch.users)
|
||||
.map((user: Pick<User, "name" | "username">) => ({
|
||||
alt: user.name || "",
|
||||
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
|
||||
title: user.name || "",
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
|
||||
{isManagedEventType && (
|
||||
<>
|
||||
{type.hidden && <Badge>Hidden</Badge>}
|
||||
<EventTypeTooltip
|
||||
trigger={
|
||||
<div className="self-center rounded-md p-2">
|
||||
<Switch name="hidden" checked={!type.hidden} onCheckedChange={onMutate} />
|
||||
</div>
|
||||
}
|
||||
content={type.hidden ? "Show on profile" : "Hide from profile"}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<ButtonGroup combined>
|
||||
{!isManagedEventType && (
|
||||
<>
|
||||
<EventTypeTooltip
|
||||
trigger={
|
||||
<Button
|
||||
data-testid="preview-link-button"
|
||||
className="bg-secondary color-secondary"
|
||||
onClick={onPreview}>
|
||||
<ExternalLink />
|
||||
</Button>
|
||||
}
|
||||
content="Preview"
|
||||
/>
|
||||
<EventTypeTooltip
|
||||
trigger={
|
||||
<Button className="bg-secondary color-secondary" onClick={onCopy}>
|
||||
<LinkIcon />
|
||||
</Button>
|
||||
}
|
||||
content="Copy link to event"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{/* Dropdown for desktop view */}
|
||||
<EventTypeDropdown
|
||||
variant="desktop"
|
||||
group={group}
|
||||
isReadOnly={readOnly}
|
||||
isManagedEventType={isManagedEventType}
|
||||
isChildrenManagedEventType={isChildrenManagedEventType}
|
||||
embedLink={embedLink}
|
||||
id={type.id}
|
||||
onEdit={onEdit}
|
||||
onDuplicate={onDuplicate}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EventTypeDialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
title="Delete event type?"
|
||||
description="Anyone who you've shared this link with will no longer be able to book using it."
|
||||
content={
|
||||
<div className="flex items-center justify-end">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
variant="outline"
|
||||
className="border-none">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// Add appropriate event handler to delete given event type
|
||||
}}>
|
||||
Yes, delete
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
import { fiat } from "@getalby/lightning-tools";
|
||||
import React from "react";
|
||||
|
||||
import { Tooltip } from "@calcom/ui";
|
||||
import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
|
||||
|
||||
type AlbyPriceComponentProps = {
|
||||
displaySymbol: boolean;
|
||||
price: number;
|
||||
formattedPrice: string;
|
||||
};
|
||||
|
||||
export default function AlbyPriceComponent({
|
||||
displaySymbol,
|
||||
price,
|
||||
formattedPrice,
|
||||
}: AlbyPriceComponentProps) {
|
||||
const [fiatValue, setFiatValue] = React.useState<string>("loading...");
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
const unformattedFiatValue = await fiat.getFiatValue({ satoshi: price, currency: "USD" });
|
||||
setFiatValue(`$${unformattedFiatValue.toFixed(2)}`);
|
||||
})();
|
||||
}, [price]);
|
||||
|
||||
return (
|
||||
<Tooltip content={fiatValue}>
|
||||
<div className="inline-flex items-center justify-center">
|
||||
{displaySymbol && <SatSymbol className="h-4 w-4" />}
|
||||
{formattedPrice}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import { lazy, Suspense } from "react";
|
||||
|
||||
import { formatPrice } from "@calcom/lib/price";
|
||||
|
||||
type EventPrice = { currency: string; price: number; displayAlternateSymbol?: boolean };
|
||||
|
||||
const AlbyPriceComponent = lazy(() => import("./AlbyPriceComponent"));
|
||||
|
||||
export function Price({ price, currency, displayAlternateSymbol = true }: EventPrice) {
|
||||
const formattedPrice = formatPrice(price, currency);
|
||||
|
||||
if (price === 0) return null;
|
||||
|
||||
return currency !== "BTC" ? (
|
||||
<>{formattedPrice}</>
|
||||
) : (
|
||||
<Suspense>
|
||||
<AlbyPriceComponent
|
||||
displaySymbol={displayAlternateSymbol}
|
||||
price={price}
|
||||
formattedPrice={formattedPrice}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,2 @@
|
|||
export { EventType } from "./components/event-type/index";
|
||||
export { EventTypeList } from "./index";
|
|
@ -0,0 +1,161 @@
|
|||
import { useApiKey } from "cal-provider";
|
||||
import { CreateFirstEventTypeView } from "event-type-list/components/empty-screen/createFirstEventType";
|
||||
import { EmptyEventTypeList } from "event-type-list/components/empty-screen/emptyEventTypeList";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import type { RouterOutputs } from "@calcom/trpc";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
|
||||
import { EventType } from "./components/event-type/index";
|
||||
|
||||
type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
|
||||
|
||||
export type EventTypeGroup = EventTypeGroups[number];
|
||||
type EventType = EventTypeGroup["eventTypes"][number];
|
||||
|
||||
type EventTypeListProps = {
|
||||
group: EventTypeGroup;
|
||||
groupIndex: number;
|
||||
readOnly: boolean;
|
||||
types: EventType[];
|
||||
};
|
||||
|
||||
export function EventTypeList({ group, groupIndex, readOnly, types }: EventTypeListProps): JSX.Element {
|
||||
const key = useApiKey();
|
||||
const [isKeyPresent, setIsKeyPresent] = useState(false);
|
||||
const [eventTypeGroup, setEventTypeGroup] = useState<EventTypeGroup>();
|
||||
|
||||
// missing props from event type component
|
||||
// moveEventType, onMutate, onCopy, onEdit, onDuplicate, onDelete, onPreview
|
||||
const utils = trpc.useContext();
|
||||
const mutation = trpc.viewer.eventTypeOrder.useMutation({
|
||||
onError: async (err) => {
|
||||
console.error(err.message);
|
||||
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||
await utils.viewer.eventTypes.invalidate();
|
||||
},
|
||||
onSettled: () => {
|
||||
utils.viewer.eventTypes.invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
async function moveEventType(index: number, increment: 1 | -1) {
|
||||
const newList = [...types];
|
||||
|
||||
const type = types[index];
|
||||
const tmp = types[index + increment];
|
||||
if (tmp) {
|
||||
newList[index] = tmp;
|
||||
newList[index + increment] = type;
|
||||
}
|
||||
|
||||
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||
|
||||
const previousValue = utils.viewer.eventTypes.getByViewer.getData();
|
||||
if (previousValue) {
|
||||
utils.viewer.eventTypes.getByViewer.setData(undefined, {
|
||||
...previousValue,
|
||||
eventTypeGroups: [
|
||||
...previousValue.eventTypeGroups.slice(0, groupIndex),
|
||||
{ ...group, eventTypes: newList },
|
||||
...previousValue.eventTypeGroups.slice(groupIndex + 1),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
mutation.mutate({
|
||||
ids: newList.map((type) => type.id),
|
||||
});
|
||||
}
|
||||
|
||||
const setHiddenMutation = trpc.viewer.eventTypes.update.useMutation({
|
||||
onMutate: async ({ id }) => {
|
||||
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||
const previousValue = utils.viewer.eventTypes.getByViewer.getData();
|
||||
|
||||
if (previousValue) {
|
||||
const newList = [...types];
|
||||
const itemIndex = newList.findIndex((item) => item.id === id);
|
||||
if (itemIndex !== -1 && newList[itemIndex]) {
|
||||
newList[itemIndex].hidden = !newList[itemIndex].hidden;
|
||||
}
|
||||
utils.viewer.eventTypes.getByViewer.setData(undefined, {
|
||||
...previousValue,
|
||||
eventTypeGroups: [
|
||||
...previousValue.eventTypeGroups.slice(0, groupIndex),
|
||||
{ ...group, eventTypes: newList },
|
||||
...previousValue.eventTypeGroups.slice(groupIndex + 1),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return { previousValue };
|
||||
},
|
||||
onError: async (err, _, context) => {
|
||||
if (context?.previousValue) {
|
||||
utils.viewer.eventTypes.getByViewer.setData(undefined, context.previousValue);
|
||||
}
|
||||
console.error(err.message);
|
||||
},
|
||||
onSettled: () => {
|
||||
utils.viewer.eventTypes.invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
async function getEventTypes(key: string) {
|
||||
// here we're supposed call the /event-types endpoint in v2 to get event types
|
||||
// since v2 is not ready yet thats why calling localhost for now
|
||||
const response = await fetch(`/v2/event-types?apiKey=${key}`);
|
||||
const data = await response.json();
|
||||
|
||||
setEventTypeGroup(data);
|
||||
}
|
||||
|
||||
if (key !== "no_key" && key !== "invalid_key") {
|
||||
setIsKeyPresent(true);
|
||||
getEventTypes(key);
|
||||
}
|
||||
}, [key]);
|
||||
|
||||
if (key === "no_key") {
|
||||
return <>You havent entered a key</>;
|
||||
}
|
||||
|
||||
if (key === "invalid_key") {
|
||||
return <>This is not a valid key, please enter a valid key</>;
|
||||
}
|
||||
|
||||
if (isKeyPresent && !types.length) {
|
||||
return group.teamId ? (
|
||||
<EmptyEventTypeList group={group} />
|
||||
) : (
|
||||
<CreateFirstEventTypeView slug={group.profile.slug ?? ""} />
|
||||
);
|
||||
}
|
||||
|
||||
const firstItem = types[0];
|
||||
const lastItem = types[types.length - 1];
|
||||
|
||||
if (isKeyPresent && !!types) {
|
||||
return (
|
||||
<div className="bg-default border-subtle mb-16 flex overflow-hidden rounded-md border">
|
||||
<ul className="divide-subtle !static w-full divide-y" data-testid="event-types">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<EventType
|
||||
key={type.id}
|
||||
index={index}
|
||||
group={group}
|
||||
type={type}
|
||||
readOnly={readOnly}
|
||||
firstItem={firstItem}
|
||||
lastItem={lastItem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -6,5 +6,78 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@import "../ui/styles/shared-globals.css";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
|
@ -1,2 +1,4 @@
|
|||
export { Booker } from "./booker/Booker";
|
||||
export { CalProvider } from "./cal-provider/index";
|
||||
export { EventType } from "./event-type-list/components/event-type";
|
||||
export { EventTypeList } from "./event-type-list";
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@types/node": "^20.8.7",
|
||||
"@types/react": "18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
|
@ -18,5 +19,17 @@
|
|||
"typescript": "^4.9.4",
|
||||
"vite": "^4.1.2"
|
||||
},
|
||||
"main": "./index"
|
||||
"main": "./index",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"lucide-react": "^0.288.0",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,30 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
|
@ -0,0 +1,46 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
|
@ -0,0 +1,100 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger;
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal;
|
||||
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogFooter.displayName = "DialogFooter";
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
};
|
|
@ -0,0 +1,179 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
));
|
||||
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
));
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
));
|
||||
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
));
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("bg-muted -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||
|
||||
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
|
||||
};
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
};
|
|
@ -0,0 +1,25 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
||||
import * as React from "react";
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
));
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||
|
||||
export { Switch };
|
|
@ -0,0 +1,27 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import * as React from "react";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@ -0,0 +1,6 @@
|
|||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
|
@ -3,5 +3,78 @@ const base = require("@calcom/config/tailwind-preset");
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
...base,
|
||||
content: ["./bookings/**/*.tsx"],
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
"./bookings/**/*.tsx",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
|
|
|
@ -3,7 +3,8 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["/*"]
|
||||
"~/*": ["/*"],
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
import { resolve } from "path";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
// setting up shadcn for vite: https://ui.shadcn.com/docs/installation/vite
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
lib: {
|
||||
entry: [resolve(__dirname, "booker/export.ts")],
|
||||
|
@ -23,6 +28,7 @@ export default defineConfig({
|
|||
fs: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||
path: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||
os: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Block a user