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

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

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import React from "react";
 import { Toaster } from "react-hot-toast";
@@ -19,14 +21,17 @@ export const SpacingTable: React.FC<SpacingTableProps> = ({ tokens }) => {
       <Toaster position="bottom-right" />
       <div className="space-y-6">
         <div className="grid grid-cols-3 gap-4">
-          {tokens.map((token, index) => (
+          {tokens.map((token, index) =>  {
+const t = useTranslations("spacing-table");
+
+return (
             <div
               key={index}
               className="border-subtle bg-default group relative overflow-hidden rounded-lg border">
               <div className="flex items-center gap-4 p-4">
                 <div className="w-[100px] space-y-1">
                   <p className="text-emphasis text-sm font-medium">
-                    {token.name === "px" ? "px" : `${token.name} (${token.pixels})`}
+                    {token.name === "px" ? t('token.display-format_0') : t('token.display-format_1', { "tokenName": token.name, "tokenPixels": token.pixels })}
                   </p>
                 </div>
                 <div className="bg-subtle relative h-8 rounded">
@@ -37,7 +42,8 @@ export const SpacingTable: React.FC<SpacingTableProps> = ({ tokens }) => {
                 </div>
               </div>
             </div>
-          ))}
+          )
+})}
         </div>
       </div>
     </>

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

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -9,14 +11,18 @@ const severities = ["neutral", "info", "warning", "error"] as const;
 export const BasicExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="not-prose space-y-4">
-      {severities.map((severity) => (
+      {severities.map((severity) =>  {
+const t = useTranslations("alert-basic-demo");
+
+return (
         <Alert
           key={severity}
           severity={severity}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert`}
+          title={t('titles.severity-alert', { "severityCharAt0ToUpperCaseSeveritySlice1": severity.charAt(0).toUpperCase() + severity.slice(1) })}
           message={`This is a ${severity} alert message to show important information to users.`}
         />
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );

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

@@ -1,25 +1,31 @@
 "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 IndicatorExample: React.FC = () => (
+export const IndicatorExample: React.FC = () =>  {
+const t = useTranslations("avatar-indicator-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <Avatar
           size="md"
-          alt="With indicator"
+          alt={t('alt-text.with-indicator')}
           imageSrc={sampleImage}
           indicator={
             <div className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white" />
           }
         />
-        <span className="text-subtle text-xs">With Status Indicator</span>
+        <span className="text-subtle text-xs">{t('labels.status-indicator-description')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

apps/ui-playground/content/design/components/badge.dots.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 DotsExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-4">
-      {variants.map((variant) => (
+      {variants.map((variant) =>  {
+const t = useTranslations("badge-dots-demo");
+
+return (
         <div key={variant} className="flex flex-col items-center gap-2">
           <Badge variant={variant} withDot>
             {variant}
           </Badge>
-          <span className="text-subtle text-xs">Dot</span>
+          <span className="text-subtle text-xs">{t('labels.dot-indicator')}</span>
         </div>
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );

apps/ui-playground/content/design/components/button.icons.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 IconsExample: React.FC = () => (
+export const IconsExample: React.FC = () =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       <div>
-        <h3 className="text-default mb-4 text-sm">Start Icon</h3>
+        <h3 className="text-default mb-4 text-sm">{t('sections.start-icon-heading')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} StartIcon="calendar">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">Start Icon</span>
+              <span className="text-subtle text-xs">{t('labels.start-icon-caption')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
 
       <div>
-        <h3 className="text-default mb-4 text-sm">End Icon</h3>
+        <h3 className="text-default mb-4 text-sm">{t('sections.end-icon-heading')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} EndIcon="arrow-right">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">End Icon</span>
+              <span className="text-subtle text-xs">{t('labels.end-icon-caption')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

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

@@ -1,31 +1,37 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Checkbox } from "@calcom/ui/components/form";
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FC = () =>  {
+const t = useTranslations("checkbox-basic-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap gap-4">
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-unchecked" />
-        <span className="text-subtle text-xs">Unchecked</span>
+        <span className="text-subtle text-xs">{t('states.unchecked')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-checked" defaultChecked />
-        <span className="text-subtle text-xs">Checked</span>
+        <span className="text-subtle text-xs">{t('states.checked')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-disabled" disabled />
-        <span className="text-subtle text-xs">Disabled</span>
+        <span className="text-subtle text-xs">{t('states.disabled')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-disabled-checked" disabled defaultChecked />
-        <span className="text-subtle text-xs">Disabled Checked</span>
+        <span className="text-subtle text-xs">{t('states.disabled-checked')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

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

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,23 +9,22 @@ import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 
 export const BasicExample: React.FC = () => {
+const t = useTranslations("dialog-basic-demo");
+
   const [open, setOpen] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="space-y-2">
-        <Button onClick={() => setOpen(true)}>Open Basic Dialog</Button>
+        <Button onClick={() => setOpen(true)}>{t('buttons.open-dialog')}</Button>
         <Dialog open={open} onOpenChange={setOpen}>
           <DialogContent
             title="Basic Dialog"
             description="This is a basic dialog with a title and description.">
-            <p className="text-default text-sm">
-              Dialogs are used to display content that requires user attention or interaction. They appear
-              above the page content and must be closed before interacting with the page again.
-            </p>
+            <p className="text-default text-sm">{t('content.description')}</p>
             <DialogFooter>
               <DialogClose />
-              <Button>Action</Button>
+              <Button>{t('buttons.action')}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>

apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -12,27 +14,31 @@ import {
   DropdownMenuSeparator,
 } from "@calcom/ui/components/dropdown";
 
-export const AvatarTriggerExample: React.FC = () => (
+export const AvatarTriggerExample: React.FC = () =>  {
+const t = useTranslations("dropdown-avatar-trigger");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-8">
       <div className="flex flex-col items-center gap-2">
         <Dropdown>
           <DropdownMenuTrigger asChild>
             <button className="cursor-pointer">
-              <Avatar size="sm" imageSrc="https://cal.com/stakeholder/peer.jpg" alt="Avatar" />
+              <Avatar size="sm" imageSrc="https://cal.com/stakeholder/peer.jpg" alt={t('avatar.alt-text')} />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuLabel>Profile</DropdownMenuLabel>
+            <DropdownMenuLabel>{t('menu.profile-label')}</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownItem>View Profile</DropdownItem>
-            <DropdownItem>Settings</DropdownItem>
+            <DropdownItem>{t('menu.view-profile')}</DropdownItem>
+            <DropdownItem>{t('menu.settings')}</DropdownItem>
             <DropdownMenuSeparator />
-            <DropdownItem className="text-error">Sign out</DropdownItem>
+            <DropdownItem className="text-error">{t('menu.sign-out')}</DropdownItem>
           </DropdownMenuContent>
         </Dropdown>
-        <span className="text-subtle text-xs">Avatar Menu</span>
+        <span className="text-subtle text-xs">{t('demo.caption')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};

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

@@ -1,37 +1,43 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
-export const BorderExample: React.FC = () => (
+export const BorderExample: React.FC = () =>  {
+const t = useTranslations("empty-screen-border-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       {/* Without Border */}
       <div>
-        <h4 className="text-emphasis mb-4 text-sm font-medium">Without Border</h4>
+        <h4 className="text-emphasis mb-4 text-sm font-medium">{t('sections.without-border')}</h4>
         <EmptyScreen
           Icon="grid-3x3"
           headline="No apps installed"
-          description="Browse available apps in the marketplace"
-          buttonText="Browse Apps"
+          description={t('empty-states.no-apps.description')}
+          buttonText={t('buttons.browse-apps')}
           buttonOnClick={() => alert("Browse Apps clicked")}
           border={false}
         />
       </div>
 
       {/* With Solid Border */}
       <div>
-        <h4 className="text-emphasis mb-4 text-sm font-medium">With Solid Border</h4>
+        <h4 className="text-emphasis mb-4 text-sm font-medium">{t('sections.with-solid-border')}</h4>
         <EmptyScreen
           Icon="mail"
           headline="No messages"
-          description="Your inbox is empty"
-          buttonText="Compose"
+          description={t('empty-states.no-messages.description')}
+          buttonText={t('buttons.compose')}
           buttonOnClick={() => alert("Compose clicked")}
           dashedBorder={false}
         />
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};