diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js index 31885a65ff834c..25981f35432f02 100644 --- a/apps/storybook/.storybook/main.js +++ b/apps/storybook/.storybook/main.js @@ -20,6 +20,10 @@ module.exports = { * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160 */ config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"]; + config.resolve.alias = { + ...config.resolve.alias, + "@/interfaces": path.resolve(__dirname, "../interfaces"), + }; /** * Why webpack5... Just why? diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js index 8a440987b9bebf..ea0d43ec000903 100644 --- a/apps/storybook/.storybook/preview.js +++ b/apps/storybook/.storybook/preview.js @@ -22,3 +22,13 @@ export const parameters = { Provider: RouterContext.Provider, }, }; + +window.getEmbedNamespace = () => { + const url = new URL(document.URL); + const namespace = url.searchParams.get("embed"); + return namespace; +}; + +window.getEmbedTheme = () => { + return "auto"; +}; diff --git a/apps/storybook/package.json b/apps/storybook/package.json index f38c2f130ed1dc..277cf9c8544c75 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -34,15 +34,17 @@ "devDependencies": { "@babel/core": "^7.18.9", "@calcom/config": "*", - "@storybook/addon-a11y": "^6.5.9", - "@storybook/addon-actions": "^6.5.9", - "@storybook/addon-essentials": "^6.5.9", - "@storybook/addon-interactions": "^6.5.9", - "@storybook/addon-links": "^6.5.9", + "@storybook/addon-a11y": "^6.5.10", + "@storybook/addon-actions": "^6.5.10", + "@storybook/addon-essentials": "^6.5.10", + "@storybook/addon-interactions": "^6.5.10", + "@storybook/addon-links": "^6.5.10", "@storybook/addon-postcss": "^2.0.0", - "@storybook/builder-webpack5": "^6.5.9", - "@storybook/manager-webpack5": "^6.5.9", - "@storybook/react": "^6.5.9", + "@storybook/builder-vite": "^0.2.2", + "@storybook/builder-webpack5": "^6.5.10", + "@storybook/manager-webpack5": "^6.5.10", + "@storybook/react": "^6.5.10", + "@tailwindcss/line-clamp": "^0.4.0", "@types/node": "16.9.1", "@types/react": "^18.0.9", "@types/react-dom": "18.0.4", diff --git a/apps/storybook/stories/Avatar.stories.tsx b/apps/storybook/stories/Avatar.stories.tsx index 252f5bd6404063..c10b9908219f87 100644 --- a/apps/storybook/stories/Avatar.stories.tsx +++ b/apps/storybook/stories/Avatar.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from "@storybook/react"; -import Avatar from "@calcom/ui/v2/Avatar"; +import Avatar from "@calcom/ui/v2/core/Avatar"; export default { title: "Avatar", diff --git a/apps/storybook/stories/AvatarGroup.stories.tsx b/apps/storybook/stories/AvatarGroup.stories.tsx index 1c322867d987f8..23d27aef9a3dd3 100644 --- a/apps/storybook/stories/AvatarGroup.stories.tsx +++ b/apps/storybook/stories/AvatarGroup.stories.tsx @@ -1,7 +1,6 @@ import { ComponentMeta } from "@storybook/react"; -import Avatar from "@calcom/ui/v2/Avatar"; -import AvatarGroup from "@calcom/ui/v2/AvatarGroup"; +import AvatarGroup from "@calcom/ui/v2/core/AvatarGroup"; export default { title: "Avatar/Group", diff --git a/apps/storybook/stories/Badge.stories.tsx b/apps/storybook/stories/Badge.stories.tsx index e4e6103c86b005..ad7d6b473c6a8e 100644 --- a/apps/storybook/stories/Badge.stories.tsx +++ b/apps/storybook/stories/Badge.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta } from "@storybook/react"; import { Bell } from "react-feather"; -import { Badge } from "@calcom/ui/v2"; +import Badge from "@calcom/ui/v2/core/Badge"; export default { title: "Badge", diff --git a/apps/storybook/stories/Banner.stories.tsx b/apps/storybook/stories/Banner.stories.tsx index 7c36991343b07a..9ca2fdc32d1b4c 100644 --- a/apps/storybook/stories/Banner.stories.tsx +++ b/apps/storybook/stories/Banner.stories.tsx @@ -1,7 +1,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { Info } from "react-feather"; -import { Banner } from "@calcom/ui/v2"; +import Banner from "@calcom/ui/v2/core/banner"; export default { title: "Banner", diff --git a/apps/storybook/stories/Breadcrumb.stories.tsx b/apps/storybook/stories/Breadcrumb.stories.tsx index 201e00b1014939..3cc70298ee52e6 100644 --- a/apps/storybook/stories/Breadcrumb.stories.tsx +++ b/apps/storybook/stories/Breadcrumb.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from "@storybook/react"; -import { Breadcrumb, BreadcrumbItem } from "@calcom/ui/v2"; +import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb"; export default { title: "Breadcrumbs", diff --git a/apps/storybook/stories/Button.stories.tsx b/apps/storybook/stories/Button.stories.tsx index 673866b581dba1..f789325d9ce617 100644 --- a/apps/storybook/stories/Button.stories.tsx +++ b/apps/storybook/stories/Button.stories.tsx @@ -1,11 +1,12 @@ +import { TooltipProvider } from "@radix-ui/react-tooltip"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import { Trash2 } from "react-feather"; -import { Button as ButtonComponent } from "@calcom/ui/v2"; +import Button from "@calcom/ui/v2/core/Button"; export default { title: "Button", - component: ButtonComponent, + component: Button, argTypes: { color: { options: ["primary", "secondary", "minimal", "destructive"], @@ -24,67 +25,69 @@ export default { control: { type: "radio" }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStory = (args) => + + +

Secondary

+
+ + +
+

Minimal

+
+ + +
+

Destructive

+ @@ -210,7 +210,7 @@ const SlotPicker = ({ className={classNames( "mt-8 w-full sm:mt-0 sm:min-w-[455px]", selectedDate - ? "border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 " + ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3 " : "sm:p-4" )} includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)} @@ -273,14 +273,14 @@ function TimezoneDropdown({ return ( - -

- + +

+ {timeZone} {isTimeOptionsOpen ? ( - + ) : ( - + )}

@@ -412,12 +412,15 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { shouldAlignCentrally ? "mx-auto" : "", isEmbed ? classNames(maxWidth) - : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth) + : classNames( + "transition-max-width dark:bg- mx-auto my-0 duration-500 ease-in-out md:my-24", + maxWidth + ) )}>
@@ -432,43 +435,45 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { truncateAfter={5} />
-

{profile.name}

-
-

+

+ {profile.name} +

+
+

{eventType.title}

{eventType?.description && ( -
+
- +
)} {eventType?.requiresConfirmation && ( -

- +

+ {t("requires_confirmation")}

)} {eventType.locations.length === 1 && ( -

+

{Object.values(AppStoreLocationType).includes( eventType.locations[0].type as unknown as AppStoreLocationType ) ? ( - + ) : ( - + )} {locationKeyToString(eventType.locations[0], t)}

)} {eventType.locations.length > 1 && ( -
+
- +

{eventType.locations.map((el, i, arr) => { @@ -484,13 +489,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

)} -

- +

+ {eventType.length} {t("minutes")}

{eventType.price > 0 && ( -
- +
+ {
)} {!rescheduleUid && eventType.recurringEvent && ( -
+

@@ -511,13 +516,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { type="number" min="1" max={eventType.recurringEvent.count} - className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white" + className="w-15 dark:text-darkgray-600 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600" defaultValue={eventType.recurringEvent.count} onChange={(event) => { setRecurringEventCount(parseInt(event?.target.value)); }} /> -

+

{t("occurrence", { count: recurringEventCount, })} @@ -531,11 +536,11 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { {/* Temp disabled booking?.startTime && rescheduleUid && (

{t("former_time")}

-

+

{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)} @@ -552,7 +557,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

-

{user.bio}

+

{user.bio}

)} -
+
{user.away ? (
@@ -164,7 +171,7 @@ export default function User(props: inferSSRProps) {
+ className="hover:border-brand dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600"> {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
) : props.isDynamic && !props.profile.allowDynamicBooking ? ( -
+
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx index 2c27b4dc68916c..01b1ea009f0369 100644 --- a/apps/web/pages/_document.tsx +++ b/apps/web/pages/_document.tsx @@ -66,7 +66,7 @@ class MyDocument extends Document { crossOrigin="anonymous" /> - {/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body + {/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body Persist the embed mode in sessionStorage because query param might get lost during browsing. */}