[DRAFT] refactor: Run i18n-pro-codemod Campaign shard

apps/ui-playground/app/(home)/page.tsx

@@ -1,11 +1,11 @@
+import { useTranslations } from "next-intl";
 export default function Page() {
+const t = useTranslations("homepage-hero");
+
   return (
     <div className="font-cal -mt-16 flex  min-h-screen w-screen items-center justify-center border pt-16 text-center ">
       <div>
-        <h1 className="text-7xl leading-none md:text-8xl">
-          Open UI for absolutely
-          <br /> everyone
-        </h1>
+        <h1 className="text-7xl leading-none md:text-8xl">{t('heading.open-ui-for-absolutely')}<br />{t('heading.everyone')}</h1>
       </div>
     </div>
   );

apps/ui-playground/components/ui/IconGrid.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import React, { useState, useMemo } from "react";
 import { Toaster } from "react-hot-toast";
@@ -160,20 +162,22 @@ interface CopyMenuProps {
 }
 
 const CopyMenu: React.FC<CopyMenuProps> = ({ name, onCopy }) => {
+const t = useTranslations("icon-grid-demo");
+
   return (
     <div className="absolute inset-2 flex items-center justify-center bg-black/10 opacity-0 transition-opacity group-hover:opacity-100">
       <div className="bg-default space-y-1 rounded-md p-2 shadow-lg">
         <button
           onClick={() => onCopy(`<Icon name="${name}" className="h-4 w-4" />`)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy Component
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-component')}</button>
       </div>
     </div>
   );
 };
 
 export const IconGrid: React.FC<IconGridProps> = ({ className }) => {
+const t = useTranslations("icon-grid-demo");
+
   const [searchQuery, setSearchQuery] = useState("");
 
   const handleCopy = async (value: string) => {
@@ -344,7 +348,7 @@ export const IconGrid: React.FC<IconGridProps> = ({ className }) => {
         <div className="mb-8">
           <input
             type="text"
-            placeholder="Search icons..."
+            placeholder={t('inputs.search-placeholder')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="border-subtle bg-default text-emphasis focus:ring-emphasis placeholder:text-subtle w-full rounded-md border px-4 py-2 focus:outline-none focus:ring-2"

apps/ui-playground/content/design/components/alert.actions.tsx

@@ -1,28 +1,34 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Alert } from "@calcom/ui/components/alert";
 
 const severities = ["neutral", "info", "warning", "error"] as const;
 
-export const ActionsExample: React.FC = () => (
+export const ActionsExample: React.FC = () => {
+const t = useTranslations("alert-actions-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="no-prose space-y-4">
       {severities.map((severity) => (
         <Alert
           key={severity}
           severity={severity}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert with Actions`}
-          message={`This is a ${severity} alert with action buttons.`}
+          title={t('title.severity-alert-with-actions', { "severity": severity.charAt(0).toUpperCase() + severity.slice(1) })}
+          message={t('messages.alert-with-action-buttons', { "severity": severity })}
           actions={
             <div className="flex space-x-2">
-              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">Dismiss</button>
-              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">View</button>
+              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">{t('actions.dismiss')}</button>
+              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">{t('actions.view')}</button>
             </div>
           }
         />
       ))}
     </div>
   </RenderComponentWithSnippet>
 );
+};

apps/ui-playground/content/design/components/avatar.image.tsx

@@ -1,22 +1,28 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Avatar } from "@calcom/ui/components/avatar";
 
 const sampleImage = "https://cal.com/stakeholder/peer.jpg";
 
-export const ImageExample: React.FC = () => (
+export const ImageExample: React.FC = () =>  {
+const t = useTranslations("avatar-image-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-8">
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="With image" imageSrc={sampleImage} />
-        <span className="text-subtle text-xs">With Image</span>
+        <Avatar size="md" alt={t('alt-text.with-image')} imageSrc={sampleImage} />
+        <span className="text-subtle text-xs">{t('labels.with-image')}</span>
       </div>
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="Without image" imageSrc="https://cal.com/avatar.svg" />
-        <span className="text-subtle text-xs">Without Image</span>
+        <Avatar size="md" alt={t('alt-text.without-image')} imageSrc="https://cal.com/avatar.svg" />
+        <span className="text-subtle text-xs">{t('labels.without-image')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

apps/ui-playground/content/design/components/avatar.tooltip.tsx

@@ -1,18 +1,24 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Avatar } from "@calcom/ui/components/avatar";
 
 const sampleImage = "https://cal.com/stakeholder/peer.jpg";
 
-export const TooltipExample: React.FC = () => (
+export const TooltipExample: React.FC = () =>  {
+const t = useTranslations("avatar-tooltip-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="With tooltip" imageSrc={sampleImage} title="Hover me!" />
-        <span className="text-subtle text-xs">Hover to see tooltip</span>
+        <Avatar size="md" alt={t('avatar.alt-text')} imageSrc={sampleImage} title={t('tooltip.hover-message')} />
+        <span className="text-subtle text-xs">{t('instructions.hover-tooltip')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

apps/ui-playground/content/design/components/button.disabled.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
@@ -7,36 +9,48 @@ import { Button } from "@calcom/ui/components/button";
 
 const colors = ["primary", "secondary", "minimal", "destructive"] as const;
 
-export const DisabledExample: React.FC = () => (
+export const DisabledExample: React.FC = () =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       <div>
-        <h3 className="text-default mb-4 text-sm">Disabled State</h3>
+        <h3 className="text-default mb-4 text-sm">{t('headings.disabled-state')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} disabled>
                 {color}
               </Button>
-              <span className="text-subtle text-xs">Disabled</span>
+              <span className="text-subtle text-xs">{t('labels.disabled')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
 
       <div>
-        <h3 className="text-default mb-4 text-sm">Disabled with Icons</h3>
+        <h3 className="text-default mb-4 text-sm">{t('headings.disabled-with-icons')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} disabled StartIcon="calendar">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">With Icon</span>
+              <span className="text-subtle text-xs">{t('labels.with-icon')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

apps/ui-playground/content/design/components/button.variant.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
@@ -9,12 +11,15 @@ const variants = ["button", "icon"] as const;
 const colors = ["primary", "secondary", "minimal", "destructive"] as const;
 const sizes = ["xs", "sm", "base", "lg"] as const;
 
-export const VariantExample: React.FC = () => (
+export const VariantExample: React.FC = () => {
+const t = useTranslations("button-variant-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       {variants.map((variant) => (
         <div key={variant} className="space-y-6">
-          <h3 className="text-default text-sm capitalize">{variant === "button" ? "Default" : variant}</h3>
+          <h3 className="text-default text-sm capitalize">{variant === "button" ? t('variant-labels.default') : variant}</h3>
           <div className="space-y-6">
             {colors.map((color) => (
               <div key={color} className="space-y-2">
@@ -41,3 +46,4 @@ export const VariantExample: React.FC = () => (
     </div>
   </RenderComponentWithSnippet>
 );
+};

apps/ui-playground/content/design/components/checkbox.labelPosition.tsx

@@ -1,24 +1,30 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { CheckboxField } from "@calcom/ui/components/form";
 
-export const LabelPositionExample: React.FC = () => (
+export const LabelPositionExample: React.FC = () =>  {
+const t = useTranslations("checkbox-label-position-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-4">
       <CheckboxField
-        description="Description with label above (default on mobile)"
+        description={t('descriptions.label-above-mobile-default')}
         id="label-above"
-        label="Label Above"
+        label={t('labels.above-position')}
       />
       <div className="sm:min-w-[400px]">
         <CheckboxField
-          description="Description with label to the side (on larger screens)"
+          description={t('descriptions.label-side-desktop')}
           id="label-side"
-          label="Label to the Side"
+          label={t('labels.side-position')}
         />
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

apps/ui-playground/content/design/components/dialog.largeContent.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,48 +9,37 @@ import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 
 export const LargeContentExample: React.FC = () => {
+const t = useTranslations("dialog-large-content-demo");
+
   const [open, setOpen] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="space-y-2">
-        <Button color="secondary" onClick={() => setOpen(true)}>
-          Open Large Content Dialog
-        </Button>
+        <Button color="secondary" onClick={() => setOpen(true)}>{t('buttons.open-dialog')}</Button>
         <Dialog open={open} onOpenChange={setOpen}>
           <DialogContent
-            title="Terms and Conditions"
-            description="Please review our terms and conditions carefully"
+            title={t('dialog.title')}
+            description={t('dialog.description')}
             enableOverflow>
             <div className="space-y-6">
               {Array.from({ length: 5 }).map((_, i) => (
                 <div key={i} className="space-y-4">
-                  <h3 className="text-emphasis font-semibold">Section {i + 1}</h3>
-                  <p className="text-default text-sm">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus
-                    hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend
-                    nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis
-                    nisl tempor.
-                  </p>
-                  <p className="text-default text-sm">
-                    Suspendisse in orci enim. Integer vel sapien at risus ultrices ornare nec sit amet nibh.
-                    Duis blandit lectus ac odio rhoncus non congue diam bibendum. Aliquam erat volutpat.
-                  </p>
+                  <h3 className="text-emphasis font-semibold">{t('content.section-heading', { "i": i + 1 })}</h3>
+                  <p className="text-default text-sm">{t('content.lorem-paragraph-one')}</p>
+                  <p className="text-default text-sm">{t('content.lorem-paragraph-two')}</p>
                   {i === 2 && (
                     <div className="border-subtle rounded-lg border p-4 shadow-sm">
-                      <h4 className="text-emphasis mb-2 font-medium">Important Notice</h4>
-                      <p className="text-default text-sm">
-                        This is a highlighted section within the content to demonstrate how different UI
-                        elements appear within a scrollable dialog.
-                      </p>
+                      <h4 className="text-emphasis mb-2 font-medium">{t('notices.important-heading')}</h4>
+                      <p className="text-default text-sm">{t('notices.important-description')}</p>
                     </div>
                   )}
                 </div>
               ))}
             </div>
             <DialogFooter>
-              <DialogClose>Decline</DialogClose>
-              <Button>Accept Terms</Button>
+              <DialogClose>{t('buttons.decline')}</DialogClose>
+              <Button>{t('buttons.accept-terms')}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>

apps/ui-playground/content/design/components/emptyScreen.basic.tsx

@@ -1,17 +1,23 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FC = () =>  {
+const t = useTranslations("empty-screen-basic");
+
+return (
   <RenderComponentWithSnippet>
     <EmptyScreen
       Icon="calendar"
-      headline="No upcoming meetings"
-      description="Create a meeting to get started"
-      buttonText="Create Meeting"
+      headline={t('headlines.no-upcoming-meetings')}
+      description={t('messages.no-meetings-description')}
+      buttonText={t('buttons.create-meeting')}
       buttonOnClick={() => alert("Create Meeting clicked")}
     />
   </RenderComponentWithSnippet>
-);
+)
+};