codemod · codemod · Nov 4, 2025 · Nov 4, 2025
diff --git a/apps/ui-playground/app/components/render.tsx b/apps/ui-playground/app/components/render.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { type PropsWithChildren, useState } from "react";
 
@@ -11,6 +13,8 @@ type Props = {
 };
 
 export const RenderComponentWithSnippet: React.FC<PropsWithChildren<Props>> = (props) => {
+const t = useTranslations("component-code-snippet-renderer");
+
   const [open, setOpen] = useState(false);
   // const snippet =
   //   props.customCodeSnippet ??
@@ -32,9 +36,7 @@ export const RenderComponentWithSnippet: React.FC<PropsWithChildren<Props>> = (p
           color="minimal"
           onClick={() => {
             setOpen(!open);
-          }}>
-          Code (WIP)
-        </Button>
+          }}>{t('buttons.show-code-wip')}</Button>
       </div>
 
       <div

diff --git 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 (
     <html lang="en">
       <head>
-        <style>{`
-          :root {
-            --font-inter: ${inter.style.fontFamily.replace(/\'/g, "")};
-          }
-        `}</style>
+        <style>{t('styles.font-inter-css-variable', { "interStyleFontFamilyReplaceG": inter.style.fontFamily.replace(/\'/g, "") })}</style>
       </head>
       <body className={`${inter.variable} antialiased`}>
         <RootProvider>{children}</RootProvider>

diff --git 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<CopyMenuProps> = ({ 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<CopyMenuProps> = ({ color, className, onCopy }) => {
       <div className="bg-default space-y-1 rounded-md p-2 shadow-lg">
         <button
           onClick={() => onCopy(formats.hex)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy as HEX
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hex')}</button>
         <button
           onClick={() => onCopy(formats.rgb)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy as RGB
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.rgb')}</button>
         <button
           onClick={() => onCopy(formats.hsl)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy as HSL
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hsl')}</button>
         <button
           onClick={() => onCopy(formats.tailwind)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy Tailwind Class
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.tailwind-class')}</button>
       </div>
     </div>
   );

diff --git 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,24 +35,22 @@ interface CopyMenuProps {
 }
 
 const CopyMenu: React.FC<CopyMenuProps> = ({ style, onCopy }) => {
+const t = useTranslations("typography-showcase");
+
   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(style.className)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy Tailwind Class
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-tailwind-class')}</button>
         <button
           onClick={() =>
             onCopy(`font-family: ${style.specs.fontFamily};
 font-size: ${style.specs.fontSize}px;
 line-height: ${style.specs.lineHeight};
 font-weight: ${style.specs.weight};`)
           }
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy CSS
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-css')}</button>
       </div>
     </div>
   );
@@ -78,7 +78,10 @@ export const TypographyTable: React.FC<TypographyTableProps> = ({ sections }) =>
               {section.description && <p className="text-subtle mt-2 text-base">{section.description}</p>}
             </div>
             <div className="grid gap-6">
-              {section.styles.map((style, styleIndex) => (
+              {section.styles.map((style, styleIndex) =>  {
+const t = useTranslations("typography-showcase");
+
+return (
                 <div
                   key={styleIndex}
                   className="border-subtle bg-default group relative overflow-hidden rounded-lg border p-6">
@@ -88,18 +91,19 @@ export const TypographyTable: React.FC<TypographyTableProps> = ({ sections }) =>
                         <p className="text-emphasis text-sm font-medium">{style.name}</p>
                         <p className="text-subtle mt-1 text-xs">{style.className}</p>
                       </div>
-                      <div className={style.className}>The quick brown fox jumps over the lazy dog</div>
+                      <div className={style.className}>{t('sample-text.pangram')}</div>
                     </div>
                     <div className="text-subtle space-y-2 text-sm">
-                      <p>Font: {style.specs.fontFamily}</p>
-                      <p>Size: {style.specs.fontSize}px</p>
-                      <p>Line Height: {style.specs.lineHeight}</p>
-                      <p>Weight: {style.specs.weight}</p>
+                      <p>{t('specs.font-family', { "styleSpecsFontFamily": style.specs.fontFamily })}</p>
+                      <p>{t('specs.font-size', { "styleSpecsFontSize": style.specs.fontSize })}</p>
+                      <p>{t('specs.line-height', { "styleSpecsLineHeight": style.specs.lineHeight })}</p>
+                      <p>{t('specs.font-weight', { "styleSpecsWeight": style.specs.weight })}</p>
                     </div>
                   </div>
                   <CopyMenu style={style} onCopy={handleCopy} />
                 </div>
-              ))}
+              )
+})}
             </div>
           </div>
         ))}

diff --git 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 = () => (
   <RenderComponentWithSnippet>
     <div className="not-prose space-y-4">
-      {severities.map((severity) => (
+      {severities.map((severity) =>  {
+const t = useTranslations("ui-playground-alert-custom-icon-color");
+
+return (
         <Alert
           key={severity}
           severity={severity}
           CustomIcon="bell"
           customIconColor="text-emphasis"
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert with Custom Icon Color`}
+          title={t('alerts.severity-with-custom-icon-title', { "severityCharAt0ToUpperCaseSeveritySlice1": severity.charAt(0).toUpperCase() + severity.slice(1) })}
           message="This alert uses a custom icon color."
         />
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git 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 = () => (
   <RenderComponentWithSnippet>
     <div className="not-prose space-y-4">
-      {severities.map((severity, index) => (
+      {severities.map((severity, index) =>  {
+const t = useTranslations("ui-playground-alert-custom-icons");
+
+return (
         <Alert
           key={severity}
           severity={severity}
           // @ts-expect-error Didnt type this as IconName for CustomIcon
           CustomIcon={customIcons[index % customIcons.length]}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert with Custom Icon`}
+          title={t('alert.title-with-custom-icon', { "severityCharAt0ToUpperCaseSeveritySlice1": severity.charAt(0).toUpperCase() + severity.slice(1) })}
           message="This alert uses a custom icon instead of the default one."
         />
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git a/apps/ui-playground/content/design/components/avatar.link.tsx b/apps/ui-playground/content/design/components/avatar.link.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 LinkExample: React.FC = () => (
+export const LinkExample: React.FC = () =>  {
+const t = useTranslations("ui-playground-avatar-link");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="With link" imageSrc={sampleImage} href="https://cal.com" />
-        <span className="text-subtle text-xs">Clickable</span>
+        <Avatar size="md" alt={t('examples.with-link-alt-text')} imageSrc={sampleImage} href="https://cal.com" />
+        <span className="text-subtle text-xs">{t('labels.clickable-indicator')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git 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 = () => (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
-      {sizes.map((size) => (
+      {sizes.map((size) =>  {
+const t = useTranslations("avatar-sizes-demo");
+
+return (
         <div key={size} className="flex flex-col items-center gap-2">
-          <Avatar size={size} alt={`${size} avatar`} imageSrc={sampleImage} />
+          <Avatar size={size} alt={t('alt-text.circular-avatar', { "size": size })} imageSrc={sampleImage} />
           <span className="text-subtle text-xs">{size}</span>
         </div>
-      ))}
+      )
+})}
     </div>
     <div className="mt-2 flex items-center gap-4">
-      {sizes.map((size) => (
+      {sizes.map((size) =>  {
+const t = useTranslations("avatar-sizes-demo");
+
+return (
         <div key={size} className="flex flex-col items-center gap-2">
-          <Avatar size={size} alt={`${size} avatar`} imageSrc={sampleImage} shape="square" />
+          <Avatar size={size} alt={t('alt-text.square-avatar', { "size": size })} imageSrc={sampleImage} shape="square" />
           <span className="text-subtle text-xs">{size}</span>
         </div>
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git 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 = () => (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-4">
-      {variants.map((variant) => (
+      {variants.map((variant) =>  {
+const t = useTranslations("ui-playground-badge-icons");
+
+return (
         <div key={variant} className="flex flex-col items-center gap-2">
           <Badge variant={variant} startIcon="bell">
             {variant}
           </Badge>
-          <span className="text-subtle text-xs">Icon</span>
+          <span className="text-subtle text-xs">{t('labels.icon')}</span>
         </div>
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git 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 = () => (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-4">
-      {variants.map((variant) => (
+      {variants.map((variant) =>  {
+const t = useTranslations("ui-playground-badge-interactive");
+
+return (
         <div key={variant} className="flex flex-col items-center gap-2">
-          <Badge variant={variant} onClick={() => alert(`${variant} badge clicked!`)}>
-            Click me
-          </Badge>
-          <span className="text-subtle text-xs">Clickable</span>
+          <Badge variant={variant} onClick={() => alert(`${variant} badge clicked!`)}>{t('buttons.click-me')}</Badge>
+          <span className="text-subtle text-xs">{t('labels.clickable-description')}</span>
         </div>
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );