feat: Apply i18n codemods

apps/frontend/app/(website)/[...path]/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "template-not-found": "Template not found"
+}

apps/frontend/app/(website)/[...path]/page.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import dynamic from "next/dynamic";
 import { draftMode } from "next/headers";
 
@@ -31,6 +32,8 @@ export async function generateMetadata(
 }
 
 export default async function DynamicRoute(props: RouteProps) {
+const { t } = useTranslation("(website)/[...path]");
+
   const initial = await loadSanityPageByRouteProps(props);
 
   if (!initial.data) {
@@ -64,7 +67,7 @@ export default async function DynamicRoute(props: RouteProps) {
 
     // %CLI/TEMPLATE-CASE%
     default:
-      return <div>Template not found</div>;
+      return <div>{t('template-not-found')}</div>;
   }
 }
 

apps/frontend/app/(website)/studio/features/FirstLoginExperience/FirstLoginExperience.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { getIntroJsOptions } from "@features/FirstLoginExperience/config";
 import { Lightbulb } from "@phosphor-icons/react";
 import { IconButton } from "@studio/components/button/IconButton";
@@ -6,6 +7,8 @@ import "intro.js/introjs.css";
 import { useEffect, useState } from "react";
 
 export const FirstLoginExperience = () => {
+const { t } = useTranslation("(website)/studio/features/FirstLoginExperience");
+
   const [isEnabled, setIsEnabled] = useState(false);
   const onStart = () => {
     setIsEnabled(true);
@@ -48,7 +51,7 @@ export const FirstLoginExperience = () => {
       />
       <IconButton
         Icon={Lightbulb}
-        text="Tour"
+        text={t('tour')}
         onClick={onStart}
         hint="Explain the app"
       />

apps/frontend/app/(website)/studio/features/FirstLoginExperience/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "tour": "\"Tour\""
+}

apps/frontend/app/(website)/studio/features/GHRun/components/Dropdown.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "@/utils";
 import {
   Combobox,
@@ -33,6 +34,8 @@ export const DropdownSelector = <T,>({
   isLoading = false,
   loadingMessage = "Fetching",
 }: DropdownSelectorProps<T>) => {
+const { t } = useTranslation("(website)/studio/features/GHRun/components");
+
   const [repoSelectorOpen, setRepoSelectorOpen] = useState(false);
   const [valueToFilterBy, setValueToFilterBy] = useState<string>();
 
@@ -102,7 +105,7 @@ export const DropdownSelector = <T,>({
               </div>
               <Combobox
                 autoSelect
-                placeholder="Search"
+                placeholder={t('search')}
                 className="combobox w-full"
                 // Ariakit's Combobox manually triggers a blur event on virtually
                 // blurred items, making them work as if they had actual DOM

apps/frontend/app/(website)/studio/features/GHRun/components/RepositoryModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type {
   CodemodRunRequest,
   GHBranch,
@@ -32,6 +33,8 @@ export const RepositoryModal = ({
   repositoriesToShow,
   areReposLoading,
 }: RepositoryModalProps) => {
+const { t } = useTranslation("(website)/studio/features/GHRun/components");
+
   const [selectedRepository, setSelectedRepository] =
     useState<GithubRepository>();
   const selectRepository = (name: GithubRepository["full_name"]) => {
@@ -81,12 +84,12 @@ export const RepositoryModal = ({
 
   return isRepositoryModalShown ? (
     <Modal onClose={hideRepositoryModal} centered transparent={false}>
-      <h2 className="text-center p-2">Run Codemod on Github branch</h2>
+      <h2 className="text-center p-2">{t('run-codemod-on-github-branch')}</h2>
       <DropdownSelector
         isLoading={areReposLoading}
         loadingMessage="Fetching repos"
         items={repositoriesToShow}
-        placeholder="Select a repository (required)"
+        placeholder={t('select-a-repository-required')}
         onSelect={selectRepository}
         selectedValue={selectedRepository}
         propName="full_name"
@@ -96,7 +99,7 @@ export const RepositoryModal = ({
         isLoading={areBranchesLoading}
         items={branchesToShow}
         loadingMessage="Fetching branches"
-        placeholder="Select a branch (required)"
+        placeholder={t('select-a-branch-required')}
         onSelect={selectBranch}
         selectedValue={selectedBranch}
         propName="name"
@@ -108,9 +111,7 @@ export const RepositoryModal = ({
         onClick={handleButtonClick}
         hint={<p className="font-normal">{renderHint()}</p>}
         disabled={isButtonDisabled}
-      >
-        Run Codemod
-      </Button>
+      >{t('run-codemod')}</Button>
     </Modal>
   ) : null;
 };

apps/frontend/app/(website)/studio/features/GHRun/components/UserPromptModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import Modal from "@studio/components/Modal";
 import { Button } from "@studio/components/ui/button";
 
@@ -12,6 +13,8 @@ export const UserPromptModal = ({
   onApprove,
   isModalShown,
 }: UserPromptModalProps) => {
+const { t } = useTranslation("(website)/studio/features/GHRun/components");
+
   return isModalShown ? (
     <Modal onClose={onReject} centered transparent={false} width="w-3/12">
       <h2 className="text-center text-xl p-2 font-bold">
@@ -20,17 +23,13 @@ export const UserPromptModal = ({
         }
       </h2>
       <div className="flex flex-row items-center justify-center w-100">
-        <Button className="m-3 text-amber-50" onClick={onApprove}>
-          Yes
-        </Button>
+        <Button className="m-3 text-amber-50" onClick={onApprove}>{t('yes')}</Button>
 
         <Button
           className="m-3 text-amber-50"
           variant="destructive"
           onClick={onReject}
-        >
-          No
-        </Button>
+        >{t('no')}</Button>
       </div>
     </Modal>
   ) : null;

apps/frontend/app/(website)/studio/features/GHRun/components/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "search": "\"Search\"",
+  "run-codemod-on-github-branch": "Run Codemod on Github branch",
+  "select-a-repository-required": "\"Select a repository (required)\"",
+  "select-a-branch-required": "\"Select a branch (required)\"",
+  "run-codemod": "Run Codemod",
+  "yes": "Yes",
+  "no": "No"
+}

apps/frontend/app/(website)/studio/features/ThemeSwitcher/StudioThemeSwitcher.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from "react-i18next";
 import { setMode } from "@features/ThemeSwitcher/setMode";
 import { Moon, Sun } from "@phosphor-icons/react";
 import { IconButton } from "@studio/components/button/IconButton";
 import { useEffect, useState } from "react";
 
 export const StudioThemeSwitcher = () => {
+const { t } = useTranslation("(website)/studio/features/ThemeSwitcher");
+
   const [isLight, setIsLight] = useState<boolean>(true);
 
   useEffect(() => {
@@ -15,7 +18,7 @@ export const StudioThemeSwitcher = () => {
   return (
     <IconButton
       Icon={isLight ? Sun : Moon}
-      text="Theme"
+      text={t('theme')}
       onClick={toggleTheme}
       hint="Change theme"
     />

apps/frontend/app/(website)/studio/features/ThemeSwitcher/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "theme": "\"Theme\""
+}

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/ChatMessage.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import CompanyLogoSVG from "@/assets/icons/company_logo.svg";
 import { cn } from "@/utils";
 import type { LLMMessage } from "@chatbot/types";
@@ -61,6 +62,8 @@ const CodeContent = ({ inline, className, children, message, ...others }) => {
 };
 
 export const ChatMessage = ({ message }: Props) => {
+const { t } = useTranslation("(website)/studio/features/modGPT/ChatWindow/ChatMessage");
+
   const [collapsed, setCollapsed] = useState(message.role === "user");
   const { isDark } = useTheme();
 
@@ -74,7 +77,7 @@ export const ChatMessage = ({ message }: Props) => {
         {message.role === "user" ? (
           <UserIcon />
         ) : (
-          <Image src={CompanyLogoSVG} alt="Codemod Logo" />
+          <Image src={CompanyLogoSVG} alt={t('codemod-logo')} />
         )}
       </div>
       <Button

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/CodeBlock.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
 
@@ -22,6 +23,8 @@ interface Props {
 }
 
 const CodeBlock: FC<Props> = ({ language, value }) => {
+const { t } = useTranslation("(website)/studio/features/modGPT/ChatWindow/ChatMessage");
+
   const { isCopied, copy } = useCopyToClipboard({ timeout: 2000 });
   const { setContent } = useModStore();
   const { isDark } = useTheme();
@@ -41,27 +44,27 @@ const CodeBlock: FC<Props> = ({ language, value }) => {
 
   const copyToCodemodPanelBtn = (
     <ButtonWithTooltip
-      tooltipContent={<>Copy to Codemod panel</>}
+      tooltipContent={<>{t('copy-to-codemod-panel-1')}</>}
       variant="ghost"
       size="icon"
       className={buttonClass}
       onClick={handleCopyToCodemodPanel}
     >
       <ArrowArcRightIcon />
-      <span className="sr-only">Copy to Codemod panel</span>
+      <span className="sr-only">{t('copy-to-codemod-panel-2')}</span>
     </ButtonWithTooltip>
   );
 
   const copyToClipboardBtn = (
     <ButtonWithTooltip
-      tooltipContent={<>Copy to clipboard</>}
+      tooltipContent={<>{t('copy-to-clipboard-1')}</>}
       variant="ghost"
       size="icon"
       className={buttonClass}
       onClick={handleCopyToClipboard}
     >
       {isCopied ? <CheckIcon /> : <CopyIcon />}
-      <span className="sr-only">Copy to clipboard</span>
+      <span className="sr-only">{t('copy-to-clipboard-2')}</span>
     </ButtonWithTooltip>
   );
   return (

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "codemod-logo": "\"Codemod Logo\"",
+  "copy-to-codemod-panel-1": "Copy to Codemod panel",
+  "copy-to-codemod-panel-2": "Copy to Codemod panel",
+  "copy-to-clipboard-1": "Copy to clipboard",
+  "copy-to-clipboard-2": "Copy to clipboard"
+}

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ModelSelector.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "@/utils";
 import { type LLMEngine, llmEngines } from "@codemod-com/utilities";
 import { useTheme } from "@context/useTheme";
@@ -11,6 +12,8 @@ import {
 import { useCFSStore } from "app/(website)/studio/src/store/CFS";
 
 export const EngineSelector = () => {
+const { t } = useTranslation("(website)/studio/features/modGPT/ChatWindow");
+
   const {
     AIAssistant: { engine },
     setEngine,
@@ -28,9 +31,7 @@ export const EngineSelector = () => {
           className={cn("mr-[0.75rem] text-xs font-light text-slate-500", {
             "text-slate-200": isDark,
           })}
-        >
-          LLM:
-        </span>
+        >{t('llm')}</span>
         <SelectValue placeholder={engine} />
       </SelectTrigger>
       <SelectContent>

apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "llm": "LLM:"
+}

apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ControlButtons.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "@/utils";
 import { MagicWand, Stop as StopIcon } from "@phosphor-icons/react";
 import { Button } from "@studio/components/ui/button";
@@ -14,13 +15,14 @@ export const ControlButtons: React.FC<ControlButtonsProps> = ({
   stop,
   expandedHelper,
   toggleHelper,
-}) => (
+}) =>  {
+const { t } = useTranslation("(website)/studio/features/modGPT/PromptPanel");
+
+return (
   <div className="flex h-10 items-center justify-center m-2">
     {isLoading && (
       <Button variant="outline" onClick={stop} className="bg-background">
-        <StopIcon className="mr-2" />
-        Stop generating
-      </Button>
+        <StopIcon className="mr-2" />{t('stop-generating')}</Button>
     )}
     <Button
       variant="outline"
@@ -39,4 +41,5 @@ export const ControlButtons: React.FC<ControlButtonsProps> = ({
       <MagicWand />
     </Button>
   </div>
-);
+)
+};

apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "@/utils";
 import { MagicWand } from "@phosphor-icons/react";
 import Tooltip from "@studio/components/Tooltip/Tooltip";
@@ -11,6 +12,8 @@ export const GenerateTestCasesButton = ({
   handleButtonClick: () => void;
   isTestCaseGenerated: boolean;
 }) => {
+const { t } = useTranslation("(website)/studio/features/modGPT/PromptPanel");
+
   useEffect(() => {
     const t = toast;
     if (isTestCaseGenerated) {
@@ -33,11 +36,7 @@ export const GenerateTestCasesButton = ({
         </button>
       }
       content={
-        <p>
-          {" "}
-          Generate a new pair of before/after based on your existing code
-          examples OR based on the natural language description.
-        </p>
+        <p>{t('generate-new-pair-before-after')}</p>
       }
     />
   );

apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ScrollToBottomButton.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "@/utils";
 import { ArrowDown as ArrowDownIcon } from "@phosphor-icons/react";
 import { Button, type ButtonProps } from "@studio/components/ui/button";
 import { useScrollToBottomDetector } from "@studio/hooks/useScrollToBottomDetector";
 
 export const ScrollToBottomButton = ({ className, ...props }: ButtonProps) => {
+const { t } = useTranslation("(website)/studio/features/modGPT/PromptPanel");
+
   const scrollWindow =
     document.getElementsByClassName("scrollWindow")?.[0] ?? null;
   const isAtBottom = useScrollToBottomDetector(scrollWindow);
@@ -26,7 +29,7 @@ export const ScrollToBottomButton = ({ className, ...props }: ButtonProps) => {
       {...props}
     >
       <ArrowDownIcon />
-      <span className="sr-only">Scroll to bottom</span>
+      <span className="sr-only">{t('scroll-to-bottom')}</span>
     </Button>
   );
 };