[code-infra] Make the API docs builder more configurable (#43574)

docs/pages/base-ui/react-autocomplete/[docsTab]/index.js

@@ -23,7 +23,7 @@ export const getStaticPaths = () => {
 
 export const getStaticProps = () => {
   const useAutocompleteApiReq = require.context(
-    'docs/translations/api-docs/use-autocomplete',
+    'docs/translations/api-docs-base/use-autocomplete',
     false,
     /use-autocomplete.*.json$/,
   );

docs/pages/base-ui/react-badge/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const BadgeApiDescriptions = mapApiPageTranslations(BadgeApiReq);
 
   const useBadgeApiReq = require.context(
-    'docs/translations/api-docs/use-badge',
+    'docs/translations/api-docs-base/use-badge',
     false,
     /use-badge.*.json$/,
   );

docs/pages/base-ui/react-button/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const ButtonApiDescriptions = mapApiPageTranslations(ButtonApiReq);
 
   const useButtonApiReq = require.context(
-    'docs/translations/api-docs/use-button',
+    'docs/translations/api-docs-base/use-button',
     false,
     /use-button.*.json$/,
   );

docs/pages/base-ui/react-form-control/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const FormControlApiDescriptions = mapApiPageTranslations(FormControlApiReq);
 
   const useFormControlContextApiReq = require.context(
-    'docs/translations/api-docs/use-form-control-context',
+    'docs/translations/api-docs-base/use-form-control-context',
     false,
     /use-form-control-context.*.json$/,
   );

docs/pages/base-ui/react-input/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const InputApiDescriptions = mapApiPageTranslations(InputApiReq);
 
   const useInputApiReq = require.context(
-    'docs/translations/api-docs/use-input',
+    'docs/translations/api-docs-base/use-input',
     false,
     /use-input.*.json$/,
   );

docs/pages/base-ui/react-menu/[docsTab]/index.js

@@ -55,35 +55,35 @@ export const getStaticProps = () => {
   const MenuItemApiDescriptions = mapApiPageTranslations(MenuItemApiReq);
 
   const useDropdownApiReq = require.context(
-    'docs/translations/api-docs/use-dropdown',
+    'docs/translations/api-docs-base/use-dropdown',
     false,
     /use-dropdown.*.json$/,
   );
   const useDropdownApiDescriptions = mapApiPageTranslations(useDropdownApiReq);
 
   const useMenuApiReq = require.context(
-    'docs/translations/api-docs/use-menu',
+    'docs/translations/api-docs-base/use-menu',
     false,
     /use-menu.*.json$/,
   );
   const useMenuApiDescriptions = mapApiPageTranslations(useMenuApiReq);
 
   const useMenuButtonApiReq = require.context(
-    'docs/translations/api-docs/use-menu-button',
+    'docs/translations/api-docs-base/use-menu-button',
     false,
     /use-menu-button.*.json$/,
   );
   const useMenuButtonApiDescriptions = mapApiPageTranslations(useMenuButtonApiReq);
 
   const useMenuItemApiReq = require.context(
-    'docs/translations/api-docs/use-menu-item',
+    'docs/translations/api-docs-base/use-menu-item',
     false,
     /use-menu-item.*.json$/,
   );
   const useMenuItemApiDescriptions = mapApiPageTranslations(useMenuItemApiReq);
 
   const useMenuItemContextStabilizerApiReq = require.context(
-    'docs/translations/api-docs/use-menu-item-context-stabilizer',
+    'docs/translations/api-docs-base/use-menu-item-context-stabilizer',
     false,
     /use-menu-item-context-stabilizer.*.json$/,
   );

docs/pages/base-ui/react-modal/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const ModalApiDescriptions = mapApiPageTranslations(ModalApiReq);
 
   const useModalApiReq = require.context(
-    'docs/translations/api-docs/use-modal',
+    'docs/translations/api-docs-base/use-modal',
     false,
     /use-modal.*.json$/,
   );

docs/pages/base-ui/react-number-input/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const NumberInputApiDescriptions = mapApiPageTranslations(NumberInputApiReq);
 
   const useNumberInputApiReq = require.context(
-    'docs/translations/api-docs/use-number-input',
+    'docs/translations/api-docs-base/use-number-input',
     false,
     /use-number-input.*.json$/,
   );

docs/pages/base-ui/react-select/[docsTab]/index.js

@@ -49,14 +49,14 @@ export const getStaticProps = () => {
   const SelectApiDescriptions = mapApiPageTranslations(SelectApiReq);
 
   const useOptionApiReq = require.context(
-    'docs/translations/api-docs/use-option',
+    'docs/translations/api-docs-base/use-option',
     false,
     /use-option.*.json$/,
   );
   const useOptionApiDescriptions = mapApiPageTranslations(useOptionApiReq);
 
   const useOptionContextStabilizerApiReq = require.context(
-    'docs/translations/api-docs/use-option-context-stabilizer',
+    'docs/translations/api-docs-base/use-option-context-stabilizer',
     false,
     /use-option-context-stabilizer.*.json$/,
   );
@@ -65,7 +65,7 @@ export const getStaticProps = () => {
   );
 
   const useSelectApiReq = require.context(
-    'docs/translations/api-docs/use-select',
+    'docs/translations/api-docs-base/use-select',
     false,
     /use-select.*.json$/,
   );

docs/pages/base-ui/react-slider/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const SliderApiDescriptions = mapApiPageTranslations(SliderApiReq);
 
   const useSliderApiReq = require.context(
-    'docs/translations/api-docs/use-slider',
+    'docs/translations/api-docs-base/use-slider',
     false,
     /use-slider.*.json$/,
   );

docs/pages/base-ui/react-snackbar/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const SnackbarApiDescriptions = mapApiPageTranslations(SnackbarApiReq);
 
   const useSnackbarApiReq = require.context(
-    'docs/translations/api-docs/use-snackbar',
+    'docs/translations/api-docs-base/use-snackbar',
     false,
     /use-snackbar.*.json$/,
   );

docs/pages/base-ui/react-switch/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const SwitchApiDescriptions = mapApiPageTranslations(SwitchApiReq);
 
   const useSwitchApiReq = require.context(
-    'docs/translations/api-docs/use-switch',
+    'docs/translations/api-docs-base/use-switch',
     false,
     /use-switch.*.json$/,
   );

docs/pages/base-ui/react-tabs/[docsTab]/index.js

@@ -50,28 +50,28 @@ export const getStaticProps = () => {
   const TabsListApiDescriptions = mapApiPageTranslations(TabsListApiReq);
 
   const useTabApiReq = require.context(
-    'docs/translations/api-docs/use-tab',
+    'docs/translations/api-docs-base/use-tab',
     false,
     /use-tab.*.json$/,
   );
   const useTabApiDescriptions = mapApiPageTranslations(useTabApiReq);
 
   const useTabPanelApiReq = require.context(
-    'docs/translations/api-docs/use-tab-panel',
+    'docs/translations/api-docs-base/use-tab-panel',
     false,
     /use-tab-panel.*.json$/,
   );
   const useTabPanelApiDescriptions = mapApiPageTranslations(useTabPanelApiReq);
 
   const useTabsApiReq = require.context(
-    'docs/translations/api-docs/use-tabs',
+    'docs/translations/api-docs-base/use-tabs',
     false,
     /use-tabs.*.json$/,
   );
   const useTabsApiDescriptions = mapApiPageTranslations(useTabsApiReq);
 
   const useTabsListApiReq = require.context(
-    'docs/translations/api-docs/use-tabs-list',
+    'docs/translations/api-docs-base/use-tabs-list',
     false,
     /use-tabs-list.*.json$/,
   );

docs/pages/base-ui/react-transitions/[docsTab]/index.js

@@ -40,7 +40,7 @@ export const getStaticProps = () => {
   const CssTransitionApiDescriptions = mapApiPageTranslations(CssTransitionApiReq);
 
   const useTransitionStateManagerApiReq = require.context(
-    'docs/translations/api-docs/use-transition-state-manager',
+    'docs/translations/api-docs-base/use-transition-state-manager',
     false,
     /use-transition-state-manager.*.json$/,
   );
@@ -49,7 +49,7 @@ export const getStaticProps = () => {
   );
 
   const useTransitionTriggerApiReq = require.context(
-    'docs/translations/api-docs/use-transition-trigger',
+    'docs/translations/api-docs-base/use-transition-trigger',
     false,
     /use-transition-trigger.*.json$/,
   );

packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts

@@ -86,7 +86,7 @@ Page.getLayout = (page) => {
             apiTabImportStatements += `import ${hook}ApiJsonPageContent from '../../api/${hookNameKebabCase}.json';`;
             staticProps += `
           const ${hook}ApiReq = require.context(
-            'docs/translations/api-docs/${hookNameKebabCase}',
+            'docs/translations/api-docs-base/${hookNameKebabCase}',
             false,
             /${hookNameKebabCase}.*.json$/,
           );

packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts

@@ -510,7 +510,7 @@ export default async function generateHookApi(
     reactApi.description = reactApi.description.slice(0, annotatedDescriptionMatch.index).trim();
   }
 
-  const { getHookImports = defaultGetHookImports } = projectSettings;
+  const { getHookImports = defaultGetHookImports, translationPagesDirectory } = projectSettings;
   reactApi.filename = filename;
   reactApi.name = name;
   reactApi.imports = getHookImports(name, filename);
@@ -545,7 +545,7 @@ export default async function generateHookApi(
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     await generateApiTranslations(
-      path.join(process.cwd(), 'docs/translations/api-docs'),
+      path.join(process.cwd(), translationPagesDirectory),
       reactApi,
       projectSettings.translationLanguages,
     );

packages/api-docs-builder/ProjectSettings.ts

@@ -26,6 +26,11 @@ export interface ProjectSettings {
      * The output path of `pagesApi` generated from `input.pageDirectory`
      */
     apiManifestPath: string;
+    /**
+     * Determine if the API manifest file is created.
+     * @default true
+     */
+    writeApiManifest?: boolean;
   };
   /**
    * Component directories to be used to generate API

packages/api-docs-builder/buildApi.ts

@@ -111,7 +111,8 @@ async function buildSingleProject(
   const tsProjects = projectSettings.typeScriptProjects.map((project) =>
     buildTypeScriptProject(project.name),
   );
-  const apiPagesManifestPath = projectSettings.output.apiManifestPath;
+
+  const { apiManifestPath: apiPagesManifestPath, writeApiManifest = true } = projectSettings.output;
 
   const manifestDir = apiPagesManifestPath.match(/(.*)\/[^/]+\./)?.[1];
   if (manifestDir) {
@@ -189,12 +190,14 @@ async function buildSingleProject(
     process.exit(1);
   }
 
-  let source = `module.exports = ${JSON.stringify(projectSettings.getApiPages())}`;
-  if (projectSettings.onWritingManifestFile) {
-    source = projectSettings.onWritingManifestFile(builds, source);
-  }
+  if (writeApiManifest) {
+    let source = `module.exports = ${JSON.stringify(projectSettings.getApiPages())}`;
+    if (projectSettings.onWritingManifestFile) {
+      source = projectSettings.onWritingManifestFile(builds, source);
+    }
 
-  await writePrettifiedFile(apiPagesManifestPath, source);
+    await writePrettifiedFile(apiPagesManifestPath, source);
+  }
 
   await projectSettings.onCompleted?.();
   return builds;

packages/api-docs-builder/utils/findPagesMarkdown.ts

@@ -24,14 +24,14 @@ export default function findPagesMarkdown(
     }
 
     // Ignore non en-US source markdown.
-    if (!/\.md$/.test(item) || /-(zh|pt)\.md/.test(item)) {
+    if (!/\.mdx?$/.test(item) || /-(zh|pt)\.mdx?/.test(item)) {
       return;
     }
 
     let pathname = filename
       .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
       .replace(/^.*\/data/, '')
-      .replace('.md', '');
+      .replace(/\.mdx?/, '');
 
     // Remove the last pathname segment.
     pathname = pathname