From 436f88a48e0de81a0bcbd33a32c113bd093904d5 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 24 Aug 2022 21:18:42 +0100 Subject: [PATCH] V2 Main (#3549) * Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * Even Type move order handles * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas Co-authored-by: Alan Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Removed extra buttons on create ET dialog * ET edit page refactoring * Avoids form wrapping the whole Shell * Nitpicks Co-authored-by: Peer Richelsen Co-authored-by: zomars Co-authored-by: Hariom Balhara Co-authored-by: Julian Benegas Co-authored-by: Alan --- apps/storybook/.storybook/main.js | 4 + apps/storybook/.storybook/preview.js | 10 + apps/storybook/package.json | 18 +- apps/storybook/stories/Avatar.stories.tsx | 2 +- .../storybook/stories/AvatarGroup.stories.tsx | 3 +- apps/storybook/stories/Badge.stories.tsx | 2 +- apps/storybook/stories/Banner.stories.tsx | 2 +- apps/storybook/stories/Breadcrumb.stories.tsx | 2 +- apps/storybook/stories/Button.stories.tsx | 93 +- .../storybook/stories/ButtonGroup.stories.tsx | 32 +- apps/storybook/stories/Cards.stories.tsx | 28 +- apps/storybook/stories/Checkbox.stories.tsx | 2 +- apps/storybook/stories/Colors.stories.tsx | 2 +- apps/storybook/stories/DatePicker.stories.tsx | 6 +- .../storybook/stories/EmptyScreen.stories.tsx | 12 +- apps/storybook/stories/FormStep.stories.tsx | 2 +- .../stories/HorizontalTab.stories.tsx | 17 +- apps/storybook/stories/Input.stories.tsx | 4 +- apps/storybook/stories/Modal.stories.tsx | 4 +- .../stories/Notifcations.stories.tsx | 3 +- apps/storybook/stories/PageHeader.stories.tsx | 4 +- apps/storybook/stories/Radio.stories.tsx | 4 +- apps/storybook/stories/Select.stories.tsx | 2 +- apps/storybook/stories/TabItem.stories.tsx | 84 +- .../storybook/stories/VerticalTab.stories.tsx | 2 +- apps/web/components/Embed.tsx | 8 +- .../web/components/booking/AvailableTimes.tsx | 7 +- apps/web/components/booking/TimeOptions.tsx | 2 +- .../booking/pages/AvailabilityPage.tsx | 111 +- .../components/booking/pages/BookingPage.tsx | 39 +- apps/web/components/ui/colorpicker.tsx | 2 +- apps/web/components/ui/form/CheckedSelect.tsx | 11 - .../v2/eventtype/CustomInputTypeForm.tsx | 120 + .../v2/eventtype/EditLocationDialog.tsx | 553 ++ .../v2/eventtype/EventAdvancedTab.tsx | 322 + .../components/v2/eventtype/EventAppsTab.tsx | 160 + .../v2/eventtype/EventLimitsTab.tsx | 252 + .../v2/eventtype/EventRecurringTab.tsx | 27 + .../components/v2/eventtype/EventSetupTab.tsx | 575 ++ .../components/v2/eventtype/EventTeamTab.tsx | 149 + .../v2/eventtype/EventTypeSingleLayout.tsx | 278 + .../v2/eventtype/RecurringEventController.tsx | 134 + apps/web/components/v2/ui/AuthContainer.tsx | 44 + apps/web/lib/config/next-seo.config.ts | 13 +- apps/web/middleware.ts | 2 +- apps/web/package.json | 1 + apps/web/pages/[user].tsx | 25 +- apps/web/pages/[user]/[type].tsx | 2 +- apps/web/pages/_document.tsx | 4 +- apps/web/pages/auth/setup.tsx | 4 +- apps/web/pages/team/[slug].tsx | 18 +- apps/web/pages/v2/auth/login.tsx | 243 + apps/web/pages/v2/availability/[schedule].tsx | 188 + apps/web/pages/v2/availability/index.tsx | 72 + .../pages/v2/availability/troubleshoot.tsx | 117 + apps/web/pages/v2/bookings/[status].tsx | 162 + .../web/pages/v2/event-types/[type]/index.tsx | 464 + apps/web/pages/v2/event-types/index.tsx | 640 ++ apps/web/pages/v2/settings/admin/apps.tsx | 2 +- .../pages/v2/settings/admin/impersonation.tsx | 2 +- apps/web/pages/v2/settings/admin/index.tsx | 2 +- apps/web/pages/v2/settings/admin/users.tsx | 2 +- apps/web/public/static/locales/en/common.json | 29 +- apps/web/styles/globals.css | 4 +- package.json | 1 + .../pages/setup/index.tsx | 4 +- packages/app-store/package.json | 1 + packages/config/tailwind-preset.js | 128 +- .../api-keys/components/ApiKeyDialogForm.tsx | 2 +- .../ee/common/components/LicenseBanner.tsx | 3 +- .../ee/common/components/TrialBanner.tsx | 7 +- .../components/TeamAvailabilityModal.tsx | 2 +- .../components/TeamAvailabilityScreen.tsx | 4 +- packages/lib/browser/browser.utils.ts | 20 + packages/lib/hooks/useResponsive.tsx | 25 + packages/lib/next-seo.config.ts | 39 + packages/lib/telemetry.ts | 1 + .../server/routers/viewer/availability.tsx | 7 + packages/tsconfig/react-library.json | 4 +- packages/ui/Shell.tsx | 3 +- packages/ui/package.json | 3 + packages/ui/tsconfig.json | 8 +- packages/ui/v2/ButtonGroup.tsx | 9 - packages/ui/v2/Card.tsx | 66 - packages/ui/v2/{ => core}/Alert.tsx | 0 packages/ui/v2/{ => core}/Avatar.tsx | 10 +- packages/ui/v2/{ => core}/AvatarGroup.tsx | 0 packages/ui/v2/{ => core}/Badge.tsx | 2 +- packages/ui/v2/{ => core}/Breadcrumb.tsx | 2 + packages/ui/v2/{ => core}/Button.tsx | 4 +- packages/ui/v2/core/ButtonGroup.tsx | 15 + packages/ui/v2/core/Card.tsx | 150 + packages/ui/v2/{ => core}/Dialog.tsx | 35 +- packages/ui/v2/{ => core}/Dropdown.tsx | 0 packages/ui/v2/{ => core}/EmptyScreen.tsx | 2 +- packages/ui/v2/core/LinkIconButton.tsx | 21 + packages/ui/v2/{ => core}/Loader.tsx | 0 packages/ui/v2/{ => core}/PageHeader.tsx | 0 packages/ui/v2/core/Portal.tsx | 11 + packages/ui/v2/{ => core}/Shell.tsx | 52 +- packages/ui/v2/{ => core}/Stepper.tsx | 0 packages/ui/v2/{ => core}/Swatch.tsx | 0 packages/ui/v2/{ => core}/Switch.tsx | 0 packages/ui/v2/core/TableActions.tsx | 103 + packages/ui/v2/core/TimezoneSelect.tsx | 52 + packages/ui/v2/{ => core}/Tooltip.tsx | 4 +- packages/ui/v2/{ => core}/WizardForm.tsx | 3 +- packages/ui/v2/{ => core}/banner.tsx | 0 packages/ui/v2/{ => core}/colorpicker.tsx | 2 +- packages/ui/v2/{ => core}/form/Checkbox.tsx | 0 packages/ui/v2/{ => core}/form/DatePicker.tsx | 0 packages/ui/v2/{ => core}/form/FormStep.tsx | 0 packages/ui/v2/{ => core}/form/Select.tsx | 0 packages/ui/v2/{ => core}/form/fields.tsx | 14 +- packages/ui/v2/{ => core}/form/index.ts | 1 + .../v2/{ => core}/form/radio-area/Radio.tsx | 0 .../form/radio-area/RadioAreaGroup.tsx | 0 .../v2/{ => core}/form/radio-area/Select.tsx | 2 +- .../ui/v2/{ => core}/form/radio-area/index.ts | 1 + packages/ui/v2/core/head-seo.tsx | 106 + packages/ui/v2/{index.tsx => core/index.ts} | 29 +- .../ui/v2/{ => core}/layouts/AdminLayout.tsx | 0 packages/ui/v2/core/layouts/BookingLayout.tsx | 49 + .../v2/{ => core}/layouts/SettingsLayout.tsx | 2 +- .../{ => core}/navigation/NavigationItem.tsx | 0 .../navigation/tabs/HorizontalTabItem.tsx | 4 +- .../navigation/tabs/HorizontalTabs.tsx | 0 .../navigation/tabs/VerticalTabItem.tsx | 0 .../navigation/tabs/VerticalTabs.tsx | 0 .../v2/{ => core}/navigation/tabs/index.tsx | 0 packages/ui/v2/{ => core}/notfications.tsx | 8 +- packages/ui/v2/{ => core}/skeleton/index.tsx | 0 packages/ui/v2/index.ts | 2 + packages/ui/v2/modules/auth/SAMLLogin.tsx | 61 + packages/ui/v2/modules/auth/index.ts | 1 + .../availability/NewScheduleButton.tsx | 84 + .../ui/v2/modules/availability/Schedule.tsx | 331 + .../modules/availability/ScheduleListItem.tsx | 77 + packages/ui/v2/modules/availability/index.ts | 3 + .../ui/v2/{ => modules}/booker/DatePicker.tsx | 12 +- packages/ui/v2/modules/booker/index.ts | 1 + .../modules/event-types/CheckedTeamSelect.tsx | 68 + .../modules/event-types/CreateEventType.tsx | 369 + .../modules/event-types/CustomInputItem.tsx | 42 + .../DestinationCalendarSelector.tsx | 126 + .../event-types/EventTypeDescription.tsx | 104 + packages/ui/v2/modules/event-types/index.ts | 4 + packages/ui/v2/modules/index.ts | 4 + .../teams/TeamSettingsRightSidebar.tsx | 127 + packages/ui/v2/modules/tips/Tips.tsx | 108 + packages/ui/v2/modules/tips/index.ts | 1 + yarn.lock | 7591 +++++++++-------- 152 files changed, 11222 insertions(+), 4049 deletions(-) create mode 100644 apps/web/components/v2/eventtype/CustomInputTypeForm.tsx create mode 100644 apps/web/components/v2/eventtype/EditLocationDialog.tsx create mode 100644 apps/web/components/v2/eventtype/EventAdvancedTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventAppsTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventLimitsTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventRecurringTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventSetupTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventTeamTab.tsx create mode 100644 apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx create mode 100644 apps/web/components/v2/eventtype/RecurringEventController.tsx create mode 100644 apps/web/components/v2/ui/AuthContainer.tsx create mode 100644 apps/web/pages/v2/auth/login.tsx create mode 100644 apps/web/pages/v2/availability/[schedule].tsx create mode 100644 apps/web/pages/v2/availability/index.tsx create mode 100644 apps/web/pages/v2/availability/troubleshoot.tsx create mode 100644 apps/web/pages/v2/bookings/[status].tsx create mode 100644 apps/web/pages/v2/event-types/[type]/index.tsx create mode 100644 apps/web/pages/v2/event-types/index.tsx create mode 100644 packages/lib/browser/browser.utils.ts create mode 100644 packages/lib/hooks/useResponsive.tsx create mode 100644 packages/lib/next-seo.config.ts delete mode 100644 packages/ui/v2/ButtonGroup.tsx delete mode 100644 packages/ui/v2/Card.tsx rename packages/ui/v2/{ => core}/Alert.tsx (100%) rename packages/ui/v2/{ => core}/Avatar.tsx (91%) rename packages/ui/v2/{ => core}/AvatarGroup.tsx (100%) rename packages/ui/v2/{ => core}/Badge.tsx (94%) rename packages/ui/v2/{ => core}/Breadcrumb.tsx (98%) rename packages/ui/v2/{ => core}/Button.tsx (98%) create mode 100644 packages/ui/v2/core/ButtonGroup.tsx create mode 100644 packages/ui/v2/core/Card.tsx rename packages/ui/v2/{ => core}/Dialog.tsx (82%) rename packages/ui/v2/{ => core}/Dropdown.tsx (100%) rename packages/ui/v2/{ => core}/EmptyScreen.tsx (90%) create mode 100644 packages/ui/v2/core/LinkIconButton.tsx rename packages/ui/v2/{ => core}/Loader.tsx (100%) rename packages/ui/v2/{ => core}/PageHeader.tsx (100%) create mode 100644 packages/ui/v2/core/Portal.tsx rename packages/ui/v2/{ => core}/Shell.tsx (93%) rename packages/ui/v2/{ => core}/Stepper.tsx (100%) rename packages/ui/v2/{ => core}/Swatch.tsx (100%) rename packages/ui/v2/{ => core}/Switch.tsx (100%) create mode 100644 packages/ui/v2/core/TableActions.tsx create mode 100644 packages/ui/v2/core/TimezoneSelect.tsx rename packages/ui/v2/{ => core}/Tooltip.tsx (91%) rename packages/ui/v2/{ => core}/WizardForm.tsx (96%) rename packages/ui/v2/{ => core}/banner.tsx (100%) rename packages/ui/v2/{ => core}/colorpicker.tsx (98%) rename packages/ui/v2/{ => core}/form/Checkbox.tsx (100%) rename packages/ui/v2/{ => core}/form/DatePicker.tsx (100%) rename packages/ui/v2/{ => core}/form/FormStep.tsx (100%) rename packages/ui/v2/{ => core}/form/Select.tsx (100%) rename packages/ui/v2/{ => core}/form/fields.tsx (96%) rename packages/ui/v2/{ => core}/form/index.ts (80%) rename packages/ui/v2/{ => core}/form/radio-area/Radio.tsx (100%) rename packages/ui/v2/{ => core}/form/radio-area/RadioAreaGroup.tsx (100%) rename packages/ui/v2/{ => core}/form/radio-area/Select.tsx (96%) rename packages/ui/v2/{ => core}/form/radio-area/index.ts (73%) create mode 100644 packages/ui/v2/core/head-seo.tsx rename packages/ui/v2/{index.tsx => core/index.ts} (53%) rename packages/ui/v2/{ => core}/layouts/AdminLayout.tsx (100%) create mode 100644 packages/ui/v2/core/layouts/BookingLayout.tsx rename packages/ui/v2/{ => core}/layouts/SettingsLayout.tsx (98%) rename packages/ui/v2/{ => core}/navigation/NavigationItem.tsx (100%) rename packages/ui/v2/{ => core}/navigation/tabs/HorizontalTabItem.tsx (90%) rename packages/ui/v2/{ => core}/navigation/tabs/HorizontalTabs.tsx (100%) rename packages/ui/v2/{ => core}/navigation/tabs/VerticalTabItem.tsx (100%) rename packages/ui/v2/{ => core}/navigation/tabs/VerticalTabs.tsx (100%) rename packages/ui/v2/{ => core}/navigation/tabs/index.tsx (100%) rename packages/ui/v2/{ => core}/notfications.tsx (83%) rename packages/ui/v2/{ => core}/skeleton/index.tsx (100%) create mode 100644 packages/ui/v2/index.ts create mode 100644 packages/ui/v2/modules/auth/SAMLLogin.tsx create mode 100644 packages/ui/v2/modules/auth/index.ts create mode 100644 packages/ui/v2/modules/availability/NewScheduleButton.tsx create mode 100644 packages/ui/v2/modules/availability/Schedule.tsx create mode 100644 packages/ui/v2/modules/availability/ScheduleListItem.tsx create mode 100644 packages/ui/v2/modules/availability/index.ts rename packages/ui/v2/{ => modules}/booker/DatePicker.tsx (90%) create mode 100644 packages/ui/v2/modules/booker/index.ts create mode 100644 packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx create mode 100644 packages/ui/v2/modules/event-types/CreateEventType.tsx create mode 100644 packages/ui/v2/modules/event-types/CustomInputItem.tsx create mode 100644 packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx create mode 100644 packages/ui/v2/modules/event-types/EventTypeDescription.tsx create mode 100644 packages/ui/v2/modules/event-types/index.ts create mode 100644 packages/ui/v2/modules/index.ts create mode 100644 packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx create mode 100644 packages/ui/v2/modules/tips/Tips.tsx create mode 100644 packages/ui/v2/modules/tips/index.ts diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js index 31885a65ff..25981f3543 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 8a440987b9..ea0d43ec00 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 f38c2f130e..277cf9c854 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 252f5bd640..c10b990821 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 1c322867d9..23d27aef9a 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 e4e6103c86..ad7d6b473c 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 7c36991343..9ca2fdc32d 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 201e00b101..3cc70298ee 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 673866b581..f789325d9c 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 2c27b4dc68..01b1ea009f 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. */}