[code-infra] Embed translations in the @mui/docs package (#41246)

docs/pages/_app.js

@@ -28,6 +28,7 @@ import findActivePage from 'docs/src/modules/utils/findActivePage';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import { DocsProvider } from '@mui/docs/DocsProvider';
+import { mapTranslations } from '@mui/docs/i18n';
 import './global.css';
 import '../public/static/components-gallery/base-theme.css';
 import config from '../config';
@@ -295,7 +296,11 @@ function AppWrapper(props) {
         <meta name="mui:productId" content={productId} />
         <meta name="mui:productCategoryId" content={productCategoryId} />
       </NextHead>
-      <DocsProvider config={config} defaultUserLanguage={pageProps.userLanguage}>
+      <DocsProvider
+        config={config}
+        defaultUserLanguage={pageProps.userLanguage}
+        translations={pageProps.translations}
+      >
         <CodeCopyProvider>
           <CodeStylingProvider>
             <CodeVariantProvider>
@@ -340,13 +345,17 @@ MyApp.propTypes = {
 MyApp.getInitialProps = async ({ ctx, Component }) => {
   let pageProps = {};
 
+  const req = require.context('docs/translations', false, /translations.*\.json$/);
+  const translations = mapTranslations(req);
+
   if (Component.getInitialProps) {
     pageProps = await Component.getInitialProps(ctx);
   }
 
   return {
     pageProps: {
       userLanguage: ctx.query.userLanguage || 'en',
+      translations,
       ...pageProps,
     },
   };

docs/scripts/i18n.js → docs/scripts/i18n.ts

@@ -6,6 +6,7 @@ import materialPages from 'docs/data/material/pages';
 import systemPages from 'docs/data/system/pages';
 import basePages from 'docs/data/base/pages';
 import joyPages from 'docs/data/joy/pages';
+import { MuiPage } from 'docs/src/MuiPage';
 
 const EXCLUDES = ['/api', '/blog', '/x/react-'];
 
@@ -21,7 +22,7 @@ async function run() {
   /**
    * @param {readonly import('docs/src/MuiPage').MuiPage[]} pages
    */
-  const traverse = (pages) => {
+  const traverse = (pages: MuiPage[]) => {
     pages.forEach((page) => {
       if (
         (page.pathname !== '/' && page.pathname === '/api-docs') ||

docs/scripts/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["*.ts", "i18n.js"],
+  "include": ["*.ts"],
   "compilerOptions": {
     "allowJs": true,
     "isolatedModules": true,

docs/translations/translations.json

@@ -1,216 +1,4 @@
 {
-  "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist us in your blocker.",
-  "api-docs": {
-    "componentName": "Component name",
-    "componentsApi": "Components API",
-    "themeDefaultProps": "Theme default props",
-    "themeDefaultPropsDescription": "You can use <code>{{muiName}}</code> to change the default props of this component <a href={{defaultPropsLink}}>with the theme</a>.",
-    "classes": "CSS classes",
-    "classesDescription": "These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.",
-    "className": "Class name",
-    "cssDescription": "The following class names are useful for styling with CSS (the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">state classes</a> are marked). <br /> To learn more, visit the <a href=\"/material-ui/customization/theme-components/\">component customization</a> page.",
-    "css": "CSS",
-    "cssComponent": "As a CSS utility, the {{name}} component also supports all <a href=\"/system/properties/\"><code>system</code></a> properties. You can use them as props directly on the component.",
-    "default": "Default",
-    "defaultComponent": "Default component",
-    "defaultValue": "Default value",
-    "defaultHTMLTag": "Default HTML tag",
-    "demos": "Component demos",
-    "deprecated": "Deprecated",
-    "description": "Description",
-    "globalClass": "Global class",
-    "defaultClass": "Default class",
-    "hookName": "Hook name",
-    "hooksApi": "Hooks API",
-    "hooksNoParameters": "This hook does not accept any input parameters.",
-    "hooksPageDescription": "API reference docs for the {{name}} hook. Learn about the input parameters and other APIs of this exported module.",
-    "import": "Import",
-    "importDifference": "Learn about the difference by <a href=\"/material-ui/guides/minimizing-bundle-size/\">reading this guide on minimizing bundle size</a>.",
-    "inheritance": "Inheritance",
-    "inheritanceDescription": "While not explicitly documented above, the props of the <a href=\"{{pathname}}\">{{component}}</a> component{{suffix}} are also available in {{name}}. You can take advantage of this to <a href=\"/material-ui/guides/api/#spread\">target nested components</a>.",
-    "inheritanceSuffixTransition": " from react-transition-group",
-    "name": "Name",
-    "nativeElement": "native",
-    "overrideStyles": "You can override the style of the component using one of these customization options:\n",
-    "overrideStylesStyledComponent": "<ul>\n<li>With a <a href=\"/material-ui/integrations/interoperability/#global-css\">global class name</a>.</li>\n<li>With a rule name as part of the component's <a href=\"{{styleOverridesLink}}\"><code>styleOverrides</code> property</a> in a custom theme.</li>\n</ul>",
-    "pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.",
-    "props": "Props",
-    "properties": "Properties",
-    "parameters": "Parameters",
-    "requires-ref": "This <a href=\"/material-ui/guides/composition/#caveat-with-refs\">needs to be able to hold a ref</a>.",
-    "returns": "Returns: ",
-    "returnValue": "Return value",
-    "refNotHeld": "The component cannot hold a ref.",
-    "refRootElement": "The <code>ref</code> is forwarded to the root element.",
-    "ruleName": "Rule name",
-    "signature": "Signature",
-    "slots": "Slots",
-    "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
-    "state": "STATE",
-    "styleOverrides": "The name <code>{{componentStyles.name}}</code> can be used when providing <a href={{defaultPropsLink}}>default props</a> or <a href={{styleOverridesLink}}>style overrides</a> in the theme.",
-    "slotDescription": "To learn how to customize the slot, check out the <a href={{slotGuideLink}}>Overriding component structure</a> guide.",
-    "slotName": "Slot name",
-    "type": "Type",
-    "required": "Required",
-    "optional": "Optional",
-    "additional-info": {
-      "cssApi": "See <a href='#classes'>CSS classes API</a> below for more details.",
-      "sx": "See the <a href='/system/getting-started/the-sx-prop/'>`sx` page</a> for more details.",
-      "slotsApi": "See <a href='#slots'>Slots API</a> below for more details.",
-      "joy-size": "To learn how to add custom sizes to the component, check out <a href='/joy-ui/customization/themed-components/#extend-sizes'>Themed components—Extend sizes</a>.",
-      "joy-color": "To learn how to add your own colors, check out <a href='/joy-ui/customization/themed-components/#extend-colors'>Themed components—Extend colors</a>.",
-      "joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
-    }
-  },
-  "landingPageDescr": "A responsive landing page layout with many common sections.",
-  "landingPageTitle": "Landing page",
-  "searchButton": "Search…",
-  "algoliaSearch": "What are you looking for?",
-  "appFrame": {
-    "changeLanguage": "Change language",
-    "github": "GitHub repository",
-    "helpToTranslate": "Help to translate",
-    "openDrawer": "Open main navigation",
-    "skipToContent": "Skip to content",
-    "toggleSettings": "Toggle settings drawer"
-  },
-  "backToTop": "Scroll back to top",
-  "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
-  "blogTitle": "Blog",
-  "bundleSize": "Bundle size",
-  "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
-  "cancel": "Cancel",
-  "cdn": "or use a CDN.",
-  "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
-  "checkoutTitle": "Checkout",
-  "clickToCopy": "Click to copy",
-  "close": "Close",
-  "codesandbox": "Edit in CodeSandbox",
-  "copied": "Copied",
-  "copiedSource": "The source code has been copied to your clipboard.",
-  "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
-  "copySource": "Copy the source",
-  "copySourceLinkJS": "Copy link to JavaScript source",
-  "copySourceLinkTS": "Copy link to TypeScript source",
-  "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
-  "dashboardTitle": "Dashboard",
-  "decreaseSpacing": "decrease spacing",
-  "demoToolbarLabel": "demo source",
-  "demoStylingSelectSystem": "MUI System",
-  "demoStylingSelectTailwind": "Tailwind CSS",
-  "demoStylingSelectCSS": "Plain CSS",
-  "diamondSponsors": "Diamond sponsors",
-  "becomeADiamondSponsor": "Become a Diamond sponsor",
-  "diamondSponsorVacancies": "One spot left!",
-  "editorHint": "Press <kbd>Enter</kbd> to start editing",
-  "editPage": "Edit this page",
-  "emojiLove": "Love",
-  "emojiWarning": "Warning",
-  "expandAll": "Expand all",
-  "feedbackCommentLabel": "Comment",
-  "feedbackFailed": "Couldn't submit feedback. Please try again later.",
-  "feedbackMessage": "Was this page helpful?",
-  "feedbackMessageDown": "How can we improve this page? (optional)",
-  "feedbackMessageUp": "What did you like about this page? (optional)",
-  "feedbackSectionSpecific": "How can we improve the <strong>{{sectionName}}</strong> section? (optional)",
-  "feedbackMessageToGitHub": {
-    "usecases": "If something is broken or if you need a reply to a problem you've encountered, please",
-    "reasonWhy": "Otherwise, the team won't be able to answer back or ask for more information.",
-    "callToAction": {
-      "link": "open an issue instead."
-    }
-  },
-  "feedbackNo": "No",
-  "feedbackSubmitted": "Feedback submitted",
-  "feedbackYes": "Yes",
-  "footerCompany": "Company",
-  "goToHome": "go to homepage",
-  "getProfessionalSupport": "Get Professional Support",
-  "getStarted": "Get Started",
-  "githubLabel": "Feedback",
-  "headTitle": "MUI: A popular React UI framework",
-  "hideFullSource": "Collapse code",
-  "hideSource": "Hide code",
-  "homeQuickWord": "A quick word from our sponsors:",
-  "increaseSpacing": "increase spacing",
-  "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.",
-  "installation": "Installation",
-  "installButton": "Read installation docs",
-  "installDescr": "Install MUI's source files via npm. We take care of injecting the CSS needed.",
-  "joinThese": "Join these and other great organizations!",
-  "JS": "JavaScript",
-  "letUsKnow": "Let us know!",
-  "likeMui": "Help us keep running",
-  "loadFont": "Load the default Roboto font.",
-  "mainNavigation": "documentation",
-  "newest": "Newest",
-  "openDrawer": "Open documentation navigation",
-  "or": "or",
-  "pageTOC": "Page table of contents",
-  "praise": "Praise for MUI",
-  "praiseDescr": "Here's what some of our users are saying.",
-  "pricingDescr": "Quickly build an effective pricing table for your potential customers.",
-  "pricingTitle": "Pricing",
-  "resetDemo": "Reset demo",
-  "resetDensity": "Reset density",
-  "resetFocus": "Reset focus to test keyboard navigation",
-  "searchIcons": {
-    "learnMore": "Learn more about the import"
-  },
-  "seeMore": "See more",
-  "settings": {
-    "color": "Color",
-    "dark": "Dark",
-    "direction": "Direction",
-    "editWebsiteColors": "Edit website colors",
-    "light": "Light",
-    "ltr": "Left to right",
-    "mode": "Mode",
-    "rtl": "Right to left",
-    "settings": "Settings",
-    "system": "System",
-    "language": "Language"
-  },
-  "showFullSource": "Expand code",
-  "showJSSource": "Show JavaScript source",
-  "showSource": "Show code",
-  "showTSSource": "Show TypeScript source",
-  "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
-  "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
-  "signInSideTitle": "Sign-in side",
-  "signInTitle": "Sign-in",
-  "signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",
-  "signUpTitle": "Sign-up",
-  "sourceCode": "Source code",
-  "spacingUnit": "Spacing unit",
-  "stackblitz": "Edit in StackBlitz",
-  "stars": "GitHub stars",
-  "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
-  "stickyFooterTitle": "Sticky footer",
-  "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
-  "submit": "Submit",
-  "tableOfContents": "Contents",
-  "thanks": "Thank you!",
-  "themes": "Premium themes",
-  "themesButton": "Browse themes",
-  "themesDescr": "Take your project to the next level with premium themes from our store – all built on MUI.",
-  "toggleNotifications": "Toggle notifications panel",
-  "toggleRTL": "Toggle right-to-left/left-to-right",
-  "traffic": "Traffic",
-  "TS": "TypeScript",
-  "v5IsOut": "🎉 v5 release candidate is out! Head to the",
-  "v5docsLink": "v5 documentation",
-  "v5startAdoption": "to get started.",
-  "unreadNotifications": "unread notifications",
-  "usage": "Usage",
-  "usageButton": "Explore the docs",
-  "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",
-  "useDarkTheme": "Use dark theme",
-  "useHighDensity": "Apply higher density via props",
-  "usingMui": "Are you using MUI?",
-  "viewGitHub": "View the source on GitHub",
-  "visit": "Visit the website",
-  "whosUsing": "Who's using MUI?",
   "pages": {
     "/system/getting-started-group": "Getting started",
     "/system/getting-started": "Overview",

package.json

@@ -30,7 +30,7 @@
     "docs:size-why": "cross-env DOCS_STATS_ENABLED=true pnpm docs:build",
     "docs:start": "pnpm --filter docs start",
     "docs:create-playground": "pnpm --filter docs create-playground",
-    "docs:i18n": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/i18n.js",
+    "docs:i18n": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/i18n.ts",
     "docs:link-check": "pnpm --filter docs link-check",
     "docs:typescript": "pnpm docs:typescript:formatted --watch",
     "docs:typescript:check": "pnpm --filter docs typescript",

packages/mui-docs/src/DocsProvider/DocsProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { UserLanguageProvider } from '../i18n';
+import { Translations, UserLanguageProvider } from '../i18n';
 
 export interface DocsConfig {
   LANGUAGES: string[];
@@ -14,12 +14,18 @@ export interface DocsProviderProps {
   config: DocsConfig;
   defaultUserLanguage: string;
   children?: React.ReactNode;
+  translations?: Translations;
 }
 
-export function DocsProvider({ config, defaultUserLanguage, children }: DocsProviderProps) {
+export function DocsProvider({
+  config,
+  defaultUserLanguage,
+  translations,
+  children,
+}: DocsProviderProps) {
   return (
     <DocsConfigContext.Provider value={config}>
-      <UserLanguageProvider defaultUserLanguage={defaultUserLanguage}>
+      <UserLanguageProvider defaultUserLanguage={defaultUserLanguage} translations={translations}>
         {children}
       </UserLanguageProvider>
     </DocsConfigContext.Provider>