From 3732bc3263f1f2c4259f0b658450335e73ba6029 Mon Sep 17 00:00:00 2001 From: Codemod Bot Date: Tue, 4 Nov 2025 21:37:38 +0000 Subject: [PATCH 1/2] [DRAFT] refactor: Run i18n-pro-codemod Campaign shard --- apps/ui-playground/app/layout.tsx | 9 +- .../ui-playground/components/ui/TypeTable.tsx | 20 +- .../components/ui/TypographyTable.tsx | 30 +- .../components/alert.customIconColor.tsx | 12 +- .../design/components/alert.customIcons.tsx | 12 +- .../content/design/components/avatar.link.tsx | 14 +- .../design/components/avatar.sizes.tsx | 22 +- .../content/design/components/badge.icons.tsx | 12 +- .../design/components/badge.interactive.tsx | 16 +- .../design/components/button.loading.tsx | 28 +- .../design/components/button.onClick.tsx | 12 +- .../components/checkbox.description.tsx | 16 +- .../design/components/checkbox.infoIcon.tsx | 16 +- .../design/components/dialog.confirmation.tsx | 12 +- .../content/design/components/dialog.form.tsx | 20 +- .../components/dropdown.buttonTrigger.tsx | 24 +- .../design/components/dropdown.complex.tsx | 66 +- .../components/emptyScreen.customIcon.tsx | 14 +- .../components/emptyScreen.htmlContent.tsx | 25 +- .../content/design/components/form.basic.tsx | 18 +- .../design/components/form.specialFields.tsx | 16 +- .../design/components/input.values.tsx | 18 +- .../design/components/input.widths.tsx | 20 +- .../components/multiInputField.states.tsx | 10 +- .../design/components/navigation.items.tsx | 18 +- .../design/components/rangeslider.popover.tsx | 18 +- .../design/components/section.basic.tsx | 6 +- .../design/components/select.async.tsx | 8 +- .../design/components/select.basic.tsx | 8 +- .../design/components/select.grouped.tsx | 12 +- .../design/components/select.loading.tsx | 12 +- .../design/components/tabs.horizontal.tsx | 12 +- .../design/components/tabs.vertical.tsx | 6 +- .../design/components/textarea.states.tsx | 22 +- .../content/design/components/toast.basic.tsx | 28 +- .../settings/(admin-layout)/admin/page.tsx | 7 +- .../(admin-layout)/admin/users/page.tsx | 5 +- .../SettingsLayoutAppDirClient.tsx | 24 +- apps/web/app/icons/page.tsx | 9 +- apps/web/app/layout.tsx | 10 +- apps/web/app/notFoundClient.tsx | 6 +- apps/web/components/EnterprisePage.tsx | 6 +- apps/web/components/PageWrapper.tsx | 11 +- apps/web/components/apps/AppPage.tsx | 15 +- .../apps/installation/ConfigureStepCard.tsx | 7 +- .../apps/installation/EventTypesStepCard.tsx | 16 +- .../components/booking/BookingListItem.tsx | 7 +- .../components/dialog/RescheduleDialog.tsx | 5 +- apps/web/components/error/error-page.tsx | 23 +- .../steps-views/UserProfile.tsx | 6 +- .../platform/dashboard/NoPlatformPlan.tsx | 15 +- .../dashboard/oauth-clients-list/index.tsx | 13 +- .../oauth-clients/OAuthClientCard.tsx | 38 +- .../oauth-clients/oauth-client-form/index.tsx | 37 +- .../platform/pricing/billing-card/index.tsx | 9 +- .../pricing/platform-pricing/index.tsx | 5 +- apps/web/components/setup/ChooseLicense.tsx | 5 +- .../components/setup/EnterpriseLicense.tsx | 5 +- .../UsernameAvailability/PremiumTextfield.tsx | 10 +- apps/web/lib/QueryCell.tsx | 5 +- apps/web/lib/app-providers-app-dir.tsx | 9 +- apps/web/lib/app-providers.tsx | 9 +- apps/web/modules/apps/[slug]/slug-view.tsx | 13 +- .../forgot-password/forgot-password-view.tsx | 6 +- apps/web/modules/auth/login-view.tsx | 16 +- .../modules/auth/oauth2/authorize-view.tsx | 6 +- .../modules/auth/platform/authorize-view.tsx | 13 +- apps/web/modules/auth/signin-view.tsx | 6 +- .../bookings/views/bookings-single-view.tsx | 20 +- .../connect-and-join-view.tsx | 8 +- .../insights/insights-virtual-queues-view.tsx | 6 +- .../settings/admin/components/UsersTable.tsx | 23 +- .../settings/admin/locked-sms-view.tsx | 16 +- .../web/modules/settings/admin/oauth-view.tsx | 8 +- .../billing/components/BillingCredits.tsx | 8 +- .../settings/my-account/profile-view.tsx | 12 +- .../new/_components/AddNewTeamsForm.tsx | 14 +- .../new/_components/OnboardMembersView.tsx | 10 +- .../platform/billing/billing-view.tsx | 8 +- apps/web/modules/signup-view.tsx | 36 +- .../videos-meeting-ended-single-view.tsx | 8 +- .../videos/views/videos-single-view.tsx | 8 +- apps/web/pages/router/index.tsx | 6 +- example-apps/credential-sync/pages/index.tsx | 19 +- messages/en.json | 1317 +++++++++++++++++ .../src/components/AppCreateUpdateForm.tsx | 45 +- .../src/components/DeleteForm.tsx | 11 +- .../components/EventTypeAppCardInterface.tsx | 5 +- .../EventTypeAppSettingsInterface.tsx | 11 +- .../EventTypeAppSettingsInterface.tsx | 14 +- .../giphy/components/SearchDialog.tsx | 11 +- .../giphy/components/SelectGifInput.tsx | 13 +- .../EventTypeAppSettingsInterface.tsx | 7 +- .../components/EventTypeAppCardInterface.tsx | 5 +- .../components/EventTypeAppCardInterface.tsx | 7 +- .../components/EventTypeAppCardInterface.tsx | 13 +- .../components/AccountDialog.tsx | 11 +- .../components/EventTypeAppCardInterface.tsx | 5 +- .../EventTypeAppSettingsInterface.tsx | 11 +- .../EventTypeAppSettingsInterface.tsx | 5 +- .../components/EventTypeAppCardInterface.tsx | 7 +- .../components/_components/ResultSection.tsx | 20 +- .../emails/components/ResponseEmail.tsx | 5 +- .../components/EventTypeAppCardInterface.tsx | 7 +- .../EventTypeAppSettingsInterface.tsx | 7 +- .../components/EventTypeAppCardInterface.tsx | 17 +- .../components/AppSettingsInterface.tsx | 5 +- .../components/EventTypeAppCardInterface.tsx | 5 +- .../components/EventTypeAppCardInterface.tsx | 7 +- .../vital/components/AppConfiguration.tsx | 25 +- .../components/AppSettingsInterface.tsx | 5 +- .../zapier/components/TemplateCard.tsx | 11 +- .../components/BookingConfirmationForm.tsx | 12 +- packages/emails/src/components/WhenInfo.tsx | 5 +- .../src/templates/AttendeeAddGuestsEmail.tsx | 11 +- .../AttendeeAwaitingPaymentEmail.tsx | 7 +- .../src/templates/AttendeeCancelledEmail.tsx | 11 +- .../templates/AttendeeCancelledSeatEmail.tsx | 11 +- .../src/templates/AttendeeDeclinedEmail.tsx | 13 +- .../templates/AttendeeLocationChangeEmail.tsx | 11 +- .../templates/AttendeeRescheduledEmail.tsx | 11 +- .../src/templates/AttendeeUpdatedEmail.tsx | 11 +- .../AttendeeWasRequestedToRescheduleEmail.tsx | 7 +- .../src/templates/BrokenIntegrationEmail.tsx | 11 +- .../DailyVideoDownloadTranscriptEmail.tsx | 5 +- .../emails/src/templates/FeedbackEmail.tsx | 11 +- .../src/templates/MonthlyDigestEmail.tsx | 5 +- .../templates/OrganizationCreationEmail.tsx | 12 +- .../src/templates/OrganizerAddGuestsEmail.tsx | 11 +- .../OrganizerAttendeeCancelledSeatEmail.tsx | 11 +- .../OrganizerLocationChangeEmail.tsx | 11 +- .../OrganizerPaymentRefundFailedEmail.tsx | 6 +- .../templates/OrganizerReassignedEmail.tsx | 5 +- .../src/templates/OrganizerRequestEmail.tsx | 9 +- .../src/templates/OrganizerRequestEmailV2.tsx | 9 +- .../OrganizerRequestReminderEmail.tsx | 11 +- .../templates/OrganizerRescheduledEmail.tsx | 11 +- .../src/templates/OrganizerScheduledEmail.tsx | 7 +- .../emails/src/templates/TeamInviteEmail.tsx | 15 +- packages/embeds/embed-react/element-click.tsx | 7 +- packages/embeds/embed-react/inline.tsx | 9 +- packages/features/Segment.tsx | 6 +- packages/features/apps/components/AllApps.tsx | 6 +- packages/features/apps/components/AppCard.tsx | 8 +- packages/features/bookings/Booker/Booker.tsx | 5 +- .../BookEventForm/BookEventForm.tsx | 15 +- .../Booker/components/OutOfOfficeInSlots.tsx | 5 +- .../OverlayCalendarSettingsModal.tsx | 5 +- .../bookings/components/AvailableTimes.tsx | 5 +- .../event-meta/AvailableEventLocations.tsx | 5 +- .../components/event-meta/Locations.tsx | 11 +- .../calendars/DestinationCalendarSelector.tsx | 5 +- .../weeklyview/components/Calendar.tsx | 7 +- .../data-table/components/DataTable.tsx | 14 +- .../components/DataTablePagination.tsx | 12 +- .../api-keys/components/ApiKeyDialogForm.tsx | 7 +- packages/features/ee/components/PoweredBy.tsx | 5 +- .../licensekey/CreateLicenseKeyForm.tsx | 72 +- .../ee/dsync/components/CreateTeamDialog.tsx | 5 +- .../components/GroupTeamMappingTable.tsx | 7 +- .../components/AdminOnboardingHandover.tsx | 11 +- .../components/CreateANewOrganizationForm.tsx | 72 +- .../components/TeamInviteFromOrg.tsx | 9 +- .../pages/components/OtherTeamListItem.tsx | 5 +- .../pages/settings/admin-api.tsx | 6 +- .../pages/settings/admin/AdminOrgEditPage.tsx | 15 +- .../settings/attributes/AttributesForm.tsx | 5 +- .../attributes/attributes-edit-view.tsx | 6 +- .../pages/settings/delegationCredential.tsx | 10 +- .../settings/other-team-profile-view.tsx | 8 +- .../components/CreateANewPlatformForm.tsx | 22 +- .../ee/platform/pages/settings/members.tsx | 6 +- .../ee/sso/components/ConnectionInfo.tsx | 11 +- .../ee/sso/components/OIDCConnection.tsx | 31 +- .../ee/sso/components/SAMLConnection.tsx | 7 +- .../teams/components/CreateANewTeamForm.tsx | 22 +- .../ee/teams/components/EditMemberSheet.tsx | 11 +- .../ee/teams/components/EventTypesList.tsx | 5 +- .../components/MemberChangeRoleModal.tsx | 5 +- .../components/MemberInvitationModal.tsx | 11 +- .../ee/teams/components/MemberList.tsx | 8 +- .../ee/teams/components/TeamEventTypeForm.tsx | 7 +- .../teams/components/TeamInviteListItem.tsx | 5 +- .../ee/teams/components/TeamListItem.tsx | 5 +- .../features/ee/users/components/UserForm.tsx | 11 +- .../ee/users/components/UsersTable.tsx | 21 +- .../ee/users/pages/users-add-view.tsx | 6 +- .../ee/users/pages/users-edit-view.tsx | 6 +- .../components/WorkflowStepContainer.tsx | 11 +- .../features/ee/workflows/pages/index.tsx | 16 +- packages/features/embed/Embed.tsx | 23 +- .../components/CreateEventTypeForm.tsx | 7 +- .../EditWeightsForAllTeamMembers.tsx | 8 +- .../components/EventTypeDescription.tsx | 17 +- .../components/MultiDropdownSelect.tsx | 5 +- .../components/WeightDescription.tsx | 7 +- .../tabs/advanced/CustomEventTypeModal.tsx | 23 +- .../components/tabs/ai/AIEventController.tsx | 5 +- .../components/tabs/apps/EventAppsTab.tsx | 7 +- .../assignment/EventTeamAssignmentTab.tsx | 21 +- .../recurring/RecurringEventController.tsx | 5 +- .../components/tabs/setup/EventSetupTab.tsx | 5 +- .../tabs/webhooks/EventWebhooksTab.tsx | 7 +- .../features/form-builder/FormBuilder.tsx | 17 +- .../form-builder/FormBuilderField.tsx | 5 +- .../form/components/LocationSelect.tsx | 5 +- .../insights/components/BookingAtCell.tsx | 6 +- .../insights/filters/OrgTeamsFilter.tsx | 7 +- packages/features/kbar/Kbar.tsx | 5 +- .../settings/BookerLayoutSelector.tsx | 21 +- packages/features/settings/ThemeLabel.tsx | 5 +- .../outOfOffice/OutOfOfficeEntriesList.tsx | 8 +- packages/features/shell/SideBar.tsx | 5 +- .../shell/user-dropdown/ProfileDropdown.tsx | 5 +- .../shell/user-dropdown/UserDropdown.tsx | 11 +- .../components/AvailabilitySliderTable.tsx | 6 +- .../AvailabilitySchedulesContainer.tsx | 9 +- .../components/ConnectedAppsContainer.tsx | 9 +- .../components/EventScheduleItem.tsx | 5 +- .../components/EventTypeSelect.tsx | 5 +- .../UserTable/BulkActions/DynamicLink.tsx | 7 +- .../UserTable/BulkActions/EventTypesList.tsx | 5 +- .../BulkActions/MassAssignAttributes.tsx | 5 +- .../UserTable/BulkActions/TeamList.tsx | 5 +- .../UserTable/EditSheet/EditUserForm.tsx | 9 +- .../UserTable/EditSheet/EditUserSheet.tsx | 7 +- .../EditSheet/OrganizationBanner.tsx | 5 +- .../UserTable/PlatformManagedUsersTable.tsx | 8 +- .../webhooks/components/WebhookForm.tsx | 22 +- packages/lib/OgImages.tsx | 38 +- .../platform/atoms/connect/OAuthConnect.tsx | 6 +- .../atoms/connect/apple/AppleConnect.tsx | 29 +- .../DestinationCalendarSelector.tsx | 6 +- ...inationCalendarSettingsPlatformWrapper.tsx | 5 +- .../event-types/payments/PaymentForm.tsx | 16 +- .../EventPaymentsTabPlatformWrapper.tsx | 13 +- ...lectedCalendarsSettingsPlatformWrapper.tsx | 7 +- .../SelectedCalendarsSettingsWebWrapper.tsx | 7 +- .../base/src/components/Navbar/index.tsx | 17 +- .../examples/base/src/pages/[bookingUid].tsx | 35 +- .../examples/base/src/pages/booking.tsx | 13 +- .../examples/base/src/pages/bookings.tsx | 9 +- .../examples/base/src/pages/embed.tsx | 5 +- .../examples/base/src/pages/event-types.tsx | 22 +- .../examples/base/src/pages/index.tsx | 13 +- .../examples/base/src/pages/router.tsx | 5 +- packages/trpc/components/QueryCell.tsx | 5 +- .../date-range-picker/DateRangePicker.tsx | 8 +- packages/ui/components/form/step/FormStep.tsx | 6 +- .../popover/MeetingTimeInTimezones.tsx | 11 +- 250 files changed, 3200 insertions(+), 1089 deletions(-) create mode 100644 messages/en.json diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index e7dbf4ab507146..ca65cddd324e94 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -1,3 +1,4 @@ +import { useTranslations } from "next-intl"; import { RootProvider } from "fumadocs-ui/provider"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; @@ -19,14 +20,12 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { +const t = useTranslations("ui-playground-root-layout"); + return ( - + {children} diff --git a/apps/ui-playground/components/ui/TypeTable.tsx b/apps/ui-playground/components/ui/TypeTable.tsx index f9293e50a84a02..650da6aa6fc3d8 100644 --- a/apps/ui-playground/components/ui/TypeTable.tsx +++ b/apps/ui-playground/components/ui/TypeTable.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { getColorFormats, copyToClipboard } from "@/lib/colorUtils"; import React from "react"; @@ -29,6 +31,8 @@ interface CopyMenuProps { } const CopyMenu: React.FC = ({ color, className, onCopy }) => { +const t = useTranslations("color-type-table"); + const formats = getColorFormats(color, className); if (!formats) return null; @@ -37,24 +41,16 @@ const CopyMenu: React.FC = ({ color, className, onCopy }) => {
+ className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hex')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.rgb')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hsl')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.tailwind-class')}
); diff --git a/apps/ui-playground/components/ui/TypographyTable.tsx b/apps/ui-playground/components/ui/TypographyTable.tsx index 15b6f5a4561104..1079a4b5430d58 100644 --- a/apps/ui-playground/components/ui/TypographyTable.tsx +++ b/apps/ui-playground/components/ui/TypographyTable.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import React from "react"; import { Toaster } from "react-hot-toast"; @@ -33,14 +35,14 @@ interface CopyMenuProps { } const CopyMenu: React.FC = ({ style, onCopy }) => { +const t = useTranslations("typography-showcase"); + return (
+ className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-tailwind-class')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-css')}
); @@ -78,7 +78,10 @@ export const TypographyTable: React.FC = ({ sections }) => {section.description &&

{section.description}

}
- {section.styles.map((style, styleIndex) => ( + {section.styles.map((style, styleIndex) => { +const t = useTranslations("typography-showcase"); + +return (
@@ -88,18 +91,19 @@ export const TypographyTable: React.FC = ({ sections }) =>

{style.name}

{style.className}

-
The quick brown fox jumps over the lazy dog
+
{t('sample-text.pangram')}
-

Font: {style.specs.fontFamily}

-

Size: {style.specs.fontSize}px

-

Line Height: {style.specs.lineHeight}

-

Weight: {style.specs.weight}

+

{t('specs.font-family', { "styleSpecsFontFamily": style.specs.fontFamily })}

+

{t('specs.font-size', { "styleSpecsFontSize": style.specs.fontSize })}

+

{t('specs.line-height', { "styleSpecsLineHeight": style.specs.lineHeight })}

+

{t('specs.font-weight', { "styleSpecsWeight": style.specs.weight })}

- ))} + ) +})} ))} diff --git a/apps/ui-playground/content/design/components/alert.customIconColor.tsx b/apps/ui-playground/content/design/components/alert.customIconColor.tsx index efddf9c22bb293..8ceb4ba1752b0e 100644 --- a/apps/ui-playground/content/design/components/alert.customIconColor.tsx +++ b/apps/ui-playground/content/design/components/alert.customIconColor.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -9,16 +11,20 @@ const severities = ["neutral", "info", "warning", "error"] as const; export const CustomIconColorExample: React.FC = () => (
- {severities.map((severity) => ( + {severities.map((severity) => { +const t = useTranslations("ui-playground-alert-custom-icon-color"); + +return ( - ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/alert.customIcons.tsx b/apps/ui-playground/content/design/components/alert.customIcons.tsx index 1819b0dce3cf67..97ffefdd19d476 100644 --- a/apps/ui-playground/content/design/components/alert.customIcons.tsx +++ b/apps/ui-playground/content/design/components/alert.customIcons.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,16 +12,20 @@ const customIcons = ["info", "alert-triangle", "circle-x", "circle-check", "bell export const CustomIconsExample: React.FC = () => (
- {severities.map((severity, index) => ( + {severities.map((severity, index) => { +const t = useTranslations("ui-playground-alert-custom-icons"); + +return ( - ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/avatar.link.tsx b/apps/ui-playground/content/design/components/avatar.link.tsx index 61fc4ecf9e61ce..2795650a149489 100644 --- a/apps/ui-playground/content/design/components/avatar.link.tsx +++ b/apps/ui-playground/content/design/components/avatar.link.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -6,13 +8,17 @@ import { Avatar } from "@calcom/ui/components/avatar"; const sampleImage = "https://cal.com/stakeholder/peer.jpg"; -export const LinkExample: React.FC = () => ( +export const LinkExample: React.FC = () => { +const t = useTranslations("ui-playground-avatar-link"); + +return (
- - Clickable + + {t('labels.clickable-indicator')}
-); +) +}; diff --git a/apps/ui-playground/content/design/components/avatar.sizes.tsx b/apps/ui-playground/content/design/components/avatar.sizes.tsx index 078a626e7bb0b5..27ffe246ceed0d 100644 --- a/apps/ui-playground/content/design/components/avatar.sizes.tsx +++ b/apps/ui-playground/content/design/components/avatar.sizes.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,20 +12,28 @@ const sampleImage = "https://cal.com/stakeholder/peer.jpg"; export const SizesExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("avatar-sizes-demo"); + +return (
- + {size}
- ))} + ) +})}
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("avatar-sizes-demo"); + +return (
- + {size}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/badge.icons.tsx b/apps/ui-playground/content/design/components/badge.icons.tsx index de3fe763408fe4..a872618813ce83 100644 --- a/apps/ui-playground/content/design/components/badge.icons.tsx +++ b/apps/ui-playground/content/design/components/badge.icons.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -20,14 +22,18 @@ const variants = [ export const IconsExample: React.FC = () => (
- {variants.map((variant) => ( + {variants.map((variant) => { +const t = useTranslations("ui-playground-badge-icons"); + +return (
{variant} - Icon + {t('labels.icon')}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/badge.interactive.tsx b/apps/ui-playground/content/design/components/badge.interactive.tsx index 03d94ec3685526..8641173640d59a 100644 --- a/apps/ui-playground/content/design/components/badge.interactive.tsx +++ b/apps/ui-playground/content/design/components/badge.interactive.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -20,14 +22,16 @@ const variants = [ export const InteractiveExample: React.FC = () => (
- {variants.map((variant) => ( + {variants.map((variant) => { +const t = useTranslations("ui-playground-badge-interactive"); + +return (
- alert(`${variant} badge clicked!`)}> - Click me - - Clickable + alert(`${variant} badge clicked!`)}>{t('buttons.click-me')} + {t('labels.clickable-description')}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/button.loading.tsx b/apps/ui-playground/content/design/components/button.loading.tsx index 4a5b33c34e6bf7..6d41ae637e01dc 100644 --- a/apps/ui-playground/content/design/components/button.loading.tsx +++ b/apps/ui-playground/content/design/components/button.loading.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Row } from "@/app/components/row"; @@ -8,34 +10,44 @@ import { Button } from "@calcom/ui/components/button"; const colors = ["primary", "secondary", "minimal", "destructive"] as const; export const LoadingExample: React.FC = () => { +const t = useTranslations("ui-playground-button-loading"); + return (
-

Loading State

+

{t('sections.loading-state')}

- {colors.map((color) => ( + {colors.map((color) => { +const t = useTranslations("ui-playground-button-loading"); + +return (
- Loading + {t('labels.loading')}
- ))} + ) +})}
-

Loading with Icons

+

{t('sections.loading-with-icons')}

- {colors.map((color) => ( + {colors.map((color) => { +const t = useTranslations("ui-playground-button-loading"); + +return (
- With Icon + {t('labels.with-icon')}
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/button.onClick.tsx b/apps/ui-playground/content/design/components/button.onClick.tsx index 35f1418cd95f8f..f590d8e73f58c5 100644 --- a/apps/ui-playground/content/design/components/button.onClick.tsx +++ b/apps/ui-playground/content/design/components/button.onClick.tsx @@ -1,14 +1,20 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Row } from "@/app/components/row"; import { Button } from "@calcom/ui/components/button"; -export const OnClickExample: React.FC = () => ( +export const OnClickExample: React.FC = () => { +const t = useTranslations("button-onclick-demo"); + +return ( - + -); +) +}; diff --git a/apps/ui-playground/content/design/components/checkbox.description.tsx b/apps/ui-playground/content/design/components/checkbox.description.tsx index 8ae2473bcfb77d..4c2ce211c58366 100644 --- a/apps/ui-playground/content/design/components/checkbox.description.tsx +++ b/apps/ui-playground/content/design/components/checkbox.description.tsx @@ -1,15 +1,21 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { CheckboxField } from "@calcom/ui/components/form"; -export const DescriptionExample: React.FC = () => ( +export const DescriptionExample: React.FC = () => { +const t = useTranslations("ui-playground-checkbox-descriptions"); + +return (
- - - + + +
-); +) +}; diff --git a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx index 32e9cdcdc516a2..cea7310eb0766f 100644 --- a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx +++ b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx @@ -1,16 +1,22 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { CheckboxField } from "@calcom/ui/components/form"; -export const InfoIconExample: React.FC = () => ( +export const InfoIconExample: React.FC = () => { +const t = useTranslations("ui-playground-checkbox-info-icon"); + +return ( -); +) +}; diff --git a/apps/ui-playground/content/design/components/dialog.confirmation.tsx b/apps/ui-playground/content/design/components/dialog.confirmation.tsx index d3acc63ea37755..8bdb52cf57329d 100644 --- a/apps/ui-playground/content/design/components/dialog.confirmation.tsx +++ b/apps/ui-playground/content/design/components/dialog.confirmation.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -7,14 +9,14 @@ import { Button } from "@calcom/ui/components/button"; import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; export const ConfirmationExample: React.FC = () => { +const t = useTranslations("dialog-confirmation-demo"); + const [open, setOpen] = useState(false); return (
- + { color="destructive" onClick={() => { setOpen(false); - }}> - Delete - + }}>{t('buttons.confirm-delete')} diff --git a/apps/ui-playground/content/design/components/dialog.form.tsx b/apps/ui-playground/content/design/components/dialog.form.tsx index 7e7720ea490877..b9166e37d6c63d 100644 --- a/apps/ui-playground/content/design/components/dialog.form.tsx +++ b/apps/ui-playground/content/design/components/dialog.form.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -8,24 +10,24 @@ import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/com import { TextAreaField } from "@calcom/ui/components/form"; export const FormExample: React.FC = () => { +const t = useTranslations("dialog-form-playground"); + const [open, setOpen] = useState(false); const [formInput, setFormInput] = useState(""); return (
- +
- Your Feedback - (Optional) + <>{t.rich('forms.feedback-label-with-optional', { + component0: (chunks) => {chunks} + })} } value={formInput} @@ -38,14 +40,12 @@ export const FormExample: React.FC = () => { onClick={() => { setOpen(false); setFormInput(""); - }}> - Submit Feedback - + }}>{t('buttons.submit-feedback')}
-

Current Form Input:

+

{t('labels.current-form-input')}

             {formInput || "No input yet"}
diff --git a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx index 10fc247e3752d3..e87cd43593f682 100644 --- a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx +++ b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -24,17 +26,20 @@ const menuItems = [ kbd?: string; }[]; -export const ButtonTriggerExample: React.FC = () => ( +export const ButtonTriggerExample: React.FC = () => { +const t = useTranslations("dropdown-button-trigger-demo"); + +return (
{/* Default Button */}
- + - Actions + {t('labels.actions')} {menuItems.map((item) => ( {item.label} @@ -42,17 +47,17 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - Default + {t('variants.default')}
{/* Button with Icon */}
- + - Quick Actions + {t('labels.quick-actions')} {menuItems.map((item) => ( {item.label} @@ -60,7 +65,7 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - With Icon + {t('variants.with-icon')}
{/* Icon Button */} @@ -77,8 +82,9 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - Icon Only + {t('variants.icon-only')}
-); +) +}; diff --git a/apps/ui-playground/content/design/components/dropdown.complex.tsx b/apps/ui-playground/content/design/components/dropdown.complex.tsx index fed3f374aa6cba..be5a35d0c0724d 100644 --- a/apps/ui-playground/content/design/components/dropdown.complex.tsx +++ b/apps/ui-playground/content/design/components/dropdown.complex.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -13,32 +15,35 @@ import { DropdownMenuSeparator, } from "@calcom/ui/components/dropdown"; -export const ComplexExample: React.FC = () => ( +export const ComplexExample: React.FC = () => { +const t = useTranslations("dropdown-complex-demo"); + +return (
{/* Example 1: Complex Menu Structure */}
- + - My account - Profile - Billing - Settings - Keyboard Shortcuts + {t('labels.my-account')} + {t('menu-items.profile')} + {t('menu-items.billing')} + {t('menu-items.settings')} + {t('menu-items.keyboard-shortcuts')} - Team - Invite users - New team + {t('labels.team')} + {t('menu-items.invite-users')} + {t('menu-items.new-team')} - Github - Support - API + {t('menu-items.github')} + {t('menu-items.support')} + {t('menu-items.api')} - Complex Menu + {t('captions.complex-menu')}
{/* Example 2: Avatar with Icons */} @@ -46,24 +51,22 @@ export const ComplexExample: React.FC = () => ( - peer@cal.com + {t('labels.user-email')} - My account - Plan - Billing - Integrations - Module + {t('menu-items.my-account')} + {t('menu-items.plan')} + {t('menu-items.billing-with-icon')} + {t('menu-items.integrations')} + {t('menu-items.module')} - - Log out - + {t('menu-items.log-out')} - With Icons + {t('captions.with-icons')}
{/* Example 3: Simple Actions */} @@ -73,14 +76,15 @@ export const ComplexExample: React.FC = () => (
-); +) +}; diff --git a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx index 876276957d6030..4169f0e17f82b7 100644 --- a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx +++ b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx @@ -1,18 +1,24 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -export const CustomIconExample: React.FC = () => ( +export const CustomIconExample: React.FC = () => { +const t = useTranslations("empty-screen-custom-icon-demo"); + +return ( alert("Add Members clicked")} /> -); +) +}; diff --git a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx index a51833bc0dc4d3..0d269577bec8eb 100644 --- a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx +++ b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx @@ -1,28 +1,35 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -export const HtmlContentExample: React.FC = () => ( +export const HtmlContentExample: React.FC = () => { +const t = useTranslations("empty-screen-html-content-demo"); + +return ( - Custom Headline with HTML + {t.rich('headings.custom-with-html', { + component0: (chunks) => {chunks} + })} } description={
-

This is a custom description with multiple paragraphs.

-

- You can include any HTML content here. -

+

{t('descriptions.first-paragraph')}

+

{t.rich('descriptions.second-paragraph', { + component0: (chunks) => {chunks} + })}

} - buttonText="Learn More" + buttonText={t('buttons.learn-more')} buttonOnClick={() => alert("Learn More clicked")} /> -); +) +}; diff --git a/apps/ui-playground/content/design/components/form.basic.tsx b/apps/ui-playground/content/design/components/form.basic.tsx index 1768e7d50b03c7..57c740bf97c476 100644 --- a/apps/ui-playground/content/design/components/form.basic.tsx +++ b/apps/ui-playground/content/design/components/form.basic.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm } from "react-hook-form"; @@ -13,6 +15,8 @@ type FormValues = { }; export const BasicExample: React.FC = () => { +const t = useTranslations("form-basic-demo"); + const form = useForm({ defaultValues: { username: "", @@ -29,29 +33,25 @@ export const BasicExample: React.FC = () => {
- - + +
diff --git a/apps/ui-playground/content/design/components/form.specialFields.tsx b/apps/ui-playground/content/design/components/form.specialFields.tsx index 86dd9258e1b309..91930ea397e462 100644 --- a/apps/ui-playground/content/design/components/form.specialFields.tsx +++ b/apps/ui-playground/content/design/components/form.specialFields.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm } from "react-hook-form"; @@ -12,6 +14,8 @@ type FormValues = { }; export const SpecialFieldsExample: React.FC = () => { +const t = useTranslations("form-special-fields-demo"); + const form = useForm({ defaultValues: { age: undefined, @@ -27,25 +31,21 @@ export const SpecialFieldsExample: React.FC = () => {
- - + +
diff --git a/apps/ui-playground/content/design/components/input.values.tsx b/apps/ui-playground/content/design/components/input.values.tsx index c6835482c6439e..9c0466264175c6 100644 --- a/apps/ui-playground/content/design/components/input.values.tsx +++ b/apps/ui-playground/content/design/components/input.values.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,21 +12,25 @@ export const ValuesExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("ui-playground-input-examples"); + +return (
-

Size: {size}

+

{t('size-label', { "size": size })}

-

Default Value

+

{t('default-value-heading')}

-

Placeholder

- +

{t('placeholder-heading')}

+
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/input.widths.tsx b/apps/ui-playground/content/design/components/input.widths.tsx index 804f31f466143b..00698d5f1b6ece 100644 --- a/apps/ui-playground/content/design/components/input.widths.tsx +++ b/apps/ui-playground/content/design/components/input.widths.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,21 +12,25 @@ export const WidthsExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("ui-playground-input-widths"); + +return (
-

Size: {size}

+

{t('size-label', { "size": size })}

-

Full Width

- +

{t('full-width-heading')}

+
-

Auto Width

- +

{t('auto-width-heading')}

+
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/multiInputField.states.tsx b/apps/ui-playground/content/design/components/multiInputField.states.tsx index 82f4c20678270e..ce43ab9a695c9e 100644 --- a/apps/ui-playground/content/design/components/multiInputField.states.tsx +++ b/apps/ui-playground/content/design/components/multiInputField.states.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm, FormProvider } from "react-hook-form"; @@ -12,6 +14,8 @@ type FormValues = { }; export const StatesExample: React.FC = () => { +const t = useTranslations("multi-input-field-states"); + const methods = useForm(); return ( @@ -20,7 +24,7 @@ export const StatesExample: React.FC = () => {
-

Default State

+

{t('states.default.heading')}

fieldArrayName="defaultOptions" optionPlaceholders={["First option", "Second option", "Third option"]} @@ -29,7 +33,7 @@ export const StatesExample: React.FC = () => {
-

Disabled State

+

{t('states.disabled.heading')}

fieldArrayName="disabledOptions" optionPlaceholders={["Disabled option 1", "Disabled option 2"]} @@ -39,7 +43,7 @@ export const StatesExample: React.FC = () => {
-

Minimum Options (2)

+

{t('states.minimum-options.heading')}

fieldArrayName="minOptions" optionPlaceholders={["Required option 1", "Required option 2", "Optional option"]} diff --git a/apps/ui-playground/content/design/components/navigation.items.tsx b/apps/ui-playground/content/design/components/navigation.items.tsx index cc716d34ee326b..f9345189819764 100644 --- a/apps/ui-playground/content/design/components/navigation.items.tsx +++ b/apps/ui-playground/content/design/components/navigation.items.tsx @@ -1,15 +1,20 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Badge } from "@calcom/ui/components/badge"; import { NavigationItem } from "@calcom/ui/components/navigation"; -export const ItemsExample: React.FC = () => ( +export const ItemsExample: React.FC = () => { +const t = useTranslations("navigation-items-playground"); + +return (
-

Basic Items

+

{t('sections.basic-items')}

(
-

With Badge

+

{t('sections.with-badge')}

( name: "Teams", href: "#teams", icon: "users", - badge: New, + badge: {t('badges.new')}, }} />
-

Active State

+

{t('sections.active-state')}

(
-); +) +}; diff --git a/apps/ui-playground/content/design/components/rangeslider.popover.tsx b/apps/ui-playground/content/design/components/rangeslider.popover.tsx index 8805ed954871ab..d28b6edc1c1f73 100644 --- a/apps/ui-playground/content/design/components/rangeslider.popover.tsx +++ b/apps/ui-playground/content/design/components/rangeslider.popover.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -6,6 +8,8 @@ import { useState } from "react"; import { RangeSliderPopover } from "@calcom/ui/components/form"; export const PopoverExample: React.FC = () => { +const t = useTranslations("ui-playground-range-slider-popover"); + const [defaultRange, setDefaultRange] = useState([15, 30]); const [customRange, setCustomRange] = useState([5, 20]); const [largeRange, setLargeRange] = useState([0, 100]); @@ -14,9 +18,9 @@ export const PopoverExample: React.FC = () => {
-

Default Range (15-30 mins)

+

{t('examples.default-range-heading')}

{
-

Custom Range with Success Badge (5-20 mins)

+

{t('examples.custom-range-success-heading')}

{
-

Large Range with Warning Badge (0-100 mins)

+

{t('examples.large-range-warning-heading')}

{
-

Selected Values:

+

{t('results.selected-values-label')}

             {JSON.stringify(
               {
diff --git a/apps/ui-playground/content/design/components/section.basic.tsx b/apps/ui-playground/content/design/components/section.basic.tsx
index 5563890e15cf16..46a3bc2c502e79 100644
--- a/apps/ui-playground/content/design/components/section.basic.tsx
+++ b/apps/ui-playground/content/design/components/section.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,6 +9,8 @@ import { Switch } from "@calcom/ui/components/form";
 import { Section } from "@calcom/ui/components/section";
 
 export const BasicExample = () => {
+const t = useTranslations("section-basic-demo");
+
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -19,7 +23,7 @@ export const BasicExample = () => {
         
         {isOpen && (
           
-            
This is the main content of the section.

+            
{t('content.main-text')}

           
         )}
       
diff --git a/apps/ui-playground/content/design/components/select.async.tsx b/apps/ui-playground/content/design/components/select.async.tsx
index e6461cf60ac70f..60c6d758a82ae2 100644
--- a/apps/ui-playground/content/design/components/select.async.tsx
+++ b/apps/ui-playground/content/design/components/select.async.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useCallback, useState } from "react";
@@ -32,6 +34,8 @@ const searchCountries = (query: string) => {
 };
 
 export const AsyncExample: React.FC = () => {
+const t = useTranslations("ui-playground-select-async");
+
   const [asyncOptions, setAsyncOptions] = useState<{ value: string; label: string }[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -62,7 +66,7 @@ export const AsyncExample: React.FC = () => {
             }
           }}
           isLoading={isLoading}
-          placeholder="Search for a country..."
+          placeholder={t('placeholders.search-country')}
           noOptionsMessage={({ inputValue }) =>
             inputValue ? "No countries found" : "Start typing to search..."
           }
@@ -76,7 +80,7 @@ export const AsyncExample: React.FC = () => {
             }
           }}
           isLoading={isLoading}
-          placeholder="Search for a country... (small)"
+          placeholder={t('placeholders.search-country-small')}
           noOptionsMessage={({ inputValue }) =>
             inputValue ? "No countries found" : "Start typing to search..."
           }
diff --git a/apps/ui-playground/content/design/components/select.basic.tsx b/apps/ui-playground/content/design/components/select.basic.tsx
index eab7e3da644dcf..37c6598c0c351b 100644
--- a/apps/ui-playground/content/design/components/select.basic.tsx
+++ b/apps/ui-playground/content/design/components/select.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -14,6 +16,8 @@ const options = [
 ];
 
 export const BasicExample: React.FC = () => {
+const t = useTranslations("select-basic-demo");
+
   const [singleValue, setSingleValue] = useState<{ value: string; label: string } | null>(null);
 
   return (
@@ -24,7 +28,7 @@ export const BasicExample: React.FC = () => {
           value={singleValue}
           onChange={(newValue) => setSingleValue(newValue)}
           isClearable
-          placeholder="Choose a flavor..."
+          placeholder={t('placeholders.choose-flavor')}
           size="md"
         />
         
+      
+